[0-5][0-9]))/.exec(\n state.input\n )\n\n if (match) {\n const { hours, minutes } = match.groups\n // Handle the case of the previous time being > 12 hours and not flip the meridian\n if (formattedDate.getHours() >= 12 && Number(hours) < 12) {\n formattedDate.setHours(Number(hours) + 12)\n } else {\n formattedDate.setHours(hours)\n }\n formattedDate.setMinutes(minutes)\n return {\n ...state,\n focused: false,\n time: formattedDate.getTime(),\n error: null\n }\n } else {\n return {\n ...state,\n focused: false,\n time: null,\n error:\n 'invalid date: make sure to specify a date within the following format: HH:MM, and make sure hours is less than (or equal to) 12 and minutes is less than 60.'\n }\n }\n }\n case 'changeTime': {\n console.log('changeTime')\n return { ...state, input: action.payload }\n }\n case 'changePeriod': {\n const hours = formattedDate.getHours()\n\n if (action.payload === 'AM') {\n formattedDate.setHours(hours >= 12 ? hours - 12 : hours)\n } else {\n formattedDate.setHours(hours < 12 ? hours + 12 : hours)\n }\n return { ...state, time: formattedDate.getTime() }\n }\n default:\n return state\n }\n}\n\nconst DateTimePicker = ({ value, setValue, error, children }) => {\n const [{ time, focused, input }, dispatch] = useReducer(reducer, {\n time: value ? new Date(value).getTime() : Date.now(),\n focused: false,\n input: (value ? new Date(value) : new Date())\n .toLocaleTimeString('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n hour12: true\n })\n .split(' ')[0]\n })\n\n useEffect(() => {\n if (setValue && typeof setValue === 'function')\n setValue(new Date(time).toUTCString())\n // Don't add setValue to the deps array, as its reference isn't stable\n // and will trigger an infinite re-render here.\n }, [time])\n\n const formattedDate = new Date(time)\n\n const yearOptions = useMemo(() => {\n return Array.from({ length: 15 }, (_, i) => {\n var date = new Date()\n date.setMonth(date.getMonth() + 12 * (i - 3))\n\n return {\n value: date.getFullYear(),\n label: String(date.getFullYear())\n }\n })\n }, [])\n\n return (\n \n {/* \n using grid here because gap is really nice, and gaps with flexbox is \n still not widely supported :/ \n */}\n \n ({\n value: i,\n label: new Date(formattedDate.getFullYear(), i).toLocaleDateString(\n 'en-US',\n {\n month: 'long'\n }\n )\n }))}\n value={formattedDate.getMonth()}\n setValue={(value) =>\n dispatch({ type: 'changeMonth', payload: value })\n }\n />\n ({\n value: i + 1, // needs to be incremented by 1 since getDate is not zero-indexed\n label: String(i + 1)\n })\n )}\n value={formattedDate.getDate()}\n setValue={(value) => dispatch({ type: 'changeDay', payload: value })}\n />\n dispatch({ type: 'changeYear', payload: value })}\n />\n \n \n dispatch({ type: 'focus' })}\n onBlur={() => dispatch({ type: 'blur' })}\n onChange={(e) => {\n dispatch({ type: 'changeTime', payload: e.target.value })\n }}\n />\n \n \n dispatch({ type: 'changePeriod', payload: value })\n }\n items={[\n { value: 'AM', label: 'AM' },\n { value: 'PM', label: 'PM' }\n ]}\n />\n \n \n {error && (\n \n {error}\n
\n )}\n \n )\n}\n\nexport default DateTimePicker\n","import React, { useState, useEffect } from 'react'\nimport styled from 'styled-components'\n\nconst DropdownContainer = styled.div`\n position: relative;\n width: ${(props) => props.width};\n font-size: 16px;\n color: #000;\n`\n\nconst DropdownHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n border: 1px solid #ccc;\n cursor: pointer;\n color: #a3a3a3;\n height: ${(props) => props.height};\n gap: 6px;\n\n @media (max-width: 768px) {\n padding: 2px 16px;\n height: auto;\n border-radius: 360px;\n }\n`\n\nconst DropdownText = styled.div`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`\n\nconst DropdownIcon = styled.div`\n transition: transform 0.3s ease;\n\n @media (max-width: 768px) {\n font-size: 14px;\n }\n`\n\nconst DropdownOptions = styled.ul`\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n min-width: 170px;\n background-color: #fff;\n border: 1px solid #ccc;\n list-style-type: none;\n padding: 0;\n margin: 0;\n z-index: 1;\n display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};\n max-height: 200px;\n overflow-y: auto;\n\n @media (max-width: 768px) {\n max-height: 150px;\n border: none;\n }\n`\n\nconst DropdownOption = styled.li`\n padding: 10px;\n cursor: pointer;\n font-weight: ${({ isActive }) => (isActive ? 'bold' : 'normal')};\n\n &:hover {\n background-color: #e6e6e6;\n font-weight: bold;\n }\n\n @media (max-width: 768px) {\n padding: 8px;\n font-size: 14px;\n }\n`\n\nconst Dropdown = ({\n items,\n value,\n onChange,\n width = '225px',\n height = '48px'\n}) => {\n const [isOpen, setIsOpen] = useState(false)\n const [selectedOption, setSelectedOption] = useState(null)\n\n // Set initial selected option based on the `value` prop\n useEffect(() => {\n const initialOption = items.find((item) => item.value === value)\n if (initialOption) {\n setSelectedOption(initialOption)\n }\n }, [value, items])\n\n const toggleDropdown = () => {\n setIsOpen(!isOpen)\n }\n\n const handleOptionClick = (option) => {\n setSelectedOption(option)\n setIsOpen(false)\n if (onChange) {\n onChange(option)\n }\n }\n\n return (\n \n \n \n {selectedOption ? selectedOption.label : 'Select an option'}\n \n \n \n \n {items.map((item) => (\n handleOptionClick(item)}\n isActive={selectedOption && selectedOption.uuid === item.uuid}\n >\n {item.label}\n \n ))}\n \n \n )\n}\n\nexport default Dropdown\n","import React, { Fragment } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { P } from 'ui/bend/typography'\nimport renderPropComponent from 'helpers/renderPropComponent'\n\nconst Loading = ({\n children,\n loading,\n error,\n ErrorComponent,\n LoadingComponent\n}) => {\n return (\n \n {error && renderPropComponent(ErrorComponent)}\n {loading && renderPropComponent(LoadingComponent)}\n\n {!loading && !error && children}\n \n )\n}\n\nLoading.defaultProps = {\n LoadingComponent: <>,\n ErrorComponent: (\n We apologize, but there has been an error getting this information
\n )\n}\n\nLoading.propTypes = {\n children: PropTypes.node,\n loading: PropTypes.bool,\n error: PropTypes.bool\n}\n\nexport default Loading\n","import React, { useEffect, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled, { keyframes } from 'styled-components'\n\nconst MarqueeWrapper = styled('div')`\n width: 100%;\n height: auto;\n overflow: hidden;\n`\n\nconst marqueeAnimation = (offset, containerWidth) => keyframes`\n 0% {\n transform: translateX(${containerWidth}px);\n visibility: visible;\n }\n 100% {\n transform: translateX(-${offset}px);\n }\n`\n\nconst MarqueeIpse = styled('div')`\n display: inline-block;\n animation-iteration-count: ${(props) =>\n props.scrolledOnce ? 'infinite' : '1'};\n animation-timing-function: linear;\n animation-play-state: ${(props) => (props.playing ? 'running' : 'paused')};\n /* The first animation begins with the marquee left-aligned with the wrapper container */\n animation-name: ${(props) =>\n props.scrolledOnce\n ? marqueeAnimation(props.offset, props.containerWidth)\n : marqueeAnimation(props.offset, 0)};\n animation-duration: ${(props) =>\n props.duration\n ? props.scrolledOnce\n ? `${props.duration + 3}s`\n : `${props.duration}s`\n : ''};\n animation-delay: ${(props) => (props.scrolledOnce ? '' : '1s')};\n\n &:hover {\n animation-play-state: paused;\n }\n`\n/**\n * Creates a marquee effect to scroll text left to right within an auto-sized container.\n * When a child is updated, it will reset the marquee animation.\n * Completion of the first marquee (i.e. first text disappearing animation) will fire an optionally provided callback\n *\n * @param {number} animationSpeed - The speed at which a pixel will move from right to left across the width of the marquee. Note this is NOT the total animation length, but rather the visible animation length.\n * @param {function} callback - Optional functional callback for when the first marquee child disappears.\n * @param {number} callbackTimeout - The delay for the marquee callback, used when we want to fire callbacks consistently regardless of marquee flowing or not.\n * @param {number} width - The width of the containing Marquee element\n * @param {node} children - child component\n */\nconst Marquee = ({\n animationSpeed = 3,\n callback,\n callbackTimeout = 4000,\n width = 0,\n children\n}) => {\n const ref = useRef()\n const timeoutRef = useRef()\n const [childWidth, setChildWidth] = useState()\n const [duration, setDuration] = useState()\n\n const [shouldPlay, setShouldPlay] = useState(false)\n const [playing, setPlaying] = useState(false)\n const [scrolledOnce, setScrolledOnce] = useState(false)\n\n const handleMouseOver = () => {\n if (shouldPlay) {\n // We only need to toggle playing if the marquee should scroll.\n // Otherwise, we can accidentally trigger a scroll when we don't intend to (e.g. child is too small to bother)\n setPlaying(!playing)\n }\n }\n\n /* Reset scroll state when a new child is rendered. */\n useEffect(() => {\n setScrolledOnce(false)\n }, [children])\n\n /* Determine width of child content and attach event listeners */\n useEffect(() => {\n const handleAnimationEnd = () => {\n if (callback && typeof callback === 'function') {\n callback()\n }\n setScrolledOnce(true)\n }\n\n if (ref.current && children) {\n setChildWidth(ref.current.offsetWidth)\n\n /* After the first animation is run trigger any callbacks and switch animation over to infinite scroll. */\n ref.current.addEventListener('animationend', handleAnimationEnd)\n }\n\n return () => {\n if (ref.current && children) {\n ref.current.removeEventListener('animationend', handleAnimationEnd)\n }\n }\n }, [ref, children])\n\n /* Once we know how large our container and scrolling child are, calculate how long it will take to scroll and begin animation */\n useEffect(() => {\n if (childWidth && width) {\n if (childWidth <= width) {\n setShouldPlay(false)\n if (callback && typeof callback === 'function') {\n // This will allow us to run a timed callback even if the marquee doesn't animate (e.g. song title is too short in MusicPlayerMarquee)\n // We might have to adjust this code to prevent an initial callback firing if we use in a different setting with a different purpose.\n timeoutRef.current = setTimeout(callback, callbackTimeout)\n }\n } else {\n setShouldPlay(true)\n // The logic behind this formula is that we want any child to take animationSpeed seconds to pass through one wrapperWidth.\n // Therefore, we take the length of our child element and subdivide it into n wrapperWidths. These wrapperWidths will each take animationSpeed time.\n const animationDuration = (childWidth / width) * animationSpeed\n setDuration(animationDuration)\n }\n }\n\n return () => {\n if (timeoutRef.current) {\n // Dispose of our timeout if it isn't needed anymore.\n // This is to prevent a bug where a stale timeout could dismiss a new child from the marquee if a user skips around on a video.\n clearTimeout(timeoutRef.current)\n }\n }\n }, [childWidth, width])\n\n /* Playing should always reflect shouldPlay state, unless handleMouseOver is called */\n useEffect(() => {\n setPlaying(shouldPlay)\n }, [shouldPlay])\n\n return (\n \n \n {children}\n \n \n )\n}\n\nMarquee.propTypes = {\n animationSpeed: PropTypes.number,\n callback: PropTypes.func,\n callbackTimeout: PropTypes.number,\n children: PropTypes.node.isRequired\n}\n\nexport default Marquee\n","import React from 'react'\n\nimport { Play } from 'images/bend'\nimport { Flex, SVGImage } from 'ui/bend/elements'\n\nconst PlayButton = (props) => {\n // TODO: Redeem-v2 : Get tablet sizing from Isaac.\n return (\n \n \n \n )\n}\n\nexport default PlayButton\n","import { createGlobalStyle } from 'styled-components'\nimport VideoCSS from 'video.js/dist/video-js.css'\n\n// -moz-osx-font-smoothing\n// Fixes Firefox bug where higher font-weights are rendered in bold.\n\n// #react-body\n// We expand the height of the react-rails react_component div to be at least 100vh so that the footer will be placed appropriately.\n// If we didn't do this then the react-rails container will only take up as much space as it 'needs', pulling the footer up.\n\nconst GlobalStyle = createGlobalStyle`\n *, *:before, *:after {\n box-sizing: border-box;\n }\n\n html {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-smoothing: antialiased;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n scroll-behavior: smooth; \n -webkit-scroll-behavior: smooth;\n -moz-scroll-behavior: smooth;\n -ms-scroll-behavior: smooth;\n }\n\n body {\n background-color: ${(props) => props.theme.colors.base};\n color: ${(props) => props.theme.colors.primary};\n transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;\n margin: 0;\n padding: 0;\n font-size: 16px;\n line-height: 16px;\n\n #react-body {\n position: relative;\n min-height: 100vh;\n }\n\n &.prevent-scroll {\n height: 100vh;\n overflow: hidden;\n touch-action: none;\n }\n\n &.using-mouse {\n *:focus {\n outline: none;\n }\n }\n }\n\n a, .as-link {\n &.underline {\n text-decoration: underline;\n }\n text-decoration: none;\n cursor: pointer;\n transition: color 0.25s ease-in-out;\n color: ${(props) => props.theme.colors.primary};\n \n &:focus {\n color: inherit;\n }\n }\n\n\n h1, h2, h3, h4, h5, h6, p {\n margin: 0;\n /* Chrome adds in margin-block-start and -end to h elements. */\n margin-block-start: unset;\n margin-block-end: unset;\n margin-inline-start: unset;\n margin-inline-end: unset;\n }\n\n label {\n margin-bottom: 0;\n }\n\n form {\n padding: 0;\n }\n\n input {\n padding: 0;\n }\n\n ::placeholder {\n color: ${(props) => props.theme.colors.grey4};\n opacity: 1;\n }\n\n img {\n vertical-align: middle;\n }\n\n ul {\n margin-block-end: 0px;\n\n &:not(.as-list) {\n margin-block-start: 0px;\n padding-inline-start: 0px;\n list-style-type: none;\n }\n }\n\n button,\n html input[type=\"button\"],\n input[type=\"reset\"],\n input[type=\"submit\"] {\n cursor: pointer;\n -webkit-appearance: button;\n }\n\n button[disabled],\n html input[disabled] {\n cursor: default;\n }\n\n .ReactCollapse--collapse {\n transition: height 500ms;\n }\n\n ${VideoCSS}\n`\nexport default GlobalStyle\n","import grid from './grid'\n\nexport default {\n grid\n}\n","const grid = {\n templateColumns: 'repeat(12, [col-start] minmax(0, 1fr) [col-end])',\n columnGap: ['16px', '24px']\n}\n\nexport default grid\n","import constants from './constants'\n\nimport {\n componentHeights,\n fonts,\n fontSizes,\n fontWeights,\n formattedBreakpoints as breakpoints,\n letterSpacings,\n mediaQueries,\n spacing\n} from './scales'\n\nconst baseTheme = {\n breakpoints,\n componentHeights,\n constants,\n fonts,\n fontSizes, // only used in new styles\n fontWeights,\n letterSpacings,\n mediaQueries,\n spacing\n}\n\nexport default baseTheme\n","import baseTheme from './baseTheme'\nimport baseColors, { rgb } from './scales/colors'\n\nconst colors = {\n ...baseColors, // to support deprecated color references\n base: baseColors.white,\n primary: baseColors.black,\n grey1: baseColors.smoke,\n grey2: baseColors.mercury,\n grey3: baseColors.alto,\n grey4: baseColors.dawn,\n grey5: baseColors.chicago,\n grey6: baseColors.mine,\n grey7: baseColors.charcoal,\n featured: baseColors.featured,\n errorDefault: baseColors.error,\n errorBase: baseColors.errorLight, // This is in flux right now.\n success: baseColors.success,\n rgb: {\n base: rgb.white,\n primary: rgb.black\n }\n}\n\nconst LightTheme = {\n ...baseTheme,\n colors\n}\n\nexport default LightTheme\n","import baseTheme from './baseTheme'\nimport baseColors, { rgb } from './scales/colors'\n\nconst colors = {\n ...baseColors, // to support deprecated color references\n base: baseColors.white,\n primary: baseColors.black,\n grey1: baseColors.smoke,\n grey2: baseColors.mercury,\n grey3: baseColors.alto,\n grey4: baseColors.dawn,\n grey5: baseColors.chicago,\n grey6: baseColors.mine,\n grey7: baseColors.charcoal,\n featured: baseColors.featured,\n errorDefault: baseColors.error,\n errorBase: baseColors.errorLight,\n success: baseColors.success,\n rgb: {\n base: rgb.white,\n primary: rgb.black\n }\n}\n\nconst LightTheme = {\n ...baseTheme,\n colors\n}\n\nexport default LightTheme\n","import baseTheme from './baseTheme'\nimport baseColors, { rgb } from './scales/colors'\n\nconst colors = {\n ...baseColors, // to support deprecated color references\n base: baseColors.black,\n primary: baseColors.white,\n grey1: baseColors.charcoal,\n grey2: baseColors.mine,\n grey3: baseColors.chicago,\n grey4: baseColors.dawn,\n grey5: baseColors.alto,\n grey6: baseColors.mercury,\n grey7: baseColors.smoke,\n featured: baseColors.featured,\n errorDefault: baseColors.error,\n errorBase: baseColors.errorLight, // This is in flux right now.\n success: baseColors.success,\n rgb: {\n base: rgb.black,\n primary: rgb.white\n }\n}\n\nconst DarkTheme = {\n ...baseTheme,\n colors\n}\n\nexport default DarkTheme\n","/****************************\n * SplitView is a layout container.\n * On VP1-2 the {right} component is on top with {left} below it.\n * On VP3+ it is bisected 50/50 between {left} and {right}\n *\n * Props:\n * left: React Node\n * Right: React Node\n ******************************/\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { useTheme } from 'styled-components'\n\nimport { ErrorBoundary } from 'helpers'\nimport { MainContainer, GridItem } from 'ui/bend/elements'\nimport { componentHeights as heights } from 'ui/bend/themes'\n\nconst SplitView = ({ left, right, invertMobile }) => {\n const { spacing, constants } = useTheme()\n\n return (\n \n \n {right}\n \n \n \n {left}\n \n \n \n )\n}\n\nSplitView.propTypes = {\n left: PropTypes.node.isRequired,\n right: PropTypes.node.isRequired\n}\n\nconst SafeSplitView = (props) => (\n \n \n \n)\n\nexport default SafeSplitView\n","import React, { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport { CTA } from 'ui/bend/typography'\n\nexport const TabTitle = styled(CTA)`\n position: relative;\n cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n ${(props) =>\n css({\n color: props.color\n ? props.color\n : props.active\n ? 'primary'\n : props.disabled\n ? 'grey2'\n : 'grey5'\n })}\n transition: color ${(props) => props.duration}ms ease-in-out;\n padding-top: 16px;\n padding-bottom: 16px;\n`\n\n/**\n * A private Component used to render out the Tab Header area of the Tab component.\n *\n * @param {number} duration The duration required to complete the change tab animation.\n * @param {string} id The unique id of the tab\n * @param {function} setActiveTab a setter function to indicate that this tab should be active\n * @param {string} title The text to display for this Tab Header. This also operates as the unique identifying key for the Tab and its Header.\n * @param {boolean} [active] Whether this tab is the active tab\n * @param {string} [color] Desired color of tab. This overwrites any style coloring.\n * @param {boolean} [disabled] Whether this tab should be able to be set as active.\n * @param {boolean} [last] If this is the last Header in the Tab list\n */\n\nconst TabHeader = forwardRef(\n (\n {\n active,\n color,\n disabled,\n duration,\n handleKeyDown,\n id,\n last,\n setActiveTab,\n title\n },\n ref\n ) => {\n const handleSelect = () => {\n if (!disabled) {\n setActiveTab(title)\n }\n }\n\n return (\n \n {title}\n \n )\n }\n)\n\nTabHeader.propTypes = {\n active: PropTypes.bool,\n color: PropTypes.string,\n disabled: PropTypes.bool,\n duration: PropTypes.number.isRequired,\n id: PropTypes.string.isRequired,\n last: PropTypes.bool,\n setActiveTab: PropTypes.func.isRequired,\n title: PropTypes.string.isRequired\n}\n\nTabHeader.displayName = 'TabHeader'\n\nexport default TabHeader\n","import React, { createContext, useEffect, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport { Flex } from 'ui/bend/elements'\nimport { ErrorBoundary } from 'helpers'\n\nimport TabHeader from './TabHeader'\n\nconst Store = createContext()\nexport const useTabContext = () => React.useContext(Store)\n\nexport const TabHeaderContainer = styled(Flex)`\n position: relative;\n height: 32px;\n align-items: center;\n\n &:before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: ${(props) => props.theme.colors.grey2};\n }\n\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: ${(props) => props.underlineStyle.left};\n width: ${(props) => props.underlineStyle.width};\n transition: width ${(props) => props.duration}ms ease-in-out,\n left ${(props) => props.duration}ms ease-in-out;\n height: 1px;\n background: ${(props) => props.theme.colors.primary};\n }\n`\n\n/**\n * Locates the first tab that can be active.\n * A tab can be active IFF it is not disabled AND it has a title.\n */\nconst findFirstActiveTab = (children) => {\n let startingTab\n const childArray = React.Children.toArray(children)\n\n for (const child of childArray) {\n if (!child.props.disabled && child.props.title) {\n startingTab = startingTab || child.props.title\n\n if (startingTab && child.props.active) {\n startingTab = child.props.title\n // We have found the first element that isn't disabled and has a title.\n // and have the active prop\n // Set that as our starting index and bail out.\n break\n }\n }\n }\n\n return startingTab\n}\n\n/**\n * The `` component is used to render out a tab header that, when clicked, renders out a tab body.\n *\n * To use the `` component, you must supply it with `` children each with a required, unique `title={string}` prop and an optional `disabled={boolean}`.\n * This `title` prop is used to populate the Tab header row.\n * Failure to provide a `title` prop will result in the tab not being displayed.\n * Providing non-unique `title`s will throw an error.\n *\n * Example usage:\n * \n * This tab is enabled and will remain mounted\n * This tab is disabled. The title will mount, but the body will not.\n * This div has no title, therefore it will not mount in either headers or body\n * This div is enabled and it will mount and unmount depending on its tab header's active state\n * \n *\n * @param {string} id A unique identifier for the Tab component. Used to tie tab headers with tab bodies.\n * @param {number} duration The amount of time animations should take, in ms. Defaults to 300.\n */\nconst Tabs = ({ id, duration = 300, children, ...delegated }) => {\n /**\n * Tab body animation includes two waterfall animations - fade-out of old components and fade-in of new components.\n * Conversely, Tab header animation includes only one animation timer - moving the line.\n * Therefore, body animations should each take 1/2 the time of the header animation.\n * This will ensure that the body animations and header animation complete at the same time.\n */\n const bodyDuration = Math.floor(duration / 2)\n const [activeTab, setActiveTab] = useState(() => findFirstActiveTab(children))\n const [underlineStyle, setUnderlineStyle] = useState({\n width: 100,\n left: 0\n })\n const headerRef = useRef()\n const tabsRef = useRef({})\n\n /* Error Checking -- Ensure that every child has a unique title that we can use as a key */\n useEffect(() => {\n const childTitles = React.Children.toArray(children).map(\n (child) => child.props.title\n )\n\n const isUnique = (arr) => {\n let seenValues = {}\n for (let value of arr) {\n if (value) {\n if (seenValues[value]) {\n return false\n } else {\n seenValues[value] = true\n }\n }\n }\n return true\n }\n\n if (!isUnique(childTitles)) {\n throw new Error('TabBody Components must have unique titles')\n }\n }, [children])\n\n const getNextAvailableTab = (offset) => {\n if (headerRef.current && tabsRef.current) {\n let nodes = []\n let currentTab\n\n // iterate our tabs and remove any disabled ones (we don't want to land on them) and set our currently active one.\n for (let i in tabsRef.current) {\n const node = tabsRef.current[i]\n if (!node.disabled) nodes.push(node)\n if (node.active) currentTab = node\n }\n\n // Perform index wrapping if necessary.\n let index = nodes.indexOf(currentTab) + offset\n if (index >= nodes.length) index = 0\n if (index < 0) index = nodes.length - 1\n\n // Once we know where we should end up, pluck that element from our nodes array so we can set our activeTab and focus on it.\n const nextNode = nodes[index]\n if (nextNode) {\n setActiveTab(nextNode.title)\n nextNode.element.focus()\n }\n }\n }\n\n /* Make a weak keyboard trap on tab headers, such that arrow keys navigate and tab key can get us out of there */\n const handleKeyDown = (event) => {\n let nextActiveChild\n\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n nextActiveChild = getNextAvailableTab(-1)\n break\n case 'ArrowRight':\n case 'ArrowDown':\n nextActiveChild = getNextAvailableTab(1)\n break\n default:\n return\n }\n\n if (!nextActiveChild) return\n event.preventDefault()\n }\n\n const selectActiveTab = () => {\n if (headerRef.current && tabsRef.current) {\n let activeTab\n const container = headerRef.current\n\n // Find the currently active tab header.\n for (let key of Object.keys(tabsRef.current)) {\n if (tabsRef.current[key].active) {\n activeTab = tabsRef.current[key].element\n break\n }\n }\n\n if (activeTab) {\n // Adjust the underline's width and left location accordingly.\n const width = `${activeTab.getBoundingClientRect().width}px`\n const left = `${\n activeTab.getBoundingClientRect().left -\n container.getBoundingClientRect().left\n }px`\n setUnderlineStyle({\n width,\n left\n })\n }\n }\n }\n\n /* Keep the tab underline bar width/position updated as we switch active tabs */\n useEffect(() => {\n selectActiveTab()\n }, [activeTab])\n\n /* Keep the underline in the right position on resize */\n useEffect(() => {\n const handleResize = () => {\n selectActiveTab()\n }\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [])\n\n return (\n \n \n )\n}\n\nTabs.propTypes = {\n id: PropTypes.string.isRequired\n}\n\nconst SafeTabs = (props) => (\n \n \n \n)\n\nexport default SafeTabs\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { Transition } from 'react-transition-group'\n\nimport { useTabContext } from './Tabs'\n\nexport const TabContent = styled('div')`\n // modify left & top to shoot the element far off screen, this causes it to not take up room needlessly while still allowing us to animate the transition in.\n left: ${(props) =>\n props.transitionState === 'entering' || props.transitionState === 'exited'\n ? '-99999px'\n : ''};\n top: ${(props) =>\n props.transitionState === 'entering' || props.transitionState === 'exited'\n ? '-99999px'\n : ''};\n position: ${(props) =>\n props.transitionState === 'entering' || props.transitionState === 'exited'\n ? 'absolute'\n : 'relative'};\n opacity: ${(props) => (props.transitionState === 'entered' ? 1 : 0)};\n visibility: ${(props) =>\n props.transitionState === 'entered' ? 'visible' : 'hidden'};\n transition: opacity ${(props) => props.duration}ms ease-in-out,\n visibility ${(props) => props.duration}ms ease-in-out;\n`\n\n/**\n * @param {string} title The title of the tab (will display in Tab Header). This also operates as the unique identifying key for the Tab and its Header.\n * @param {boolean} [disabled] Whether the tab is disabled\n * @param {string} [headerColor] An optional color for Tab header. Overrides all other color styles. -- Note that this prop is used in TabHeader, not in Tab.js itself\n * @param {boolean} [mountOnEnter] Will mount the Tab Body only after it is set as an active tab\n * @param {boolean} [unmountOnExit] Will unmount the Tab Body if it is no longer the active tab\n */\n\nconst Tab = ({\n disabled,\n title,\n mountOnEnter,\n unmountOnExit,\n children,\n onClick,\n ...delegated\n}) => {\n const { id, bodyDuration, activeTab } = useTabContext()\n // This will be an unreachable tab. Do not render it.\n if (!title || disabled) return null\n\n const active = activeTab === title\n\n const onEnter = () => {\n return onClick ? onClick() : null\n }\n\n return (\n onEnter()}\n >\n {(transitionState) => (\n \n {children}\n \n )}\n \n )\n}\nTab.propTypes = {\n active: PropTypes.bool,\n title: PropTypes.string,\n headerColor: PropTypes.string,\n mountOnEnter: PropTypes.bool,\n unmountOnExit: PropTypes.bool,\n onClick: PropTypes.func\n}\n\nexport default Tab\n","import styled, { keyframes } from 'styled-components'\nimport { space, layout } from 'styled-system'\n\nconst SpinnerKeyframes = keyframes`\n 0% {\n transform: translate3d(-50%, -50%, 0) rotate(0deg);\n }\n 100% {\n transform: translate3d(-50%, -50%, 0) rotate(360deg);\n }\n`\n\nconst Spinner = styled.div.attrs({\n 'data-testid': 'fa-spinner'\n})`\n position: relative;\n opacity: 1;\n transition: opacity linear 0.1s;\n ${space}\n\n &::before {\n ${layout}\n animation: 1s ease-in-out infinite ${SpinnerKeyframes};\n border: solid 3px ${(props) => props.theme.colors.grey4};\n border-top-color: currentColor;\n border-radius: 50%;\n content: '';\n left: 50%;\n opacity: inherit;\n position: absolute;\n top: 50%;\n transform: translate3d(-50%, -50%, 0);\n transform-origin: center;\n will-change: transform;\n }\n`\nSpinner.defaultProps = {\n height: '24px',\n width: '24px'\n}\n\nexport default Spinner\n","// Current breakpoints are related to tablet size. Will discuss further w/ Mari and Trista about our ideal breakpoints.\n\n// Styled-System requires that breakpoints array be strings indicating their type (px, em, etc.)\n// However, carousel objects (e.g. react-id-swipe) use raw numbers to define breakpoints.\n// So we can have consistency across all media, we export a breakpoints array with the raw numbers.\n// We also format them into '#px' array format for our styled-system theme\nconst breakpoints = [640, 1024, 1200]\n\nconst formattedBreakpoints = breakpoints.map((point) => point + 'px')\n\nexport { breakpoints, formattedBreakpoints }\n","import styled from 'styled-components'\nimport { variant } from 'styled-system'\n\nimport Text from './Text'\n\nexport const defaultValues = {\n fontFamily: 'Proxima',\n fontSize: 2,\n fontWeight: 'regular',\n lineHeight: '140%'\n}\n\nconst P = styled(Text)(\n variant({\n variants: {\n default: {\n ...defaultValues\n },\n bold: {\n ...defaultValues,\n fontWeight: 'semibold'\n }\n }\n })\n)\n\nP.defaultProps = {\n as: 'p',\n variant: 'default'\n}\n\nexport default P\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { UnmountClosed } from 'react-collapse'\nimport styled from 'styled-components'\nimport { layout, space } from 'styled-system'\n\n// TODO: rework-animations\nexport const CollapseContainer = styled('div')(layout, space, {\n '& >.ReactCollapse--collapse': {\n transition: 'height 250ms cubic-bezier(0.4, 0, 0.2, 1)'\n }\n})\n\nconst Collapse = ({\n Container = CollapseContainer,\n isOpened,\n children,\n onWork,\n onRest,\n ...rest\n}) => (\n \n \n {children}\n \n \n)\n\nCollapse.propTypes = {\n Container: PropTypes.node,\n isOpened: PropTypes.bool,\n children: PropTypes.node\n}\n\nexport default Collapse\n","import styled from 'styled-components'\nimport { variant } from 'styled-system'\n\nimport Text from './Text'\n\n// We also use CTA values within the Button.js config.\n// We define their defaultValues in an object and destructure it where needed.\n\nexport const defaultValues = {\n fontFamily: 'Arquitecta',\n fontWeight: 'bold',\n fontSize: '15px',\n letterSpacing: 3,\n lineHeight: '140%',\n textTransform: 'uppercase'\n}\n\nconst CTA = styled(Text)(\n variant({\n variants: {\n default: {\n ...defaultValues\n },\n small: {\n ...defaultValues,\n fontWeight: 'bold',\n fontSize: 2\n },\n responsive: {\n ...defaultValues,\n fontWeight: 'bold',\n fontSize: ['14px', '15px', '15px']\n }\n }\n })\n)\n\nCTA.defaultProps = {\n variant: 'default'\n}\n\nexport default CTA\n","import styled from 'styled-components'\nimport { space } from 'styled-system'\nimport { css } from '@styled-system/css'\n\nimport { Caption } from 'ui/bend/typography'\n\nconst Feedback = styled(Caption)(\n (props) =>\n css({\n display: 'block',\n ml: '16px',\n mt: '4px',\n\n '&.error': {\n color: props.theme.colors.errorDefault\n }\n }),\n space\n)\n\nexport default Feedback\n","import styled from 'styled-components'\nimport { color, layout, space } from 'styled-system'\nimport { css } from '@styled-system/css'\n\nconst HR = styled('div')(\n space,\n color,\n layout,\n css({\n height: '1px'\n })\n)\n\nHR.defaultProps = {\n bg: 'grey3'\n}\n\nexport default HR\n","import styled from 'styled-components'\nimport { variant } from 'styled-system'\n\nimport Text from './Text'\n\nconst defaultValues = {\n fontSize: [8, 9, 10],\n fontFamily: 'Arquitecta',\n letterSpacing: 2,\n lineHeight: '108%',\n fontWeight: 'black',\n textTransform: 'uppercase',\n wordBreak: 'break-word'\n}\n\nconst H1 = styled(Text)(\n variant({\n variants: {\n default: {\n ...defaultValues\n },\n thin: {\n ...defaultValues,\n textTransform: 'none',\n lineHeight: '112%',\n fontWeight: 'normal'\n }\n }\n })\n)\n\nH1.defaultProps = {\n as: 'h1',\n variant: 'default'\n}\n\nexport default H1\n","import styled from 'styled-components'\n\nconst Avatar = styled('img')`\n height: 48px;\n width: 48px;\n border-radius: 50%;\n`\n\nexport default Avatar\n","import PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { space, position, variant } from 'styled-system'\n\nimport Tag from 'ui/bend/typography/Tag'\n\nconst Badge = styled(Tag)(\n space,\n position,\n\n css({\n py: '2px',\n px: '8px',\n borderWidth: '1px',\n borderStyle: 'solid',\n cursor: 'default'\n }),\n\n variant({\n variants: {\n solid: {\n color: 'base',\n bg: 'primary',\n borderColor: 'primary'\n },\n solidBlack: {\n color: 'white',\n bg: 'black',\n borderColor: 'black'\n },\n solidWhite: {\n color: 'black',\n bg: 'white',\n borderColor: 'white'\n },\n dim: {\n color: 'primary',\n bg: 'grey1',\n borderColor: 'grey1'\n },\n featured: {\n color: 'alert.medium',\n bg: 'base',\n borderColor: 'alert.medium'\n },\n featuredSolid: {\n color: 'white',\n bg: 'alert.medium',\n borderColor: 'alert.medium'\n }\n }\n })\n)\n\nBadge.defaultProps = {\n variant: 'solid'\n}\n\nconst variantPropTypes = PropTypes.oneOf([\n 'solid',\n 'solidBlack',\n 'solidWhite',\n 'dim',\n 'featured',\n 'featuredSolid'\n])\n\nBadge.propTypes = {\n variant: PropTypes.oneOfType([\n variantPropTypes,\n PropTypes.arrayOf(variantPropTypes)\n ])\n}\n\nexport default Badge\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { layout, flexbox, space, variant, system } from 'styled-system'\n\nimport Spinner from 'ui/bend/animations/Spinner'\nimport { defaultValues as ctaValues } from 'ui/bend/typography/CTA'\nimport colors from 'ui/bend/themes/scales/colors'\n\n//\n// TODO:\n// - Processing state\n//\n\nconst StyledButton = styled('button')(\n layout,\n flexbox,\n space,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n minHeight: '48px',\n minWidth: '100px',\n transition: '.15s ease-in-out'\n },\n css({\n ...ctaValues,\n px: '32px',\n py: '14px'\n }),\n system({\n whiteSpace: true\n }),\n variant({\n variants: {\n solid: {\n bg: 'primary',\n color: 'base',\n border: 'none',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'primary',\n '&:hover:not(.processing)': {\n bg: ['primary', 'grey6'],\n borderColor: ['primary', 'grey6'],\n color: 'base'\n },\n '&:focus': {\n color: 'base'\n },\n '&:active': {\n color: 'base'\n },\n '&:disabled:not(.processing)': {\n bg: 'grey3',\n borderColor: 'grey3'\n }\n },\n ghost: {\n bg: 'transparent',\n color: 'primary',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'grey3',\n '&:hover:not(.processing)': {\n bg: ['transparent', 'grey2'],\n borderColor: ['grey4', 'grey2'],\n color: 'primary'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'transparent',\n borderColor: 'grey3',\n color: 'grey3'\n }\n },\n dim: {\n bg: 'grey1',\n color: 'primary',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'grey1',\n '&:hover:not(.processing)': {\n bg: ['grey1', 'grey2'],\n borderColor: ['grey1', 'grey2'],\n color: 'primary'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'grey1',\n borderColor: 'grey1',\n color: 'grey4'\n }\n },\n alert: {\n bg: 'alert.medium',\n color: 'white',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'alert.medium',\n '&:hover:not(.processing)': {\n bg: ['alert.medium', `${colors.alert.medium}A6`], // 65% opacity.\n borderColor: ['alert.medium', `${colors.alert.medium}A6`], // 65% opacity.\n color: 'white'\n },\n '&:focus': {\n color: 'white'\n },\n '&:active': {\n color: 'white'\n },\n '&:disabled:not(.processing)': {\n bg: `${colors.alert.medium}59`, // 35% opacity.\n borderColor: `${colors.alert.medium}59`, // 35% opacity.\n color: 'grey4'\n }\n },\n ouline: {\n bg: 'transparent',\n color: 'primary',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'primary',\n fontSize: '1.125rem',\n fontWeight: '950',\n lineHeight: '1.5rem',\n '&:hover:not(.processing)': {\n bg: ['transparent', 'primary'],\n borderColor: 'primary',\n color: 'base'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'transparent',\n borderColor: 'grey3',\n color: 'grey3'\n }\n }\n }\n })\n)\n\nconst Button = ({\n children,\n disabled,\n processing,\n variant = 'solid',\n ...rest\n}) => {\n return (\n \n {processing ? : children}\n \n )\n}\n\nButton.propTypes = {\n children: PropTypes.any,\n disabled: PropTypes.bool,\n processing: PropTypes.bool,\n variant: PropTypes.oneOfType([PropTypes.string, PropTypes.array])\n}\n\nexport default Button\n","import React from 'react'\nimport styled from 'styled-components'\nimport { variant } from 'styled-system'\n\nimport Box from './Box'\nimport { Check } from 'images/bend'\n\n// I can't get object notation to work well with both css({}) and variant({}), especially when interpreted props are involved.\nconst Container = styled(Box)`\n border-width: 1px;\n border-style: solid;\n border-radius: 100px;\n height: 20px;\n width: 20px;\n padding: 3px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n transition: all 0.25s ease-in-out;\n ${({ active, completed }) =>\n variant({\n variants: {\n solid: {\n borderColor: active || completed ? 'primary' : 'grey3',\n bg: completed ? 'primary' : 'base',\n '& > svg': {\n fill: active ? 'primary' : 'base'\n }\n },\n dim: {\n borderColor: 'grey1',\n bg: 'grey1',\n '& > svg': {\n fill: 'primary'\n }\n }\n }\n })}\n`\n\nconst CheckCircle = ({ active, completed, ...rest }) => {\n return (\n \n \n \n )\n}\n\nCheckCircle.defaultProps = {\n variant: 'solid'\n}\n\nexport default CheckCircle\n","/*\n| This component is used to create responsive SVG icons/images that resize according to media queries.\n| It accepts the following props:\n| height: An array of strings outlining the height at different breakpoints, according to Styled-System specifications.\n| width: An array of strings outlining the width at different breakpoints, according to Styled-System specifications.\n| display: CSS value for display (defaults to inline-block)\n| inline: will set element as span and automatically set height & width to 1em and display to inline-flex. This allows the icon to be used inline with text.\n| SVG: The imported SVG node.\n|\n| Example Usage:\n| import { SVGImage } from 'ui/bend'\n| import { Icon } from 'images'\n|\n| // React Code here...\n| const sizeArray = {['20px', '24px', '32px']}\n| \n*/\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { system } from 'styled-system'\n\nimport { ErrorBoundary } from 'helpers'\nimport Box from './Box'\n\nconst SVGContainer = styled(Box)(\n system({\n fill: {\n property: 'fill',\n scale: 'colors'\n },\n stroke: {\n property: 'stroke',\n scale: 'colors'\n }\n }),\n {\n transition: 'fill 0.25s ease-in-out'\n }\n)\n\nconst SVGImage = ({\n SVG,\n width,\n height,\n display = 'inline-block',\n inline,\n backgroundColor,\n ...rest\n}) => {\n return (\n \n {SVG && (\n \n )}\n \n )\n}\n\nSVGImage.propTypes = {\n SVG: PropTypes.any.isRequired,\n width: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),\n height: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),\n inline: PropTypes.bool,\n display: PropTypes.string\n}\n\nconst SafeSVGImage = (props) => (\n \n \n \n)\n\nexport default SafeSVGImage\n","import styled from 'styled-components'\nimport { layout, flexbox, space, variant, system } from 'styled-system'\n\n// TODO: Move all new buttons to using this StyledButtonBase\n\nconst StyledButtonBase = styled('button')(\n layout,\n flexbox,\n space,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n transition: '.15s ease-in-out'\n },\n system({\n whiteSpace: true\n }),\n variant({\n variants: {\n solid: {\n bg: 'primary',\n color: 'base',\n border: 'none',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'primary',\n '&:hover:not(.processing)': {\n bg: ['primary', 'grey6'],\n borderColor: ['primary', 'grey6'],\n color: 'base'\n },\n '&:focus': {\n color: 'base'\n },\n '&:active': {\n color: 'base'\n },\n '&:disabled:not(.processing)': {\n bg: 'grey3',\n borderColor: 'grey3'\n }\n },\n ghost: {\n bg: 'transparent',\n color: 'primary',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'grey4',\n '&:hover:not(.processing)': {\n bg: ['transparent', 'grey2'],\n borderColor: ['grey4', 'grey2'],\n color: 'primary'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'transparent',\n borderColor: 'grey3',\n color: 'grey3'\n }\n },\n dim: {\n bg: 'grey1',\n color: 'primary',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'grey1',\n '&:hover:not(.processing)': {\n bg: ['grey1', 'grey2'],\n borderColor: ['grey1', 'grey2'],\n color: 'primary'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'grey1',\n borderColor: 'grey1',\n color: 'grey3'\n }\n }\n }\n })\n)\n\nexport default StyledButtonBase\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled, { useTheme } from 'styled-components'\n\nimport SVGImage from './SVGImage'\nimport { X } from 'images/bend'\n\nimport Spinner from 'ui/bend/animations/Spinner'\nimport StyledButtonBase from './StyledButtonBase'\n\n// TODO: Might make this a subset of Button... they're SOOOooo close.\n\n// TODO:\n// - Processing state\n//\n\nconst StyledButton = styled(StyledButtonBase)`\n border-radius: 100px;\n padding: 6px;\n border: none;\n`\n\nconst CloseButton = ({\n children,\n disabled,\n processing,\n variant = 'solid',\n ...rest\n}) => {\n const { colors } = useTheme()\n\n return (\n \n {processing ? (\n \n ) : (\n \n )}\n \n )\n}\n\nCloseButton.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n processing: PropTypes.bool,\n variant: PropTypes.oneOfType([PropTypes.string, PropTypes.array])\n}\n\nexport default CloseButton\n","import styled from 'styled-components'\nimport { flexbox } from 'styled-system'\n\nimport Box from './Box'\n\nconst Flex = styled(Box)(flexbox)\n\nFlex.defaultProps = {\n display: 'flex'\n}\n\nexport default Flex\n","import styled from 'styled-components'\nimport { grid } from 'styled-system'\n\nimport Box from './Box'\n\nconst Grid = styled(Box)(grid)\n\nGrid.defaultProps = {\n display: 'grid'\n}\n\nexport default Grid\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Grid from './Grid'\n\nconst GridContainer = styled(Grid)((props) =>\n css({\n gridTemplateColumns: props.theme.constants.grid.templateColumns,\n gridColumnGap: props.theme.constants.grid.columnGap\n })\n)\n\nexport default GridContainer\n","import styled from 'styled-components'\nimport { flexbox } from 'styled-system'\n\nimport Grid from './Grid'\n\n// Add flex elements to a Grid item.\nconst GridItem = styled(Grid)(flexbox)\n\nGridItem.defaultProps = {\n display: 'flex'\n}\n\nexport default GridItem\n","import styled from 'styled-components'\nimport { border, compose, layout, space, system } from 'styled-system'\n\nconst Image = styled('img')(\n compose(\n border,\n layout,\n space,\n system({\n objectFit: true\n })\n )\n)\n\nImage.defaultProps = {\n maxWidth: '100%'\n}\n\nexport default Image\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport { flexbox, layout, space, system } from 'styled-system'\n\nimport { RightChevron } from 'images'\nimport { defaultValues as ctaValues } from 'ui/bend/typography/CTA'\nimport SVGImage from './SVGImage'\n\nconst StyledLink = styled('a')(\n flexbox,\n layout,\n space,\n css({\n ...ctaValues,\n display: 'flex',\n alignItems: 'center',\n py: '8px',\n\n '&:hover': {\n color: 'grey6'\n }\n }),\n system({\n whiteSpace: true\n })\n)\n\nconst Link = ({ disabled, children, ...rest }) => {\n return (\n \n {children}\n \n \n )\n}\n\nLink.propTypes = {\n disabled: PropTypes.bool,\n children: PropTypes.any\n}\n\nexport default Link\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Grid from './Grid'\n\nconst MainContainer = styled(Grid)((props) =>\n css({\n gridTemplateColumns: [\n `\n [full-start]\n 0px\n [main-start]\n ${props.theme.constants.grid.templateColumns}\n [main-end]\n 0px\n [full-end]\n `,\n `\n [full-start]\n calc(64px - ${props.theme.constants.grid.columnGap[1]})\n [main-start]\n ${props.theme.constants.grid.templateColumns}\n [main-end]\n calc(64px - ${props.theme.constants.grid.columnGap[1]})\n [full-end]\n `,\n `\n [full-start]\n calc(96px - ${props.theme.constants.grid.columnGap[1]})\n [main-start]\n ${props.theme.constants.grid.templateColumns}\n [main-end]\n calc(96px - ${props.theme.constants.grid.columnGap[1]})\n [full-end]\n `,\n `\n [full-start]\n minmax(calc(128px - ${props.theme.constants.grid.columnGap[1]}), calc((100% - 1392px) / 2))\n [main-start]\n ${props.theme.constants.grid.templateColumns}\n [main-end]\n minmax(calc(128px - ${props.theme.constants.grid.columnGap[1]}), calc((100% - 1392px) / 2))\n [full-end]\n `\n ],\n gridColumnGap: props.theme.constants.grid.columnGap\n })\n)\n\nexport default MainContainer\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\nimport {\n layout,\n flexbox,\n position,\n space,\n variant,\n system\n} from 'styled-system'\n\nimport Spinner from 'ui/bend/animations/Spinner'\nimport { defaultValues as bodyValues } from 'ui/bend/typography/P'\n\n// TODO: Might make this a subset of Button... they're SOOOooo close.\n\n// TODO:\n// - Processing state\n//\nconst StyledButton = styled('button')(\n layout,\n flexbox,\n space,\n position,\n {\n alignItems: 'center',\n display: 'flex',\n borderRadius: '100px !important', // we use !important to override legacy css.\n justifyContent: 'center',\n textAlign: 'center',\n transition: '.15s ease-in-out'\n },\n css({\n ...bodyValues,\n px: '16px',\n py: '6px'\n }),\n system({\n whiteSpace: true,\n transform: true\n }),\n variant({\n variants: {\n solid: {\n bg: 'primary',\n color: 'base',\n border: 'none',\n fill: 'base',\n '&:hover:not(.processing)': {\n bg: 'grey6',\n color: 'base'\n },\n '&:focus': {\n color: 'base'\n },\n '&:active': {\n color: 'base'\n },\n '&:disabled:not(.processing)': {\n bg: 'grey3'\n },\n '&.processing': {\n bg: 'grey6'\n }\n },\n ghost: {\n bg: 'transparent',\n color: 'primary',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'grey3',\n fill: 'primary',\n '&:hover:not(.processing)': {\n bg: 'grey2',\n borderColor: 'grey2'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'transparent',\n borderColor: 'grey3',\n color: 'grey3',\n fill: 'grey3'\n }\n },\n dim: {\n bg: 'grey1',\n color: 'primary',\n fill: 'primary',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'grey1',\n '&:hover:not(.processing)': {\n bg: 'grey2',\n borderColor: 'grey2',\n color: 'primary'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'grey1',\n borderColor: 'grey1',\n color: 'grey3',\n fill: 'grey3'\n }\n },\n dim: {\n bg: 'white',\n color: 'black',\n fill: 'black',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'white',\n '&:hover:not(.processing)': {\n bg: 'grey2',\n borderColor: 'grey2',\n color: 'primary'\n },\n '&:focus': {\n color: 'primary'\n },\n '&:active': {\n color: 'primary'\n },\n '&:disabled:not(.processing)': {\n bg: 'grey1',\n borderColor: 'grey1',\n color: 'grey3',\n fill: 'grey3'\n }\n }\n }\n })\n)\n\nconst PillButton = ({\n children,\n disabled,\n processing,\n variant = 'solid',\n ...rest\n}) => {\n return (\n \n {processing ? : children}\n \n )\n}\n\nPillButton.propTypes = {\n children: PropTypes.any,\n disabled: PropTypes.bool,\n processing: PropTypes.bool,\n variant: PropTypes.oneOfType([PropTypes.string, PropTypes.array])\n}\n\nexport default PillButton\n","import styled from 'styled-components'\n\nconst ProgressBar = styled('progress')`\n &[value] {\n appearance: none;\n border: none;\n width: 100%;\n height: 2px;\n\n ::-moz-progress-bar {\n background-color: ${(props) => props.theme.colors.primary};\n }\n\n ::-webkit-progress-bar {\n background-color: ${(props) => props.theme.colors.grey2};\n }\n\n ::-webkit-progress-value {\n transition: width 0.25s ease-in-out;\n background-color: ${(props) => props.theme.colors.primary};\n }\n }\n`\n\nexport default ProgressBar\n","import React from 'react'\nimport { useTheme } from 'styled-components'\n\nconst CircularProgressBar = ({\n progress,\n strokeWidth = 4, // 15px\n size = 48 // 48px\n}) => {\n const center = size / 2\n const radius = center - strokeWidth / 2\n const circumference = 2 * Math.PI * radius\n const offset = ((100 - progress) / 100) * circumference\n\n const { colors } = useTheme()\n\n return (\n \n \n )\n}\n\nexport default CircularProgressBar\n","export default {\n navbar: {\n mobile: '60px',\n desktop: '80px'\n },\n progressBar: '6px',\n mobileMenuMax: '700px',\n modalMax: {\n mobile: '80vh',\n desktop: '65vh'\n }\n}\n\n// Footer heights are defined in v2/Footer/_footerHeight.js\n","import React, { createContext, useContext, useMemo, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { Formik, Form } from 'formik'\nimport * as Yup from 'yup'\n\nimport { useSubscribeContext } from 'context'\nimport { ErrorBoundary } from 'helpers'\nimport Feedback from 'ui/bend/elements/forms/Feedback'\n\nconst Store = createContext(null)\nexport const useMultiStepForm = () => useContext(Store)\n\nconst MultiStepForm = ({\n children,\n firstStep = 0,\n onComplete,\n onFailComponent\n}) => {\n const { actions, initialValues, validators } = useSubscribeContext()\n\n const [stepNumber, setStepNumber] = useState(firstStep)\n const [showFailComponent, setShowFailComponent] = useState(null)\n\n // We clone the child elements and inject stepNumber and that elements index (i.e. where it is along the form).\n // We could provide stepNumber via context to be more explicit in our composition, but that would not give access to the step's index.\n const steps = React.Children.toArray(children)\n\n const currentStep = steps[stepNumber]\n const isLastStep = stepNumber === steps.length - 1\n\n const nextStep = () => {\n setStepNumber(stepNumber + 1)\n }\n\n const goToStep = (id) => {\n if (id >= 0 && id < steps.length - 1) {\n setStepNumber(id)\n }\n }\n\n const handleSubmit = async (values, formikObject) => {\n try {\n if (\n currentStep.props.onSubmit &&\n typeof currentStep.props.onSubmit === 'function'\n ) {\n const res = await currentStep.props.onSubmit(values, formikObject)\n if (res) {\n if (!isLastStep) {\n formikObject.setTouched({})\n nextStep()\n } else {\n if (onComplete && typeof onComplete === 'function')\n await onComplete(values, formikObject)\n }\n }\n } else {\n throw Error(\n 'No submission handler. Please add an onSubmit function to each form section.'\n )\n }\n } catch (error) {\n actions.handleError(error, { ...formikObject })\n if (isLastStep && onFailComponent) {\n setShowFailComponent(true)\n }\n }\n }\n\n /* Update validationSchema when the currentStep's type changes */\n const currentValidation = useMemo(() => {\n const resolveValidators = (path) => {\n // We recursively search down an object based on dot-separated values.\n // This might be useful to factor out into a helper.\n return path\n .split('.')\n .reduce((prev, curr) => (prev ? prev[curr] : null), validators)\n }\n\n const parseValidators = (type) => {\n if (Array.isArray(type)) {\n // If type is an array, we want to collect all the validators that correspond to the types in the array into a single object.\n return type.reduce(\n (prev, curr) => ({ ...prev, ...resolveValidators(curr) }),\n {}\n )\n } else {\n return resolveValidators(type)\n }\n }\n\n if (currentStep && currentStep.props && currentStep.props.type)\n return parseValidators(currentStep.props.type)\n }, [currentStep, validators])\n\n return (\n \n {({ values, status, isSubmitting }) => (\n \n )}\n \n )\n}\n\nMultiStepForm.propTypes = {\n firstStep: PropTypes.number,\n onComplete: PropTypes.func,\n shouldRetry: PropTypes.bool,\n children: PropTypes.node.isRequired\n}\n\nconst SafeMultiStepForm = (props) => (\n \n \n \n)\n\nexport default SafeMultiStepForm\n","const colors = {\n white: '#FFFFFF',\n black: '#000000',\n alto: '#CCCCCC',\n dawn: '#A3A3A3',\n charcoal: '#242424',\n chicago: '#636363',\n error: '#C62828',\n featured: '#B00020',\n mercury: '#E1E1E1',\n mine: '#3b3b3b',\n smoke: '#F2F2F2 ',\n errorLight: '#FFF6F6',\n alert: {\n light: '#E7CCCF',\n medium: '#B00020',\n dark: '#740031'\n },\n highlight: {\n light: '#F1E8DD',\n medium: '#CEB18F',\n dark: '#826646'\n },\n success: {\n light: '#D8E1D5',\n medium: '#758E6D',\n dark: '#3C4B37'\n },\n accent: {\n light: '#D7DDEB',\n medium: '#7183B0',\n dark: '#384669'\n }\n}\n\nexport const rgb = {\n white: '255, 255, 255',\n black: '0, 0, 0'\n}\n\nexport default colors\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst Tag = styled(Text)(\n css({\n fontFamily: 'Arquitecta',\n fontSize: 1,\n fontWeight: 'bold',\n letterSpacing: '.04em',\n lineHeight: '140%',\n textTransform: 'uppercase'\n })\n)\n\nexport default Tag\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport { P } from 'ui/bend/typography'\nimport { Check } from 'images/bend'\n\nconst CheckboxInput = styled('span')`\n position: absolute;\n display: flex;\n justify-content: center;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n padding: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ${(props) => props.theme.colors.grey5};\n border-radius: 2px !important; /* Need important to override legacy components.css */\n transition: all 0.3s ease-in-out;\n`\n\nconst Label = styled(P)`\n display: inline;\n transition: all 0.3s ease-in-out;\n`\n\nconst CheckboxContainer = styled('label')`\n cursor: ${(props) => (props.disabled ? '' : 'pointer')};\n position: relative;\n display: inline-block;\n height: 24px;\n width: 40px;\n white-space: nowrap;\n padding-left: 32px;\n color: ${(props) => props.theme.colors.grey5};\n\n /* hide default input */\n input {\n display: contents;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n &:hover {\n ${P} {\n color: ${(props) => props.theme.colors.primary};\n }\n\n ${CheckboxInput} {\n border-color: ${(props) => props.theme.colors.primary};\n }\n }\n\n input:checked {\n ~ ${P} {\n color: ${(props) => props.theme.colors.primary};\n }\n\n ~ ${CheckboxInput} {\n background-color: ${(props) => props.theme.colors.primary};\n border-color: ${(props) => props.theme.colors.primary};\n svg {\n fill: ${(props) => props.theme.colors.base};\n }\n }\n }\n\n input:disabled {\n ~ ${P} {\n color: ${(props) => props.theme.colors.grey2};\n }\n\n ~ ${CheckboxInput} {\n background-color: ${(props) => props.theme.colors.grey2};\n border-color: ${(props) => props.theme.colors.grey2};\n svg {\n fill: ${(props) => props.theme.colors.grey2};\n }\n }\n }\n`\n\nCheckboxContainer.defaultProps = {\n as: 'label'\n}\n\nconst Checkbox = ({ label, ...props }) => {\n return (\n \n \n \n \n \n \n \n )\n}\n\nCheckbox.propTypes = {\n label: PropTypes.string.isRequired\n}\n\nexport default Checkbox\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { useField } from 'formik'\n\nimport Checkbox from './Checkbox'\n\nconst FormikCheckbox = ({ name, ...props }) => {\n const [field, meta, helper] = useField(name)\n\n return \n}\n\nFormikCheckbox.propTypes = {\n name: PropTypes.string.isRequired\n}\n\nexport default FormikCheckbox\n","import { ToastContainer as UnstyledToastContainer, Slide } from 'react-toastify'\nimport styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport 'react-toastify/dist/ReactToastify.css'\n\nconst ToastContainer = styled(UnstyledToastContainer)`\n ${css({\n maxWidth: ['100%', '500px'],\n width: '100%'\n })}\n display: flex;\n flex-direction: column;\n align-items: center;\n\n .Toastify__toast {\n background: ${(props) => props.theme.colors.primary};\n padding: 12px;\n ${css({ width: ['100%', 'fit-content'] })}\n }\n`\n\nToastContainer.defaultProps = {\n closeButton: false,\n position: 'bottom-center',\n autoClose: false,\n hideProgressBar: true,\n transition: Slide,\n closeOnClick: false,\n draggablePercent: 40\n}\n\nexport default ToastContainer\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst Blockquote = styled(Text)(\n css({\n fontFamily: 'Arquitecta',\n fontWeight: 'regular',\n fontSize: [8, 9, 10],\n lineHeight: '112%',\n textAlign: 'center'\n })\n)\n\nBlockquote.defaultProps = {\n as: 'div'\n}\n\nexport default Blockquote\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst Display = styled(Text)(\n css({\n fontFamily: 'Arquitecta',\n fontWeight: 'black',\n fontSize: [9, 10, 11],\n letterSpacing: 2,\n lineHeight: '108%',\n textTransform: 'uppercase'\n })\n)\n\nDisplay.defaultProps = {\n as: 'h1'\n}\n\nexport default Display\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst H2 = styled(Text)(\n css({\n fontSize: [7, 8, 9],\n fontFamily: 'Arquitecta',\n letterSpacing: 2,\n lineHeight: '108%',\n fontWeight: 'black',\n textTransform: 'uppercase'\n })\n)\n\nH2.defaultProps = {\n as: 'h2'\n}\n\nexport default H2\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst H3 = styled(Text)(\n css({\n fontSize: [6, 7, 8],\n fontFamily: 'Proxima',\n letterSpacing: 0,\n lineHeight: '108%',\n fontWeight: 'semibold'\n })\n)\n\nH3.defaultProps = {\n as: 'h3'\n}\n\nexport default H3\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst H4 = styled(Text)(\n css({\n fontSize: [5, 6, 7],\n fontFamily: 'Proxima',\n lineHeight: '135%',\n fontWeight: '600'\n })\n)\n\nH4.defaultProps = {\n as: 'h4'\n}\n\nexport default H4\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst H5 = styled(Text)(\n css({\n fontSize: [4, 5, 6],\n fontFamily: 'Proxima',\n lineHeight: '135%',\n fontWeight: '600'\n })\n)\n\nH5.defaultProps = {\n as: 'h5'\n}\n\nexport default H5\n","import styled from 'styled-components'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst H6 = styled(Text)(\n css({\n fontSize: [3, 4, 5],\n fontFamily: 'Proxima',\n lineHeight: '135%',\n fontWeight: '600'\n })\n)\n\nH6.defaultProps = {\n as: 'h6'\n}\n\nexport default H6\n","import styled from 'styled-components'\nimport { variant } from 'styled-system'\nimport { css } from '@styled-system/css'\n\nimport Text from './Text'\n\nconst defaultValues = {\n fontFamily: 'Proxima',\n fontWeight: 'regular',\n fontSize: 1,\n lineHeight: '115%'\n}\n\nconst Caption = styled(Text)(\n variant({\n variants: {\n default: defaultValues,\n bold: {\n ...defaultValues,\n fontWeight: 'semibold'\n }\n }\n })\n)\n\nCaption.defaultProps = {\n variant: 'default'\n}\n\nexport default Caption\n","import styled from 'styled-components'\nimport { variant } from 'styled-system'\n\nimport Text from './Text'\n\nexport const defaultValues = {\n fontFamily: 'Proxima',\n fontWeight: 'regular',\n fontSize: 1,\n lineHeight: '130%'\n}\n\nconst Subtitle = styled(Text)(\n variant({\n variants: {\n default: {\n ...defaultValues\n },\n alternative: {\n ...defaultValues,\n fontWeight: 'bold',\n lineHeight: '105%',\n textTransform: 'uppercase'\n }\n }\n })\n)\n\nSubtitle.defaultProps = {\n variant: 'default'\n}\n\nexport default Subtitle\n","import styled from 'styled-components'\nimport { compose, flexbox, typography, system } from 'styled-system'\n\n// Import directly to avoid error:\n// \"Cannot create styled-component for component: undefined\"\nimport Box from 'ui/bend/elements/Box'\n\n// We set a defaultValues object to contain all of the defaultProps for our various Typographic Elements.\n// This allows us to import these values and destructure them into other styled-components that need accesss to the Typography, but are not using Text as a base.\n// For example, a styled.input might use the defaultValues from P.js in order to style the text inside of an input box the same as our existing elements.\n\nconst Text = styled(Box)(\n compose(flexbox, typography),\n system({\n textTransform: true,\n whiteSpace: true,\n wordBreak: true\n })\n)\n\nText.defaultProps = {\n as: 'span'\n}\n\nexport default Text\n","import styled from 'styled-components'\nimport { layout, space } from 'styled-system'\n\nimport { Chevron } from 'images/bend'\n\nconst ChevronBase = styled(Chevron).withConfig({\n shouldForwardProp: (prop) => !['active'].includes(prop)\n})`\n transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out;\n transform: ${(props) => {\n switch (props.direction) {\n case 'up':\n return props.active ? '' : 'rotate(180deg)'\n case 'down':\n return props.active ? 'rotate(180deg)' : ''\n case 'left':\n return props.active ? 'rotate(-90deg)' : 'rotate(90deg)'\n case 'right':\n return props.active ? 'rotate(90deg)' : 'rotate(-90deg)'\n }\n }};\n fill: ${(props) =>\n props.fill\n ? props.fill\n : props.active\n ? props.invertColor\n ? props.theme.colors.base\n : props.theme.colors.primary\n : props.invertColor\n ? props.theme.colors.base\n : props.theme.colors.grey5};\n ${layout}\n ${space}\n`\n\nChevronBase.defaultProps = {\n height: '20px',\n width: '20px'\n}\n\nexport default ChevronBase\n","import styled from 'styled-components'\nimport { DownloadFile } from 'images/bend'\n\nconst DownloadFileBase = styled(DownloadFile)((props) => ({\n fill: props.theme.colors.primary\n}))\n\nexport default DownloadFileBase\n"],"sourceRoot":""}