\n);\n\nexport default FiveHundredErrorPage;\n","import FiveHundredErrorPage from './FiveHundredErrorPage';\nimport FiveHundredError from './FiveHundredError';\n\nexport { FiveHundredError, FiveHundredErrorPage };\n","// extracted by mini-css-extract-plugin\nexport {};","import React from 'react';\nimport { Typography, Button } from '@sm/wds-react';\nimport { T, defineMessages } from '@sm/intl';\n\nimport './four-oh-four-error.scss';\n\nconst COPY = defineMessages({\n SORRY_MESSAGE: {\n id: 'FourOhFourError.sorryMessage',\n defaultMessage: \"We're sorry\",\n description: '[Type: Label][Vis.: med] - We are sorry message',\n },\n CANT_FIND_PAGE: {\n id: 'FourOhFourError.cantFindPage',\n defaultMessage: \"We can't find the page you're looking for.\",\n description: '[Type: Label][Vis.: med] - Cant find page message',\n },\n CHECK_URL: {\n id: 'FourOhFourError.checkURL',\n defaultMessage:\n \"Please check the URL you entered to make sure it's spelled correctly.\",\n description: '[Type: Label][Vis.: med] - check URL subtitle',\n },\n HELP_FIND_WAY: {\n id: 'FourOhFourError.helpFindWay',\n defaultMessage:\n 'Still not sure how to get to the page you want? Maybe we can help you find your way:',\n description: '[Type: Label][Vis.: med] - Help find your way subtitle',\n },\n SIGN_UP_FREE: {\n id: 'FourOhFourError.signUpFree',\n defaultMessage: 'Sign Up FREE',\n description: '[Type: Label][Vis.: med] - Sign up free button',\n },\n});\n\nconst FourOhFourError = () => (\n
\n
\n \n \n \n
\n \n \n \n \n
\n \n
\n
\n \n
\n \n\n \n Want to create your own survey?\n \n\n \n
\n
\n
\n);\n\nexport default FourOhFourError;\n","// extracted by mini-css-extract-plugin\nexport {};","import React from 'react';\nimport { Typography } from '@sm/wds-react';\nimport { T, defineMessages } from '@sm/intl';\n\nimport './forbidden-error.scss';\n\n// put this into common error component strings file\nconst COPY = defineMessages({\n SORRY_MESSAGE: {\n id: 'ForbiddenError.sorryMessage',\n defaultMessage: \"We're sorry\",\n description: '[Type: Label][Vis.: med] - We are sorry message',\n },\n PERMISSIONS: {\n id: 'ForbiddenError.permissions',\n defaultMessage: 'You do not have permission to see this page.',\n description: '[Type: Label][Vis.: med] - We are sorry message',\n },\n CHECK_URL: {\n id: 'ForbiddenError.checkURL',\n defaultMessage:\n \"Please check the URL you entered to make sure it's spelled correctly.\",\n description: '[Type: Label][Vis.: med] - check URL subtitle',\n },\n HELP_FIND_WAY: {\n id: 'ForbiddenError.helpFindWay',\n defaultMessage:\n 'Still not sure how to get to the page you want? Maybe we can help you find your way:',\n description: '[Type: Label][Vis.: med] - Help find your way subtitle',\n },\n HOME: {\n id: 'ForbiddenError.home',\n defaultMessage: 'Home',\n description:\n '[Type: Label][Vis.: med] - Home link in Five Hundred Error Message',\n },\n SITEMAP: {\n id: 'ForbiddenError.sitemap',\n defaultMessage: 'Sitemap',\n description:\n '[Type: Label][Vis.: med] - Sitemap link in Five Hundred Error Message',\n },\n HELP_CENTER: {\n id: 'ForbiddenError.helpCenter',\n defaultMessage: 'Help Center',\n description:\n '[Type: Label][Vis.: med] - Help Center link in Five Hundred Error Message',\n },\n TEMPLATES: {\n id: 'ForbiddenError.templates',\n defaultMessage: 'Templates',\n description:\n '[Type: Label][Vis.: med] - Templates link in Five Hundred Error Message',\n },\n LEARN_MORE: {\n id: 'ForbiddenError.learnMore',\n defaultMessage: 'Learn More',\n description:\n '[Type: Label][Vis.: med] - Learn More link in Five Hundred Error Message',\n },\n});\n\nconst ForbiddenError = () => (\n
\n);\n\nexport default ForbiddenError;\n","import fetch from 'isomorphic-fetch';\nimport { getClientEnvironmentDetails } from '@sm/utils';\nimport { clientErrorHandler } from '../..';\n\nconst { isBrowser } = getClientEnvironmentDetails();\n\n// Small in-memory only localstorage\nfunction inMemoryLocalStorage() {\n return {\n _data: {},\n setItem(id, val) {\n let dataId = this._data[id];\n dataId = String(val);\n return dataId;\n },\n getItem(id) {\n const dataID = Object.prototype.hasOwnProperty.call(this._data, id)\n ? this._data[id]\n : undefined;\n return dataID;\n },\n removeItem(id) {\n const deleteDataId = delete this._data[id];\n return deleteDataId;\n },\n clear() {\n let data = this._data;\n data = {};\n return data;\n },\n };\n}\nif (isBrowser && !('localStorage' in window)) {\n window.localStorage = inMemoryLocalStorage();\n}\n\nlet Storage;\n\nconst LAST_BACKEND_ACTIVITY_KEY = 'SessionCtrl.lba';\nconst LAST_FRONTEND_ACTIVITY_KEY = 'SessionCtrl.lfa';\n\nconst RUN_EVERY = 1000 * 30; // Every 30 seconds\n\nconst state = {\n initialized: false,\n timeoutInterval: 0, // seconds\n intervalInstanceId: null, // setInterval instance ID\n reminderCb: null, // function passed during init\n\n // settings\n minimumDeltaForFlight: 5, // seconds\n minimumDeltaForBackendExtension: 5 * 60, // 5 minutes\n minimumDeltaToShowReminder: 5 * 60, // 5 minutes\n};\n\nfunction now() {\n return parseInt(new Date().getTime() / 1000, 10);\n}\n\nfunction getTimeToBackendTimeout() {\n const lastBackendActivity = Storage.getItem(LAST_BACKEND_ACTIVITY_KEY);\n const n = now();\n return state.timeoutInterval - (n - lastBackendActivity);\n}\n\nfunction getTimeToFrontendTimeout() {\n const lastFrontendActivity = Storage.getItem(LAST_FRONTEND_ACTIVITY_KEY);\n const n = now();\n return state.timeoutInterval - (n - lastFrontendActivity);\n}\n\nfunction logout() {\n if (state.timeoutInterval === 0) {\n window.location.assign(`/user/sign-out/?timeout=true`);\n } else {\n window.location.assign(\n `/user/sign-out/?timeout=${Math.ceil(state.timeoutInterval / 60)}`\n );\n }\n}\n\nfunction updateBackendActivity() {\n return Storage.setItem(LAST_BACKEND_ACTIVITY_KEY, now());\n}\n\nasync function extendBackend(callback) {\n try {\n const resp = await fetch('/user/session/', {\n method: 'GET',\n credentials: 'include',\n });\n if (/sign-in/.test(resp.url)) {\n logout();\n } else {\n updateBackendActivity();\n return callback && callback();\n }\n } catch (e) {\n clientErrorHandler.logError(e);\n }\n return null;\n}\n\nfunction updateFrontendActivity() {\n return Storage.setItem(LAST_FRONTEND_ACTIVITY_KEY, now());\n}\n\nfunction verifyLocalStorage() {\n const testKey = 'value_that_is_not_expected_to_be_there';\n Storage = localStorage;\n try {\n Storage.setItem(testKey, 'foo');\n if (Storage.getItem(testKey) !== 'foo') {\n throw new Error('Unable to find match in localStorage');\n }\n Storage.removeItem(testKey);\n } catch {\n Storage = inMemoryLocalStorage();\n }\n}\n\nfunction bindActivityEvents() {\n document.addEventListener('mousedown', updateFrontendActivity, false);\n document.addEventListener('touchstart', updateFrontendActivity, false);\n document.addEventListener('keydown', updateFrontendActivity, false);\n}\n\nfunction timer() {\n const timeToFrontendTimeout = getTimeToFrontendTimeout();\n const timeToBackendTimeout = getTimeToBackendTimeout();\n if (timeToFrontendTimeout < state.minimumDeltaForFlight) {\n return logout();\n }\n\n // If we have been active in the frontend only but not done any AJAX request\n // then we want to extend the backend\n if (\n timeToBackendTimeout < state.minimumDeltaForBackendExtension &&\n timeToFrontendTimeout > state.minimumDeltaToShowReminder\n ) {\n extendBackend();\n } else if (timeToFrontendTimeout < state.minimumDeltaToShowReminder) {\n state.reminderCb(timeToFrontendTimeout);\n }\n return null;\n}\n\nfunction startTimer() {\n state.intervalInstanceId = window.setInterval(timer, RUN_EVERY);\n}\n\n// Make it a singleton\nconst instance = {\n init({ timeout, reminderCb }) {\n if (!isBrowser) {\n // eslint-disable-next-line\n console.warn('SessionCtrl init() method was called without a window!');\n return;\n }\n state.timeoutInterval = timeout; // timeout in seconds\n state.reminderCb = reminderCb;\n if (timeout && !state.initialized) {\n verifyLocalStorage();\n bindActivityEvents();\n updateBackendActivity();\n updateFrontendActivity();\n startTimer();\n state.initialized = true;\n }\n },\n\n removeCallback() {\n delete state.reminderCb;\n },\n\n continueSession(callback) {\n updateFrontendActivity();\n extendBackend(callback);\n },\n};\n\nObject.freeze(instance);\n\nexport default instance;\n","// extracted by mini-css-extract-plugin\nexport {};","import React, { Component } from 'react';\nimport { defineMessages, T, t } from '@sm/intl';\nimport PropTypes from 'prop-types';\nimport {\n Modal,\n ModalBody,\n ModalHeader,\n ModalFooter,\n Align,\n Grid,\n Row,\n Col,\n Icon,\n Button,\n} from '@sm/wds-react';\nimport SessionCtrl from './SessionCtrl';\n\nimport './session-timeout-modal.scss';\n\nconst COPY = defineMessages({\n CONTINUE_SESSION: {\n id: 'SessionTimeoutModal.ContinueSession',\n defaultMessage: 'CONTINUE SESSION',\n description:\n '[Type: Button][Vis.: med] - CTA for the user to continue their browsing session and not be logged out automatically.',\n },\n TIME_LEFT_MSG: {\n id: 'SessionTimeoutModal.TimeLeftMessage',\n defaultMessage:\n 'After {minutesLeft, plural, one { 1 minute } other {{ minutesLeft } minutes}} of inactivity, we sign you out to keep your data safe. Your session will expire soon, unless you click Continue Session',\n description:\n '[Type: Paragraph][Vis.: med] - Message given to the user informing them of the time left before automatic expiration.',\n },\n SESSION_HEADER: {\n id: 'SessionTimeoutModal.TimeLeftHeader',\n defaultMessage: 'Do you want to continue your session?',\n description:\n '[Type: Header][Vis.: med] - Modal header for the prompt asking the user if they want to continue their browsing session.',\n },\n});\n\nclass SessionTimeoutModal extends Component {\n static propTypes = {\n user: PropTypes.shape({\n hipaa: PropTypes.shape({\n isHipaaEnabled: PropTypes.bool,\n }),\n group: PropTypes.shape({\n sessionTimeout: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n }),\n }).isRequired,\n };\n\n state = {\n show: false,\n timeLeft: null,\n };\n\n componentDidMount() {\n const { user } = this.props;\n const timeout =\n user &&\n ((user.hipaa && user.hipaa.isHipaaEnabled && 30 * 60) ||\n (user.group &&\n user.group.sessionTimeout &&\n parseInt(user.group.sessionTimeout, 10) * 60));\n if (timeout !== undefined) {\n // it could be 0\n SessionCtrl.init({ timeout, reminderCb: this.onReminder });\n }\n }\n\n componentWillUnmount() {\n SessionCtrl.removeCallback();\n }\n\n onReminder = timeLeft => {\n this.setState({ show: true, timeLeft });\n };\n\n onClose = () => {\n SessionCtrl.continueSession(() => {\n this.setState({ show: false, timeLeft: 0 });\n });\n };\n\n render() {\n const timeLeft = Math.ceil(this.state.timeLeft / 60);\n return (\n \n \n \n \n \n
\n
\n \n
\n (\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default SessionTimeoutModal;\n","import { FC, ReactNode } from 'react';\n\nimport { clientErrorHandler } from '../..';\n\ninterface urlObject {\n smReleaseToggles?: string;\n}\n\ninterface cookieObject {\n // eslint-disable-next-line camelcase\n sm_release_toggles?: string;\n}\n\ntype url = string | urlObject;\ntype cookies = string | cookieObject;\n\nexport interface ReleaseToggleProps {\n toggleId: string;\n url?: url;\n cookies?: cookies;\n children: ReactNode;\n}\n\n/**\n * Takes the cookie string from the document and returns an Array of\n * configured release toggle IDs using the key 'sm_release_toggles'.\n *\n * @param {string} cookie: Cookie string from document\n * @return {Array}\n */\nexport const getOverridesFromCookie = (cookie?: string) => {\n if (!cookie) return [];\n const found = cookie\n .split(';')\n .filter(elem => elem)\n .map(elem => elem.split('='))\n .filter(([key, val]) => key && val)\n .map(([key, val]) => ({ key: key.trim(), val: val.trim() }))\n .find(elem => elem.key === 'sm_release_toggles');\n\n const toggles: Array = [];\n if (found) {\n found.val.split(',').forEach(elem => {\n toggles.push(elem.trim());\n });\n }\n return toggles;\n};\n\n/**\n * Takes a URL string from the window.location object (must include query\n * params) and returns an Array of the configured release toggle IDs under the\n * key 'smReleaseToggles'.\n *\n * @param {string} url: HREF string from the window.location object\n * @return {*}\n */\nexport const getOverridesFromQueryParameters = (url?: string) => {\n if (!url) return [];\n const queryStrIndex = url.indexOf('?');\n if (queryStrIndex > -1) {\n const queryStr = url.slice(queryStrIndex + 1);\n const releaseToggles = queryStr\n .split('&')\n .map(elem => elem.split('='))\n .find(elem => {\n const [key] = elem;\n return key === 'smReleaseToggles';\n });\n if (releaseToggles && releaseToggles.length > 1) {\n return releaseToggles[1].split(',').filter(elem => elem);\n }\n }\n return [];\n};\n\n/**\n * Looks for a 'sm_release_toggles' cookie. If it exists, parses out the\n * comma-separated list of toggle IDs and returns a Set of the IDs.\n *\n * @return {Set}: IDs of enabled toggles\n */\nexport const getOverrides = (url?: url, cookies?: cookies) => {\n // We know that this is from the Express req.\n if (typeof url === 'object' && typeof cookies === 'object') {\n const paramValues = (url.smReleaseToggles || '')\n .split(',')\n .map(elem => elem.trim());\n const cookieValues = (cookies.sm_release_toggles || '')\n .split(',')\n .map(elem => elem.trim());\n return new Set(paramValues.concat(cookieValues));\n }\n return new Set(\n getOverridesFromCookie(document.cookie).concat(\n getOverridesFromQueryParameters(window.location.href)\n )\n );\n};\n\n/**\n * Component wraps code that isn't ready to be seen. Children are only\n * rendered if the 'releaseToggles' cookie or query parameter is set\n * where the value is a comma-separated list of toggle IDs\n * (IE. document.cookie=\"releaseToggles=ID1,ID2,ID3\", whitespace is trimmed;\n * or https://localmonkey.com/my_page/?smReleaseToggles=ID1,ID2,ID3, no\n * whitespace trim) and the ID is in the list. If this component is rendered\n * on the client, these values are manually parsed from the window. If not,\n * they must be passed in through the queryParams and cookies props.\n *\n * Component may also have a child that is a function with the signature:\n * (isToggledOn: boolean) => Node which can be used to render a default\n * component in place of the feature component.\n *\n * If there is an error parsing the override cookies or params, it is caught,\n * logged and then the child function is called with false or null is returned.\n */\nconst ReleaseToggle: FC = ({\n toggleId,\n url,\n cookies,\n children,\n}) => {\n let showToggle;\n try {\n showToggle = getOverrides(url, cookies).has(toggleId);\n } catch (err) {\n showToggle = false;\n // TODO: Remove this cast when clientErrorHandler has been typed\n (clientErrorHandler as any).logError(\n err,\n 'There was a problem reading the override cookies and params in a ReleaseToggle'\n );\n }\n if (typeof children === 'function') return children(showToggle);\n return showToggle ? children : null;\n};\n\nexport default ReleaseToggle;\n","export default __webpack_public_path__ + \"webassets/cookies-plate.aeff1a13.png\";","// extracted by mini-css-extract-plugin\nexport {};","import React, { useState, useEffect } from 'react';\nimport Cookie from 'js-cookie';\nimport PropTypes from 'prop-types';\nimport { T, t, defineMessages } from '@sm/intl';\nimport { MetricsTracker, USER_EVENTS } from '@sm/metrics';\n\nimport {\n Align,\n Button,\n Col,\n Container,\n Grid,\n Modal,\n Row,\n Sheet,\n Typography,\n} from '@sm/wds-react';\n\nimport { TabletScreen, MobileScreen } from '../MediaComponents';\n\nimport cookieImage from './static/images/cookies-plate.png';\n\nimport './cookie-banner.scss';\n\nconst CONSENT_KEY = 'gdpr_consent';\nconst CONSENT_DENIED_KEY = 'gdpr_consent_denied';\n\nconst COPY = defineMessages({\n COOKIE_BANNER: {\n id: 'CookieBanner.cookiePolicy',\n defaultMessage:\n // eslint-disable-next-line no-multi-str\n 'In order to give you the best experience, SurveyMonkey and our third party partners may use cookies\\\n and similar technologies, for example, to analyze usage and optimize our sites and services, personalize content,\\\n tailor and measure our marketing and to keep the site secure. Please visit our\\\n privacy policy for more information and our\\\n cookies policy for a list of all cookies used.',\n description: '[Type: Label][Vis.: med] - Cookie Banner Message',\n },\n COOKIE_PREFERENCES: {\n id: 'CookieBanner.preferences',\n defaultMessage:\n 'Clear or manage cookie preferences.',\n description: '[Type: Label][Vis.: med] - Cookie Banner Preferences',\n },\n IMAGE_ALT: {\n id: 'CookieBanner.imageAlt',\n defaultMessage: 'Plate of Cookies',\n description: '[Type: Label][Vis.: med] - Cookie Banner Image Alt Tag',\n },\n NO: {\n id: 'CookieBanner.decline',\n defaultMessage: 'DISAGREE',\n description: '[Type: Label][Vis.: med] - Cookie Banner Decline button',\n },\n AGREE: {\n id: 'CookieBanner.agree',\n defaultMessage: 'AGREE',\n description: '[Type: Label][Vis.: med] - Cookie Banner Agree button',\n },\n});\n\nconst CookieBanner = ({ GDPR }) => {\n const { hasGDPRConsent, hasExplictlyDenied } = GDPR;\n const [show, setShow] = useState(true);\n const [consent, setConsent] = useState('gdpr_consent_denied');\n\n useEffect(() => {\n if (!show) {\n MetricsTracker.track({\n name: USER_EVENTS.GDPR_ACTION,\n data: {\n actionType: USER_EVENTS.GDPR_ACTION,\n actionFlow: consent !== CONSENT_KEY ? 'denyConsent' : 'giveConsent',\n },\n });\n }\n }, [show, consent]);\n\n if (hasGDPRConsent || hasExplictlyDenied || !show) {\n return null;\n }\n\n /**\n * Agree to tracking cookie\n * @param {Object} e\n */\n const onAgree = e => {\n e.stopPropagation();\n Cookie.set(CONSENT_KEY, 'true', { expires: 365, secure: true });\n setConsent(CONSENT_KEY);\n setShow(!show);\n };\n\n /**\n * Deny tracking cookie\n */\n const onDeny = () => {\n Cookie.set(CONSENT_DENIED_KEY, 'true', { expires: 7, secure: true });\n setConsent(CONSENT_DENIED_KEY);\n setShow(!show);\n };\n\n return (\n
\n );\n};\n\n/**\n * Component for checking if the user browser is supported\n *\n * Basic usage example:\n * ``\n *\n * The basic usage will check against the default supported browsers\n * as documented here: https://help.surveymonkey.com/articles/en_US/kb/What-browser-versions-do-you-support\n *\n * If the user's browser is not supported a modal window will be displayed to the user.\n *\n * Optionally one can provide a list of supported browsers via the supportedBrowsers prop.\n * Also, a different UI may be rendered if a children is passed to the component.\n */\nconst BrowserGuard = ({ children, supportedBrowsers }) => {\n const [hasVerified, setHasVerified] = useState(false);\n const [isSupported, setIsSupported] = useState(false);\n\n useEffect(() => {\n if (window && !hasVerified) {\n setIsSupported(\n isBrowserSupported(window.navigator.userAgent, supportedBrowsers)\n );\n setHasVerified(true);\n }\n }, [hasVerified, supportedBrowsers]);\n\n return (\n \n \n
{children}
\n \n {null}\n \n );\n};\n\nBrowserGuard.propTypes = {\n children: PropTypes.element,\n supportedBrowsers: PropTypes.arrayOf(\n PropTypes.shape({\n vendor: PropTypes.oneOf(['chrome', 'firefox', 'safari', 'ie', 'edge'])\n .isRequired,\n operator: PropTypes.oneOf(['>', '<', '~', '=', '>=', '<=']).isRequired,\n version: PropTypes.string.isRequired,\n })\n ),\n};\n\nBrowserGuard.defaultProps = {\n children: ,\n supportedBrowsers: undefined,\n};\n\nexport default BrowserGuard;\n","import React from 'react';\nimport { createTheming, createUseStyles } from 'react-jss';\n\n/* Create a React context which JSS would need to wrap on */\nconst SurveyThemeContext = React.createContext({});\nSurveyThemeContext.displayName = 'SurveyTheme';\n\n/* Use JSS custom hook to create the wrapper */\nconst theming = createTheming(SurveyThemeContext);\n\n/* Expose the associated hooks with aliases */\nexport const {\n useTheme: useSurveyTheme,\n ThemeProvider: SurveyThemeProvider,\n} = theming;\n\n/**\n * For convenience, expose a custom hook which would carry the theming context wrapper along,\n * as well as injecting style sheet name-space / class name prefix as \"sm\" by default.\n *\n * Note: One may still utilize the stock `createUseStyles()` hook to construct styles regardless\n * relying on a survey theme or not; however if they do, please keep in mind that the recommended\n * way per JSS documentation is to pass in `theming` context wrapper every time.\n * ( https://cssinjs.org/react-jss?v=v10.5.0#using-custom-theming-context )\n *\n * It is also noteworthy that as of JSS v.10.5.0, there's a strange behavior\n * when calling `createUseStyles()`, if the first parameter is an object (en lieu a function),\n * it would ignore the `theming` context wrapper coming along in the same call.\n * Considering the caller of this hook would very much acquire the theming data on the nested\n * function values, we're hereby enforce the behavior which would also name-space the style sheet.\n */\nexport const createSurveyStyles = (styles, opts = {}) => {\n /* force to pass a function in and ignore a linter error to avoid JSS warnings */\n /* eslint-disable-next-line no-unused-vars */\n const _styles = typeof styles === 'function' ? styles : theme => styles;\n\n /* call the higher-order function in JSS with the normalized signature */\n return createUseStyles(_styles, { theming, name: 'sm', ...opts });\n};\n\n/**\n * The context wrapper constructed by JSS `createTheming()` hook.\n * Note: `theming.context` points to the same SurveyThemeContext we just instantiated\n */\nexport default theming;\n","const fontWeightOption = Object.freeze({\n BOLD: 700,\n LIGHT: 300,\n MEDIUM: 500,\n REGULAR: 400,\n});\n\nconst fontStyleOption = Object.freeze({\n INHERIT: 'inherit',\n INITIAL: 'initial',\n ITALIC: 'italic',\n NORMAL: 'normal',\n OBLIQUE: 'oblique',\n});\n\nconst textDecorationOption = Object.freeze({\n NONE: 'none',\n UNDERLINE: 'underline',\n});\n\nconst formatStyle = ([key, val]) => {\n switch (key) {\n case 'fontWeight':\n return { [key]: fontWeightOption[val] };\n case 'fontStyle':\n return { [key]: fontStyleOption[val] };\n case 'textDecoration':\n return { [key]: textDecorationOption[val] };\n case 'backgroundImage':\n return val.url ? { [key]: `url(${val.url})` } : null;\n default:\n return { [key]: val };\n }\n};\n\nconst formatCommonStyle = ({ __typename, ...styles }) =>\n Object.entries(styles).reduce((acc, [key, val]) => {\n return !val\n ? acc\n : {\n ...acc,\n ...formatStyle([key, val]),\n };\n }, {});\n\nconst formatEntity = data => data && formatCommonStyle(data);\n\nexport default formatEntity;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useQuery } from 'react-apollo';\nimport { SurveyThemeProvider } from './context';\nimport { getSurveyDesign } from './SurveyTheme.graphql';\nimport formatEntity from './helpers';\n\n/* A simple wrapper composes inner children with the fetched theming info. */\nconst SurveyTheme = ({ children, surveyId, targetEndPoint, headers }) => {\n const queryOptions = {\n variables: {\n id: surveyId,\n },\n // acquire data even when an error occurs\n errorPolicy: 'all',\n partialRefetch: true,\n };\n\n // enable query context if tgtEndPoint provided\n if (targetEndPoint) {\n queryOptions.context = {};\n queryOptions.context.targetPath = `/lo-graphql/${targetEndPoint}`;\n // include headers if provided\n if (headers) {\n queryOptions.context.headers = headers;\n }\n }\n\n const { data, loading, error: fetchError, refetch } = useQuery(\n getSurveyDesign,\n queryOptions\n );\n\n /* No-op on the loading state.\n * The wrapping component should know better how to compose with a representable skeleton.\n */\n if (loading) {\n return null;\n }\n\n const { theme, ...settings } = data?.survey?.design;\n\n const {\n selectedColorPalette,\n layout,\n surveyPage,\n surveyTitle,\n pageTitle,\n questionTitle,\n questionBody,\n button,\n error,\n exitLink,\n artifacts,\n } = theme;\n\n const { logo, progressBar } = settings;\n\n const surveyPageBackgroundImage = artifacts?.background?.url;\n\n const surveyTheme = {\n layout,\n surveyPage: {\n ...formatEntity(surveyPage),\n ...(surveyPageBackgroundImage && {\n backgroundImage: `url(${surveyPageBackgroundImage})`,\n }),\n },\n surveyTitle: formatEntity(surveyTitle),\n pageTitle: formatEntity(pageTitle),\n questionTitle: formatEntity(questionTitle),\n questionBody: {\n color: selectedColorPalette?.answerColor,\n ...formatEntity(questionBody),\n },\n button: formatEntity(button),\n error: formatEntity(error),\n exitLink: formatEntity(exitLink),\n ...(logo && {\n logo: formatEntity(logo),\n }),\n ...(progressBar && {\n progressBar: formatEntity(progressBar),\n }),\n ...formatEntity(selectedColorPalette),\n };\n\n return (\n \n {children}\n \n );\n};\n\nSurveyTheme.defaultProps = {\n targetEndPoint: undefined,\n headers: undefined,\n};\n\nSurveyTheme.propTypes = {\n children: PropTypes.node.isRequired,\n surveyId: PropTypes.string.isRequired,\n targetEndPoint: PropTypes.string,\n headers: PropTypes.shape(),\n};\n\nexport default SurveyTheme;\n","import SurveyTheme from './SurveyTheme';\nimport theming, {\n useSurveyTheme,\n createSurveyStyles,\n SurveyThemeProvider,\n} from './context';\n\nexport {\n SurveyTheme,\n SurveyThemeProvider,\n useSurveyTheme,\n createSurveyStyles,\n theming,\n};\n","import React from 'react';\nimport { createUseStyles, useTheme } from 'react-jss';\n\nconst basePath = process.env.NODE_ENV !== 'production' ? 'cdn.mtassets.net' : 'cdn.smassets.net';\nconst theme = {\n // @todo: created ticket to update path once fonts live in CDN for good. https://jira.surveymonkey.com/browse/WRENCH-1128\n assetsBaseUri: `https://${basePath}/assets/wds-core_4_20_1`,\n assetsFontPath: '/fonts/National2Web',\n assetsFontName: \"'National 2'\",\n assetsFontVersion: 2,\n fontFamily: {\n base: \"'National 2', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'MS ゴシック', 'MS Gothic', sans-serif\",\n icon: 'Mateo'\n },\n fontSize: {\n bodySm: 13,\n body: 15,\n cardTitle: 16,\n sectionTitle: 26,\n pageTitle: 34,\n hero2: 40,\n hero1: 50\n },\n fontWeight: {\n light: 300,\n regular: 400,\n medium: 500\n },\n semanticColor: {\n primary: '#00BF6F',\n success: '#00BF6F',\n info: '#2DCCD3',\n warning: '#F05B24',\n upgrade: '#F9BE00',\n secondary: '#6B787F',\n muted: '#D0D2D3'\n },\n typeColor: {\n dark: '#333E48',\n light: '#FFFFFF',\n darkMuted: '#6B787F',\n lightMuted: '#D0D2D3',\n link: '#007FAA',\n on: {\n primary: '#FFFFFF',\n success: '#FFFFFF',\n info: '#333E48',\n warning: '#FFFFFF',\n upgrade: '#333E48',\n secondary: '#FFFFFF',\n muted: '#333E48',\n link: '#FFFFFF'\n }\n },\n bgColor: {\n bg: '#F7F8FA',\n dark: '#333E48',\n overlay: 'rgba(107, 120, 127, .86)',\n accent: '#EDEEEE',\n light: '#FFFFFF'\n },\n borderColor: {\n border: '#D0D2D3',\n active: '#00BF6F',\n hover: '#9DA5AA',\n muted: '#EDEEEE'\n },\n border: {\n border: '1px solid #D0D2D3',\n borderHover: '1px solid #9DA5AA',\n borderActive: '1px solid #00BF6F',\n borderMuted: '1px solid #EDEEEE'\n },\n dataColor: {\n one: '#507CB6',\n two: '#00BF6F',\n three: '#6BC8CD',\n four: '#F9BE00',\n five: '#7D5E90',\n six: '#DB4D5C',\n seven: '#768086',\n eight: '#D25F90',\n nine: '#A38364',\n ten: '#FF8B4F'\n },\n borderRadius: {\n zero: '0',\n small: '2px',\n medium: '24px',\n large: '50%'\n },\n iconSize: {\n sm: '13px',\n md: '16px',\n lg: '26px',\n xl: '34px'\n },\n spacing: {\n 1: 4,\n 2: 8,\n 3: 12,\n 4: 16,\n 5: 24,\n 6: 32,\n 7: 64,\n 8: 96,\n 9: 128\n },\n breakpoints: {\n xs: '0',\n sm: '576px',\n md: '768px',\n lg: '992px',\n xl: '1200px'\n },\n elevation: {\n shadow: {\n none: 'none',\n sky: '0 2px 4px 0 rgba(0, 0, 0, 0.14)',\n space: '0 2px 8px 0 rgba(0,0,0,0.14)'\n }\n },\n zIndex: {\n none: '0',\n sky: '999',\n space: '9999'\n },\n alert: {\n boxShadow: 'none',\n bgColor: '#333E48',\n typeColor: '#FFFFFF',\n paddingY: 16,\n linkColor: '#FFFFFF'\n },\n avatar: {\n height: {\n sm: '24px',\n md: '32px',\n lg: '64px',\n xl: '96px'\n },\n borderRadius: {\n square: '0%',\n rounded: '50%'\n },\n border: '2px solid #FFFFFF'\n },\n badge: {\n height: {\n sm: '22px',\n md: '26px',\n lg: '30px'\n },\n fontSize: {\n sm: '13px',\n md: '13px',\n lg: '15px'\n },\n padding: '1em',\n borderRadius: '24px',\n boxShadow: 'none'\n },\n banner: {\n borderRadius: '2px',\n bgColor: '#ffffff',\n typeColor: '#333e48',\n markWidth: '8px',\n borderSize: '1px'\n },\n button: {\n height: {\n sm: 30,\n md: 40,\n lg: 50\n },\n fontSize: {\n sm: 13,\n md: 15,\n lg: 15\n },\n padding: {\n sm: 12,\n md: 24,\n lg: 36\n },\n borderRadius: 2,\n boxShadow: 'none'\n },\n card: {\n borderRadius: '2px',\n boxShadow: 'none',\n border: '1px solid #EDEEEE',\n padding: '24px',\n bgColor: '#FFFFFF'\n },\n checkbox: {\n bgColorOn: '#00BF6F',\n iconColorOn: '#FFFFFF'\n },\n coachmark: {\n bgColor: '#2DCCD3'\n },\n formGroup: {\n spaceBetween: '8px'\n },\n grid: {\n bleed: {\n xs: '16px',\n sm: '32px',\n md: '32px',\n lg: '32px',\n xl: '32px'\n },\n columns: 12,\n gutter: {\n xs: 16,\n sm: 24,\n md: 24,\n lg: 24,\n xl: 24\n },\n maxWidth: {\n xs: 'none',\n sm: '576px',\n md: '768px',\n lg: '992px',\n xl: '1400px '\n }\n },\n input: {\n height: {\n sm: '30px',\n md: '40px',\n lg: '50px'\n },\n fontSize: '15px',\n padding: {\n sm: '8px',\n md: '12px',\n lg: '16px'\n },\n borderRadius: '2px'\n },\n inputGroup: {\n heightSm: '30px',\n heightMd: '40px',\n heightLg: '50px',\n borderRadius: '2px',\n iconColor: '#333E48'\n },\n list: {\n addonIconColor: '#333E48',\n affordanceIconColor: '#6B787F',\n itemHeight: '52px',\n labelFontSize: '13px',\n markWidth: '4px'\n },\n menu: {\n boxShadow: '0 2px 8px 0 rgba(0,0,0,0.14)',\n maxWidth: 300,\n minWidth: 175,\n maxHeight: 325\n },\n modal: {\n borderRadius: 0,\n headBgColor: '#FFFFFF',\n headTypeColor: '#333E48',\n bodyBgColor: '#EDEEEE',\n bodyTypeColor: '#333E48',\n footBgColor: '#FFFFFF',\n footTypeColor: '#333E48',\n border: '1px solid #333E48',\n boxShadow: 'none'\n },\n pane: {\n bgColor: '#EDEEEE',\n padding: '24px'\n },\n progressBar: {\n borderRadius: 'none',\n height: {\n sm: '4px',\n md: '8px',\n lg: '16px'\n },\n fillColor: '#00BF6F',\n trackColor: '#D0D2D3'\n },\n radio: {\n bgColorOn: '#00BF6F',\n iconColorOn: '#FFFFFF'\n },\n textarea: {\n fontSize: '15px',\n paddingSm: '4px 8px 4px',\n paddingMd: '8px 12px 8px',\n paddingLg: '12px 16px 12px',\n borderRadius: '2px'\n },\n motion: {\n curve: {\n enter: 'cubic-bezier(0, 0, 0, 1)',\n exit: 'cubic-bezier(1, 0, 1, 1)',\n ease: 'cubic-bezier(.2, 0, .1, 1)',\n easeReverse: 'cubic-bezier(.9, 0, .8, 1)',\n bounceStart: 'cubic-bezier(0, 0, .1, 1)',\n bounceEnd: 'cubic-bezier(.2, 0, 0, 1)'\n },\n fade: {\n speed: {\n slow: 300,\n normal: 200,\n fast: 100\n }\n },\n slide: {\n speed: {\n slow: 450,\n normal: 350,\n fast: 250\n },\n distance: {\n normal: 25,\n near: 5,\n far: 75\n }\n }\n },\n multiselect: {\n borderRadius: 2\n },\n progressCircle: {\n trackColor: '#D0D2D3'\n },\n select: {\n height: {\n sm: '30px',\n md: '40px',\n lg: '50px'\n },\n padding: {\n sm: '8px',\n md: '12px',\n lg: '16px'\n },\n borderRadius: '2px',\n iconColor: '#333E48',\n fontSize: '15px'\n },\n sheet: {\n width: {\n sm: '320px',\n md: '50%',\n lg: '75%'\n }\n },\n slider: {\n handleBGColor: '#333E48',\n trackBGColor: '#D0D2D3',\n fillBGColor: '#00BF6F',\n borderRadius: 24,\n height: 16\n },\n // Naming with Comp here because switch is reserved.\n switchComp: {\n track: {\n bgColorOn: '#333E48',\n bgColorOff: '#D0D2D3'\n },\n thumb: {\n bgColorOn: '#00BF6F',\n bgColorOff: '#FFFFFF',\n borderOff: '1px solid #D0D2D3'\n },\n borderRadius: '24px',\n height: '16px',\n leftOffset: '20px',\n width: '40px'\n },\n tab: {\n borderRadius: 'none',\n indicatorHeight: 3,\n indicatorColor: '#00BF6F',\n typeColor: '#6B787F',\n fontSize: 13,\n fontWeight: 500,\n paddingY: 12,\n paddingX: 2\n },\n toast: {\n padding: '24px',\n bgColor: '#333E48',\n typeColor: '#FFFFFF',\n borderRadius: '2px',\n width: '350px',\n titleFontSize: '16px',\n bodyTypeSize: '13px',\n linkColor: '#FFFFFF',\n boxShadow: 'none'\n },\n popout: {\n width: {\n sm: '275px',\n md: '360px',\n lg: '445px'\n },\n boxShadow: '0 2px 8px 0 rgba(0,0,0,0.14)',\n pipSize: 12,\n borderRadius: '2px',\n border: 'none',\n bodyFontSize: '13px'\n },\n tooltip: {\n bgColor: '#333E48',\n typeColor: '#FFFFFF',\n borderRadius: 2,\n pipSize: 12,\n fontSize: 13,\n padding: [12, 16],\n fontWeight: 400,\n boxShadow: 'none'\n },\n table: {\n thTypeColor: '#333E48',\n thBgColor: 'transparent',\n thDividerLineColor: 'transparent',\n tdTypeColor: '#333E48',\n tdBgColor: 'transparent',\n cellMinHeight: '50px',\n cellPadding: '16px 24px',\n fontSize: '15px'\n }\n};\n\nconst useStyles = createUseStyles(theme => {\n const assetsBaseUri = theme.assetsBaseUri,\n assetsFontPath = theme.assetsFontPath,\n assetsFontName = theme.assetsFontName,\n assetsFontVersion = theme.assetsFontVersion,\n fontFamily = theme.fontFamily,\n fontSize = theme.fontSize,\n fontWeight = theme.fontWeight;\n const fontPath = `${assetsBaseUri}${assetsFontPath}`;\n const fontFaces = Object.keys(fontWeight).map(name => {\n // we need this because the font file names are all National2-.2.ext\n const upperCaseName = `${name[0].toUpperCase()}${name.substring(1)}`;\n const weight = fontWeight[name];\n return {\n fontFamily: assetsFontName,\n fontWeight: weight,\n fontDisplay: 'swap',\n src: `url(${fontPath}-${upperCaseName}.${assetsFontVersion}.woff2) format('woff2')`,\n fallbacks: [{\n src: `url(${fontPath}-${upperCaseName}.${assetsFontVersion}.woff) format('woff')`\n }, {\n src: `url(${fontPath}-${upperCaseName}.${assetsFontVersion}.eot#iefix) format('embedded-opentype')`\n }]\n };\n });\n return {\n '@font-face': fontFaces,\n '@global': {\n \"[class*='wds'], [class*='wds']::before, [class*='wds']::after\": {\n fontFamily: fontFamily.base,\n '-webkit-font-smoothing': 'antialiased',\n fontSize: fontSize.body,\n boxSizing: 'border-box',\n padding: 0,\n margin: 0,\n listStyle: 'none'\n }\n }\n };\n});\n\nconst GlobalStyles = () => {\n const theme = useTheme();\n useStyles({\n theme\n });\n return /*#__PURE__*/React.createElement(React.Fragment, null);\n};\n\nGlobalStyles.__docgenInfo = {\n \"description\": \"\",\n \"methods\": [],\n \"displayName\": \"GlobalStyles\"\n};\n\nexport { GlobalStyles, theme as WrenchTheme };\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider as ReactJSSThemeProvider } from 'react-jss';\nimport { getClientEnvironmentDetails } from '@sm/utils';\nimport { WrenchTheme } from '@wds/styles';\n\nconst GlobalThemeProvider = ({ children }) => {\n const { isBrowser } = getClientEnvironmentDetails();\n useEffect(() => {\n /**\n * remove the JSS styles from the DOM after the client has loaded\n * https://cssinjs.org/react-jss?v=v10.4.0#server-side-rendering\n */\n if (isBrowser) {\n const jss = document.getElementById('jss');\n if (jss) {\n jss.remove();\n }\n }\n }, [isBrowser]);\n\n return (\n \n {children}\n \n );\n};\n\nGlobalThemeProvider.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default GlobalThemeProvider;\n","import GlobalThemeProvider from './GlobalThemeProvider';\n\nexport default GlobalThemeProvider;\n","export {\n StaticProvider,\n StaticConsumer,\n StaticContext,\n} from './components/StaticContext';\n\nexport { default as SMHeader } from './components/Header';\n\nexport { default as SMFooter } from './components/Footer';\n\nexport {\n DesktopScreen,\n TabletScreen,\n MobileScreen,\n MobileTabletScreen,\n} from './components/MediaComponents';\n\nexport {\n AuthenticationProvider,\n useAuthentication,\n} from './components/Authentication';\n\nexport { Recaptcha, useRecaptcha } from './components/Recaptcha';\n\nexport { default as Autocomplete } from './components/Autocomplete';\n\nexport { default as BasePage } from './components/BasePage';\n\nexport { default as SPAPageContent } from './components/SPAPageContent';\n\nexport { default as ErrorController } from './components/ErrorController';\n\nexport { Logo, LogoWithText } from './components/Logos';\n\nexport { default as MobileBanner } from './components/MobileBanner';\n\nexport { default as ErrorBoundary } from './components/ErrorBoundary';\n\nexport {\n FiveHundredErrorPage,\n FiveHundredError,\n} from './components/FiveHundredError';\n\nexport { default as FourOhFourError } from './components/FourOhFourError';\n\nexport { default as ForbiddenError } from './components/ForbiddenError';\n\nexport { default as Helmet, HelmetProvider } from './components/Helmet';\n\nexport { default as SessionTimeoutModal } from './components/SessionTimeoutModal';\n\nexport { default as ReleaseToggle } from './components/ReleaseToggle';\n\nexport { default as CookieBanner } from './components/CookieBanner';\n\nexport { default as ErrorCard } from './components/ErrorCard';\n\nexport { default as SkeletonLoader } from './components/SkeletonLoader';\n\nexport { default as SeatRequestModal } from './components/SeatRequestModal';\n\nexport { default as Treatment } from './components/Experiments/Treatment';\nexport { useExperiment, ExperimentProvider } from './components/Experiments';\nexport { default as getMyTeamMenuItems } from './helpers/TeamMenuHelpers';\n\nexport { default as getHelpLink } from './helpers/getHelpLink';\nexport {\n initializeErrorHandler as initializeClientErrorHandler,\n errorHandler as clientErrorHandler,\n} from './helpers/errorHandler';\nexport { default as BrowserGuard } from './components/BrowserGuard';\n\nexport {\n SurveyTheme,\n SurveyThemeProvider,\n useSurveyTheme,\n createSurveyStyles,\n theming,\n} from './components/SurveyTheme';\n\nexport { default as GlobalThemeProvider } from './components/GlobalThemeProvider';\n","function _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}\n\nmodule.exports = _arrayWithHoles;","function _iterableToArrayLimit(arr, i) {\n if (typeof Symbol === \"undefined\" || !(Symbol.iterator in Object(arr))) return;\n var _arr = [];\n var _n = true;\n var _d = false;\n var _e = undefined;\n\n try {\n for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}\n\nmodule.exports = _iterableToArrayLimit;","function _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n}\n\nmodule.exports = _arrayLikeToArray;","var arrayLikeToArray = require(\"./arrayLikeToArray\");\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}\n\nmodule.exports = _unsupportedIterableToArray;","function _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nmodule.exports = _nonIterableRest;","var arrayWithHoles = require(\"./arrayWithHoles\");\n\nvar iterableToArrayLimit = require(\"./iterableToArrayLimit\");\n\nvar unsupportedIterableToArray = require(\"./unsupportedIterableToArray\");\n\nvar nonIterableRest = require(\"./nonIterableRest\");\n\nfunction _slicedToArray(arr, i) {\n return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();\n}\n\nmodule.exports = _slicedToArray;","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { clsx, withSpacing } from '@wds/utils';\nimport { SEMANTIC_COLORS, SIZES } from '@wds/helpers';\nimport { useTheme } from 'react-jss';\n\nimport useStyles from './useStyles';\n\nexport const buttonTypes = ['button', 'reset', 'submit'];\nexport const variants = ['solid', 'ghost', 'text'];\nexport const buttonColors = ['alt', 'link', ...SEMANTIC_COLORS];\n\nconst Button = ({\n ariaPressed,\n buttonType,\n children,\n color,\n disabled,\n href,\n label,\n size,\n stretched,\n variant,\n className,\n ...rest\n}) => {\n const [pressed, setPressed] = useState(ariaPressed);\n useEffect(() => {\n if (ariaPressed !== pressed) setPressed(!pressed);\n }, [ariaPressed, pressed]);\n\n const numberOfChildren = React.Children.count(children);\n const firstChildType = React.Children.toArray(children)[0].type;\n const lastChildType = React.Children.toArray(children)[numberOfChildren - 1]\n .type;\n\n const iconOnly =\n numberOfChildren === 1 &&\n firstChildType &&\n firstChildType.displayName &&\n firstChildType.displayName.includes('WithIcon');\n\n const leftIcon =\n numberOfChildren > 1 &&\n firstChildType &&\n firstChildType.displayName &&\n firstChildType.displayName.includes('WithIcon');\n\n const rightIcon =\n numberOfChildren > 1 &&\n lastChildType &&\n lastChildType.displayName &&\n lastChildType.displayName.includes('WithIcon');\n\n // https://mathiasbynens.github.io/rel-noopener/\n const autoAddRel = rest.target && rest.target === '_blank' && !rest.rel;\n const rel = autoAddRel && 'noopener noreferrer';\n\n const theme = useTheme();\n const classes = useStyles({\n color,\n variant,\n size,\n pressed,\n stretched,\n theme,\n iconOnly,\n leftIcon,\n rightIcon,\n });\n\n const classNames = clsx(\n className,\n classes.wdsButton,\n // Static class used for internal reference\n // Ex. ButtonGroup conditional styles\n `wdsButton--${variant}`\n );\n\n /* eslint-disable react/button-has-type */\n return (\n \n \n \n {children}\n \n \n \n \n \n \n );\n};\n\nButton.defaultProps = {\n ariaPressed: false,\n buttonType: 'button',\n className: undefined,\n color: 'primary',\n disabled: false,\n href: undefined,\n label: undefined,\n size: 'md',\n stretched: false,\n variant: 'solid',\n};\n\nButton.propTypes = {\n /**\n * Aria pressed state of Button\n */\n ariaPressed: PropTypes.bool,\n /**\n * Type attribute of button element\n */\n buttonType: PropTypes.oneOf(buttonTypes),\n /**\n * Text, icons for Button\n */\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n /**\n * Set background color of the button\n */\n color: PropTypes.oneOf(buttonColors),\n /**\n * If true button will be disabled\n */\n disabled: PropTypes.bool,\n /**\n * Use if the button is a link to a url.\n */\n href: PropTypes.string,\n /**\n * Label for title or aria-label depending on the type of button ( or