\n \n \n {\n handleOnClick('dismiss')\n }}\n >\n {cookiePolicyBannerDecline}\n \n {\n handleOnClick('allow')\n }}\n >\n {cookiePolicyBannerAccept}\n \n
\n \n )\n}\n\nconst CookiesBanner = styled.div`\n animation: ${props => props.animation} 1s;\n opacity: ${props => props.opacity};\n display: flex;\n position: fixed;\n z-index: 30;\n width: 100%;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n background-color: ${color.costaRed};\n color: ${color.white};\n font-size: 16px;\n font-family: Helvetica, Calibri, Arial, sans-serif;\n line-height: 24px;\n padding: 16px 29px;\n\n ${above.mobile`\n flex-direction: row;\n flex-wrap: nowrap;\n `}\n\n span a {\n text-decoration: underline;\n opacity: 0.8;\n padding: 3px;\n :hover {\n opacity: 1;\n }\n }\n\n > div {\n padding-top: 16px;\n display: flex;\n flex-wrap: no-wrap;\n\n ${above.mobile`\n padding-top: 0;\n `}\n }\n\n p {\n margin: 0;\n ${bodyTwo}\n }\n\n a {\n text-decoration: underline;\n color: ${color.white};\n opacity: 0.8;\n }\n\n button {\n animation: ${buttonFadeIn} 0.5s;\n color: ${color.white};\n border-style: none;\n height: 40px;\n text-align: center;\n background-color: ${color.lightRed};\n width: 140px;\n padding: 8px 12px;\n font-weight: 700;\n font-family: proxima-nova, sans-serif;\n font-size: 14px;\n\n margin-left: 7px;\n\n :hover {\n cursor: pointer;\n animation: ${buttonFadeOut} 0.5s;\n background-color: transparent;\n text-decoration: underline;\n }\n\n :focus {\n animation: ${buttonFadeOut} 0.5s;\n background-color: transparent;\n }\n }\n`\n\nexport default ConsentBanner\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect } from 'react'\nimport cookie from '../../helpers/cookie'\nimport ConsentBanner from './consentBanner'\n\nconst ConsentBannerWrapper = ({ setAllowTracking, locale }) => {\n const [showBanner, setShowBanner] = useState(false)\n\n useEffect(() => {\n setShowBanner(!cookie.hasChosenCookieSettings())\n\n if (cookie.areCookiesAllowed()) {\n setAllowTracking(true)\n window[`ga-disable-${process.env.GATSBY_GA_UA}`] = false\n } else {\n window[`ga-disable-${process.env.GATSBY_GA_UA}`] = true\n window._satellite = {\n track: () => {},\n pageBottom: () => {},\n }\n }\n }, [showBanner])\n\n return showBanner && \n}\n\nexport default ConsentBannerWrapper\n","import React from 'react'\nimport { Helmet } from 'react-helmet'\n\nconst LoadAdobe = ({ oneTrustEnabled }) => (\n \n \n \n)\n\nexport default LoadAdobe\n","import React, { useState } from 'react'\nimport { useStaticQuery, graphql } from 'gatsby'\nimport ConsentBannerWrapper from './components/consentBannerWrapper/consentBannerWrapper'\nimport LoadAdobe from './utils/LoadAdobe'\n\nconst extractLocaleFromUrl = location =>\n location.pathname.match(/\\/[a-z]{2}\\//) ? location.pathname.match(/\\/[a-z]{2}\\//)[0].replace(/\\//g, '') : undefined\n\nconst LoadConsent = ({ element, props, loadOneTrust }) => {\n const { pageContext, location } = props\n const [allowTracking, setAllowTracking] = useState(false)\n const { allContentfulLocale } = useStaticQuery(graphql`\n {\n allContentfulLocale {\n nodes {\n code\n default\n }\n }\n }\n `)\n\n const retrievedLocale =\n allContentfulLocale.nodes.find(locale => locale.code === extractLocaleFromUrl(location)) ||\n allContentfulLocale.nodes.find(locale => locale.default)\n\n return (\n <>\n {(loadOneTrust || allowTracking) && }\n {!loadOneTrust && }\n {element}\n \n )\n}\n\nexport default LoadConsent\n","import React from 'react'\nimport { TrackJS } from 'trackjs'\nimport { version } from './package.json'\nimport { PageContextProvider } from './src/context/PageContext'\nimport LoadConsent from './src/loadConsent'\n\nconst token = process.env.GATSBY_TRACKJS_TOKEN || ''\nconst application = process.env.GATSBY_TRACKJS_APPLICATION || ''\nconst loadOneTrust = process.env.GATSBY_LOAD_ONETRUST === 'true'\n\nif (application) {\n TrackJS.install({\n token,\n application,\n version,\n })\n}\n\nexport const wrapPageElement = page => (\n \n \n \n)\n","import { Global } from '@emotion/react';\nimport * as React from 'react';\n\nvar CSSReset = function CSSReset() {\n return /*#__PURE__*/React.createElement(Global, {\n styles: \"\\n html {\\n line-height: 1.5;\\n -webkit-text-size-adjust: 100%;\\n font-family: system-ui, sans-serif;\\n -webkit-font-smoothing: antialiased;\\n text-rendering: optimizeLegibility;\\n -moz-osx-font-smoothing: grayscale;\\n touch-action: manipulation;\\n }\\n\\n body {\\n position: relative;\\n min-height: 100%;\\n font-feature-settings: 'kern';\\n }\\n\\n *,\\n *::before,\\n *::after {\\n border-width: 0;\\n border-style: solid;\\n box-sizing: border-box;\\n }\\n\\n main {\\n display: block;\\n }\\n\\n hr {\\n border-top-width: 1px;\\n box-sizing: content-box;\\n height: 0;\\n overflow: visible;\\n }\\n\\n pre,\\n code,\\n kbd,\\n samp {\\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;\\n font-size: 1em;\\n }\\n\\n a {\\n background-color: transparent;\\n color: inherit;\\n text-decoration: inherit;\\n }\\n\\n abbr[title] {\\n border-bottom: none;\\n text-decoration: underline;\\n -webkit-text-decoration: underline dotted;\\n text-decoration: underline dotted;\\n }\\n\\n b,\\n strong {\\n font-weight: bold;\\n }\\n\\n small {\\n font-size: 80%;\\n }\\n\\n sub,\\n sup {\\n font-size: 75%;\\n line-height: 0;\\n position: relative;\\n vertical-align: baseline;\\n }\\n\\n sub {\\n bottom: -0.25em;\\n }\\n\\n sup {\\n top: -0.5em;\\n }\\n\\n img {\\n border-style: none;\\n }\\n\\n button,\\n input,\\n optgroup,\\n select,\\n textarea {\\n font-family: inherit;\\n font-size: 100%;\\n line-height: 1.15;\\n margin: 0;\\n }\\n\\n button,\\n input {\\n overflow: visible;\\n }\\n\\n button,\\n select {\\n text-transform: none;\\n }\\n\\n button::-moz-focus-inner,\\n [type=\\\"button\\\"]::-moz-focus-inner,\\n [type=\\\"reset\\\"]::-moz-focus-inner,\\n [type=\\\"submit\\\"]::-moz-focus-inner {\\n border-style: none;\\n padding: 0;\\n }\\n\\n fieldset {\\n padding: 0.35em 0.75em 0.625em;\\n }\\n\\n legend {\\n box-sizing: border-box;\\n color: inherit;\\n display: table;\\n max-width: 100%;\\n padding: 0;\\n white-space: normal;\\n }\\n\\n progress {\\n vertical-align: baseline;\\n }\\n\\n textarea {\\n overflow: auto;\\n }\\n\\n [type=\\\"checkbox\\\"],\\n [type=\\\"radio\\\"] {\\n box-sizing: border-box;\\n padding: 0;\\n }\\n\\n [type=\\\"number\\\"]::-webkit-inner-spin-button,\\n [type=\\\"number\\\"]::-webkit-outer-spin-button {\\n -webkit-appearance: none !important;\\n }\\n\\n input[type=\\\"number\\\"] {\\n -moz-appearance: textfield;\\n }\\n\\n [type=\\\"search\\\"] {\\n -webkit-appearance: textfield;\\n outline-offset: -2px;\\n }\\n\\n [type=\\\"search\\\"]::-webkit-search-decoration {\\n -webkit-appearance: none !important;\\n }\\n\\n ::-webkit-file-upload-button {\\n -webkit-appearance: button;\\n font: inherit;\\n }\\n\\n details {\\n display: block;\\n }\\n\\n summary {\\n display: list-item;\\n }\\n\\n template {\\n display: none;\\n }\\n\\n [hidden] {\\n display: none !important;\\n }\\n\\n body,\\n blockquote,\\n dl,\\n dd,\\n h1,\\n h2,\\n h3,\\n h4,\\n h5,\\n h6,\\n hr,\\n figure,\\n p,\\n pre {\\n margin: 0;\\n }\\n\\n button {\\n background: transparent;\\n padding: 0;\\n }\\n\\n fieldset {\\n margin: 0;\\n padding: 0;\\n }\\n\\n ol,\\n ul {\\n margin: 0;\\n padding: 0;\\n }\\n\\n textarea {\\n resize: vertical;\\n }\\n\\n button,\\n [role=\\\"button\\\"] {\\n cursor: pointer;\\n }\\n\\n button::-moz-focus-inner {\\n border: 0 !important;\\n }\\n\\n table {\\n border-collapse: collapse;\\n }\\n\\n h1,\\n h2,\\n h3,\\n h4,\\n h5,\\n h6 {\\n font-size: inherit;\\n font-weight: inherit;\\n }\\n\\n button,\\n input,\\n optgroup,\\n select,\\n textarea {\\n padding: 0;\\n line-height: inherit;\\n color: inherit;\\n }\\n\\n img,\\n svg,\\n video,\\n canvas,\\n audio,\\n iframe,\\n embed,\\n object {\\n display: block;\\n }\\n\\n img,\\n video {\\n max-width: 100%;\\n height: auto;\\n }\\n\\n [data-js-focus-visible] :focus:not([data-focus-visible-added]) {\\n outline: none;\\n box-shadow: none;\\n }\\n\\n select::-ms-expand {\\n display: none;\\n }\\n \"\n });\n};\n\nvar CSSReset$1 = CSSReset;\nexport { CSSReset, CSSReset$1 as default };","import * as React from 'react';\nimport React__default, { useState, useMemo, useCallback, useEffect, useRef } from 'react';\nimport { u as useCallbackRef, a as useSafeLayoutEffect, b as useEventListener } from './use-animation-state-5054a9f7.esm.js';\nexport { c as useAnimationState, u as useCallbackRef, b as useEventListener, a as useSafeLayoutEffect } from './use-animation-state-5054a9f7.esm.js';\nimport copy from 'copy-to-clipboard';\nimport { runIfFn, getBox, callAllHandlers, wrapPointerEventHandler, getPointerEventName, hasFocusWithin, focus, getActiveElement, contains, isTabbable, detectBrowser, isRefObject, isActiveElement, getOwnerDocument, getAllFocusable, noop, PanSession } from '@chakra-ui/utils';\n/**\n * React hook to manage boolean (on - off) states\n *\n * @param initialState the initial boolean state value\n */\n\nfunction useBoolean(initialState) {\n if (initialState === void 0) {\n initialState = false;\n }\n\n var _useState = useState(initialState),\n value = _useState[0],\n setValue = _useState[1];\n\n var callbacks = useMemo(function () {\n return {\n on: function on() {\n return setValue(true);\n },\n off: function off() {\n return setValue(false);\n },\n toggle: function toggle() {\n return setValue(function (prev) {\n return !prev;\n });\n }\n };\n }, []);\n return [value, callbacks];\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded = [\"timeout\"];\n/**\n * React hook to copy content to clipboard\n *\n * @param text the text or value to copy\n * @param {Number} [optionsOrTimeout=1500] optionsOrTimeout - delay (in ms) to switch back to initial state once copied.\n * @param {Object} optionsOrTimeout\n * @param {string} optionsOrTimeout.format - set the desired MIME type\n * @param {number} optionsOrTimeout.timeout - delay (in ms) to switch back to initial state once copied.\n */\n\nfunction useClipboard(text, optionsOrTimeout) {\n if (optionsOrTimeout === void 0) {\n optionsOrTimeout = {};\n }\n\n var _useState = useState(false),\n hasCopied = _useState[0],\n setHasCopied = _useState[1];\n\n var _ref = typeof optionsOrTimeout === \"number\" ? {\n timeout: optionsOrTimeout\n } : optionsOrTimeout,\n _ref$timeout = _ref.timeout,\n timeout = _ref$timeout === void 0 ? 1500 : _ref$timeout,\n copyOptions = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n var onCopy = useCallback(function () {\n var didCopy = copy(text, copyOptions);\n setHasCopied(didCopy);\n }, [text, copyOptions]);\n useEffect(function () {\n var timeoutId = null;\n\n if (hasCopied) {\n timeoutId = window.setTimeout(function () {\n setHasCopied(false);\n }, timeout);\n }\n\n return function () {\n if (timeoutId) {\n window.clearTimeout(timeoutId);\n }\n };\n }, [timeout, hasCopied]);\n return {\n value: text,\n onCopy: onCopy,\n hasCopied: hasCopied\n };\n}\n/**\n * Creates a constant value over the lifecycle of a component.\n *\n * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer\n * a guarantee that it won't re-run for performance reasons later on. By using `useConst`\n * you can ensure that initializers don't execute twice or more.\n */\n\n\nfunction useConst(init) {\n // Use useRef to store the value because it's the least expensive built-in\n // hook that works here. We could also use `useState` but that's more\n // expensive internally due to reducer handling which we don't need.\n var ref = useRef(null);\n\n if (ref.current === null) {\n ref.current = typeof init === \"function\" ? init() : init;\n }\n\n return ref.current;\n}\n\nfunction useControllableProp(prop, state) {\n var isControlled = prop !== undefined;\n var value = isControlled && typeof prop !== \"undefined\" ? prop : state;\n return [isControlled, value];\n}\n/**\n * React hook for using controlling component state.\n * @param props\n */\n\n\nfunction useControllableState(props) {\n var valueProp = props.value,\n defaultValue = props.defaultValue,\n onChange = props.onChange,\n _props$shouldUpdate = props.shouldUpdate,\n shouldUpdate = _props$shouldUpdate === void 0 ? function (prev, next) {\n return prev !== next;\n } : _props$shouldUpdate;\n var onChangeProp = useCallbackRef(onChange);\n var shouldUpdateProp = useCallbackRef(shouldUpdate);\n\n var _React$useState = React.useState(defaultValue),\n valueState = _React$useState[0],\n setValue = _React$useState[1];\n\n var isControlled = valueProp !== undefined;\n var value = isControlled ? valueProp : valueState;\n var updateValue = React.useCallback(function (next) {\n var nextValue = runIfFn(next, value);\n\n if (!shouldUpdateProp(value, nextValue)) {\n return;\n }\n\n if (!isControlled) {\n setValue(nextValue);\n }\n\n onChangeProp(nextValue);\n }, [isControlled, onChangeProp, value, shouldUpdateProp]);\n return [value, updateValue];\n}\n/**\n * React hook to measure a component's dimensions\n *\n * @param ref ref of the component to measure\n * @param observe if `true`, resize and scroll observers will be turned on\n */\n\n\nfunction useDimensions(ref, observe) {\n var _React$useState = React.useState(null),\n dimensions = _React$useState[0],\n setDimensions = _React$useState[1];\n\n var rafId = React.useRef();\n useSafeLayoutEffect(function () {\n if (!ref.current) return undefined;\n var node = ref.current;\n\n function measure() {\n rafId.current = requestAnimationFrame(function () {\n var boxModel = getBox(node);\n setDimensions(boxModel);\n });\n }\n\n measure();\n\n if (observe) {\n window.addEventListener(\"resize\", measure);\n window.addEventListener(\"scroll\", measure);\n }\n\n return function () {\n if (observe) {\n window.removeEventListener(\"resize\", measure);\n window.removeEventListener(\"scroll\", measure);\n }\n\n if (rafId.current) {\n cancelAnimationFrame(rafId.current);\n }\n };\n }, [observe]);\n return dimensions;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n} // This implementation is heavily inspired by react-aria's implementation\n\n\nvar defaultIdContext = {\n current: 1\n};\nvar IdContext = /*#__PURE__*/React.createContext(defaultIdContext);\nvar IdProvider = /*#__PURE__*/React.memo(function (_ref) {\n var children = _ref.children;\n return /*#__PURE__*/React.createElement(IdContext.Provider, {\n value: {\n current: 1\n }\n }, children);\n});\n\nvar genId = function genId(context) {\n return context.current++;\n};\n\nfunction useId(idProp, prefix) {\n var context = React.useContext(IdContext);\n /*\n We get the current id by context and generate a new id inside useEffect so that the side effects occur during the commit phase,\n Doing this prevents the side effects from being called twice when used with strict mode (render() in function component is the function body), which ends up making the server with the client not synchronized\n */\n\n var _React$useState = React.useState(context.current),\n id = _React$useState[0],\n setId = _React$useState[1];\n\n React.useEffect(function () {\n setId(genId(context));\n }, [context]);\n return React.useMemo(function () {\n return idProp || [prefix, id].filter(Boolean).join(\"-\");\n }, [idProp, prefix, id]);\n}\n/**\n * React hook to generate ids for use in compound components\n *\n * @param idProp the external id passed from the user\n * @param prefixes array of prefixes to use\n *\n * @example\n *\n * ```js\n * const [buttonId, menuId] = useIds(\"52\", \"button\", \"menu\")\n *\n * // buttonId will be `button-52`\n * // menuId will be `menu-52`\n * ```\n */\n\n\nfunction useIds(idProp) {\n for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n prefixes[_key - 1] = arguments[_key];\n }\n\n var id = useId(idProp);\n return React.useMemo(function () {\n return prefixes.map(function (prefix) {\n return prefix + \"-\" + id;\n });\n }, [id, prefixes]);\n}\n/**\n * Used to generate an id, and after render, check if that id is rendered, so we know\n * if we can use it in places such as `aria-labelledby`.\n *\n * @param partId - The unique id for the component part\n *\n * @example\n * const { ref, id } = useOptionalPart(`${id}-label`)\n */\n\n\nfunction useOptionalPart(partId) {\n var _React$useState2 = React.useState(null),\n id = _React$useState2[0],\n setId = _React$useState2[1];\n\n var ref = React.useCallback(function (node) {\n setId(node ? partId : null);\n }, [partId]);\n return {\n ref: ref,\n id: id,\n isRendered: Boolean(id)\n };\n}\n\nfunction useDisclosure(props) {\n if (props === void 0) {\n props = {};\n }\n\n var _props = props,\n onCloseProp = _props.onClose,\n onOpenProp = _props.onOpen,\n isOpenProp = _props.isOpen,\n idProp = _props.id;\n var onOpenPropCallbackRef = useCallbackRef(onOpenProp);\n var onClosePropCallbackRef = useCallbackRef(onCloseProp);\n\n var _React$useState = React.useState(props.defaultIsOpen || false),\n isOpenState = _React$useState[0],\n setIsOpen = _React$useState[1];\n\n var _useControllableProp = useControllableProp(isOpenProp, isOpenState),\n isControlled = _useControllableProp[0],\n isOpen = _useControllableProp[1];\n\n var id = useId(idProp, \"disclosure\");\n var onClose = React.useCallback(function () {\n if (!isControlled) {\n setIsOpen(false);\n }\n\n onClosePropCallbackRef == null ? void 0 : onClosePropCallbackRef();\n }, [isControlled, onClosePropCallbackRef]);\n var onOpen = React.useCallback(function () {\n if (!isControlled) {\n setIsOpen(true);\n }\n\n onOpenPropCallbackRef == null ? void 0 : onOpenPropCallbackRef();\n }, [isControlled, onOpenPropCallbackRef]);\n var onToggle = React.useCallback(function () {\n var action = isOpen ? onClose : onOpen;\n action();\n }, [isOpen, onOpen, onClose]);\n return {\n isOpen: !!isOpen,\n onOpen: onOpen,\n onClose: onClose,\n onToggle: onToggle,\n isControlled: isControlled,\n getButtonProps: function getButtonProps(props) {\n if (props === void 0) {\n props = {};\n }\n\n return _extends({}, props, {\n \"aria-expanded\": \"true\",\n \"aria-controls\": id,\n onClick: callAllHandlers(props.onClick, onToggle)\n });\n },\n getDisclosureProps: function getDisclosureProps(props) {\n if (props === void 0) {\n props = {};\n }\n\n return _extends({}, props, {\n hidden: !isOpen,\n id: id\n });\n }\n };\n}\n/**\n * React hook for performant `useCallbacks`\n *\n * @see https://github.com/facebook/react/issues/14099#issuecomment-440013892\n *\n * @deprecated Use `useCallbackRef` instead. `useEventCallback` will be removed\n * in a future version.\n */\n\n\nfunction useEventCallback(callback) {\n var ref = React.useRef(callback);\n useSafeLayoutEffect(function () {\n ref.current = callback;\n });\n return React.useCallback(function (event) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return ref.current.apply(ref, [event].concat(args));\n }, []);\n}\n\nfunction useEventListenerMap() {\n var listeners = React.useRef(new Map());\n var currentListeners = listeners.current;\n var add = React.useCallback(function (el, type, listener, options) {\n var pointerEventListener = wrapPointerEventHandler(listener, type === \"pointerdown\");\n listeners.current.set(listener, {\n __listener: pointerEventListener,\n type: getPointerEventName(type),\n el: el,\n options: options\n });\n el.addEventListener(type, pointerEventListener, options);\n }, []);\n var remove = React.useCallback(function (el, type, listener, options) {\n var _listeners$current$ge = listeners.current.get(listener),\n pointerEventListener = _listeners$current$ge.__listener;\n\n el.removeEventListener(type, pointerEventListener, options);\n listeners.current[\"delete\"](pointerEventListener);\n }, []);\n React.useEffect(function () {\n return function () {\n currentListeners.forEach(function (value, key) {\n remove(value.el, value.type, key, value.options);\n });\n };\n }, [remove, currentListeners]);\n return {\n add: add,\n remove: remove\n };\n}\n/**\n * React effect hook that invokes only on update.\n * It doesn't invoke on mount\n */\n\n\nvar useUpdateEffect = function useUpdateEffect(effect, deps) {\n var mounted = React.useRef(false);\n React.useEffect(function () {\n if (mounted.current) {\n return effect();\n }\n\n mounted.current = true;\n return undefined; // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n return mounted.current;\n};\n/**\n * React hook to focus an element conditionally\n *\n * @param ref the ref of the element to focus\n * @param options focus management options\n */\n\n\nfunction useFocusEffect(ref, options) {\n var shouldFocus = options.shouldFocus,\n preventScroll = options.preventScroll;\n useUpdateEffect(function () {\n var node = ref.current;\n if (!node || !shouldFocus) return;\n\n if (!hasFocusWithin(node)) {\n focus(node, {\n preventScroll: preventScroll,\n nextTick: true\n });\n }\n }, [shouldFocus, ref, preventScroll]);\n}\n\nfunction preventReturnFocus(containerRef) {\n var el = containerRef.current;\n if (!el) return false;\n var activeElement = getActiveElement(el);\n if (!activeElement) return false;\n if (contains(el, activeElement)) return false;\n if (isTabbable(activeElement)) return true;\n return false;\n}\n/**\n * Popover hook to manage the focus when the popover closes or hides.\n *\n * We either want to return focus back to the popover trigger or\n * let focus proceed normally if user moved to another interactive\n * element in the viewport.\n */\n\n\nfunction useFocusOnHide(containerRef, options) {\n var shouldFocusProp = options.shouldFocus,\n visible = options.visible,\n focusRef = options.focusRef;\n var shouldFocus = shouldFocusProp && !visible;\n useUpdateEffect(function () {\n if (!shouldFocus) return;\n\n if (preventReturnFocus(containerRef)) {\n return;\n }\n\n var el = (focusRef == null ? void 0 : focusRef.current) || containerRef.current;\n\n if (el) {\n focus(el, {\n nextTick: true\n });\n }\n }, [shouldFocus, containerRef, focusRef]);\n}\n/**\n * Credit goes to `framer-motion` of this useful utilities.\n * License can be found here: https://github.com/framer/motion\n */\n\n/**\n * @internal\n */\n\n\nfunction usePointerEvent(env, eventName, handler, options) {\n return useEventListener(getPointerEventName(eventName), wrapPointerEventHandler(handler, eventName === \"pointerdown\"), env, options);\n}\n/**\n * Polyfill to get `relatedTarget` working correctly consistently\n * across all browsers.\n *\n * It ensures that elements receives focus on pointer down if\n * it's not the active element.\n *\n * @internal\n */\n\n\nfunction useFocusOnPointerDown(props) {\n var ref = props.ref,\n elements = props.elements,\n enabled = props.enabled;\n var isSafari = detectBrowser(\"Safari\");\n\n var doc = function doc() {\n return getOwnerDocument(ref.current);\n };\n\n usePointerEvent(doc, \"pointerdown\", function (event) {\n if (!isSafari || !enabled) return;\n var target = event.target;\n var els = elements != null ? elements : [ref];\n var isValidTarget = els.some(function (elementOrRef) {\n var el = isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;\n return contains(el, target);\n });\n\n if (!isActiveElement(target) && isValidTarget) {\n event.preventDefault();\n focus(target);\n }\n });\n}\n\nvar defaultOptions = {\n preventScroll: true,\n shouldFocus: false\n};\n\nfunction useFocusOnShow(target, options) {\n if (options === void 0) {\n options = defaultOptions;\n }\n\n var _options = options,\n focusRef = _options.focusRef,\n preventScroll = _options.preventScroll,\n shouldFocus = _options.shouldFocus,\n visible = _options.visible;\n var element = isRefObject(target) ? target.current : target;\n var autoFocus = shouldFocus && visible;\n var onFocus = useCallback(function () {\n if (!element || !autoFocus) return;\n if (contains(element, document.activeElement)) return;\n\n if (focusRef != null && focusRef.current) {\n focus(focusRef.current, {\n preventScroll: preventScroll,\n nextTick: true\n });\n } else {\n var tabbableEls = getAllFocusable(element);\n\n if (tabbableEls.length > 0) {\n focus(tabbableEls[0], {\n preventScroll: preventScroll,\n nextTick: true\n });\n }\n }\n }, [autoFocus, preventScroll, element, focusRef]);\n useUpdateEffect(function () {\n onFocus();\n }, [onFocus]);\n useEventListener(\"transitionend\", onFocus, element);\n}\n\nfunction useUnmountEffect(fn, deps) {\n if (deps === void 0) {\n deps = [];\n }\n\n return React.useEffect(function () {\n return function () {\n return fn();\n };\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n deps);\n}\n\nfunction useForceUpdate() {\n var unloadingRef = React.useRef(false);\n\n var _React$useState = React.useState(0),\n count = _React$useState[0],\n setCount = _React$useState[1];\n\n useUnmountEffect(function () {\n unloadingRef.current = true;\n });\n return React.useCallback(function () {\n if (!unloadingRef.current) {\n setCount(count + 1);\n }\n }, [count]);\n}\n/**\n * React Hook that provides a declarative `setInterval`\n *\n * @param callback the callback to execute at interval\n * @param delay the `setInterval` delay (in ms)\n */\n\n\nfunction useInterval(callback, delay) {\n var fn = useCallbackRef(callback);\n React.useEffect(function () {\n var intervalId = null;\n\n var tick = function tick() {\n return fn();\n };\n\n if (delay !== null) {\n intervalId = window.setInterval(tick, delay);\n }\n\n return function () {\n if (intervalId) {\n window.clearInterval(intervalId);\n }\n };\n }, [delay, fn]);\n}\n/**\n * React hook to persist any value between renders,\n * but keeps it up-to-date if it changes.\n *\n * @param value the value or function to persist\n */\n\n\nfunction useLatestRef(value) {\n var ref = React.useRef(null);\n ref.current = value;\n return ref;\n}\n/* eslint-disable react-hooks/exhaustive-deps */\n\n\nfunction assignRef(ref, value) {\n if (ref == null) return;\n\n if (typeof ref === \"function\") {\n ref(value);\n return;\n }\n\n try {\n // @ts-ignore\n ref.current = value;\n } catch (error) {\n throw new Error(\"Cannot assign value '\" + value + \"' to ref '\" + ref + \"'\");\n }\n}\n/**\n * React hook that merges react refs into a single memoized function\n *\n * @example\n * import React from \"react\";\n * import { useMergeRefs } from `@chakra-ui/hooks`;\n *\n * const Component = React.forwardRef((props, ref) => {\n * const internalRef = React.useRef();\n * return ;\n * });\n */\n\n\nfunction useMergeRefs() {\n for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {\n refs[_key] = arguments[_key];\n }\n\n return React.useMemo(function () {\n if (refs.every(function (ref) {\n return ref == null;\n })) {\n return null;\n }\n\n return function (node) {\n refs.forEach(function (ref) {\n if (ref) assignRef(ref, node);\n });\n };\n }, refs);\n}\n/**\n * @deprecated `useMouseDownRef` will be removed in a future version.\n */\n\n\nfunction useMouseDownRef(shouldListen) {\n if (shouldListen === void 0) {\n shouldListen = true;\n }\n\n var mouseDownRef = React__default.useRef();\n useEventListener(\"mousedown\", function (event) {\n if (shouldListen) {\n mouseDownRef.current = event.target;\n }\n });\n return mouseDownRef;\n}\n/**\n * Example, used in components like Dialogs and Popovers, so they can close\n * when a user clicks outside them.\n */\n\n\nfunction useOutsideClick(props) {\n var ref = props.ref,\n handler = props.handler,\n _props$enabled = props.enabled,\n enabled = _props$enabled === void 0 ? true : _props$enabled;\n var savedHandler = useCallbackRef(handler);\n var stateRef = useRef({\n isPointerDown: false,\n ignoreEmulatedMouseEvents: false\n });\n var state = stateRef.current;\n useEffect(function () {\n if (!enabled) return;\n\n var onPointerDown = function onPointerDown(e) {\n if (isValidEvent(e, ref)) {\n state.isPointerDown = true;\n }\n };\n\n var onMouseUp = function onMouseUp(event) {\n if (state.ignoreEmulatedMouseEvents) {\n state.ignoreEmulatedMouseEvents = false;\n return;\n }\n\n if (state.isPointerDown && handler && isValidEvent(event, ref)) {\n state.isPointerDown = false;\n savedHandler(event);\n }\n };\n\n var onTouchEnd = function onTouchEnd(event) {\n state.ignoreEmulatedMouseEvents = true;\n\n if (handler && state.isPointerDown && isValidEvent(event, ref)) {\n state.isPointerDown = false;\n savedHandler(event);\n }\n };\n\n var doc = getOwnerDocument(ref.current);\n doc.addEventListener(\"mousedown\", onPointerDown, true);\n doc.addEventListener(\"mouseup\", onMouseUp, true);\n doc.addEventListener(\"touchstart\", onPointerDown, true);\n doc.addEventListener(\"touchend\", onTouchEnd, true);\n return function () {\n doc.removeEventListener(\"mousedown\", onPointerDown, true);\n doc.removeEventListener(\"mouseup\", onMouseUp, true);\n doc.removeEventListener(\"touchstart\", onPointerDown, true);\n doc.removeEventListener(\"touchend\", onTouchEnd, true);\n };\n }, [handler, ref, savedHandler, state, enabled]);\n}\n\nfunction isValidEvent(event, ref) {\n var _ref$current;\n\n var target = event.target;\n if (event.button > 0) return false; // if the event target is no longer in the document\n\n if (target) {\n var doc = getOwnerDocument(target);\n if (!doc.body.contains(target)) return false;\n }\n\n return !((_ref$current = ref.current) != null && _ref$current.contains(target));\n}\n\nfunction usePanGesture(ref, props) {\n var onPan = props.onPan,\n onPanStart = props.onPanStart,\n onPanEnd = props.onPanEnd,\n onPanSessionStart = props.onPanSessionStart,\n onPanSessionEnd = props.onPanSessionEnd,\n threshold = props.threshold;\n var hasPanEvents = Boolean(onPan || onPanStart || onPanEnd || onPanSessionStart || onPanSessionEnd);\n var panSession = useRef(null);\n var handlers = {\n onSessionStart: onPanSessionStart,\n onSessionEnd: onPanSessionEnd,\n onStart: onPanStart,\n onMove: onPan,\n onEnd: function onEnd(event, info) {\n panSession.current = null;\n onPanEnd == null ? void 0 : onPanEnd(event, info);\n }\n };\n useEffect(function () {\n var _panSession$current;\n\n (_panSession$current = panSession.current) == null ? void 0 : _panSession$current.updateHandlers(handlers);\n });\n\n function onPointerDown(event) {\n panSession.current = new PanSession(event, handlers, threshold);\n }\n\n usePointerEvent(function () {\n return ref.current;\n }, \"pointerdown\", hasPanEvents ? onPointerDown : noop);\n useUnmountEffect(function () {\n var _panSession$current2;\n\n (_panSession$current2 = panSession.current) == null ? void 0 : _panSession$current2.end();\n panSession.current = null;\n });\n}\n\nfunction usePrevious(value) {\n var ref = useRef();\n useEffect(function () {\n ref.current = value;\n }, [value]);\n return ref.current;\n}\n/**\n * Checks if the key pressed is a printable character\n * and can be used for shortcut navigation\n */\n\n\nfunction isPrintableCharacter(event) {\n var key = event.key;\n return key.length === 1 || key.length > 1 && /[^a-zA-Z0-9]/.test(key);\n}\n/**\n * React hook that provides an enhanced keydown handler,\n * that's used for key navigation within menus, select dropdowns.\n */\n\n\nfunction useShortcut(props) {\n if (props === void 0) {\n props = {};\n }\n\n var _props = props,\n _props$timeout = _props.timeout,\n timeout = _props$timeout === void 0 ? 300 : _props$timeout,\n _props$preventDefault = _props.preventDefault,\n preventDefault = _props$preventDefault === void 0 ? function () {\n return true;\n } : _props$preventDefault;\n\n var _React$useState = React.useState([]),\n keys = _React$useState[0],\n setKeys = _React$useState[1];\n\n var timeoutRef = React.useRef();\n\n var flush = function flush() {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n\n var clearKeysAfterDelay = function clearKeysAfterDelay() {\n flush();\n timeoutRef.current = setTimeout(function () {\n setKeys([]);\n timeoutRef.current = null;\n }, timeout);\n };\n\n React.useEffect(function () {\n return flush;\n }, []);\n\n function onKeyDown(fn) {\n return function (event) {\n if (event.key === \"Backspace\") {\n var keysCopy = [].concat(keys);\n keysCopy.pop();\n setKeys(keysCopy);\n return;\n }\n\n if (isPrintableCharacter(event)) {\n var _keysCopy = keys.concat(event.key);\n\n if (preventDefault(event)) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n setKeys(_keysCopy);\n fn(_keysCopy.join(\"\"));\n clearKeysAfterDelay();\n }\n };\n }\n\n return onKeyDown;\n}\n/**\n * React hook that provides a declarative `setTimeout`\n *\n * @param callback the callback to run after specified delay\n * @param delay the delay (in ms)\n */\n\n\nfunction useTimeout(callback, delay) {\n var fn = useCallbackRef(callback);\n React.useEffect(function () {\n if (delay == null) return undefined;\n var timeoutId = null;\n timeoutId = window.setTimeout(function () {\n fn();\n }, delay);\n return function () {\n if (timeoutId) {\n window.clearTimeout(timeoutId);\n }\n };\n }, [delay, fn]);\n}\n\nfunction useWhyDidYouUpdate(name, props) {\n var previousProps = React.useRef();\n React.useEffect(function () {\n if (previousProps.current) {\n var allKeys = Object.keys(_extends({}, previousProps.current, props));\n var changesObj = {};\n allKeys.forEach(function (key) {\n if (previousProps.current[key] !== props[key]) {\n changesObj[key] = {\n from: previousProps.current[key],\n to: props[key]\n };\n }\n });\n\n if (Object.keys(changesObj).length) {\n console.log(\"[why-did-you-update]\", name, changesObj);\n }\n }\n\n previousProps.current = props;\n });\n}\n\nexport { IdProvider, assignRef, useBoolean, useClipboard, useConst, useControllableProp, useControllableState, useDimensions, useDisclosure, useEventCallback, useEventListenerMap, useFocusEffect, useFocusOnHide, useFocusOnPointerDown, useFocusOnShow, useForceUpdate, useId, useIds, useInterval, useLatestRef, useMergeRefs, useMouseDownRef, useOptionalPart, useOutsideClick, usePanGesture, usePointerEvent, usePrevious, useShortcut, useTimeout, useUnmountEffect, useUpdateEffect, useWhyDidYouUpdate };","import { __DEV__, isBrowser } from '@chakra-ui/utils';\nimport { createContext } from '@chakra-ui/react-utils';\nimport * as React from 'react';\nimport { useForceUpdate, useSafeLayoutEffect } from '@chakra-ui/hooks';\nimport { createPortal } from 'react-dom';\n\nvar _createContext$1 = createContext({\n strict: false,\n name: \"PortalManagerContext\"\n}),\n PortalManagerContextProvider = _createContext$1[0],\n usePortalManager = _createContext$1[1];\n\nfunction PortalManager(props) {\n var children = props.children,\n zIndex = props.zIndex;\n return /*#__PURE__*/React.createElement(PortalManagerContextProvider, {\n value: {\n zIndex: zIndex\n }\n }, children);\n}\n\nif (__DEV__) {\n PortalManager.displayName = \"PortalManager\";\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded = [\"containerRef\"];\n\nvar _createContext = createContext({\n strict: false,\n name: \"PortalContext\"\n}),\n PortalContextProvider = _createContext[0],\n usePortalContext = _createContext[1];\n\nvar PORTAL_CLASSNAME = \"chakra-portal\";\nvar PORTAL_SELECTOR = \".chakra-portal\";\n\nvar Container = function Container(props) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"chakra-portal-zIndex\",\n style: {\n position: \"absolute\",\n zIndex: props.zIndex,\n top: 0,\n left: 0,\n right: 0 // NB: Don't add `bottom: 0`, it makes the entire app unusable\n // @see https://github.com/chakra-ui/chakra-ui/issues/3201\n\n }\n }, props.children);\n};\n/**\n * Portal that uses `document.body` as container\n */\n\n\nvar DefaultPortal = function DefaultPortal(props) {\n var appendToParentPortal = props.appendToParentPortal,\n children = props.children;\n var tempNode = React.useRef(null);\n var portal = React.useRef(null);\n var forceUpdate = useForceUpdate();\n var parentPortal = usePortalContext();\n var manager = usePortalManager();\n useSafeLayoutEffect(function () {\n if (!tempNode.current) return;\n var doc = tempNode.current.ownerDocument;\n var host = appendToParentPortal ? parentPortal != null ? parentPortal : doc.body : doc.body;\n if (!host) return;\n portal.current = doc.createElement(\"div\");\n portal.current.className = PORTAL_CLASSNAME;\n host.appendChild(portal.current);\n forceUpdate();\n var portalNode = portal.current;\n return function () {\n if (host.contains(portalNode)) {\n host.removeChild(portalNode);\n }\n };\n }, []);\n\n var _children = manager != null && manager.zIndex ? /*#__PURE__*/React.createElement(Container, {\n zIndex: manager == null ? void 0 : manager.zIndex\n }, children) : children;\n\n return portal.current ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PortalContextProvider, {\n value: portal.current\n }, _children), portal.current) : /*#__PURE__*/React.createElement(\"span\", {\n ref: tempNode\n });\n};\n/**\n * Portal that uses a custom container\n */\n\n\nvar ContainerPortal = function ContainerPortal(props) {\n var children = props.children,\n containerRef = props.containerRef,\n appendToParentPortal = props.appendToParentPortal;\n var containerEl = containerRef.current;\n var host = containerEl != null ? containerEl : isBrowser ? document.body : undefined;\n var portal = React.useMemo(function () {\n var node = containerEl == null ? void 0 : containerEl.ownerDocument.createElement(\"div\");\n if (node) node.className = PORTAL_CLASSNAME;\n return node;\n }, [containerEl]);\n var forceUpdate = useForceUpdate();\n useSafeLayoutEffect(function () {\n forceUpdate();\n }, []);\n useSafeLayoutEffect(function () {\n if (!portal || !host) return;\n host.appendChild(portal);\n return function () {\n host.removeChild(portal);\n };\n }, [portal, host]);\n\n if (host && portal) {\n return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PortalContextProvider, {\n value: appendToParentPortal ? portal : null\n }, children), portal);\n }\n\n return null;\n};\n/**\n * Portal\n *\n * Declarative component used to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n *\n * @see Docs https://chakra-ui.com/portal\n */\n\n\nfunction Portal(props) {\n var containerRef = props.containerRef,\n rest = _objectWithoutPropertiesLoose(props, _excluded);\n\n return containerRef ? /*#__PURE__*/React.createElement(ContainerPortal, _extends({\n containerRef: containerRef\n }, rest)) : /*#__PURE__*/React.createElement(DefaultPortal, rest);\n}\n\nPortal.defaultProps = {\n appendToParentPortal: true\n};\nPortal.className = PORTAL_CLASSNAME;\nPortal.selector = PORTAL_SELECTOR;\n\nif (__DEV__) {\n Portal.displayName = \"Portal\";\n}\n\nexport { Portal, PortalManager, usePortalManager };","var spacing = {\n px: \"1px\",\n 0.5: \"0.125rem\",\n 1: \"0.25rem\",\n 1.5: \"0.375rem\",\n 2: \"0.5rem\",\n 2.5: \"0.625rem\",\n 3: \"0.75rem\",\n 3.5: \"0.875rem\",\n 4: \"1rem\",\n 5: \"1.25rem\",\n 6: \"1.5rem\",\n 7: \"1.75rem\",\n 8: \"2rem\",\n 9: \"2.25rem\",\n 10: \"2.5rem\",\n 12: \"3rem\",\n 14: \"3.5rem\",\n 16: \"4rem\",\n 20: \"5rem\",\n 24: \"6rem\",\n 28: \"7rem\",\n 32: \"8rem\",\n 36: \"9rem\",\n 40: \"10rem\",\n 44: \"11rem\",\n 48: \"12rem\",\n 52: \"13rem\",\n 56: \"14rem\",\n 60: \"15rem\",\n 64: \"16rem\",\n 72: \"18rem\",\n 80: \"20rem\",\n 96: \"24rem\"\n};\n/**\n * @deprecated\n * Spacing tokens are a part of DefaultChakraTheme['sizes']\n */\n\nexport { spacing };","import { spacing } from '../foundations/spacing/dist/chakra-ui-theme-foundations-spacing.esm.js';\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nvar largeSizes = {\n max: \"max-content\",\n min: \"min-content\",\n full: \"100%\",\n \"3xs\": \"14rem\",\n \"2xs\": \"16rem\",\n xs: \"20rem\",\n sm: \"24rem\",\n md: \"28rem\",\n lg: \"32rem\",\n xl: \"36rem\",\n \"2xl\": \"42rem\",\n \"3xl\": \"48rem\",\n \"4xl\": \"56rem\",\n \"5xl\": \"64rem\",\n \"6xl\": \"72rem\",\n \"7xl\": \"80rem\",\n \"8xl\": \"90rem\"\n};\nvar container = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\"\n};\n\nvar sizes = _extends({}, spacing, largeSizes, {\n container: container\n});\n\nexport { _extends as _, sizes as s };","/**\n * Take input from [0, n] and return it as [0, 1]\n * @hidden\n */\nexport function bound01(n, max) {\n if (isOnePointZero(n)) {\n n = '100%';\n }\n\n var isPercent = isPercentage(n);\n n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n))); // Automatically convert percentage into number\n\n if (isPercent) {\n n = parseInt(String(n * max), 10) / 100;\n } // Handle floating point rounding errors\n\n\n if (Math.abs(n - max) < 0.000001) {\n return 1;\n } // Convert into [0, 1] range if it isn't already\n\n\n if (max === 360) {\n // If n is a hue given in degrees,\n // wrap around out-of-range values into [0, 360] range\n // then convert into [0, 1].\n n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));\n } else {\n // If n not a hue given in degrees\n // Convert into [0, 1] range if it isn't already.\n n = n % max / parseFloat(String(max));\n }\n\n return n;\n}\n/**\n * Force a number between 0 and 1\n * @hidden\n */\n\nexport function clamp01(val) {\n return Math.min(1, Math.max(0, val));\n}\n/**\n * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1\n * \n * @hidden\n */\n\nexport function isOnePointZero(n) {\n return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;\n}\n/**\n * Check to see if string passed in is a percentage\n * @hidden\n */\n\nexport function isPercentage(n) {\n return typeof n === 'string' && n.indexOf('%') !== -1;\n}\n/**\n * Return a valid alpha value [0,1] with all invalid values being set to 1\n * @hidden\n */\n\nexport function boundAlpha(a) {\n a = parseFloat(a);\n\n if (isNaN(a) || a < 0 || a > 1) {\n a = 1;\n }\n\n return a;\n}\n/**\n * Replace a decimal with it's percentage value\n * @hidden\n */\n\nexport function convertToPercentage(n) {\n if (n <= 1) {\n return \"\".concat(Number(n) * 100, \"%\");\n }\n\n return n;\n}\n/**\n * Force a hex value to have 2 characters\n * @hidden\n */\n\nexport function pad2(c) {\n return c.length === 1 ? '0' + c : String(c);\n}","import { bound01, pad2 } from './util'; // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:\n// \n\n/**\n * Handle bounds / percentage checking to conform to CSS color spec\n * \n * *Assumes:* r, g, b in [0, 255] or [0, 1]\n * *Returns:* { r, g, b } in [0, 255]\n */\n\nexport function rgbToRgb(r, g, b) {\n return {\n r: bound01(r, 255) * 255,\n g: bound01(g, 255) * 255,\n b: bound01(b, 255) * 255\n };\n}\n/**\n * Converts an RGB color value to HSL.\n * *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]\n * *Returns:* { h, s, l } in [0,1]\n */\n\nexport function rgbToHsl(r, g, b) {\n r = bound01(r, 255);\n g = bound01(g, 255);\n b = bound01(b, 255);\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h = 0;\n var s = 0;\n var l = (max + min) / 2;\n\n if (max === min) {\n s = 0;\n h = 0; // achromatic\n } else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n\n case g:\n h = (b - r) / d + 2;\n break;\n\n case b:\n h = (r - g) / d + 4;\n break;\n\n default:\n break;\n }\n\n h /= 6;\n }\n\n return {\n h: h,\n s: s,\n l: l\n };\n}\n\nfunction hue2rgb(p, q, t) {\n if (t < 0) {\n t += 1;\n }\n\n if (t > 1) {\n t -= 1;\n }\n\n if (t < 1 / 6) {\n return p + (q - p) * (6 * t);\n }\n\n if (t < 1 / 2) {\n return q;\n }\n\n if (t < 2 / 3) {\n return p + (q - p) * (2 / 3 - t) * 6;\n }\n\n return p;\n}\n/**\n * Converts an HSL color value to RGB.\n *\n * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]\n * *Returns:* { r, g, b } in the set [0, 255]\n */\n\n\nexport function hslToRgb(h, s, l) {\n var r;\n var g;\n var b;\n h = bound01(h, 360);\n s = bound01(s, 100);\n l = bound01(l, 100);\n\n if (s === 0) {\n // achromatic\n g = l;\n b = l;\n r = l;\n } else {\n var q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n var p = 2 * l - q;\n r = hue2rgb(p, q, h + 1 / 3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1 / 3);\n }\n\n return {\n r: r * 255,\n g: g * 255,\n b: b * 255\n };\n}\n/**\n * Converts an RGB color value to HSV\n *\n * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]\n * *Returns:* { h, s, v } in [0,1]\n */\n\nexport function rgbToHsv(r, g, b) {\n r = bound01(r, 255);\n g = bound01(g, 255);\n b = bound01(b, 255);\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h = 0;\n var v = max;\n var d = max - min;\n var s = max === 0 ? 0 : d / max;\n\n if (max === min) {\n h = 0; // achromatic\n } else {\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n\n case g:\n h = (b - r) / d + 2;\n break;\n\n case b:\n h = (r - g) / d + 4;\n break;\n\n default:\n break;\n }\n\n h /= 6;\n }\n\n return {\n h: h,\n s: s,\n v: v\n };\n}\n/**\n * Converts an HSV color value to RGB.\n *\n * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]\n * *Returns:* { r, g, b } in the set [0, 255]\n */\n\nexport function hsvToRgb(h, s, v) {\n h = bound01(h, 360) * 6;\n s = bound01(s, 100);\n v = bound01(v, 100);\n var i = Math.floor(h);\n var f = h - i;\n var p = v * (1 - s);\n var q = v * (1 - f * s);\n var t = v * (1 - (1 - f) * s);\n var mod = i % 6;\n var r = [v, q, p, p, t, v][mod];\n var g = [t, v, v, q, p, p][mod];\n var b = [p, p, t, v, v, q][mod];\n return {\n r: r * 255,\n g: g * 255,\n b: b * 255\n };\n}\n/**\n * Converts an RGB color to hex\n *\n * Assumes r, g, and b are contained in the set [0, 255]\n * Returns a 3 or 6 character hex\n */\n\nexport function rgbToHex(r, g, b, allow3Char) {\n var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))]; // Return a 3 character hex if possible\n\n if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) {\n return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);\n }\n\n return hex.join('');\n}\n/**\n * Converts an RGBA color plus alpha transparency to hex\n *\n * Assumes r, g, b are contained in the set [0, 255] and\n * a in [0, 1]. Returns a 4 or 8 character rgba hex\n */\n// eslint-disable-next-line max-params\n\nexport function rgbaToHex(r, g, b, a, allow4Char) {\n var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))]; // Return a 4 character hex if possible\n\n if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) {\n return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);\n }\n\n return hex.join('');\n}\n/**\n * Converts an RGBA color to an ARGB Hex8 string\n * Rarely used, but required for \"toFilter()\"\n */\n\nexport function rgbaToArgbHex(r, g, b, a) {\n var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];\n return hex.join('');\n}\n/** Converts a decimal to a hex value */\n\nexport function convertDecimalToHex(d) {\n return Math.round(parseFloat(d) * 255).toString(16);\n}\n/** Converts a hex value to a decimal */\n\nexport function convertHexToDecimal(h) {\n return parseIntFromHex(h) / 255;\n}\n/** Parse a base-16 hex value into a base-10 integer */\n\nexport function parseIntFromHex(val) {\n return parseInt(val, 16);\n}\nexport function numberInputToObject(color) {\n return {\n r: color >> 16,\n g: (color & 0xff00) >> 8,\n b: color & 0xff\n };\n}","// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json\n\n/**\n * @hidden\n */\nexport var names = {\n aliceblue: '#f0f8ff',\n antiquewhite: '#faebd7',\n aqua: '#00ffff',\n aquamarine: '#7fffd4',\n azure: '#f0ffff',\n beige: '#f5f5dc',\n bisque: '#ffe4c4',\n black: '#000000',\n blanchedalmond: '#ffebcd',\n blue: '#0000ff',\n blueviolet: '#8a2be2',\n brown: '#a52a2a',\n burlywood: '#deb887',\n cadetblue: '#5f9ea0',\n chartreuse: '#7fff00',\n chocolate: '#d2691e',\n coral: '#ff7f50',\n cornflowerblue: '#6495ed',\n cornsilk: '#fff8dc',\n crimson: '#dc143c',\n cyan: '#00ffff',\n darkblue: '#00008b',\n darkcyan: '#008b8b',\n darkgoldenrod: '#b8860b',\n darkgray: '#a9a9a9',\n darkgreen: '#006400',\n darkgrey: '#a9a9a9',\n darkkhaki: '#bdb76b',\n darkmagenta: '#8b008b',\n darkolivegreen: '#556b2f',\n darkorange: '#ff8c00',\n darkorchid: '#9932cc',\n darkred: '#8b0000',\n darksalmon: '#e9967a',\n darkseagreen: '#8fbc8f',\n darkslateblue: '#483d8b',\n darkslategray: '#2f4f4f',\n darkslategrey: '#2f4f4f',\n darkturquoise: '#00ced1',\n darkviolet: '#9400d3',\n deeppink: '#ff1493',\n deepskyblue: '#00bfff',\n dimgray: '#696969',\n dimgrey: '#696969',\n dodgerblue: '#1e90ff',\n firebrick: '#b22222',\n floralwhite: '#fffaf0',\n forestgreen: '#228b22',\n fuchsia: '#ff00ff',\n gainsboro: '#dcdcdc',\n ghostwhite: '#f8f8ff',\n goldenrod: '#daa520',\n gold: '#ffd700',\n gray: '#808080',\n green: '#008000',\n greenyellow: '#adff2f',\n grey: '#808080',\n honeydew: '#f0fff0',\n hotpink: '#ff69b4',\n indianred: '#cd5c5c',\n indigo: '#4b0082',\n ivory: '#fffff0',\n khaki: '#f0e68c',\n lavenderblush: '#fff0f5',\n lavender: '#e6e6fa',\n lawngreen: '#7cfc00',\n lemonchiffon: '#fffacd',\n lightblue: '#add8e6',\n lightcoral: '#f08080',\n lightcyan: '#e0ffff',\n lightgoldenrodyellow: '#fafad2',\n lightgray: '#d3d3d3',\n lightgreen: '#90ee90',\n lightgrey: '#d3d3d3',\n lightpink: '#ffb6c1',\n lightsalmon: '#ffa07a',\n lightseagreen: '#20b2aa',\n lightskyblue: '#87cefa',\n lightslategray: '#778899',\n lightslategrey: '#778899',\n lightsteelblue: '#b0c4de',\n lightyellow: '#ffffe0',\n lime: '#00ff00',\n limegreen: '#32cd32',\n linen: '#faf0e6',\n magenta: '#ff00ff',\n maroon: '#800000',\n mediumaquamarine: '#66cdaa',\n mediumblue: '#0000cd',\n mediumorchid: '#ba55d3',\n mediumpurple: '#9370db',\n mediumseagreen: '#3cb371',\n mediumslateblue: '#7b68ee',\n mediumspringgreen: '#00fa9a',\n mediumturquoise: '#48d1cc',\n mediumvioletred: '#c71585',\n midnightblue: '#191970',\n mintcream: '#f5fffa',\n mistyrose: '#ffe4e1',\n moccasin: '#ffe4b5',\n navajowhite: '#ffdead',\n navy: '#000080',\n oldlace: '#fdf5e6',\n olive: '#808000',\n olivedrab: '#6b8e23',\n orange: '#ffa500',\n orangered: '#ff4500',\n orchid: '#da70d6',\n palegoldenrod: '#eee8aa',\n palegreen: '#98fb98',\n paleturquoise: '#afeeee',\n palevioletred: '#db7093',\n papayawhip: '#ffefd5',\n peachpuff: '#ffdab9',\n peru: '#cd853f',\n pink: '#ffc0cb',\n plum: '#dda0dd',\n powderblue: '#b0e0e6',\n purple: '#800080',\n rebeccapurple: '#663399',\n red: '#ff0000',\n rosybrown: '#bc8f8f',\n royalblue: '#4169e1',\n saddlebrown: '#8b4513',\n salmon: '#fa8072',\n sandybrown: '#f4a460',\n seagreen: '#2e8b57',\n seashell: '#fff5ee',\n sienna: '#a0522d',\n silver: '#c0c0c0',\n skyblue: '#87ceeb',\n slateblue: '#6a5acd',\n slategray: '#708090',\n slategrey: '#708090',\n snow: '#fffafa',\n springgreen: '#00ff7f',\n steelblue: '#4682b4',\n tan: '#d2b48c',\n teal: '#008080',\n thistle: '#d8bfd8',\n tomato: '#ff6347',\n turquoise: '#40e0d0',\n violet: '#ee82ee',\n wheat: '#f5deb3',\n white: '#ffffff',\n whitesmoke: '#f5f5f5',\n yellow: '#ffff00',\n yellowgreen: '#9acd32'\n};","import { convertHexToDecimal, hslToRgb, hsvToRgb, parseIntFromHex, rgbToRgb } from './conversion';\nimport { names } from './css-color-names';\nimport { boundAlpha, convertToPercentage } from './util';\n/**\n * Given a string or object, convert that input to RGB\n *\n * Possible string inputs:\n * ```\n * \"red\"\n * \"#f00\" or \"f00\"\n * \"#ff0000\" or \"ff0000\"\n * \"#ff000000\" or \"ff000000\"\n * \"rgb 255 0 0\" or \"rgb (255, 0, 0)\"\n * \"rgb 1.0 0 0\" or \"rgb (1, 0, 0)\"\n * \"rgba (255, 0, 0, 1)\" or \"rgba 255, 0, 0, 1\"\n * \"rgba (1.0, 0, 0, 1)\" or \"rgba 1.0, 0, 0, 1\"\n * \"hsl(0, 100%, 50%)\" or \"hsl 0 100% 50%\"\n * \"hsla(0, 100%, 50%, 1)\" or \"hsla 0 100% 50%, 1\"\n * \"hsv(0, 100%, 100%)\" or \"hsv 0 100% 100%\"\n * ```\n */\n\nexport function inputToRGB(color) {\n var rgb = {\n r: 0,\n g: 0,\n b: 0\n };\n var a = 1;\n var s = null;\n var v = null;\n var l = null;\n var ok = false;\n var format = false;\n\n if (typeof color === 'string') {\n color = stringInputToObject(color);\n }\n\n if (typeof color === 'object') {\n if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {\n rgb = rgbToRgb(color.r, color.g, color.b);\n ok = true;\n format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';\n } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {\n s = convertToPercentage(color.s);\n v = convertToPercentage(color.v);\n rgb = hsvToRgb(color.h, s, v);\n ok = true;\n format = 'hsv';\n } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {\n s = convertToPercentage(color.s);\n l = convertToPercentage(color.l);\n rgb = hslToRgb(color.h, s, l);\n ok = true;\n format = 'hsl';\n }\n\n if (Object.prototype.hasOwnProperty.call(color, 'a')) {\n a = color.a;\n }\n }\n\n a = boundAlpha(a);\n return {\n ok: ok,\n format: color.format || format,\n r: Math.min(255, Math.max(rgb.r, 0)),\n g: Math.min(255, Math.max(rgb.g, 0)),\n b: Math.min(255, Math.max(rgb.b, 0)),\n a: a\n };\n} // \n\nvar CSS_INTEGER = '[-\\\\+]?\\\\d+%?'; // \n\nvar CSS_NUMBER = '[-\\\\+]?\\\\d*\\\\.\\\\d+%?'; // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.\n\nvar CSS_UNIT = \"(?:\".concat(CSS_NUMBER, \")|(?:\").concat(CSS_INTEGER, \")\"); // Actual matching.\n// Parentheses and commas are optional, but not required.\n// Whitespace can take the place of commas or opening paren\n\nvar PERMISSIVE_MATCH3 = \"[\\\\s|\\\\(]+(\".concat(CSS_UNIT, \")[,|\\\\s]+(\").concat(CSS_UNIT, \")[,|\\\\s]+(\").concat(CSS_UNIT, \")\\\\s*\\\\)?\");\nvar PERMISSIVE_MATCH4 = \"[\\\\s|\\\\(]+(\".concat(CSS_UNIT, \")[,|\\\\s]+(\").concat(CSS_UNIT, \")[,|\\\\s]+(\").concat(CSS_UNIT, \")[,|\\\\s]+(\").concat(CSS_UNIT, \")\\\\s*\\\\)?\");\nvar matchers = {\n CSS_UNIT: new RegExp(CSS_UNIT),\n rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),\n rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),\n hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),\n hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),\n hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),\n hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),\n hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,\n hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,\n hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,\n hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/\n};\n/**\n * Permissive string parsing. Take in a number of formats, and output an object\n * based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`\n */\n\nexport function stringInputToObject(color) {\n color = color.trim().toLowerCase();\n\n if (color.length === 0) {\n return false;\n }\n\n var named = false;\n\n if (names[color]) {\n color = names[color];\n named = true;\n } else if (color === 'transparent') {\n return {\n r: 0,\n g: 0,\n b: 0,\n a: 0,\n format: 'name'\n };\n } // Try to match string input using regular expressions.\n // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]\n // Just return an object and let the conversion functions handle that.\n // This way the result will be the same whether the tinycolor is initialized with string or object.\n\n\n var match = matchers.rgb.exec(color);\n\n if (match) {\n return {\n r: match[1],\n g: match[2],\n b: match[3]\n };\n }\n\n match = matchers.rgba.exec(color);\n\n if (match) {\n return {\n r: match[1],\n g: match[2],\n b: match[3],\n a: match[4]\n };\n }\n\n match = matchers.hsl.exec(color);\n\n if (match) {\n return {\n h: match[1],\n s: match[2],\n l: match[3]\n };\n }\n\n match = matchers.hsla.exec(color);\n\n if (match) {\n return {\n h: match[1],\n s: match[2],\n l: match[3],\n a: match[4]\n };\n }\n\n match = matchers.hsv.exec(color);\n\n if (match) {\n return {\n h: match[1],\n s: match[2],\n v: match[3]\n };\n }\n\n match = matchers.hsva.exec(color);\n\n if (match) {\n return {\n h: match[1],\n s: match[2],\n v: match[3],\n a: match[4]\n };\n }\n\n match = matchers.hex8.exec(color);\n\n if (match) {\n return {\n r: parseIntFromHex(match[1]),\n g: parseIntFromHex(match[2]),\n b: parseIntFromHex(match[3]),\n a: convertHexToDecimal(match[4]),\n format: named ? 'name' : 'hex8'\n };\n }\n\n match = matchers.hex6.exec(color);\n\n if (match) {\n return {\n r: parseIntFromHex(match[1]),\n g: parseIntFromHex(match[2]),\n b: parseIntFromHex(match[3]),\n format: named ? 'name' : 'hex'\n };\n }\n\n match = matchers.hex4.exec(color);\n\n if (match) {\n return {\n r: parseIntFromHex(match[1] + match[1]),\n g: parseIntFromHex(match[2] + match[2]),\n b: parseIntFromHex(match[3] + match[3]),\n a: convertHexToDecimal(match[4] + match[4]),\n format: named ? 'name' : 'hex8'\n };\n }\n\n match = matchers.hex3.exec(color);\n\n if (match) {\n return {\n r: parseIntFromHex(match[1] + match[1]),\n g: parseIntFromHex(match[2] + match[2]),\n b: parseIntFromHex(match[3] + match[3]),\n format: named ? 'name' : 'hex'\n };\n }\n\n return false;\n}\n/**\n * Check to see if it looks like a CSS unit\n * (see `matchers` above for definition).\n */\n\nexport function isValidCSSUnit(color) {\n return Boolean(matchers.CSS_UNIT.exec(String(color)));\n}","import { numberInputToObject, rgbaToHex, rgbToHex, rgbToHsl, rgbToHsv } from './conversion';\nimport { names } from './css-color-names';\nimport { inputToRGB } from './format-input';\nimport { bound01, boundAlpha, clamp01 } from './util';\n\nvar TinyColor =\n/** @class */\nfunction () {\n function TinyColor(color, opts) {\n if (color === void 0) {\n color = '';\n }\n\n if (opts === void 0) {\n opts = {};\n }\n\n var _a; // If input is already a tinycolor, return itself\n\n\n if (color instanceof TinyColor) {\n // eslint-disable-next-line no-constructor-return\n return color;\n }\n\n if (typeof color === 'number') {\n color = numberInputToObject(color);\n }\n\n this.originalInput = color;\n var rgb = inputToRGB(color);\n this.originalInput = color;\n this.r = rgb.r;\n this.g = rgb.g;\n this.b = rgb.b;\n this.a = rgb.a;\n this.roundA = Math.round(100 * this.a) / 100;\n this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;\n this.gradientType = opts.gradientType; // Don't let the range of [0,255] come back in [0,1].\n // Potentially lose a little bit of precision here, but will fix issues where\n // .5 gets interpreted as half of the total, instead of half of 1\n // If it was supposed to be 128, this was already taken care of by `inputToRgb`\n\n if (this.r < 1) {\n this.r = Math.round(this.r);\n }\n\n if (this.g < 1) {\n this.g = Math.round(this.g);\n }\n\n if (this.b < 1) {\n this.b = Math.round(this.b);\n }\n\n this.isValid = rgb.ok;\n }\n\n TinyColor.prototype.isDark = function () {\n return this.getBrightness() < 128;\n };\n\n TinyColor.prototype.isLight = function () {\n return !this.isDark();\n };\n /**\n * Returns the perceived brightness of the color, from 0-255.\n */\n\n\n TinyColor.prototype.getBrightness = function () {\n // http://www.w3.org/TR/AERT#color-contrast\n var rgb = this.toRgb();\n return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;\n };\n /**\n * Returns the perceived luminance of a color, from 0-1.\n */\n\n\n TinyColor.prototype.getLuminance = function () {\n // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n var rgb = this.toRgb();\n var R;\n var G;\n var B;\n var RsRGB = rgb.r / 255;\n var GsRGB = rgb.g / 255;\n var BsRGB = rgb.b / 255;\n\n if (RsRGB <= 0.03928) {\n R = RsRGB / 12.92;\n } else {\n // eslint-disable-next-line prefer-exponentiation-operator\n R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);\n }\n\n if (GsRGB <= 0.03928) {\n G = GsRGB / 12.92;\n } else {\n // eslint-disable-next-line prefer-exponentiation-operator\n G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);\n }\n\n if (BsRGB <= 0.03928) {\n B = BsRGB / 12.92;\n } else {\n // eslint-disable-next-line prefer-exponentiation-operator\n B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);\n }\n\n return 0.2126 * R + 0.7152 * G + 0.0722 * B;\n };\n /**\n * Returns the alpha value of a color, from 0-1.\n */\n\n\n TinyColor.prototype.getAlpha = function () {\n return this.a;\n };\n /**\n * Sets the alpha value on the current color.\n *\n * @param alpha - The new alpha value. The accepted range is 0-1.\n */\n\n\n TinyColor.prototype.setAlpha = function (alpha) {\n this.a = boundAlpha(alpha);\n this.roundA = Math.round(100 * this.a) / 100;\n return this;\n };\n /**\n * Returns the object as a HSVA object.\n */\n\n\n TinyColor.prototype.toHsv = function () {\n var hsv = rgbToHsv(this.r, this.g, this.b);\n return {\n h: hsv.h * 360,\n s: hsv.s,\n v: hsv.v,\n a: this.a\n };\n };\n /**\n * Returns the hsva values interpolated into a string with the following format:\n * \"hsva(xxx, xxx, xxx, xx)\".\n */\n\n\n TinyColor.prototype.toHsvString = function () {\n var hsv = rgbToHsv(this.r, this.g, this.b);\n var h = Math.round(hsv.h * 360);\n var s = Math.round(hsv.s * 100);\n var v = Math.round(hsv.v * 100);\n return this.a === 1 ? \"hsv(\".concat(h, \", \").concat(s, \"%, \").concat(v, \"%)\") : \"hsva(\".concat(h, \", \").concat(s, \"%, \").concat(v, \"%, \").concat(this.roundA, \")\");\n };\n /**\n * Returns the object as a HSLA object.\n */\n\n\n TinyColor.prototype.toHsl = function () {\n var hsl = rgbToHsl(this.r, this.g, this.b);\n return {\n h: hsl.h * 360,\n s: hsl.s,\n l: hsl.l,\n a: this.a\n };\n };\n /**\n * Returns the hsla values interpolated into a string with the following format:\n * \"hsla(xxx, xxx, xxx, xx)\".\n */\n\n\n TinyColor.prototype.toHslString = function () {\n var hsl = rgbToHsl(this.r, this.g, this.b);\n var h = Math.round(hsl.h * 360);\n var s = Math.round(hsl.s * 100);\n var l = Math.round(hsl.l * 100);\n return this.a === 1 ? \"hsl(\".concat(h, \", \").concat(s, \"%, \").concat(l, \"%)\") : \"hsla(\".concat(h, \", \").concat(s, \"%, \").concat(l, \"%, \").concat(this.roundA, \")\");\n };\n /**\n * Returns the hex value of the color.\n * @param allow3Char will shorten hex value to 3 char if possible\n */\n\n\n TinyColor.prototype.toHex = function (allow3Char) {\n if (allow3Char === void 0) {\n allow3Char = false;\n }\n\n return rgbToHex(this.r, this.g, this.b, allow3Char);\n };\n /**\n * Returns the hex value of the color -with a # appened.\n * @param allow3Char will shorten hex value to 3 char if possible\n */\n\n\n TinyColor.prototype.toHexString = function (allow3Char) {\n if (allow3Char === void 0) {\n allow3Char = false;\n }\n\n return '#' + this.toHex(allow3Char);\n };\n /**\n * Returns the hex 8 value of the color.\n * @param allow4Char will shorten hex value to 4 char if possible\n */\n\n\n TinyColor.prototype.toHex8 = function (allow4Char) {\n if (allow4Char === void 0) {\n allow4Char = false;\n }\n\n return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);\n };\n /**\n * Returns the hex 8 value of the color -with a # appened.\n * @param allow4Char will shorten hex value to 4 char if possible\n */\n\n\n TinyColor.prototype.toHex8String = function (allow4Char) {\n if (allow4Char === void 0) {\n allow4Char = false;\n }\n\n return '#' + this.toHex8(allow4Char);\n };\n /**\n * Returns the object as a RGBA object.\n */\n\n\n TinyColor.prototype.toRgb = function () {\n return {\n r: Math.round(this.r),\n g: Math.round(this.g),\n b: Math.round(this.b),\n a: this.a\n };\n };\n /**\n * Returns the RGBA values interpolated into a string with the following format:\n * \"RGBA(xxx, xxx, xxx, xx)\".\n */\n\n\n TinyColor.prototype.toRgbString = function () {\n var r = Math.round(this.r);\n var g = Math.round(this.g);\n var b = Math.round(this.b);\n return this.a === 1 ? \"rgb(\".concat(r, \", \").concat(g, \", \").concat(b, \")\") : \"rgba(\".concat(r, \", \").concat(g, \", \").concat(b, \", \").concat(this.roundA, \")\");\n };\n /**\n * Returns the object as a RGBA object.\n */\n\n\n TinyColor.prototype.toPercentageRgb = function () {\n var fmt = function fmt(x) {\n return \"\".concat(Math.round(bound01(x, 255) * 100), \"%\");\n };\n\n return {\n r: fmt(this.r),\n g: fmt(this.g),\n b: fmt(this.b),\n a: this.a\n };\n };\n /**\n * Returns the RGBA relative values interpolated into a string\n */\n\n\n TinyColor.prototype.toPercentageRgbString = function () {\n var rnd = function rnd(x) {\n return Math.round(bound01(x, 255) * 100);\n };\n\n return this.a === 1 ? \"rgb(\".concat(rnd(this.r), \"%, \").concat(rnd(this.g), \"%, \").concat(rnd(this.b), \"%)\") : \"rgba(\".concat(rnd(this.r), \"%, \").concat(rnd(this.g), \"%, \").concat(rnd(this.b), \"%, \").concat(this.roundA, \")\");\n };\n /**\n * The 'real' name of the color -if there is one.\n */\n\n\n TinyColor.prototype.toName = function () {\n if (this.a === 0) {\n return 'transparent';\n }\n\n if (this.a < 1) {\n return false;\n }\n\n var hex = '#' + rgbToHex(this.r, this.g, this.b, false);\n\n for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {\n var _b = _a[_i],\n key = _b[0],\n value = _b[1];\n\n if (hex === value) {\n return key;\n }\n }\n\n return false;\n };\n\n TinyColor.prototype.toString = function (format) {\n var formatSet = Boolean(format);\n format = format !== null && format !== void 0 ? format : this.format;\n var formattedString = false;\n var hasAlpha = this.a < 1 && this.a >= 0;\n var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');\n\n if (needsAlphaFormat) {\n // Special case for \"transparent\", all other non-alpha formats\n // will return rgba when there is transparency.\n if (format === 'name' && this.a === 0) {\n return this.toName();\n }\n\n return this.toRgbString();\n }\n\n if (format === 'rgb') {\n formattedString = this.toRgbString();\n }\n\n if (format === 'prgb') {\n formattedString = this.toPercentageRgbString();\n }\n\n if (format === 'hex' || format === 'hex6') {\n formattedString = this.toHexString();\n }\n\n if (format === 'hex3') {\n formattedString = this.toHexString(true);\n }\n\n if (format === 'hex4') {\n formattedString = this.toHex8String(true);\n }\n\n if (format === 'hex8') {\n formattedString = this.toHex8String();\n }\n\n if (format === 'name') {\n formattedString = this.toName();\n }\n\n if (format === 'hsl') {\n formattedString = this.toHslString();\n }\n\n if (format === 'hsv') {\n formattedString = this.toHsvString();\n }\n\n return formattedString || this.toHexString();\n };\n\n TinyColor.prototype.toNumber = function () {\n return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);\n };\n\n TinyColor.prototype.clone = function () {\n return new TinyColor(this.toString());\n };\n /**\n * Lighten the color a given amount. Providing 100 will always return white.\n * @param amount - valid between 1-100\n */\n\n\n TinyColor.prototype.lighten = function (amount) {\n if (amount === void 0) {\n amount = 10;\n }\n\n var hsl = this.toHsl();\n hsl.l += amount / 100;\n hsl.l = clamp01(hsl.l);\n return new TinyColor(hsl);\n };\n /**\n * Brighten the color a given amount, from 0 to 100.\n * @param amount - valid between 1-100\n */\n\n\n TinyColor.prototype.brighten = function (amount) {\n if (amount === void 0) {\n amount = 10;\n }\n\n var rgb = this.toRgb();\n rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));\n rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));\n rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));\n return new TinyColor(rgb);\n };\n /**\n * Darken the color a given amount, from 0 to 100.\n * Providing 100 will always return black.\n * @param amount - valid between 1-100\n */\n\n\n TinyColor.prototype.darken = function (amount) {\n if (amount === void 0) {\n amount = 10;\n }\n\n var hsl = this.toHsl();\n hsl.l -= amount / 100;\n hsl.l = clamp01(hsl.l);\n return new TinyColor(hsl);\n };\n /**\n * Mix the color with pure white, from 0 to 100.\n * Providing 0 will do nothing, providing 100 will always return white.\n * @param amount - valid between 1-100\n */\n\n\n TinyColor.prototype.tint = function (amount) {\n if (amount === void 0) {\n amount = 10;\n }\n\n return this.mix('white', amount);\n };\n /**\n * Mix the color with pure black, from 0 to 100.\n * Providing 0 will do nothing, providing 100 will always return black.\n * @param amount - valid between 1-100\n */\n\n\n TinyColor.prototype.shade = function (amount) {\n if (amount === void 0) {\n amount = 10;\n }\n\n return this.mix('black', amount);\n };\n /**\n * Desaturate the color a given amount, from 0 to 100.\n * Providing 100 will is the same as calling greyscale\n * @param amount - valid between 1-100\n */\n\n\n TinyColor.prototype.desaturate = function (amount) {\n if (amount === void 0) {\n amount = 10;\n }\n\n var hsl = this.toHsl();\n hsl.s -= amount / 100;\n hsl.s = clamp01(hsl.s);\n return new TinyColor(hsl);\n };\n /**\n * Saturate the color a given amount, from 0 to 100.\n * @param amount - valid between 1-100\n */\n\n\n TinyColor.prototype.saturate = function (amount) {\n if (amount === void 0) {\n amount = 10;\n }\n\n var hsl = this.toHsl();\n hsl.s += amount / 100;\n hsl.s = clamp01(hsl.s);\n return new TinyColor(hsl);\n };\n /**\n * Completely desaturates a color into greyscale.\n * Same as calling `desaturate(100)`\n */\n\n\n TinyColor.prototype.greyscale = function () {\n return this.desaturate(100);\n };\n /**\n * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.\n * Values outside of this range will be wrapped into this range.\n */\n\n\n TinyColor.prototype.spin = function (amount) {\n var hsl = this.toHsl();\n var hue = (hsl.h + amount) % 360;\n hsl.h = hue < 0 ? 360 + hue : hue;\n return new TinyColor(hsl);\n };\n /**\n * Mix the current color a given amount with another color, from 0 to 100.\n * 0 means no mixing (return current color).\n */\n\n\n TinyColor.prototype.mix = function (color, amount) {\n if (amount === void 0) {\n amount = 50;\n }\n\n var rgb1 = this.toRgb();\n var rgb2 = new TinyColor(color).toRgb();\n var p = amount / 100;\n var rgba = {\n r: (rgb2.r - rgb1.r) * p + rgb1.r,\n g: (rgb2.g - rgb1.g) * p + rgb1.g,\n b: (rgb2.b - rgb1.b) * p + rgb1.b,\n a: (rgb2.a - rgb1.a) * p + rgb1.a\n };\n return new TinyColor(rgba);\n };\n\n TinyColor.prototype.analogous = function (results, slices) {\n if (results === void 0) {\n results = 6;\n }\n\n if (slices === void 0) {\n slices = 30;\n }\n\n var hsl = this.toHsl();\n var part = 360 / slices;\n var ret = [this];\n\n for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {\n hsl.h = (hsl.h + part) % 360;\n ret.push(new TinyColor(hsl));\n }\n\n return ret;\n };\n /**\n * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js\n */\n\n\n TinyColor.prototype.complement = function () {\n var hsl = this.toHsl();\n hsl.h = (hsl.h + 180) % 360;\n return new TinyColor(hsl);\n };\n\n TinyColor.prototype.monochromatic = function (results) {\n if (results === void 0) {\n results = 6;\n }\n\n var hsv = this.toHsv();\n var h = hsv.h;\n var s = hsv.s;\n var v = hsv.v;\n var res = [];\n var modification = 1 / results;\n\n while (results--) {\n res.push(new TinyColor({\n h: h,\n s: s,\n v: v\n }));\n v = (v + modification) % 1;\n }\n\n return res;\n };\n\n TinyColor.prototype.splitcomplement = function () {\n var hsl = this.toHsl();\n var h = hsl.h;\n return [this, new TinyColor({\n h: (h + 72) % 360,\n s: hsl.s,\n l: hsl.l\n }), new TinyColor({\n h: (h + 216) % 360,\n s: hsl.s,\n l: hsl.l\n })];\n };\n /**\n * Compute how the color would appear on a background\n */\n\n\n TinyColor.prototype.onBackground = function (background) {\n var fg = this.toRgb();\n var bg = new TinyColor(background).toRgb();\n return new TinyColor({\n r: bg.r + (fg.r - bg.r) * fg.a,\n g: bg.g + (fg.g - bg.g) * fg.a,\n b: bg.b + (fg.b - bg.b) * fg.a\n });\n };\n /**\n * Alias for `polyad(3)`\n */\n\n\n TinyColor.prototype.triad = function () {\n return this.polyad(3);\n };\n /**\n * Alias for `polyad(4)`\n */\n\n\n TinyColor.prototype.tetrad = function () {\n return this.polyad(4);\n };\n /**\n * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)\n * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...\n */\n\n\n TinyColor.prototype.polyad = function (n) {\n var hsl = this.toHsl();\n var h = hsl.h;\n var result = [this];\n var increment = 360 / n;\n\n for (var i = 1; i < n; i++) {\n result.push(new TinyColor({\n h: (h + i * increment) % 360,\n s: hsl.s,\n l: hsl.l\n }));\n }\n\n return result;\n };\n /**\n * compare color vs current color\n */\n\n\n TinyColor.prototype.equals = function (color) {\n return this.toRgbString() === new TinyColor(color).toRgbString();\n };\n\n return TinyColor;\n}();\n\nexport { TinyColor }; // kept for backwards compatability with v1\n\nexport function tinycolor(color, opts) {\n if (color === void 0) {\n color = '';\n }\n\n if (opts === void 0) {\n opts = {};\n }\n\n return new TinyColor(color, opts);\n}","// randomColor by David Merfield under the CC0 license\n// https://github.com/davidmerfield/randomColor/\nimport { TinyColor } from './index';\nexport function random(options) {\n if (options === void 0) {\n options = {};\n } // Check if we need to generate multiple colors\n\n\n if (options.count !== undefined && options.count !== null) {\n var totalColors = options.count;\n var colors = [];\n options.count = undefined;\n\n while (totalColors > colors.length) {\n // Since we're generating multiple colors,\n // incremement the seed. Otherwise we'd just\n // generate the same color each time...\n options.count = null;\n\n if (options.seed) {\n options.seed += 1;\n }\n\n colors.push(random(options));\n }\n\n options.count = totalColors;\n return colors;\n } // First we pick a hue (H)\n\n\n var h = pickHue(options.hue, options.seed); // Then use H to determine saturation (S)\n\n var s = pickSaturation(h, options); // Then use S and H to determine brightness (B).\n\n var v = pickBrightness(h, s, options);\n var res = {\n h: h,\n s: s,\n v: v\n };\n\n if (options.alpha !== undefined) {\n res.a = options.alpha;\n } // Then we return the HSB color in the desired format\n\n\n return new TinyColor(res);\n}\n\nfunction pickHue(hue, seed) {\n var hueRange = getHueRange(hue);\n var res = randomWithin(hueRange, seed); // Instead of storing red as two seperate ranges,\n // we group them, using negative numbers\n\n if (res < 0) {\n res = 360 + res;\n }\n\n return res;\n}\n\nfunction pickSaturation(hue, options) {\n if (options.hue === 'monochrome') {\n return 0;\n }\n\n if (options.luminosity === 'random') {\n return randomWithin([0, 100], options.seed);\n }\n\n var saturationRange = getColorInfo(hue).saturationRange;\n var sMin = saturationRange[0];\n var sMax = saturationRange[1];\n\n switch (options.luminosity) {\n case 'bright':\n sMin = 55;\n break;\n\n case 'dark':\n sMin = sMax - 10;\n break;\n\n case 'light':\n sMax = 55;\n break;\n\n default:\n break;\n }\n\n return randomWithin([sMin, sMax], options.seed);\n}\n\nfunction pickBrightness(H, S, options) {\n var bMin = getMinimumBrightness(H, S);\n var bMax = 100;\n\n switch (options.luminosity) {\n case 'dark':\n bMax = bMin + 20;\n break;\n\n case 'light':\n bMin = (bMax + bMin) / 2;\n break;\n\n case 'random':\n bMin = 0;\n bMax = 100;\n break;\n\n default:\n break;\n }\n\n return randomWithin([bMin, bMax], options.seed);\n}\n\nfunction getMinimumBrightness(H, S) {\n var lowerBounds = getColorInfo(H).lowerBounds;\n\n for (var i = 0; i < lowerBounds.length - 1; i++) {\n var s1 = lowerBounds[i][0];\n var v1 = lowerBounds[i][1];\n var s2 = lowerBounds[i + 1][0];\n var v2 = lowerBounds[i + 1][1];\n\n if (S >= s1 && S <= s2) {\n var m = (v2 - v1) / (s2 - s1);\n var b = v1 - m * s1;\n return m * S + b;\n }\n }\n\n return 0;\n}\n\nfunction getHueRange(colorInput) {\n var num = parseInt(colorInput, 10);\n\n if (!Number.isNaN(num) && num < 360 && num > 0) {\n return [num, num];\n }\n\n if (typeof colorInput === 'string') {\n var namedColor = bounds.find(function (n) {\n return n.name === colorInput;\n });\n\n if (namedColor) {\n var color = defineColor(namedColor);\n\n if (color.hueRange) {\n return color.hueRange;\n }\n }\n\n var parsed = new TinyColor(colorInput);\n\n if (parsed.isValid) {\n var hue = parsed.toHsv().h;\n return [hue, hue];\n }\n }\n\n return [0, 360];\n}\n\nfunction getColorInfo(hue) {\n // Maps red colors to make picking hue easier\n if (hue >= 334 && hue <= 360) {\n hue -= 360;\n }\n\n for (var _i = 0, bounds_1 = bounds; _i < bounds_1.length; _i++) {\n var bound = bounds_1[_i];\n var color = defineColor(bound);\n\n if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {\n return color;\n }\n }\n\n throw Error('Color not found');\n}\n\nfunction randomWithin(range, seed) {\n if (seed === undefined) {\n return Math.floor(range[0] + Math.random() * (range[1] + 1 - range[0]));\n } // Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/\n\n\n var max = range[1] || 1;\n var min = range[0] || 0;\n seed = (seed * 9301 + 49297) % 233280;\n var rnd = seed / 233280.0;\n return Math.floor(min + rnd * (max - min));\n}\n\nfunction defineColor(bound) {\n var sMin = bound.lowerBounds[0][0];\n var sMax = bound.lowerBounds[bound.lowerBounds.length - 1][0];\n var bMin = bound.lowerBounds[bound.lowerBounds.length - 1][1];\n var bMax = bound.lowerBounds[0][1];\n return {\n name: bound.name,\n hueRange: bound.hueRange,\n lowerBounds: bound.lowerBounds,\n saturationRange: [sMin, sMax],\n brightnessRange: [bMin, bMax]\n };\n}\n/**\n * @hidden\n */\n\n\nexport var bounds = [{\n name: 'monochrome',\n hueRange: null,\n lowerBounds: [[0, 0], [100, 0]]\n}, {\n name: 'red',\n hueRange: [-26, 18],\n lowerBounds: [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]\n}, {\n name: 'orange',\n hueRange: [19, 46],\n lowerBounds: [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]\n}, {\n name: 'yellow',\n hueRange: [47, 62],\n lowerBounds: [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]\n}, {\n name: 'green',\n hueRange: [63, 178],\n lowerBounds: [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]\n}, {\n name: 'blue',\n hueRange: [179, 257],\n lowerBounds: [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]\n}, {\n name: 'purple',\n hueRange: [258, 282],\n lowerBounds: [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]\n}, {\n name: 'pink',\n hueRange: [283, 334],\n lowerBounds: [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]\n}];","import { TinyColor, readability, isReadable, random } from '@ctrl/tinycolor';\nimport { memoizedGet, isEmptyObject, warn, fromEntries, isObject } from '@chakra-ui/utils';\nexport { runIfFn } from '@chakra-ui/utils';\n/**\n * Get the color raw value from theme\n * @param theme - the theme object\n * @param color - the color path (\"green.200\")\n * @param fallback - the fallback color\n */\n\nvar getColor = function getColor(theme, color, fallback) {\n var hex = memoizedGet(theme, \"colors.\" + color, color);\n\n var _TinyColor = new TinyColor(hex),\n isValid = _TinyColor.isValid;\n\n return isValid ? hex : fallback;\n};\n/**\n * Determines if the tone of given color is \"light\" or \"dark\"\n * @param color - the color in hex, rgb, or hsl\n */\n\n\nvar tone = function tone(color) {\n return function (theme) {\n var hex = getColor(theme, color);\n var isDark = new TinyColor(hex).isDark();\n return isDark ? \"dark\" : \"light\";\n };\n};\n/**\n * Determines if a color tone is \"dark\"\n * @param color - the color in hex, rgb, or hsl\n */\n\n\nvar isDark = function isDark(color) {\n return function (theme) {\n return tone(color)(theme) === \"dark\";\n };\n};\n/**\n * Determines if a color tone is \"light\"\n * @param color - the color in hex, rgb, or hsl\n */\n\n\nvar isLight = function isLight(color) {\n return function (theme) {\n return tone(color)(theme) === \"light\";\n };\n};\n/**\n * Make a color transparent\n * @param color - the color in hex, rgb, or hsl\n * @param opacity - the amount of opacity the color should have (0-1)\n */\n\n\nvar transparentize = function transparentize(color, opacity) {\n return function (theme) {\n var raw = getColor(theme, color);\n return new TinyColor(raw).setAlpha(opacity).toRgbString();\n };\n};\n/**\n * Add white to a color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount white to add (0-100)\n */\n\n\nvar whiten = function whiten(color, amount) {\n return function (theme) {\n var raw = getColor(theme, color);\n return new TinyColor(raw).mix(\"#fff\", amount).toHexString();\n };\n};\n/**\n * Add black to a color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount black to add (0-100)\n */\n\n\nvar blacken = function blacken(color, amount) {\n return function (theme) {\n var raw = getColor(theme, color);\n return new TinyColor(raw).mix(\"#000\", amount).toHexString();\n };\n};\n/**\n * Darken a specified color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount to darken (0-100)\n */\n\n\nvar darken = function darken(color, amount) {\n return function (theme) {\n var raw = getColor(theme, color);\n return new TinyColor(raw).darken(amount).toHexString();\n };\n};\n/**\n * Lighten a specified color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount to lighten (0-100)\n */\n\n\nvar lighten = function lighten(color, amount) {\n return function (theme) {\n return new TinyColor(getColor(theme, color)).lighten(amount).toHexString();\n };\n};\n/**\n * Checks the contract ratio of between 2 colors,\n * based on the Web Content Accessibility Guidelines (Version 2.0).\n *\n * @param fg - the foreground or text color\n * @param bg - the background color\n */\n\n\nvar contrast = function contrast(fg, bg) {\n return function (theme) {\n return readability(getColor(theme, bg), getColor(theme, fg));\n };\n};\n/**\n * Checks if a color meets the Web Content Accessibility\n * Guidelines (Version 2.0) for constract ratio.\n *\n * @param fg - the foreground or text color\n * @param bg - the background color\n */\n\n\nvar isAccessible = function isAccessible(textColor, bgColor, options) {\n return function (theme) {\n return isReadable(getColor(theme, bgColor), getColor(theme, textColor), options);\n };\n};\n\nvar complementary = function complementary(color) {\n return function (theme) {\n return new TinyColor(getColor(theme, color)).complement().toHexString();\n };\n};\n\nfunction generateStripe(size, color) {\n if (size === void 0) {\n size = \"1rem\";\n }\n\n if (color === void 0) {\n color = \"rgba(255, 255, 255, 0.15)\";\n }\n\n return {\n backgroundImage: \"linear-gradient(\\n 45deg,\\n \" + color + \" 25%,\\n transparent 25%,\\n transparent 50%,\\n \" + color + \" 50%,\\n \" + color + \" 75%,\\n transparent 75%,\\n transparent\\n )\",\n backgroundSize: size + \" \" + size\n };\n}\n\nfunction randomColor(opts) {\n var fallback = random().toHexString();\n\n if (!opts || isEmptyObject(opts)) {\n return fallback;\n }\n\n if (opts.string && opts.colors) {\n return randomColorFromList(opts.string, opts.colors);\n }\n\n if (opts.string && !opts.colors) {\n return randomColorFromString(opts.string);\n }\n\n if (opts.colors && !opts.string) {\n return randomFromList(opts.colors);\n }\n\n return fallback;\n}\n\nfunction randomColorFromString(str) {\n var hash = 0;\n if (str.length === 0) return hash.toString();\n\n for (var i = 0; i < str.length; i += 1) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n hash = hash & hash;\n }\n\n var color = \"#\";\n\n for (var j = 0; j < 3; j += 1) {\n var value = hash >> j * 8 & 255;\n color += (\"00\" + value.toString(16)).substr(-2);\n }\n\n return color;\n}\n\nfunction randomColorFromList(str, list) {\n var index = 0;\n if (str.length === 0) return list[0];\n\n for (var i = 0; i < str.length; i += 1) {\n index = str.charCodeAt(i) + ((index << 5) - index);\n index = index & index;\n }\n\n index = (index % list.length + list.length) % list.length;\n return list[index];\n}\n\nfunction randomFromList(list) {\n return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction mode(light, dark) {\n return function (props) {\n return props.colorMode === \"dark\" ? dark : light;\n };\n}\n\nfunction orient(options) {\n var orientation = options.orientation,\n vertical = options.vertical,\n horizontal = options.horizontal;\n if (!orientation) return {};\n return orientation === \"vertical\" ? vertical : horizontal;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nvar createBreakpoints = function createBreakpoints(config) {\n warn({\n condition: true,\n message: [\"[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon\", \"simply pass the breakpoints as an object. Remove the createBreakpoint(..) call\"].join(\"\")\n });\n return _extends({\n base: \"0em\"\n }, config);\n};\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n/**\n * Used to define the anatomy/parts of a component in a way that provides\n * a consistent API for `className`, css selector and `theming`.\n */\n\n\nvar Anatomy = /*#__PURE__*/function () {\n function Anatomy(name) {\n var _this = this;\n\n this.map = {};\n this.called = false;\n\n this.assert = function () {\n if (!_this.called) {\n _this.called = true;\n return;\n }\n\n throw new Error(\"[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?\");\n };\n\n this.parts = function () {\n _this.assert();\n\n for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n values[_key] = arguments[_key];\n }\n\n for (var _i = 0, _values = values; _i < _values.length; _i++) {\n var part = _values[_i];\n _this.map[part] = _this.toPart(part);\n }\n\n return _this;\n };\n\n this.extend = function () {\n for (var _len2 = arguments.length, parts = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n parts[_key2] = arguments[_key2];\n }\n\n for (var _i2 = 0, _parts = parts; _i2 < _parts.length; _i2++) {\n var part = _parts[_i2];\n if (part in _this.map) continue;\n _this.map[part] = _this.toPart(part);\n }\n\n return _this;\n };\n\n this.toPart = function (part) {\n var el = [\"container\", \"root\"].includes(part != null ? part : \"\") ? [_this.name] : [_this.name, part];\n var attr = el.filter(Boolean).join(\"__\");\n var className = \"chakra-\" + attr;\n var partObj = {\n className: className,\n selector: \".\" + className,\n toString: function toString() {\n return part;\n }\n };\n return partObj;\n };\n\n this.__type = {};\n }\n /**\n * Prevents user from calling `.parts` multiple times.\n * It should only be called once.\n */\n\n\n _createClass(Anatomy, [{\n key: \"selectors\",\n get:\n /**\n * Get all selectors for the component anatomy\n */\n function get() {\n var value = fromEntries(Object.entries(this.map).map(function (_ref) {\n var key = _ref[0],\n part = _ref[1];\n return [key, part.selector];\n }));\n return value;\n }\n /**\n * Get all classNames for the component anatomy\n */\n\n }, {\n key: \"classNames\",\n get: function get() {\n var value = fromEntries(Object.entries(this.map).map(function (_ref2) {\n var key = _ref2[0],\n part = _ref2[1];\n return [key, part.className];\n }));\n return value;\n }\n /**\n * Get all parts as array of string\n */\n\n }, {\n key: \"keys\",\n get: function get() {\n return Object.keys(this.map);\n }\n /**\n * Creates the part object for the given part\n */\n\n }]);\n\n return Anatomy;\n}();\n\nfunction anatomy(name) {\n return new Anatomy(name);\n}\n\nfunction toRef(operand) {\n if (isObject(operand) && operand.reference) {\n return operand.reference;\n }\n\n return String(operand);\n}\n\nvar toExpr = function toExpr(operator) {\n for (var _len = arguments.length, operands = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n operands[_key - 1] = arguments[_key];\n }\n\n return operands.map(toRef).join(\" \" + operator + \" \").replace(/calc/g, \"\");\n};\n\nvar _add = function add() {\n for (var _len2 = arguments.length, operands = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n operands[_key2] = arguments[_key2];\n }\n\n return \"calc(\" + toExpr.apply(void 0, [\"+\"].concat(operands)) + \")\";\n};\n\nvar _subtract = function subtract() {\n for (var _len3 = arguments.length, operands = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n operands[_key3] = arguments[_key3];\n }\n\n return \"calc(\" + toExpr.apply(void 0, [\"-\"].concat(operands)) + \")\";\n};\n\nvar _multiply = function multiply() {\n for (var _len4 = arguments.length, operands = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {\n operands[_key4] = arguments[_key4];\n }\n\n return \"calc(\" + toExpr.apply(void 0, [\"*\"].concat(operands)) + \")\";\n};\n\nvar _divide = function divide() {\n for (var _len5 = arguments.length, operands = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {\n operands[_key5] = arguments[_key5];\n }\n\n return \"calc(\" + toExpr.apply(void 0, [\"/\"].concat(operands)) + \")\";\n};\n\nvar _negate = function negate(x) {\n var value = toRef(x);\n\n if (value != null && !Number.isNaN(parseFloat(value))) {\n return String(value).startsWith(\"-\") ? String(value).slice(1) : \"-\" + value;\n }\n\n return _multiply(value, -1);\n};\n\nvar calc = Object.assign(function (x) {\n return {\n add: function add() {\n for (var _len6 = arguments.length, operands = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {\n operands[_key6] = arguments[_key6];\n }\n\n return calc(_add.apply(void 0, [x].concat(operands)));\n },\n subtract: function subtract() {\n for (var _len7 = arguments.length, operands = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {\n operands[_key7] = arguments[_key7];\n }\n\n return calc(_subtract.apply(void 0, [x].concat(operands)));\n },\n multiply: function multiply() {\n for (var _len8 = arguments.length, operands = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {\n operands[_key8] = arguments[_key8];\n }\n\n return calc(_multiply.apply(void 0, [x].concat(operands)));\n },\n divide: function divide() {\n for (var _len9 = arguments.length, operands = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {\n operands[_key9] = arguments[_key9];\n }\n\n return calc(_divide.apply(void 0, [x].concat(operands)));\n },\n negate: function negate() {\n return calc(_negate(x));\n },\n toString: function toString() {\n return x.toString();\n }\n };\n}, {\n add: _add,\n subtract: _subtract,\n multiply: _multiply,\n divide: _divide,\n negate: _negate\n});\n\nfunction isDecimal(value) {\n return !Number.isInteger(parseFloat(value.toString()));\n}\n\nfunction replaceWhiteSpace(value, replaceValue) {\n if (replaceValue === void 0) {\n replaceValue = \"-\";\n }\n\n return value.replace(/\\s+/g, replaceValue);\n}\n\nfunction escape(value) {\n var valueStr = replaceWhiteSpace(value.toString());\n if (valueStr.includes(\"\\\\.\")) return value;\n return isDecimal(value) ? valueStr.replace(\".\", \"\\\\.\") : value;\n}\n\nfunction addPrefix(value, prefix) {\n if (prefix === void 0) {\n prefix = \"\";\n }\n\n return [prefix, escape(value)].filter(Boolean).join(\"-\");\n}\n\nfunction toVarRef(name, fallback) {\n return \"var(\" + escape(name) + (fallback ? \", \" + fallback : \"\") + \")\";\n}\n\nfunction toVar(value, prefix) {\n if (prefix === void 0) {\n prefix = \"\";\n }\n\n return \"--\" + addPrefix(value, prefix);\n}\n\nfunction cssVar(name, options) {\n var cssVariable = toVar(name, options == null ? void 0 : options.prefix);\n return {\n variable: cssVariable,\n reference: toVarRef(cssVariable, getFallback(options == null ? void 0 : options.fallback))\n };\n}\n\nfunction getFallback(fallback) {\n if (typeof fallback === \"string\") return fallback;\n return fallback == null ? void 0 : fallback.reference;\n}\n\nexport { Anatomy, addPrefix, anatomy, blacken, calc, complementary, contrast, createBreakpoints, cssVar, darken, generateStripe, getColor, isAccessible, isDark, isDecimal, isLight, lighten, mode, orient, randomColor, toVar, toVarRef, tone, transparentize, whiten };","import { anatomy } from '@chakra-ui/theme-tools';\n/**\n * **Accordion anatomy**\n * - Root: the root container of the accordion\n * - Container: the accordion item contains the button and panel\n * - Button: the button is the trigger for the panel\n * - Panel: the panel is the content of the accordion item\n * - Icon: the expanded/collapsed icon\n */\n\nvar accordionAnatomy = anatomy(\"accordion\").parts(\"root\", \"container\", \"button\", \"panel\").extend(\"icon\");\n/**\n * **Alert anatomy**\n * - Title: the alert's title\n * - Description: the alert's description\n * - Icon: the alert's icon\n */\n\nvar alertAnatomy = anatomy(\"alert\").parts(\"title\", \"description\", \"container\").extend(\"icon\");\n/**\n * **Avatar anatomy**\n * - Container: the container for the avatar\n * - Label: the avatar initials text\n * - Excess Label: the label or text that represents excess avatar count.\n * Typically used in avatar groups.\n * - Group: the container for the avatar group\n */\n\nvar avatarAnatomy = anatomy(\"avatar\").parts(\"label\", \"badge\", \"container\").extend(\"excessLabel\", \"group\");\n/**\n * **Breadcrumb anatomy**\n * - Item: the container for a breadcrumb item\n * - Link: the element that represents the breadcrumb link\n * - Container: the container for the breadcrumb items\n * - Separator: the separator between breadcrumb items\n */\n\nvar breadcrumbAnatomy = anatomy(\"breadcrumb\").parts(\"link\", \"item\", \"container\").extend(\"separator\");\nvar buttonAnatomy = anatomy(\"button\").parts();\nvar checkboxAnatomy = anatomy(\"checkbox\").parts(\"control\", \"icon\", \"container\").extend(\"label\");\nvar circularProgressAnatomy = anatomy(\"progress\").parts(\"track\", \"filledTrack\").extend(\"label\");\nvar drawerAnatomy = anatomy(\"drawer\").parts(\"overlay\", \"dialogContainer\", \"dialog\").extend(\"header\", \"closeButton\", \"body\", \"footer\");\nvar editableAnatomy = anatomy(\"editable\").parts(\"preview\", \"input\", \"textarea\");\nvar formAnatomy = anatomy(\"form\").parts(\"container\", \"requiredIndicator\", \"helperText\");\nvar formErrorAnatomy = anatomy(\"formError\").parts(\"text\", \"icon\");\nvar inputAnatomy = anatomy(\"input\").parts(\"addon\", \"field\", \"element\");\nvar listAnatomy = anatomy(\"list\").parts(\"container\", \"item\", \"icon\");\nvar menuAnatomy = anatomy(\"menu\").parts(\"button\", \"list\", \"item\").extend(\"groupTitle\", \"command\", \"divider\");\nvar modalAnatomy = anatomy(\"modal\").parts(\"overlay\", \"dialogContainer\", \"dialog\").extend(\"header\", \"closeButton\", \"body\", \"footer\");\nvar numberInputAnatomy = anatomy(\"numberinput\").parts(\"root\", \"field\", \"stepperGroup\", \"stepper\");\nvar pinInputAnatomy = anatomy(\"pininput\").parts(\"field\");\nvar popoverAnatomy = anatomy(\"popover\").parts(\"content\", \"header\", \"body\", \"footer\").extend(\"popper\", \"arrow\", \"closeButton\");\nvar progressAnatomy = anatomy(\"progress\").parts(\"label\", \"filledTrack\", \"track\");\nvar radioAnatomy = anatomy(\"radio\").parts(\"container\", \"control\", \"label\");\nvar selectAnatomy = anatomy(\"select\").parts(\"field\", \"icon\");\nvar sliderAnatomy = anatomy(\"slider\").parts(\"container\", \"track\", \"thumb\", \"filledTrack\");\nvar statAnatomy = anatomy(\"stat\").parts(\"container\", \"label\", \"helpText\", \"number\", \"icon\");\nvar switchAnatomy = anatomy(\"switch\").parts(\"container\", \"track\", \"thumb\");\nvar tableAnatomy = anatomy(\"table\").parts(\"table\", \"thead\", \"tbody\", \"tr\", \"th\", \"td\", \"tfoot\", \"caption\");\nvar tabsAnatomy = anatomy(\"tabs\").parts(\"root\", \"tab\", \"tablist\", \"tabpanel\", \"tabpanels\", \"indicator\");\n/**\n * **Tag anatomy**\n * - Container: the container for the tag\n * - Label: the text content of the tag\n * - closeButton: the close button for the tag\n */\n\nvar tagAnatomy = anatomy(\"tag\").parts(\"container\", \"label\", \"closeButton\");\nexport { accordionAnatomy, alertAnatomy, avatarAnatomy, breadcrumbAnatomy, buttonAnatomy, checkboxAnatomy, circularProgressAnatomy, drawerAnatomy, editableAnatomy, formAnatomy, formErrorAnatomy, inputAnatomy, listAnatomy, menuAnatomy, modalAnatomy, numberInputAnatomy, pinInputAnatomy, popoverAnatomy, progressAnatomy, radioAnatomy, selectAnatomy, sliderAnatomy, statAnatomy, switchAnatomy, tableAnatomy, tabsAnatomy, tagAnatomy };","var typography = {\n letterSpacings: {\n tighter: \"-0.05em\",\n tight: \"-0.025em\",\n normal: \"0\",\n wide: \"0.025em\",\n wider: \"0.05em\",\n widest: \"0.1em\"\n },\n lineHeights: {\n normal: \"normal\",\n none: 1,\n shorter: 1.25,\n \"short\": 1.375,\n base: 1.5,\n tall: 1.625,\n taller: \"2\",\n \"3\": \".75rem\",\n \"4\": \"1rem\",\n \"5\": \"1.25rem\",\n \"6\": \"1.5rem\",\n \"7\": \"1.75rem\",\n \"8\": \"2rem\",\n \"9\": \"2.25rem\",\n \"10\": \"2.5rem\"\n },\n fontWeights: {\n hairline: 100,\n thin: 200,\n light: 300,\n normal: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n extrabold: 800,\n black: 900\n },\n fonts: {\n heading: \"-apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\"\",\n body: \"-apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\"\",\n mono: \"SFMono-Regular,Menlo,Monaco,Consolas,\\\"Liberation Mono\\\",\\\"Courier New\\\",monospace\"\n },\n fontSizes: {\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n md: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n \"7xl\": \"4.5rem\",\n \"8xl\": \"6rem\",\n \"9xl\": \"8rem\"\n }\n};\nexport { typography as default };","import { accordionAnatomy, alertAnatomy, avatarAnatomy, breadcrumbAnatomy, checkboxAnatomy, drawerAnatomy, editableAnatomy, formAnatomy, formErrorAnatomy, inputAnatomy, listAnatomy, menuAnatomy, modalAnatomy, numberInputAnatomy, popoverAnatomy, progressAnatomy, radioAnatomy, selectAnatomy, sliderAnatomy, statAnatomy, switchAnatomy, tableAnatomy, tabsAnatomy, tagAnatomy } from '@chakra-ui/anatomy';\nimport { mode, getColor, transparentize, randomColor, isDark, cssVar, calc, generateStripe, orient } from '@chakra-ui/theme-tools';\nimport { s as sizes$l, _ as _extends } from './sizes-6d76cdc8.esm.js';\nimport typography from '../foundations/typography/dist/chakra-ui-theme-foundations-typography.esm.js';\nimport { mergeWith } from '@chakra-ui/utils';\nimport { keyframes } from '@chakra-ui/system';\nvar baseStyleContainer$4 = {\n borderTopWidth: \"1px\",\n borderColor: \"inherit\",\n _last: {\n borderBottomWidth: \"1px\"\n }\n};\nvar baseStyleButton$1 = {\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n fontSize: \"1rem\",\n _focus: {\n boxShadow: \"outline\"\n },\n _hover: {\n bg: \"blackAlpha.50\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n },\n px: 4,\n py: 2\n};\nvar baseStylePanel = {\n pt: 2,\n px: 4,\n pb: 5\n};\nvar baseStyleIcon$5 = {\n fontSize: \"1.25em\"\n};\nvar baseStyle$D = {\n root: {},\n container: baseStyleContainer$4,\n button: baseStyleButton$1,\n panel: baseStylePanel,\n icon: baseStyleIcon$5\n};\nvar accordion = {\n parts: accordionAnatomy.keys,\n baseStyle: baseStyle$D\n};\nvar baseStyle$C = {\n container: {\n px: 4,\n py: 3\n },\n title: {\n fontWeight: \"bold\",\n lineHeight: 6,\n marginEnd: 2\n },\n description: {\n lineHeight: 6\n },\n icon: {\n flexShrink: 0,\n marginEnd: 3,\n w: 5,\n h: 6\n }\n};\n\nfunction getBg(props) {\n var theme = props.theme,\n c = props.colorScheme;\n var lightBg = getColor(theme, c + \".100\", c);\n var darkBg = transparentize(c + \".200\", 0.16)(theme);\n return mode(lightBg, darkBg)(props);\n}\n\nvar variantSubtle$1 = function variantSubtle(props) {\n var c = props.colorScheme;\n return {\n container: {\n bg: getBg(props)\n },\n icon: {\n color: mode(c + \".500\", c + \".200\")(props)\n }\n };\n};\n\nvar variantLeftAccent = function variantLeftAccent(props) {\n var c = props.colorScheme;\n return {\n container: {\n paddingStart: 3,\n borderStartWidth: \"4px\",\n borderStartColor: mode(c + \".500\", c + \".200\")(props),\n bg: getBg(props)\n },\n icon: {\n color: mode(c + \".500\", c + \".200\")(props)\n }\n };\n};\n\nvar variantTopAccent = function variantTopAccent(props) {\n var c = props.colorScheme;\n return {\n container: {\n pt: 2,\n borderTopWidth: \"4px\",\n borderTopColor: mode(c + \".500\", c + \".200\")(props),\n bg: getBg(props)\n },\n icon: {\n color: mode(c + \".500\", c + \".200\")(props)\n }\n };\n};\n\nvar variantSolid$3 = function variantSolid(props) {\n var c = props.colorScheme;\n return {\n container: {\n bg: mode(c + \".500\", c + \".200\")(props),\n color: mode(\"white\", \"gray.900\")(props)\n }\n };\n};\n\nvar variants$b = {\n subtle: variantSubtle$1,\n \"left-accent\": variantLeftAccent,\n \"top-accent\": variantTopAccent,\n solid: variantSolid$3\n};\nvar defaultProps$n = {\n variant: \"subtle\",\n colorScheme: \"blue\"\n};\nvar alert = {\n parts: alertAnatomy.keys,\n baseStyle: baseStyle$C,\n variants: variants$b,\n defaultProps: defaultProps$n\n};\n\nvar baseStyleBadge = function baseStyleBadge(props) {\n return {\n transform: \"translate(25%, 25%)\",\n borderRadius: \"full\",\n border: \"0.2em solid\",\n borderColor: mode(\"white\", \"gray.800\")(props)\n };\n};\n\nvar baseStyleExcessLabel = function baseStyleExcessLabel(props) {\n return {\n bg: mode(\"gray.200\", \"whiteAlpha.400\")(props)\n };\n};\n\nvar baseStyleContainer$3 = function baseStyleContainer(props) {\n var name = props.name,\n theme = props.theme;\n var bg = name ? randomColor({\n string: name\n }) : \"gray.400\";\n var isBgDark = isDark(bg)(theme);\n var color = \"white\";\n if (!isBgDark) color = \"gray.800\";\n var borderColor = mode(\"white\", \"gray.800\")(props);\n return {\n bg: bg,\n color: color,\n borderColor: borderColor,\n verticalAlign: \"top\"\n };\n};\n\nvar baseStyle$B = function baseStyle(props) {\n return {\n badge: baseStyleBadge(props),\n excessLabel: baseStyleExcessLabel(props),\n container: baseStyleContainer$3(props)\n };\n};\n\nfunction getSize$3(size) {\n var themeSize = sizes$l[size];\n return {\n container: {\n width: size,\n height: size,\n fontSize: \"calc(\" + (themeSize != null ? themeSize : size) + \" / 2.5)\"\n },\n excessLabel: {\n width: size,\n height: size\n },\n label: {\n fontSize: \"calc(\" + (themeSize != null ? themeSize : size) + \" / 2.5)\",\n lineHeight: size !== \"100%\" ? themeSize != null ? themeSize : size : undefined\n }\n };\n}\n\nvar sizes$k = {\n \"2xs\": getSize$3(\"4\"),\n xs: getSize$3(\"6\"),\n sm: getSize$3(\"8\"),\n md: getSize$3(\"12\"),\n lg: getSize$3(\"16\"),\n xl: getSize$3(\"24\"),\n \"2xl\": getSize$3(\"32\"),\n full: getSize$3(\"100%\")\n};\nvar defaultProps$m = {\n size: \"md\"\n};\nvar avatar = {\n parts: avatarAnatomy.keys,\n baseStyle: baseStyle$B,\n sizes: sizes$k,\n defaultProps: defaultProps$m\n};\nvar baseStyle$A = {\n px: 1,\n textTransform: \"uppercase\",\n fontSize: \"xs\",\n borderRadius: \"sm\",\n fontWeight: \"bold\"\n};\n\nvar variantSolid$2 = function variantSolid(props) {\n var c = props.colorScheme,\n theme = props.theme;\n var dark = transparentize(c + \".500\", 0.6)(theme);\n return {\n bg: mode(c + \".500\", dark)(props),\n color: mode(\"white\", \"whiteAlpha.800\")(props)\n };\n};\n\nvar variantSubtle = function variantSubtle(props) {\n var c = props.colorScheme,\n theme = props.theme;\n var darkBg = transparentize(c + \".200\", 0.16)(theme);\n return {\n bg: mode(c + \".100\", darkBg)(props),\n color: mode(c + \".800\", c + \".200\")(props)\n };\n};\n\nvar variantOutline$2 = function variantOutline(props) {\n var c = props.colorScheme,\n theme = props.theme;\n var darkColor = transparentize(c + \".200\", 0.8)(theme);\n var lightColor = getColor(theme, c + \".500\");\n var color = mode(lightColor, darkColor)(props);\n return {\n color: color,\n boxShadow: \"inset 0 0 0px 1px \" + color\n };\n};\n\nvar variants$a = {\n solid: variantSolid$2,\n subtle: variantSubtle,\n outline: variantOutline$2\n};\nvar defaultProps$l = {\n variant: \"subtle\",\n colorScheme: \"gray\"\n};\nvar Badge = {\n baseStyle: baseStyle$A,\n variants: variants$a,\n defaultProps: defaultProps$l\n};\nvar baseStyleLink = {\n transitionProperty: \"common\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"ease-out\",\n cursor: \"pointer\",\n textDecoration: \"none\",\n outline: \"none\",\n color: \"inherit\",\n _hover: {\n textDecoration: \"underline\"\n },\n _focus: {\n boxShadow: \"outline\"\n }\n};\nvar baseStyle$z = {\n link: baseStyleLink\n};\nvar breadcrumb = {\n parts: breadcrumbAnatomy.keys,\n baseStyle: baseStyle$z\n};\nvar baseStyle$y = {\n lineHeight: \"1.2\",\n borderRadius: \"md\",\n fontWeight: \"semibold\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _focus: {\n boxShadow: \"outline\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\",\n boxShadow: \"none\"\n },\n _hover: {\n _disabled: {\n bg: \"initial\"\n }\n }\n};\n\nvar variantGhost = function variantGhost(props) {\n var c = props.colorScheme,\n theme = props.theme;\n\n if (c === \"gray\") {\n return {\n color: mode(\"inherit\", \"whiteAlpha.900\")(props),\n _hover: {\n bg: mode(\"gray.100\", \"whiteAlpha.200\")(props)\n },\n _active: {\n bg: mode(\"gray.200\", \"whiteAlpha.300\")(props)\n }\n };\n }\n\n var darkHoverBg = transparentize(c + \".200\", 0.12)(theme);\n var darkActiveBg = transparentize(c + \".200\", 0.24)(theme);\n return {\n color: mode(c + \".600\", c + \".200\")(props),\n bg: \"transparent\",\n _hover: {\n bg: mode(c + \".50\", darkHoverBg)(props)\n },\n _active: {\n bg: mode(c + \".100\", darkActiveBg)(props)\n }\n };\n};\n\nvar variantOutline$1 = function variantOutline(props) {\n var c = props.colorScheme;\n var borderColor = mode(\"gray.200\", \"whiteAlpha.300\")(props);\n return _extends({\n border: \"1px solid\",\n borderColor: c === \"gray\" ? borderColor : \"currentColor\"\n }, variantGhost(props));\n};\n/** Accessible color overrides for less accessible colors. */\n\n\nvar accessibleColorMap = {\n yellow: {\n bg: \"yellow.400\",\n color: \"black\",\n hoverBg: \"yellow.500\",\n activeBg: \"yellow.600\"\n },\n cyan: {\n bg: \"cyan.400\",\n color: \"black\",\n hoverBg: \"cyan.500\",\n activeBg: \"cyan.600\"\n }\n};\n\nvar variantSolid$1 = function variantSolid(props) {\n var _accessibleColorMap$c;\n\n var c = props.colorScheme;\n\n if (c === \"gray\") {\n var _bg = mode(\"gray.100\", \"whiteAlpha.200\")(props);\n\n return {\n bg: _bg,\n _hover: {\n bg: mode(\"gray.200\", \"whiteAlpha.300\")(props),\n _disabled: {\n bg: _bg\n }\n },\n _active: {\n bg: mode(\"gray.300\", \"whiteAlpha.400\")(props)\n }\n };\n }\n\n var _ref = (_accessibleColorMap$c = accessibleColorMap[c]) != null ? _accessibleColorMap$c : {},\n _ref$bg = _ref.bg,\n bg = _ref$bg === void 0 ? c + \".500\" : _ref$bg,\n _ref$color = _ref.color,\n color = _ref$color === void 0 ? \"white\" : _ref$color,\n _ref$hoverBg = _ref.hoverBg,\n hoverBg = _ref$hoverBg === void 0 ? c + \".600\" : _ref$hoverBg,\n _ref$activeBg = _ref.activeBg,\n activeBg = _ref$activeBg === void 0 ? c + \".700\" : _ref$activeBg;\n\n var background = mode(bg, c + \".200\")(props);\n return {\n bg: background,\n color: mode(color, \"gray.800\")(props),\n _hover: {\n bg: mode(hoverBg, c + \".300\")(props),\n _disabled: {\n bg: background\n }\n },\n _active: {\n bg: mode(activeBg, c + \".400\")(props)\n }\n };\n};\n\nvar variantLink = function variantLink(props) {\n var c = props.colorScheme;\n return {\n padding: 0,\n height: \"auto\",\n lineHeight: \"normal\",\n verticalAlign: \"baseline\",\n color: mode(c + \".500\", c + \".200\")(props),\n _hover: {\n textDecoration: \"underline\",\n _disabled: {\n textDecoration: \"none\"\n }\n },\n _active: {\n color: mode(c + \".700\", c + \".500\")(props)\n }\n };\n};\n\nvar variantUnstyled$2 = {\n bg: \"none\",\n color: \"inherit\",\n display: \"inline\",\n lineHeight: \"inherit\",\n m: 0,\n p: 0\n};\nvar variants$9 = {\n ghost: variantGhost,\n outline: variantOutline$1,\n solid: variantSolid$1,\n link: variantLink,\n unstyled: variantUnstyled$2\n};\nvar sizes$j = {\n lg: {\n h: 12,\n minW: 12,\n fontSize: \"lg\",\n px: 6\n },\n md: {\n h: 10,\n minW: 10,\n fontSize: \"md\",\n px: 4\n },\n sm: {\n h: 8,\n minW: 8,\n fontSize: \"sm\",\n px: 3\n },\n xs: {\n h: 6,\n minW: 6,\n fontSize: \"xs\",\n px: 2\n }\n};\nvar defaultProps$k = {\n variant: \"solid\",\n size: \"md\",\n colorScheme: \"gray\"\n};\nvar button = {\n baseStyle: baseStyle$y,\n variants: variants$9,\n sizes: sizes$j,\n defaultProps: defaultProps$k\n};\n\nvar baseStyleControl$1 = function baseStyleControl(props) {\n var c = props.colorScheme;\n return {\n w: \"100%\",\n transitionProperty: \"box-shadow\",\n transitionDuration: \"normal\",\n border: \"2px solid\",\n borderRadius: \"sm\",\n borderColor: \"inherit\",\n color: \"white\",\n _checked: {\n bg: mode(c + \".500\", c + \".200\")(props),\n borderColor: mode(c + \".500\", c + \".200\")(props),\n color: mode(\"white\", \"gray.900\")(props),\n _hover: {\n bg: mode(c + \".600\", c + \".300\")(props),\n borderColor: mode(c + \".600\", c + \".300\")(props)\n },\n _disabled: {\n borderColor: mode(\"gray.200\", \"transparent\")(props),\n bg: mode(\"gray.200\", \"whiteAlpha.300\")(props),\n color: mode(\"gray.500\", \"whiteAlpha.500\")(props)\n }\n },\n _indeterminate: {\n bg: mode(c + \".500\", c + \".200\")(props),\n borderColor: mode(c + \".500\", c + \".200\")(props),\n color: mode(\"white\", \"gray.900\")(props)\n },\n _disabled: {\n bg: mode(\"gray.100\", \"whiteAlpha.100\")(props),\n borderColor: mode(\"gray.100\", \"transparent\")(props)\n },\n _focus: {\n boxShadow: \"outline\"\n },\n _invalid: {\n borderColor: mode(\"red.500\", \"red.300\")(props)\n }\n };\n};\n\nvar baseStyleContainer$2 = {\n _disabled: {\n cursor: \"not-allowed\"\n }\n};\nvar baseStyleLabel$3 = {\n userSelect: \"none\",\n _disabled: {\n opacity: 0.4\n }\n};\nvar baseStyleIcon$4 = {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\"\n};\n\nvar baseStyle$x = function baseStyle(props) {\n return {\n icon: baseStyleIcon$4,\n container: baseStyleContainer$2,\n control: baseStyleControl$1(props),\n label: baseStyleLabel$3\n };\n};\n\nvar sizes$i = {\n sm: {\n control: {\n h: 3,\n w: 3\n },\n label: {\n fontSize: \"sm\"\n },\n icon: {\n fontSize: \"0.45rem\"\n }\n },\n md: {\n control: {\n w: 4,\n h: 4\n },\n label: {\n fontSize: \"md\"\n },\n icon: {\n fontSize: \"0.625rem\"\n }\n },\n lg: {\n control: {\n w: 5,\n h: 5\n },\n label: {\n fontSize: \"lg\"\n },\n icon: {\n fontSize: \"0.625rem\"\n }\n }\n};\nvar defaultProps$j = {\n size: \"md\",\n colorScheme: \"blue\"\n};\nvar Checkbox = {\n parts: checkboxAnatomy.keys,\n baseStyle: baseStyle$x,\n sizes: sizes$i,\n defaultProps: defaultProps$j\n};\n\nvar _lg$1, _md$1, _sm$1;\n\nvar $size$1 = cssVar(\"close-button-size\");\n\nvar baseStyle$w = function baseStyle(props) {\n var hoverBg = mode(\"blackAlpha.100\", \"whiteAlpha.100\")(props);\n var activeBg = mode(\"blackAlpha.200\", \"whiteAlpha.200\")(props);\n return {\n w: [$size$1.reference],\n h: [$size$1.reference],\n borderRadius: \"md\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\",\n boxShadow: \"none\"\n },\n _hover: {\n bg: hoverBg\n },\n _active: {\n bg: activeBg\n },\n _focus: {\n boxShadow: \"outline\"\n }\n };\n};\n\nvar sizes$h = {\n lg: (_lg$1 = {}, _lg$1[$size$1.variable] = \"40px\", _lg$1.fontSize = \"16px\", _lg$1),\n md: (_md$1 = {}, _md$1[$size$1.variable] = \"32px\", _md$1.fontSize = \"12px\", _md$1),\n sm: (_sm$1 = {}, _sm$1[$size$1.variable] = \"24px\", _sm$1.fontSize = \"10px\", _sm$1)\n};\nvar defaultProps$i = {\n size: \"md\"\n};\nvar closeButton = {\n baseStyle: baseStyle$w,\n sizes: sizes$h,\n defaultProps: defaultProps$i\n};\nvar variants$8 = Badge.variants,\n defaultProps$h = Badge.defaultProps;\nvar baseStyle$v = {\n fontFamily: \"mono\",\n fontSize: \"sm\",\n px: \"0.2em\",\n borderRadius: \"sm\"\n};\nvar code = {\n baseStyle: baseStyle$v,\n variants: variants$8,\n defaultProps: defaultProps$h\n};\nvar baseStyle$u = {\n w: \"100%\",\n mx: \"auto\",\n maxW: \"60ch\",\n px: \"1rem\"\n};\nvar container = {\n baseStyle: baseStyle$u\n};\nvar baseStyle$t = {\n opacity: 0.6,\n borderColor: \"inherit\"\n};\nvar variantSolid = {\n borderStyle: \"solid\"\n};\nvar variantDashed = {\n borderStyle: \"dashed\"\n};\nvar variants$7 = {\n solid: variantSolid,\n dashed: variantDashed\n};\nvar defaultProps$g = {\n variant: \"solid\"\n};\nvar divider = {\n baseStyle: baseStyle$t,\n variants: variants$7,\n defaultProps: defaultProps$g\n};\n/**\n * Since the `maxWidth` prop references theme.sizes internally,\n * we can leverage that to size our modals.\n */\n\nfunction getSize$2(value) {\n if (value === \"full\") {\n return {\n dialog: {\n maxW: \"100vw\",\n h: \"100vh\"\n }\n };\n }\n\n return {\n dialog: {\n maxW: value\n }\n };\n}\n\nvar baseStyleOverlay$1 = {\n bg: \"blackAlpha.600\",\n zIndex: \"overlay\"\n};\nvar baseStyleDialogContainer$1 = {\n display: \"flex\",\n zIndex: \"modal\",\n justifyContent: \"center\"\n};\n\nvar baseStyleDialog$1 = function baseStyleDialog(props) {\n var isFullHeight = props.isFullHeight;\n return _extends({}, isFullHeight && {\n height: \"100vh\"\n }, {\n zIndex: \"modal\",\n maxH: \"100vh\",\n bg: mode(\"white\", \"gray.700\")(props),\n color: \"inherit\",\n boxShadow: mode(\"lg\", \"dark-lg\")(props)\n });\n};\n\nvar baseStyleHeader$2 = {\n px: 6,\n py: 4,\n fontSize: \"xl\",\n fontWeight: \"semibold\"\n};\nvar baseStyleCloseButton$3 = {\n position: \"absolute\",\n top: 2,\n insetEnd: 3\n};\nvar baseStyleBody$2 = {\n px: 6,\n py: 2,\n flex: 1,\n overflow: \"auto\"\n};\nvar baseStyleFooter$2 = {\n px: 6,\n py: 4\n};\n\nvar baseStyle$s = function baseStyle(props) {\n return {\n overlay: baseStyleOverlay$1,\n dialogContainer: baseStyleDialogContainer$1,\n dialog: baseStyleDialog$1(props),\n header: baseStyleHeader$2,\n closeButton: baseStyleCloseButton$3,\n body: baseStyleBody$2,\n footer: baseStyleFooter$2\n };\n};\n\nvar sizes$g = {\n xs: getSize$2(\"xs\"),\n sm: getSize$2(\"md\"),\n md: getSize$2(\"lg\"),\n lg: getSize$2(\"2xl\"),\n xl: getSize$2(\"4xl\"),\n full: getSize$2(\"full\")\n};\nvar defaultProps$f = {\n size: \"xs\"\n};\nvar drawer = {\n parts: drawerAnatomy.keys,\n baseStyle: baseStyle$s,\n sizes: sizes$g,\n defaultProps: defaultProps$f\n};\nvar baseStylePreview = {\n borderRadius: \"md\",\n py: \"3px\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\"\n};\nvar baseStyleInput = {\n borderRadius: \"md\",\n py: \"3px\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n width: \"full\",\n _focus: {\n boxShadow: \"outline\"\n },\n _placeholder: {\n opacity: 0.6\n }\n};\nvar baseStyleTextarea = {\n borderRadius: \"md\",\n py: \"3px\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n width: \"full\",\n _focus: {\n boxShadow: \"outline\"\n },\n _placeholder: {\n opacity: 0.6\n }\n};\nvar baseStyle$r = {\n preview: baseStylePreview,\n input: baseStyleInput,\n textarea: baseStyleTextarea\n};\nvar editable = {\n parts: editableAnatomy.keys,\n baseStyle: baseStyle$r\n};\n\nvar baseStyleRequiredIndicator = function baseStyleRequiredIndicator(props) {\n return {\n marginStart: 1,\n color: mode(\"red.500\", \"red.300\")(props)\n };\n};\n\nvar baseStyleHelperText = function baseStyleHelperText(props) {\n return {\n mt: 2,\n color: mode(\"gray.500\", \"whiteAlpha.600\")(props),\n lineHeight: \"normal\",\n fontSize: \"sm\"\n };\n};\n\nvar baseStyle$q = function baseStyle(props) {\n return {\n container: {\n width: \"100%\",\n position: \"relative\"\n },\n requiredIndicator: baseStyleRequiredIndicator(props),\n helperText: baseStyleHelperText(props)\n };\n};\n\nvar form = {\n parts: formAnatomy.keys,\n baseStyle: baseStyle$q\n};\n\nvar baseStyleText = function baseStyleText(props) {\n return {\n color: mode(\"red.500\", \"red.300\")(props),\n mt: 2,\n fontSize: \"sm\",\n lineHeight: \"normal\"\n };\n};\n\nvar baseStyleIcon$3 = function baseStyleIcon(props) {\n return {\n marginEnd: \"0.5em\",\n color: mode(\"red.500\", \"red.300\")(props)\n };\n};\n\nvar baseStyle$p = function baseStyle(props) {\n return {\n text: baseStyleText(props),\n icon: baseStyleIcon$3(props)\n };\n};\n\nvar formError = {\n parts: formErrorAnatomy.keys,\n baseStyle: baseStyle$p\n};\nvar baseStyle$o = {\n fontSize: \"md\",\n marginEnd: 3,\n mb: 2,\n fontWeight: \"medium\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n opacity: 1,\n _disabled: {\n opacity: 0.4\n }\n};\nvar formLabel = {\n baseStyle: baseStyle$o\n};\nvar baseStyle$n = {\n fontFamily: \"heading\",\n fontWeight: \"bold\"\n};\nvar sizes$f = {\n \"4xl\": {\n fontSize: [\"6xl\", null, \"7xl\"],\n lineHeight: 1\n },\n \"3xl\": {\n fontSize: [\"5xl\", null, \"6xl\"],\n lineHeight: 1\n },\n \"2xl\": {\n fontSize: [\"4xl\", null, \"5xl\"],\n lineHeight: [1.2, null, 1]\n },\n xl: {\n fontSize: [\"3xl\", null, \"4xl\"],\n lineHeight: [1.33, null, 1.2]\n },\n lg: {\n fontSize: [\"2xl\", null, \"3xl\"],\n lineHeight: [1.33, null, 1.2]\n },\n md: {\n fontSize: \"xl\",\n lineHeight: 1.2\n },\n sm: {\n fontSize: \"md\",\n lineHeight: 1.2\n },\n xs: {\n fontSize: \"sm\",\n lineHeight: 1.2\n }\n};\nvar defaultProps$e = {\n size: \"xl\"\n};\nvar heading = {\n baseStyle: baseStyle$n,\n sizes: sizes$f,\n defaultProps: defaultProps$e\n};\nvar baseStyle$m = {\n field: {\n width: \"100%\",\n minWidth: 0,\n outline: 0,\n position: \"relative\",\n appearance: \"none\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\"\n }\n};\nvar size = {\n lg: {\n fontSize: \"lg\",\n px: 4,\n h: 12,\n borderRadius: \"md\"\n },\n md: {\n fontSize: \"md\",\n px: 4,\n h: 10,\n borderRadius: \"md\"\n },\n sm: {\n fontSize: \"sm\",\n px: 3,\n h: 8,\n borderRadius: \"sm\"\n },\n xs: {\n fontSize: \"xs\",\n px: 2,\n h: 6,\n borderRadius: \"sm\"\n }\n};\nvar sizes$e = {\n lg: {\n field: size.lg,\n addon: size.lg\n },\n md: {\n field: size.md,\n addon: size.md\n },\n sm: {\n field: size.sm,\n addon: size.sm\n },\n xs: {\n field: size.xs,\n addon: size.xs\n }\n};\n\nfunction getDefaults(props) {\n var fc = props.focusBorderColor,\n ec = props.errorBorderColor;\n return {\n focusBorderColor: fc || mode(\"blue.500\", \"blue.300\")(props),\n errorBorderColor: ec || mode(\"red.500\", \"red.300\")(props)\n };\n}\n\nvar variantOutline = function variantOutline(props) {\n var theme = props.theme;\n\n var _getDefaults = getDefaults(props),\n fc = _getDefaults.focusBorderColor,\n ec = _getDefaults.errorBorderColor;\n\n return {\n field: {\n border: \"1px solid\",\n borderColor: \"inherit\",\n bg: \"inherit\",\n _hover: {\n borderColor: mode(\"gray.300\", \"whiteAlpha.400\")(props)\n },\n _readOnly: {\n boxShadow: \"none !important\",\n userSelect: \"all\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n },\n _invalid: {\n borderColor: getColor(theme, ec),\n boxShadow: \"0 0 0 1px \" + getColor(theme, ec)\n },\n _focus: {\n zIndex: 1,\n borderColor: getColor(theme, fc),\n boxShadow: \"0 0 0 1px \" + getColor(theme, fc)\n }\n },\n addon: {\n border: \"1px solid\",\n borderColor: mode(\"inherit\", \"whiteAlpha.50\")(props),\n bg: mode(\"gray.100\", \"whiteAlpha.300\")(props)\n }\n };\n};\n\nvar variantFilled = function variantFilled(props) {\n var theme = props.theme;\n\n var _getDefaults2 = getDefaults(props),\n fc = _getDefaults2.focusBorderColor,\n ec = _getDefaults2.errorBorderColor;\n\n return {\n field: {\n border: \"2px solid\",\n borderColor: \"transparent\",\n bg: mode(\"gray.100\", \"whiteAlpha.50\")(props),\n _hover: {\n bg: mode(\"gray.200\", \"whiteAlpha.100\")(props)\n },\n _readOnly: {\n boxShadow: \"none !important\",\n userSelect: \"all\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n },\n _invalid: {\n borderColor: getColor(theme, ec)\n },\n _focus: {\n bg: \"transparent\",\n borderColor: getColor(theme, fc)\n }\n },\n addon: {\n border: \"2px solid\",\n borderColor: \"transparent\",\n bg: mode(\"gray.100\", \"whiteAlpha.50\")(props)\n }\n };\n};\n\nvar variantFlushed = function variantFlushed(props) {\n var theme = props.theme;\n\n var _getDefaults3 = getDefaults(props),\n fc = _getDefaults3.focusBorderColor,\n ec = _getDefaults3.errorBorderColor;\n\n return {\n field: {\n borderBottom: \"1px solid\",\n borderColor: \"inherit\",\n borderRadius: 0,\n px: 0,\n bg: \"transparent\",\n _readOnly: {\n boxShadow: \"none !important\",\n userSelect: \"all\"\n },\n _invalid: {\n borderColor: getColor(theme, ec),\n boxShadow: \"0px 1px 0px 0px \" + getColor(theme, ec)\n },\n _focus: {\n borderColor: getColor(theme, fc),\n boxShadow: \"0px 1px 0px 0px \" + getColor(theme, fc)\n }\n },\n addon: {\n borderBottom: \"2px solid\",\n borderColor: \"inherit\",\n borderRadius: 0,\n px: 0,\n bg: \"transparent\"\n }\n };\n};\n\nvar variantUnstyled$1 = {\n field: {\n bg: \"transparent\",\n px: 0,\n height: \"auto\"\n },\n addon: {\n bg: \"transparent\",\n px: 0,\n height: \"auto\"\n }\n};\nvar variants$6 = {\n outline: variantOutline,\n filled: variantFilled,\n flushed: variantFlushed,\n unstyled: variantUnstyled$1\n};\nvar defaultProps$d = {\n size: \"md\",\n variant: \"outline\"\n};\nvar Input = {\n parts: inputAnatomy.keys,\n baseStyle: baseStyle$m,\n sizes: sizes$e,\n variants: variants$6,\n defaultProps: defaultProps$d\n};\n\nvar baseStyle$l = function baseStyle(props) {\n return {\n bg: mode(\"gray.100\", \"whiteAlpha\")(props),\n borderRadius: \"md\",\n borderWidth: \"1px\",\n borderBottomWidth: \"3px\",\n fontSize: \"0.8em\",\n fontWeight: \"bold\",\n lineHeight: \"normal\",\n px: \"0.4em\",\n whiteSpace: \"nowrap\"\n };\n};\n\nvar kbd = {\n baseStyle: baseStyle$l\n};\nvar baseStyle$k = {\n transitionProperty: \"common\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"ease-out\",\n cursor: \"pointer\",\n textDecoration: \"none\",\n outline: \"none\",\n color: \"inherit\",\n _hover: {\n textDecoration: \"underline\"\n },\n _focus: {\n boxShadow: \"outline\"\n }\n};\nvar link = {\n baseStyle: baseStyle$k\n};\nvar baseStyleIcon$2 = {\n marginEnd: \"0.5rem\",\n display: \"inline\",\n verticalAlign: \"text-bottom\"\n};\nvar baseStyle$j = {\n container: {},\n item: {},\n icon: baseStyleIcon$2\n};\nvar list = {\n parts: listAnatomy.keys,\n baseStyle: baseStyle$j\n};\n\nvar baseStyleList = function baseStyleList(props) {\n return {\n bg: mode(\"#fff\", \"gray.700\")(props),\n boxShadow: mode(\"sm\", \"dark-lg\")(props),\n color: \"inherit\",\n minW: \"3xs\",\n py: \"2\",\n zIndex: 1,\n borderRadius: \"md\",\n borderWidth: \"1px\"\n };\n};\n\nvar baseStyleItem = function baseStyleItem(props) {\n return {\n py: \"0.4rem\",\n px: \"0.8rem\",\n transitionProperty: \"background\",\n transitionDuration: \"ultra-fast\",\n transitionTimingFunction: \"ease-in\",\n _focus: {\n bg: mode(\"gray.100\", \"whiteAlpha.100\")(props)\n },\n _active: {\n bg: mode(\"gray.200\", \"whiteAlpha.200\")(props)\n },\n _expanded: {\n bg: mode(\"gray.100\", \"whiteAlpha.100\")(props)\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n }\n };\n};\n\nvar baseStyleGroupTitle = {\n mx: 4,\n my: 2,\n fontWeight: \"semibold\",\n fontSize: \"sm\"\n};\nvar baseStyleCommand = {\n opacity: 0.6\n};\nvar baseStyleDivider = {\n border: 0,\n borderBottom: \"1px solid\",\n borderColor: \"inherit\",\n my: \"0.5rem\",\n opacity: 0.6\n};\nvar baseStyleButton = {\n transitionProperty: \"common\",\n transitionDuration: \"normal\"\n};\n\nvar baseStyle$i = function baseStyle(props) {\n return {\n button: baseStyleButton,\n list: baseStyleList(props),\n item: baseStyleItem(props),\n groupTitle: baseStyleGroupTitle,\n command: baseStyleCommand,\n divider: baseStyleDivider\n };\n};\n\nvar menu = {\n parts: menuAnatomy.keys,\n baseStyle: baseStyle$i\n};\nvar baseStyleOverlay = {\n bg: \"blackAlpha.600\",\n zIndex: \"modal\"\n};\n\nvar baseStyleDialogContainer = function baseStyleDialogContainer(props) {\n var isCentered = props.isCentered,\n scrollBehavior = props.scrollBehavior;\n return {\n display: \"flex\",\n zIndex: \"modal\",\n justifyContent: \"center\",\n alignItems: isCentered ? \"center\" : \"flex-start\",\n overflow: scrollBehavior === \"inside\" ? \"hidden\" : \"auto\"\n };\n};\n\nvar baseStyleDialog = function baseStyleDialog(props) {\n var scrollBehavior = props.scrollBehavior;\n return {\n borderRadius: \"md\",\n bg: mode(\"white\", \"gray.700\")(props),\n color: \"inherit\",\n my: \"3.75rem\",\n zIndex: \"modal\",\n maxH: scrollBehavior === \"inside\" ? \"calc(100% - 7.5rem)\" : undefined,\n boxShadow: mode(\"lg\", \"dark-lg\")(props)\n };\n};\n\nvar baseStyleHeader$1 = {\n px: 6,\n py: 4,\n fontSize: \"xl\",\n fontWeight: \"semibold\"\n};\nvar baseStyleCloseButton$2 = {\n position: \"absolute\",\n top: 2,\n insetEnd: 3\n};\n\nvar baseStyleBody$1 = function baseStyleBody(props) {\n var scrollBehavior = props.scrollBehavior;\n return {\n px: 6,\n py: 2,\n flex: 1,\n overflow: scrollBehavior === \"inside\" ? \"auto\" : undefined\n };\n};\n\nvar baseStyleFooter$1 = {\n px: 6,\n py: 4\n};\n\nvar baseStyle$h = function baseStyle(props) {\n return {\n overlay: baseStyleOverlay,\n dialogContainer: baseStyleDialogContainer(props),\n dialog: baseStyleDialog(props),\n header: baseStyleHeader$1,\n closeButton: baseStyleCloseButton$2,\n body: baseStyleBody$1(props),\n footer: baseStyleFooter$1\n };\n};\n/**\n * Since the `maxWidth` prop references theme.sizes internally,\n * we can leverage that to size our modals.\n */\n\n\nfunction getSize$1(value) {\n if (value === \"full\") {\n return {\n dialog: {\n maxW: \"100vw\",\n minH: \"100vh\",\n \"@supports(min-height: -webkit-fill-available)\": {\n minH: \"-webkit-fill-available\"\n },\n my: 0\n }\n };\n }\n\n return {\n dialog: {\n maxW: value\n }\n };\n}\n\nvar sizes$d = {\n xs: getSize$1(\"xs\"),\n sm: getSize$1(\"sm\"),\n md: getSize$1(\"md\"),\n lg: getSize$1(\"lg\"),\n xl: getSize$1(\"xl\"),\n \"2xl\": getSize$1(\"2xl\"),\n \"3xl\": getSize$1(\"3xl\"),\n \"4xl\": getSize$1(\"4xl\"),\n \"5xl\": getSize$1(\"5xl\"),\n \"6xl\": getSize$1(\"6xl\"),\n full: getSize$1(\"full\")\n};\nvar defaultProps$c = {\n size: \"md\"\n};\nvar modal = {\n parts: modalAnatomy.keys,\n baseStyle: baseStyle$h,\n sizes: sizes$d,\n defaultProps: defaultProps$c\n};\n\nvar _baseStyleRoot, _Input$baseStyle$fiel, _Input$baseStyle;\n\nvar variants$5 = Input.variants,\n defaultProps$b = Input.defaultProps;\nvar $stepperWidth = cssVar(\"number-input-stepper-width\");\nvar $inputPadding = cssVar(\"number-input-input-padding\");\nvar inputPaddingValue = calc($stepperWidth).add(\"0.5rem\").toString();\nvar baseStyleRoot$1 = (_baseStyleRoot = {}, _baseStyleRoot[$stepperWidth.variable] = \"24px\", _baseStyleRoot[$inputPadding.variable] = inputPaddingValue, _baseStyleRoot);\nvar baseStyleField$1 = (_Input$baseStyle$fiel = (_Input$baseStyle = Input.baseStyle) == null ? void 0 : _Input$baseStyle.field) != null ? _Input$baseStyle$fiel : {};\nvar baseStyleStepperGroup = {\n width: [$stepperWidth.reference]\n};\n\nvar baseStyleStepper = function baseStyleStepper(props) {\n return {\n borderStart: \"1px solid\",\n borderStartColor: mode(\"inherit\", \"whiteAlpha.300\")(props),\n color: mode(\"inherit\", \"whiteAlpha.800\")(props),\n _active: {\n bg: mode(\"gray.200\", \"whiteAlpha.300\")(props)\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n }\n };\n};\n\nvar baseStyle$g = function baseStyle(props) {\n return {\n root: baseStyleRoot$1,\n field: baseStyleField$1,\n stepperGroup: baseStyleStepperGroup,\n stepper: baseStyleStepper(props)\n };\n};\n\nfunction getSize(size) {\n var _sizeStyle$field$font, _sizeStyle$field;\n\n var sizeStyle = Input.sizes[size];\n var radius = {\n lg: \"md\",\n md: \"md\",\n sm: \"sm\",\n xs: \"sm\"\n };\n\n var _fontSize = (_sizeStyle$field$font = (_sizeStyle$field = sizeStyle.field) == null ? void 0 : _sizeStyle$field.fontSize) != null ? _sizeStyle$field$font : \"md\";\n\n var fontSize = typography.fontSizes[_fontSize.toString()];\n\n return {\n field: _extends({}, sizeStyle.field, {\n paddingInlineEnd: $inputPadding.reference,\n verticalAlign: \"top\"\n }),\n stepper: {\n fontSize: calc(fontSize).multiply(0.75).toString(),\n _first: {\n borderTopEndRadius: radius[size]\n },\n _last: {\n borderBottomEndRadius: radius[size],\n mt: \"-1px\",\n borderTopWidth: 1\n }\n }\n };\n}\n\nvar sizes$c = {\n xs: getSize(\"xs\"),\n sm: getSize(\"sm\"),\n md: getSize(\"md\"),\n lg: getSize(\"lg\")\n};\nvar numberInput = {\n parts: numberInputAnatomy.keys,\n baseStyle: baseStyle$g,\n sizes: sizes$c,\n variants: variants$5,\n defaultProps: defaultProps$b\n};\n\nvar _Input$variants$unsty$1;\n\nvar baseStyle$f = _extends({}, Input.baseStyle.field, {\n textAlign: \"center\"\n});\n\nvar sizes$b = {\n lg: {\n fontSize: \"lg\",\n w: 12,\n h: 12,\n borderRadius: \"md\"\n },\n md: {\n fontSize: \"md\",\n w: 10,\n h: 10,\n borderRadius: \"md\"\n },\n sm: {\n fontSize: \"sm\",\n w: 8,\n h: 8,\n borderRadius: \"sm\"\n },\n xs: {\n fontSize: \"xs\",\n w: 6,\n h: 6,\n borderRadius: \"sm\"\n }\n};\nvar variants$4 = {\n outline: function outline(props) {\n var _Input$variants$outli;\n\n return (_Input$variants$outli = Input.variants.outline(props).field) != null ? _Input$variants$outli : {};\n },\n flushed: function flushed(props) {\n var _Input$variants$flush;\n\n return (_Input$variants$flush = Input.variants.flushed(props).field) != null ? _Input$variants$flush : {};\n },\n filled: function filled(props) {\n var _Input$variants$fille;\n\n return (_Input$variants$fille = Input.variants.filled(props).field) != null ? _Input$variants$fille : {};\n },\n unstyled: (_Input$variants$unsty$1 = Input.variants.unstyled.field) != null ? _Input$variants$unsty$1 : {}\n};\nvar defaultProps$a = Input.defaultProps;\nvar pinInput = {\n baseStyle: baseStyle$f,\n sizes: sizes$b,\n variants: variants$4,\n defaultProps: defaultProps$a\n};\nvar $popperBg = cssVar(\"popper-bg\");\nvar $arrowBg$1 = cssVar(\"popper-arrow-bg\");\nvar $arrowShadowColor = cssVar(\"popper-arrow-shadow-color\");\nvar baseStylePopper = {\n zIndex: 10\n};\n\nvar baseStyleContent = function baseStyleContent(props) {\n var _ref;\n\n var bg = mode(\"white\", \"gray.700\")(props);\n var shadowColor = mode(\"gray.200\", \"whiteAlpha.300\")(props);\n return _ref = {}, _ref[$popperBg.variable] = \"colors.\" + bg, _ref.bg = $popperBg.reference, _ref[$arrowBg$1.variable] = $popperBg.reference, _ref[$arrowShadowColor.variable] = \"colors.\" + shadowColor, _ref.width = \"xs\", _ref.border = \"1px solid\", _ref.borderColor = \"inherit\", _ref.borderRadius = \"md\", _ref.boxShadow = \"sm\", _ref.zIndex = \"inherit\", _ref._focus = {\n outline: 0,\n boxShadow: \"outline\"\n }, _ref;\n};\n\nvar baseStyleHeader = {\n px: 3,\n py: 2,\n borderBottomWidth: \"1px\"\n};\nvar baseStyleBody = {\n px: 3,\n py: 2\n};\nvar baseStyleFooter = {\n px: 3,\n py: 2,\n borderTopWidth: \"1px\"\n};\nvar baseStyleCloseButton$1 = {\n position: \"absolute\",\n borderRadius: \"md\",\n top: 1,\n insetEnd: 2,\n padding: 2\n};\n\nvar baseStyle$e = function baseStyle(props) {\n return {\n popper: baseStylePopper,\n content: baseStyleContent(props),\n header: baseStyleHeader,\n body: baseStyleBody,\n footer: baseStyleFooter,\n arrow: {},\n closeButton: baseStyleCloseButton$1\n };\n};\n\nvar popover = {\n parts: popoverAnatomy.keys,\n baseStyle: baseStyle$e\n};\n\nfunction filledStyle(props) {\n var c = props.colorScheme,\n t = props.theme,\n isIndeterminate = props.isIndeterminate,\n hasStripe = props.hasStripe;\n var stripeStyle = mode(generateStripe(), generateStripe(\"1rem\", \"rgba(0,0,0,0.1)\"))(props);\n var bgColor = mode(c + \".500\", c + \".200\")(props);\n var gradient = \"linear-gradient(\\n to right,\\n transparent 0%,\\n \" + getColor(t, bgColor) + \" 50%,\\n transparent 100%\\n )\";\n var addStripe = !isIndeterminate && hasStripe;\n return _extends({}, addStripe && stripeStyle, isIndeterminate ? {\n bgImage: gradient\n } : {\n bgColor: bgColor\n });\n}\n\nvar baseStyleLabel$2 = {\n lineHeight: \"1\",\n fontSize: \"0.25em\",\n fontWeight: \"bold\",\n color: \"white\"\n};\n\nvar baseStyleTrack$2 = function baseStyleTrack(props) {\n return {\n bg: mode(\"gray.100\", \"whiteAlpha.300\")(props)\n };\n};\n\nvar baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {\n return _extends({\n transitionProperty: \"common\",\n transitionDuration: \"slow\"\n }, filledStyle(props));\n};\n\nvar baseStyle$d = function baseStyle(props) {\n return {\n label: baseStyleLabel$2,\n filledTrack: baseStyleFilledTrack$1(props),\n track: baseStyleTrack$2(props)\n };\n};\n\nvar sizes$a = {\n xs: {\n track: {\n h: \"0.25rem\"\n }\n },\n sm: {\n track: {\n h: \"0.5rem\"\n }\n },\n md: {\n track: {\n h: \"0.75rem\"\n }\n },\n lg: {\n track: {\n h: \"1rem\"\n }\n }\n};\nvar defaultProps$9 = {\n size: \"md\",\n colorScheme: \"blue\"\n};\nvar progress = {\n parts: progressAnatomy.keys,\n sizes: sizes$a,\n baseStyle: baseStyle$d,\n defaultProps: defaultProps$9\n};\n\nvar baseStyleControl = function baseStyleControl(props) {\n var _Checkbox$baseStyle = Checkbox.baseStyle(props),\n _Checkbox$baseStyle$c = _Checkbox$baseStyle.control,\n control = _Checkbox$baseStyle$c === void 0 ? {} : _Checkbox$baseStyle$c;\n\n return _extends({}, control, {\n borderRadius: \"full\",\n _checked: _extends({}, control[\"_checked\"], {\n _before: {\n content: \"\\\"\\\"\",\n display: \"inline-block\",\n pos: \"relative\",\n w: \"50%\",\n h: \"50%\",\n borderRadius: \"50%\",\n bg: \"currentColor\"\n }\n })\n });\n};\n\nvar baseStyle$c = function baseStyle(props) {\n return {\n label: Checkbox.baseStyle(props).label,\n container: Checkbox.baseStyle(props).container,\n control: baseStyleControl(props)\n };\n};\n\nvar sizes$9 = {\n md: {\n control: {\n w: 4,\n h: 4\n },\n label: {\n fontSize: \"md\"\n }\n },\n lg: {\n control: {\n w: 5,\n h: 5\n },\n label: {\n fontSize: \"lg\"\n }\n },\n sm: {\n control: {\n width: 3,\n height: 3\n },\n label: {\n fontSize: \"sm\"\n }\n }\n};\nvar defaultProps$8 = {\n size: \"md\",\n colorScheme: \"blue\"\n};\nvar radio = {\n parts: radioAnatomy.keys,\n baseStyle: baseStyle$c,\n sizes: sizes$9,\n defaultProps: defaultProps$8\n};\n\nvar baseStyleField = function baseStyleField(props) {\n return _extends({}, Input.baseStyle.field, {\n bg: mode(\"white\", \"gray.700\")(props),\n appearance: \"none\",\n paddingBottom: \"1px\",\n lineHeight: \"normal\",\n \"> option, > optgroup\": {\n bg: mode(\"white\", \"gray.700\")(props)\n }\n });\n};\n\nvar baseStyleIcon$1 = {\n width: \"1.5rem\",\n height: \"100%\",\n insetEnd: \"0.5rem\",\n position: \"relative\",\n color: \"currentColor\",\n fontSize: \"1.25rem\",\n _disabled: {\n opacity: 0.5\n }\n};\n\nvar baseStyle$b = function baseStyle(props) {\n return {\n field: baseStyleField(props),\n icon: baseStyleIcon$1\n };\n};\n\nvar iconSpacing = {\n paddingInlineEnd: \"2rem\"\n};\nvar sizes$8 = mergeWith({}, Input.sizes, {\n lg: {\n field: iconSpacing\n },\n md: {\n field: iconSpacing\n },\n sm: {\n field: iconSpacing\n },\n xs: {\n field: iconSpacing,\n icon: {\n insetEnd: \"0.25rem\"\n }\n }\n});\nvar select = {\n parts: selectAnatomy.keys,\n baseStyle: baseStyle$b,\n sizes: sizes$8,\n variants: Input.variants,\n defaultProps: Input.defaultProps\n};\n\nvar fade = function fade(startColor, endColor) {\n return keyframes({\n from: {\n borderColor: startColor,\n background: startColor\n },\n to: {\n borderColor: endColor,\n background: endColor\n }\n });\n};\n\nvar baseStyle$a = function baseStyle(props) {\n var defaultStartColor = mode(\"gray.100\", \"gray.800\")(props);\n var defaultEndColor = mode(\"gray.400\", \"gray.600\")(props);\n var _props$startColor = props.startColor,\n startColor = _props$startColor === void 0 ? defaultStartColor : _props$startColor,\n _props$endColor = props.endColor,\n endColor = _props$endColor === void 0 ? defaultEndColor : _props$endColor,\n speed = props.speed,\n theme = props.theme;\n var start = getColor(theme, startColor);\n var end = getColor(theme, endColor);\n return {\n opacity: 0.7,\n borderRadius: \"2px\",\n borderColor: start,\n background: end,\n animation: speed + \"s linear infinite alternate \" + fade(start, end)\n };\n};\n\nvar skeleton = {\n baseStyle: baseStyle$a\n};\n\nvar baseStyle$9 = function baseStyle(props) {\n return {\n borderRadius: \"md\",\n fontWeight: \"semibold\",\n _focus: {\n boxShadow: \"outline\",\n padding: \"1rem\",\n position: \"fixed\",\n top: \"1.5rem\",\n insetStart: \"1.5rem\",\n bg: mode(\"white\", \"gray.700\")(props)\n }\n };\n};\n\nvar skipLink = {\n baseStyle: baseStyle$9\n};\n\nfunction thumbOrientation(props) {\n return orient({\n orientation: props.orientation,\n vertical: {\n left: \"50%\",\n transform: \"translateX(-50%)\",\n _active: {\n transform: \"translateX(-50%) scale(1.15)\"\n }\n },\n horizontal: {\n top: \"50%\",\n transform: \"translateY(-50%)\",\n _active: {\n transform: \"translateY(-50%) scale(1.15)\"\n }\n }\n });\n}\n\nvar baseStyleContainer$1 = function baseStyleContainer(props) {\n var orientation = props.orientation;\n return _extends({\n display: \"inline-block\",\n position: \"relative\",\n cursor: \"pointer\",\n _disabled: {\n opacity: 0.6,\n cursor: \"default\",\n pointerEvents: \"none\"\n }\n }, orient({\n orientation: orientation,\n vertical: {\n h: \"100%\"\n },\n horizontal: {\n w: \"100%\"\n }\n }));\n};\n\nvar baseStyleTrack$1 = function baseStyleTrack(props) {\n return {\n overflow: \"hidden\",\n borderRadius: \"sm\",\n bg: mode(\"gray.200\", \"whiteAlpha.200\")(props),\n _disabled: {\n bg: mode(\"gray.300\", \"whiteAlpha.300\")(props)\n }\n };\n};\n\nvar baseStyleThumb$1 = function baseStyleThumb(props) {\n return _extends({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"absolute\",\n outline: 0,\n zIndex: 1,\n borderRadius: \"full\",\n bg: \"white\",\n boxShadow: \"base\",\n border: \"1px solid\",\n borderColor: \"transparent\",\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n _focus: {\n boxShadow: \"outline\"\n },\n _disabled: {\n bg: \"gray.300\"\n }\n }, thumbOrientation(props));\n};\n\nvar baseStyleFilledTrack = function baseStyleFilledTrack(props) {\n var c = props.colorScheme;\n return {\n width: \"inherit\",\n height: \"inherit\",\n bg: mode(c + \".500\", c + \".200\")(props)\n };\n};\n\nvar baseStyle$8 = function baseStyle(props) {\n return {\n container: baseStyleContainer$1(props),\n track: baseStyleTrack$1(props),\n thumb: baseStyleThumb$1(props),\n filledTrack: baseStyleFilledTrack(props)\n };\n};\n\nvar sizeLg = function sizeLg(props) {\n return {\n thumb: {\n w: \"16px\",\n h: \"16px\"\n },\n track: orient({\n orientation: props.orientation,\n horizontal: {\n h: \"4px\"\n },\n vertical: {\n w: \"4px\"\n }\n })\n };\n};\n\nvar sizeMd = function sizeMd(props) {\n return {\n thumb: {\n w: \"14px\",\n h: \"14px\"\n },\n track: orient({\n orientation: props.orientation,\n horizontal: {\n h: \"4px\"\n },\n vertical: {\n w: \"4px\"\n }\n })\n };\n};\n\nvar sizeSm = function sizeSm(props) {\n return {\n thumb: {\n w: \"10px\",\n h: \"10px\"\n },\n track: orient({\n orientation: props.orientation,\n horizontal: {\n h: \"2px\"\n },\n vertical: {\n w: \"2px\"\n }\n })\n };\n};\n\nvar sizes$7 = {\n lg: sizeLg,\n md: sizeMd,\n sm: sizeSm\n};\nvar defaultProps$7 = {\n size: \"md\",\n colorScheme: \"blue\"\n};\nvar slider = {\n parts: sliderAnatomy.keys,\n sizes: sizes$7,\n baseStyle: baseStyle$8,\n defaultProps: defaultProps$7\n};\n\nvar _xs, _sm, _md, _lg, _xl;\n\nvar $size = cssVar(\"spinner-size\");\nvar baseStyle$7 = {\n width: [$size.reference],\n height: [$size.reference]\n};\nvar sizes$6 = {\n xs: (_xs = {}, _xs[$size.variable] = \"0.75rem\", _xs),\n sm: (_sm = {}, _sm[$size.variable] = \"1rem\", _sm),\n md: (_md = {}, _md[$size.variable] = \"1.5rem\", _md),\n lg: (_lg = {}, _lg[$size.variable] = \"2rem\", _lg),\n xl: (_xl = {}, _xl[$size.variable] = \"3rem\", _xl)\n};\nvar defaultProps$6 = {\n size: \"md\"\n};\nvar spinner = {\n baseStyle: baseStyle$7,\n sizes: sizes$6,\n defaultProps: defaultProps$6\n};\nvar baseStyleLabel$1 = {\n fontWeight: \"medium\"\n};\nvar baseStyleHelpText = {\n opacity: 0.8,\n marginBottom: 2\n};\nvar baseStyleNumber = {\n verticalAlign: \"baseline\",\n fontWeight: \"semibold\"\n};\nvar baseStyleIcon = {\n marginEnd: 1,\n w: \"14px\",\n h: \"14px\",\n verticalAlign: \"middle\"\n};\nvar baseStyle$6 = {\n container: {},\n label: baseStyleLabel$1,\n helpText: baseStyleHelpText,\n number: baseStyleNumber,\n icon: baseStyleIcon\n};\nvar sizes$5 = {\n md: {\n label: {\n fontSize: \"sm\"\n },\n helpText: {\n fontSize: \"sm\"\n },\n number: {\n fontSize: \"2xl\"\n }\n }\n};\nvar defaultProps$5 = {\n size: \"md\"\n};\nvar stat = {\n parts: statAnatomy.keys,\n baseStyle: baseStyle$6,\n sizes: sizes$5,\n defaultProps: defaultProps$5\n};\n\nvar _container2, _container3, _container4;\n\nvar $width = cssVar(\"switch-track-width\");\nvar $height = cssVar(\"switch-track-height\");\nvar $diff = cssVar(\"switch-track-diff\");\nvar diffValue = calc.subtract($width, $height);\nvar $translateX = cssVar(\"switch-thumb-x\");\n\nvar baseStyleTrack = function baseStyleTrack(props) {\n var c = props.colorScheme;\n return {\n borderRadius: \"full\",\n p: \"2px\",\n width: [$width.reference],\n height: [$height.reference],\n transitionProperty: \"common\",\n transitionDuration: \"fast\",\n bg: mode(\"gray.300\", \"whiteAlpha.400\")(props),\n _focus: {\n boxShadow: \"outline\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n },\n _checked: {\n bg: mode(c + \".500\", c + \".200\")(props)\n }\n };\n};\n\nvar baseStyleThumb = {\n bg: \"white\",\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n borderRadius: \"inherit\",\n width: [$height.reference],\n height: [$height.reference],\n _checked: {\n transform: \"translateX(\" + $translateX.reference + \")\"\n }\n};\n\nvar baseStyle$5 = function baseStyle(props) {\n var _rtl, _container;\n\n return {\n container: (_container = {}, _container[$diff.variable] = diffValue, _container[$translateX.variable] = $diff.reference, _container._rtl = (_rtl = {}, _rtl[$translateX.variable] = calc($diff).negate().toString(), _rtl), _container),\n track: baseStyleTrack(props),\n thumb: baseStyleThumb\n };\n};\n\nvar sizes$4 = {\n sm: {\n container: (_container2 = {}, _container2[$width.variable] = \"1.375rem\", _container2[$height.variable] = \"0.75rem\", _container2)\n },\n md: {\n container: (_container3 = {}, _container3[$width.variable] = \"1.875rem\", _container3[$height.variable] = \"1rem\", _container3)\n },\n lg: {\n container: (_container4 = {}, _container4[$width.variable] = \"2.875rem\", _container4[$height.variable] = \"1.5rem\", _container4)\n }\n};\nvar defaultProps$4 = {\n size: \"md\",\n colorScheme: \"blue\"\n};\nvar _switch = {\n parts: switchAnatomy.keys,\n baseStyle: baseStyle$5,\n sizes: sizes$4,\n defaultProps: defaultProps$4\n};\nvar baseStyle$4 = {\n table: {\n fontVariantNumeric: \"lining-nums tabular-nums\",\n borderCollapse: \"collapse\",\n width: \"full\"\n },\n th: {\n fontFamily: \"heading\",\n fontWeight: \"bold\",\n textTransform: \"uppercase\",\n letterSpacing: \"wider\",\n textAlign: \"start\"\n },\n td: {\n textAlign: \"start\"\n },\n caption: {\n mt: 4,\n fontFamily: \"heading\",\n textAlign: \"center\",\n fontWeight: \"medium\"\n }\n};\nvar numericStyles = {\n \"&[data-is-numeric=true]\": {\n textAlign: \"end\"\n }\n};\n\nvar variantSimple = function variantSimple(props) {\n var c = props.colorScheme;\n return {\n th: _extends({\n color: mode(\"gray.600\", \"gray.400\")(props),\n borderBottom: \"1px\",\n borderColor: mode(c + \".100\", c + \".700\")(props)\n }, numericStyles),\n td: _extends({\n borderBottom: \"1px\",\n borderColor: mode(c + \".100\", c + \".700\")(props)\n }, numericStyles),\n caption: {\n color: mode(\"gray.600\", \"gray.100\")(props)\n },\n tfoot: {\n tr: {\n \"&:last-of-type\": {\n th: {\n borderBottomWidth: 0\n }\n }\n }\n }\n };\n};\n\nvar variantStripe = function variantStripe(props) {\n var c = props.colorScheme;\n return {\n th: _extends({\n color: mode(\"gray.600\", \"gray.400\")(props),\n borderBottom: \"1px\",\n borderColor: mode(c + \".100\", c + \".700\")(props)\n }, numericStyles),\n td: _extends({\n borderBottom: \"1px\",\n borderColor: mode(c + \".100\", c + \".700\")(props)\n }, numericStyles),\n caption: {\n color: mode(\"gray.600\", \"gray.100\")(props)\n },\n tbody: {\n tr: {\n \"&:nth-of-type(odd)\": {\n \"th, td\": {\n borderBottomWidth: \"1px\",\n borderColor: mode(c + \".100\", c + \".700\")(props)\n },\n td: {\n background: mode(c + \".100\", c + \".700\")(props)\n }\n }\n }\n },\n tfoot: {\n tr: {\n \"&:last-of-type\": {\n th: {\n borderBottomWidth: 0\n }\n }\n }\n }\n };\n};\n\nvar variants$3 = {\n simple: variantSimple,\n striped: variantStripe,\n unstyled: {}\n};\nvar sizes$3 = {\n sm: {\n th: {\n px: \"4\",\n py: \"1\",\n lineHeight: \"4\",\n fontSize: \"xs\"\n },\n td: {\n px: \"4\",\n py: \"2\",\n fontSize: \"sm\",\n lineHeight: \"4\"\n },\n caption: {\n px: \"4\",\n py: \"2\",\n fontSize: \"xs\"\n }\n },\n md: {\n th: {\n px: \"6\",\n py: \"3\",\n lineHeight: \"4\",\n fontSize: \"xs\"\n },\n td: {\n px: \"6\",\n py: \"4\",\n lineHeight: \"5\"\n },\n caption: {\n px: \"6\",\n py: \"2\",\n fontSize: \"sm\"\n }\n },\n lg: {\n th: {\n px: \"8\",\n py: \"4\",\n lineHeight: \"5\",\n fontSize: \"sm\"\n },\n td: {\n px: \"8\",\n py: \"5\",\n lineHeight: \"6\"\n },\n caption: {\n px: \"6\",\n py: \"2\",\n fontSize: \"md\"\n }\n }\n};\nvar defaultProps$3 = {\n variant: \"simple\",\n size: \"md\",\n colorScheme: \"gray\"\n};\nvar table = {\n parts: tableAnatomy.keys,\n baseStyle: baseStyle$4,\n variants: variants$3,\n sizes: sizes$3,\n defaultProps: defaultProps$3\n};\n\nvar baseStyleRoot = function baseStyleRoot(props) {\n var orientation = props.orientation;\n return {\n display: orientation === \"vertical\" ? \"flex\" : \"block\"\n };\n};\n\nvar baseStyleTab = function baseStyleTab(props) {\n var isFitted = props.isFitted;\n return {\n flex: isFitted ? 1 : undefined,\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _focus: {\n zIndex: 1,\n boxShadow: \"outline\"\n }\n };\n};\n\nvar baseStyleTablist = function baseStyleTablist(props) {\n var _props$align = props.align,\n align = _props$align === void 0 ? \"start\" : _props$align,\n orientation = props.orientation;\n var alignments = {\n end: \"flex-end\",\n center: \"center\",\n start: \"flex-start\"\n };\n return {\n justifyContent: alignments[align],\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\"\n };\n};\n\nvar baseStyleTabpanel = {\n p: 4\n};\n\nvar baseStyle$3 = function baseStyle(props) {\n return {\n root: baseStyleRoot(props),\n tab: baseStyleTab(props),\n tablist: baseStyleTablist(props),\n tabpanel: baseStyleTabpanel\n };\n};\n\nvar sizes$2 = {\n sm: {\n tab: {\n py: 1,\n px: 4,\n fontSize: \"sm\"\n }\n },\n md: {\n tab: {\n fontSize: \"md\",\n py: 2,\n px: 4\n }\n },\n lg: {\n tab: {\n fontSize: \"lg\",\n py: 3,\n px: 4\n }\n }\n};\n\nvar variantLine = function variantLine(props) {\n var _tablist, _tab;\n\n var c = props.colorScheme,\n orientation = props.orientation;\n var isVertical = orientation === \"vertical\";\n var borderProp = orientation === \"vertical\" ? \"borderStart\" : \"borderBottom\";\n var marginProp = isVertical ? \"marginStart\" : \"marginBottom\";\n return {\n tablist: (_tablist = {}, _tablist[borderProp] = \"2px solid\", _tablist.borderColor = \"inherit\", _tablist),\n tab: (_tab = {}, _tab[borderProp] = \"2px solid\", _tab.borderColor = \"transparent\", _tab[marginProp] = \"-2px\", _tab._selected = {\n color: mode(c + \".600\", c + \".300\")(props),\n borderColor: \"currentColor\"\n }, _tab._active = {\n bg: mode(\"gray.200\", \"whiteAlpha.300\")(props)\n }, _tab._disabled = {\n opacity: 0.4,\n cursor: \"not-allowed\"\n }, _tab)\n };\n};\n\nvar variantEnclosed = function variantEnclosed(props) {\n var c = props.colorScheme;\n return {\n tab: {\n borderTopRadius: \"md\",\n border: \"1px solid\",\n borderColor: \"transparent\",\n mb: \"-1px\",\n _selected: {\n color: mode(c + \".600\", c + \".300\")(props),\n borderColor: \"inherit\",\n borderBottomColor: mode(\"white\", \"gray.800\")(props)\n }\n },\n tablist: {\n mb: \"-1px\",\n borderBottom: \"1px solid\",\n borderColor: \"inherit\"\n }\n };\n};\n\nvar variantEnclosedColored = function variantEnclosedColored(props) {\n var c = props.colorScheme;\n return {\n tab: {\n border: \"1px solid\",\n borderColor: \"inherit\",\n bg: mode(\"gray.50\", \"whiteAlpha.50\")(props),\n mb: \"-1px\",\n _notLast: {\n marginEnd: \"-1px\"\n },\n _selected: {\n bg: mode(\"#fff\", \"gray.800\")(props),\n color: mode(c + \".600\", c + \".300\")(props),\n borderColor: \"inherit\",\n borderTopColor: \"currentColor\",\n borderBottomColor: \"transparent\"\n }\n },\n tablist: {\n mb: \"-1px\",\n borderBottom: \"1px solid\",\n borderColor: \"inherit\"\n }\n };\n};\n\nvar variantSoftRounded = function variantSoftRounded(props) {\n var c = props.colorScheme,\n theme = props.theme;\n return {\n tab: {\n borderRadius: \"full\",\n fontWeight: \"semibold\",\n color: \"gray.600\",\n _selected: {\n color: getColor(theme, c + \".700\"),\n bg: getColor(theme, c + \".100\")\n }\n }\n };\n};\n\nvar variantSolidRounded = function variantSolidRounded(props) {\n var c = props.colorScheme;\n return {\n tab: {\n borderRadius: \"full\",\n fontWeight: \"semibold\",\n color: mode(\"gray.600\", \"inherit\")(props),\n _selected: {\n color: mode(\"#fff\", \"gray.800\")(props),\n bg: mode(c + \".600\", c + \".300\")(props)\n }\n }\n };\n};\n\nvar variantUnstyled = {};\nvar variants$2 = {\n line: variantLine,\n enclosed: variantEnclosed,\n \"enclosed-colored\": variantEnclosedColored,\n \"soft-rounded\": variantSoftRounded,\n \"solid-rounded\": variantSolidRounded,\n unstyled: variantUnstyled\n};\nvar defaultProps$2 = {\n size: \"md\",\n variant: \"line\",\n colorScheme: \"blue\"\n};\nvar tabs = {\n parts: tabsAnatomy.keys,\n baseStyle: baseStyle$3,\n sizes: sizes$2,\n variants: variants$2,\n defaultProps: defaultProps$2\n};\nvar baseStyleContainer = {\n fontWeight: \"medium\",\n lineHeight: 1.2,\n outline: 0,\n _focus: {\n boxShadow: \"outline\"\n }\n};\nvar baseStyleLabel = {\n lineHeight: 1.2,\n overflow: \"visible\"\n};\nvar baseStyleCloseButton = {\n fontSize: \"18px\",\n w: \"1.25rem\",\n h: \"1.25rem\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n borderRadius: \"full\",\n marginStart: \"0.375rem\",\n marginEnd: \"-1\",\n opacity: 0.5,\n _disabled: {\n opacity: 0.4\n },\n _focus: {\n boxShadow: \"outline\",\n bg: \"rgba(0, 0, 0, 0.14)\"\n },\n _hover: {\n opacity: 0.8\n },\n _active: {\n opacity: 1\n }\n};\nvar baseStyle$2 = {\n container: baseStyleContainer,\n label: baseStyleLabel,\n closeButton: baseStyleCloseButton\n};\nvar sizes$1 = {\n sm: {\n container: {\n minH: \"1.25rem\",\n minW: \"1.25rem\",\n fontSize: \"xs\",\n px: 2,\n borderRadius: \"md\"\n },\n closeButton: {\n marginEnd: \"-2px\",\n marginStart: \"0.35rem\"\n }\n },\n md: {\n container: {\n minH: \"1.5rem\",\n minW: \"1.5rem\",\n fontSize: \"sm\",\n borderRadius: \"md\",\n px: 2\n }\n },\n lg: {\n container: {\n minH: 8,\n minW: 8,\n fontSize: \"md\",\n borderRadius: \"md\",\n px: 3\n }\n }\n};\nvar variants$1 = {\n subtle: function subtle(props) {\n return {\n container: Badge.variants.subtle(props)\n };\n },\n solid: function solid(props) {\n return {\n container: Badge.variants.solid(props)\n };\n },\n outline: function outline(props) {\n return {\n container: Badge.variants.outline(props)\n };\n }\n};\nvar defaultProps$1 = {\n size: \"md\",\n variant: \"subtle\",\n colorScheme: \"gray\"\n};\nvar tag = {\n parts: tagAnatomy.keys,\n variants: variants$1,\n baseStyle: baseStyle$2,\n sizes: sizes$1,\n defaultProps: defaultProps$1\n};\n\nvar _Input$variants$unsty, _Input$sizes$xs$field, _Input$sizes$sm$field, _Input$sizes$md$field, _Input$sizes$lg$field;\n\nvar baseStyle$1 = _extends({}, Input.baseStyle.field, {\n paddingY: \"8px\",\n minHeight: \"80px\",\n lineHeight: \"short\",\n verticalAlign: \"top\"\n});\n\nvar variants = {\n outline: function outline(props) {\n var _Input$variants$outli;\n\n return (_Input$variants$outli = Input.variants.outline(props).field) != null ? _Input$variants$outli : {};\n },\n flushed: function flushed(props) {\n var _Input$variants$flush;\n\n return (_Input$variants$flush = Input.variants.flushed(props).field) != null ? _Input$variants$flush : {};\n },\n filled: function filled(props) {\n var _Input$variants$fille;\n\n return (_Input$variants$fille = Input.variants.filled(props).field) != null ? _Input$variants$fille : {};\n },\n unstyled: (_Input$variants$unsty = Input.variants.unstyled.field) != null ? _Input$variants$unsty : {}\n};\nvar sizes = {\n xs: (_Input$sizes$xs$field = Input.sizes.xs.field) != null ? _Input$sizes$xs$field : {},\n sm: (_Input$sizes$sm$field = Input.sizes.sm.field) != null ? _Input$sizes$sm$field : {},\n md: (_Input$sizes$md$field = Input.sizes.md.field) != null ? _Input$sizes$md$field : {},\n lg: (_Input$sizes$lg$field = Input.sizes.lg.field) != null ? _Input$sizes$lg$field : {}\n};\nvar defaultProps = {\n size: \"md\",\n variant: \"outline\"\n};\nvar textarea = {\n baseStyle: baseStyle$1,\n sizes: sizes,\n variants: variants,\n defaultProps: defaultProps\n};\nvar $bg = cssVar(\"tooltip-bg\");\nvar $arrowBg = cssVar(\"popper-arrow-bg\");\n\nvar baseStyle = function baseStyle(props) {\n var _ref;\n\n var bg = mode(\"gray.700\", \"gray.300\")(props);\n return _ref = {}, _ref[$bg.variable] = \"colors.\" + bg, _ref.px = \"8px\", _ref.py = \"2px\", _ref.bg = [$bg.reference], _ref[$arrowBg.variable] = [$bg.reference], _ref.color = mode(\"whiteAlpha.900\", \"gray.900\")(props), _ref.borderRadius = \"sm\", _ref.fontWeight = \"medium\", _ref.fontSize = \"sm\", _ref.boxShadow = \"md\", _ref.maxW = \"320px\", _ref.zIndex = \"tooltip\", _ref;\n};\n\nvar tooltip = {\n baseStyle: baseStyle\n};\nvar components = /*#__PURE__*/Object.freeze({\n __proto__: null,\n Accordion: accordion,\n Alert: alert,\n Avatar: avatar,\n Badge: Badge,\n Breadcrumb: breadcrumb,\n Button: button,\n Checkbox: Checkbox,\n CloseButton: closeButton,\n Code: code,\n Container: container,\n Divider: divider,\n Drawer: drawer,\n Editable: editable,\n Form: form,\n FormError: formError,\n FormLabel: formLabel,\n Heading: heading,\n Input: Input,\n Kbd: kbd,\n Link: link,\n List: list,\n Menu: menu,\n Modal: modal,\n NumberInput: numberInput,\n PinInput: pinInput,\n Popover: popover,\n Progress: progress,\n Radio: radio,\n Select: select,\n Skeleton: skeleton,\n SkipLink: skipLink,\n Slider: slider,\n Spinner: spinner,\n Stat: stat,\n Switch: _switch,\n Table: table,\n Tabs: tabs,\n Tag: tag,\n Textarea: textarea,\n Tooltip: tooltip\n});\nexport { select as A, Badge as B, Checkbox as C, skeleton as D, skipLink as E, slider as F, spinner as G, stat as H, Input as I, table as J, tabs as K, tag as L, textarea as M, tooltip as N, _switch as _, accordion as a, alert as b, components as c, avatar as d, breadcrumb as e, button as f, closeButton as g, code as h, container as i, divider as j, drawer as k, editable as l, form as m, formError as n, formLabel as o, heading as p, kbd as q, link as r, list as s, menu as t, modal as u, numberInput as v, pinInput as w, popover as x, progress as y, radio as z };","import { _ as _extends, s as sizes } from '../../dist/sizes-6d76cdc8.esm.js';\nimport borders from '../borders/dist/chakra-ui-theme-foundations-borders.esm.js';\nimport breakpoints from '../breakpoints/dist/chakra-ui-theme-foundations-breakpoints.esm.js';\nimport colors from '../colors/dist/chakra-ui-theme-foundations-colors.esm.js';\nimport radii from '../radius/dist/chakra-ui-theme-foundations-radius.esm.js';\nimport shadows from '../shadows/dist/chakra-ui-theme-foundations-shadows.esm.js';\nimport { spacing } from '../spacing/dist/chakra-ui-theme-foundations-spacing.esm.js';\nimport transition from '../transition/dist/chakra-ui-theme-foundations-transition.esm.js';\nimport typography from '../typography/dist/chakra-ui-theme-foundations-typography.esm.js';\nimport zIndices from '../z-index/dist/chakra-ui-theme-foundations-z-index.esm.js';\nimport blur from '../blur/dist/chakra-ui-theme-foundations-blur.esm.js';\nimport '@chakra-ui/theme-tools';\n\nvar foundations = _extends({\n breakpoints: breakpoints,\n zIndices: zIndices,\n radii: radii,\n blur: blur,\n colors: colors\n}, typography, {\n sizes: sizes,\n shadows: shadows,\n space: spacing,\n borders: borders,\n transition: transition\n});\n\nexport { foundations as default };","import { createBreakpoints } from '@chakra-ui/theme-tools';\n/**\n * Breakpoints for responsive design\n */\n\nvar breakpoints = createBreakpoints({\n sm: \"30em\",\n md: \"48em\",\n lg: \"62em\",\n xl: \"80em\",\n \"2xl\": \"96em\"\n});\nexport { breakpoints as default };","var zIndices = {\n hide: -1,\n auto: \"auto\",\n base: 0,\n docked: 10,\n dropdown: 1000,\n sticky: 1100,\n banner: 1200,\n overlay: 1300,\n modal: 1400,\n popover: 1500,\n skipLink: 1600,\n toast: 1700,\n tooltip: 1800\n};\nexport { zIndices as default };","var radii = {\n none: \"0\",\n sm: \"0.125rem\",\n base: \"0.25rem\",\n md: \"0.375rem\",\n lg: \"0.5rem\",\n xl: \"0.75rem\",\n \"2xl\": \"1rem\",\n \"3xl\": \"1.5rem\",\n full: \"9999px\"\n};\nexport { radii as default };","var blur = {\n none: 0,\n sm: \"4px\",\n base: \"8px\",\n md: \"12px\",\n lg: \"16px\",\n xl: \"24px\",\n \"2xl\": \"40px\",\n \"3xl\": \"64px\"\n};\nexport { blur as default };","/**\n * @deprecated\n * You can derive the Colors type from the DefaultChakraTheme:\n *\n * type Colors = DefaultChakraTheme[\"colors\"]\n */\nvar colors = {\n transparent: \"transparent\",\n current: \"currentColor\",\n black: \"#000000\",\n white: \"#FFFFFF\",\n whiteAlpha: {\n 50: \"rgba(255, 255, 255, 0.04)\",\n 100: \"rgba(255, 255, 255, 0.06)\",\n 200: \"rgba(255, 255, 255, 0.08)\",\n 300: \"rgba(255, 255, 255, 0.16)\",\n 400: \"rgba(255, 255, 255, 0.24)\",\n 500: \"rgba(255, 255, 255, 0.36)\",\n 600: \"rgba(255, 255, 255, 0.48)\",\n 700: \"rgba(255, 255, 255, 0.64)\",\n 800: \"rgba(255, 255, 255, 0.80)\",\n 900: \"rgba(255, 255, 255, 0.92)\"\n },\n blackAlpha: {\n 50: \"rgba(0, 0, 0, 0.04)\",\n 100: \"rgba(0, 0, 0, 0.06)\",\n 200: \"rgba(0, 0, 0, 0.08)\",\n 300: \"rgba(0, 0, 0, 0.16)\",\n 400: \"rgba(0, 0, 0, 0.24)\",\n 500: \"rgba(0, 0, 0, 0.36)\",\n 600: \"rgba(0, 0, 0, 0.48)\",\n 700: \"rgba(0, 0, 0, 0.64)\",\n 800: \"rgba(0, 0, 0, 0.80)\",\n 900: \"rgba(0, 0, 0, 0.92)\"\n },\n gray: {\n 50: \"#F7FAFC\",\n 100: \"#EDF2F7\",\n 200: \"#E2E8F0\",\n 300: \"#CBD5E0\",\n 400: \"#A0AEC0\",\n 500: \"#718096\",\n 600: \"#4A5568\",\n 700: \"#2D3748\",\n 800: \"#1A202C\",\n 900: \"#171923\"\n },\n red: {\n 50: \"#FFF5F5\",\n 100: \"#FED7D7\",\n 200: \"#FEB2B2\",\n 300: \"#FC8181\",\n 400: \"#F56565\",\n 500: \"#E53E3E\",\n 600: \"#C53030\",\n 700: \"#9B2C2C\",\n 800: \"#822727\",\n 900: \"#63171B\"\n },\n orange: {\n 50: \"#FFFAF0\",\n 100: \"#FEEBC8\",\n 200: \"#FBD38D\",\n 300: \"#F6AD55\",\n 400: \"#ED8936\",\n 500: \"#DD6B20\",\n 600: \"#C05621\",\n 700: \"#9C4221\",\n 800: \"#7B341E\",\n 900: \"#652B19\"\n },\n yellow: {\n 50: \"#FFFFF0\",\n 100: \"#FEFCBF\",\n 200: \"#FAF089\",\n 300: \"#F6E05E\",\n 400: \"#ECC94B\",\n 500: \"#D69E2E\",\n 600: \"#B7791F\",\n 700: \"#975A16\",\n 800: \"#744210\",\n 900: \"#5F370E\"\n },\n green: {\n 50: \"#F0FFF4\",\n 100: \"#C6F6D5\",\n 200: \"#9AE6B4\",\n 300: \"#68D391\",\n 400: \"#48BB78\",\n 500: \"#38A169\",\n 600: \"#2F855A\",\n 700: \"#276749\",\n 800: \"#22543D\",\n 900: \"#1C4532\"\n },\n teal: {\n 50: \"#E6FFFA\",\n 100: \"#B2F5EA\",\n 200: \"#81E6D9\",\n 300: \"#4FD1C5\",\n 400: \"#38B2AC\",\n 500: \"#319795\",\n 600: \"#2C7A7B\",\n 700: \"#285E61\",\n 800: \"#234E52\",\n 900: \"#1D4044\"\n },\n blue: {\n 50: \"#ebf8ff\",\n 100: \"#bee3f8\",\n 200: \"#90cdf4\",\n 300: \"#63b3ed\",\n 400: \"#4299e1\",\n 500: \"#3182ce\",\n 600: \"#2b6cb0\",\n 700: \"#2c5282\",\n 800: \"#2a4365\",\n 900: \"#1A365D\"\n },\n cyan: {\n 50: \"#EDFDFD\",\n 100: \"#C4F1F9\",\n 200: \"#9DECF9\",\n 300: \"#76E4F7\",\n 400: \"#0BC5EA\",\n 500: \"#00B5D8\",\n 600: \"#00A3C4\",\n 700: \"#0987A0\",\n 800: \"#086F83\",\n 900: \"#065666\"\n },\n purple: {\n 50: \"#FAF5FF\",\n 100: \"#E9D8FD\",\n 200: \"#D6BCFA\",\n 300: \"#B794F4\",\n 400: \"#9F7AEA\",\n 500: \"#805AD5\",\n 600: \"#6B46C1\",\n 700: \"#553C9A\",\n 800: \"#44337A\",\n 900: \"#322659\"\n },\n pink: {\n 50: \"#FFF5F7\",\n 100: \"#FED7E2\",\n 200: \"#FBB6CE\",\n 300: \"#F687B3\",\n 400: \"#ED64A6\",\n 500: \"#D53F8C\",\n 600: \"#B83280\",\n 700: \"#97266D\",\n 800: \"#702459\",\n 900: \"#521B41\"\n },\n linkedin: {\n 50: \"#E8F4F9\",\n 100: \"#CFEDFB\",\n 200: \"#9BDAF3\",\n 300: \"#68C7EC\",\n 400: \"#34B3E4\",\n 500: \"#00A0DC\",\n 600: \"#008CC9\",\n 700: \"#0077B5\",\n 800: \"#005E93\",\n 900: \"#004471\"\n },\n facebook: {\n 50: \"#E8F4F9\",\n 100: \"#D9DEE9\",\n 200: \"#B7C2DA\",\n 300: \"#6482C0\",\n 400: \"#4267B2\",\n 500: \"#385898\",\n 600: \"#314E89\",\n 700: \"#29487D\",\n 800: \"#223B67\",\n 900: \"#1E355B\"\n },\n messenger: {\n 50: \"#D0E6FF\",\n 100: \"#B9DAFF\",\n 200: \"#A2CDFF\",\n 300: \"#7AB8FF\",\n 400: \"#2E90FF\",\n 500: \"#0078FF\",\n 600: \"#0063D1\",\n 700: \"#0052AC\",\n 800: \"#003C7E\",\n 900: \"#002C5C\"\n },\n whatsapp: {\n 50: \"#dffeec\",\n 100: \"#b9f5d0\",\n 200: \"#90edb3\",\n 300: \"#65e495\",\n 400: \"#3cdd78\",\n 500: \"#22c35e\",\n 600: \"#179848\",\n 700: \"#0c6c33\",\n 800: \"#01421c\",\n 900: \"#001803\"\n },\n twitter: {\n 50: \"#E5F4FD\",\n 100: \"#C8E9FB\",\n 200: \"#A8DCFA\",\n 300: \"#83CDF7\",\n 400: \"#57BBF5\",\n 500: \"#1DA1F2\",\n 600: \"#1A94DA\",\n 700: \"#1681BF\",\n 800: \"#136B9E\",\n 900: \"#0D4D71\"\n },\n telegram: {\n 50: \"#E3F2F9\",\n 100: \"#C5E4F3\",\n 200: \"#A2D4EC\",\n 300: \"#7AC1E4\",\n 400: \"#47A9DA\",\n 500: \"#0088CC\",\n 600: \"#007AB8\",\n 700: \"#006BA1\",\n 800: \"#005885\",\n 900: \"#003F5E\"\n }\n};\nexport { colors as default };","var shadows = {\n xs: \"0 0 0 1px rgba(0, 0, 0, 0.05)\",\n sm: \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n base: \"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)\",\n md: \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n lg: \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n xl: \"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)\",\n \"2xl\": \"0 25px 50px -12px rgba(0, 0, 0, 0.25)\",\n outline: \"0 0 0 3px rgba(66, 153, 225, 0.6)\",\n inner: \"inset 0 2px 4px 0 rgba(0,0,0,0.06)\",\n none: \"none\",\n \"dark-lg\": \"rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px\"\n};\nexport { shadows as default };","var borders = {\n none: 0,\n \"1px\": \"1px solid\",\n \"2px\": \"2px solid\",\n \"4px\": \"4px solid\",\n \"8px\": \"8px solid\"\n};\nexport { borders as default };","var transitionProperty = {\n common: \"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform\",\n colors: \"background-color, border-color, color, fill, stroke\",\n dimensions: \"width, height\",\n position: \"left, right, top, bottom\",\n background: \"background-color, background-image, background-position\"\n};\nvar transitionTimingFunction = {\n \"ease-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n \"ease-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n \"ease-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\"\n};\nvar transitionDuration = {\n \"ultra-fast\": \"50ms\",\n faster: \"100ms\",\n fast: \"150ms\",\n normal: \"200ms\",\n slow: \"300ms\",\n slower: \"400ms\",\n \"ultra-slow\": \"500ms\"\n};\nvar transition = {\n property: transitionProperty,\n easing: transitionTimingFunction,\n duration: transitionDuration\n};\nexport { transition as default };","import { _ as _extends } from './sizes-6d76cdc8.esm.js';\nimport { c as components } from './index-895c67e0.esm.js';\nimport foundations from '../foundations/dist/chakra-ui-theme-foundations.esm.js';\nimport { mode } from '@chakra-ui/theme-tools';\nimport { isObject } from '@chakra-ui/utils';\nimport '../foundations/spacing/dist/chakra-ui-theme-foundations-spacing.esm.js';\nimport '@chakra-ui/anatomy';\nimport '../foundations/typography/dist/chakra-ui-theme-foundations-typography.esm.js';\nimport '@chakra-ui/system';\nimport '../foundations/borders/dist/chakra-ui-theme-foundations-borders.esm.js';\nimport '../foundations/breakpoints/dist/chakra-ui-theme-foundations-breakpoints.esm.js';\nimport '../foundations/colors/dist/chakra-ui-theme-foundations-colors.esm.js';\nimport '../foundations/radius/dist/chakra-ui-theme-foundations-radius.esm.js';\nimport '../foundations/shadows/dist/chakra-ui-theme-foundations-shadows.esm.js';\nimport '../foundations/transition/dist/chakra-ui-theme-foundations-transition.esm.js';\nimport '../foundations/z-index/dist/chakra-ui-theme-foundations-z-index.esm.js';\nimport '../foundations/blur/dist/chakra-ui-theme-foundations-blur.esm.js';\nvar styles = {\n global: function global(props) {\n return {\n body: {\n fontFamily: \"body\",\n color: mode(\"gray.800\", \"whiteAlpha.900\")(props),\n bg: mode(\"white\", \"gray.800\")(props),\n transitionProperty: \"background-color\",\n transitionDuration: \"normal\",\n lineHeight: \"base\"\n },\n \"*::placeholder\": {\n color: mode(\"gray.400\", \"whiteAlpha.400\")(props)\n },\n \"*, *::before, &::after\": {\n borderColor: mode(\"gray.200\", \"whiteAlpha.300\")(props),\n wordWrap: \"break-word\"\n }\n };\n }\n};\nvar styles$1 = styles;\nvar requiredChakraThemeKeys = [\"borders\", \"breakpoints\", \"colors\", \"components\", \"config\", \"direction\", \"fonts\", \"fontSizes\", \"fontWeights\", \"letterSpacings\", \"lineHeights\", \"radii\", \"shadows\", \"sizes\", \"space\", \"styles\", \"transition\", \"zIndices\"];\n\nfunction isChakraTheme(unit) {\n if (!isObject(unit)) {\n return false;\n }\n\n return requiredChakraThemeKeys.every(function (propertyName) {\n return Object.prototype.hasOwnProperty.call(unit, propertyName);\n });\n}\n\nvar direction = \"ltr\";\nvar config = {\n useSystemColorMode: false,\n initialColorMode: \"light\",\n cssVarPrefix: \"chakra\"\n};\n\nvar theme = _extends({\n direction: direction\n}, foundations, {\n components: components,\n styles: styles$1,\n config: config\n});\n\nexport { theme as default, isChakraTheme, requiredChakraThemeKeys, theme };","import { ChakraProvider as ChakraProvider$1 } from '@chakra-ui/provider';\nimport { theme as theme$1, isChakraTheme } from '@chakra-ui/theme';\nexport * from '@chakra-ui/theme';\nimport { pipe, isFunction, mergeWith, isObject, fromEntries } from '@chakra-ui/utils';\nexport * from '@chakra-ui/accordion';\nexport * from '@chakra-ui/alert';\nexport * from '@chakra-ui/avatar';\nexport * from '@chakra-ui/breadcrumb';\nexport * from '@chakra-ui/button';\nexport * from '@chakra-ui/checkbox';\nexport * from '@chakra-ui/close-button';\nexport * from '@chakra-ui/counter';\nexport * from '@chakra-ui/css-reset';\nexport * from '@chakra-ui/editable';\nexport * from '@chakra-ui/form-control';\nexport * from '@chakra-ui/control-box';\nexport * from '@chakra-ui/hooks';\nexport * from '@chakra-ui/icon';\nexport * from '@chakra-ui/image';\nexport * from '@chakra-ui/input';\nexport * from '@chakra-ui/layout';\nexport * from '@chakra-ui/media-query';\nexport * from '@chakra-ui/table';\nexport * from '@chakra-ui/menu';\nexport * from '@chakra-ui/modal';\nexport * from '@chakra-ui/number-input';\nexport * from '@chakra-ui/pin-input';\nexport * from '@chakra-ui/popover';\nexport * from '@chakra-ui/popper';\nexport * from '@chakra-ui/portal';\nexport * from '@chakra-ui/progress';\nexport * from '@chakra-ui/radio';\nexport * from '@chakra-ui/select';\nexport * from '@chakra-ui/skeleton';\nexport * from '@chakra-ui/slider';\nexport * from '@chakra-ui/spinner';\nexport * from '@chakra-ui/stat';\nexport * from '@chakra-ui/switch';\nexport * from '@chakra-ui/system';\nexport * from '@chakra-ui/tabs';\nexport * from '@chakra-ui/tag';\nexport * from '@chakra-ui/textarea';\nexport * from '@chakra-ui/toast';\nexport * from '@chakra-ui/tooltip';\nexport * from '@chakra-ui/transition';\nexport * from '@chakra-ui/visually-hidden';\nvar ChakraProvider = ChakraProvider$1;\nChakraProvider.defaultProps = {\n theme: theme$1\n};\n/**\n * NOTE: This got too complex to manage, and it's not worth the extra complexity.\n * We'll re-evaluate this API in the future releases.\n *\n * Function to override or customize the Chakra UI theme conveniently.\n * First extension overrides the baseTheme and following extensions override the preceding extensions.\n *\n * @example:\n * import { theme as baseTheme, extendTheme, withDefaultColorScheme } from '@chakra-ui/react'\n *\n * const customTheme = extendTheme(\n * {\n * colors: {\n * brand: {\n * 500: \"#b4d455\",\n * },\n * },\n * },\n * withDefaultColorScheme({ colorScheme: \"red\" }),\n * baseTheme // optional\n * )\n */\n\nfunction extendTheme() {\n for (var _len = arguments.length, extensions = new Array(_len), _key = 0; _key < _len; _key++) {\n extensions[_key] = arguments[_key];\n }\n\n var overrides = [].concat(extensions);\n var baseTheme = extensions[extensions.length - 1];\n\n if (isChakraTheme(baseTheme) && // this ensures backward compatibility\n // previously only `extendTheme(override, baseTheme?)` was allowed\n overrides.length > 1) {\n overrides = overrides.slice(0, overrides.length - 1);\n } else {\n baseTheme = theme$1;\n }\n\n return pipe.apply(void 0, overrides.map(function (extension) {\n return function (prevTheme) {\n return isFunction(extension) ? extension(prevTheme) : mergeThemeOverride(prevTheme, extension);\n };\n }))(baseTheme);\n}\n\nfunction mergeThemeOverride() {\n for (var _len2 = arguments.length, overrides = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n overrides[_key2] = arguments[_key2];\n }\n\n return mergeWith.apply(void 0, [{}].concat(overrides, [mergeThemeCustomizer]));\n}\n\nfunction mergeThemeCustomizer(source, override, key, object) {\n if ((isFunction(source) || isFunction(override)) && Object.prototype.hasOwnProperty.call(object, key)) {\n return function () {\n var sourceValue = isFunction(source) ? source.apply(void 0, arguments) : source;\n var overrideValue = isFunction(override) ? override.apply(void 0, arguments) : override;\n return mergeWith({}, sourceValue, overrideValue, mergeThemeCustomizer);\n };\n } // fallback to default behaviour\n\n\n return undefined;\n}\n\nfunction withDefaultColorScheme(_ref) {\n var colorScheme = _ref.colorScheme,\n components = _ref.components;\n return function (theme) {\n var names = Object.keys(theme.components || {});\n\n if (Array.isArray(components)) {\n names = components;\n } else if (isObject(components)) {\n names = Object.keys(components);\n }\n\n return mergeThemeOverride(theme, {\n components: fromEntries(names.map(function (componentName) {\n var withColorScheme = {\n defaultProps: {\n colorScheme: colorScheme\n }\n };\n return [componentName, withColorScheme];\n }))\n });\n };\n}\n\nfunction withDefaultSize(_ref) {\n var size = _ref.size,\n components = _ref.components;\n return function (theme) {\n var names = Object.keys(theme.components || {});\n\n if (Array.isArray(components)) {\n names = components;\n } else if (isObject(components)) {\n names = Object.keys(components);\n }\n\n return mergeThemeOverride(theme, {\n components: fromEntries(names.map(function (componentName) {\n var withSize = {\n defaultProps: {\n size: size\n }\n };\n return [componentName, withSize];\n }))\n });\n };\n}\n\nfunction withDefaultVariant(_ref) {\n var variant = _ref.variant,\n components = _ref.components;\n return function (theme) {\n var names = Object.keys(theme.components || {});\n\n if (Array.isArray(components)) {\n names = components;\n } else if (isObject(components)) {\n names = Object.keys(components);\n }\n\n return mergeThemeOverride(theme, {\n components: fromEntries(names.map(function (componentName) {\n var withVariant = {\n defaultProps: {\n variant: variant\n }\n };\n return [componentName, withVariant];\n }))\n });\n };\n}\n\nfunction withDefaultProps(_ref) {\n var _ref$defaultProps = _ref.defaultProps,\n colorScheme = _ref$defaultProps.colorScheme,\n variant = _ref$defaultProps.variant,\n size = _ref$defaultProps.size,\n components = _ref.components;\n\n var identity = function identity(t) {\n return t;\n };\n\n var fns = [colorScheme ? withDefaultColorScheme({\n colorScheme: colorScheme,\n components: components\n }) : identity, size ? withDefaultSize({\n size: size,\n components: components\n }) : identity, variant ? withDefaultVariant({\n variant: variant,\n components: components\n }) : identity];\n return function (theme) {\n return mergeThemeOverride(pipe.apply(void 0, fns)(theme));\n };\n}\n\nexport { ChakraProvider, extendTheme, mergeThemeOverride, withDefaultColorScheme, withDefaultProps, withDefaultSize, withDefaultVariant };","import CSSReset from '@chakra-ui/css-reset';\nimport { PortalManager } from '@chakra-ui/portal';\nimport { ThemeProvider, ColorModeProvider, GlobalStyle } from '@chakra-ui/system';\nimport { EnvironmentProvider } from '@chakra-ui/react-env';\nimport * as React from 'react';\nimport { IdProvider } from '@chakra-ui/hooks';\n/**\n * The global provider that must be added to make all Chakra components\n * work correctly\n */\n\nvar ChakraProvider = function ChakraProvider(props) {\n var children = props.children,\n colorModeManager = props.colorModeManager,\n portalZIndex = props.portalZIndex,\n _props$resetCSS = props.resetCSS,\n resetCSS = _props$resetCSS === void 0 ? true : _props$resetCSS,\n _props$theme = props.theme,\n theme = _props$theme === void 0 ? {} : _props$theme,\n environment = props.environment,\n cssVarsRoot = props.cssVarsRoot;\n\n var _children = /*#__PURE__*/React.createElement(EnvironmentProvider, {\n environment: environment\n }, children);\n\n return /*#__PURE__*/React.createElement(IdProvider, null, /*#__PURE__*/React.createElement(ThemeProvider, {\n theme: theme,\n cssVarsRoot: cssVarsRoot\n }, /*#__PURE__*/React.createElement(ColorModeProvider, {\n colorModeManager: colorModeManager,\n options: theme.config\n }, resetCSS && /*#__PURE__*/React.createElement(CSSReset, null), /*#__PURE__*/React.createElement(GlobalStyle, null), portalZIndex ? /*#__PURE__*/React.createElement(PortalManager, {\n zIndex: portalZIndex\n }, _children) : _children)));\n};\n\nexport { ChakraProvider };","import { createBreakpoints } from '@chakra-ui/theme-tools'\n\nconst breakpoints = createBreakpoints({\n // base: '0px', // added by chakra, mobile\n mobile: '640px',\n tablet: '768px',\n desktop: '1024px',\n desktopLarge: '1440px',\n})\n\nexport default breakpoints\n","export default {\n /* Old colours\n alabaster: '#fafafa',\n brightRed: '#b51144',\n costaOrange: '#ce4b27',\n costaRed: '#6d1f37',\n darkGray: '#404042',\n darkRed: '#91022E',\n disabledGray: '#9b9b9b',\n empress: '#747474',\n focusBlue: '#0066ff',\n lightGray: '#dddddd',\n lightPink: '#ffdddd',\n lightRed: '#cf1d1a',\n mediumGray: '#9e9e9e',\n offWhite: '#f4f3ef',\n redPink: '#bf0341',\n successGreen: '#4e8342',\n whiteSmoke: '#f6f6f6',\n black: '#000000',\n white: '#FFFFFF',\n */\n\n alertError: '#ce0000',\n burntOrange: '#ce4b27',\n costaRed: '#6d1f37',\n greyCore: '#989898',\n greyDark: '#696969',\n greyDarker: '#222322',\n greyLight: '#f0f0f0',\n lightGold: '#d4cdbd', // stamp card empty stamp when updated - secondaryCoreLighter: '#c09fa9',\n lightRed: '#b51144',\n offWhite: '#f4f3ef',\n rebrandBlue: '#b0ddf5',\n rebrandBlueTint: '#bfe3f6',\n secondaryCore: '#cfa8ca',\n secondaryCoreLighter: '#c09fa9',\n secondaryCoreTint: '#d8b8d4',\n successGreen: '#2a7b48',\n tertiaryCore: '#f58e90',\n tertiaryCoreTint: '#f6a4a5',\n white: '#ffffff',\n\n // TODO as part of the rebrand, the above will be removed in favour of the new colours below. We will need to update any references to the old colours...\n\n transparent: 'transparent',\n current: 'currentColor',\n\n brand: {\n brandRed: '#6D1F37',\n white: '#FFFFFF',\n slateGrey: '#404042',\n lightRed: '#B51144',\n },\n ui: {\n burntOrange: '#CE4B27',\n cloudlessBlue: '#B0DDF5',\n nightfallLilac: '#CFA8CA',\n sunsetCoral: '#EE7D80',\n freshGreen: '#32AC70',\n vibrantRed: '#E52F25',\n },\n grey: {\n disabledGrey: '#9B9B9B',\n buttonGrey: '#747474',\n buttonLightGrey: '#DDDDDD',\n offWhite: '#F4F3EF',\n },\n}\n","const spacing = {\n 0: '0px',\n 1: '8px',\n 2: '16px',\n 3: '24px',\n 4: '32px',\n 5: '40px',\n 6: '48px',\n 7: '56px',\n 8: '64px',\n 9: '72px',\n 10: '80px',\n}\n\nexport default spacing\n","const typography = {\n // TODO lineHeights\n // https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/foundations/typography.ts\n\n fonts: {\n costaDisplayWaveBold: 'Costa Display Wave Bold',\n costaTextBold: 'Costa Text Bold',\n costaTextLight: 'Costa Text Light',\n costaText: 'Costa Text Regular',\n\n /* Currently not being used\n\n costaDisplayWaveLight: 'Costa Display Wave Light',\n costaDisplayWaveRegular: 'Costa Display Wave Regular',\n costaDisplayBold: 'Costa Display Bold',\n costaDisplayLight: 'Costa Display Light',\n costaDisplayRegular: 'Costa Display Regular',\n */\n },\n\n // TODO textStyles are currently broken!\n // https://github.com/chakra-ui/chakra-ui/issues/3884\n\n textStyles: {\n // TODO h1, h2, h3, h4, h5, h6, body\n h1: {\n fontFamily: 'costaDisplayWaveBold',\n fontSize: { base: '33px', tablet: '60px' },\n lineHeight: { base: '36px', tablet: '66px' },\n },\n },\n}\n\nexport default typography\n","import { extendTheme } from '@chakra-ui/react'\n\nimport breakpoints from './foundations/breakpoints'\nimport colors from './foundations/colors'\nimport spacing from './foundations/spacing'\nimport typography from './foundations/typography'\n\nexport default extendTheme({\n breakpoints,\n colors,\n space: spacing,\n ...typography,\n\n components: {},\n\n styles: {\n global: () => ({\n body: {\n color: colors.greyDarker,\n },\n }),\n },\n})\n","import * as React from \"react\"\nimport { ChakraProvider } from \"@chakra-ui/react\"\nimport theme from \"./theme\"\n\nexport const WrapRootElement = ({\n element,\n resetCSS = true,\n portalZIndex = 40,\n}) => {\n return (\n \n {element}\n \n )\n}\n","import * as React from \"react\"\nimport { WrapRootElement } from \"./src/provider\"\n\nexport const wrapRootElement = ({ element }, pluginOptions) => {\n return \n}\n","import { useStaticQuery, graphql } from 'gatsby'\n\nconst useMicrocopy = locale => {\n const { allContentfulMicrocopy } = useStaticQuery(graphql`\n query MicrocopyQuery {\n allContentfulMicrocopy {\n group(field: node_locale) {\n nodes {\n key\n value\n locale: node_locale\n }\n fieldValue\n }\n }\n }\n `)\n\n const microcopyPairs = {}\n\n allContentfulMicrocopy.group\n .find(nodes => nodes.fieldValue === locale)\n .nodes.forEach(microcopy => {\n microcopyPairs[microcopy.key] = microcopy.value\n })\n\n return microcopyPairs\n}\n\nexport default useMicrocopy\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _assertThisInitialized2 = _interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/inheritsLoose\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutPropertiesLoose\"));\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _excluded = [\"sizes\", \"srcSet\", \"src\", \"style\", \"onLoad\", \"onError\", \"loading\", \"draggable\", \"ariaHidden\"];\n\nvar logDeprecationNotice = function logDeprecationNotice(prop, replacement) {\n if (process.env.NODE_ENV === \"production\") {\n return;\n }\n\n console.log(\"\\n The \\\"\" + prop + \"\\\" prop is now deprecated and will be removed in the next major version\\n of \\\"gatsby-image\\\".\\n \");\n\n if (replacement) {\n console.log(\"Please use \" + replacement + \" instead of \\\"\" + prop + \"\\\".\");\n }\n}; // Handle legacy props during their deprecation phase\n\n\nvar convertProps = function convertProps(props) {\n var convertedProps = (0, _extends2.default)({}, props);\n var resolutions = convertedProps.resolutions,\n sizes = convertedProps.sizes,\n critical = convertedProps.critical;\n\n if (resolutions) {\n convertedProps.fixed = resolutions;\n logDeprecationNotice(\"resolutions\", \"the gatsby-image v2 prop \\\"fixed\\\"\");\n delete convertedProps.resolutions;\n }\n\n if (sizes) {\n convertedProps.fluid = sizes;\n logDeprecationNotice(\"sizes\", \"the gatsby-image v2 prop \\\"fluid\\\"\");\n delete convertedProps.sizes;\n }\n\n if (critical) {\n logDeprecationNotice(\"critical\", \"the native \\\"loading\\\" attribute\");\n convertedProps.loading = \"eager\";\n } // convert fluid & fixed to arrays so we only have to work with arrays\n\n\n if (convertedProps.fluid) {\n convertedProps.fluid = groupByMedia([].concat(convertedProps.fluid));\n }\n\n if (convertedProps.fixed) {\n convertedProps.fixed = groupByMedia([].concat(convertedProps.fixed));\n }\n\n return convertedProps;\n};\n/**\n * Checks if fluid or fixed are art-direction arrays.\n *\n * @param currentData {{media?: string}[]} The props to check for images.\n * @return {boolean}\n */\n\n\nvar hasArtDirectionSupport = function hasArtDirectionSupport(currentData) {\n return !!currentData && Array.isArray(currentData) && currentData.some(function (image) {\n return typeof image.media !== \"undefined\";\n });\n};\n/**\n * Tries to detect if a media query matches the current viewport.\n * @property media {{media?: string}} A media query string.\n * @return {boolean}\n */\n\n\nvar matchesMedia = function matchesMedia(_ref) {\n var media = _ref.media;\n return media ? isBrowser && !!window.matchMedia(media).matches : false;\n};\n/**\n * Find the source of an image to use as a key in the image cache.\n * Use `the first image in either `fixed` or `fluid`\n * @param {{fluid: {src: string, media?: string}[], fixed: {src: string, media?: string}[]}} args\n * @return {string?} Returns image src or undefined it not given.\n */\n\n\nvar getImageCacheKey = function getImageCacheKey(_ref2) {\n var fluid = _ref2.fluid,\n fixed = _ref2.fixed;\n var srcData = getCurrentSrcData(fluid || fixed || []);\n return srcData && srcData.src;\n};\n/**\n * Returns the current src - Preferably with art-direction support.\n * @param currentData {{media?: string}[], maxWidth?: Number, maxHeight?: Number} The fluid or fixed image array.\n * @return {{src: string, media?: string, maxWidth?: Number, maxHeight?: Number}}\n */\n\n\nvar getCurrentSrcData = function getCurrentSrcData(currentData) {\n if (isBrowser && hasArtDirectionSupport(currentData)) {\n // Do we have an image for the current Viewport?\n var foundMedia = currentData.findIndex(matchesMedia);\n\n if (foundMedia !== -1) {\n return currentData[foundMedia];\n } // No media matches, select first element without a media condition\n\n\n var noMedia = currentData.findIndex(function (image) {\n return typeof image.media === \"undefined\";\n });\n\n if (noMedia !== -1) {\n return currentData[noMedia];\n }\n } // Else return the first image.\n\n\n return currentData[0];\n}; // Cache if we've seen an image before so we don't bother with\n// lazy-loading & fading in on subsequent mounts.\n\n\nvar imageCache = Object.create({});\n\nvar inImageCache = function inImageCache(props) {\n var convertedProps = convertProps(props);\n var cacheKey = getImageCacheKey(convertedProps);\n return imageCache[cacheKey] || false;\n};\n\nvar activateCacheForImage = function activateCacheForImage(props) {\n var convertedProps = convertProps(props);\n var cacheKey = getImageCacheKey(convertedProps);\n\n if (cacheKey) {\n imageCache[cacheKey] = true;\n }\n}; // Native lazy-loading support: https://addyosmani.com/blog/lazy-loading/\n\n\nvar hasNativeLazyLoadSupport = typeof HTMLImageElement !== \"undefined\" && \"loading\" in HTMLImageElement.prototype;\nvar isBrowser = typeof window !== \"undefined\";\nvar hasIOSupport = isBrowser && window.IntersectionObserver;\nvar io;\nvar listeners = new WeakMap();\n\nfunction getIO() {\n if (typeof io === \"undefined\" && typeof window !== \"undefined\" && window.IntersectionObserver) {\n io = new window.IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (listeners.has(entry.target)) {\n var cb = listeners.get(entry.target); // Edge doesn't currently support isIntersecting, so also test for an intersectionRatio > 0\n\n if (entry.isIntersecting || entry.intersectionRatio > 0) {\n io.unobserve(entry.target);\n listeners.delete(entry.target);\n cb();\n }\n }\n });\n }, {\n rootMargin: \"200px\"\n });\n }\n\n return io;\n}\n\nfunction generateImageSources(imageVariants) {\n return imageVariants.map(function (_ref3) {\n var src = _ref3.src,\n srcSet = _ref3.srcSet,\n srcSetWebp = _ref3.srcSetWebp,\n media = _ref3.media,\n sizes = _ref3.sizes;\n return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {\n key: src\n }, srcSetWebp && /*#__PURE__*/_react.default.createElement(\"source\", {\n type: \"image/webp\",\n media: media,\n srcSet: srcSetWebp,\n sizes: sizes\n }), srcSet && /*#__PURE__*/_react.default.createElement(\"source\", {\n media: media,\n srcSet: srcSet,\n sizes: sizes\n }));\n });\n} // Return an array ordered by elements having a media prop, does not use\n// native sort, as a stable sort is not guaranteed by all browsers/versions\n\n\nfunction groupByMedia(imageVariants) {\n var withMedia = [];\n var without = [];\n imageVariants.forEach(function (variant) {\n return (variant.media ? withMedia : without).push(variant);\n });\n\n if (without.length > 1 && process.env.NODE_ENV !== \"production\") {\n console.warn(\"We've found \" + without.length + \" sources without a media property. They might be ignored by the browser, see: https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images\");\n }\n\n return [].concat(withMedia, without);\n}\n\nfunction generateTracedSVGSources(imageVariants) {\n return imageVariants.map(function (_ref4) {\n var src = _ref4.src,\n media = _ref4.media,\n tracedSVG = _ref4.tracedSVG;\n return /*#__PURE__*/_react.default.createElement(\"source\", {\n key: src,\n media: media,\n srcSet: tracedSVG\n });\n });\n}\n\nfunction generateBase64Sources(imageVariants) {\n return imageVariants.map(function (_ref5) {\n var src = _ref5.src,\n media = _ref5.media,\n base64 = _ref5.base64;\n return /*#__PURE__*/_react.default.createElement(\"source\", {\n key: src,\n media: media,\n srcSet: base64\n });\n });\n}\n\nfunction generateNoscriptSource(_ref6, isWebp) {\n var srcSet = _ref6.srcSet,\n srcSetWebp = _ref6.srcSetWebp,\n media = _ref6.media,\n sizes = _ref6.sizes;\n var src = isWebp ? srcSetWebp : srcSet;\n var mediaAttr = media ? \"media=\\\"\" + media + \"\\\" \" : \"\";\n var typeAttr = isWebp ? \"type='image/webp' \" : \"\";\n var sizesAttr = sizes ? \"sizes=\\\"\" + sizes + \"\\\" \" : \"\";\n return \"\";\n}\n\nfunction generateNoscriptSources(imageVariants) {\n return imageVariants.map(function (variant) {\n return (variant.srcSetWebp ? generateNoscriptSource(variant, true) : \"\") + generateNoscriptSource(variant);\n }).join(\"\");\n}\n\nvar listenToIntersections = function listenToIntersections(el, cb) {\n var observer = getIO();\n\n if (observer) {\n observer.observe(el);\n listeners.set(el, cb);\n }\n\n return function () {\n observer.unobserve(el);\n listeners.delete(el);\n };\n};\n\nvar noscriptImg = function noscriptImg(props) {\n // Check if prop exists before adding each attribute to the string output below to prevent\n // HTML validation issues caused by empty values like width=\"\" and height=\"\"\n var src = props.src ? \"src=\\\"\" + props.src + \"\\\" \" : \"src=\\\"\\\" \"; // required attribute\n\n var sizes = props.sizes ? \"sizes=\\\"\" + props.sizes + \"\\\" \" : \"\";\n var srcSet = props.srcSet ? \"srcset=\\\"\" + props.srcSet + \"\\\" \" : \"\";\n var title = props.title ? \"title=\\\"\" + props.title + \"\\\" \" : \"\";\n var alt = props.alt ? \"alt=\\\"\" + props.alt + \"\\\" \" : \"alt=\\\"\\\" \"; // required attribute\n\n var width = props.width ? \"width=\\\"\" + props.width + \"\\\" \" : \"\";\n var height = props.height ? \"height=\\\"\" + props.height + \"\\\" \" : \"\";\n var crossOrigin = props.crossOrigin ? \"crossorigin=\\\"\" + props.crossOrigin + \"\\\" \" : \"\";\n var loading = props.loading ? \"loading=\\\"\" + props.loading + \"\\\" \" : \"\";\n var draggable = props.draggable ? \"draggable=\\\"\" + props.draggable + \"\\\" \" : \"\";\n var sources = generateNoscriptSources(props.imageVariants);\n return \"\" + sources + \"![]()
\";\n}; // Earlier versions of gatsby-image during the 2.x cycle did not wrap\n// the `Img` component in a `picture` element. This maintains compatibility\n// until a breaking change can be introduced in the next major release\n\n\nvar Placeholder = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n var src = props.src,\n imageVariants = props.imageVariants,\n generateSources = props.generateSources,\n spreadProps = props.spreadProps,\n ariaHidden = props.ariaHidden;\n\n var baseImage = /*#__PURE__*/_react.default.createElement(Img, (0, _extends2.default)({\n ref: ref,\n src: src\n }, spreadProps, {\n ariaHidden: ariaHidden\n }));\n\n return imageVariants.length > 1 ? /*#__PURE__*/_react.default.createElement(\"picture\", null, generateSources(imageVariants), baseImage) : baseImage;\n});\n\nvar Img = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n var sizes = props.sizes,\n srcSet = props.srcSet,\n src = props.src,\n style = props.style,\n onLoad = props.onLoad,\n onError = props.onError,\n loading = props.loading,\n draggable = props.draggable,\n ariaHidden = props.ariaHidden,\n otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);\n return /*#__PURE__*/_react.default.createElement(\"img\", (0, _extends2.default)({\n \"aria-hidden\": ariaHidden,\n sizes: sizes,\n srcSet: srcSet,\n src: src\n }, otherProps, {\n onLoad: onLoad,\n onError: onError,\n ref: ref,\n loading: loading,\n draggable: draggable,\n style: (0, _extends2.default)({\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n objectPosition: \"center\"\n }, style)\n }));\n});\n\nImg.propTypes = {\n style: _propTypes.default.object,\n onError: _propTypes.default.func,\n onLoad: _propTypes.default.func\n};\n\nvar Image = /*#__PURE__*/function (_React$Component) {\n (0, _inheritsLoose2.default)(Image, _React$Component);\n\n function Image(props) {\n var _this;\n\n _this = _React$Component.call(this, props) || this; // If this image has already been loaded before then we can assume it's\n // already in the browser cache so it's cheap to just show directly.\n\n _this.seenBefore = isBrowser && inImageCache(props);\n _this.isCritical = props.loading === \"eager\" || props.critical;\n _this.addNoScript = !(_this.isCritical && !props.fadeIn);\n _this.useIOSupport = !hasNativeLazyLoadSupport && hasIOSupport && !_this.isCritical && !_this.seenBefore;\n var isVisible = _this.isCritical || isBrowser && (hasNativeLazyLoadSupport || !_this.useIOSupport);\n _this.state = {\n isVisible: isVisible,\n imgLoaded: false,\n imgCached: false,\n fadeIn: !_this.seenBefore && props.fadeIn,\n isHydrated: false\n };\n _this.imageRef = /*#__PURE__*/_react.default.createRef();\n _this.placeholderRef = props.placeholderRef || /*#__PURE__*/_react.default.createRef();\n _this.handleImageLoaded = _this.handleImageLoaded.bind((0, _assertThisInitialized2.default)(_this));\n _this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)(_this));\n return _this;\n }\n\n var _proto = Image.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.setState({\n isHydrated: isBrowser\n });\n\n if (this.state.isVisible && typeof this.props.onStartLoad === \"function\") {\n this.props.onStartLoad({\n wasCached: inImageCache(this.props)\n });\n }\n\n if (this.isCritical) {\n var img = this.imageRef.current;\n\n if (img && img.complete) {\n this.handleImageLoaded();\n }\n }\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n if (this.cleanUpListeners) {\n this.cleanUpListeners();\n }\n } // Specific to IntersectionObserver based lazy-load support\n ;\n\n _proto.handleRef = function handleRef(ref) {\n var _this2 = this;\n\n if (this.useIOSupport && ref) {\n this.cleanUpListeners = listenToIntersections(ref, function () {\n var imageInCache = inImageCache(_this2.props);\n\n if (!_this2.state.isVisible && typeof _this2.props.onStartLoad === \"function\") {\n _this2.props.onStartLoad({\n wasCached: imageInCache\n });\n } // imgCached and imgLoaded must update after isVisible,\n // Once isVisible is true, imageRef becomes accessible, which imgCached needs access to.\n // imgLoaded and imgCached are in a 2nd setState call to be changed together,\n // avoiding initiating unnecessary animation frames from style changes.\n\n\n _this2.setState({\n isVisible: true\n }, function () {\n _this2.setState({\n imgLoaded: imageInCache,\n // `currentSrc` should be a string, but can be `undefined` in IE,\n // !! operator validates the value is not undefined/null/\"\"\n // for lazyloaded components this might be null\n // TODO fix imgCached behaviour as it's now false when it's lazyloaded\n imgCached: !!(_this2.imageRef.current && _this2.imageRef.current.currentSrc)\n });\n });\n });\n }\n };\n\n _proto.handleImageLoaded = function handleImageLoaded() {\n activateCacheForImage(this.props);\n this.setState({\n imgLoaded: true\n });\n\n if (this.props.onLoad) {\n this.props.onLoad();\n }\n };\n\n _proto.render = function render() {\n var _convertProps = convertProps(this.props),\n title = _convertProps.title,\n alt = _convertProps.alt,\n className = _convertProps.className,\n _convertProps$style = _convertProps.style,\n style = _convertProps$style === void 0 ? {} : _convertProps$style,\n _convertProps$imgStyl = _convertProps.imgStyle,\n imgStyle = _convertProps$imgStyl === void 0 ? {} : _convertProps$imgStyl,\n _convertProps$placeho = _convertProps.placeholderStyle,\n placeholderStyle = _convertProps$placeho === void 0 ? {} : _convertProps$placeho,\n placeholderClassName = _convertProps.placeholderClassName,\n fluid = _convertProps.fluid,\n fixed = _convertProps.fixed,\n backgroundColor = _convertProps.backgroundColor,\n durationFadeIn = _convertProps.durationFadeIn,\n Tag = _convertProps.Tag,\n itemProp = _convertProps.itemProp,\n loading = _convertProps.loading,\n draggable = _convertProps.draggable;\n\n var imageVariants = fluid || fixed; // Abort early if missing image data (#25371)\n\n if (!imageVariants) {\n return null;\n }\n\n var shouldReveal = this.state.fadeIn === false || this.state.imgLoaded;\n var shouldFadeIn = this.state.fadeIn === true && !this.state.imgCached;\n var imageStyle = (0, _extends2.default)({\n opacity: shouldReveal ? 1 : 0,\n transition: shouldFadeIn ? \"opacity \" + durationFadeIn + \"ms\" : \"none\"\n }, imgStyle);\n var bgColor = typeof backgroundColor === \"boolean\" ? \"lightgray\" : backgroundColor;\n var delayHideStyle = {\n transitionDelay: durationFadeIn + \"ms\"\n };\n var imagePlaceholderStyle = (0, _extends2.default)({\n opacity: this.state.imgLoaded ? 0 : 1\n }, shouldFadeIn && delayHideStyle, imgStyle, placeholderStyle);\n var placeholderImageProps = {\n title: title,\n alt: !this.state.isVisible ? alt : \"\",\n style: imagePlaceholderStyle,\n className: placeholderClassName,\n itemProp: itemProp\n }; // Initial client render state needs to match SSR until hydration finishes.\n // Once hydration completes, render again to update to the correct image.\n // `imageVariants` is always an Array type at this point due to `convertProps()`\n\n var image = !this.state.isHydrated ? imageVariants[0] : getCurrentSrcData(imageVariants);\n\n if (fluid) {\n return /*#__PURE__*/_react.default.createElement(Tag, {\n className: (className ? className : \"\") + \" gatsby-image-wrapper\",\n style: (0, _extends2.default)({\n position: \"relative\",\n overflow: \"hidden\",\n maxWidth: image.maxWidth ? image.maxWidth + \"px\" : null,\n maxHeight: image.maxHeight ? image.maxHeight + \"px\" : null\n }, style),\n ref: this.handleRef,\n key: \"fluid-\" + JSON.stringify(image.srcSet)\n }, /*#__PURE__*/_react.default.createElement(Tag, {\n \"aria-hidden\": true,\n style: {\n width: \"100%\",\n paddingBottom: 100 / image.aspectRatio + \"%\"\n }\n }), bgColor && /*#__PURE__*/_react.default.createElement(Tag, {\n \"aria-hidden\": true,\n title: title,\n style: (0, _extends2.default)({\n backgroundColor: bgColor,\n position: \"absolute\",\n top: 0,\n bottom: 0,\n opacity: !this.state.imgLoaded ? 1 : 0,\n right: 0,\n left: 0\n }, shouldFadeIn && delayHideStyle)\n }), image.base64 && /*#__PURE__*/_react.default.createElement(Placeholder, {\n ariaHidden: true,\n ref: this.placeholderRef,\n src: image.base64,\n spreadProps: placeholderImageProps,\n imageVariants: imageVariants,\n generateSources: generateBase64Sources\n }), image.tracedSVG && /*#__PURE__*/_react.default.createElement(Placeholder, {\n ariaHidden: true,\n ref: this.placeholderRef,\n src: image.tracedSVG,\n spreadProps: placeholderImageProps,\n imageVariants: imageVariants,\n generateSources: generateTracedSVGSources\n }), this.state.isVisible && /*#__PURE__*/_react.default.createElement(\"picture\", null, generateImageSources(imageVariants), /*#__PURE__*/_react.default.createElement(Img, {\n alt: alt,\n title: title,\n sizes: image.sizes,\n src: image.src,\n crossOrigin: this.props.crossOrigin,\n srcSet: image.srcSet,\n style: imageStyle,\n ref: this.imageRef,\n onLoad: this.handleImageLoaded,\n onError: this.props.onError,\n itemProp: itemProp,\n loading: loading,\n draggable: draggable\n })), this.addNoScript && /*#__PURE__*/_react.default.createElement(\"noscript\", {\n dangerouslySetInnerHTML: {\n __html: noscriptImg((0, _extends2.default)({\n alt: alt,\n title: title,\n loading: loading\n }, image, {\n imageVariants: imageVariants\n }))\n }\n }));\n }\n\n if (fixed) {\n var divStyle = (0, _extends2.default)({\n position: \"relative\",\n overflow: \"hidden\",\n display: \"inline-block\",\n width: image.width,\n height: image.height\n }, style);\n\n if (style.display === \"inherit\") {\n delete divStyle.display;\n }\n\n return /*#__PURE__*/_react.default.createElement(Tag, {\n className: (className ? className : \"\") + \" gatsby-image-wrapper\",\n style: divStyle,\n ref: this.handleRef,\n key: \"fixed-\" + JSON.stringify(image.srcSet)\n }, bgColor && /*#__PURE__*/_react.default.createElement(Tag, {\n \"aria-hidden\": true,\n title: title,\n style: (0, _extends2.default)({\n backgroundColor: bgColor,\n width: image.width,\n opacity: !this.state.imgLoaded ? 1 : 0,\n height: image.height\n }, shouldFadeIn && delayHideStyle)\n }), image.base64 && /*#__PURE__*/_react.default.createElement(Placeholder, {\n ariaHidden: true,\n ref: this.placeholderRef,\n src: image.base64,\n spreadProps: placeholderImageProps,\n imageVariants: imageVariants,\n generateSources: generateBase64Sources\n }), image.tracedSVG && /*#__PURE__*/_react.default.createElement(Placeholder, {\n ariaHidden: true,\n ref: this.placeholderRef,\n src: image.tracedSVG,\n spreadProps: placeholderImageProps,\n imageVariants: imageVariants,\n generateSources: generateTracedSVGSources\n }), this.state.isVisible && /*#__PURE__*/_react.default.createElement(\"picture\", null, generateImageSources(imageVariants), /*#__PURE__*/_react.default.createElement(Img, {\n alt: alt,\n title: title,\n width: image.width,\n height: image.height,\n sizes: image.sizes,\n src: image.src,\n crossOrigin: this.props.crossOrigin,\n srcSet: image.srcSet,\n style: imageStyle,\n ref: this.imageRef,\n onLoad: this.handleImageLoaded,\n onError: this.props.onError,\n itemProp: itemProp,\n loading: loading,\n draggable: draggable\n })), this.addNoScript && /*#__PURE__*/_react.default.createElement(\"noscript\", {\n dangerouslySetInnerHTML: {\n __html: noscriptImg((0, _extends2.default)({\n alt: alt,\n title: title,\n loading: loading\n }, image, {\n imageVariants: imageVariants\n }))\n }\n }));\n }\n\n return null;\n };\n\n return Image;\n}(_react.default.Component);\n\nImage.defaultProps = {\n fadeIn: true,\n durationFadeIn: 500,\n alt: \"\",\n Tag: \"div\",\n // We set it to `lazy` by default because it's best to default to a performant\n // setting and let the user \"opt out\" to `eager`\n loading: \"lazy\"\n};\n\nvar fixedObject = _propTypes.default.shape({\n width: _propTypes.default.number.isRequired,\n height: _propTypes.default.number.isRequired,\n src: _propTypes.default.string.isRequired,\n srcSet: _propTypes.default.string.isRequired,\n base64: _propTypes.default.string,\n tracedSVG: _propTypes.default.string,\n srcWebp: _propTypes.default.string,\n srcSetWebp: _propTypes.default.string,\n media: _propTypes.default.string\n});\n\nvar fluidObject = _propTypes.default.shape({\n aspectRatio: _propTypes.default.number.isRequired,\n src: _propTypes.default.string.isRequired,\n srcSet: _propTypes.default.string.isRequired,\n sizes: _propTypes.default.string.isRequired,\n base64: _propTypes.default.string,\n tracedSVG: _propTypes.default.string,\n srcWebp: _propTypes.default.string,\n srcSetWebp: _propTypes.default.string,\n media: _propTypes.default.string,\n maxWidth: _propTypes.default.number,\n maxHeight: _propTypes.default.number\n});\n\nfunction requireFixedOrFluid(originalPropTypes) {\n return function (props, propName, componentName) {\n var _PropTypes$checkPropT;\n\n if (!props.fixed && !props.fluid) {\n throw new Error(\"The prop `fluid` or `fixed` is marked as required in `\" + componentName + \"`, but their values are both `undefined`.\");\n }\n\n _propTypes.default.checkPropTypes((_PropTypes$checkPropT = {}, _PropTypes$checkPropT[propName] = originalPropTypes, _PropTypes$checkPropT), props, \"prop\", componentName);\n };\n} // If you modify these propTypes, please don't forget to update following files as well:\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/index.d.ts\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/README.md#gatsby-image-props\n// https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/gatsby-image.md#gatsby-image-props\n\n\nImage.propTypes = {\n resolutions: fixedObject,\n sizes: fluidObject,\n fixed: requireFixedOrFluid(_propTypes.default.oneOfType([fixedObject, _propTypes.default.arrayOf(fixedObject)])),\n fluid: requireFixedOrFluid(_propTypes.default.oneOfType([fluidObject, _propTypes.default.arrayOf(fluidObject)])),\n fadeIn: _propTypes.default.bool,\n durationFadeIn: _propTypes.default.number,\n title: _propTypes.default.string,\n alt: _propTypes.default.string,\n className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),\n // Support Glamor's css prop.\n critical: _propTypes.default.bool,\n crossOrigin: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),\n style: _propTypes.default.object,\n imgStyle: _propTypes.default.object,\n placeholderStyle: _propTypes.default.object,\n placeholderClassName: _propTypes.default.string,\n backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),\n onLoad: _propTypes.default.func,\n onError: _propTypes.default.func,\n onStartLoad: _propTypes.default.func,\n Tag: _propTypes.default.string,\n itemProp: _propTypes.default.string,\n loading: _propTypes.default.oneOf([\"auto\", \"lazy\", \"eager\"]),\n draggable: _propTypes.default.bool\n};\nvar _default = Image;\nexports.default = _default;","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Indicator from \"./components/Indicator\";\n\nconst ShadowPortal = ({\n children,\n identifier\n}) => {\n const mountNode = React.useRef(null);\n const portalNode = React.useRef(null);\n const shadowNode = React.useRef(null);\n const [, forceUpdate] = React.useState();\n React.useEffect(() => {\n const ownerDocument = mountNode.current.ownerDocument;\n portalNode.current = ownerDocument.createElement(identifier);\n shadowNode.current = portalNode.current.attachShadow({\n mode: `open`\n });\n ownerDocument.body.appendChild(portalNode.current);\n forceUpdate({});\n return () => {\n if (portalNode.current && portalNode.current.ownerDocument) {\n portalNode.current.ownerDocument.body.removeChild(portalNode.current);\n }\n };\n }, []);\n return shadowNode.current ? /*#__PURE__*/createPortal(children, shadowNode.current) : /*#__PURE__*/React.createElement(\"span\", {\n ref: mountNode\n });\n};\n\nexport const wrapRootElement = ({\n element\n}, pluginOptions) => {\n if (process.env.GATSBY_PREVIEW_INDICATOR_ENABLED === `true` && !(pluginOptions !== null && pluginOptions !== void 0 && pluginOptions.disablePreviewUI)) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, element, /*#__PURE__*/React.createElement(ShadowPortal, {\n identifier: \"gatsby-preview-indicator\"\n }, /*#__PURE__*/React.createElement(Indicator, null)));\n } else {\n return /*#__PURE__*/React.createElement(React.Fragment, null, element);\n }\n};","/* eslint-disable no-unused-expressions */\nimport { stripIndent } from \"common-tags\"\nimport camelCase from \"camelcase\"\nimport { IGatsbyImageData } from \".\"\n\nconst DEFAULT_PIXEL_DENSITIES = [0.25, 0.5, 1, 2]\nexport const DEFAULT_BREAKPOINTS = [750, 1080, 1366, 1920]\nexport const EVERY_BREAKPOINT = [\n 320, 654, 768, 1024, 1366, 1600, 1920, 2048, 2560, 3440, 3840, 4096,\n]\nconst DEFAULT_FLUID_WIDTH = 800\nconst DEFAULT_FIXED_WIDTH = 800\nconst DEFAULT_ASPECT_RATIO = 4 / 3\n\nexport type Fit = \"cover\" | \"fill\" | \"inside\" | \"outside\" | \"contain\"\n\nexport type Layout = \"fixed\" | \"fullWidth\" | \"constrained\"\nexport type ImageFormat = \"jpg\" | \"png\" | \"webp\" | \"avif\" | \"auto\" | \"\"\n\n/**\n * The minimal required reporter, as we don't want to import it from gatsby-cli\n */\nexport interface IReporter {\n warn(message: string): void\n}\n\nexport interface ISharpGatsbyImageArgs {\n layout?: Layout\n formats?: Array\n placeholder?: \"tracedSVG\" | \"dominantColor\" | \"blurred\" | \"none\"\n tracedSVGOptions?: Record\n width?: number\n height?: number\n aspectRatio?: number\n sizes?: string\n quality?: number\n transformOptions?: {\n fit?: Fit\n cropFocus?: number | string\n duotone?: {\n highlight: string\n shadow: string\n opacity?: number\n }\n grayscale?: boolean\n rotate?: number\n trim?: number\n }\n jpgOptions?: Record\n pngOptions?: Record\n webpOptions?: Record\n avifOptions?: Record\n blurredOptions?: { width?: number; toFormat?: ImageFormat }\n breakpoints?: Array\n backgroundColor?: string\n}\n\nexport interface IImageSizeArgs {\n width?: number\n height?: number\n layout?: Layout\n filename: string\n outputPixelDensities?: Array\n breakpoints?: Array\n fit?: Fit\n reporter?: IReporter\n sourceMetadata: { width: number; height: number }\n}\n\nexport interface IImageSizes {\n sizes: Array\n presentationWidth: number\n presentationHeight: number\n aspectRatio: number\n unscaledWidth: number\n}\n\nexport interface IImage {\n src: string\n width: number\n height: number\n format: ImageFormat\n}\n\nexport interface IGatsbyImageHelperArgs {\n pluginName: string\n generateImageSource: (\n filename: string,\n width: number,\n height: number,\n format: ImageFormat,\n fit?: Fit,\n options?: Record\n ) => IImage\n layout?: Layout\n formats?: Array\n filename: string\n placeholderURL?: string\n width?: number\n height?: number\n sizes?: string\n reporter?: IReporter\n sourceMetadata?: { width: number; height: number; format: ImageFormat }\n fit?: Fit\n options?: Record\n breakpoints?: Array\n backgroundColor?: string\n aspectRatio?: number\n}\n\nconst warn = (message: string): void => console.warn(message)\n\nconst sortNumeric = (a: number, b: number): number => a - b\n\nexport const getSizes = (width: number, layout: Layout): string | undefined => {\n switch (layout) {\n // If screen is wider than the max size, image width is the max size,\n // otherwise it's the width of the screen\n case `constrained`:\n return `(min-width: ${width}px) ${width}px, 100vw`\n\n // Image is always the same width, whatever the size of the screen\n case `fixed`:\n return `${width}px`\n\n // Image is always the width of the screen\n case `fullWidth`:\n return `100vw`\n\n default:\n return undefined\n }\n}\n\nexport const getSrcSet = (images: Array): string =>\n images.map(image => `${image.src} ${image.width}w`).join(`,\\n`)\n\nexport function formatFromFilename(filename: string): ImageFormat | undefined {\n const dot = filename.lastIndexOf(`.`)\n if (dot !== -1) {\n const ext = filename.substr(dot + 1)\n if (ext === `jpeg`) {\n return `jpg`\n }\n if (ext.length === 3 || ext.length === 4) {\n return ext as ImageFormat\n }\n }\n return undefined\n}\n\nexport function setDefaultDimensions(\n args: IGatsbyImageHelperArgs\n): IGatsbyImageHelperArgs {\n let {\n layout = `constrained`,\n width,\n height,\n sourceMetadata,\n breakpoints,\n aspectRatio,\n formats = [`auto`, `webp`],\n } = args\n formats = formats.map(format => format.toLowerCase() as ImageFormat)\n layout = camelCase(layout) as Layout\n\n if (width && height) {\n return { ...args, formats, layout, aspectRatio: width / height }\n }\n if (sourceMetadata.width && sourceMetadata.height && !aspectRatio) {\n aspectRatio = sourceMetadata.width / sourceMetadata.height\n }\n\n if (layout === `fullWidth`) {\n width = width || sourceMetadata.width || breakpoints[breakpoints.length - 1]\n height = height || Math.round(width / (aspectRatio || DEFAULT_ASPECT_RATIO))\n } else {\n if (!width) {\n if (height && aspectRatio) {\n width = height * aspectRatio\n } else if (sourceMetadata.width) {\n width = sourceMetadata.width\n } else if (height) {\n width = Math.round(height / DEFAULT_ASPECT_RATIO)\n } else {\n width = DEFAULT_FIXED_WIDTH\n }\n }\n\n if (aspectRatio && !height) {\n height = Math.round(width / aspectRatio)\n } else if (!aspectRatio) {\n aspectRatio = width / height\n }\n }\n return { ...args, width, height, aspectRatio, layout, formats }\n}\n\n/**\n * Use this for getting an image for the blurred placeholder. This ensures the\n * aspect ratio and crop match the main image\n */\nexport function getLowResolutionImageURL(\n args: IGatsbyImageHelperArgs,\n width = 20\n): string {\n args = setDefaultDimensions(args)\n const { generateImageSource, filename, aspectRatio } = args\n return generateImageSource(\n filename,\n width,\n Math.round(width / aspectRatio),\n args.sourceMetadata.format || `jpg`,\n args.fit,\n args.options\n )?.src\n}\n\nexport function generateImageData(\n args: IGatsbyImageHelperArgs\n): IGatsbyImageData {\n args = setDefaultDimensions(args)\n\n let {\n pluginName,\n sourceMetadata,\n generateImageSource,\n layout,\n fit,\n options,\n width,\n height,\n filename,\n reporter = { warn },\n backgroundColor,\n placeholderURL,\n } = args\n\n if (!pluginName) {\n reporter.warn(\n `[gatsby-plugin-image] \"generateImageData\" was not passed a plugin name`\n )\n }\n\n if (typeof generateImageSource !== `function`) {\n throw new Error(`generateImageSource must be a function`)\n }\n\n if (!sourceMetadata || (!sourceMetadata.width && !sourceMetadata.height)) {\n // No metadata means we let the CDN handle max size etc, aspect ratio etc\n sourceMetadata = {\n width,\n height,\n format: sourceMetadata?.format || formatFromFilename(filename) || `auto`,\n }\n } else if (!sourceMetadata.format) {\n sourceMetadata.format = formatFromFilename(filename)\n }\n\n const formats = new Set(args.formats)\n\n if (formats.size === 0 || formats.has(`auto`) || formats.has(``)) {\n formats.delete(`auto`)\n formats.delete(``)\n formats.add(sourceMetadata.format)\n }\n\n if (formats.has(`jpg`) && formats.has(`png`)) {\n reporter.warn(\n `[${pluginName}] Specifying both 'jpg' and 'png' formats is not supported. Using 'auto' instead`\n )\n if (sourceMetadata.format === `jpg`) {\n formats.delete(`png`)\n } else {\n formats.delete(`jpg`)\n }\n }\n\n const imageSizes = calculateImageSizes({ ...args, sourceMetadata })\n\n const result: IGatsbyImageData[\"images\"] = {\n sources: [],\n }\n\n let sizes = args.sizes\n if (!sizes) {\n sizes = getSizes(imageSizes.presentationWidth, layout)\n }\n\n formats.forEach(format => {\n const images = imageSizes.sizes\n .map(size => {\n const imageSrc = generateImageSource(\n filename,\n size,\n Math.round(size / imageSizes.aspectRatio),\n format,\n fit,\n options\n )\n if (\n !imageSrc?.width ||\n !imageSrc.height ||\n !imageSrc.src ||\n !imageSrc.format\n ) {\n reporter.warn(\n `[${pluginName}] The resolver for image ${filename} returned an invalid value.`\n )\n return undefined\n }\n return imageSrc\n })\n .filter(Boolean)\n\n if (format === `jpg` || format === `png` || format === `auto`) {\n const unscaled =\n images.find(img => img.width === imageSizes.unscaledWidth) || images[0]\n\n if (unscaled) {\n result.fallback = {\n src: unscaled.src,\n srcSet: getSrcSet(images),\n sizes,\n }\n }\n } else {\n result.sources?.push({\n srcSet: getSrcSet(images),\n sizes,\n type: `image/${format}`,\n })\n }\n })\n\n const imageProps: Partial = {\n images: result,\n layout,\n backgroundColor,\n }\n\n if (placeholderURL) {\n imageProps.placeholder = { fallback: placeholderURL }\n }\n\n switch (layout) {\n case `fixed`:\n imageProps.width = imageSizes.presentationWidth\n imageProps.height = imageSizes.presentationHeight\n break\n\n case `fullWidth`:\n imageProps.width = 1\n imageProps.height = 1 / imageSizes.aspectRatio\n break\n\n case `constrained`:\n imageProps.width = args.width || imageSizes.presentationWidth || 1\n imageProps.height = (imageProps.width || 1) / imageSizes.aspectRatio\n }\n\n return imageProps as IGatsbyImageData\n}\n\nconst dedupeAndSortDensities = (values: Array): Array =>\n Array.from(new Set([1, ...values])).sort(sortNumeric)\n\nexport function calculateImageSizes(args: IImageSizeArgs): IImageSizes {\n const {\n width,\n height,\n filename,\n layout = `constrained`,\n sourceMetadata: imgDimensions,\n reporter = { warn },\n breakpoints = DEFAULT_BREAKPOINTS,\n } = args\n\n // check that all dimensions provided are positive\n const userDimensions = { width, height }\n const erroneousUserDimensions = Object.entries(userDimensions).filter(\n ([_, size]) => typeof size === `number` && size < 1\n )\n if (erroneousUserDimensions.length) {\n throw new Error(\n `Specified dimensions for images must be positive numbers (> 0). Problem dimensions you have are ${erroneousUserDimensions\n .map(dim => dim.join(`: `))\n .join(`, `)}`\n )\n }\n\n if (layout === `fixed`) {\n return fixedImageSizes(args)\n } else if (layout === `constrained`) {\n return responsiveImageSizes(args)\n } else if (layout === `fullWidth`) {\n return responsiveImageSizes({ breakpoints, ...args })\n } else {\n reporter.warn(\n `No valid layout was provided for the image at ${filename}. Valid image layouts are fixed, fullWidth, and constrained. Found ${layout}`\n )\n return {\n sizes: [imgDimensions.width],\n presentationWidth: imgDimensions.width,\n presentationHeight: imgDimensions.height,\n aspectRatio: imgDimensions.width / imgDimensions.height,\n unscaledWidth: imgDimensions.width,\n }\n }\n}\nexport function fixedImageSizes({\n filename,\n sourceMetadata: imgDimensions,\n width,\n height,\n fit = `cover`,\n outputPixelDensities = DEFAULT_PIXEL_DENSITIES,\n reporter = { warn },\n}: IImageSizeArgs): IImageSizes {\n let aspectRatio = imgDimensions.width / imgDimensions.height\n // Sort, dedupe and ensure there's a 1\n const densities = dedupeAndSortDensities(outputPixelDensities)\n\n // If both are provided then we need to check the fit\n if (width && height) {\n const calculated = getDimensionsAndAspectRatio(imgDimensions, {\n width,\n height,\n fit,\n })\n width = calculated.width\n height = calculated.height\n aspectRatio = calculated.aspectRatio\n }\n\n if (!width) {\n if (!height) {\n width = DEFAULT_FIXED_WIDTH\n } else {\n width = Math.round(height * aspectRatio)\n }\n } else if (!height) {\n height = Math.round(width / aspectRatio)\n }\n\n const originalWidth = width // will use this for presentationWidth, don't want to lose it\n const isTopSizeOverriden =\n imgDimensions.width < width || imgDimensions.height < (height as number)\n\n // If the image is smaller than requested, warn the user that it's being processed as such\n // print out this message with the necessary information before we overwrite it for sizing\n if (isTopSizeOverriden) {\n const fixedDimension = imgDimensions.width < width ? `width` : `height`\n reporter.warn(stripIndent`\n The requested ${fixedDimension} \"${\n fixedDimension === `width` ? width : height\n }px\" for the image ${filename} was larger than the actual image ${fixedDimension} of ${\n imgDimensions[fixedDimension]\n }px. If possible, replace the current image with a larger one.`)\n\n if (fixedDimension === `width`) {\n width = imgDimensions.width\n height = Math.round(width / aspectRatio)\n } else {\n height = imgDimensions.height\n width = height * aspectRatio\n }\n }\n\n const sizes = densities\n .filter(size => size >= 1) // remove smaller densities because fixed images don't need them\n .map(density => Math.round(density * (width as number)))\n .filter(size => size <= imgDimensions.width)\n\n return {\n sizes,\n aspectRatio,\n presentationWidth: originalWidth,\n presentationHeight: Math.round(originalWidth / aspectRatio),\n unscaledWidth: width,\n }\n}\n\nexport function responsiveImageSizes({\n sourceMetadata: imgDimensions,\n width,\n height,\n fit = `cover`,\n outputPixelDensities = DEFAULT_PIXEL_DENSITIES,\n breakpoints,\n layout,\n}: IImageSizeArgs): IImageSizes {\n let sizes\n let aspectRatio = imgDimensions.width / imgDimensions.height\n // Sort, dedupe and ensure there's a 1\n const densities = dedupeAndSortDensities(outputPixelDensities)\n\n // If both are provided then we need to check the fit\n if (width && height) {\n const calculated = getDimensionsAndAspectRatio(imgDimensions, {\n width,\n height,\n fit,\n })\n width = calculated.width\n height = calculated.height\n aspectRatio = calculated.aspectRatio\n }\n\n // Case 1: width of height were passed in, make sure it isn't larger than the actual image\n width = width && Math.min(width, imgDimensions.width)\n height = height && Math.min(height, imgDimensions.height)\n\n // Case 2: neither width or height were passed in, use default size\n if (!width && !height) {\n width = Math.min(DEFAULT_FLUID_WIDTH, imgDimensions.width)\n height = width / aspectRatio\n }\n\n // if it still hasn't been found, calculate width from the derived height.\n // TS isn't smart enough to realise the type for height has been narrowed here\n if (!width) {\n width = (height as number) * aspectRatio\n }\n\n const originalWidth = width\n const isTopSizeOverriden =\n imgDimensions.width < width || imgDimensions.height < (height as number)\n if (isTopSizeOverriden) {\n width = imgDimensions.width\n height = imgDimensions.height\n }\n\n width = Math.round(width)\n\n if (breakpoints?.length > 0) {\n sizes = breakpoints.filter(size => size <= imgDimensions.width)\n\n // If a larger breakpoint has been filtered-out, add the actual image width instead\n if (\n sizes.length < breakpoints.length &&\n !sizes.includes(imgDimensions.width)\n ) {\n sizes.push(imgDimensions.width)\n }\n } else {\n sizes = densities.map(density => Math.round(density * (width as number)))\n sizes = sizes.filter(size => size <= imgDimensions.width)\n }\n\n // ensure that the size passed in is included in the final output\n if (layout === `constrained` && !sizes.includes(width)) {\n sizes.push(width)\n }\n sizes = sizes.sort(sortNumeric)\n return {\n sizes,\n aspectRatio,\n presentationWidth: originalWidth,\n presentationHeight: Math.round(originalWidth / aspectRatio),\n unscaledWidth: width,\n }\n}\n\nexport function getDimensionsAndAspectRatio(\n dimensions,\n options\n): { width: number; height: number; aspectRatio: number } {\n // Calculate the eventual width/height of the image.\n const imageAspectRatio = dimensions.width / dimensions.height\n\n let width = options.width\n let height = options.height\n\n switch (options.fit) {\n case `fill`: {\n width = options.width ? options.width : dimensions.width\n height = options.height ? options.height : dimensions.height\n break\n }\n case `inside`: {\n const widthOption = options.width\n ? options.width\n : Number.MAX_SAFE_INTEGER\n const heightOption = options.height\n ? options.height\n : Number.MAX_SAFE_INTEGER\n\n width = Math.min(widthOption, Math.round(heightOption * imageAspectRatio))\n height = Math.min(\n heightOption,\n Math.round(widthOption / imageAspectRatio)\n )\n break\n }\n case `outside`: {\n const widthOption = options.width ? options.width : 0\n const heightOption = options.height ? options.height : 0\n\n width = Math.max(widthOption, Math.round(heightOption * imageAspectRatio))\n height = Math.max(\n heightOption,\n Math.round(widthOption / imageAspectRatio)\n )\n break\n }\n\n default: {\n if (options.width && !options.height) {\n width = options.width\n height = Math.round(options.width / imageAspectRatio)\n }\n\n if (options.height && !options.width) {\n width = Math.round(options.height * imageAspectRatio)\n height = options.height\n }\n }\n }\n\n return {\n width,\n height,\n aspectRatio: width / height,\n }\n}\n","/* eslint-disable no-unused-expressions */\nimport {\n useState,\n CSSProperties,\n useEffect,\n HTMLAttributes,\n ImgHTMLAttributes,\n ReactEventHandler,\n SetStateAction,\n Dispatch,\n RefObject,\n} from \"react\"\nimport { Node } from \"gatsby\"\nimport { PlaceholderProps } from \"./placeholder\"\nimport { MainImageProps } from \"./main-image\"\nimport type { IGatsbyImageData } from \"./gatsby-image.browser\"\nimport {\n IGatsbyImageHelperArgs,\n generateImageData,\n Layout,\n EVERY_BREAKPOINT,\n IImage,\n ImageFormat,\n} from \"../image-utils\"\nconst imageCache = new Set()\n\n// Native lazy-loading support: https://addyosmani.com/blog/lazy-loading/\nexport const hasNativeLazyLoadSupport = (): boolean =>\n typeof HTMLImageElement !== `undefined` &&\n `loading` in HTMLImageElement.prototype\n\nexport function gatsbyImageIsInstalled(): boolean {\n return typeof GATSBY___IMAGE !== `undefined` && GATSBY___IMAGE\n}\n\nexport function storeImageloaded(cacheKey?: string): void {\n if (cacheKey) {\n imageCache.add(cacheKey)\n }\n}\n\nexport function hasImageLoaded(cacheKey: string): boolean {\n return imageCache.has(cacheKey)\n}\nexport type IGatsbyImageDataParent = T & {\n gatsbyImageData: IGatsbyImageData\n}\nexport type FileNode = Node & {\n childImageSharp?: IGatsbyImageDataParent\n}\n\nconst isGatsbyImageData = (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n node: IGatsbyImageData | any\n): node is IGatsbyImageData =>\n // 🦆 check for a deep prop to be sure this is a valid gatsbyImageData object\n Boolean(node?.images?.fallback?.src)\n\nconst isGatsbyImageDataParent = (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n node: IGatsbyImageDataParent | any\n): node is IGatsbyImageDataParent => Boolean(node?.gatsbyImageData)\n\nexport type ImageDataLike = FileNode | IGatsbyImageDataParent | IGatsbyImageData\nexport const getImage = (node: ImageDataLike): IGatsbyImageData | undefined => {\n if (isGatsbyImageData(node)) {\n return node\n }\n if (isGatsbyImageDataParent(node)) {\n return node.gatsbyImageData\n }\n return node?.childImageSharp?.gatsbyImageData\n}\n\nexport const getSrc = (node: ImageDataLike): string | undefined =>\n getImage(node)?.images?.fallback?.src\n\nexport const getSrcSet = (node: ImageDataLike): string | undefined =>\n getImage(node)?.images?.fallback?.srcSet\n\nexport function getWrapperProps(\n width: number,\n height: number,\n layout: Layout\n): Pick, \"className\" | \"style\"> & {\n \"data-gatsby-image-wrapper\": string\n} {\n const wrapperStyle: CSSProperties = {}\n\n let className = `gatsby-image-wrapper`\n\n // If the plugin isn't installed we need to apply the styles inline\n if (!gatsbyImageIsInstalled()) {\n wrapperStyle.position = `relative`\n wrapperStyle.overflow = `hidden`\n }\n\n if (layout === `fixed`) {\n wrapperStyle.width = width\n wrapperStyle.height = height\n } else if (layout === `constrained`) {\n if (!gatsbyImageIsInstalled()) {\n wrapperStyle.display = `inline-block`\n wrapperStyle.verticalAlign = `top`\n }\n className = `gatsby-image-wrapper gatsby-image-wrapper-constrained`\n }\n\n return {\n className,\n \"data-gatsby-image-wrapper\": ``,\n style: wrapperStyle,\n }\n}\n\nexport async function applyPolyfill(\n ref: RefObject\n): Promise {\n if (!(`objectFitPolyfill` in window)) {\n await import(\n // @ts-ignore typescript can't find the module for some reason ¯\\_(ツ)_/¯\n /* webpackChunkName: \"gatsby-plugin-image-objectfit-polyfill\" */ `objectFitPolyfill`\n )\n }\n ;(window as any).objectFitPolyfill(ref.current)\n}\n\nexport interface IUrlBuilderArgs {\n width: number\n height: number\n baseUrl: string\n format: ImageFormat\n options: OptionsType\n}\nexport interface IGetImageDataArgs> {\n baseUrl: string\n /**\n * For constrained and fixed images, the size of the image element\n */\n width?: number\n height?: number\n /**\n * If available, pass the source image width and height\n */\n sourceWidth?: number\n sourceHeight?: number\n /**\n * If only one dimension is passed, then this will be used to calculate the other.\n */\n aspectRatio?: number\n layout?: Layout\n /**\n * Returns a URL based on the passed arguments. Should be a pure function\n */\n urlBuilder: (args: IUrlBuilderArgs) => string\n\n /**\n * Should be a data URI\n */\n placeholderURL?: string\n backgroundColor?: string\n /**\n * Used in error messages etc\n */\n pluginName?: string\n\n /**\n * If you do not support auto-format, pass an array of image types here\n */\n formats?: Array\n\n breakpoints?: Array\n\n /**\n * Passed to the urlBuilder function\n */\n options?: OptionsType\n}\n\n/**\n * Use this hook to generate gatsby-plugin-image data in the browser.\n */\nexport function getImageData({\n baseUrl,\n urlBuilder,\n sourceWidth,\n sourceHeight,\n pluginName = `getImageData`,\n formats = [`auto`],\n breakpoints,\n options,\n ...props\n}: IGetImageDataArgs): IGatsbyImageData {\n if (\n !breakpoints?.length &&\n (props.layout === `fullWidth` || (props.layout as string) === `FULL_WIDTH`)\n ) {\n breakpoints = EVERY_BREAKPOINT\n }\n const generateImageSource = (\n baseUrl: string,\n width: number,\n height?: number,\n format?: ImageFormat\n ): IImage => {\n return {\n width,\n height,\n format,\n src: urlBuilder({ baseUrl, width, height, options, format }),\n }\n }\n\n const sourceMetadata: IGatsbyImageHelperArgs[\"sourceMetadata\"] = {\n width: sourceWidth,\n height: sourceHeight,\n format: `auto`,\n }\n\n const args: IGatsbyImageHelperArgs = {\n ...props,\n pluginName,\n generateImageSource,\n filename: baseUrl,\n formats,\n breakpoints,\n sourceMetadata,\n }\n return generateImageData(args)\n}\n\nexport function getMainProps(\n isLoading: boolean,\n isLoaded: boolean,\n images: IGatsbyImageData[\"images\"],\n loading?: \"eager\" | \"lazy\",\n toggleLoaded?: (loaded: boolean) => void,\n cacheKey?: string,\n ref?: RefObject,\n style: CSSProperties = {}\n): Partial {\n const onLoad: ReactEventHandler = function (e) {\n if (isLoaded) {\n return\n }\n\n storeImageloaded(cacheKey)\n\n const target = e.currentTarget\n const img = new Image()\n img.src = target.currentSrc\n\n if (img.decode) {\n // Decode the image through javascript to support our transition\n img\n .decode()\n .catch(() => {\n // ignore error, we just go forward\n })\n .then(() => {\n toggleLoaded(true)\n })\n } else {\n toggleLoaded(true)\n }\n }\n\n // Polyfill \"object-fit\" if unsupported (mostly IE)\n if (ref?.current && !(`objectFit` in document.documentElement.style)) {\n ref.current.dataset.objectFit = style.objectFit ?? `cover`\n ref.current.dataset.objectPosition = `${style.objectPosition ?? `50% 50%`}`\n applyPolyfill(ref)\n }\n\n // fallback when it's not configured in gatsby-config.\n if (!gatsbyImageIsInstalled()) {\n style = {\n height: `100%`,\n left: 0,\n position: `absolute`,\n top: 0,\n transform: `translateZ(0)`,\n transition: `opacity 250ms linear`,\n width: `100%`,\n willChange: `opacity`,\n ...style,\n }\n }\n\n const result = {\n ...images,\n loading,\n shouldLoad: isLoading,\n \"data-main-image\": ``,\n style: {\n ...style,\n opacity: isLoaded ? 1 : 0,\n },\n onLoad,\n ref,\n }\n\n return result\n}\n\nexport type PlaceholderImageAttrs = ImgHTMLAttributes &\n Pick & {\n \"data-placeholder-image\"?: string\n }\n\nexport function getPlaceholderProps(\n placeholder: PlaceholderImageAttrs | undefined,\n isLoaded: boolean,\n layout: Layout,\n width?: number,\n height?: number,\n backgroundColor?: string,\n objectFit?: CSSProperties[\"objectFit\"],\n objectPosition?: CSSProperties[\"objectPosition\"]\n): PlaceholderImageAttrs {\n const wrapperStyle: CSSProperties = {}\n\n if (backgroundColor) {\n wrapperStyle.backgroundColor = backgroundColor\n\n if (layout === `fixed`) {\n wrapperStyle.width = width\n wrapperStyle.height = height\n wrapperStyle.backgroundColor = backgroundColor\n wrapperStyle.position = `relative`\n } else if (layout === `constrained`) {\n wrapperStyle.position = `absolute`\n wrapperStyle.top = 0\n wrapperStyle.left = 0\n wrapperStyle.bottom = 0\n wrapperStyle.right = 0\n } else if (layout === `fullWidth`) {\n wrapperStyle.position = `absolute`\n wrapperStyle.top = 0\n wrapperStyle.left = 0\n wrapperStyle.bottom = 0\n wrapperStyle.right = 0\n }\n }\n\n if (objectFit) {\n wrapperStyle.objectFit = objectFit\n }\n\n if (objectPosition) {\n wrapperStyle.objectPosition = objectPosition\n }\n const result: PlaceholderImageAttrs = {\n ...placeholder,\n \"aria-hidden\": true,\n \"data-placeholder-image\": ``,\n style: {\n opacity: isLoaded ? 0 : 1,\n transition: `opacity 500ms linear`,\n ...wrapperStyle,\n },\n }\n\n // fallback when it's not configured in gatsby-config.\n if (!gatsbyImageIsInstalled()) {\n result.style = {\n height: `100%`,\n left: 0,\n position: `absolute`,\n top: 0,\n width: `100%`,\n }\n }\n\n return result\n}\n\nexport function useImageLoaded(\n cacheKey: string,\n loading: \"lazy\" | \"eager\",\n ref: any\n): {\n isLoaded: boolean\n isLoading: boolean\n toggleLoaded: Dispatch>\n} {\n const [isLoaded, toggleLoaded] = useState(false)\n const [isLoading, toggleIsLoading] = useState(loading === `eager`)\n\n const rAF =\n typeof window !== `undefined` && `requestAnimationFrame` in window\n ? requestAnimationFrame\n : function (cb: TimerHandler): number {\n return setTimeout(cb, 16)\n }\n const cRAF =\n typeof window !== `undefined` && `cancelAnimationFrame` in window\n ? cancelAnimationFrame\n : clearTimeout\n\n useEffect(() => {\n let interval: number\n // @see https://stackoverflow.com/questions/44074747/componentdidmount-called-before-ref-callback/50019873#50019873\n function toggleIfRefExists(): void {\n if (ref.current) {\n if (loading === `eager` && ref.current.complete) {\n storeImageloaded(cacheKey)\n toggleLoaded(true)\n } else {\n toggleIsLoading(true)\n }\n } else {\n interval = rAF(toggleIfRefExists)\n }\n }\n toggleIfRefExists()\n\n return (): void => {\n cRAF(interval)\n }\n }, [])\n\n return {\n isLoading,\n isLoaded,\n toggleLoaded,\n }\n}\n\nexport interface IArtDirectedImage {\n media: string\n image: IGatsbyImageData\n}\n\n/**\n * Generate a Gatsby image data object with multiple, art-directed images that display at different\n * resolutions.\n *\n * @param defaultImage The image displayed when no media query matches.\n * It is also used for all other settings applied to the image, such as width, height and layout.\n * You should pass a className to the component with media queries to adjust the size of the container,\n * as this cannot be adjusted automatically.\n * @param artDirected Array of objects which each contains a `media` string which is a media query\n * such as `(min-width: 320px)`, and the image object to use when that query matches.\n */\nexport function withArtDirection(\n defaultImage: IGatsbyImageData,\n artDirected: Array\n): IGatsbyImageData {\n const { images, placeholder, ...props } = defaultImage\n const output: IGatsbyImageData = {\n ...props,\n images: {\n ...images,\n sources: [],\n },\n placeholder: placeholder && {\n ...placeholder,\n sources: [],\n },\n }\n\n artDirected.forEach(({ media, image }) => {\n if (!media) {\n if (process.env.NODE_ENV === `development`) {\n console.warn(\n \"[gatsby-plugin-image] All art-directed images passed to must have a value set for `media`. Skipping.\"\n )\n }\n return\n }\n\n if (\n image.layout !== defaultImage.layout &&\n process.env.NODE_ENV === `development`\n ) {\n console.warn(\n `[gatsby-plugin-image] Mismatched image layout: expected \"${defaultImage.layout}\" but received \"${image.layout}\". All art-directed images use the same layout as the default image`\n )\n }\n\n output.images.sources.push(\n ...image.images.sources.map(source => {\n return { ...source, media }\n }),\n {\n media,\n srcSet: image.images.fallback.srcSet,\n }\n )\n\n if (!output.placeholder) {\n return\n }\n\n output.placeholder.sources.push({\n media,\n srcSet: image.placeholder.fallback,\n })\n })\n output.images.sources.push(...images.sources)\n if (placeholder?.sources) {\n output.placeholder?.sources.push(...placeholder.sources)\n }\n return output\n}\n","// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// \n\nimport React, { Fragment, FunctionComponent } from \"react\"\nimport terserMacro from \"../../macros/terser.macro\"\nimport { Layout } from \"../image-utils\"\n\nexport interface ILayoutWrapperProps {\n layout: Layout\n width: number\n height: number\n}\n\nconst NativeScriptLoading: FunctionComponent = () => (\n \n)\n\nexport function getSizer(\n layout: Layout,\n width: number,\n height: number\n): string {\n let sizer: string | null = null\n if (layout === `fullWidth`) {\n sizer = ``\n }\n if (layout === `constrained`) {\n sizer = `![\"\"](\"data:image/svg+xml;charset=utf-8,%3Csvg)
{children}
,\n [BLOCKS.HEADING_1]: (node, children) => {children}
,\n [BLOCKS.HEADING_2]: (node, children) => {children}
,\n [BLOCKS.HEADING_3]: (node, children) => {children}
,\n [BLOCKS.HEADING_4]: (node, children) => {children}
,\n [BLOCKS.HEADING_5]: (node, children) => {children}
,\n [BLOCKS.HEADING_6]: (node, children) => {children}
,\n [BLOCKS.EMBEDDED_ENTRY]: (node, children) => {children}
,\n [BLOCKS.UL_LIST]: (node, children) => ,\n [BLOCKS.OL_LIST]: (node, children) => {children}
,\n [BLOCKS.LIST_ITEM]: (node, children) => {children},\n [BLOCKS.QUOTE]: (node, children) => {children}
,\n [BLOCKS.HR]: () =>
,\n [INLINES.ASSET_HYPERLINK]: node => defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),\n [INLINES.ENTRY_HYPERLINK]: node => defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),\n [INLINES.EMBEDDED_ENTRY]: node => defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),\n [INLINES.HYPERLINK]: (node, children) => {children},\n};\n\nconst defaultMarkRenderers: RenderMark = {\n [MARKS.BOLD]: text => {text},\n [MARKS.ITALIC]: text => {text},\n [MARKS.UNDERLINE]: text => {text},\n [MARKS.CODE]: text => {text},\n};\n\nfunction defaultInline(type: string, node: Inline): ReactNode {\n return (\n \n type: {node.nodeType} id: {node.data.target.sys.id}\n \n );\n}\n\nexport type CommonNode = Text | Block | Inline;\n\nexport interface NodeRenderer {\n (node: Block | Inline, children: ReactNode): ReactNode;\n}\n\nexport interface RenderNode {\n [k: string]: NodeRenderer;\n}\n\nexport interface RenderMark {\n [k: string]: (text: ReactNode) => ReactNode;\n}\n\nexport interface RenderText {\n (text: string): ReactNode;\n}\n\nexport interface Options {\n /**\n * Node renderers\n */\n renderNode?: RenderNode;\n /**\n * Mark renderers\n */\n renderMark?: RenderMark;\n /**\n * Text renderer\n */\n renderText?: RenderText;\n}\n\n/**\n * Serialize a Contentful Rich Text `document` to React tree\n */\nexport function documentToReactComponents(\n richTextDocument: Document,\n options: Options = {},\n): ReactNode {\n if (!richTextDocument) {\n return null;\n }\n\n return nodeToReactComponent(richTextDocument, {\n renderNode: {\n ...defaultNodeRenderers,\n ...options.renderNode,\n },\n renderMark: {\n ...defaultMarkRenderers,\n ...options.renderMark,\n },\n renderText: options.renderText,\n });\n}\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nvar _richTextReactRenderer = require(\"@contentful/rich-text-react-renderer\");\n\nvar _contentfulResolveResponse = _interopRequireDefault(require(\"contentful-resolve-response\"));\n\nfunction renderRichText({\n raw,\n references\n}, options = {}) {\n const richText = JSON.parse(raw); // If no references are given, there is no need to resolve them\n\n if (!references || !references.length) {\n return (0, _richTextReactRenderer.documentToReactComponents)(richText, options);\n } // Create dummy response so we can use official libraries for resolving the entries\n\n\n const dummyResponse = {\n items: [{\n sys: {\n type: `Entry`\n },\n richText\n }],\n includes: {\n Entry: references.filter(({\n __typename\n }) => __typename !== `ContentfulAsset`).map(reference => {\n return { ...reference,\n sys: {\n type: `Entry`,\n id: reference.contentful_id\n }\n };\n }),\n Asset: references.filter(({\n __typename\n }) => __typename === `ContentfulAsset`).map(reference => {\n return { ...reference,\n sys: {\n type: `Asset`,\n id: reference.contentful_id\n }\n };\n })\n }\n };\n const resolved = (0, _contentfulResolveResponse.default)(dummyResponse, {\n removeUnresolved: true\n });\n return (0, _richTextReactRenderer.documentToReactComponents)(resolved[0].richText, options);\n}\n\nexports.renderRichText = renderRichText;","/* eslint camelcase: off */\n\nimport Img from 'gatsby-image'\nimport React, { useState, useEffect } from 'react'\nimport styled from 'styled-components'\nimport { color, above, costaTextBold, costaText } from '../../styles'\nimport { renderRichText } from '../../utils/richText'\n\nconst AccordionItem = ({ accordion, locale }) => {\n const accordionImage = accordion?.accordionImage?.fluid\n\n const [isAccordionOpen, setIsAccordionOpen] = useState(false)\n\n useEffect(() => {\n const openFromAnchor = window.location.hash.substring(1) === accordion.anchor\n const openByDefault = !window.location.hash && accordion.open\n if (openFromAnchor || openByDefault) {\n setIsAccordionOpen(true)\n }\n }, [accordion.anchor, accordion.open])\n\n const openWithEnterButton = event => event.code === 'Enter' && setIsAccordionOpen(!isAccordionOpen)\n\n return (\n \n setIsAccordionOpen(!isAccordionOpen)}\n aria-controls={accordion.anchor}\n aria-expanded={isAccordionOpen}\n >\n {accordion.title}\n \n \n \n {accordionImage && }\n {renderRichText(accordion.content, locale)}\n \n \n )\n}\n\nconst AccordionBlock = ({ data }) => {\n const { title, anchor, accordionItem, node_locale } = data\n\n return (\n \n {title && {title}}\n {accordionItem &&\n accordionItem.map(accordion => (\n \n ))}\n \n )\n}\n\nconst Container = styled.article`\n background: ${color.white};\n padding: 40px 5%;\n max-width: 608px;\n margin: 0 auto;\n\n ${above.tablet`\n \n max-width: 672px;\n `}\n\n ${above.tabletLarge`\n max-width: 824px;\n padding: 40px 9% 40px 8%;\n `} \n \n ${above.desktop`\n max-width: 1392px;\n padding: 40px 118px 40px;\n `}\n`\n\n/* Add above to match Zeplin designs\n background: ${color.white};\n max-width: 300px;\n margin: 0px auto 48px;\n padding: 8px 0 8px;\n object-fit: contain;\n ${above.tablet`\n max-width: 680px;\n `}\n ${above.tabletLarge`\n max-width: 824px;\n padding: 40px auto 40px;\n `} \n \n ${above.desktop`\n max-width: 1280px;\n margin: 0px auto 40px;\n padding: 40px 104px 40px;\n `}\n*/\n\nconst Accordion = styled.div`\n margin: 0 auto 8px auto;\n\n &:hover {\n background: ${color.offWhite};\n transition: 0.3s;\n }\n\n &.accordionOpen {\n background: ${color.offWhite};\n }\n`\n/* Add above to match Zeplin designs\n margin: 0 auto 8px auto;\n ${above.tablet`\n margin-bottom: 0px;\n `}\n padding: 8px 16px 8px;\n ${above.desktop`\n max-width: 1064px;\n padding: 8px 32px;\n `}\n &:focus,\n &:hover {\n background: ${color.offWhite};\n transition: 0.3s;\n }\n &.accordionOpen {\n background: ${color.offWhite};\n }\n */\n\nAccordion.Title = styled.label`\n color: ${color.costaRed};\n ${costaTextBold}\n font-size: 18px;\n line-height: 1.1;\n display: block;\n position: relative;\n padding: 8px 36px 8px 0;\n cursor: pointer;\n user-select: none;\n width: 90%;\n margin: 0 auto;\n\n ${above.tablet`\n font-size: 24px;\n line-height: 1.2;\n margin: 0 24px;\n padding: 8px 36px 0 0;\n `}\n\n ${above.desktop`\n padding-top: 16px;\n margin: 0 32px;\n padding: 8px 36px 8px 0;\n `}\n\n &:hover {\n color: ${color.lightRed};\n transition: 0.3s;\n }\n`\n\nAccordion.Title.Icon = styled.span`\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ${color.costaRed};\n position: absolute;\n right: 0;\n top: 16px;\n transition: transform 0.3s;\n transform: rotate(180deg);\n &.accordionOpen {\n transform: rotate(0);\n }\n\n ${above.tablet`\n top: 24px;\n right: -16px;\n `}\n\n ${above.desktop`\n top: 24px;\n right: -48px;\n `}\n`\n\nAccordion.Content = styled.div`\n display: none;\n overflow: auto;\n background-color: ${color.white};\n overflow: hidden;\n\n strong {\n ${costaTextBold}\n font-weight: normal !important;\n }\n\n a {\n ${costaText}\n color: ${color.costaRed};\n\n &:hover {\n color: ${color.lightRed};\n transition: 0.3s;\n }\n }\n\n ul {\n padding-inline-start: 40px;\n padding-left: 24px;\n &:first-child {\n margin-top: 16px;\n ${above.tablet`\n margin-top: 16px;\n `}\n }\n li {\n list-style-type: inherit;\n & > p {\n margin: 0px;\n }\n }\n }\n\n ol {\n padding-inline-start: 40px;\n &:first-child {\n margin-top: 16px;\n ${above.tablet`\n margin-top: 16px;\n `}\n }\n li {\n list-style-type: inherit;\n & > p {\n margin: 0px;\n }\n }\n }\n\n h1,\n h2 {\n color: ${color.costaRed};\n }\n\n .inline-right {\n float: right;\n max-width: 500px;\n padding: 0 0 40px 40px;\n }\n\n .inline-left {\n float: left;\n max-width: 500px;\n padding: 0 40px 40px 0;\n }\n\n &.accordionOpen {\n display: block;\n height: auto;\n background: ${color.offWhite};\n }\n`\n\nAccordion.Checkbox = styled.input`\n display: none;\n\n ~ ${Accordion.Content} {\n padding: 0;\n }\n`\n\nconst Title = styled.h3`\n color: ${color.costaRed};\n margin-left: auto;\n margin-right: auto;\n margin-top: 0;\n`\n\n/* Add above to match Zeplin designs\n color: ${color.costaRed};\n padding: 0px 16px;\n margin: 24px 0;\n ${above.desktop`\n padding: 0px 32px;\n margin: 24px 0;\n `}\n*/\n\nconst GatsbyImage = styled(Img)`\n width: 100%;\n height: 200px;\n object-fit: contain;\n margin-top: 8px;\n\n ${above.tablet`\n float: left;\n width: 45%;\n margin: 16px 24px;\n `}\n\n ${above.desktop`\n width: 25%;\n margin: 16px 32px;\n `}\n`\n\nAccordion.RichTextContainer = styled.div`\n margin: 0 auto;\n width: 90%;\n ${above.tablet`\n margin: 0 24px;\n `}\n\n ${above.desktop`\n margin: 0 32px;\n `}\n`\n\nexport default AccordionBlock\n","import AccordionBlock from './accordion'\n\nexport default AccordionBlock\n","import { forwardRef, chakra } from '@chakra-ui/system';\nimport { cx, __DEV__ } from '@chakra-ui/utils';\nimport * as React from 'react';\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded = [\"as\", \"viewBox\", \"color\", \"focusable\", \"children\", \"className\", \"__css\"];\nvar fallbackIcon = {\n path: /*#__PURE__*/React.createElement(\"g\", {\n stroke: \"currentColor\",\n strokeWidth: \"1.5\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n strokeLinecap: \"round\",\n fill: \"none\",\n d: \"M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n strokeLinecap: \"round\",\n d: \"M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n fill: \"none\",\n strokeMiterlimit: \"10\",\n cx: \"12\",\n cy: \"12\",\n r: \"11.25\"\n })),\n viewBox: \"0 0 24 24\"\n};\nvar Icon = /*#__PURE__*/forwardRef(function (props, ref) {\n var element = props.as,\n viewBox = props.viewBox,\n _props$color = props.color,\n color = _props$color === void 0 ? \"currentColor\" : _props$color,\n _props$focusable = props.focusable,\n focusable = _props$focusable === void 0 ? false : _props$focusable,\n children = props.children,\n className = props.className,\n __css = props.__css,\n rest = _objectWithoutPropertiesLoose(props, _excluded);\n\n var _className = cx(\"chakra-icon\", className);\n\n var styles = _extends({\n w: \"1em\",\n h: \"1em\",\n display: \"inline-block\",\n lineHeight: \"1em\",\n flexShrink: 0,\n color: color\n }, __css);\n\n var shared = {\n ref: ref,\n focusable: focusable,\n className: _className,\n __css: styles\n };\n\n var _viewBox = viewBox != null ? viewBox : fallbackIcon.viewBox;\n /**\n * If you're using an icon library like `react-icons`.\n * Note: anyone passing the `as` prop, should manage the `viewBox` from the external component\n */\n\n\n if (element && typeof element !== \"string\") {\n return /*#__PURE__*/React.createElement(chakra.svg, _extends({\n as: element\n }, shared, rest));\n }\n\n var _path = children != null ? children : fallbackIcon.path;\n\n return /*#__PURE__*/React.createElement(chakra.svg, _extends({\n verticalAlign: \"middle\",\n viewBox: _viewBox\n }, shared, rest), _path);\n});\n\nif (__DEV__) {\n Icon.displayName = \"Icon\";\n}\n\nvar Icon$1 = Icon;\n\nfunction createIcon(options) {\n var _options$viewBox = options.viewBox,\n viewBox = _options$viewBox === void 0 ? \"0 0 24 24\" : _options$viewBox,\n pathDefinition = options.d,\n displayName = options.displayName,\n _options$defaultProps = options.defaultProps,\n defaultProps = _options$defaultProps === void 0 ? {} : _options$defaultProps;\n var path = React.Children.toArray(options.path);\n var Comp = /*#__PURE__*/forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(Icon, _extends({\n ref: ref,\n viewBox: viewBox\n }, defaultProps, props), path.length ? path : /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n d: pathDefinition\n }));\n });\n\n if (__DEV__) {\n Comp.displayName = displayName;\n }\n\n return Comp;\n}\n\nexport { Icon, createIcon, Icon$1 as default };","import { forwardRef, chakra, useStyleConfig, omitThemingProps, useMultiStyleConfig, tokenToCSSVar } from '@chakra-ui/system';\nimport { cx, mapResponsive, __DEV__, filterUndefined, isNull, isNumber } from '@chakra-ui/utils';\nimport * as React from 'react';\nimport { Icon } from '@chakra-ui/icon';\nimport { createContext, getValidChildren } from '@chakra-ui/react-utils';\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded$h = [\"ratio\", \"children\", \"className\"];\n/**\n * React component used to cropping media (videos, images and maps)\n * to a desired aspect ratio.\n *\n * @see Docs https://chakra-ui.com/aspectratiobox\n */\n\nvar AspectRatio = /*#__PURE__*/forwardRef(function (props, ref) {\n var _props$ratio = props.ratio,\n ratio = _props$ratio === void 0 ? 4 / 3 : _props$ratio,\n children = props.children,\n className = props.className,\n rest = _objectWithoutPropertiesLoose(props, _excluded$h); // enforce single child\n\n\n var child = React.Children.only(children);\n\n var _className = cx(\"chakra-aspect-ratio\", className);\n\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n position: \"relative\",\n className: _className,\n _before: {\n height: 0,\n content: \"\\\"\\\"\",\n display: \"block\",\n paddingBottom: mapResponsive(ratio, function (r) {\n return 1 / r * 100 + \"%\";\n })\n },\n __css: {\n \"& > *:not(style)\": {\n overflow: \"hidden\",\n position: \"absolute\",\n top: \"0\",\n right: \"0\",\n bottom: \"0\",\n left: \"0\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"100%\",\n height: \"100%\"\n },\n \"& > img, & > video\": {\n objectFit: \"cover\"\n }\n }\n }, rest), child);\n});\n\nif (__DEV__) {\n AspectRatio.displayName = \"AspectRatio\";\n}\n\nvar _excluded$g = [\"className\"];\n/**\n * React component used to display notifications, messages, or\n * statuses in different shapes and sizes.\n *\n * @see Docs https://chakra-ui.com/badge\n */\n\nvar Badge = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyleConfig(\"Badge\", props);\n\n var _omitThemingProps = omitThemingProps(props);\n\n _omitThemingProps.className;\n\n var rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$g);\n\n return /*#__PURE__*/React.createElement(chakra.span, _extends({\n ref: ref,\n className: cx(\"chakra-badge\", props.className)\n }, rest, {\n __css: _extends({\n display: \"inline-block\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\"\n }, styles)\n }));\n});\n\nif (__DEV__) {\n Badge.displayName = \"Badge\";\n}\n\nvar _excluded$f = [\"size\", \"centerContent\"],\n _excluded2$5 = [\"size\"];\n/**\n * Box is the most abstract component on top of which other chakra\n * components are built. It renders a `div` element by default.\n *\n * @see Docs https://chakra-ui.com/box\n */\n\nvar Box = chakra(\"div\");\n\nif (__DEV__) {\n Box.displayName = \"Box\";\n}\n/**\n * As a constraint, you can't pass size related props\n * Only `size` would be allowed\n */\n\n\nvar Square = /*#__PURE__*/forwardRef(function (props, ref) {\n var size = props.size,\n _props$centerContent = props.centerContent,\n centerContent = _props$centerContent === void 0 ? true : _props$centerContent,\n rest = _objectWithoutPropertiesLoose(props, _excluded$f);\n\n var styles = centerContent ? {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n } : {};\n return /*#__PURE__*/React.createElement(Box, _extends({\n ref: ref,\n boxSize: size,\n __css: _extends({}, styles, {\n flexShrink: 0,\n flexGrow: 0\n })\n }, rest));\n});\n\nif (__DEV__) {\n Square.displayName = \"Square\";\n}\n\nvar Circle = /*#__PURE__*/forwardRef(function (props, ref) {\n var size = props.size,\n rest = _objectWithoutPropertiesLoose(props, _excluded2$5);\n\n return /*#__PURE__*/React.createElement(Square, _extends({\n size: size,\n ref: ref,\n borderRadius: \"9999px\"\n }, rest));\n});\n\nif (__DEV__) {\n Circle.displayName = \"Circle\";\n}\n\nvar _excluded$e = [\"axis\"];\n/**\n * React component used to horizontally and vertically center its child.\n * It uses the popular `display: flex` centering technique.\n *\n * @see Docs https://chakra-ui.com/center\n */\n\nvar Center = chakra(\"div\", {\n baseStyle: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n }\n});\n\nif (__DEV__) {\n Center.displayName = \"Center\";\n}\n\nvar centerStyles = {\n horizontal: {\n insetStart: \"50%\",\n transform: \"translateX(-50%)\"\n },\n vertical: {\n top: \"50%\",\n transform: \"translateY(-50%)\"\n },\n both: {\n insetStart: \"50%\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\"\n }\n};\n/**\n * React component used to horizontally and vertically center an element\n * relative to its parent dimensions.\n *\n * It uses the `position: absolute` strategy.\n *\n * @see Docs https://chakra-ui.com/center\n * @see WebDev https://web.dev/centering-in-css/#5.-pop-and-plop\n */\n\nvar AbsoluteCenter = /*#__PURE__*/forwardRef(function (props, ref) {\n var _props$axis = props.axis,\n axis = _props$axis === void 0 ? \"both\" : _props$axis,\n rest = _objectWithoutPropertiesLoose(props, _excluded$e);\n\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n __css: centerStyles[axis]\n }, rest, {\n position: \"absolute\"\n }));\n});\nvar _excluded$d = [\"className\"];\n/**\n * React component to render inline code snippets.\n *\n * @see Docs https://chakra-ui.com/code\n */\n\nvar Code = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyleConfig(\"Code\", props);\n\n var _omitThemingProps = omitThemingProps(props);\n\n _omitThemingProps.className;\n\n var rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$d);\n\n return /*#__PURE__*/React.createElement(chakra.code, _extends({\n ref: ref,\n className: cx(\"chakra-code\", props.className)\n }, rest, {\n __css: _extends({\n display: \"inline-block\"\n }, styles)\n }));\n});\n\nif (__DEV__) {\n Code.displayName = \"Code\";\n}\n\nvar _excluded$c = [\"className\", \"centerContent\"];\n/**\n * Layout component used to wrap app or website content\n *\n * It sets `margin-left` and `margin-right` to `auto`,\n * to keep its content centered.\n *\n * It also sets a default max-width of `60ch` (60 characters).\n */\n\nvar Container = /*#__PURE__*/forwardRef(function (props, ref) {\n var _omitThemingProps = omitThemingProps(props),\n className = _omitThemingProps.className,\n centerContent = _omitThemingProps.centerContent,\n rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$c);\n\n var styles = useStyleConfig(\"Container\", props);\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n className: cx(\"chakra-container\", className)\n }, rest, {\n __css: _extends({}, styles, centerContent && {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\"\n })\n }));\n});\n\nif (__DEV__) {\n Container.displayName = \"Container\";\n}\n\nvar _excluded$b = [\"borderLeftWidth\", \"borderBottomWidth\", \"borderTopWidth\", \"borderRightWidth\", \"borderWidth\", \"borderStyle\", \"borderColor\"],\n _excluded2$4 = [\"className\", \"orientation\", \"__css\"];\n/**\n * Layout component used to visually separate content in a list or group.\n * It displays a thin horizontal or vertical line, and renders a `hr` tag.\n *\n * @see Docs https://chakra-ui.com/divider\n */\n\nvar Divider = /*#__PURE__*/forwardRef(function (props, ref) {\n var _useStyleConfig = useStyleConfig(\"Divider\", props),\n borderLeftWidth = _useStyleConfig.borderLeftWidth,\n borderBottomWidth = _useStyleConfig.borderBottomWidth,\n borderTopWidth = _useStyleConfig.borderTopWidth,\n borderRightWidth = _useStyleConfig.borderRightWidth,\n borderWidth = _useStyleConfig.borderWidth,\n borderStyle = _useStyleConfig.borderStyle,\n borderColor = _useStyleConfig.borderColor,\n styles = _objectWithoutPropertiesLoose(_useStyleConfig, _excluded$b);\n\n var _omitThemingProps = omitThemingProps(props),\n className = _omitThemingProps.className,\n _omitThemingProps$ori = _omitThemingProps.orientation,\n orientation = _omitThemingProps$ori === void 0 ? \"horizontal\" : _omitThemingProps$ori,\n __css = _omitThemingProps.__css,\n rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded2$4);\n\n var dividerStyles = {\n vertical: {\n borderLeftWidth: borderLeftWidth || borderRightWidth || borderWidth || \"1px\",\n height: \"100%\"\n },\n horizontal: {\n borderBottomWidth: borderBottomWidth || borderTopWidth || borderWidth || \"1px\",\n width: \"100%\"\n }\n };\n return /*#__PURE__*/React.createElement(chakra.hr, _extends({\n ref: ref,\n \"aria-orientation\": orientation\n }, rest, {\n __css: _extends({}, styles, {\n border: \"0\",\n borderColor: borderColor,\n borderStyle: borderStyle\n }, dividerStyles[orientation], __css),\n className: cx(\"chakra-divider\", className)\n }));\n});\n\nif (__DEV__) {\n Divider.displayName = \"Divider\";\n}\n\nvar _excluded$a = [\"direction\", \"align\", \"justify\", \"wrap\", \"basis\", \"grow\", \"shrink\"];\n/**\n * React component used to create flexbox layouts.\n *\n * It renders a `div` with `display: flex` and\n * comes with helpful style shorthand.\n *\n * @see Docs https://chakra-ui.com/flex\n */\n\nvar Flex = /*#__PURE__*/forwardRef(function (props, ref) {\n var direction = props.direction,\n align = props.align,\n justify = props.justify,\n wrap = props.wrap,\n basis = props.basis,\n grow = props.grow,\n shrink = props.shrink,\n rest = _objectWithoutPropertiesLoose(props, _excluded$a);\n\n var styles = {\n display: \"flex\",\n flexDirection: direction,\n alignItems: align,\n justifyContent: justify,\n flexWrap: wrap,\n flexBasis: basis,\n flexGrow: grow,\n flexShrink: shrink\n };\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n __css: styles\n }, rest));\n});\n\nif (__DEV__) {\n Flex.displayName = \"Flex\";\n}\n\nvar _excluded$9 = [\"area\", \"templateAreas\", \"gap\", \"rowGap\", \"columnGap\", \"column\", \"row\", \"autoFlow\", \"autoRows\", \"templateRows\", \"autoColumns\", \"templateColumns\"],\n _excluded2$3 = [\"area\", \"colSpan\", \"colStart\", \"colEnd\", \"rowEnd\", \"rowSpan\", \"rowStart\"];\n/**\n * React component used to create grid layouts.\n *\n * It renders a `div` with `display: grid` and\n * comes with helpful style shorthand.\n *\n * @see Docs https://chakra-ui.com/grid\n */\n\nvar Grid = /*#__PURE__*/forwardRef(function (props, ref) {\n var area = props.area,\n templateAreas = props.templateAreas,\n gap = props.gap,\n rowGap = props.rowGap,\n columnGap = props.columnGap,\n column = props.column,\n row = props.row,\n autoFlow = props.autoFlow,\n autoRows = props.autoRows,\n templateRows = props.templateRows,\n autoColumns = props.autoColumns,\n templateColumns = props.templateColumns,\n rest = _objectWithoutPropertiesLoose(props, _excluded$9);\n\n var styles = {\n display: \"grid\",\n gridArea: area,\n gridTemplateAreas: templateAreas,\n gridGap: gap,\n gridRowGap: rowGap,\n gridColumnGap: columnGap,\n gridAutoColumns: autoColumns,\n gridColumn: column,\n gridRow: row,\n gridAutoFlow: autoFlow,\n gridAutoRows: autoRows,\n gridTemplateRows: templateRows,\n gridTemplateColumns: templateColumns\n };\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n __css: styles\n }, rest));\n});\n\nif (__DEV__) {\n Grid.displayName = \"Grid\";\n}\n\nfunction spanFn(span) {\n return mapResponsive(span, function (value) {\n return value === \"auto\" ? \"auto\" : \"span \" + value + \"/span \" + value;\n });\n}\n\nvar GridItem = /*#__PURE__*/forwardRef(function (props, ref) {\n var area = props.area,\n colSpan = props.colSpan,\n colStart = props.colStart,\n colEnd = props.colEnd,\n rowEnd = props.rowEnd,\n rowSpan = props.rowSpan,\n rowStart = props.rowStart,\n rest = _objectWithoutPropertiesLoose(props, _excluded2$3);\n\n var styles = filterUndefined({\n gridArea: area,\n gridColumn: spanFn(colSpan),\n gridRow: spanFn(rowSpan),\n gridColumnStart: colStart,\n gridColumnEnd: colEnd,\n gridRowStart: rowStart,\n gridRowEnd: rowEnd\n });\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n __css: styles\n }, rest));\n});\nvar _excluded$8 = [\"className\"];\nvar Heading = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyleConfig(\"Heading\", props);\n\n var _omitThemingProps = omitThemingProps(props);\n\n _omitThemingProps.className;\n\n var rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$8);\n\n return /*#__PURE__*/React.createElement(chakra.h2, _extends({\n ref: ref,\n className: cx(\"chakra-heading\", props.className)\n }, rest, {\n __css: styles\n }));\n});\n\nif (__DEV__) {\n Heading.displayName = \"Heading\";\n}\n\nvar _excluded$7 = [\"className\"];\n/**\n * Semantic component to render a keyboard shortcut\n * within an application.\n *\n * @example\n *\n * ```jsx\n * ⌘ + T\n * ```\n *\n * @see Docs https://chakra-ui.com/kbd\n */\n\nvar Kbd = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyleConfig(\"Kbd\", props);\n\n var _omitThemingProps = omitThemingProps(props),\n className = _omitThemingProps.className,\n rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$7);\n\n return /*#__PURE__*/React.createElement(chakra.kbd, _extends({\n ref: ref,\n className: cx(\"chakra-kbd\", className)\n }, rest, {\n __css: _extends({\n fontFamily: \"mono\"\n }, styles)\n }));\n});\n\nif (__DEV__) {\n Kbd.displayName = \"Kbd\";\n}\n\nvar _excluded$6 = [\"className\", \"isExternal\"];\n/**\n * Links are accessible elements used primarily for navigation.\n *\n * It integrates well with other routing libraries like\n * React Router, Reach Router and Next.js Link.\n *\n * @example\n *\n * ```jsx\n * Home\n * ```\n *\n * @see Docs https://chakra-ui.com/link\n */\n\nvar Link = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyleConfig(\"Link\", props);\n\n var _omitThemingProps = omitThemingProps(props),\n className = _omitThemingProps.className,\n isExternal = _omitThemingProps.isExternal,\n rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$6);\n\n return /*#__PURE__*/React.createElement(chakra.a, _extends({\n target: isExternal ? \"_blank\" : undefined,\n rel: isExternal ? \"noopener\" : undefined,\n ref: ref,\n className: cx(\"chakra-link\", className)\n }, rest, {\n __css: styles\n }));\n});\n\nif (__DEV__) {\n Link.displayName = \"Link\";\n}\n\nvar _excluded$5 = [\"children\", \"styleType\", \"stylePosition\", \"spacing\"],\n _excluded2$2 = [\"as\"],\n _excluded3 = [\"as\"];\n\nvar _createContext = createContext({\n name: \"StylesContext\",\n errorMessage: \"useStyles: `styles` is undefined. Seems you forgot to wrap the components in a `<*List />` \"\n}),\n StylesProvider = _createContext[0],\n useStyles = _createContext[1];\n/**\n * List is used to display list items, it renders a `` by default.\n *\n * @see Docs https://chakra-ui.com/list\n */\n\n\nvar List = /*#__PURE__*/forwardRef(function (props, ref) {\n var _ref;\n\n var styles = useMultiStyleConfig(\"List\", props);\n\n var _omitThemingProps = omitThemingProps(props),\n children = _omitThemingProps.children,\n _omitThemingProps$sty = _omitThemingProps.styleType,\n styleType = _omitThemingProps$sty === void 0 ? \"none\" : _omitThemingProps$sty,\n stylePosition = _omitThemingProps.stylePosition,\n spacing = _omitThemingProps.spacing,\n rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$5);\n\n var validChildren = getValidChildren(children);\n var selector = \"& > *:not(style) ~ *:not(style)\";\n var spacingStyle = spacing ? (_ref = {}, _ref[selector] = {\n mt: spacing\n }, _ref) : {};\n return /*#__PURE__*/React.createElement(StylesProvider, {\n value: styles\n }, /*#__PURE__*/React.createElement(chakra.ul, _extends({\n ref: ref,\n listStyleType: styleType,\n listStylePosition: stylePosition\n /**\n * We added this role to fix the Safari accessibility issue with list-style-type: none\n * @see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n */\n ,\n role: \"list\",\n __css: _extends({}, styles.container, spacingStyle)\n }, rest), validChildren));\n});\n\nif (__DEV__) {\n List.displayName = \"List\";\n}\n\nvar OrderedList = /*#__PURE__*/forwardRef(function (props, ref) {\n props.as;\n\n var rest = _objectWithoutPropertiesLoose(props, _excluded2$2);\n\n return /*#__PURE__*/React.createElement(List, _extends({\n ref: ref,\n as: \"ol\",\n styleType: \"decimal\",\n marginStart: \"1em\"\n }, rest));\n});\n\nif (__DEV__) {\n OrderedList.displayName = \"OrderedList\";\n}\n\nvar UnorderedList = /*#__PURE__*/forwardRef(function (props, ref) {\n props.as;\n\n var rest = _objectWithoutPropertiesLoose(props, _excluded3);\n\n return /*#__PURE__*/React.createElement(List, _extends({\n ref: ref,\n as: \"ul\",\n styleType: \"initial\",\n marginStart: \"1em\"\n }, rest));\n});\n\nif (__DEV__) {\n UnorderedList.displayName = \"UnorderedList\";\n}\n/**\n * ListItem\n *\n * Used to render a list item\n */\n\n\nvar ListItem = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyles();\n return /*#__PURE__*/React.createElement(chakra.li, _extends({\n ref: ref\n }, props, {\n __css: styles.item\n }));\n});\n\nif (__DEV__) {\n ListItem.displayName = \"ListItem\";\n}\n/**\n * ListIcon\n *\n * Used to render an icon beside the list item text\n */\n\n\nvar ListIcon = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyles();\n return /*#__PURE__*/React.createElement(Icon, _extends({\n ref: ref,\n role: \"presentation\"\n }, props, {\n __css: styles.icon\n }));\n});\n\nif (__DEV__) {\n ListIcon.displayName = \"ListIcon\";\n}\n\nvar _excluded$4 = [\"columns\", \"spacingX\", \"spacingY\", \"spacing\", \"minChildWidth\"];\n/**\n * SimpleGrid\n *\n * React component that uses the `Grid` component and provides\n * a simpler interface to create responsive grid layouts.\n * \n * Provides props that easily define columns and spacing.\n *\n * @see Docs https://chakra-ui.com/simplegrid\n */\n\nvar SimpleGrid = /*#__PURE__*/forwardRef(function (props, ref) {\n var columns = props.columns,\n spacingX = props.spacingX,\n spacingY = props.spacingY,\n spacing = props.spacing,\n minChildWidth = props.minChildWidth,\n rest = _objectWithoutPropertiesLoose(props, _excluded$4);\n\n var templateColumns = minChildWidth ? widthToColumns(minChildWidth) : countToColumns(columns);\n return /*#__PURE__*/React.createElement(Grid, _extends({\n ref: ref,\n gap: spacing,\n columnGap: spacingX,\n rowGap: spacingY,\n templateColumns: templateColumns\n }, rest));\n});\n\nif (__DEV__) {\n SimpleGrid.displayName = \"SimpleGrid\";\n}\n\nfunction toPx(n) {\n return isNumber(n) ? n + \"px\" : n;\n}\n\nfunction widthToColumns(width) {\n return mapResponsive(width, function (value) {\n return isNull(value) ? null : \"repeat(auto-fit, minmax(\" + toPx(value) + \", 1fr))\";\n });\n}\n\nfunction countToColumns(count) {\n return mapResponsive(count, function (value) {\n return isNull(value) ? null : \"repeat(\" + value + \", minmax(0, 1fr))\";\n });\n}\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n *\n * @see Docs https://chakra-ui.com/flex#using-the-spacer\n */\n\n\nvar Spacer = chakra(\"div\", {\n baseStyle: {\n flex: 1,\n justifySelf: \"stretch\",\n alignSelf: \"stretch\"\n }\n});\n\nif (__DEV__) {\n Spacer.displayName = \"Spacer\";\n}\n/**\n * If we ever run into SSR issues with this, check this post to find a fix for it:\n * @see https://medium.com/@emmenko/patching-lobotomized-owl-selector-for-emotion-ssr-5a582a3c424c\n */\n\n\nvar selector = \"& > *:not(style) ~ *:not(style)\";\n\nfunction getStackStyles(options) {\n var _ref;\n\n var spacing = options.spacing,\n direction = options.direction;\n var directionStyles = {\n column: {\n marginTop: spacing,\n marginEnd: 0,\n marginBottom: 0,\n marginStart: 0\n },\n row: {\n marginTop: 0,\n marginEnd: 0,\n marginBottom: 0,\n marginStart: spacing\n },\n \"column-reverse\": {\n marginTop: 0,\n marginEnd: 0,\n marginBottom: spacing,\n marginStart: 0\n },\n \"row-reverse\": {\n marginTop: 0,\n marginEnd: spacing,\n marginBottom: 0,\n marginStart: 0\n }\n };\n return _ref = {\n flexDirection: direction\n }, _ref[selector] = mapResponsive(direction, function (value) {\n return directionStyles[value];\n }), _ref;\n}\n\nfunction getDividerStyles(options) {\n var spacing = options.spacing,\n direction = options.direction;\n var dividerStyles = {\n column: {\n my: spacing,\n mx: 0,\n borderLeftWidth: 0,\n borderBottomWidth: \"1px\"\n },\n \"column-reverse\": {\n my: spacing,\n mx: 0,\n borderLeftWidth: 0,\n borderBottomWidth: \"1px\"\n },\n row: {\n mx: spacing,\n my: 0,\n borderLeftWidth: \"1px\",\n borderBottomWidth: 0\n },\n \"row-reverse\": {\n mx: spacing,\n my: 0,\n borderLeftWidth: \"1px\",\n borderBottomWidth: 0\n }\n };\n return {\n \"&\": mapResponsive(direction, function (value) {\n return dividerStyles[value];\n })\n };\n}\n\nvar _excluded$3 = [\"isInline\", \"direction\", \"align\", \"justify\", \"spacing\", \"wrap\", \"children\", \"divider\", \"className\", \"shouldWrapChildren\"];\n\nvar StackDivider = function StackDivider(props) {\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n className: \"chakra-stack__divider\"\n }, props, {\n __css: _extends({}, props[\"__css\"], {\n borderWidth: 0,\n alignSelf: \"stretch\",\n borderColor: \"inherit\",\n width: \"auto\",\n height: \"auto\"\n })\n }));\n};\n\nvar StackItem = function StackItem(props) {\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n className: \"chakra-stack__item\"\n }, props, {\n __css: _extends({\n display: \"inline-block\",\n flex: \"0 0 auto\",\n minWidth: 0\n }, props[\"__css\"])\n }));\n};\n/**\n * Stacks help you easily create flexible and automatically distributed layouts\n *\n * You can stack elements in the horizontal or vertical direction,\n * and apply a space or/and divider between each element.\n *\n * It uses `display: flex` internally and renders a `div`.\n *\n * @see Docs https://chakra-ui.com/stack\n *\n */\n\n\nvar Stack = /*#__PURE__*/forwardRef(function (props, ref) {\n var _ref;\n\n var isInline = props.isInline,\n directionProp = props.direction,\n align = props.align,\n justify = props.justify,\n _props$spacing = props.spacing,\n spacing = _props$spacing === void 0 ? \"0.5rem\" : _props$spacing,\n wrap = props.wrap,\n children = props.children,\n divider = props.divider,\n className = props.className,\n shouldWrapChildren = props.shouldWrapChildren,\n rest = _objectWithoutPropertiesLoose(props, _excluded$3);\n\n var direction = isInline ? \"row\" : directionProp != null ? directionProp : \"column\";\n var styles = React.useMemo(function () {\n return getStackStyles({\n direction: direction,\n spacing: spacing\n });\n }, [direction, spacing]);\n var dividerStyle = React.useMemo(function () {\n return getDividerStyles({\n spacing: spacing,\n direction: direction\n });\n }, [spacing, direction]);\n var hasDivider = !!divider;\n var shouldUseChildren = !shouldWrapChildren && !hasDivider;\n var validChildren = getValidChildren(children);\n var clones = shouldUseChildren ? validChildren : validChildren.map(function (child, index) {\n // Prefer provided child key, fallback to index\n var key = typeof child.key !== \"undefined\" ? child.key : index;\n var isLast = index + 1 === validChildren.length;\n var wrappedChild = /*#__PURE__*/React.createElement(StackItem, {\n key: key\n }, child);\n\n var _child = shouldWrapChildren ? wrappedChild : child;\n\n if (!hasDivider) return _child;\n var clonedDivider = /*#__PURE__*/React.cloneElement(divider, {\n __css: dividerStyle\n });\n\n var _divider = isLast ? null : clonedDivider;\n\n return /*#__PURE__*/React.createElement(React.Fragment, {\n key: key\n }, _child, _divider);\n });\n\n var _className = cx(\"chakra-stack\", className);\n\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n display: \"flex\",\n alignItems: align,\n justifyContent: justify,\n flexDirection: styles.flexDirection,\n flexWrap: wrap,\n className: _className,\n __css: hasDivider ? {} : (_ref = {}, _ref[selector] = styles[selector], _ref)\n }, rest), clones);\n});\n\nif (__DEV__) {\n Stack.displayName = \"Stack\";\n}\n/**\n * A view that arranges its children in a horizontal line.\n */\n\n\nvar HStack = /*#__PURE__*/forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(Stack, _extends({\n align: \"center\"\n }, props, {\n direction: \"row\",\n ref: ref\n }));\n});\n\nif (__DEV__) {\n HStack.displayName = \"HStack\";\n}\n/**\n * A view that arranges its children in a vertical line.\n */\n\n\nvar VStack = /*#__PURE__*/forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(Stack, _extends({\n align: \"center\"\n }, props, {\n direction: \"column\",\n ref: ref\n }));\n});\n\nif (__DEV__) {\n VStack.displayName = \"VStack\";\n}\n\nvar _excluded$2 = [\"className\", \"align\", \"decoration\", \"casing\"];\n/**\n * Used to render texts or paragraphs.\n *\n * @see Docs https://chakra-ui.com/text\n */\n\nvar Text = /*#__PURE__*/forwardRef(function (props, ref) {\n var styles = useStyleConfig(\"Text\", props);\n\n var _omitThemingProps = omitThemingProps(props);\n\n _omitThemingProps.className;\n _omitThemingProps.align;\n _omitThemingProps.decoration;\n _omitThemingProps.casing;\n\n var rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$2);\n\n var aliasedProps = filterUndefined({\n textAlign: props.align,\n textDecoration: props.decoration,\n textTransform: props.casing\n });\n return /*#__PURE__*/React.createElement(chakra.p, _extends({\n ref: ref,\n className: cx(\"chakra-text\", props.className)\n }, aliasedProps, rest, {\n __css: styles\n }));\n});\n\nif (__DEV__) {\n Text.displayName = \"Text\";\n}\n\nvar _excluded$1 = [\"spacing\", \"spacingX\", \"spacingY\", \"children\", \"justify\", \"direction\", \"align\", \"className\", \"shouldWrapChildren\"],\n _excluded2$1 = [\"className\"];\n/**\n * Layout component used to stack elements that differ in length\n * and are liable to wrap.\n *\n * Common use cases:\n * - Buttons that appear together at the end of forms\n * - Lists of tags and chips\n *\n * @see Docs https://chakra-ui.com/wrap\n */\n\nvar Wrap = /*#__PURE__*/forwardRef(function (props, ref) {\n var _props$spacing = props.spacing,\n spacing = _props$spacing === void 0 ? \"0.5rem\" : _props$spacing,\n spacingX = props.spacingX,\n spacingY = props.spacingY,\n children = props.children,\n justify = props.justify,\n direction = props.direction,\n align = props.align,\n className = props.className,\n shouldWrapChildren = props.shouldWrapChildren,\n rest = _objectWithoutPropertiesLoose(props, _excluded$1);\n\n var styles = React.useMemo(function () {\n var _spacingX$spacingY = {\n spacingX: spacingX,\n spacingY: spacingY\n },\n _spacingX$spacingY$sp = _spacingX$spacingY.spacingX,\n x = _spacingX$spacingY$sp === void 0 ? spacing : _spacingX$spacingY$sp,\n _spacingX$spacingY$sp2 = _spacingX$spacingY.spacingY,\n y = _spacingX$spacingY$sp2 === void 0 ? spacing : _spacingX$spacingY$sp2;\n return {\n \"--chakra-wrap-x-spacing\": function chakraWrapXSpacing(theme) {\n return mapResponsive(x, function (value) {\n return tokenToCSSVar(\"space\", value)(theme);\n });\n },\n \"--chakra-wrap-y-spacing\": function chakraWrapYSpacing(theme) {\n return mapResponsive(y, function (value) {\n return tokenToCSSVar(\"space\", value)(theme);\n });\n },\n \"--wrap-x-spacing\": \"calc(var(--chakra-wrap-x-spacing) / 2)\",\n \"--wrap-y-spacing\": \"calc(var(--chakra-wrap-y-spacing) / 2)\",\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: justify,\n alignItems: align,\n flexDirection: direction,\n listStyleType: \"none\",\n padding: \"0\",\n margin: \"calc(var(--wrap-y-spacing) * -1) calc(var(--wrap-x-spacing) * -1)\",\n \"& > *:not(style)\": {\n margin: \"var(--wrap-y-spacing) var(--wrap-x-spacing)\"\n }\n };\n }, [spacing, spacingX, spacingY, justify, align, direction]);\n var childrenToRender = shouldWrapChildren ? React.Children.map(children, function (child, index) {\n return /*#__PURE__*/React.createElement(WrapItem, {\n key: index\n }, child);\n }) : children;\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n className: cx(\"chakra-wrap\", className)\n }, rest), /*#__PURE__*/React.createElement(chakra.ul, {\n className: \"chakra-wrap__list\",\n __css: styles\n }, childrenToRender));\n});\n\nif (__DEV__) {\n Wrap.displayName = \"Wrap\";\n}\n\nvar WrapItem = /*#__PURE__*/forwardRef(function (props, ref) {\n var className = props.className,\n rest = _objectWithoutPropertiesLoose(props, _excluded2$1);\n\n return /*#__PURE__*/React.createElement(chakra.li, _extends({\n ref: ref,\n __css: {\n display: \"flex\",\n alignItems: \"flex-start\"\n },\n className: cx(\"chakra-wrap__listitem\", className)\n }, rest));\n});\n\nif (__DEV__) {\n WrapItem.displayName = \"WrapItem\";\n}\n\nvar _excluded = [\"isExternal\", \"target\", \"rel\", \"className\"],\n _excluded2 = [\"className\"];\nvar LinkOverlay = /*#__PURE__*/forwardRef(function (props, ref) {\n var isExternal = props.isExternal,\n target = props.target,\n rel = props.rel,\n className = props.className,\n rest = _objectWithoutPropertiesLoose(props, _excluded);\n\n return /*#__PURE__*/React.createElement(chakra.a, _extends({}, rest, {\n ref: ref,\n className: cx(\"chakra-linkbox__overlay\", className),\n rel: isExternal ? \"noopener noreferrer\" : rel,\n target: isExternal ? \"_blank\" : target,\n __css: {\n position: \"static\",\n \"&::before\": {\n content: \"''\",\n cursor: \"inherit\",\n display: \"block\",\n position: \"absolute\",\n top: 0,\n left: 0,\n zIndex: 1,\n width: \"100%\",\n height: \"100%\"\n }\n }\n }));\n});\n/**\n * `LinkBox` is used to wrap content areas within a link while ensuring semantic html\n *\n * @see Docs https://chakra-ui.com/docs/navigation/link-overlay\n * @see Resources https://www.sarasoueidan.com/blog/nested-links\n */\n\nvar LinkBox = /*#__PURE__*/forwardRef(function (props, ref) {\n var className = props.className,\n rest = _objectWithoutPropertiesLoose(props, _excluded2);\n\n return /*#__PURE__*/React.createElement(chakra.div, _extends({\n ref: ref,\n position: \"relative\"\n }, rest, {\n className: cx(\"chakra-linkbox\", className),\n __css: {\n /* Elevate the links, abbreviations and buttons up */\n \"a[href]:not(.chakra-linkbox__overlay), abbr[title], button\": {\n position: \"relative\",\n zIndex: 1\n }\n }\n }));\n});\nexport { AbsoluteCenter, AspectRatio, Badge, Box, Center, Circle, Code, Container, Divider, Flex, Grid, GridItem, HStack, Heading, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, OrderedList, SimpleGrid, Spacer, Square, Stack, StackDivider, StackItem, Text, UnorderedList, VStack, Wrap, WrapItem };","import { forwardRef, chakra } from '@chakra-ui/system';\nimport { omit, __DEV__ } from '@chakra-ui/utils';\nimport * as React from 'react';\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport { useSafeLayoutEffect } from '@chakra-ui/hooks';\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n/**\n * React hook that loads an image in the browser,\n * and lets us know the `status` so we can show image\n * fallback if it is still `pending`\n *\n * @returns the status of the image loading progress\n *\n * @example\n *\n * ```jsx\n * function App(){\n * const status = useImage({ src: \"image.png\" })\n * return status === \"loaded\" ? ![](\"image.png\")
: \n * }\n * ```\n */\n\n\nfunction useImage(props) {\n var loading = props.loading,\n src = props.src,\n srcSet = props.srcSet,\n onLoad = props.onLoad,\n onError = props.onError,\n crossOrigin = props.crossOrigin,\n sizes = props.sizes,\n ignoreFallback = props.ignoreFallback;\n\n var _useState = useState(\"pending\"),\n status = _useState[0],\n setStatus = _useState[1];\n\n useEffect(function () {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n var imageRef = useRef();\n var load = useCallback(function () {\n if (!src) return;\n flush();\n var img = new Image();\n img.src = src;\n if (crossOrigin) img.crossOrigin = crossOrigin;\n if (srcSet) img.srcset = srcSet;\n if (sizes) img.sizes = sizes;\n if (loading) img.loading = loading;\n\n img.onload = function (event) {\n flush();\n setStatus(\"loaded\");\n onLoad == null ? void 0 : onLoad(event);\n };\n\n img.onerror = function (error) {\n flush();\n setStatus(\"failed\");\n onError == null ? void 0 : onError(error);\n };\n\n imageRef.current = img;\n }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading]);\n\n var flush = function flush() {\n if (imageRef.current) {\n imageRef.current.onload = null;\n imageRef.current.onerror = null;\n imageRef.current = null;\n }\n };\n\n useSafeLayoutEffect(function () {\n /**\n * If user opts out of the fallback/placeholder\n * logic, let's bail out.\n */\n if (ignoreFallback) return undefined;\n\n if (status === \"loading\") {\n load();\n }\n\n return function () {\n flush();\n };\n }, [status, load, ignoreFallback]);\n /**\n * If user opts out of the fallback/placeholder\n * logic, let's just return 'loaded'\n */\n\n return ignoreFallback ? \"loaded\" : status;\n}\n\nvar _excluded = [\"htmlWidth\", \"htmlHeight\", \"alt\"],\n _excluded2 = [\"fallbackSrc\", \"fallback\", \"src\", \"srcSet\", \"align\", \"fit\", \"loading\", \"ignoreFallback\", \"crossOrigin\"];\nvar NativeImage = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var htmlWidth = props.htmlWidth,\n htmlHeight = props.htmlHeight,\n alt = props.alt,\n rest = _objectWithoutPropertiesLoose(props, _excluded);\n\n return /*#__PURE__*/React.createElement(\"img\", _extends({\n width: htmlWidth,\n height: htmlHeight,\n ref: ref,\n alt: alt\n }, rest));\n});\n/**\n * React component that renders an image with support\n * for fallbacks\n *\n * @see Docs https://chakra-ui.com/image\n */\n\nvar Image$1 = /*#__PURE__*/forwardRef(function (props, ref) {\n var fallbackSrc = props.fallbackSrc,\n fallback = props.fallback,\n src = props.src,\n srcSet = props.srcSet,\n align = props.align,\n fit = props.fit,\n loading = props.loading,\n ignoreFallback = props.ignoreFallback,\n crossOrigin = props.crossOrigin,\n rest = _objectWithoutPropertiesLoose(props, _excluded2);\n /**\n * Defer to native `img` tag if `loading` prop is passed\n * @see https://github.com/chakra-ui/chakra-ui/issues/1027\n */\n\n\n var shouldIgnore = loading != null || ignoreFallback || fallbackSrc === undefined && fallback === undefined; // if the user doesn't provide any kind of fallback we should ignore it\n\n var status = useImage(_extends({}, props, {\n ignoreFallback: shouldIgnore\n }));\n\n var shared = _extends({\n ref: ref,\n objectFit: fit,\n objectPosition: align\n }, shouldIgnore ? rest : omit(rest, [\"onError\", \"onLoad\"]));\n\n if (status !== \"loaded\") {\n /**\n * If user passed a custom fallback component,\n * let's render it here.\n */\n if (fallback) return fallback;\n return /*#__PURE__*/React.createElement(chakra.img, _extends({\n as: NativeImage,\n className: \"chakra-image__placeholder\",\n src: fallbackSrc\n }, shared));\n }\n\n return /*#__PURE__*/React.createElement(chakra.img, _extends({\n as: NativeImage,\n src: src,\n srcSet: srcSet,\n crossOrigin: crossOrigin,\n loading: loading,\n className: \"chakra-image\"\n }, shared));\n});\n/**\n * Fallback component for most SSR users who want to use the native `img` with\n * support for chakra props\n */\n\nvar Img = /*#__PURE__*/forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(chakra.img, _extends({\n ref: ref,\n as: NativeImage,\n className: \"chakra-image\"\n }, props));\n});\n\nif (__DEV__) {\n Image$1.displayName = \"Image\";\n}\n\nexport { Image$1 as Image, Img, useImage };","import React from 'react'\n\nimport { Box, Flex } from '@chakra-ui/layout'\nimport { Text, Image } from '@chakra-ui/react'\nimport { color } from '../../styles'\n\nconst Icon = ({ icon }) => {\n const styles = {\n maxHeight: { base: '52px', tablet: '80px' },\n marginBottom: { base: 3, tablet: 4 },\n }\n\n if (icon.file.contentType === 'image/svg+xml' && icon?.svg?.content) {\n // rendering svg inline lets us style it with css\n return (\n \n )\n }\n\n return \n}\n\nconst BreakoutFactsAndBenefits = ({ data }) => {\n const { icon, colouredText, textColour } = data\n return (\n \n \n \n {colouredText}\n \n \n )\n}\n\nexport default BreakoutFactsAndBenefits\n","import BreakoutFactsAndBenefits from './breakoutFactsAndBenefits'\n\nexport default BreakoutFactsAndBenefits\n","import React from 'react'\nimport styled from 'styled-components'\nimport { applyStyleModifiers } from 'styled-components-modifiers'\nimport { ContentfulLink } from '../../utils/link'\nimport { color, above, costaTextBold } from '../../styles'\n\nconst LinkCta = ({ alignment, ctaStyle, link, customColor, customLinkColor, className, children }) => {\n return (\n \n {children}\n \n )\n}\n\nconst MODIFIER_CONFIG = {\n center: () => `text-align: center`,\n left: () => `text-align: left`,\n right: () => `text-align: right`,\n button: ({ customColor }) => `\n a {\n pointer-events: auto;\n background: ${customColor};\n color: ${customColor === color.white ? color.costaRed : color.white};\n padding: 15px 20px;\n border-radius: 32px;\n\n ${above.tablet`\n padding: 18px 27px;\n `}\n\n &:hover {\n background: ${customColor === color.white ? color.offWhite : color.lightRed};\n }\n\n &:after {\n border-left: 6px solid ${customColor === color.white ? color.costaRed : color.white};\n }\n }\n `,\n\n link: ({ customLinkColor }) => `\n a {\n color: ${customLinkColor === color.white ? color.white : color.costaRed};\n padding: 15px 0;\n text-decoration: underline;\n text-decoration-thickness: 2px;\n text-underline-offset: 4px;\n\n ${above.tablet`\n padding: 18px 0;\n `}\n\n &:after {\n border-left: 6px solid ${customLinkColor === color.white ? color.white : color.costaRed};\n }\n\n &:hover {\n color: ${color.lightRed};\n &:after {\n border-left: 6px solid ${color.lightRed};\n }\n }\n }\n `,\n}\n\nconst StyledBlockLink = styled.div`\n a {\n ${costaTextBold}\n display: inline-block;\n letter-spacing: 1px;\n cursor: pointer;\n margin-bottom: 16px;\n\n ${above.tablet`\n margin-bottom: 18px;\n `}\n\n &:after {\n content: '';\n display: inline-block;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n margin-left: 16px;\n\n ${above.tablet`\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n `}\n }\n }\n ${applyStyleModifiers(MODIFIER_CONFIG)};\n`\n\nexport default LinkCta\n","import LinkCta from './linkCta'\n\nexport default LinkCta\n","/* eslint-disable no-nested-ternary */\nimport React from 'react'\nimport ReactPlayer from 'react-player'\nimport { chakra } from '@chakra-ui/react'\nimport { Box } from '@chakra-ui/layout'\nimport GatsbyImage from 'gatsby-image'\n\nimport { color } from '../../styles/colors'\nimport RichText from '../richText'\nimport LinkCta from '../linkCta'\n\nconst BlockPromoStandard = ({\n style,\n standardStyleBgColour,\n imageAlignment,\n image,\n content,\n primaryAction,\n primaryActionLabel,\n primaryActionStyle,\n secondaryAction,\n secondaryActionLabel,\n secondaryActionStyle,\n}) => {\n const mediaType = image.file.contentType\n const bgColour =\n standardStyleBgColour && standardStyleBgColour === 'Cloudless Blue'\n ? color.rebrandBlue\n : standardStyleBgColour === 'Nightfall Lilac'\n ? color.secondaryCore\n : standardStyleBgColour === 'Sunset Coral'\n ? color.tertiaryCore\n : standardStyleBgColour === 'Grey'\n ? color.offWhite\n : color.white\n\n const ChakraGatsbyImage = chakra(GatsbyImage)\n const ChakraLinkCta = chakra(LinkCta)\n const ChakraVideoWrapper = chakra('div', {\n position: 'relative',\n top: '0',\n bottom: '0',\n w: '100%',\n h: '100%',\n overflow: 'hidden',\n })\n return (\n \n \n \n {primaryAction && (\n \n {primaryActionLabel || primaryAction.title}\n \n )}\n {secondaryAction && (\n \n {secondaryActionLabel || secondaryAction.title}\n \n )}\n \n {mediaType.includes('image') && (\n \n )}\n {mediaType.includes('video') && (\n \n \n \n )}\n \n )\n}\n\nexport default BlockPromoStandard\n","import React from 'react'\nimport { chakra } from '@chakra-ui/react'\nimport { Box } from '@chakra-ui/layout'\nimport GatsbyImage from 'gatsby-image'\n\nimport RichText from '../richText'\nimport LinkCta from '../linkCta'\nimport { color } from '../../styles'\n\nconst BlockPromoTeaser = ({\n imageAlignment,\n image,\n content,\n primaryAction,\n primaryActionLabel,\n primaryActionStyle,\n secondaryAction,\n secondaryActionLabel,\n secondaryActionStyle,\n}) => {\n const { fluid, description } = image\n const ChakraGatsbyImage = chakra(GatsbyImage)\n const ChakraLinkCta = chakra(LinkCta)\n return (\n \n \n \n \n {primaryAction && (\n // Custom colour prop to be changed if we make the CTA colour authorable for the block promo.\n \n {primaryActionLabel || primaryAction.title}\n \n )}\n {secondaryAction && (\n \n {secondaryActionLabel || secondaryAction.title}\n \n )}\n \n \n )\n}\n\nexport default BlockPromoTeaser\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Icon = styled.svg.attrs({\n version: '1.1',\n xmlns: 'http://www.w3.org/2000/svg',\n xmlnsXlink: 'http://www.w3.org/1999/xlink',\n})``\n\nconst Svg = styled(Icon)`\n width: 100px;\n height: 1344px;\n`\n\nexport const WaveBorder = ({ className }) => (\n \n)\n","/* eslint-disable no-nested-ternary */\nimport React from 'react'\nimport ReactPlayer from 'react-player'\nimport { chakra } from '@chakra-ui/react'\nimport { Box } from '@chakra-ui/layout'\nimport GatsbyImage from 'gatsby-image'\n\nimport RichText from '../richText'\nimport LinkCta from '../linkCta'\nimport { color } from '../../styles/colors'\n\nimport { WaveBorder } from './waveBorder'\n\nconst BlockPromoCampaign = ({\n style,\n waveBorder,\n imageAlignment,\n campaignStyleBgColour,\n campaignStyleTextColour,\n image,\n content,\n primaryAction,\n primaryActionLabel,\n primaryActionStyle,\n secondaryAction,\n secondaryActionLabel,\n secondaryActionStyle,\n}) => {\n const mediaType = image.file.contentType\n\n const textColour =\n campaignStyleTextColour && campaignStyleTextColour === 'Costa Red'\n ? color.costaRed\n : campaignStyleTextColour === 'Grey'\n ? color.greyDarker\n : color.white\n\n const ChakraGatsbyImage = chakra(GatsbyImage)\n const ChakraLinkCta = chakra(LinkCta)\n const ChakraWaveBorder = chakra(WaveBorder)\n const ChakraVideoWrapper = chakra('div', {\n position: 'relative',\n top: '0',\n bottom: '0',\n w: '100%',\n h: '100%',\n overflow: 'hidden',\n })\n return (\n \n \n {waveBorder && (\n \n \n \n )}\n \n {primaryAction && (\n \n {primaryActionLabel || primaryAction.title}\n \n )}\n {secondaryAction && (\n \n {secondaryActionLabel || secondaryAction.title}\n \n )}\n \n {mediaType.includes('image') && (\n \n )}\n {mediaType.includes('video') && (\n \n \n \n )}\n \n )\n}\n\nexport default BlockPromoCampaign\n","import React from 'react'\nimport BlockPromoStandard from './blockPromoStandard'\nimport BlockPromoTeaser from './blockPromoTeaser'\nimport BlockPromoCampaign from './blockPromoCampaign'\n\n/**\n * @description This is a wrapper for the Promo Component. It renders\n * the different Promo variations: Standard, Campaign and Teaser.\n */\nconst BlockPromo = ({ data }) => {\n const {\n style,\n waveBorder,\n standardStyleBgColour,\n campaignStyleBgColour,\n campaignStyleTextColour,\n image,\n imageAlignment = 'right',\n content,\n primaryAction,\n primaryActionLabel,\n primaryActionStyle,\n secondaryAction,\n secondaryActionLabel,\n secondaryActionStyle,\n } = data\n\n const align = imageAlignment === 'left' ? 'row-reverse' : 'initial'\n\n switch (style) {\n case 'teaser':\n return (\n \n )\n case 'campaign':\n return (\n \n )\n case 'standard':\n return (\n \n )\n default:\n return null\n }\n}\n\nexport default BlockPromo\n","import React from 'react'\nimport styled from 'styled-components'\nimport RichText from '../../richText'\nimport { color, costaText, above, costaTextBold } from '../../../styles'\n\nconst BlockRichText = ({ data: { content, title, style } }) => {\n return (\n \n {title}\n \n \n \n \n )\n}\n\nconst Container = styled.article`\n margin: 0px 2.5%;\n ${above.tablet`\n margin: 0px 6%;\n `}\n\n ${above.tabletLarge`\n margin: 0px 9%;\n `}\n \n ${above.desktopLarge`\n margin: 0px 4%;\n max-width: 1274px;\n `}\n`\n\nconst Title = styled.h2`\n color: ${color.costaRed};\n`\n\nconst Content = styled.div`\n background: ${p => p.background};\n padding: 0;\n overflow: hidden;\n font-size: 16px;\n line-height: 1.5;\n padding: 56px 2.5%;\n\n ${above.tablet`\n font-size: 18px;\n padding: 56px 5%;\n `}\n\n ${above.tabletLarge`\n padding: 56px 84px 56px 84px;\n `}\n\n ${above.desktop`\n padding: 56px 118px 56px 118px;\n `}\n\n p {\n margin: 16px 0 32px;\n padding: 0;\n\n ${above.tablet`\n margin: 18px 0 32px;\n `}\n }\n\n strong {\n ${costaTextBold}\n }\n\n a {\n ${costaText}\n color: ${color.costaRed};\n\n &:hover {\n color: ${color.lightRed};\n }\n }\n\n ul,\n ol {\n p {\n padding: 0;\n margin: 0;\n }\n }\n ul {\n padding-left: 40px;\n li {\n list-style-type: inherit;\n }\n }\n\n ol {\n padding-left: 40px;\n li {\n list-style-type: inherit;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0 0 40px;\n color: ${color.costaRed};\n\n ${above.tablet`\n margin: 0 0 29px;\n `}\n }\n\n .inline-right,\n .inline-left {\n display: block;\n width: 100%;\n margin-bottom: 27px;\n\n & > img {\n margin: 0;\n padding: 0;\n }\n\n ${above.tabletLarge`\n width: 48%;\n box-sizing: content-box;\n `}\n\n ${above.desktop`\n width: 389px;\n `}\n }\n\n .inline-right {\n ${above.tablet`\n float: right;\n margin: 0 0 1em 1.5em;\n `}\n }\n\n .inline-left {\n ${above.tablet`\n float: left;\n margin: 0 1.5em 1em 0;\n `}\n }\n`\n\nexport default BlockRichText\n","import BlockRichText from './richText'\n\nexport default BlockRichText\n","export const getMicrocopy = ({ key, tokens = {}, fallback = null, data = {} }) => {\n if (!data[key]) {\n return key\n }\n\n const value = data[key]\n\n const replacements = {}\n Object.keys(tokens).forEach(token => {\n replacements[`{${token}}`] = tokens[token]\n })\n\n if (value && Object.keys(replacements).length) {\n const re = new RegExp(Object.keys(replacements).join('|'), 'gi')\n const result = value.replace(re, matched => {\n return replacements[matched]\n })\n\n return result\n }\n\n if (value) {\n return value\n }\n\n return fallback\n}\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react'\nimport styled from 'styled-components'\nimport useWebsiteSettings from '../../utils/build-helpers/useWebsiteSettings'\nimport { above } from '../../styles'\n\nconst SocialMediaIcons = () => {\n const {\n socialMediaLink1,\n socialMediaLink1Icon,\n socialMediaLink2,\n socialMediaLink2Icon,\n socialMediaLink3,\n socialMediaLink3Icon,\n socialMediaLink4,\n socialMediaLink4Icon,\n } = useWebsiteSettings()\n\n const socialMediaLinks = [\n { link: socialMediaLink1, icon: socialMediaLink1Icon },\n { link: socialMediaLink2, icon: socialMediaLink2Icon },\n { link: socialMediaLink3, icon: socialMediaLink3Icon },\n { link: socialMediaLink4, icon: socialMediaLink4Icon },\n ]\n\n return (\n \n {socialMediaLinks.map(({ link, icon }) => {\n if (!link || !icon) {\n return null\n }\n\n return (\n \n \n \n \n \n )\n })}\n
\n )\n}\n\nconst List = styled.ul`\n ${above.tablet`\n text-align: right;\n `}\n\n ${above.tabletLarge`\n text-align: inherit;\n `}\n\n ${above.desktopLarge`\n text-align: right;\n `}\n`\n\nconst ListItem = styled.li`\n display: inline-block;\n margin: 0 25px 0 0;\n\n &:last-of-type {\n margin-right: 0;\n }\n`\n\nconst Link = styled.a`\n &:focus {\n padding: 10px 0;\n }\n`\n\nconst Icon = styled.img`\n height: 26px;\n`\n\nexport default SocialMediaIcons\n","import React from 'react'\nimport styled from 'styled-components'\nimport useMicrocopy from '@costa-coffee/gatsby-theme-cw-store-locator/src/hooks/useMicrocopy'\n\nimport useWebsiteSettings from '../../utils/build-helpers/useWebsiteSettings'\nimport { ContentfulLink } from '../../utils/link'\nimport { getMicrocopy } from '../../utils/microcopy'\nimport { color, above, costaText, costaTextBold } from '../../styles'\nimport { usePageContext } from '../../context/PageContext'\n\nimport SocialMediaLinks from '../socialMediaIcons/socialMediaIcons'\n\nconst StyledFooter = () => {\n const { locale } = usePageContext()\n const data = useMicrocopy(locale)\n const { footerLinkGroups, footerLegalLinks, enableSocialMediaIcons } = useWebsiteSettings()\n\n return (\n \n )\n}\n\nconst Footer = styled.footer`\n background: ${color.lightRed};\n color: ${color.white};\n ${costaText}\n\n line-height: 1.5;\n`\n\nFooter.Image = styled.div`\n position: relative;\n ${above.tablet`\n\n background-color: ${color.brightRed};\n\n `}\n`\n\nconst Main = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: left;\n padding: 40px 10.5%;\n max-width: 1274px;\n margin: auto;\n position: relative;\n z-index: 1;\n\n ${above.tablet`\n padding: 64px 5%;\n flex-direction: row;\n flex-wrap: wrap;\n `}\n\n ${above.tabletLarge`\n padding: 64px 4%;\n `}\n\n ${above.desktop`\n padding: 64px 83px;\n `}\n\n ${above.desktopLarge`\n max-width: 1558px;\n `}\n`\n\nMain.Container = styled.div`\n margin: 0 0 44px;\n\n :last-child {\n margin: 0;\n }\n\n ${above.tablet`\n flex: 0 0 20%;\n margin: 0 3% 0 0;\n\n :nth-of-type(n + 5) {\n margin: 0 3% 0 0;\n }\n\n :nth-of-type(6) {\n margin-right: 0;\n }\n `}\n\n ${above.tabletLarge`\n &.fourCol {\n flex: 0 0 19%;\n margin-right: 5.5%;\n }\n\n &.fiveCol {\n flex: 0 0 16.5%;\n margin-right: 2%;\n }\n\n &.sixCol {\n flex: 0 0 14%;\n margin-right: 2.5%;\n\n ul li a {\n font-size: 16px;\n ${costaText}\n line-height: 24px;\n }\n }\n `}\n`\n\nMain.Heading = styled.h6`\n ${costaTextBold}\n\n margin: 0 0 24px;\n font-size: 16px;\n line-height: 24px;\n ${above.tablet`\n margin: 0 0 40px;\n font-size: 18px;\n line-height: 28px;\n `}\n`\n\nMain.List = styled.ul`\n list-style: none;\n padding-left: 0;\n margin: 0;\n\n li {\n margin-bottom: 12px;\n\n a {\n padding: 0;\n ${costaText}\n\n color: ${color.white};\n text-decoration: none;\n\n ${above.tablet`\n font-size: 18px;\n `}\n\n :hover {\n color: ${color.greyLight};\n }\n }\n }\n li:last-child {\n margin-bottom: 0;\n }\n`\n\nconst Bottom = styled.div`\n background: ${color.costaRed};\n padding: 32px 10.5%;\n\n ${above.mobile`\n padding: 64px 10.5%;\n `}\n\n ${above.tablet`\n padding: 32px 5%;\n `}\n\n ${above.tabletLarge`\n padding: 32px 4%;\n `}\n\n ${above.desktopLarge`\n height: 80px;\n padding: 32px 80px;\n `}\n`\n\nBottom.Container = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n max-width: 1392px;\n margin: 0 auto;\n`\n\nBottom.List = styled.ul`\n margin: 0 0 28px 0;\n width: 100%;\n\n ${above.tablet`\n display: flex;\n flex-direction: row;\n `}\n\n ${above.tabletLarge`\n order: 2;\n width: auto;\n margin: 0 0 0 46px;\n `}\n\n li {\n ${above.tablet`\n margin-right: 48px;\n `}\n\n ${above.tabletLarge`\n margin-right: 30px;\n `}\n\n ${above.desktopLarge`\n margin-right: 48px;\n `}\n\n &:last-of-type {\n margin-right: 0;\n }\n }\n\n a {\n ${costaText}\n }\n`\n\nBottom.Rights = styled.p`\n width: 100%;\n margin: 0 0 28px 0;\n\n ${above.tablet`\n width: auto;\n margin-bottom: 0;\n `}\n\n ${above.tabletLarge`\n order: 1;\n width: auto;\n `}\n`\n\nBottom.Icons = styled.div`\n width: 100%;\n\n ${above.tablet`\n width: auto;\n margin: 0 0 0 48px;\n flex-grow: 1;\n `}\n\n ${above.tabletLarge`\n order: 3;\n margin: 28px 0 0 0;\n width: 100%;\n `}\n\n ${above.desktopLarge`\n order: 3;\n margin: 0 0 0 48px;\n width: auto;\n `}\n`\n\nFooter.Main = Main\nFooter.Bottom = Bottom\n\nexport default StyledFooter\n","import Footer from './footer'\n\nexport default Footer\n","import React from 'react'\nimport styled from 'styled-components'\nimport { above } from '../../../styles'\n\nexport default ({ open }) => {\n return (\n \n \n \n \n \n )\n}\n\nconst Hamburger = styled.div`\n height: 32px;\n width: 92px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: left;\n cursor: pointer;\n padding: 4px;\n transition: all 0.3s;\n\n .line {\n height: 3px;\n width: 22px;\n background: white;\n transition: all 0.2s ease;\n }\n\n .top {\n transform: ${p => (p.open ? 'rotate(135deg)' : 'none')};\n /* transform-origin: top left; */\n margin-bottom: ${p => (p.open ? '-3px' : '3px')};\n }\n\n .middle {\n opacity: ${p => (p.open ? 0 : 1)};\n transform: ${p => (p.open ? 'translateX(-16px)' : 'none')};\n }\n\n .bottom {\n transform: ${p => (p.open ? 'rotate(-135deg)' : 'none')};\n /* transform-origin: top left; */\n margin-top: ${p => (p.open ? '-3px' : '3px')};\n }\n\n ${above.tabletLarge`\n display: none;\n `}\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport Img from 'gatsby-image'\n\nimport { above } from '../../../styles'\nimport useWebsiteSettings from '../../../utils/build-helpers/useWebsiteSettings'\n\nexport default ({ alt }) => {\n const { logo } = useWebsiteSettings()\n\n if (!logo) {\n return logo
\n }\n\n return \n}\n\nconst Logo = styled(Img)`\n width: 78px;\n max-height: 35px;\n\n img {\n object-fit: contain !important;\n }\n\n ${above.desktop`\n width: 205px;\n max-height: 84px;\n `};\n`\n","import { useStaticQuery, graphql } from 'gatsby'\n\nconst useLocaleList = () => {\n const { allContentfulLocale } = useStaticQuery(graphql`\n {\n allContentfulLocale {\n nodes {\n code\n default\n }\n }\n }\n `)\n\n return allContentfulLocale.nodes\n}\n\nexport default useLocaleList\n","import React, { useState, useLayoutEffect, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Link } from 'gatsby'\nimport useMicrocopy from '@costa-coffee/gatsby-theme-cw-store-locator/src/hooks/useMicrocopy'\n\nimport { color, above, costaTextBold, costaText } from '../../styles'\nimport { getMicrocopy } from '../../utils/microcopy'\nimport { usePageContext } from '../../context/PageContext'\nimport useLocaleList from '../../helpers/useLocaleList'\n\nconst defaultLocale = process.env.GATSBY_DEFAULT_LOCALE\n\nconst extractLocaleFromUrl = location => {\n return location.pathname.match(/\\/[a-z]{2}/) ? location.pathname.match(/\\/[a-z]{2}/)[0].replace(/\\//g, '') : defaultLocale\n}\n\n// todo: update this with the new link component\nconst LanguageSelector = ({ location }) => {\n const { locale, intl } = usePageContext()\n const locales = useLocaleList()\n const selectorArray = Object.entries(locales)\n const [active, setActive] = useState(false)\n const selecterRef = useRef(null)\n const handleClickOutside = event => {\n if (selecterRef.current && !selecterRef.current.contains(event.target)) {\n if (active === true) setActive(!active)\n }\n }\n const onClick = () => setActive(!active)\n useLayoutEffect(() => {\n document.addEventListener('mousedown', handleClickOutside)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [active])\n\n const selectedItem = selectorArray.find(element => {\n return element[1].code.substring(0, 2) === extractLocaleFromUrl(location)\n })\n const selectedItemIndex = selectorArray.findIndex(element => {\n return element[1].code.substring(0, 2) === extractLocaleFromUrl(location)\n })\n if (selectedItem !== undefined) {\n selectorArray.splice(selectedItemIndex, 1)\n selectorArray.unshift(selectedItem)\n }\n\n const data = useMicrocopy(locale)\n\n return (\n onClick()}>\n {getMicrocopy({ key: 'languageSelector.Title', data })}\n \n {selectorArray.map((translation, index) => (\n \n {\n // disable enter key on the top item\n if (e.key === 'Enter' && index === 0) {\n e.preventDefault()\n setActive(!active)\n }\n }}\n to={intl[translation[1].code] === '/' ? '/' : `/${intl[translation[1].code]}${location.search}`}\n >\n {translation[1].code.substring(0, 2).toUpperCase()}\n \n {index === 0 && }\n \n ))}\n \n \n )\n}\n\nconst DropdownContainer = styled.div`\n flex-direction: column;\n display: flex;\n flex-wrap: wrap;\n right: 0;\n padding: 24px 16px 12px 16px;\n z-index: 1;\n line-height: 1.15;\n user-select: none;\n\n ${above.tabletLarge`\n position: absolute;\n padding: 12px 16px;\n cursor: pointer;\n `}\n`\n\nconst LocalesContainer = styled.ul`\n display: flex;\n margin: 12px 0;\n width: 100%;\n justify-content: center;\n\n ${above.tabletLarge`\n display: block;\n flex-direction: column;\n margin: 16px 0 0 0;\n`};\n\n ${above.desktop`\n margin: 12px 0;\n`};\n`\n\nconst Title = styled.h3`\n ${costaTextBold};\n color: ${color.white};\n text-align: center;\n margin: 0;\n width: 100%;\n\n ${above.tabletLarge`\n display: none;\n `};\n`\n\nconst ListItem = styled.li`\n color: ${color.white};\n margin: 0 16px;\n ${costaTextBold};\n font-size: 16px;\n align-items: center;\n width: 80px;\n text-align: center;\n display: flex;\n\n .locale-link {\n ${costaText};\n\n ${above.tabletLarge`\n font-size: 28px;\n ${costaTextBold};\n `}\n }\n\n ${above.tabletLarge`\n display: none;\n ${props =>\n props.active &&\n css`\n display: flex;\n background-color: ${color.lightRed};\n `}\n \n `}\n\n &:last-child {\n span {\n visibility: hidden;\n }\n }\n\n &:first-child {\n ${above.tabletLarge`\n display: flex; \n `}\n }\n\n ${props =>\n props.selected &&\n css`\n display: flex;\n a {\n pointer-events: none;\n ${costaTextBold};\n }\n `}\n\n ${above.desktop`\n font-size: 30px;\n margin: 0;\n `}\n`\n\nconst StyledLink = styled(Link)`\n padding: 8px 8px;\n width: 100%;\n text-align: left;\n\n &.selected {\n ${costaTextBold}\n }\n`\n\nconst Arrow = styled.span`\n display: none;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #ffffff;\n position: relative;\n right: 0;\n transition: transform 0.3s;\n transform: rotate(180deg);\n margin-right: 12px;\n ${props =>\n props.active &&\n css`\n transform: rotate(0deg);\n `}\n ${above.tabletLarge`\n display: inline;\n `}\n`\n\nexport default LanguageSelector\n","import React from 'react'\nimport styled from 'styled-components'\nimport useWebsiteSettings from '../../../utils/build-helpers/useWebsiteSettings'\nimport { ContentfulLink } from '../../../utils/link'\nimport LanguageSelector from '../../languageSelector/languageSelector'\n// import avatarIcon from '../../../assets/icons/avatar.svg'\nimport { usePageContext } from '../../../context/PageContext'\nimport { above, costaTextBold } from '../../../styles'\n// import { showCorrectAccountOptions } from '../../../helpers/loginHelper'\n\nexport default ({ setIsMenuOpen, location }) => {\n const { intl, locale } = usePageContext()\n const { mainNavigation } = useWebsiteSettings()\n const languages = Object.entries(intl).map(([key]) => key)\n\n // const checkActiveState = (link, path) => {\n // const isJapanSite = process.env.GATSBY_BUDDY_PIPELINE === 'japan'\n\n // if (link.htmlTarget || isJapanSite) {\n // return false\n // }\n\n // if (link.internalLink && path.includes(encodeURIComponent(link.internalLink.slug))) {\n // return true\n // }\n\n // if (\n // link.internalLink?.parentAssembly &&\n // path.includes(encodeURIComponent(link.internalLink?.parentAssembly?.slug))\n // ) {\n // return true\n // }\n\n // if (link.externalLink && path.includes(`/${link.externalLink.split('/')[3]}/`)) {\n // return true\n // }\n\n // return false\n // }\n\n const isDefaultLocale = locale === process.env.GATSBY_DEFAULT_LOCALE\n const pageSlug = location?.pathname // remove slash prefix and locale\n\n const { allPages } = usePageContext()\n\n return (\n \n \n {mainNavigation?.links?.map(navItem => {\n let linkSlug = allPages[navItem?.content?.id] || ''\n linkSlug = linkSlug[0] === '/' ? linkSlug.substring(1) : linkSlug // remove slash prefixes\n linkSlug = linkSlug.split('/')[isDefaultLocale ? 0 : 1] // remove locale\n\n return (\n setIsMenuOpen(false)}\n onKeyPress={() => setIsMenuOpen(false)}\n >\n {navItem.title}\n \n )\n })}\n {languages.length > 1 && (\n \n \n \n )}\n
\n {/* {process.env.GATSBY_UK_SITE === 'true' && (\n \n \n {typeof document !== `undefined` && showCorrectAccountOptions(document)}\n \n )} */}\n \n )\n}\n\nconst LanguageSelectorContainer = styled.div`\n display: block;\n background-color: #bd0d43;\n margin: 80px 0;\n\n li {\n width: auto !important;\n margin: 0 !important;\n }\n\n ${above.tabletLarge`\n display: none;\n `}\n`\n\nconst MainNav = styled.nav`\n display: none;\n ${above.tabletLarge`\n \n display: block;\n `}\n width: 100%;\n line-height: 1.15;\n`\n\nconst Links = styled.li`\n display: inline-block;\n color: white;\n margin: 0 16px;\n ${costaTextBold};\n font-size: 16px;\n\n &:last-child {\n margin-right: 0;\n }\n\n ${above.desktop`\n font-size: 20px;\n `}\n > a {\n border-bottom: ${props => props.showActive && '2px solid white'};\n }\n`\n\n// const AccountManagement = styled.div`\n// background-color: ${color.lightRed};\n// position: absolute;\n// bottom: 74px;\n// left: 0px;\n// width: 100%;\n// padding: 38px 0px;\n// background: ${color.lightRed};\n// display: none;\n// &.menuOpen {\n// display: block;\n// }\n// ${above.tabletLarge`\n// display:none;\n// `}\n// > a {\n// font-size: 25px;\n// ${costaTextBold};\n// color: ${color.white};\n// }\n// > a:nth-child(3n) {\n// display: block;\n// padding-left: 64px;\n// padding-top: 15px;\n// }\n// `\n\n// const AvatarIcon = styled.img`\n// display: inline-block;\n// ${above.tabletLarge`\n// display:none;\n// `}\n// overflow: hidden;\n// margin-left: 36px;\n// margin-right: 11px;\n// width: 17px;\n// height: 21px;\n// `\n","export default __webpack_public_path__ + \"static/waffle2-c338116ccb1be7ce5664d01546a5dc4c.svg\";","/* eslint-disable no-undef */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-unneeded-ternary */\n\nimport React, { useState, useEffect } from 'react'\nimport styled, { css } from 'styled-components'\nimport ReactPlayer from 'react-player'\nimport { color, above, headingOneWave } from '../../../styles'\nimport RichText from '../../richText'\n// import richTextRenderer from '../../../utils/richTextRenderer'\n\nexport default ({\n content: {\n mobileBackground,\n tabletBackground,\n background,\n megaHero,\n content,\n heroTextColour,\n mobileTextAlignment,\n desktopTextAlignment,\n mobileGradient,\n },\n}) => {\n let mobileImage\n let tabletImage\n let image\n if (!background?.file?.contentType.includes('video')) {\n mobileImage = mobileBackground ? mobileBackground.fluid?.src : background?.fluid?.src\n tabletImage = tabletBackground ? tabletBackground.fluid?.src : background?.fluid?.src\n image = background?.fluid?.src\n }\n\n const mobileGradientEnabled = mobileGradient === 'True'\n const [isMobile, setisMobile] = useState(false)\n const videoSrc = isMobile ? mobileBackground?.file?.url : background?.file?.url\n const hideInMobile = mobileBackground ? false : true\n const selectedTextColour = heroTextColour === 'Costa Red' ? color.costaRed : color.white\n\n const HeroContent = () => (\n <>\n \n \n \n \n \n \n {mobileGradientEnabled && }\n \n )\n\n if (background?.file?.contentType.includes('video')) {\n useEffect(() => {\n function updateWidth() {\n setisMobile(window.innerWidth < 768)\n }\n window.addEventListener('resize', updateWidth)\n updateWidth()\n return () => window.removeEventListener('resize', updateWidth)\n }, [isMobile])\n\n return (\n \n \n \n \n )\n }\n\n return (\n \n \n \n )\n}\n\nconst Hero = styled.div`\n width: 100%;\n height: ${p => (p.hideInMobile ? '80px' : '448px')};\n background-size: cover;\n background-position: center;\n background-color: ${p => (p.hideInMobile ? `${color.costaRed}` : `transparent`)};\n background-image: ${p => (p.hideInMobile ? `none` : `url(${p.mobileImage})`)};\n\n ${above.tablet`\n background-image: url(${p => p.tabletImage});\n height: ${p => (p.megaHero ? 800 : 384)}px;\n `}\n\n ${above.tabletLarge`\n background-image: url(${p => p.image});\n height: ${p => (p.megaHero ? 584 : 376)}px;\n `}\n\n ${above.desktop`\n height: ${p => (p.megaHero ? 680 : 464)}px;\n `}\n`\nconst VideoHero = styled.div`\n width: 100%;\n height: 448px;\n\n ${above.tablet`\n background-color: rgba(0, 0, 0, 0.15);\n height: ${p => (p.megaHero ? 800 : 384)}px;\n `}\n\n ${above.tabletLarge`\n background-color: transparent;\n height: ${p => (p.megaHero ? 584 : 376)}px;\n `}\n\n ${above.desktop`\n height: ${p => (p.megaHero ? 680 : 464)}px;\n `}\n`\n\nconst Video = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n height: 448px !important;\n width: 100%;\n -webkit-transform-style: preserve-3d;\n overflow: hidden;\n\n ${above.tablet`\n height: ${p => (p.megaHero ? 800 : 384)}px !important;\n `}\n\n ${above.tabletLarge`\n height: ${p => (p.megaHero ? 584 : 376)}px !important;\n `}\n\n ${above.desktop`\n height: ${p => (p.megaHero ? 680 : 464)}px !important;\n `}\n\n video {\n position: absolute;\n z-index: -1;\n top: 50%;\n left: 50%;\n height: auto !important;\n width: 100% !important;\n min-width: 100%;\n min-height: 100%;\n transform: translate(-50%, -50%);\n object-fit: cover;\n\n ${above.tablet`\n transform: ${p => (p.megaHero ? 'translate(-67%, -50%)' : 'translate(-62%, -50%)')};\n width: auto !important;\n `}\n\n ${above.tabletLarge`\n transform: ${p => (p.megaHero ? 'translate(-58%, -50%)' : 'translate(-60%, -50%)')};\n `}\n\n ${above.desktop`\n transform: ${p => (p.megaHero ? 'translate(-54%, -50%)' : 'translate(-50%, -50%)')};\n `}\n\n @media (min-width: 1480px) {\n transform: translate(-50%, -50%);\n }\n }\n`\n\nconst Gradient = styled.div`\n height: 66px;\n width: 100%;\n position: absolute;\n background: ${p => (p.hideInMobile ? 'none' : `linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7))`)};\n\n ${above.tablet`\n background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));\n height: 300px;\n `}\n\n ${above.tabletLarge`\n height: 192px;\n `}\n`\n\nconst BottomGradient = styled.div`\n height: 266px;\n width: 100%;\n position: relative;\n bottom: 266px;\n background: ${p => (p.hideInMobile ? 'none' : `linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.0))`)};\n\n ${above.tablet`\n display: none;\n `}\n`\n\nconst Wrapper = styled.div`\n display: ${p => (p.hideInMobile ? `none` : `flex`)};\n margin: 0 auto;\n padding: 108px 20px 40px 20px;\n max-width: 1600px;\n background: ${p => (p.mobileGradient === 'True' ? 'linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25))' : '')};\n ${above.mobile`\n background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n `}\n\n ${above.tablet`\n display: flex;\n padding: 60px 0 0 0;\n `}\n\n ${above.desktop`\n padding: 150px 0 0 0;\n `}\n`\n\nconst Content = styled.div`\n ${headingOneWave};\n color: ${color.white};\n text-align: center;\n height: 300px;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: ${p => (p.mobileTextAlignment === 'Top' ? 'flex-start' : 'flex-end')};\n align-items: center;\n z-index: 1;\n position: relative;\n margin: 0 auto;\n\n h1,\n h2,\n h3 {\n text-transform: uppercase;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${p => (p.heroTextColour === color.white ? color.white : color.costaRed)};\n max-width: 488px;\n margin-top: 0;\n margin-bottom: 0;\n ${headingOneWave}\n text-transform: uppercase;\n\n ${above.tablet`\n max-width: 600px;\n `}\n }\n\n > div {\n justify-content: center;\n }\n\n p {\n color: ${p => (p.heroTextColour === color.white ? color.white : color.costaRed)};\n max-width: 395px;\n padding-top: 26px;\n margin-bottom: 0;\n margin-top: 0;\n\n ${above.tablet`\n padding-top: 36px;\n `}\n\n ${above.tabletLarge`\n max-width: 446px;\n `}\n }\n\n ${above.tablet`\n height: 310px;\n max-width: 600px;\n `}\n\n ${above.desktop`\n ${p => (p.desktopTextAlignment === 'Center' ? '' : 'margin: 0 0 0 120px;')};\n justify-content: center;\n `}\n\n ${p =>\n p.megaHero &&\n css`\n ${above.tablet`\n height: 700px;\n max-width: 600px;\n `}\n ${above.tabletLarge`\n height: 500px;\n `}\n ${above.desktop`\n height: 500px;\n max-width: 566px;\n `}\n `}\n`\n","import React, { useState } from 'react'\nimport styled, { css } from 'styled-components'\n// import BackgroundImage from 'gatsby-background-image'\n\nimport Hamburger from './hamburger/hamburger'\nimport Logo from './logo/logo'\nimport MainNav from './mainNav/mainNav'\n// import IconsBar from './iconsBar/iconsBar'\n// import InternationalIconsBar from '../International/IconsBar/iconsBar'\nimport waffle from '../../assets/backgrounds/waffle2.svg'\nimport useWebsiteSettings from '../../utils/build-helpers/useWebsiteSettings'\nimport { color, above } from '../../styles'\n// import Hero from './hero/hero'\nimport Hero from './hero/hero'\nimport LanguageSelector from '../languageSelector/languageSelector'\nimport { ContentfulLink } from '../../utils/link'\nimport { usePageContext } from '../../context/PageContext'\n// import { localeFormatter } from '../../helpers/localeFormatter/localeFormatter'\n\n// TODO: remove hardcoded\n// const defaultLocale = process.env.GATSBY_DEFAULT_LOCALE\n// const country = process.env.GATSBY_BUDDY_PIPELINE\nconst headerIcons = process.env.GATSBY_HEADER_ICONS || 'false'\n\nconst Header = ({ hero, location }) => {\n const { intl } = usePageContext()\n const languages = Object.entries(intl).map(([key]) => key)\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n const { mobileMenuAriaLabel, logoLink, logoAriaLabel, mainNavigation } = useWebsiteSettings()\n\n return (\n <>\n \n \n {mainNavigation?.links && (\n setIsMenuOpen(!isMenuOpen)}\n onKeyPress={() => setIsMenuOpen(!isMenuOpen)}\n >\n \n \n )}\n setIsMenuOpen(false)}\n hasMainNavigation={mainNavigation?.links?.length > 0}\n >\n \n \n \n {languages.length > 1 && (\n \n \n \n )}\n \n \n {hero && }\n \n )\n}\n\nconst LanguageSelectorContainer = styled.div`\n display: none;\n position: relative;\n right: 0;\n top: 0;\n color: white;\n\n ${above.tabletLarge`\n display: block;\n top: -45px;\n `}\n`\n\nconst openNav = css`\n position: fixed;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 100;\n background-color: ${color.costaRed} !important;\n background-image: url(${waffle}) !important;\n align-items: inherit;\n transform: translateX(0%);\n transition: transform 250ms ease-in-out;\n\n nav {\n display: block;\n position: fixed;\n left: 0;\n width: 100%;\n top: 74px;\n height: 100%;\n transform: translateX(0%);\n transition: transform 250ms ease-in-out;\n\n li {\n line-height: 38px;\n font-size: 25px;\n padding: 4px 4px;\n width: 247px;\n margin-left: 36px;\n text-align: left;\n box-sizing: content-box;\n }\n }\n`\n\nconst Wrapper = styled.div`\n margin: 0 auto;\n padding: 12px;\n height: 80px;\n z-index: 1;\n width: 100%;\n\n ${p =>\n (p.withHero &&\n css`\n position: absolute;\n `) ||\n css`\n background: ${color.costaRed};\n `}\n\n ${above.desktop`\n padding: 34px 0;\n height: 148px;\n `}\n\n &.menuOpen {\n ${openNav};\n }\n`\n\nconst MaxWidth = styled.div`\n max-width: 1392px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 auto;\n\n ${() =>\n headerIcons !== 'true' &&\n css`\n margin: 12px 0;\n\n ${above.desktop`\n margin: 0 auto;\n `}\n `};\n`\n\nconst HomeLink = styled(ContentfulLink)`\n color: ${color.white};\n text-decoration: none;\n ${p =>\n headerIcons !== 'true' &&\n css`\n margin: 0 auto;\n padding-right: ${p.hasMainNavigation ? `92px` : `0`};\n\n ${above.tabletLarge`\n padding-right: 0;\n `}\n `}\n\n ${above.tabletLarge`\n margin: 3px 24px 0 40px;\n `}\n`\n\nconst MobileMenu = styled.div`\n display: block;\n ${above.tabletLarge`\n display: none;\n `}\n`\n\nexport default Header\n","import Header from './header'\n\nexport default Header\n","import React from 'react'\nimport styled from 'styled-components'\nimport { ContentfulLink } from '../../utils/link'\nimport { usePageContext } from '../../context/PageContext'\nimport { above, costaTextBold } from '../../styles'\n\nconst SecondaryNav = ({ secondaryNavigation: { links }, location }) => {\n const { allPages } = usePageContext()\n return (\n \n {links?.map(navItem => {\n return (\n \n {navItem.title}\n \n )\n })}\n \n )\n}\n\nconst Wrapper = styled.ul`\n height: 60px;\n ${above.tablet`\n height: 80px;\n `}\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow: auto;\n background-color: #b51144;\n ::before,\n ::after {\n content: '';\n margin: auto;\n min-width: 13px;\n\n ${above.tablet`\n min-width: 10px;\n `}\n }\n`\n\nconst StyledLink = styled.li`\n ${costaTextBold}\n font-size: 16px;\n text-decoration: none;\n flex: 0 0 auto;\n color: white;\n line-height: 30px;\n padding: 12px 16px 15px;\n ${above.tablet`\n font-size: 20px;\n line-height: 40px;\n padding: 15px 28px 18px;\n `}\n position: relative;\n ::after {\n display: ${props => props.showActive};\n content: '';\n position: absolute;\n left: 15px;\n bottom: 14px;\n width: calc(100% - 30px); // to make border-bottom 2px longer\n border-bottom: 2px solid white;\n ${above.tablet`\n left: 27px;\n bottom: 29px;\n width: calc(100% - 54px); \n `}\n }\n`\n\nexport default SecondaryNav\n\n// const SecondaryNavigation = ({ secondaryNavigation: { links } }) => {\n// return (\n// \n// {links &&\n// links.map(link => {\n// return (\n// \n// \n// \n// )\n// })}\n// \n// )\n// }\n\n// export default SecondaryNavigation\n","import SecondaryNavigation from './secondaryNavigation'\n\nexport default SecondaryNavigation\n","/*! get-video-id v3.6.4 | @license MIT © Michael Wuergler | https://github.com/radiovisual/get-video-id */\n\n/**\n * Strip away any remaining parameters following `?` or `/` or '&' for YouTube shortcode strings.\n *\n * @note this function is not meant to work with url strings containing a protocol like https://\n * @param {String} shortcodeString - the parameter string\n * @returns {String}\n */\nfunction stripParameters(shortcodeString) {\n // Split parameters or split folder separator\n if (shortcodeString.includes('?')) {\n shortcodeString = shortcodeString.split('?')[0];\n }\n\n if (shortcodeString.includes('/')) {\n shortcodeString = shortcodeString.split('/')[0];\n }\n\n if (shortcodeString.includes('&')) {\n shortcodeString = shortcodeString.split('&')[0];\n }\n\n return shortcodeString;\n}\n/**\n * Get the Youtube Video id.\n * @param {string} youtubeStr - the url from which you want to extract the id\n * @returns {string|undefined}\n */\n\n\nfunction youtube(youtubeString) {\n var string_ = youtubeString; // Remove time hash at the end of the string\n\n string_ = string_.replace(/#t=.*$/, ''); // Strip the leading protocol\n\n string_ = string_.replace(/^https?:\\/\\//, ''); // Shortcode\n\n var shortcode = /youtube:\\/\\/|youtu\\.be\\/|y2u\\.be\\//g;\n\n if (shortcode.test(string_)) {\n var shortcodeid = string_.split(shortcode)[1];\n return stripParameters(shortcodeid);\n } // Shorts\n\n\n var shortsUrl = /\\/shorts\\//g;\n\n if (shortsUrl.test(string_)) {\n return stripParameters(string_.split(shortsUrl)[1]);\n } // V= or vi=\n\n\n var parameterv = /v=|vi=/g;\n\n if (parameterv.test(string_)) {\n var array = string_.split(parameterv);\n return stripParameters(array[1].split('&')[0]);\n } // /v/ or /vi/ or /watch/\n\n\n var inlinev = /\\/v\\/|\\/vi\\/|\\/watch\\//g;\n\n if (inlinev.test(string_)) {\n var inlineid = string_.split(inlinev)[1];\n return stripParameters(inlineid);\n } // Format an_webp\n\n\n var parameterwebp = /\\/an_webp\\//g;\n\n if (parameterwebp.test(string_)) {\n var webp = string_.split(parameterwebp)[1];\n return stripParameters(webp);\n } // /e/\n\n\n var eformat = /\\/e\\//g;\n\n if (eformat.test(string_)) {\n var estring = string_.split(eformat)[1];\n return stripParameters(estring);\n } // Embed\n\n\n var embedreg = /\\/embed\\//g;\n\n if (embedreg.test(string_)) {\n var embedid = string_.split(embedreg)[1];\n return stripParameters(embedid);\n } // ignore /user/username pattern\n\n\n var usernamereg = /\\/user\\/([a-zA-Z\\d]*)$/g;\n\n if (usernamereg.test(string_)) {\n return undefined;\n } // User\n\n\n var userreg = /\\/user\\/(?!.*videos)/g;\n\n if (userreg.test(string_)) {\n var elements = string_.split('/');\n return stripParameters(elements.pop());\n } // Attribution_link\n\n\n var attrreg = /\\/attribution_link\\?.*v%3D([^%&]*)(%26|&|$)/;\n\n if (attrreg.test(string_)) {\n return stripParameters(string_.match(attrreg)[1]);\n }\n\n return undefined;\n}\n\nfunction _slicedToArray(arr, i) {\n return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"];\n\n if (_i == null) return;\n var _arr = [];\n var _n = true;\n var _d = false;\n\n var _s, _e;\n\n try {\n for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n}\n\nfunction _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n/**\n * Get the vimeo id.\n *\n * @param {String} vimeoString the url from which you want to extract the id\n * @returns {String|undefined}\n */\n\n\nfunction vimeo(vimeoString) {\n var string_ = vimeoString;\n\n if (string_.includes('#')) {\n var _string_$split = string_.split('#');\n\n var _string_$split2 = _slicedToArray(_string_$split, 1);\n\n string_ = _string_$split2[0];\n }\n\n if (string_.includes('?') && !string_.includes('clip_id=')) {\n var _string_$split3 = string_.split('?');\n\n var _string_$split4 = _slicedToArray(_string_$split3, 1);\n\n string_ = _string_$split4[0];\n }\n\n var id;\n var array;\n var event = /https?:\\/\\/vimeo\\.com\\/event\\/(\\d+)$/;\n var eventMatches = event.exec(string_);\n\n if (eventMatches && eventMatches[1]) {\n return eventMatches[1];\n }\n\n var primary = /https?:\\/\\/vimeo\\.com\\/(\\d+)/;\n var matches = primary.exec(string_);\n\n if (matches && matches[1]) {\n return matches[1];\n }\n\n var vimeoPipe = ['https?://player.vimeo.com/video/[0-9]+$', 'https?://vimeo.com/channels', 'groups', 'album'].join('|');\n var vimeoRegex = new RegExp(vimeoPipe, 'gim');\n\n if (vimeoRegex.test(string_)) {\n array = string_.split('/');\n\n if (array && array.length > 0) {\n id = array.pop();\n }\n } else if (/clip_id=/gim.test(string_)) {\n array = string_.split('clip_id=');\n\n if (array && array.length > 0) {\n var _array$1$split = array[1].split('&');\n\n var _array$1$split2 = _slicedToArray(_array$1$split, 1);\n\n id = _array$1$split2[0];\n }\n }\n\n return id;\n}\n/**\n * Get the vine id.\n * @param {string} string_ - the url from which you want to extract the id\n * @returns {string|undefined}\n */\n\n\nfunction vine(string_) {\n var regex = /https:\\/\\/vine\\.co\\/v\\/([a-zA-Z\\d]*)\\/?/;\n var matches = regex.exec(string_);\n\n if (matches && matches.length > 1) {\n return matches[1];\n }\n\n return undefined;\n}\n/**\n * Get the VideoPress id.\n * @param {string} urlString - the url from which you want to extract the id\n * @returns {string|undefined}\n */\n\n\nfunction videopress(urlString) {\n var idRegex;\n\n if (urlString.includes('embed')) {\n idRegex = /embed\\/(\\w{8})/;\n return urlString.match(idRegex)[1];\n }\n\n idRegex = /\\/v\\/(\\w{8})/;\n var matches = urlString.match(idRegex);\n\n if (matches && matches.length > 0) {\n return matches[1];\n }\n\n return undefined;\n}\n/**\n * Get the Microsoft Stream id.\n * @param {string} urlString - the url from which you want to extract the id\n * @returns {string|undefined}\n */\n\n\nfunction microsoftStream(urlString) {\n var regex = urlString.includes('embed') ? /https:\\/\\/web\\.microsoftstream\\.com\\/embed\\/video\\/([a-zA-Z\\d-]*)\\/?/ : /https:\\/\\/web\\.microsoftstream\\.com\\/video\\/([a-zA-Z\\d-]*)\\/?/;\n var matches = regex.exec(urlString);\n\n if (matches && matches.length > 1) {\n return matches[1];\n }\n\n return undefined;\n}\n/**\n * Get the tiktok id.\n * @param {string} urlString - the url from which you want to extract the id\n * @returns {string|undefined}\n */\n\n\nfunction tiktok(urlString) {\n // Parse basic url and embeds\n var basicReg = /tiktok\\.com(.*)\\/video\\/(\\d+)/gm;\n var basicParsed = basicReg.exec(urlString);\n\n if (basicParsed && basicParsed.length > 2) {\n return basicParsed[2];\n }\n\n return undefined;\n}\n/**\n * Get the dailymotion id.\n * @param {string} urlString - the url from which you want to extract the id\n * @returns {string|undefined}\n */\n\n\nfunction dailymotion(urlString) {\n // Parse basic url and embeds\n var basicReg = /dailymotion\\.com(.*)(video)\\/([a-zA-Z\\d]+)/gm;\n var basicParsed = basicReg.exec(urlString);\n\n if (basicParsed) {\n return basicParsed[3];\n } // Parse shortlink\n\n\n var shortRegex = /dai\\.ly\\/([a-zA-Z\\d]+)/gm;\n var shortParsed = shortRegex.exec(urlString);\n\n if (shortParsed && shortParsed.length > 1) {\n return shortParsed[1];\n } // Dynamic link\n\n\n var dynamicRegex = /dailymotion\\.com(.*)video=([a-zA-Z\\d]+)/gm;\n var dynamicParsed = dynamicRegex.exec(urlString);\n\n if (dynamicParsed && dynamicParsed.length > 2) {\n return dynamicParsed[2];\n }\n\n return undefined;\n}\n/**\n * Get the value assigned to a \"src\" attribute in a string, or undefined.\n * @param {String} input\n * @returns {String|undefined}\n */\n\n\nfunction getSrc(input) {\n if (typeof input !== 'string') {\n throw new TypeError('getSrc expected a string');\n }\n\n var srcRegEx = /src=\"(.*?)\"/gm;\n var matches = srcRegEx.exec(input);\n\n if (matches && matches.length >= 2) {\n return matches[1];\n }\n\n return undefined;\n}\n/**\n * Get the id and service from a video url.\n * @param {String} urlString - the url from which you want to extract the id\n * @returns {Object}\n */\n\n\nfunction getVideoId(urlString) {\n if (typeof urlString !== 'string') {\n throw new TypeError('get-video-id expects a string');\n }\n\n var string_ = urlString;\n\n if (/