\n );\n};\n\nLoading.defaultProps = {\n className: undefined,\n errorText: undefined,\n errorButtonText: undefined,\n onErrorButtonClick: undefined,\n};\n\nLoading.propTypes = {\n className: PropTypes.string,\n errorText: PropTypes.string,\n errorButtonText: PropTypes.node,\n onErrorButtonClick: PropTypes.func,\n loading: PropTypes.bool.isRequired,\n error: PropTypes.bool.isRequired,\n};\n\nexport default Loading;\n","import { createContext as createContext$1, useMemo, createElement, useContext } from 'react';\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\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 return target;\n}\nvar _excluded = [\"children\"];\n/** @deprecated */\n\nfunction createNamedContext(name, defaultValue) {\n var Ctx = /*#__PURE__*/createContext$1(defaultValue);\n if (process.env.NODE_ENV !== \"production\") {\n Ctx.displayName = name;\n }\n return Ctx;\n} ////////////////////////////////////////////////////////////////////////////////\n\nfunction createContext(rootName, defaultContext) {\n var Ctx = /*#__PURE__*/createContext$1(defaultContext);\n function Provider(props) {\n var children = props.children,\n context = _objectWithoutPropertiesLoose(props, _excluded);\n var value = useMemo(function () {\n return context;\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n Object.values(context));\n return /*#__PURE__*/createElement(Ctx.Provider, {\n value: value\n }, children);\n }\n function useContext$1(childName) {\n var context = useContext(Ctx);\n if (context) {\n return context;\n }\n if (defaultContext) {\n return defaultContext;\n }\n throw Error(childName + \" must be rendered inside of a \" + rootName + \" component.\");\n }\n if (process.env.NODE_ENV !== \"production\") {\n Ctx.displayName = rootName + \"Context\";\n Provider.displayName = rootName + \"Provider\";\n }\n return [Provider, useContext$1];\n}\nexport { createContext, createNamedContext };","/**\n * Joins strings to format IDs for compound components.\n *\n * @param args\n */\nfunction makeId() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n return args.filter(function (val) {\n return val != null;\n }).join(\"--\");\n}\nexport { makeId };","function noop() {}\nexport { noop };","import { useCallback } from 'react';\nimport { isFunction } from '../../type-check/dist/reach-utils-type-check.esm.js';\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n return arr2;\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}\nfunction _createForOfIteratorHelperLoose(o, allowArrayLike) {\n var it;\n if (typeof Symbol === \"undefined\" || o[Symbol.iterator] == null) {\n if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") {\n if (it) o = it;\n var i = 0;\n return function () {\n if (i >= o.length) return {\n done: true\n };\n return {\n done: false,\n value: o[i++]\n };\n };\n }\n throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n it = o[Symbol.iterator]();\n return it.next.bind(it);\n}\n\n/**\n * Passes or assigns an arbitrary value to a ref function or object.\n *\n * @param ref\n * @param value\n */\nfunction assignRef(ref, value) {\n if (ref == null) return;\n if (isFunction(ref)) {\n ref(value);\n } else {\n try {\n ref.current = value;\n } catch (error) {\n throw new Error(\"Cannot assign value \\\"\" + value + \"\\\" to ref \\\"\" + ref + \"\\\"\");\n }\n }\n}\n/**\n * Passes or assigns a value to multiple refs (typically a DOM node). Useful for\n * dealing with components that need an explicit ref for DOM calculations but\n * also forwards refs assigned by an app.\n *\n * @param refs Refs to fork\n */\n\nfunction useComposedRefs() {\n for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {\n refs[_key] = arguments[_key];\n }\n return useCallback(function (node) {\n for (var _iterator = _createForOfIteratorHelperLoose(refs), _step; !(_step = _iterator()).done;) {\n var ref = _step.value;\n assignRef(ref, node);\n } // eslint-disable-next-line react-hooks/exhaustive-deps\n }, refs);\n}\nexport { assignRef, useComposedRefs };","/**\n * Checks whether or not a value is a boolean.\n *\n * @param value\n */\nfunction isBoolean(value) {\n return typeof value === \"boolean\";\n}\n/**\n * Checks whether or not a value is a function.\n *\n * @param value\n */\n\nfunction isFunction(value) {\n // eslint-disable-next-line eqeqeq\n return !!(value && {}.toString.call(value) == \"[object Function]\");\n}\n/**\n * Checks whether or not a value is a number.\n *\n * @param value\n */\n\nfunction isNumber(value) {\n return typeof value === \"number\" && !isNaN(value);\n}\n/**\n * Checks whether or not a value is a string.\n *\n * @param value\n */\n\nfunction isString(value) {\n return typeof value === \"string\";\n}\nexport { isBoolean, isFunction, isNumber, isString };","/**\n * Wraps a lib-defined event handler and a user-defined event handler, returning\n * a single handler that allows a user to prevent lib-defined handlers from\n * firing.\n *\n * @param theirHandler User-supplied event handler\n * @param ourHandler Library-supplied event handler\n */\nfunction composeEventHandlers(theirHandler, ourHandler) {\n return function (event) {\n theirHandler && theirHandler(event);\n if (!event.defaultPrevented) {\n return ourHandler(event);\n }\n };\n}\nexport { composeEventHandlers };","function canUseDOM() {\n return !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\n}\nexport { canUseDOM };","import { useLayoutEffect, useEffect } from 'react';\nimport { canUseDOM } from '../../can-use-dom/dist/reach-utils-can-use-dom.esm.js';\n\n/**\n * React currently throws a warning when using useLayoutEffect on the server. To\n * get around it, we can conditionally useEffect on the server (no-op) and\n * useLayoutEffect in the browser. We occasionally need useLayoutEffect to\n * ensure we don't get a render flash for certain operations, but we may also\n * need affected components to render on the server. One example is when setting\n * a component's descendants to retrieve their index values.\n *\n * Important to note that using this hook as an escape hatch will break the\n * eslint dependency warnings unless you rename the import to `useLayoutEffect`.\n * Use sparingly only when the effect won't effect the rendered HTML to avoid\n * any server/client mismatch.\n *\n * If a useLayoutEffect is needed and the result would create a mismatch, it's\n * likely that the component in question shouldn't be rendered on the server at\n * all, so a better approach would be to lazily render those in a parent\n * component after client-side hydration.\n *\n * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\n * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js\n *\n * @param effect\n * @param deps\n */\n\nvar useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? useLayoutEffect : useEffect;\nexport { useIsomorphicLayoutEffect };","import { createContext, useContext, useState, useCallback, createElement, useMemo } from 'react';\nimport { useForceUpdate } from '@reach/utils/use-force-update';\nimport { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';\nimport { noop } from '@reach/utils/noop';\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\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 return target;\n}\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}\nvar _excluded = [\"element\", \"index\"];\nfunction createDescendantContext(name, initialValue) {\n if (initialValue === void 0) {\n initialValue = {};\n }\n var descendants = [];\n var ctx = /*#__PURE__*/createContext(_extends({\n descendants: descendants,\n registerDescendant: noop,\n unregisterDescendant: noop\n }, initialValue));\n if (process.env.NODE_ENV !== \"production\") {\n ctx.displayName = name;\n }\n return ctx;\n}\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node and (optionally) a key. The key is useful\n * if multiple descendants have identical text values and we need to\n * differentiate siblings for some reason.\n *\n * Our main goals with this are:\n * 1) maximum composability,\n * 2) minimal API friction\n * 3) SSR compatibility*\n * 4) concurrent safe\n * 5) index always up-to-date with the tree despite changes\n * 6) works with memoization of any component in the tree (hopefully)\n *\n * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation. However, in the few cases where\n * this is not the case, we can require an explicit index from the app.\n */\n\nfunction useDescendant(descendant, context, indexProp) {\n var forceUpdate = useForceUpdate();\n var _React$useContext = useContext(context),\n registerDescendant = _React$useContext.registerDescendant,\n unregisterDescendant = _React$useContext.unregisterDescendant,\n descendants = _React$useContext.descendants; // This will initially return -1 because we haven't registered the descendant\n // on the first render. After we register, this will then return the correct\n // index on the following render and we will re-register descendants so that\n // everything is up-to-date before the user interacts with a collection.\n\n var index = indexProp != null ? indexProp : descendants.findIndex(function (item) {\n return item.element === descendant.element;\n }); // Prevent any flashing\n\n useIsomorphicLayoutEffect(function () {\n if (!descendant.element) forceUpdate();\n registerDescendant(_extends({}, descendant, {\n index: index\n }));\n return function () {\n unregisterDescendant(descendant.element);\n };\n }, [descendant, forceUpdate, index, registerDescendant, unregisterDescendant].concat(Object.values(descendant)));\n return index;\n}\nfunction useDescendantsInit() {\n return useState([]);\n}\nfunction useDescendants(ctx) {\n return useContext(ctx).descendants;\n}\nfunction DescendantProvider(_ref) {\n var Ctx = _ref.context,\n children = _ref.children,\n items = _ref.items,\n set = _ref.set;\n var registerDescendant = useCallback(function (_ref2) {\n var element = _ref2.element,\n explicitIndex = _ref2.index,\n rest = _objectWithoutPropertiesLoose(_ref2, _excluded);\n if (!element) {\n return;\n }\n set(function (items) {\n var newItems;\n if (explicitIndex != null) {\n return [].concat(items, [_extends({}, rest, {\n element: element,\n index: explicitIndex\n })]).sort(function (a, b) {\n return a.index - b.index;\n });\n } else if (items.length === 0) {\n // If there are no items, register at index 0 and bail.\n newItems = [_extends({}, rest, {\n element: element,\n index: 0\n })];\n } else if (items.find(function (item) {\n return item.element === element;\n })) {\n // If the element is already registered, just use the same array\n newItems = items;\n } else {\n // When registering a descendant, we need to make sure we insert in\n // into the array in the same order that it appears in the DOM. So as\n // new descendants are added or maybe some are removed, we always know\n // that the array is up-to-date and correct.\n //\n // So here we look at our registered descendants and see if the new\n // element we are adding appears earlier than an existing descendant's\n // DOM node via `node.compareDocumentPosition`. If it does, we insert\n // the new element at this index. Because `registerDescendant` will be\n // called in an effect every time the descendants state value changes,\n // we should be sure that this index is accurate when descendent\n // elements come or go from our component.\n var index = items.findIndex(function (item) {\n if (!item.element || !element) {\n return false;\n } // Does this element's DOM node appear before another item in the\n // array in our DOM tree? If so, return true to grab the index at\n // this point in the array so we know where to insert the new\n // element.\n\n return Boolean(item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);\n });\n var newItem = _extends({}, rest, {\n element: element,\n index: index\n }); // If an index is not found we will push the element to the end.\n\n if (index === -1) {\n newItems = [].concat(items, [newItem]);\n } else {\n newItems = [].concat(items.slice(0, index), [newItem], items.slice(index));\n }\n }\n return newItems.map(function (item, index) {\n return _extends({}, item, {\n index: index\n });\n });\n });\n },\n // set is a state setter initialized by the useDescendantsInit hook.\n // We can safely ignore the lint warning here because it will not change\n // between renders.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []);\n var unregisterDescendant = useCallback(function (element) {\n if (!element) {\n return;\n }\n set(function (items) {\n return items.filter(function (item) {\n return element !== item.element;\n });\n });\n },\n // set is a state setter initialized by the useDescendantsInit hook.\n // We can safely ignore the lint warning here because it will not change\n // between renders.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []);\n return /*#__PURE__*/createElement(Ctx.Provider, {\n value: useMemo(function () {\n return {\n descendants: items,\n registerDescendant: registerDescendant,\n unregisterDescendant: unregisterDescendant\n };\n }, [items, registerDescendant, unregisterDescendant])\n }, children);\n}\n/**\n * Testing this as an abstraction for compound components that use keyboard\n * navigation. Hoping this will help us prevent bugs and mismatched behavior\n * across various components, but it may also prove to be too messy of an\n * abstraction in the end.\n *\n * Currently used in:\n * - Tabs\n * - Accordion\n *\n * @param context\n * @param options\n */\n\nfunction useDescendantKeyDown(context, options) {\n var _React$useContext2 = useContext(context),\n descendants = _React$useContext2.descendants;\n var callback = options.callback,\n currentIndex = options.currentIndex,\n filter = options.filter,\n _options$key = options.key,\n key = _options$key === void 0 ? \"index\" : _options$key,\n _options$orientation = options.orientation,\n orientation = _options$orientation === void 0 ? \"vertical\" : _options$orientation,\n _options$rotate = options.rotate,\n rotate = _options$rotate === void 0 ? true : _options$rotate,\n _options$rtl = options.rtl,\n rtl = _options$rtl === void 0 ? false : _options$rtl;\n return function handleKeyDown(event) {\n if (![\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\", \"PageUp\", \"PageDown\", \"Home\", \"End\"].includes(event.key)) {\n return;\n }\n var index = currentIndex != null ? currentIndex : -1; // If we use a filter function, we need to re-index our descendants array\n // so that filtered descendent elements aren't selected.\n\n var selectableDescendants = filter ? descendants.filter(filter) : descendants; // We need some options for any of this to work!\n\n if (!selectableDescendants.length) {\n return;\n }\n var selectableIndex = selectableDescendants.findIndex(function (descendant) {\n return descendant.index === currentIndex;\n });\n function getNextOption() {\n var atBottom = index === getLastOption().index;\n return atBottom ? rotate ? getFirstOption() : selectableDescendants[selectableIndex] : selectableDescendants[(selectableIndex + 1) % selectableDescendants.length];\n }\n function getPreviousOption() {\n var atTop = index === getFirstOption().index;\n return atTop ? rotate ? getLastOption() : selectableDescendants[selectableIndex] : selectableDescendants[(selectableIndex - 1 + selectableDescendants.length) % selectableDescendants.length];\n }\n function getFirstOption() {\n return selectableDescendants[0];\n }\n function getLastOption() {\n return selectableDescendants[selectableDescendants.length - 1];\n }\n switch (event.key) {\n case \"ArrowDown\":\n if (orientation === \"vertical\" || orientation === \"both\") {\n event.preventDefault();\n var next = getNextOption();\n callback(key === \"option\" ? next : next[key]);\n }\n break;\n case \"ArrowUp\":\n if (orientation === \"vertical\" || orientation === \"both\") {\n event.preventDefault();\n var prev = getPreviousOption();\n callback(key === \"option\" ? prev : prev[key]);\n }\n break;\n case \"ArrowLeft\":\n if (orientation === \"horizontal\" || orientation === \"both\") {\n event.preventDefault();\n var nextOrPrev = (rtl ? getNextOption : getPreviousOption)();\n callback(key === \"option\" ? nextOrPrev : nextOrPrev[key]);\n }\n break;\n case \"ArrowRight\":\n if (orientation === \"horizontal\" || orientation === \"both\") {\n event.preventDefault();\n var prevOrNext = (rtl ? getPreviousOption : getNextOption)();\n callback(key === \"option\" ? prevOrNext : prevOrNext[key]);\n }\n break;\n case \"PageUp\":\n event.preventDefault();\n var prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();\n callback(key === \"option\" ? prevOrFirst : prevOrFirst[key]);\n break;\n case \"Home\":\n event.preventDefault();\n var first = getFirstOption();\n callback(key === \"option\" ? first : first[key]);\n break;\n case \"PageDown\":\n event.preventDefault();\n var nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();\n callback(key === \"option\" ? nextOrLast : nextOrLast[key]);\n break;\n case \"End\":\n event.preventDefault();\n var last = getLastOption();\n callback(key === \"option\" ? last : last[key]);\n break;\n }\n };\n} ////////////////////////////////////////////////////////////////////////////////\n\nexport { DescendantProvider, createDescendantContext, useDescendant, useDescendantKeyDown, useDescendants, useDescendantsInit };","import { useState, useCallback } from 'react';\n\n/**\n * Forces a re-render, similar to `forceUpdate` in class components.\n */\n\nfunction useForceUpdate() {\n var _useState = useState(Object.create(null)),\n dispatch = _useState[1];\n return useCallback(function () {\n dispatch(Object.create(null));\n }, []);\n}\nexport { useForceUpdate };","import { useId as useId$1, useState, useEffect } from 'react';\nimport { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';\n\n/*\n * Welcome to @reach/auto-id!\n\n * Let's see if we can make sense of why this hook exists and its\n * implementation.\n *\n * Some background:\n * 1. Accessibility APIs rely heavily on element IDs\n * 2. Requiring developers to put IDs on every element in Reach UI is both\n * cumbersome and error-prone\n * 3. With a component model, we can generate IDs for them!\n *\n * Solution 1: Generate random IDs.\n *\n * This works great as long as you don't server render your app. When React (in\n * the client) tries to reuse the markup from the server, the IDs won't match\n * and React will then recreate the entire DOM tree.\n *\n * Solution 2: Increment an integer\n *\n * This sounds great. Since we're rendering the exact same tree on the server\n * and client, we can increment a counter and get a deterministic result between\n * client and server. Also, JS integers can go up to nine-quadrillion. I'm\n * pretty sure the tab will be closed before an app never needs\n * 10 quadrillion IDs!\n *\n * Problem solved, right?\n *\n * Ah, but there's a catch! React's concurrent rendering makes this approach\n * non-deterministic. While the client and server will end up with the same\n * elements in the end, depending on suspense boundaries (and possibly some user\n * input during the initial render) the incrementing integers won't always match\n * up.\n *\n * Solution 3: Don't use IDs at all on the server; patch after first render.\n *\n * What we've done here is solution 2 with some tricks. With this approach, the\n * ID returned is an empty string on the first render. This way the server and\n * client have the same markup no matter how wild the concurrent rendering may\n * have gotten.\n *\n * After the render, we patch up the components with an incremented ID. This\n * causes a double render on any components with `useId`. Shouldn't be a problem\n * since the components using this hook should be small, and we're only updating\n * the ID attribute on the DOM, nothing big is happening.\n *\n * It doesn't have to be an incremented number, though--we could do generate\n * random strings instead, but incrementing a number is probably the cheapest\n * thing we can do.\n *\n * Additionally, we only do this patchup on the very first client render ever.\n * Any calls to `useId` that happen dynamically in the client will be\n * populated immediately with a value. So, we only get the double render after\n * server hydration and never again, SO BACK OFF ALRIGHT?\n */\nvar serverHandoffComplete = false;\nvar id = 0;\nfunction genId() {\n return ++id;\n}\n/* eslint-disable react-hooks/rules-of-hooks */\n\n/**\n * useId\n *\n * Autogenerate IDs to facilitate WAI-ARIA and server rendering.\n *\n * Note: The returned ID will initially be `null` and will update after a\n * component mounts. Users may need to supply their own ID if they need\n * consistent values for SSR.\n *\n * @see Docs https://reach.tech/auto-id\n */\n\nfunction useId(providedId) {\n var _ref;\n\n // TODO: Remove error flag when updating internal deps to React 18. None of\n // our tricks will play well with concurrent rendering anyway.\n // @ts-expect-error\n if (typeof useId$1 === \"function\") {\n // @ts-expect-error\n var _id = useId$1(providedId);\n return providedId != null ? providedId : _id;\n } // If this instance isn't part of the initial render, we don't have to do the\n // double render/patch-up dance. We can just generate the ID and return it.\n\n var initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;\n var _React$useState = useState(initialId),\n id = _React$useState[0],\n setId = _React$useState[1];\n useIsomorphicLayoutEffect(function () {\n if (id === null) {\n // Patch the ID after render. We do this in `useLayoutEffect` to avoid any\n // rendering flicker, though it'll make the first render slower (unlikely\n // to matter, but you're welcome to measure your app and let us know if\n // it's a problem).\n setId(genId());\n } // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n useEffect(function () {\n if (serverHandoffComplete === false) {\n // Flag all future uses of `useId` to skip the update dance. This is in\n // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't\n // accidentally bail out of the patch-up dance prematurely.\n serverHandoffComplete = true;\n }\n }, []);\n return (_ref = providedId != null ? providedId : id) != null ? _ref : undefined;\n}\nexport { useId };","import { forwardRef, useCallback, createElement, useRef, useMemo } from 'react';\nimport { createContext } from '@reach/utils/context';\nimport { isNumber, isBoolean } from '@reach/utils/type-check';\nimport { makeId } from '@reach/utils/make-id';\nimport { noop } from '@reach/utils/noop';\nimport { useCheckStyles } from '@reach/utils/dev-utils';\nimport { useComposedRefs } from '@reach/utils/compose-refs';\nimport { useControlledState } from '@reach/utils/use-controlled-state';\nimport { composeEventHandlers } from '@reach/utils/compose-event-handlers';\nimport { useStatefulRefValue } from '@reach/utils/use-stateful-ref-value';\nimport { createDescendantContext, useDescendantsInit, DescendantProvider, useDescendant, useDescendantKeyDown } from '@reach/descendants';\nimport { useId } from '@reach/auto-id';\nimport PropTypes from 'prop-types';\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\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 return target;\n}\nvar _excluded = [\"as\", \"children\", \"defaultIndex\", \"index\", \"onChange\", \"readOnly\", \"collapsible\", \"multiple\"],\n _excluded2 = [\"as\", \"children\", \"disabled\", \"index\"],\n _excluded3 = [\"as\", \"children\", \"onClick\", \"onKeyDown\", \"onMouseDown\", \"onPointerDown\", \"tabIndex\"],\n _excluded4 = [\"as\", \"children\"];\nvar AccordionDescendantContext = /*#__PURE__*/createDescendantContext(\"AccordionDescendantContext\");\nvar _createContext = /*#__PURE__*/createContext(\"Accordion\"),\n AccordionProvider = _createContext[0],\n useAccordionCtx = _createContext[1];\nvar _createContext2 = /*#__PURE__*/createContext(\"AccordionItem\"),\n AccordionItemProvider = _createContext2[0],\n useAccordionItemCtx = _createContext2[1]; ////////////////////////////////////////////////////////////////////////////////\n\nvar AccordionStates; ////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Accordion\n *\n * The wrapper component for all other accordion components. Each accordion\n * component will consist of accordion items whose buttons are keyboard\n * navigable using arrow keys.\n *\n * @see Docs https://reach.tech/accordion#accordion-1\n */\n\n(function (AccordionStates) {\n AccordionStates[\"Open\"] = \"OPEN\";\n AccordionStates[\"Collapsed\"] = \"COLLAPSED\";\n})(AccordionStates || (AccordionStates = {}));\nvar Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, forwardedRef) {\n var _ref$as = _ref.as,\n Comp = _ref$as === void 0 ? \"div\" : _ref$as,\n children = _ref.children,\n defaultIndex = _ref.defaultIndex,\n controlledIndex = _ref.index,\n onChange = _ref.onChange,\n _ref$readOnly = _ref.readOnly,\n readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,\n _ref$collapsible = _ref.collapsible,\n collapsible = _ref$collapsible === void 0 ? false : _ref$collapsible,\n _ref$multiple = _ref.multiple,\n multiple = _ref$multiple === void 0 ? false : _ref$multiple,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n var _useControlledState = useControlledState({\n controlledValue: controlledIndex,\n defaultValue: function defaultValue() {\n if (defaultIndex != null) {\n // If multiple is set to true, we need to make sure the `defaultIndex`\n // is an array (and vice versa).\n if (multiple) {\n return Array.isArray(defaultIndex) ? defaultIndex : [defaultIndex];\n } else {\n var _defaultIndex$;\n return Array.isArray(defaultIndex) ? (_defaultIndex$ = defaultIndex[0]) != null ? _defaultIndex$ : 0 : defaultIndex;\n }\n }\n if (collapsible) {\n // Collapsible accordions with no defaultIndex will start with all\n // panels collapsed.\n return multiple ? [] : -1;\n } // Otherwise the first panel will be our default.\n\n // Otherwise the first panel will be our default.\n return multiple ? [0] : 0;\n },\n calledFrom: \"Tabs\"\n }),\n openPanels = _useControlledState[0],\n setOpenPanels = _useControlledState[1];\n var _useDescendantsInit = useDescendantsInit(),\n descendants = _useDescendantsInit[0],\n setDescendants = _useDescendantsInit[1];\n var id = useId(props.id);\n var onSelectPanel = useCallback(function (index) {\n onChange && onChange(index);\n setOpenPanels(function (prevOpenPanels) {\n /*\n * If we're dealing with an uncontrolled component, the index arg\n * in selectChange will always be a number rather than an array.\n */\n index = index; // multiple allowed\n\n if (multiple) {\n // state will always be an array here\n prevOpenPanels = prevOpenPanels;\n if (\n // User is clicking on an already-open button\n prevOpenPanels.includes(index)) {\n // Other panels are open OR accordion is allowed to collapse\n if (prevOpenPanels.length > 1 || collapsible) {\n // Close the panel by filtering it from the array\n return prevOpenPanels.filter(function (i) {\n return i !== index;\n });\n }\n } else {\n // Open the panel by adding it to the array.\n return [].concat(prevOpenPanels, [index]).sort();\n }\n } else {\n prevOpenPanels = prevOpenPanels;\n return prevOpenPanels === index && collapsible ? -1 : index;\n }\n return prevOpenPanels;\n });\n }, [collapsible, multiple, onChange, setOpenPanels]);\n useCheckStyles(\"accordion\");\n return /*#__PURE__*/createElement(DescendantProvider, {\n context: AccordionDescendantContext,\n items: descendants,\n set: setDescendants\n }, /*#__PURE__*/createElement(AccordionProvider, {\n accordionId: id,\n openPanels: openPanels,\n onSelectPanel: readOnly ? noop : onSelectPanel,\n readOnly: readOnly\n }, /*#__PURE__*/createElement(Comp, _extends({}, props, {\n ref: forwardedRef,\n \"data-reach-accordion\": \"\"\n }), children)));\n});\n/**\n * @see Docs https://reach.tech/accordion#accordion-props\n */\n\nif (process.env.NODE_ENV !== \"production\") {\n Accordion.displayName = \"Accordion\";\n Accordion.propTypes = {\n children: PropTypes.node.isRequired,\n defaultIndex: /*#__PURE__*/PropTypes.oneOfType([PropTypes.number, /*#__PURE__*/PropTypes.arrayOf(PropTypes.number)]),\n index: function index(props, name, compName, location, propName) {\n var val = props[name];\n if (props[name] != null && props.onChange == null && !props.readOnly) {\n return new Error(\"You provided an `index` prop to `Accordion` without an `onChange` handler. This will render a read-only accordion element. If the accordion should be functional, remove the `index` value to render an uncontrolled accordion or set an `onChange` handler to set an index when a change occurs. If the accordion is intended to have a fixed state, use the `readOnly` prop with a `defaultIndex` instead of an `index`.\");\n }\n if (props[name] != null && props.defaultIndex != null) {\n return new Error(\"You provided an `index` prop as well as a `defaultIndex` prop to `Accordion`. If you want a controlled component, use the index prop with an onChange handler. If you want an uncontrolled component, remove the index prop and use `defaultIndex` instead.\");\n }\n if (Array.isArray(props[name])) {\n return props[name].some(function (i) {\n return !isNumber(i);\n }) ? new Error(\"You provided an array as an index in `Accordion` but one or more of the values are not numeric. Please check to make sure all indices are valid numbers.\") : null;\n } else if (props[name] != null && !isNumber(props[name])) {\n return new Error(\"Invalid prop \\\"\" + propName + \"\\\" supplied to \\\"\" + compName + \"\\\". Expected \\\"number\\\", received \\\"\" + (Array.isArray(val) ? \"array\" : typeof val) + \"\\\".\");\n }\n return null;\n },\n multiple: function multiple(props, name, compName, location, propName) {\n if (!props[name] && Array.isArray(props.defaultIndex)) {\n return new Error(\"The \\\"\" + propName + \"\\\" prop supplied to \\\"\" + compName + \"\\\" is not set or set to \\\"false\\\", but an array of indices was provided to the \\\"defaultIndex\\\" prop. \\\"\" + compName + \"\\\" can only have more than one default index if the \\\"\" + propName + \"\\\" prop is set to \\\"true\\\".\");\n } else if (props[name] != null && !isBoolean(props[name])) {\n return new Error(\"Invalid prop \\\"\" + propName + \"\\\" supplied to \\\"\" + compName + \"\\\". Expected \\\"boolean\\\", received \\\"\" + (Array.isArray(props[name]) ? \"array\" : typeof props[name]) + \"\\\".\");\n }\n return null;\n },\n onChange: PropTypes.func,\n readOnly: PropTypes.bool,\n collapsible: PropTypes.bool\n };\n}\n/**\n * AccordionItem\n *\n * A group that wraps a an accordion's button and panel components.\n *\n * @see Docs https://reach.tech/accordion#accordionitem\n */\n\nvar AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref2, forwardedRef) {\n var _ref2$as = _ref2.as,\n Comp = _ref2$as === void 0 ? \"div\" : _ref2$as,\n children = _ref2.children,\n _ref2$disabled = _ref2.disabled,\n disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,\n indexProp = _ref2.index,\n props = _objectWithoutPropertiesLoose(_ref2, _excluded2);\n var _useAccordionCtx = useAccordionCtx(\"AccordionItem\"),\n accordionId = _useAccordionCtx.accordionId,\n openPanels = _useAccordionCtx.openPanels,\n readOnly = _useAccordionCtx.readOnly;\n var buttonRef = useRef(null);\n var _useStatefulRefValue = useStatefulRefValue(buttonRef, null),\n element = _useStatefulRefValue[0],\n handleButtonRefSet = _useStatefulRefValue[1];\n var descendant = useMemo(function () {\n return {\n element: element,\n disabled: disabled\n };\n }, [disabled, element]);\n var index = useDescendant(descendant, AccordionDescendantContext, indexProp); // We need unique IDs for the panel and button to point to one another\n\n var itemId = makeId(accordionId, index);\n var panelId = makeId(\"panel\", itemId);\n var buttonId = makeId(\"button\", itemId);\n var state = (Array.isArray(openPanels) ? openPanels.includes(index) && AccordionStates.Open : openPanels === index && AccordionStates.Open) || AccordionStates.Collapsed;\n var context = {\n buttonId: buttonId,\n buttonRef: buttonRef,\n disabled: disabled,\n handleButtonRefSet: handleButtonRefSet,\n index: index,\n itemId: itemId,\n panelId: panelId,\n state: state\n };\n return /*#__PURE__*/createElement(AccordionItemProvider, context, /*#__PURE__*/createElement(Comp, _extends({}, props, {\n ref: forwardedRef,\n \"data-reach-accordion-item\": \"\",\n \"data-state\": getDataState(state),\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-read-only\": readOnly ? \"\" : undefined\n }), children));\n});\n/**\n * @see Docs https://reach.tech/accordion#accordionitem-props\n */\n\nif (process.env.NODE_ENV !== \"production\") {\n AccordionItem.displayName = \"AccordionItem\";\n AccordionItem.propTypes = {\n disabled: PropTypes.bool\n };\n} ////////////////////////////////////////////////////////////////////////////////\n\n/**\n * AccordionButton\n *\n * The trigger button a user clicks to interact with an accordion.\n *\n * Must be a direct child of a `AccordionItem`.\n *\n * @see Docs https://reach.tech/accordion#accordionbutton\n */\n\nvar AccordionButton = /*#__PURE__*/forwardRef(function AccordionButton(_ref3, forwardedRef) {\n var _ref3$as = _ref3.as,\n Comp = _ref3$as === void 0 ? \"button\" : _ref3$as,\n children = _ref3.children,\n onClick = _ref3.onClick,\n onKeyDown = _ref3.onKeyDown;\n _ref3.onMouseDown;\n _ref3.onPointerDown;\n var tabIndex = _ref3.tabIndex,\n props = _objectWithoutPropertiesLoose(_ref3, _excluded3);\n var _useAccordionCtx2 = useAccordionCtx(\"AccordionButton\"),\n onSelectPanel = _useAccordionCtx2.onSelectPanel;\n var _useAccordionItemCtx = useAccordionItemCtx(\"AccordionButton\"),\n disabled = _useAccordionItemCtx.disabled,\n buttonId = _useAccordionItemCtx.buttonId,\n ownRef = _useAccordionItemCtx.buttonRef,\n handleButtonRefSet = _useAccordionItemCtx.handleButtonRefSet,\n index = _useAccordionItemCtx.index,\n panelId = _useAccordionItemCtx.panelId,\n state = _useAccordionItemCtx.state;\n var ref = useComposedRefs(forwardedRef, handleButtonRefSet);\n function handleClick(event) {\n event.preventDefault();\n if (disabled) {\n return;\n }\n ownRef.current.focus();\n onSelectPanel(index);\n }\n var handleKeyDown = useDescendantKeyDown(AccordionDescendantContext, {\n currentIndex: index,\n orientation: \"vertical\",\n key: \"element\",\n rotate: true,\n callback: function callback(element) {\n element == null ? void 0 : element.focus();\n },\n filter: function filter(button) {\n return !button.disabled;\n }\n });\n return /*#__PURE__*/createElement(Comp // Each accordion header `button` is wrapped in an element with role\n // `heading` that has a value set for `aria-level` that is appropriate\n // for the information architecture of the page.\n // https://www.w3.org/TR/wai-aria-practices-1.2/#accordion\n // I believe this should be left for apps to handle, since headings\n // are necessarily context-aware. An app can wrap a button inside any\n // arbitrary tag(s).\n // TODO: Revisit documentation and examples\n // @example\n //
\n //
\n // Click Me\n //
\n // \n //
\n // The title of each accordion header is contained in an element with\n // role `button`. We use an HTML button by default, so we can omit\n // this attribute.\n // https://www.w3.org/TR/wai-aria-practices-1.2/#accordion\n // role=\"button\"\n // The accordion header `button` element has `aria-controls` set to the\n // ID of the element containing the accordion panel content.\n // https://www.w3.org/TR/wai-aria-practices-1.2/#accordion\n , _extends({\n \"aria-controls\": panelId // If the accordion panel associated with an accordion header is\n // visible, the header `button` element has `aria-expanded` set to\n // `true`. If the panel is not visible, `aria-expanded` is set to\n // `false`.\n // https://www.w3.org/TR/wai-aria-practices-1.2/#accordion\n ,\n\n \"aria-expanded\": state === AccordionStates.Open,\n tabIndex: disabled ? -1 : tabIndex\n }, props, {\n ref: ref,\n \"data-reach-accordion-button\": \"\",\n \"data-state\": getDataState(state) // If the accordion panel associated with an accordion header is\n // visible, and if the accordion does not permit the panel to be\n // collapsed, the header `button` element has `aria-disabled` set to\n // `true`. We can use `disabled` since we opt for an HTML5 `button`\n // element.\n // https://www.w3.org/TR/wai-aria-practices-1.2/#accordion\n ,\n\n disabled: disabled || undefined,\n id: buttonId,\n onClick: composeEventHandlers(onClick, handleClick),\n onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown)\n }), children);\n});\n/**\n * @see Docs https://reach.tech/accordion#accordionbutton-props\n */\n\nif (process.env.NODE_ENV !== \"production\") {\n AccordionButton.displayName = \"AccordionButton\";\n AccordionButton.propTypes = {\n as: PropTypes.any,\n children: PropTypes.node\n };\n} ////////////////////////////////////////////////////////////////////////////////\n\n/**\n * AccordionPanel\n *\n * The collapsible panel in which inner content for an accordion item is\n * rendered.\n *\n * @see Docs https://reach.tech/accordion#accordionpanel\n */\n\nvar AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel(_ref4, forwardedRef) {\n var _ref4$as = _ref4.as,\n Comp = _ref4$as === void 0 ? \"div\" : _ref4$as,\n children = _ref4.children,\n props = _objectWithoutPropertiesLoose(_ref4, _excluded4);\n var _useAccordionItemCtx2 = useAccordionItemCtx(\"AccordionPanel\"),\n disabled = _useAccordionItemCtx2.disabled,\n panelId = _useAccordionItemCtx2.panelId,\n buttonId = _useAccordionItemCtx2.buttonId,\n state = _useAccordionItemCtx2.state;\n return /*#__PURE__*/createElement(Comp, _extends({\n hidden: state !== AccordionStates.Open // Optionally, each element that serves as a container for panel content\n // has role `region` and `aria-labelledby` with a value that refers to\n // the button that controls display of the panel.\n // Role `region` is especially helpful to the perception of structure by\n // screen reader users when panels contain heading elements or a nested\n // accordion.\n // https://www.w3.org/TR/wai-aria-practices-1.2/#accordion\n // Avoid using the region role in circumstances that create landmark\n // region proliferation, e.g., in an accordion that contains more than\n // approximately 6 panels that can be expanded at the same time.\n // A user can override this with `role=\"none\"` or `role=\"presentation\"`\n // TODO: Add to docs\n ,\n\n role: \"region\",\n \"aria-labelledby\": buttonId\n }, props, {\n ref: forwardedRef,\n \"data-reach-accordion-panel\": \"\",\n \"data-disabled\": disabled || undefined,\n \"data-state\": getDataState(state),\n id: panelId\n }), children);\n});\n/**\n * @see Docs https://reach.tech/accordion#accordionpanel-props\n */\n\nif (process.env.NODE_ENV !== \"production\") {\n AccordionPanel.displayName = \"AccordionPanel\";\n AccordionPanel.propTypes = {\n children: PropTypes.node\n };\n} ////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A hook that exposes data for a given `Accordion` component to its\n * descendants.\n *\n * @see Docs https://reach.tech/accordion#useaccordioncontext\n */\n\nfunction useAccordionContext() {\n var _useAccordionCtx3 = useAccordionCtx(\"useAccordionContext\"),\n openPanels = _useAccordionCtx3.openPanels,\n accordionId = _useAccordionCtx3.accordionId;\n return useMemo(function () {\n var panels = [];\n return {\n id: accordionId,\n openPanels: panels.concat(openPanels).filter(function (i) {\n return i >= 0;\n })\n };\n }, [accordionId, openPanels]);\n}\n/**\n * A hook that exposes data for a given `AccordionItem` component to its\n * descendants.\n *\n * @see Docs https://reach.tech/accordion#useaccordionitemcontext\n */\n\nfunction useAccordionItemContext() {\n var _useAccordionItemCtx3 = useAccordionItemCtx(\"useAccordionItemContext\"),\n index = _useAccordionItemCtx3.index,\n state = _useAccordionItemCtx3.state;\n return useMemo(function () {\n return {\n index: index,\n isExpanded: state === AccordionStates.Open\n };\n }, [index, state]);\n} ////////////////////////////////////////////////////////////////////////////////\n\nfunction getDataState(state) {\n return state === AccordionStates.Open ? \"open\" : \"collapsed\";\n} ////////////////////////////////////////////////////////////////////////////////\n\nexport { Accordion, AccordionButton, AccordionItem, AccordionPanel, AccordionStates, useAccordionContext, useAccordionItemContext };","import { useRef, useState, useCallback } from 'react';\nimport warning from 'tiny-warning';\n\n/**\n * Check if a component is controlled or uncontrolled and return the correct\n * state value and setter accordingly. If the component state is controlled by\n * the app, the setter is a noop.\n *\n * @param controlledValue\n * @param defaultValue\n */\n\nfunction useControlledState(_ref) {\n var controlledValue = _ref.controlledValue,\n defaultValue = _ref.defaultValue,\n _ref$calledFrom = _ref.calledFrom,\n calledFrom = _ref$calledFrom === void 0 ? \"A component\" : _ref$calledFrom;\n var wasControlled = controlledValue !== undefined;\n var _useRef = useRef(wasControlled),\n isControlled = _useRef.current;\n if (process.env.NODE_ENV !== \"production\") {\n process.env.NODE_ENV !== \"production\" ? warning(!(!isControlled && wasControlled), calledFrom + \" is changing from controlled to uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.\") : void 0;\n process.env.NODE_ENV !== \"production\" ? warning(!(isControlled && !wasControlled), calledFrom + \" is changing from uncontrolled to controlled. Components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.\") : void 0;\n }\n var _useState = useState(isControlled ? controlledValue : defaultValue),\n valueState = _useState[0],\n setValue = _useState[1];\n var set = useCallback(function (n) {\n if (!isControlled) {\n setValue(n);\n } // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return [isControlled ? controlledValue : valueState, set];\n}\nexport { useControlledState };","import { useState, useCallback } from 'react';\nfunction useStatefulRefValue(ref, initialState) {\n var _useState = useState(initialState),\n state = _useState[0],\n setState = _useState[1];\n var callbackRef = useCallback(function (refValue) {\n ref.current = refValue;\n setState(refValue); // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return [state, callbackRef];\n}\nexport { useStatefulRefValue };","import { makeStyles } from '@material-ui/styles';\n\nexport default makeStyles((theme) => ({\n contentWrapper: {\n padding: theme.spacing(2),\n backgroundColor: '#F8FAFF',\n marginTop: theme.spacing(0.5),\n },\n sectionTitle: {\n fontSize: theme.typography.pxToRem(16),\n marginBottom: theme.spacing(1),\n color: '#3C4B68',\n },\n text: {\n color: '#606060',\n },\n tagsSection: {\n width: '100%',\n },\n tagsWrapper: {\n display: 'flex',\n overflowY: 'auto',\n // Hide scrollbar for Chrome, Safari, Firefox and edge\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n '&::-webkit-scrollbar': {\n display: 'none',\n },\n },\n}));\n","import React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { Grid, Typography } from '@material-ui/core';\nimport { AccordionPanel } from '@reach/accordion';\n\nimport Button from '$landing-page/components/button';\nimport Tag from '$landing-page/components/tag';\n\nimport useStyles from './styles';\n\nconst Content = (props) => {\n const { tags, text, url } = props;\n\n const classes = useStyles(props);\n\n return (\n \n