` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `['classes']>;\r\n};\r\n\r\nexport const EmobilityPreviewStep: React.FC = (props) => {\r\n\tconst { index, title, text, params } = props;\r\n\tconst { classes: styles } = useStyles(undefined, { props });\r\n\r\n\treturn (\r\n\t\t = (props) => {\r\n\tconst { src, open, onClose, classes, otherClasses, children, ...otherProps } = props;\r\n\tconst { classes: styles, cx } = useStyles(undefined, { props: { classes: otherClasses } });\r\n\r\n\treturn (\r\n\t\t\r\n\r\n\t\t\t = (props) => {\r\n\tconst { src, open, onClose, classes, otherClasses, children, ...otherProps } = props;\r\n\tconst { classes: styles, cx } = useStyles(undefined, { props: { classes: otherClasses } });\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t onClose({}, 'backdropClick')}\r\n\t\t\t\tclassName={styles.close} />\r\n\t\t\r\n\t);\r\n};\r\n","import React, { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { CloseButton } from '../buttons';\r\nimport { PageSection, PageSectionProps } from '../pageSection';\r\n\r\nconst useStyles = makeStyles({ name: 'InPageDialog' })(theme => ({\r\n\tpaddingWrapper: {\r\n\t\tpaddingTop: 40,\r\n\t\tpaddingBottom: 40\r\n\t},\r\n\tmaxWidthWrapper: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\talignItems: 'stretch'\r\n\t},\r\n\thead: {\r\n\t\tdisplay: 'flex',\r\n\t\talignItems: 'center',\r\n\t\tmarginBottom: 20\r\n\t},\r\n\ttitle: {\r\n\t\tmarginRight: 10,\r\n\t\tfontSize: 28,\r\n\t\tfontWeight: 'bold',\r\n\t\tletterSpacing: 0.25,\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tfontSize: 42\r\n\t\t}\r\n\t},\r\n\tcloseButton: {\r\n\t\tmarginLeft: 'auto',\r\n\t\talignSelf: 'flex-start',\r\n\t\tflexShrink: 0\r\n\t}\r\n}));\r\n\r\nexport type InPageDialogClasses = {\r\n\thead?: string;\r\n\ttitle?: string;\r\n\tcloseButton?: string;\r\n};\r\n\r\nexport type InPageDialogProps = PropsWithChildren<{\r\n\tisOpen: boolean;\r\n\tonClose: () => void;\r\n\ttitle?: string;\r\n\tclasses?: InPageDialogClasses;\r\n\tpageSectionProps?: PageSectionProps;\r\n}>;\r\n\r\nexport const InPageDialog: React.FC = (props) => {\r\n\tconst { isOpen, children, onClose, title, pageSectionProps } = props;\r\n\r\n\tlet { classes: styles, cx } = useStyles(undefined, {props});\r\n\r\n\tif (!isOpen)\r\n\t\treturn null;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t \r\n\t\t \r\n\t);\r\n};\r\n\r\ntype InPageDialogContextProps = {\r\n\tref: React.MutableRefObject,\r\n\topen: () => void;\r\n\tclose: () => void;\r\n};\r\n\r\nconst InPageDialogContext = createContext({\r\n\tref: null,\r\n\topen: () => { },\r\n\tclose: () => { }\r\n});\r\n\r\nexport const InPageDialogProvider = (props: PropsWithChildren) => {\r\n\tconst ref = useRef();\r\n\tconst [isOpen, setIsOpen] = useState(false);\r\n\tconst inPageDialogContextValue = ({\r\n\t\tref: ref,\r\n\t\topen: () => setIsOpen(true),\r\n\t\tclose: () => setIsOpen(false)\r\n\t});\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t \r\n\t);\r\n};\r\n\r\nconst InPageDialogBase = (props: PropsWithChildren) => {\r\n\tconst { children } = props;\r\n\tconst { ref, open, close } = useContext(InPageDialogContext);\r\n\r\n\tuseEffect(() => {\r\n\t\topen();\r\n\t\treturn () => close();\r\n\t}, [open, close]);\r\n\r\n\treturn ReactDOM.createPortal(\r\n\t\tchildren, ref.current\r\n\t);\r\n};\r\n","import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\r\nimport RemoveCircleOutlineOutlinedIcon from '@mui/icons-material/RemoveCircleOutlineOutlined';\r\nimport { IconButton } from '@mui/material';\r\nimport React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\n\r\nconst useStyles = makeStyles({ name: 'PlusMinus' })((theme) => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'row',\r\n\t\talignItems: 'center',\r\n\t\tjustifyContent: 'space-between',\r\n\t\tgap: 2,\r\n\t\tmargin: -9\r\n\t},\r\n\tbutton: {\r\n\t\tpadding: 9,\r\n\t\t'&:hover': {\r\n\t\t\tbackgroundColor: 'transparent'\r\n\t\t}\r\n\t},\r\n\tbuttonIncrease: {\r\n\r\n\t},\r\n\tbuttonDecrease: {\r\n\r\n\t}\r\n}));\r\n\r\nexport type IncrementDecrementProps = React.HTMLAttributes & {\r\n\tdisableIncrease?: boolean;\r\n\tdisableDecrease?: boolean;\r\n\tonIncrease?: () => void;\r\n\tonDecrease?: () => void;\r\n\tclasses?: Partial['classes']>;\r\n};\r\n\r\nexport const IncrementDecrement: React.FC = (props) => {\r\n\tconst { classes, className, children, onIncrease, onDecrease, disableDecrease, disableIncrease, ...other } = props;\r\n\tconst { classes: styles, cx } = useStyles(undefined, { props: { classes } });\r\n\r\n\treturn (\r\n\t\t\r\n\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t);\r\n};\r\n","import { SvgIconProps } from '@mui/material';\r\nimport React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\n\r\nconst useStyles = makeStyles({ name: 'ShareButtonLink' })((theme) => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\talignItems: 'center',\r\n\t\tgap: 17,\r\n\t\tpaddingLeft: 25,\r\n\t\tpaddingRight: 25,\r\n\t\tpaddingTop: 12,\r\n\t\tpaddingBottom: 12\r\n\t},\r\n\ticon: {\r\n\t\twidth: 22\r\n\t},\r\n\tlabel: {\r\n\t\tfontSize: 16,\r\n\t\tlineHeight: '24px'\r\n\t}\r\n}));\r\n\r\nexport type ShareButtonLinkProps = {\r\n\tIcon: React.ComponentType` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTouchRippleUtilityClass(slot) {\n return generateUtilityClass('MuiTouchRipple', slot);\n}\nconst touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);\nexport default touchRippleClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n _t,\n _t2,\n _t3,\n _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport useTimeout from '@mui/utils/useTimeout';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n 0% {\n transform: scale(0);\n opacity: 0.1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.3;\n }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.92);\n }\n\n 100% {\n transform: scale(1);\n }\n`));\nexport const TouchRippleRoot = styled('span', {\n name: 'MuiTouchRipple',\n slot: 'Root'\n})({\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n name: 'MuiTouchRipple',\n slot: 'Ripple'\n})(_t4 || (_t4 = _`\n opacity: 0;\n position: absolute;\n\n &.${0} {\n opacity: 0.3;\n transform: scale(1);\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n &.${0} {\n animation-duration: ${0}ms;\n }\n\n & .${0} {\n opacity: 1;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n & .${0} {\n opacity: 0;\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n & .${0} {\n position: absolute;\n /* @noflip */\n left: 0px;\n top: 0;\n animation-name: ${0};\n animation-duration: 2500ms;\n animation-timing-function: ${0};\n animation-iteration-count: infinite;\n animation-delay: 200ms;\n }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTouchRipple'\n });\n const {\n center: centerProp = false,\n classes = {},\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const [ripples, setRipples] = React.useState([]);\n const nextKey = React.useRef(0);\n const rippleCallback = React.useRef(null);\n React.useEffect(() => {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]);\n\n // Used to filter out mouse emulated events on mobile.\n const ignoringMouseDown = React.useRef(false);\n // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n const startTimer = useTimeout();\n\n // This is the hook called once the previous timeout is ready.\n const startTimerCommit = React.useRef(null);\n const container = React.useRef(null);\n const startCommit = React.useCallback(params => {\n const {\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n } = params;\n setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n classes: {\n ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n child: clsx(classes.child, touchRippleClasses.child),\n childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n },\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n }, nextKey.current)]);\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n const {\n pulsate = false,\n center = centerProp || options.pulsate,\n fakeElement = false // For test purposes\n } = options;\n if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n if ((event == null ? void 0 : event.type) === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n const element = fakeElement ? null : container.current;\n const rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n };\n\n // Get the size of the ripple\n let rippleX;\n let rippleY;\n let rippleSize;\n if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n const {\n clientX,\n clientY\n } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // For some reason the animation is broken on Mobile Chrome if the size is even.\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n }\n\n // Touche devices\n if (event != null && event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = () => {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n };\n // Delay the execution of the ripple effect.\n // We have to make a tradeoff with this delay value.\n startTimer.start(DELAY_RIPPLE, () => {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n });\n }\n } else {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n }\n }, [centerProp, startCommit, startTimer]);\n const pulsate = React.useCallback(() => {\n start({}, {\n pulsate: true\n });\n }, [start]);\n const stop = React.useCallback((event, cb) => {\n startTimer.clear();\n\n // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.start(0, () => {\n stop(event, cb);\n });\n return;\n }\n startTimerCommit.current = null;\n setRipples(oldRipples => {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, [startTimer]);\n React.useImperativeHandle(ref, () => ({\n pulsate,\n start,\n stop\n }), [pulsate, start, stop]);\n return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n className: clsx(touchRippleClasses.root, classes.root, className),\n ref: container\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionGroup, {\n component: null,\n exit: true,\n children: ripples\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default TouchRipple;","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Ripple(props) {\n const {\n className,\n classes,\n pulsate = false,\n rippleX,\n rippleY,\n rippleSize,\n in: inProp,\n onExited,\n timeout\n } = props;\n const [leaving, setLeaving] = React.useState(false);\n const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n const rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n if (!inProp && !leaving) {\n setLeaving(true);\n }\n React.useEffect(() => {\n if (!inProp && onExited != null) {\n // react-transition-group#onExited\n const timeoutId = setTimeout(onExited, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n }\n return undefined;\n }, [onExited, inProp, timeout]);\n return /*#__PURE__*/_jsx(\"span\", {\n className: rippleClassName,\n style: rippleStyles,\n children: /*#__PURE__*/_jsx(\"span\", {\n className: childClassName\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"action\", \"centerRipple\", \"children\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"LinkComponent\", \"onBlur\", \"onClick\", \"onContextMenu\", \"onDragLeave\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"touchRippleRef\", \"type\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport refType from '@mui/utils/refType';\nimport elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';\nimport composeClasses from '@mui/utils/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n MozAppearance: 'none',\n // Reset\n WebkitAppearance: 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n },\n [`&.${buttonBaseClasses.disabled}`]: {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n});\n\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\nconst ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiButtonBase'\n });\n const {\n action,\n centerRipple = false,\n children,\n className,\n component = 'button',\n disabled = false,\n disableRipple = false,\n disableTouchRipple = false,\n focusRipple = false,\n LinkComponent = 'a',\n onBlur,\n onClick,\n onContextMenu,\n onDragLeave,\n onFocus,\n onFocusVisible,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n tabIndex = 0,\n TouchRippleProps,\n touchRippleRef,\n type\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const buttonRef = React.useRef(null);\n const rippleRef = React.useRef(null);\n const handleRippleRef = useForkRef(rippleRef, touchRippleRef);\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef\n } = useIsFocusVisible();\n const [focusVisible, setFocusVisible] = React.useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n React.useImperativeHandle(action, () => ({\n focusVisible: () => {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n }), []);\n const [mountedState, setMountedState] = React.useState(false);\n React.useEffect(() => {\n setMountedState(true);\n }, []);\n const enableTouchRipple = mountedState && !disableRipple && !disabled;\n React.useEffect(() => {\n if (focusVisible && focusRipple && !disableRipple && mountedState) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible, mountedState]);\n function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {\n return useEventCallback(event => {\n if (eventCallback) {\n eventCallback(event);\n }\n const ignore = skipRippleAction;\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n return true;\n });\n }\n const handleMouseDown = useRippleHandler('start', onMouseDown);\n const handleContextMenu = useRippleHandler('stop', onContextMenu);\n const handleDragLeave = useRippleHandler('stop', onDragLeave);\n const handleMouseUp = useRippleHandler('stop', onMouseUp);\n const handleMouseLeave = useRippleHandler('stop', event => {\n if (focusVisible) {\n event.preventDefault();\n }\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n const handleTouchStart = useRippleHandler('start', onTouchStart);\n const handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n const handleTouchMove = useRippleHandler('stop', onTouchMove);\n const handleBlur = useRippleHandler('stop', event => {\n handleBlurVisible(event);\n if (isFocusVisibleRef.current === false) {\n setFocusVisible(false);\n }\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n const handleFocus = useEventCallback(event => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current === true) {\n setFocusVisible(true);\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n if (onFocus) {\n onFocus(event);\n }\n });\n const isNonNativeButton = () => {\n const button = buttonRef.current;\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n\n /**\n * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n const keydownRef = React.useRef(false);\n const handleKeyDown = useEventCallback(event => {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n rippleRef.current.stop(event, () => {\n rippleRef.current.start(event);\n });\n }\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n // Keyboard accessibility for non interactive elements\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n }\n });\n const handleKeyUp = useEventCallback(event => {\n // calling preventDefault in keyUp on a
\r\n\r\n\t\t\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { formatString } from '../../utils/common';\r\n\r\nconst useStyles = makeStyles({ name: 'EmobilityPreviewStep' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 20,\r\n\t\tcolor: theme.palette.text.primary\r\n\t},\r\n\tindex: {\r\n\t\tflexShrink: 0,\r\n\t\twidth: 26,\r\n\t\theight: 26,\r\n\t\tborderRadius: '13px',\r\n\t\tborder: '1.7px solid ' + theme.palette.primary.main,\r\n\t\tcolor: theme.palette.primary.main,\r\n\t\tfontWeight: theme.typography.fontWeightBold,\r\n\t\tboxSizing: 'border-box',\r\n\t\tdisplay: 'flex',\r\n\t\talignItems: 'center',\r\n\t\tjustifyContent: 'center'\r\n\t},\r\n\tstepContent: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tjustifyContent: 'space-between',\r\n\t\tgap: 20\r\n\t},\r\n\ttitle: {\r\n\t\tminHeight: 26,\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '24px'\r\n\t},\r\n\ttext: {\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\t'& b': {\r\n\t\t\tfontSize: '18px',\r\n\t\t\tlineHeight: '24px'\r\n\t\t}\r\n\t}\r\n}));\r\n\r\nexport type EmobilityPreviewStepProps = {\r\n\tindex: number;\r\n\ttitle: string;\r\n\ttext: string;\r\n\tparams: string[];\r\n\tclasses?: Partial\r\n\t\t\t['classes']>;\r\n};\r\n\r\nexport const EmobilityPreviewWrapper = (props: EmobilityPreviewWrapperProps) => {\r\n\tconst { children, content } = props;\r\n\tconst [isPreviewOpen, setIsPreviewOpen] = useState(false);\r\n\tconst { classes: styles } = useStyles(undefined, { props });\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{React.cloneElement(children, {\r\n\t\t\t\tonOpenClick: () => {\r\n\t\t\t\t\tchildren.props.onOpenClick?.();\r\n\t\t\t\t\tsetIsPreviewOpen(true);\r\n\t\t\t\t}\r\n\t\t\t})}\r\n\t\t\t setIsPreviewOpen(false)}\r\n\t\t\t\tclasses={{ paper: styles.paper }}>\r\n\t\t\t\t{content}\r\n\t\t\t\t setIsPreviewOpen(false)}\r\n\t\t\t\t\tclassName={styles.close} />\r\n\t\t\t\r\n\t\t \r\n\t);\r\n};\r\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (process.env.NODE_ENV !== 'production') {\n var ReactIs = require('react-is');\n\n // By explicitly using `prop-types` you are opting into new development behavior.\n // http://fb.me/prop-types-in-prod\n var throwOnDirectAccess = true;\n module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);\n} else {\n // By explicitly using `prop-types` you are opting into new production behavior.\n // http://fb.me/prop-types-in-prod\n module.exports = require('./factoryWithThrowingShims')();\n}\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n\nfunction emptyFunction() {}\nfunction emptyFunctionWithReset() {}\nemptyFunctionWithReset.resetWarningCache = emptyFunction;\n\nmodule.exports = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n // It is still safe when called from React.\n return;\n }\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use PropTypes.checkPropTypes() to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n };\n shim.isRequired = shim;\n function getShim() {\n return shim;\n };\n // Important!\n // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.\n var ReactPropTypes = {\n array: shim,\n bigint: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n\n any: shim,\n arrayOf: getShim,\n element: shim,\n elementType: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim,\n\n checkPropTypes: emptyFunctionWithReset,\n resetWarningCache: emptyFunction\n };\n\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n","// Generated by CoffeeScript 1.12.2\n(function() {\n var getNanoSeconds, hrtime, loadTime, moduleLoadTime, nodeLoadTime, upTime;\n\n if ((typeof performance !== \"undefined\" && performance !== null) && performance.now) {\n module.exports = function() {\n return performance.now();\n };\n } else if ((typeof process !== \"undefined\" && process !== null) && process.hrtime) {\n module.exports = function() {\n return (getNanoSeconds() - nodeLoadTime) / 1e6;\n };\n hrtime = process.hrtime;\n getNanoSeconds = function() {\n var hr;\n hr = hrtime();\n return hr[0] * 1e9 + hr[1];\n };\n moduleLoadTime = getNanoSeconds();\n upTime = process.uptime() * 1e9;\n nodeLoadTime = moduleLoadTime - upTime;\n } else if (Date.now) {\n module.exports = function() {\n return Date.now() - loadTime;\n };\n loadTime = Date.now();\n } else {\n module.exports = function() {\n return new Date().getTime() - loadTime;\n };\n loadTime = new Date().getTime();\n }\n\n}).call(this);\n\n//# sourceMappingURL=performance-now.js.map\n","var now = require('performance-now')\n , root = typeof window === 'undefined' ? global : window\n , vendors = ['moz', 'webkit']\n , suffix = 'AnimationFrame'\n , raf = root['request' + suffix]\n , caf = root['cancel' + suffix] || root['cancelRequest' + suffix]\n\nfor(var i = 0; !raf && i < vendors.length; i++) {\n raf = root[vendors[i] + 'Request' + suffix]\n caf = root[vendors[i] + 'Cancel' + suffix]\n || root[vendors[i] + 'CancelRequest' + suffix]\n}\n\n// Some versions of FF have rAF but not cAF\nif(!raf || !caf) {\n var last = 0\n , id = 0\n , queue = []\n , frameDuration = 1000 / 60\n\n raf = function(callback) {\n if(queue.length === 0) {\n var _now = now()\n , next = Math.max(0, frameDuration - (_now - last))\n last = next + _now\n setTimeout(function() {\n var cp = queue.slice(0)\n // Clear queue here to prevent\n // callbacks from appending listeners\n // to the current frame's queue\n queue.length = 0\n for(var i = 0; i < cp.length; i++) {\n if(!cp[i].cancelled) {\n try{\n cp[i].callback(last)\n } catch(e) {\n setTimeout(function() { throw e }, 0)\n }\n }\n }\n }, Math.round(next))\n }\n queue.push({\n handle: ++id,\n callback: callback,\n cancelled: false\n })\n return id\n }\n\n caf = function(handle) {\n for(var i = 0; i < queue.length; i++) {\n if(queue[i].handle === handle) {\n queue[i].cancelled = true\n }\n }\n }\n}\n\nmodule.exports = function(fn) {\n // Wrap in a new function to prevent\n // `cancel` potentially being assigned\n // to the native rAF function\n return raf.call(root, fn)\n}\nmodule.exports.cancel = function() {\n caf.apply(root, arguments)\n}\nmodule.exports.polyfill = function(object) {\n if (!object) {\n object = root;\n }\n object.requestAnimationFrame = raf\n object.cancelAnimationFrame = caf\n}\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _raf = require('raf');\n\nvar _raf2 = _interopRequireDefault(_raf);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar ANIMATION_DURATION = 300;\n\nvar AnimatedNumber = function (_Component) {\n _inherits(AnimatedNumber, _Component);\n\n function AnimatedNumber(props) {\n _classCallCheck(this, AnimatedNumber);\n\n var _this = _possibleConstructorReturn(this, (AnimatedNumber.__proto__ || Object.getPrototypeOf(AnimatedNumber)).call(this, props));\n\n _this.state = {\n currentValue: props.initialValue\n };\n return _this;\n }\n\n _createClass(AnimatedNumber, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n this.prepareTween(this.props);\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(nextProps) {\n\n if (this.state.currentValue === nextProps.value) {\n return;\n }\n\n if (this.tweenHandle) {\n this.endTween();\n }\n\n this.prepareTween(nextProps);\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n this.endTween();\n }\n }, {\n key: 'prepareTween',\n value: function prepareTween() {\n var _this2 = this;\n\n this.tweenHandle = (0, _raf2.default)(function (timestamp) {\n _this2.tweenValue(timestamp, true);\n });\n }\n }, {\n key: 'endTween',\n value: function endTween() {\n _raf2.default.cancel(this.tweenHandle);\n this.setState(_extends({}, this.state, {\n currentValue: this.props.value\n }));\n }\n }, {\n key: 'ensureSixtyFps',\n value: function ensureSixtyFps(timestamp) {\n var currentTime = this.state.currentTime;\n\n\n return !currentTime || timestamp - currentTime > 16;\n }\n }, {\n key: 'tweenValue',\n value: function tweenValue(timestamp, start) {\n\n if (!this.ensureSixtyFps(timestamp)) {\n this.tweenHandle = (0, _raf2.default)(this.tweenValue.bind(this));\n return;\n }\n\n var _props = this.props,\n value = _props.value,\n duration = _props.duration;\n var currentValue = this.state.currentValue;\n\n var currentTime = timestamp;\n var startTime = start ? timestamp : this.state.startTime;\n var fromValue = start ? currentValue : this.state.fromValue;\n var newValue = void 0;\n\n if (currentTime - startTime >= duration) {\n newValue = value;\n } else {\n newValue = fromValue + (value - fromValue) * ((currentTime - startTime) / duration);\n }\n\n if (newValue === value) {\n this.endTween();\n return;\n }\n\n this.setState({\n currentValue: newValue,\n startTime: startTime ? startTime : currentTime,\n fromValue: fromValue, currentTime: currentTime\n });\n this.tweenHandle = (0, _raf2.default)(this.tweenValue.bind(this));\n }\n }, {\n key: 'render',\n value: function render() {\n var _props2 = this.props,\n formatValue = _props2.formatValue,\n value = _props2.value,\n className = _props2.className,\n frameStyle = _props2.frameStyle,\n stepPrecision = _props2.stepPrecision;\n var _state = this.state,\n currentValue = _state.currentValue,\n fromValue = _state.fromValue;\n var style = this.props.style;\n\n var adjustedValue = currentValue;\n var direction = value - fromValue;\n\n if (currentValue !== value) {\n if (stepPrecision > 0) {\n adjustedValue = Number(currentValue.toFixed(stepPrecision));\n } else if (direction < 0 && stepPrecision === 0) {\n adjustedValue = Math.floor(currentValue);\n } else if (direction > 0 && stepPrecision === 0) {\n adjustedValue = Math.ceil(currentValue);\n }\n }\n\n var perc = Math.abs((adjustedValue - fromValue) / (value - fromValue) * 100);\n\n var currStyle = frameStyle(perc);\n\n if (style && currStyle) {\n style = _extends({}, style, currStyle);\n } else if (currStyle) {\n style = currStyle;\n }\n\n return _react2.default.createElement(this.props.component, _extends({}, filterKnownProps(this.props), { className: className, style: style }), formatValue(adjustedValue));\n }\n }]);\n\n return AnimatedNumber;\n}(_react.Component);\n\nAnimatedNumber.propTypes = {\n component: _propTypes2.default.any,\n formatValue: _propTypes2.default.func,\n value: _propTypes2.default.number,\n initialValue: _propTypes2.default.number,\n duration: _propTypes2.default.number,\n frameStyle: _propTypes2.default.func,\n stepPrecision: _propTypes2.default.number,\n style: _propTypes2.default.object,\n className: _propTypes2.default.string\n};\nAnimatedNumber.defaultProps = {\n component: 'span',\n formatValue: function formatValue(n) {\n return n;\n },\n initialValue: 0,\n duration: ANIMATION_DURATION,\n frameStyle: function frameStyle() {\n return {};\n },\n value: 0\n};\nexports.default = AnimatedNumber;\n\n\nfunction filterKnownProps(props) {\n var sanitized = {};\n var propNames = Object.keys(props);\n var validProps = Object.keys(AnimatedNumber.propTypes);\n\n propNames.filter(function (p) {\n return validProps.indexOf(p) < 0;\n }).forEach(function (p) {\n sanitized[p] = props[p];\n });\n\n return sanitized;\n};","'use strict';\n\nvar _AnimatedNumber = require('./AnimatedNumber');\n\nvar _AnimatedNumber2 = _interopRequireDefault(_AnimatedNumber);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nmodule.exports = _AnimatedNumber2.default;","import { LinearProgress } from '@mui/material';\r\nimport React from 'react';\r\nimport { useStyles } from 'tss-react/mui';\r\nimport './linearProgressDelayed.scss';\r\n\r\nexport type LinearProgressDelayedProps = {\r\n\tloading: boolean;\r\n\tclassName?: string;\r\n};\r\n\r\nexport const LinearProgressDelayed: React.FC = ({ loading, className }) => {\r\n\tconst { cx } = useStyles();\r\n\treturn ['classes']>;\r\n\tresultRef?: React.LegacyRef;\r\n\tresultLabel?: React.ReactNode;\r\n};\r\n\r\nexport const EmobilityResultPanel: React.FC = (props) => {\r\n\tconst { result, formatResult, bonuses, image, dummy, note, button, footer, calculating, resultRef, resultLabel } = props;\r\n\tlet { classes, cx } = useStyles(undefined, { props });\r\n\r\n\tif (!notNullOrEmpty(bonuses))\r\n\t\tclasses = addNoBonusClass(classes, cx);\r\n\r\n\treturn (\r\n\t\t['classes'], cx: Cx) =>\r\n\tObject.keys(styles).reduce((prev, curr) => ({ ...prev, [curr]: cx(styles[curr], 'nobonus') }), {} as ReturnType['classes']);\r\n","import { EmobilityResultPanel } from './emobilityResultPanel';\r\nimport { withStyles } from 'tss-react/mui';\r\nimport { CSSObject } from 'tss-react';\r\n\r\nexport const ResponsiveEmobilityResultPanel = withStyles(EmobilityResultPanel, theme => ({\r\n\troot: {\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\tpadding: 32\r\n\t\t},\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tpaddingBottom: 40\r\n\t\t},\r\n\t\t[theme.breakpoints.up('xl')]: {\r\n\t\t\tpadding: 48,\r\n\t\t\tpaddingBottom: 41\r\n\t\t}\r\n\t},\r\n\tresult: {\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\t'&.nobonus': {\r\n\t\t\t\tmarginBottom: 85\r\n\t\t\t}\r\n\t\t},\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tfontSize: '38px',\r\n\t\t\tlineHeight: '48px'\r\n\t\t},\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tfontSize: '44px',\r\n\t\t\tlineHeight: '52px',\r\n\t\t\tmarginBottom: 32,\r\n\t\t\t'&.nobonus': {\r\n\t\t\t\tmarginBottom: 100\r\n\t\t\t}\r\n\t\t},\r\n\t\t[theme.breakpoints.up('xl')]: {\r\n\t\t\t'&.nobonus': {\r\n\t\t\t\tmarginBottom: 85\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tpanelContent: {\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\tmargin: 0\r\n\t\t},\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tmargin: '-24px 0'\r\n\t\t},\r\n\t\t[theme.breakpoints.up('xl')]: {\r\n\t\t\tmargin: 0\r\n\t\t}\r\n\t},\r\n\tpanelBonuses: {\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\tpadding: 0\r\n\t\t},\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tmargin: -5\r\n\t\t},\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tpadding: '24px 0'\r\n\t\t},\r\n\t\t[theme.breakpoints.up('xl')]: {\r\n\t\t\tpadding: 0\r\n\t\t}\r\n\t},\r\n\tbonus: {\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tpadding: 5,\r\n\t\t\tfontSize: '18px',\r\n\t\t\tlineHeight: '28px'\r\n\t\t}\r\n\t},\r\n\tchecker: {\r\n\t\tmarginRight: '10px'\r\n\t},\r\n\timage: {\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\tpadding: 0,\r\n\t\t\tmarginTop: 'calc(-17.507% - 10px)',\r\n\t\t\tmarginBottom: 'calc(-11.298% - 10px)',\r\n\t\t\twidth: 'calc(100% + 64px)'\r\n\t\t},\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tpadding: '24px 0'\r\n\t\t},\r\n\t\t[theme.breakpoints.up('xl')]: {\r\n\t\t\tpadding: 0,\r\n\t\t\twidth: '726px',\r\n\t\t\tmarginRight: '-48px',\r\n\t\t\tmarginLeft: 'auto',\r\n\t\t\tmarginTop: '-182px',\r\n\t\t\tmarginBottom: '-83px',\r\n\t\t\t'&.nobonus': {\r\n\t\t\t\twidth: '100%',\r\n\t\t\t\tmarginTop: 'calc(-17.507%)',\r\n\t\t\t\tmarginBottom: 'calc(-11.298%)',\r\n\t\t\t\tmarginLeft: 0,\r\n\t\t\t\tmarginRight: 0\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tpanelButtonAndNote: {\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\tpaddingTop: 60,\r\n\t\t\tflexDirection: 'row',\r\n\t\t\tjustifyContent: 'center'\r\n\t\t} as CSSObject,\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tpaddingTop: 33\r\n\t\t},\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tpaddingTop: 68\r\n\t\t},\r\n\t\t[theme.breakpoints.up('xl')]: {\r\n\t\t\tpaddingTop: 80,\r\n\t\t\t'&.nobonus': {\r\n\t\t\t\tpaddingTop: 30\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tcontainerNote: {\r\n\r\n\t},\r\n\tcontainerButton: {\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tmarginLeft: 'auto'\r\n\t\t}\r\n\t},\r\n\tdividerFooter: {\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tmargin: '32px 0'\r\n\t\t}\r\n\t},\r\n\tloader: {\r\n\r\n\t},\r\n\tresultLabel: {\r\n\r\n\t}\r\n}));\r\n","import { withStyles } from 'tss-react/mui';\r\nimport { PageSection } from '../pageSection';\r\n\r\nexport const StickyPanel = withStyles(PageSection, (theme) => ({\r\n\tpaddingWrapper: {\r\n\t\tbackground: theme.palette.background.paper,\r\n\t\tpaddingTop: 11,\r\n\t\tpaddingBottom: 9,\r\n\t\tboxShadow: '0px 4px 16px rgb(0 0 0 / 15%)'\r\n\t},\r\n\tmaxWidthWrapper: {\r\n\r\n\t}\r\n}));\r\n","import { Slide } from '@mui/material';\r\nimport React, { HTMLAttributes } from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { useOnScreen } from '../../utils/customHooks';\r\nimport { LinearProgressDelayed } from '../linearProgressDelayed';\r\nimport { StickyPanel } from './stickyPanel';\r\n\r\nconst useStyles = makeStyles({ name: 'StickyWrapper' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column'\r\n\t},\r\n\tpaddingWrapper: {\r\n\t\tzIndex: 1,\r\n\t\tleft: '0',\r\n\t\tright: '0',\r\n\t\torder: 0,\r\n\t\ttop: 0,\r\n\t\t'&.sticky': {\r\n\t\t\tposition: 'sticky'\r\n\t\t},\r\n\t\t'&.fixed': {\r\n\t\t\tposition: 'fixed'\r\n\t\t}\r\n\t},\r\n\tmaxWidthWrapper: {\r\n\r\n\t},\r\n\tlinearProgress: {\r\n\t\tposition: 'absolute',\r\n\t\tleft: 0,\r\n\t\tright: 0,\r\n\t\tbottom: 0,\r\n\t\ttransform: 'translateY(100%)'\r\n\t}\r\n}));\r\n\r\nexport type StickyWrapperClasses = Partial['classes']>;\r\n\r\nexport type StickyWrapperProps = React.PropsWithChildren & {\r\n\tstickyPanelContent: React.ReactNode;\r\n\tdetailElement: E;\r\n\tclasses?: StickyWrapperClasses;\r\n\tloading?: boolean;\r\n\tmode?: 'fixed' | 'sticky';\r\n\thideAfterDetail?: boolean;\r\n}>;\r\n\r\nexport const StickyWrapper = (props: StickyWrapperProps) => {\r\n\tconst { stickyPanelContent, children, detailElement, classes, loading, mode, hideAfterDetail, className, ...other } = props;\r\n\tconst [detailVisible, detailPosition] = useOnScreen(detailElement);\r\n\tconst { classes: styles, cx } = useStyles(undefined, { props: { classes } });\r\n\r\n\tconst hideSticky = detailVisible || (hideAfterDetail && detailPosition === 'aboveTop');\r\n\r\n\treturn (\r\n\t\t =\r\n\tOmit, 'stickyPanelContent'> &\r\n\t{ contentProps: EmobilityResultStickyContentProps };\r\n\r\nexport const EmobilityResultStickyWrapper = (props: EmobilityResultStickyWrapperProps) => {\r\n\tconst theme = useTheme();\r\n\tconst desktop = useMediaQuery(theme.originalBreakpoints.up('md'));\r\n\r\n\tif (desktop) {\r\n\t\tconst { contentProps, classes, detailElement, loading, color, mode, hideAfterDetail, ...other } = props;\r\n\t\treturn ;\r\n\t} else {\r\n\t\tconst { contentProps, ...other } = props;\r\n\t\treturn ['classes']>;\r\n\r\ntype EmobilityResultStickyContentProps = {\r\n\tclasses?: EmobilityResultStickyContentClasses;\r\n\tlabelModel: string;\r\n\tlabelResult: string;\r\n\tmodel: string;\r\n\tresult: number;\r\n\tformatResult?: (value: number) => string;\r\n};\r\n\r\nconst EmobilityResultStickyContent: React.FC = (props) => {\r\n\tconst { labelModel, labelResult, model, result, formatResult } = props;\r\n\tconst { classes: styles, cx } = useStyles(undefined, { props });\r\n\r\n\treturn (\r\n\t\t & {\r\n\tclasses?: Partial['classes']>;\r\n}\r\n\r\nexport const Loader: React.FC = (props) => {\r\n\tconst { classes, className, ...other } = props;\r\n\tconst { classes: styles, cx } = useStyles(undefined, { props: { classes } });\r\n\r\n\treturn (\r\n\t\t = (props: ImageContainerProps) => {\r\n\tlet { classes: styles, cx } = useStyles();\r\n\r\n\treturn (\r\n\t\t\r\n\t\t
\r\n\t);\r\n};\r\n","import { Dialog, DialogProps } from '@mui/material';\r\nimport React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { CloseButton } from '../../buttons';\r\nimport { ImageContainer } from '../../imageContainer';\r\nimport { SkodaScrollbars } from '../../scrollbars';\r\n\r\nconst useStyles = makeStyles({ name: 'DesktopImageDialog' })(theme => ({\r\n\tpaper: {\r\n\t\twidth: '100%',\r\n\t\tmaxWidth: 'unset',\r\n\t\theight: '100%',\r\n\t\tmaxHeight: 'unset',\r\n\t\tmargin: 0,\r\n\t\toverflow: 'hidden',\r\n\t\tflexDirection: 'row',\r\n\t\talignItems: 'stretch'\r\n\t},\r\n\tpanelImage: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexBasis: '50%',\r\n\t\tposition: 'relative'\r\n\t},\r\n\timage: {\r\n\t\tposition: 'absolute',\r\n\t\ttop: 0,\r\n\t\tbottom: 0,\r\n\t\tleft: 0,\r\n\t\tright: 0\r\n\t},\r\n\tpanelContent: {\r\n\t\tboxSizing: 'border-box',\r\n\t\tflexBasis: '50%',\r\n\t\tpadding: '30px 60px 45px 120px',\r\n\t\t[theme.originalBreakpoints.up('md')]: {\r\n\t\t\tpadding: '130px 30px 70px 70px'\r\n\t\t},\r\n\t\t[theme.originalBreakpoints.up('lg')]: {\r\n\t\t\tpadding: '130px 90px 130px 130px'\r\n\t\t}\r\n\t},\r\n\tpaddingRight: {\r\n\t\tpaddingRight: 60,\r\n\t\t[theme.originalBreakpoints.up('md')]: {\r\n\t\t\tpaddingRight: 40\r\n\t\t},\r\n\t\t[theme.originalBreakpoints.up('lg')]: {\r\n\t\t\tpaddingRight: 30\r\n\t\t}\r\n\t},\r\n\tclose: {\r\n\t\tposition: 'absolute',\r\n\t\ttop: 20,\r\n\t\tright: 20,\r\n\t\t[theme.originalBreakpoints.up('md')]: {\r\n\t\t\ttop: 30,\r\n\t\t\tright: 30\r\n\t\t}\r\n\t},\r\n\tcontentWrapper: {\r\n\t\tposition: 'relative',\r\n\t\twidth: '100%',\r\n\t\theight: '100%'\r\n\t},\r\n\tscroll: {\r\n\t\tmaxHeight: '100%',\r\n\t\theight: 'auto',\r\n\t\tposition: 'absolute',\r\n\t\tleft: 0,\r\n\t\tright: 0,\r\n\t\ttop: '50%',\r\n\t\ttransform: 'translateY(-50%)'\r\n\t}\r\n}));\r\n\r\nexport type DesktopImageDialogClassKey = 'panelImage' | 'image' | 'panelContent' | 'paddingRight' | 'buttonClose';\r\nexport type DesktopImageDialogClasses = { [key in DesktopImageDialogClassKey]?: string };\r\nexport type DesktopImageDialogProps = DialogProps & {\r\n\tsrc: string;\r\n\totherClasses?: DesktopImageDialogClasses;\r\n};\r\n\r\nexport const ImageDialogDesktop: React.FC\r\n\t\t\t\t{index}\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t);\r\n};","import { Dialog } from '@mui/material';\r\nimport React, { useState } from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { CloseButton } from '../buttons';\r\n\r\nconst useStyles = makeStyles({ name: 'EmobilityPreviewWrapper' })(theme => ({\r\n\tpaper: {\r\n\t\tbackground: theme.palette.background.default\r\n\t},\r\n\tclose: {\r\n\t\tposition: 'absolute',\r\n\t\tright: 20,\r\n\t\ttop: 20\r\n\t}\r\n}));\r\n\r\nexport type EmobilityPreviewWrapperProps = {\r\n\tchildren: React.ReactElement<{ onOpenClick?: () => void }>;\r\n\tcontent: React.ReactElement;\r\n\tclasses?: Partial{title}
\r\n\t\t\t\t '' + param + '')) }} />\r\n\t\t\t
\r\n\t\t\r\n\t\t\t{(resultLabel) &&\r\n\t\t\t\t\r\n\t\t\t\t\t{resultLabel}\r\n\t\t\t\t}\r\n\r\n\t\t\t\r\n\t\t\t\t
\r\n\t);\r\n};\r\n\r\nconst addNoBonusClass = (styles: ReturnType\r\n\t\t\t\t{notNullOrEmpty(bonuses) &&\r\n\t\t\t\t\t
\r\n\r\n\t\t\t{(button || note) &&\r\n\t\t\t\t\r\n\t\t\t\t\t\t{bonuses.map((text, index) =>\r\n\t\t\t\t\t\t\t
}\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
)}\r\n\t\t\t\t\t\r\n\t\t\t\t\t{note &&
}\r\n\r\n\t\t\t{footer && }\r\n\r\n\t\t\t{footer}\r\n\r\n\t\t\t{note}
}\r\n\t\t\t\t\t{button && {button}
}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t{children}\r\n\t\t
\r\n\t);\r\n};\r\n\r\nStickyWrapper.defaultProps = {\r\n\tmode: 'fixed',\r\n\thideAfterDetail: false\r\n};\r\n","import { useMediaQuery } from '@mui/material';\r\nimport { useTheme } from '@mui/material/styles';\r\nimport React from 'react';\r\nimport AnimatedNumber from 'react-animated-number';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { StickyWrapper, StickyWrapperProps } from '../stickyPanel';\r\n\r\nexport type EmobilityResultStickyWrapperProps\r\n\t\t\t
\r\n\t);\r\n};\r\n","import React, { HTMLAttributes } from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\n\r\nconst useStyles = makeStyles({ name: 'Loader' })(theme => ({\r\n\troot: {\r\n\t\tposition: 'fixed',\r\n\t\ttop: '0',\r\n\t\tleft: '0',\r\n\t\tbottom: '0',\r\n\t\tright: '0',\r\n\t\tbackground: theme.palette.background.default,\r\n\t\tzIndex: 1\r\n\t},\r\n\tspinner: {\r\n\t\tposition: 'absolute',\r\n\t\ttop: '50%',\r\n\t\tleft: '50%',\r\n\t\ttransform: 'translate(-50%, -50%)',\r\n\t\t'& rect': {\r\n\t\t\tfill: theme.palette.primary.main\r\n\t\t}\r\n\t}\r\n}));\r\n\r\ntype LoaderProps = HTMLAttributes\r\n\t\t\t\t{labelModel}\r\n\t\t\t\t{model}\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t{labelResult}\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\r\n\t\t
\r\n\t);\r\n};\r\n","import React, { FunctionComponent } from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\n\r\nconst useStyles = makeStyles({ name: 'ImageContainer' })(theme => ({\r\n\troot: {\r\n\t\tbackgroundSize: 'cover',\r\n\t\tbackgroundPosition: 'center',\r\n\t\tbackgroundRepeat: 'no-repeat'\r\n\t}\r\n}));\r\n\r\nexport type ImageContainerProps = {\r\n\tsrc: string;\r\n\tclassName?: string;\r\n};\r\n\r\nexport const ImageContainer: FunctionComponent\r\n\t\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t onClose({}, 'backdropClick')}\r\n\t\t\t\t\tclassName={styles.close} />\r\n\t\t\t\t
\r\n\t\t\r\n\t);\r\n};\r\n","import { Dialog, DialogProps } from '@mui/material';\r\nimport React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { CloseButton } from '../../buttons';\r\nimport { ImageContainer } from '../../imageContainer';\r\n\r\nconst useStyles = makeStyles({ name: 'MobileImageDialog' })(theme => ({\r\n\tpaper: {\r\n\t\twidth: '100%',\r\n\t\tmaxWidth: 'unset',\r\n\t\theight: '100%',\r\n\t\tmaxHeight: 'unset',\r\n\t\tmargin: 0,\r\n\t\toverflow: 'auto',\r\n\t\tflexDirection: 'column',\r\n\t\talignItems: 'stretch'\r\n\t},\r\n\timageContainer: {\r\n\t\tpaddingTop: '88%',\r\n\t\t[theme.originalBreakpoints.up('sm')]: {\r\n\t\t\tpaddingTop: '62%'\r\n\t\t}\r\n\t},\r\n\tpanelContent: {\r\n\t\tboxSizing: 'border-box',\r\n\t\tflexBasis: '50%',\r\n\t\tpadding: '30px 45px 45px 45px',\r\n\t\t[theme.originalBreakpoints.up('sm')]: {\r\n\t\t\tpadding: '30px 120px 45px 120px'\r\n\t\t}\r\n\t},\r\n\tclose: {\r\n\t\tposition: 'absolute',\r\n\t\ttop: 15,\r\n\t\tright: 15,\r\n\t\t[theme.originalBreakpoints.up('sm')]: {\r\n\t\t\ttop: 20,\r\n\t\t\tright: 20\r\n\t\t}\r\n\t}\r\n}));\r\n\r\nexport type MobileImageDialogClassKey = 'panelContent' | 'buttonClose' | 'imageContainer';\r\nexport type MobileImageDialogClasses = { [key in MobileImageDialogClassKey]?: string };\r\nexport type MobileImageDialogProps = DialogProps & {\r\n\tsrc: string;\r\n\totherClasses?: MobileImageDialogClasses;\r\n};\r\n\r\nexport const ImageDialogMobile: React.FC\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\t{children}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t{children}\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t{title && title.length &&\r\n\t\t\t\t\t\t{title}}\r\n\t\t\t\t\t
\r\n\t\t\t\t{children}\r\n\t\t\t\r\n\t\t\t
\r\n\t);\r\n};\r\n","import { CircularProgress, Fab, FabProps } from '@mui/material';\r\nimport { useTheme } from '@mui/material/styles';\r\nimport React, { createRef, useEffect, useState } from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\n\r\nconst useStyles = makeStyles({ name: 'LoadingFab' })(theme => ({\r\n\troot: {\r\n\t\tposition: 'relative'\r\n\t},\r\n\tspinner: {\r\n\t\tposition: 'absolute'\r\n\t}\r\n}));\r\n\r\nexport type LoadingFabProps = {\r\n\tloading: boolean;\r\n\tclasses: Partial\r\n\t\t\t\t\t{child}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t{text}\r\n\t\t
\r\n\t);\r\n};","import { SliderProps } from '@mui/material';\r\nimport React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { IconTooltipProps } from '../tooltip';\r\n\r\nconst useStyles = makeStyles({ name: 'SliderWrapper' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column'\r\n\t},\r\n\tlabel: {\r\n\t\tmarginBottom: 16,\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px'\r\n\t},\r\n\tvalue: {\r\n\t\tmarginBottom: 20,\r\n\t\tfontSize: '20px',\r\n\t\tlineHeight: '24px',\r\n\t\tfontWeight: 'bold'\r\n\t},\r\n\tpanelMinMax: {\r\n\t\tdisplay: 'flex',\r\n\t\tjustifyContent: 'space-between',\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '16px',\r\n\t\tmarginTop: 12\r\n\t}\r\n}));\r\n\r\nexport type SliderWrapperProps = React.DetailedHTMLProps\r\n\t\t\t
\r\n\t);\r\n};\r\n","import { Slider, SliderProps } from '@mui/material';\r\nimport { useTheme } from '@mui/material/styles';\r\nimport React, { useMemo } from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { ThumbComponent } from './thumb';\r\n\r\ntype StylesProps = {\r\n\trailBackground: string;\r\n}\r\n\r\nconst useStyles = makeStyles\r\n\t\t\t\t{label}\r\n\t\t\t\t{tooltip &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{'\\u00A0'}\r\n\t\t\t\t\t\t{tooltip}\r\n\t\t\t\t\t }\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t{valueText}\r\n\t\t\t
\r\n\t\t\t{children}\r\n\t\t\t\r\n\t\t\t\t{minValueText}\r\n\t\t\t\t{maxValueText}\r\n\t\t\t
\r\n\t\t\r\n\t\t\t{showDiffs &&\r\n\t\t\t\t
\r\n\t);\r\n};\r\n\r\ntype PercentagePanelProps = {\r\n\tmin: number;\r\n\tmax: number;\r\n\tvalue: number | number[];\r\n\tformatDiffs?: (val: number) => string;\r\n\tdisabled?: boolean;\r\n};\r\n\r\nconst PercentagePanel: React.FC\r\n\t\t\t{diffs.map((diff, index) =>\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t)}\r\n\t\t\r\n\t);\r\n};\r\n\r\ntype LegendProps = {\r\n\tnames: string[];\r\n\tcolors?: string[];\r\n\tdisabled?: boolean;\r\n};\r\n\r\nconst Legend: React.FC\r\n\t\t\t\t\t\t{formatDiffs ? formatDiffs(diff) : diff}\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t{names.map((name, index) =>\r\n\t\t\t\t
\r\n\t);\r\n};\r\n","import { withStyles } from 'tss-react/mui';\r\nimport { SliderWrapper } from './sliderWrapper';\r\n\r\nexport const ResponsiveSliderWrapper = withStyles(SliderWrapper, (theme) => ({\r\n\troot: {\r\n\r\n\t},\r\n\tlabel: {\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tfontSize: '18px',\r\n\t\t\tlineHeight: '28px'\r\n\t\t}\r\n\t},\r\n\tvalue: {\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tfontSize: '24px',\r\n\t\t\tlineHeight: '28px',\r\n\t\t\tmarginBottom: '24px'\r\n\t\t}\r\n\t},\r\n\tpanelMinMax: {\r\n\t\t[theme.breakpoints.up('md')]: {\r\n\t\t\tmarginTop: 24\r\n\t\t},\r\n\t\t[theme.breakpoints.up('lg')]: {\r\n\t\t\tfontSize: '14px',\r\n\t\t\tlineHeight: '20px',\r\n\t\t\tmarginTop: 30\r\n\t\t}\r\n\t}\r\n}));\r\n","import { makeStyles } from 'tss-react/mui';\r\n\r\nexport const useStyles = makeStyles({ name: 'EmobilityPreview' })(theme => ({\r\n\troot: {\r\n\t\ttextAlign: 'left',\r\n\t\twhiteSpace: 'nowrap',\r\n\t\tscrollBehavior: 'smooth',\r\n\t\toverflow: 'hidden',\r\n\t\t'&.static-mode': {\r\n\t\t\ttextAlign: 'center'\r\n\t\t},\r\n\t\t'&.scroll-mode': {\r\n\t\t\tpadding: '0 50% 0px 50%'\r\n\t\t}\r\n\t},\r\n\ttab: {\r\n\t\tdisplay: 'inline-block',\r\n\t\tposition: 'relative',\r\n\t\tcursor: 'pointer',\r\n\t},\r\n\ttabLine: {\r\n\t\theight: '1px',\r\n\t\tbackground: theme.palette.formControlLabel,\r\n\t\twidth: '100%'\r\n\t},\r\n\ttabInner: {\r\n\t\tWebkitTouchCallout: 'none',\r\n\t\tWebkitUserSelect: 'none',\r\n\t\tKhtmlUserSelect: 'none',\r\n\t\tMozUserSelect: 'none',\r\n\t\tmsUserSelect: 'none',\r\n\t\tuserSelect: 'none',\r\n\t\tmargin:' 0px 15px 0px 15px',\r\n\t\t'&.lastTab': {\r\n\t\t\tmarginRight: 0\r\n\t\t},\r\n\t\t'&.firstTab': {\r\n\t\t\tmarginLeft: 0\r\n\t\t}\r\n\t},\r\n\tlabel: {\r\n\t\tdisplay: 'block',\r\n\t\tpadding: '8px 5px 8px 5px',\r\n\t\tfontSize: '16px',\r\n\t\tfontWeight: 'bold',\r\n\t\tletterSpacing: '0.57px',\r\n\t\tlineHeight: 'normal',\r\n\t\tcolor: theme.palette.formControlLabel,\r\n\t\t'&.active': {\r\n\t\t\tcolor: theme.palette.text.primary\r\n\t\t}\r\n\t},\r\n\tindicator: {\r\n\t\twidth: '100%',\r\n\t\theight: '3px',\r\n\t\t'&.active': {\r\n\t\t\tbackground: theme.palette.primary.main\r\n\t\t}\r\n\t}\r\n}));\r\n","/*\n\nBased off glamor's StyleSheet, thanks Sunil ❤️\n\nhigh performance StyleSheet for css-in-js systems\n\n- uses multiple style tags behind the scenes for millions of rules\n- uses `insertRule` for appending in production for *much* faster performance\n\n// usage\n\nimport { StyleSheet } from '@emotion/sheet'\n\nlet styleSheet = new StyleSheet({ key: '', container: document.head })\n\nstyleSheet.insert('#box { border: 1px solid red; }')\n- appends a css rule into the stylesheet\n\nstyleSheet.flush()\n- empties the stylesheet of all its contents\n\n*/\n// $FlowFixMe\nfunction sheetForTag(tag) {\n if (tag.sheet) {\n // $FlowFixMe\n return tag.sheet;\n } // this weirdness brought to you by firefox\n\n /* istanbul ignore next */\n\n\n for (var i = 0; i < document.styleSheets.length; i++) {\n if (document.styleSheets[i].ownerNode === tag) {\n // $FlowFixMe\n return document.styleSheets[i];\n }\n }\n}\n\nfunction createStyleElement(options) {\n var tag = document.createElement('style');\n tag.setAttribute('data-emotion', options.key);\n\n if (options.nonce !== undefined) {\n tag.setAttribute('nonce', options.nonce);\n }\n\n tag.appendChild(document.createTextNode(''));\n tag.setAttribute('data-s', '');\n return tag;\n}\n\nvar StyleSheet = /*#__PURE__*/function () {\n // Using Node instead of HTMLElement since container may be a ShadowRoot\n function StyleSheet(options) {\n var _this = this;\n\n this._insertTag = function (tag) {\n var before;\n\n if (_this.tags.length === 0) {\n if (_this.insertionPoint) {\n before = _this.insertionPoint.nextSibling;\n } else if (_this.prepend) {\n before = _this.container.firstChild;\n } else {\n before = _this.before;\n }\n } else {\n before = _this.tags[_this.tags.length - 1].nextSibling;\n }\n\n _this.container.insertBefore(tag, before);\n\n _this.tags.push(tag);\n };\n\n this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;\n this.tags = [];\n this.ctr = 0;\n this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets\n\n this.key = options.key;\n this.container = options.container;\n this.prepend = options.prepend;\n this.insertionPoint = options.insertionPoint;\n this.before = null;\n }\n\n var _proto = StyleSheet.prototype;\n\n _proto.hydrate = function hydrate(nodes) {\n nodes.forEach(this._insertTag);\n };\n\n _proto.insert = function insert(rule) {\n // the max length is how many rules we have per style tag, it's 65000 in speedy mode\n // it's 1 in dev because we insert source maps that map a single rule to a location\n // and you can only have one source map per style tag\n if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {\n this._insertTag(createStyleElement(this));\n }\n\n var tag = this.tags[this.tags.length - 1];\n\n if (process.env.NODE_ENV !== 'production') {\n var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;\n\n if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {\n // this would only cause problem in speedy mode\n // but we don't want enabling speedy to affect the observable behavior\n // so we report this error at all times\n console.error(\"You're attempting to insert the following rule:\\n\" + rule + '\\n\\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');\n }\n this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;\n }\n\n if (this.isSpeedy) {\n var sheet = sheetForTag(tag);\n\n try {\n // this is the ultrafast version, works across browsers\n // the big drawback is that the css won't be editable in devtools\n sheet.insertRule(rule, sheet.cssRules.length);\n } catch (e) {\n if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {\n console.error(\"There was a problem inserting the following rule: \\\"\" + rule + \"\\\"\", e);\n }\n }\n } else {\n tag.appendChild(document.createTextNode(rule));\n }\n\n this.ctr++;\n };\n\n _proto.flush = function flush() {\n // $FlowFixMe\n this.tags.forEach(function (tag) {\n return tag.parentNode && tag.parentNode.removeChild(tag);\n });\n this.tags = [];\n this.ctr = 0;\n\n if (process.env.NODE_ENV !== 'production') {\n this._alreadyInsertedOrderInsensitiveRule = false;\n }\n };\n\n return StyleSheet;\n}();\n\nexport { StyleSheet };\n","var weakMemoize = function weakMemoize(func) {\n // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps\n var cache = new WeakMap();\n return function (arg) {\n if (cache.has(arg)) {\n // $FlowFixMe\n return cache.get(arg);\n }\n\n var ret = func(arg);\n cache.set(arg, ret);\n return ret;\n };\n};\n\nexport default weakMemoize;\n","import { StyleSheet } from '@emotion/sheet';\nimport { dealloc, alloc, next, token, from, peek, delimit, slice, position, stringify, COMMENT, rulesheet, middleware, prefixer, serialize, compile } from 'stylis';\nimport weakMemoize from '@emotion/weak-memoize';\nimport memoize from '@emotion/memoize';\n\nvar identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {\n var previous = 0;\n var character = 0;\n\n while (true) {\n previous = character;\n character = peek(); // &\\f\n\n if (previous === 38 && character === 12) {\n points[index] = 1;\n }\n\n if (token(character)) {\n break;\n }\n\n next();\n }\n\n return slice(begin, position);\n};\n\nvar toRules = function toRules(parsed, points) {\n // pretend we've started with a comma\n var index = -1;\n var character = 44;\n\n do {\n switch (token(character)) {\n case 0:\n // &\\f\n if (character === 38 && peek() === 12) {\n // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings\n // stylis inserts \\f after & to know when & where it should replace this sequence with the context selector\n // and when it should just concatenate the outer and inner selectors\n // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here\n points[index] = 1;\n }\n\n parsed[index] += identifierWithPointTracking(position - 1, points, index);\n break;\n\n case 2:\n parsed[index] += delimit(character);\n break;\n\n case 4:\n // comma\n if (character === 44) {\n // colon\n parsed[++index] = peek() === 58 ? '&\\f' : '';\n points[index] = parsed[index].length;\n break;\n }\n\n // fallthrough\n\n default:\n parsed[index] += from(character);\n }\n } while (character = next());\n\n return parsed;\n};\n\nvar getRules = function getRules(value, points) {\n return dealloc(toRules(alloc(value), points));\n}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11\n\n\nvar fixedElements = /* #__PURE__ */new WeakMap();\nvar compat = function compat(element) {\n if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo\n // negative .length indicates that this rule has been already prefixed\n element.length < 1) {\n return;\n }\n\n var value = element.value,\n parent = element.parent;\n var isImplicitRule = element.column === parent.column && element.line === parent.line;\n\n while (parent.type !== 'rule') {\n parent = parent.parent;\n if (!parent) return;\n } // short-circuit for the simplest case\n\n\n if (element.props.length === 1 && value.charCodeAt(0) !== 58\n /* colon */\n && !fixedElements.get(parent)) {\n return;\n } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)\n // then the props has already been manipulated beforehand as they that array is shared between it and its \"rule parent\"\n\n\n if (isImplicitRule) {\n return;\n }\n\n fixedElements.set(element, true);\n var points = [];\n var rules = getRules(value, points);\n var parentRules = parent.props;\n\n for (var i = 0, k = 0; i < rules.length; i++) {\n for (var j = 0; j < parentRules.length; j++, k++) {\n element.props[k] = points[i] ? rules[i].replace(/&\\f/g, parentRules[j]) : parentRules[j] + \" \" + rules[i];\n }\n }\n};\nvar removeLabel = function removeLabel(element) {\n if (element.type === 'decl') {\n var value = element.value;\n\n if ( // charcode for l\n value.charCodeAt(0) === 108 && // charcode for b\n value.charCodeAt(2) === 98) {\n // this ignores label\n element[\"return\"] = '';\n element.value = '';\n }\n }\n};\nvar ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';\n\nvar isIgnoringComment = function isIgnoringComment(element) {\n return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;\n};\n\nvar createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {\n return function (element, index, children) {\n if (element.type !== 'rule' || cache.compat) return;\n var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);\n\n if (unsafePseudoClasses) {\n var isNested = element.parent === children[0]; // in nested rules comments become children of the \"auto-inserted\" rule\n //\n // considering this input:\n // .a {\n // .b /* comm */ {}\n // color: hotpink;\n // }\n // we get output corresponding to this:\n // .a {\n // & {\n // /* comm */\n // color: hotpink;\n // }\n // .b {}\n // }\n\n var commentContainer = isNested ? children[0].children : // global rule at the root level\n children;\n\n for (var i = commentContainer.length - 1; i >= 0; i--) {\n var node = commentContainer[i];\n\n if (node.line < element.line) {\n break;\n } // it is quite weird but comments are *usually* put at `column: element.column - 1`\n // so we seek *from the end* for the node that is earlier than the rule's `element` and check that\n // this will also match inputs like this:\n // .a {\n // /* comm */\n // .b {}\n // }\n //\n // but that is fine\n //\n // it would be the easiest to change the placement of the comment to be the first child of the rule:\n // .a {\n // .b { /* comm */ }\n // }\n // with such inputs we wouldn't have to search for the comment at all\n // TODO: consider changing this comment placement in the next major version\n\n\n if (node.column < element.column) {\n if (isIgnoringComment(node)) {\n return;\n }\n\n break;\n }\n }\n\n unsafePseudoClasses.forEach(function (unsafePseudoClass) {\n console.error(\"The pseudo class \\\"\" + unsafePseudoClass + \"\\\" is potentially unsafe when doing server-side rendering. Try changing it to \\\"\" + unsafePseudoClass.split('-child')[0] + \"-of-type\\\".\");\n });\n }\n };\n};\n\nvar isImportRule = function isImportRule(element) {\n return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;\n};\n\nvar isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {\n for (var i = index - 1; i >= 0; i--) {\n if (!isImportRule(children[i])) {\n return true;\n }\n }\n\n return false;\n}; // use this to remove incorrect elements from further processing\n// so they don't get handed to the `sheet` (or anything else)\n// as that could potentially lead to additional logs which in turn could be overhelming to the user\n\n\nvar nullifyElement = function nullifyElement(element) {\n element.type = '';\n element.value = '';\n element[\"return\"] = '';\n element.children = '';\n element.props = '';\n};\n\nvar incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {\n if (!isImportRule(element)) {\n return;\n }\n\n if (element.parent) {\n console.error(\"`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.\");\n nullifyElement(element);\n } else if (isPrependedWithRegularRules(index, children)) {\n console.error(\"`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.\");\n nullifyElement(element);\n }\n};\n\nvar isBrowser = typeof document !== 'undefined';\nvar getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {\n return memoize(function () {\n var cache = {};\n return function (name) {\n return cache[name];\n };\n });\n});\nvar defaultStylisPlugins = [prefixer];\n\nvar createCache = function createCache(options) {\n var key = options.key;\n\n if (process.env.NODE_ENV !== 'production' && !key) {\n throw new Error(\"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\\n\" + \"If multiple caches share the same key they might \\\"fight\\\" for each other's style elements.\");\n }\n\n if (isBrowser && key === 'css') {\n var ssrStyles = document.querySelectorAll(\"style[data-emotion]:not([data-s])\"); // get SSRed styles out of the way of React's hydration\n // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)\n // note this very very intentionally targets all style elements regardless of the key to ensure\n // that creating a cache works inside of render of a React component\n\n Array.prototype.forEach.call(ssrStyles, function (node) {\n // we want to only move elements which have a space in the data-emotion attribute value\n // because that indicates that it is an Emotion 11 server-side rendered style elements\n // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector\n // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)\n // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles\n // will not result in the Emotion 10 styles being destroyed\n var dataEmotionAttribute = node.getAttribute('data-emotion');\n\n if (dataEmotionAttribute.indexOf(' ') === -1) {\n return;\n }\n document.head.appendChild(node);\n node.setAttribute('data-s', '');\n });\n }\n\n var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe\n if (/[^a-z-]/.test(key)) {\n throw new Error(\"Emotion key must only contain lower case alphabetical characters and - but \\\"\" + key + \"\\\" was passed\");\n }\n }\n\n var inserted = {};\n var container;\n var nodesToHydrate = [];\n\n if (isBrowser) {\n container = options.container || document.head;\n Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which\n // means that the style elements we're looking at are only Emotion 11 server-rendered style elements\n document.querySelectorAll(\"style[data-emotion^=\\\"\" + key + \" \\\"]\"), function (node) {\n var attrib = node.getAttribute(\"data-emotion\").split(' '); // $FlowFixMe\n\n for (var i = 1; i < attrib.length; i++) {\n inserted[attrib[i]] = true;\n }\n\n nodesToHydrate.push(node);\n });\n }\n\n var _insert;\n\n var omnipresentPlugins = [compat, removeLabel];\n\n if (process.env.NODE_ENV !== 'production') {\n omnipresentPlugins.push(createUnsafeSelectorsAlarm({\n get compat() {\n return cache.compat;\n }\n\n }), incorrectImportAlarm);\n }\n\n if (isBrowser) {\n var currentSheet;\n var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {\n if (!element.root) {\n if (element[\"return\"]) {\n currentSheet.insert(element[\"return\"]);\n } else if (element.value && element.type !== COMMENT) {\n // insert empty rule in non-production environments\n // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet\n currentSheet.insert(element.value + \"{}\");\n }\n }\n } : rulesheet(function (rule) {\n currentSheet.insert(rule);\n })];\n var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));\n\n var stylis = function stylis(styles) {\n return serialize(compile(styles), serializer);\n };\n\n _insert = function insert(selector, serialized, sheet, shouldCache) {\n currentSheet = sheet;\n\n if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {\n currentSheet = {\n insert: function insert(rule) {\n sheet.insert(rule + serialized.map);\n }\n };\n }\n\n stylis(selector ? selector + \"{\" + serialized.styles + \"}\" : serialized.styles);\n\n if (shouldCache) {\n cache.inserted[serialized.name] = true;\n }\n };\n } else {\n var _finalizingPlugins = [stringify];\n\n var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));\n\n var _stylis = function _stylis(styles) {\n return serialize(compile(styles), _serializer);\n }; // $FlowFixMe\n\n\n var serverStylisCache = getServerStylisCache(stylisPlugins)(key);\n\n var getRules = function getRules(selector, serialized) {\n var name = serialized.name;\n\n if (serverStylisCache[name] === undefined) {\n serverStylisCache[name] = _stylis(selector ? selector + \"{\" + serialized.styles + \"}\" : serialized.styles);\n }\n\n return serverStylisCache[name];\n };\n\n _insert = function _insert(selector, serialized, sheet, shouldCache) {\n var name = serialized.name;\n var rules = getRules(selector, serialized);\n\n if (cache.compat === undefined) {\n // in regular mode, we don't set the styles on the inserted cache\n // since we don't need to and that would be wasting memory\n // we return them so that they are rendered in a style tag\n if (shouldCache) {\n cache.inserted[name] = true;\n }\n\n if ( // using === development instead of !== production\n // because if people do ssr in tests, the source maps showing up would be annoying\n process.env.NODE_ENV === 'development' && serialized.map !== undefined) {\n return rules + serialized.map;\n }\n\n return rules;\n } else {\n // in compat mode, we put the styles on the inserted cache so\n // that emotion-server can pull out the styles\n // except when we don't want to cache it which was in Global but now\n // is nowhere but we don't want to do a major right now\n // and just in case we're going to leave the case here\n // it's also not affecting client side bundle size\n // so it's really not a big deal\n if (shouldCache) {\n cache.inserted[name] = rules;\n } else {\n return rules;\n }\n }\n };\n }\n\n var cache = {\n key: key,\n sheet: new StyleSheet({\n key: key,\n container: container,\n nonce: options.nonce,\n speedy: options.speedy,\n prepend: options.prepend,\n insertionPoint: options.insertionPoint\n }),\n nonce: options.nonce,\n inserted: inserted,\n registered: {},\n insert: _insert\n };\n cache.sheet.hydrate(nodesToHydrate);\n return cache;\n};\n\nexport default createCache;\n","function memoize(fn) {\n var cache = Object.create(null);\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport default memoize;\n","function _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n \"default\": obj\n };\n}\n\nmodule.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.breakpointKeys = void 0;\nexports.default = createBreakpoints;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutPropertiesLoose\"));\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nconst _excluded = [\"values\", \"unit\", \"step\"];\n// Sorted ASC by size. That's important.\n// It can't be configured as it's used statically for propTypes.\nconst breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];\nexports.breakpointKeys = breakpointKeys;\n\nconst sortBreakpointsValues = values => {\n const breakpointsAsArray = Object.keys(values).map(key => ({\n key,\n val: values[key]\n })) || []; // Sort in ascending order\n\n breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);\n return breakpointsAsArray.reduce((acc, obj) => {\n return (0, _extends2.default)({}, acc, {\n [obj.key]: obj.val\n });\n }, {});\n}; // Keep in mind that @media is inclusive by the CSS specification.\n\n\nfunction createBreakpoints(breakpoints) {\n const {\n // The breakpoint **start** at this value.\n // For instance with the first breakpoint xs: [xs, sm).\n values = {\n xs: 0,\n // phone\n sm: 600,\n // tablet\n md: 900,\n // small laptop\n lg: 1200,\n // desktop\n xl: 1536 // large screen\n\n },\n unit = 'px',\n step = 5\n } = breakpoints,\n other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, _excluded);\n const sortedValues = sortBreakpointsValues(values);\n const keys = Object.keys(sortedValues);\n\n function up(key) {\n const value = typeof values[key] === 'number' ? values[key] : key;\n return `@media (min-width:${value}${unit})`;\n }\n\n function down(key) {\n const value = typeof values[key] === 'number' ? values[key] : key;\n return `@media (max-width:${value - step / 100}${unit})`;\n }\n\n function between(start, end) {\n const endIndex = keys.indexOf(end);\n return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;\n }\n\n function only(key) {\n if (keys.indexOf(key) + 1 < keys.length) {\n return between(key, keys[keys.indexOf(key) + 1]);\n }\n\n return up(key);\n }\n\n function not(key) {\n // handle first and last key separately, for better readability\n const keyIndex = keys.indexOf(key);\n\n if (keyIndex === 0) {\n return up(keys[1]);\n }\n\n if (keyIndex === keys.length - 1) {\n return down(keys[keyIndex]);\n }\n\n return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');\n }\n\n return (0, _extends2.default)({\n keys,\n values: sortedValues,\n up,\n down,\n between,\n only,\n not,\n unit\n }, other);\n}","function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nmodule.exports = _objectWithoutPropertiesLoose, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","function _extends() {\n module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n }, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;\n return _extends.apply(this, arguments);\n}\n\nmodule.exports = _extends, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","import { Palette } from '@mui/material';\r\nimport { alpha, CSSInterpolation } from '@mui/material/styles';\r\n\r\nexport const fabRoot = (): CSSInterpolation => ({\r\n\tzIndex: 'unset',\r\n\twidth: 44,\r\n\theight: 44,\r\n\tborderRadius: 22,\r\n\t'&.Mui-disabled': {\r\n\t\topacity: 0.7\r\n\t},\r\n\t'&.MuiFab-sizeSmall': {\r\n\t\twidth: 40,\r\n\t\theight: 40,\r\n\t\tborderRadius: 20\r\n\t},\r\n\t'&.MuiFab-sizeMedium': {\r\n\t\twidth: 42,\r\n\t\theight: 42,\r\n\t\tborderRadius: 21\r\n\t}\r\n});\r\n\r\nexport const fabExtended = (palette: Palette): CSSInterpolation => ({\r\n\twidth: 'unset',\r\n\t'&.MuiFab-sizeSmall': {\r\n\t\twidth: 'unset',\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px'\r\n\t},\r\n\t'&.MuiFab-sizeMedium': {\r\n\t\twidth: 'unset',\r\n\t\tfontSize: '14px',\r\n\t\tlineHeight: '14px'\r\n\t},\r\n\tfontWeight: 'bold',\r\n\tfontSize: '16px',\r\n\tlineHeight: '16px',\r\n\tpaddingLeft: 24,\r\n\tpaddingRight: 24,\r\n\ttextDecoration: 'none !important',\r\n\ttextTransform: 'none',\r\n\tletterSpacing: 0.75\r\n});\r\n\r\nexport const fabSecondary = (palette: Palette): CSSInterpolation => ({\r\n\tboxShadow: 'none',\r\n\tborder: '1.5px solid ' + palette.text.primary,\r\n\tcolor: palette.text.primary,\r\n\tbackgroundColor: 'transparent',\r\n\t'&:active': {\r\n\t\tboxShadow: 'none'\r\n\t},\r\n\t'&:hover': {\r\n\t\tbackgroundColor: alpha(palette.text.primary, 0.06),\r\n\t\tborderColor: palette.text.primary\r\n\t},\r\n\t'&.Mui-disabled': {\r\n\t\tborder: 'none',\r\n\t\topacity: 'unset',\r\n\t\tbackground: '#d8d8d8',\r\n\t\tcolor: '#9E9FA0'\r\n\t},\r\n\t'&:not(.btn)': {\r\n\t\tcolor: palette.text.primary,\r\n\t\t'&.Mui-disabled': {\r\n\t\t\tcolor: '#9E9FA0'\r\n\t\t},\r\n\t\t'&:hover': {\r\n\t\t\tcolor: palette.text.primary,\r\n\t\t\ttextDecoration: 'none'\r\n\t\t}\r\n\t}\r\n});\r\n\r\nexport const fabPrimary = (palette: Palette): CSSInterpolation => ({\r\n\tcolor: '#161718',\r\n\tboxShadow: 'none',\r\n\tbackground: palette.secondary.main,\r\n\t'&.Mui-disabled': {\r\n\t\topacity: 'unset',\r\n\t\tbackground: '#d8d8d8',\r\n\t\tcolor: '#9E9FA0'\r\n\t},\r\n\t'&:hover': {\r\n\t\tbackgroundColor: palette.secondary.light,\r\n\t\tcolor: '#161718'\r\n\t},\r\n\t'&:active': {\r\n\t\tboxShadow: 'none'\r\n\t},\r\n\t'&:not(.btn)': {\r\n\t\tcolor: '#161718',\r\n\t\t'&.Mui-disabled': {\r\n\t\t\tcolor: '#9E9FA0'\r\n\t\t},\r\n\t\t'&:hover': {\r\n\t\t\tbackgroundColor: palette.secondary.light,\r\n\t\t\tcolor: '#161718',\r\n\t\t\ttextDecoration: 'none'\r\n\t\t}\r\n\t}\r\n});\r\n","import { Palette } from '@mui/material';\r\n\r\nexport const menuItemRoot = (palette: Palette) => ({\r\n\t'&:hover': {\r\n\t\tbackgroundColor: palette.background.selected,\r\n\t\tcolor: palette.mode === 'dark'\r\n\t\t\t? palette.skodaColors['neutrals-white']\r\n\t\t\t: palette.skodaColors['neutrals-chrome900']\r\n\t},\r\n\t'&:focus': {\r\n\t\tbackgroundColor: 'unset',\r\n\t\t'&:hover': {\r\n\t\t\tbackgroundColor: palette.background.selected\r\n\t\t}\r\n\t},\r\n\t'&.Mui-selected': {\r\n\t\tbackgroundColor: palette.background.selected,\r\n\t\tcolor: palette.text.primary,\r\n\t\tfontWeight: undefined,\r\n\t\t'&:hover': {\r\n\t\t\tbackgroundColor: palette.background.selected\r\n\t\t},\r\n\t\t'&:focus': {\r\n\t\t\tbackgroundColor: palette.background.selected,\r\n\t\t\t'&:hover': {\r\n\t\t\t\tbackgroundColor: palette.background.selected\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n});\r\n\r\nexport const menuItemRootDark = (palette: Palette) => ({\r\n\tcolor: 'rgba(256,256,256,0.5)',\r\n\t'&:hover': {\r\n\t\tbackgroundColor: 'unset',\r\n\t\tcolor: palette.skodaColors['neutrals-white']\r\n\t},\r\n\t'&:focus': {\r\n\t\tbackgroundColor: 'unset'\r\n\t},\r\n\t'&.Mui-selected': {\r\n\t\tbackgroundColor: 'unset',\r\n\t\tcolor: palette.skodaColors['neutrals-white'],\r\n\t\tfontWeight: 'bold',\r\n\t\t'&:hover': {\r\n\t\t\tbackgroundColor: 'unset'\r\n\t\t}\r\n\t}\r\n});\r\n","import { Palette } from '@mui/material';\r\n\r\nexport const sliderOverrides = (palette: Palette) => ({\r\n\troot: {\r\n\t\theight: 8,\r\n\t\tpaddingTop: 16,\r\n\t\tpaddingBottom: 16,\r\n\t\tmarginRight: 40,\r\n\t\twidth: 'unset',\r\n\t\tdisplay: 'block',\r\n\t\ttransition: 'opacity 1s',\r\n\t\t'&.Mui-disabled': {\r\n\t\t\topacity: 0.5\r\n\t\t},\r\n\t\t'@media (pointer: coarse)': {\r\n\t\t\tpaddingTop: 16,\r\n\t\t\tpaddingBottom: 16\r\n\t\t}\r\n\t},\r\n\tthumb: {\r\n\t\twidth: 40,\r\n\t\theight: 40,\r\n\t\tmarginLeft: 0,\r\n\t\tborderRadius: 20,\r\n\t\tbackgroundColor: palette.primary.main,\r\n\t\tcolor: '#ffffff',\r\n\t\tboxShadow: 'none',\r\n\t\ttransform: 'translate(0, -50%)',\r\n\t\t'&:focus, &:hover, &.Mui-focusVisible, &.Mui-active': {\r\n\t\t\tboxShadow: 'none'\r\n\t\t},\r\n\t\t'&.Mui-disabled': {\r\n\t\t\twidth: 40,\r\n\t\t\theight: 40,\r\n\t\t\tmarginLeft: 0\r\n\t\t},\r\n\t\t'&:before': {\r\n\t\t\tboxShadow: 'none'\r\n\t\t}\r\n\t},\r\n\trail: {\r\n\t\theight: 8,\r\n\t\tborderRadius: 4,\r\n\t\twidth: 'unset',\r\n\t\tleft: 0,\r\n\t\tright: -40,\r\n\t\tcolor: '#C4C6C7'\r\n\t},\r\n\ttrack: {\r\n\t\theight: 8,\r\n\t\tborderRadius: 4,\r\n\t\tborderTopRightRadius: 0,\r\n\t\tborderBottomRightRadius: 0,\r\n\t\tcolor: palette.secondary.main,\r\n\t\tborder: 'none'\r\n\t},\r\n\tthumbColorSecondary: {\r\n\t\tbackgroundColor: palette.primary.main,\r\n\t\t'&:focus, &:hover, &$active': {\r\n\t\t\tboxShadow: 'none'\r\n\t\t}\r\n\t}\r\n});\r\n","import { Palette } from '@mui/material';\r\n\r\nexport const tooltipOverrides = (palette: Palette) => ({\r\n\ttooltip: {\r\n\t\tbackgroundColor: palette.tertiary.main,\r\n\t\tcolor: '#FFFFFF',\r\n\t\tborderRadius: 8,\r\n\t\tboxShadow: palette.mode === 'light'\r\n\t\t\t? '0 0 5px 0 rgba(74, 74, 74, 0.3), 0 30px 40px 0 rgba(74, 74, 74, 0.3)'\r\n\t\t\t: 'none',\r\n\t\tpadding: 18,\r\n\t\tmaxWidth: 350,\r\n\t\tfontSize: 12\r\n\t},\r\n\tarrow: {\r\n\t\tcolor: palette.tertiary.main\r\n\t}\r\n});\r\n\r\n","import { PaletteMode, PaletteOptions, SimplePaletteColorOptions } from '@mui/material';\r\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\r\n\r\nconst skodaColors = tokens['flow-colors'];\r\n\r\nexport const createPaletteDark = (): PaletteOptions => ({\r\n\tmode: 'dark' as PaletteMode,\r\n\tskodaColors,\r\n\tsecondary: { main: '#78FAAE', light: '#A8FFCC' } as SimplePaletteColorOptions,\r\n\tprimary: { main: '#419468' },\r\n\ttertiary: { main: '#0E3A2F' },\r\n\terror: { main: '#E82B37' },\r\n\taction: { disabled: skodaColors['neutrals-chrome200'] },\r\n\ttext: {\r\n\t\tprimary: skodaColors['neutrals-white'],\r\n\t\tsecondary: skodaColors['neutrals-chrome300'],\r\n\t\tdisabled: skodaColors['neutrals-chrome500']\r\n\t},\r\n\tbackground: {\r\n\t\tdefault: skodaColors['neutrals-chrome800'],\r\n\t\tpaper: skodaColors['neutrals-chrome700'],\r\n\t\tselected: 'rgba(0, 0, 0, 0.055)'\r\n\t},\r\n\tformControlLabel: '#b8b8b8',\r\n\tdropdownIcon: skodaColors['neutrals-white'],\r\n\tskodaLinkIcon: skodaColors['neutrals-white'],\r\n\tcloseButton: {\r\n\t\tbackground: '#E4E4E4',\r\n\t\tcolor: skodaColors.text\r\n\t},\r\n\tscrollbar: {\r\n\t\tdark: '#C4C6C7',\r\n\t\tlight: '#C4C6C7'\r\n\t},\r\n\tbulletPoints: skodaColors['neutrals-white'],\r\n\tchip: {\r\n\t\tbackgroundPrimary: '#E8FFF1',\r\n\t\tbackgroundSecondary: 'rgba(22, 23, 24, 0.06)',\r\n\t\tcolorPrimary: '#419468',\r\n\t\tcolorSecondary: skodaColors['neutrals-white'],\r\n\t\tcolorPrimaryHover: '#59BC87',\r\n\t\tcolorSecondaryHover: skodaColors['neutrals-chrome500']\r\n\t}\r\n});\r\n","import { PaletteMode } from '@mui/material';\r\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\r\n\r\nconst skodaColors = tokens['flow-colors'];\r\n\r\nexport const createPaletteLight = () => ({\r\n\tmode: 'light' as PaletteMode,\r\n\tskodaColors,\r\n\tsecondary: { main: '#78FAAE', light: '#A8FFCC' },\r\n\tprimary: { main: '#419468' },\r\n\ttertiary: { main: '#0E3A2F' },\r\n\terror: { main: '#E82B37' },\r\n\taction: { disabled: skodaColors['neutrals-chrome200'] },\r\n\ttext: {\r\n\t\tprimary: skodaColors.text,\r\n\t\tsecondary: '#464748',\r\n\t\tdisabled: skodaColors['neutrals-chrome200']\r\n\t},\r\n\tbackground: {\r\n\t\tdefault: '#f2f2f2',\r\n\t\tpaper: skodaColors.background,\r\n\t\tselected: 'rgba(0, 0, 0, 0.055)'\r\n\t},\r\n\tformControlLabel: '#7C7D7E',\r\n\tdropdownIcon: skodaColors.text,\r\n\tskodaLinkIcon: skodaColors.text,\r\n\tcloseButton: {\r\n\t\tbackground: '#E4E4E4',\r\n\t\tcolor: skodaColors.text\r\n\t},\r\n\tscrollbar: {\r\n\t\tdark: '#C4C6C7',\r\n\t\tlight: '#C4C6C788'\r\n\t},\r\n\tbulletPoints: skodaColors.text,\r\n\tchip: {\r\n\t\tbackgroundPrimary: '#E8FFF1',\r\n\t\tbackgroundSecondary: 'rgba(22, 23, 24, 0.06)',\r\n\t\tcolorPrimary: '#419468',\r\n\t\tcolorSecondary: skodaColors.text,\r\n\t\tcolorPrimaryHover: '#59BC87',\r\n\t\tcolorSecondaryHover: '#5A5B5C'\r\n\t}\r\n});\r\n","import { Breakpoints, Palette, PaletteMode, ThemeOptions } from '@mui/material';\r\nimport { createTheme, Direction } from '@mui/material/styles';\r\nimport { typographyClasses } from '@mui/material/Typography';\r\nimport createBreakpoints from '@mui/system/createTheme/createBreakpoints';\r\nimport deepmerge from 'deepmerge';\r\nimport React from 'react';\r\nimport { SkodaAnimatedCheckboxIcon, SkodaExpandMoreIcon, SkodaRadioAnimatedIcon } from '../components/icons';\r\nimport { SkodaSelectMenu } from '../components/scrollbars/scrollbars';\r\nimport { fabExtended, fabPrimary, fabRoot, fabSecondary } from './components/fab';\r\nimport { menuItemRoot, menuItemRootDark } from './components/menuItem';\r\nimport { sliderOverrides } from './components/slider';\r\nimport { tooltipOverrides } from './components/tooltip';\r\nimport { resolvePalette } from './palette';\r\nimport './themeExtensions';\r\n\r\nexport const defaultSkodaBreakpoints = createBreakpoints({\r\n\tvalues: {\r\n\t\txs: 0,\r\n\t\tsm: 576,\r\n\t\tmd: 992,\r\n\t\tlg: 1200,\r\n\t\txl: 1920\r\n\t}\r\n});\r\n\r\nconst createBaseSkodaTheme = (palette: Palette, breakpoints: Breakpoints, originalBreakpoints: Breakpoints, direction: Direction): ThemeOptions => ({\r\n\tbreakpoints,\r\n\toriginalBreakpoints,\r\n\tpalette,\r\n\tdirection,\r\n\ttypography: {\r\n\t\thtmlFontSize:\r\n\t\t\t+window.getComputedStyle(document.documentElement).fontSize\r\n\t\t\t\t.replace('px', ''),\r\n\t\tfontFamily: 'inherit',\r\n\t\tallVariants: {\r\n\t\t\tcolor: palette.text.primary\r\n\t\t},\r\n\t\th1: {\r\n\t\t\tfontWeight: 'bold',\r\n\t\t\tpadding: 0,\r\n\t\t\tmargin: 0,\r\n\t\t\ttextTransform: 'none',\r\n\t\t\tfontSize: '33px',\r\n\t\t\tlineHeight: '40px',\r\n\t\t\t[breakpoints.up('md')]: {\r\n\t\t\t\tfontSize: '44px',\r\n\t\t\t\tlineHeight: '52px'\r\n\t\t\t},\r\n\t\t\t[`&.${typographyClasses.gutterBottom}`]: {\r\n\t\t\t\tmarginBottom: 50\r\n\t\t\t}\r\n\t\t},\r\n\t\th2: {\r\n\t\t\tfontWeight: 'bold',\r\n\t\t\tpadding: 0,\r\n\t\t\tmargin: 0,\r\n\t\t\ttextTransform: 'none',\r\n\t\t\tfontSize: '28px',\r\n\t\t\tlineHeight: '36px',\r\n\t\t\t[breakpoints.up('md')]: {\r\n\t\t\t\tfontSize: '32px',\r\n\t\t\t\tlineHeight: '38px'\r\n\t\t\t},\r\n\t\t\t[breakpoints.up('lg')]: {\r\n\t\t\t\tfontSize: '36px',\r\n\t\t\t\tlineHeight: '44px'\r\n\t\t\t},\r\n\t\t\t[`&.${typographyClasses.gutterBottom}`]: {\r\n\t\t\t\tmarginBottom: 40,\r\n\t\t\t\t[breakpoints.up('lg')]: {\r\n\t\t\t\t\tmarginBottom: 56\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\th3: {\r\n\t\t\tfontWeight: 'bold',\r\n\t\t\tpadding: 0,\r\n\t\t\tmargin: 0,\r\n\t\t\ttextTransform: 'none',\r\n\t\t\tfontSize: '28px',\r\n\t\t\tlineHeight: '36px',\r\n\t\t\t[`&.${typographyClasses.gutterBottom}`]: {\r\n\t\t\t\tmarginBottom: 28\r\n\t\t\t}\r\n\t\t},\r\n\t\tfontWeightRegular: 200,\r\n\t\tfontWeightLight: 200,\r\n\t\tfontWeightMedium: 300,\r\n\t\tfontWeightBold: 700\r\n\t},\r\n\tcomponents: {\r\n\t\tMuiSlider: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\t...sliderOverrides(palette),\r\n\t\t\t\tthumbSizeSmall: {\r\n\t\t\t\t\twidth: 16,\r\n\t\t\t\t\theight: 16,\r\n\t\t\t\t\t'&.Mui-disabled': {\r\n\t\t\t\t\t\twidth: 16,\r\n\t\t\t\t\t\theight: 16,\r\n\t\t\t\t\t\tmarginLeft: 0\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tsizeSmall: {\r\n\t\t\t\t\tpaddingTop: 6,\r\n\t\t\t\t\tpaddingBottom: 6,\r\n\t\t\t\t\tmarginRight: 16,\r\n\t\t\t\t\theight: 4,\r\n\t\t\t\t\t'@media (pointer: coarse)': {\r\n\t\t\t\t\t\tpaddingTop: 6,\r\n\t\t\t\t\t\tpaddingBottom: 6\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'& .MuiSlider-rail': {\r\n\t\t\t\t\t\tright: -16,\r\n\t\t\t\t\t\theight: 4\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'& .MuiSlider-track': {\r\n\t\t\t\t\t\theight: 4\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiDialog: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\tcolor: palette.text.primary,\r\n\t\t\t\t\tfontWeight: 200,\r\n\t\t\t\t\t'& ::selection': {\r\n\t\t\t\t\t\tbackground: palette.primary.main,\r\n\t\t\t\t\t\tcolor: '#ffffff'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'&::selection': {\r\n\t\t\t\t\t\tbackground: palette.primary.main,\r\n\t\t\t\t\t\tcolor: '#ffffff'\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiFab: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: fabRoot(),\r\n\t\t\t\textended: fabExtended(palette),\r\n\t\t\t\tsecondary: fabSecondary(palette),\r\n\t\t\t\tprimary: fabPrimary(palette)\r\n\t\t\t},\r\n\t\t\tdefaultProps: {\r\n\t\t\t\tfocusRipple: false\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiSelect: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\ticon: {\r\n\t\t\t\t\tcolor: palette.dropdownIcon,\r\n\t\t\t\t\ttop: '50%',\r\n\t\t\t\t\ttransform: 'translateY(-50%)',\r\n\t\t\t\t\ttransitionDuration: '0.15s',\r\n\t\t\t\t\ttransitionProperty: 'transform'\r\n\t\t\t\t},\r\n\t\t\t\ticonFilled: {\r\n\t\t\t\t\tright: '21px',\r\n\t\t\t\t\ttop: '65%'\r\n\t\t\t\t},\r\n\t\t\t\ticonOpen: {\r\n\t\t\t\t\ttransform: 'translateY(-50%) rotate(180deg)'\r\n\t\t\t\t},\r\n\t\t\t\tselect: {\r\n\t\t\t\t\t'&:focus': {\r\n\t\t\t\t\t\tbackgroundColor: 'unset'\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tfilled: {\r\n\t\t\t\t\t'&.MuiSelect-filled': {\r\n\t\t\t\t\t\tpaddingRight: 64\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tdefaultProps: {\r\n\t\t\t\tIconComponent: SkodaExpandMoreIcon,\r\n\t\t\t\tMenuProps: {\r\n\t\t\t\t\tPaperProps: {\r\n\t\t\t\t\t\tcomponent: SkodaSelectMenu\r\n\t\t\t\t\t} as any,\r\n\t\t\t\t\tanchorOrigin: {\r\n\t\t\t\t\t\tvertical: 'bottom',\r\n\t\t\t\t\t\thorizontal: 'left'\r\n\t\t\t\t\t},\r\n\t\t\t\t\ttransformOrigin: {\r\n\t\t\t\t\t\tvertical: -10,\r\n\t\t\t\t\t\thorizontal: 'left'\r\n\t\t\t\t\t},\r\n\t\t\t\t\tMenuListProps: {\r\n\t\t\t\t\t\tdisablePadding: true\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tautoFocus: false,\r\n\t\t\t\tvariant: 'standard'\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiPopover: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\tpaper: {\r\n\t\t\t\t\tmaxHeight: 250\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiMenuItem: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\t...menuItemRoot(palette),\r\n\t\t\t\t\t'&.dark': {\r\n\t\t\t\t\t\t...menuItemRootDark(palette)\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tdefaultProps: {\r\n\t\t\t\tautoFocus: false\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiInputBase: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\tfontWeight: 'inherit',\r\n\t\t\t\t\tfontSize: '18px',\r\n\t\t\t\t\t'&.MuiInput-root.Mui-disabled': {\r\n ':before': {\r\n borderBottomStyle: 'solid',\r\n\t\t\t\t\t\t\tborderColor: palette.action.disabled\r\n }\r\n },\r\n\t\t\t\t\t'&.MuiFilledInput-root.Mui-disabled': {\r\n ':before': {\r\n borderBottomStyle: 'solid',\r\n\t\t\t\t\t\t\tborderColor: palette.action.disabled\r\n }\r\n }\r\n\t\t\t\t},\r\n\t\t\t\tinput: {\r\n\t\t\t\t\tpaddingBottom: 15,\r\n\t\t\t\t\tpaddingTop: 15\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiInputLabel: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\tfontWeight: 'inherit',\r\n\t\t\t\t\tfontSize: '18px'\r\n\t\t\t\t},\r\n\t\t\t\tformControl: {\r\n\t\t\t\t\tcolor: palette.formControlLabel\r\n\t\t\t\t},\r\n\t\t\t\tfilled: {\r\n\t\t\t\t\ttransform: 'translate(16px, 26px) scale(1)',\r\n\t\t\t\t\t'&.MuiInputLabel-shrink': {\r\n\t\t\t\t\t\ttransform: 'translate(16px, 12px) scale(0.777)'\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tstandard: {\r\n\t\t\t\t\ttransform: 'translate(0, 26px) scale(1)',\r\n\t\t\t\t\t'&.MuiInputLabel-shrink': {\r\n\t\t\t\t\t\ttransform: 'translate(0, -1.5px) scale(0.777)'\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiFormControl: {\r\n\t\t\tdefaultProps: {\r\n\t\t\t\tvariant: 'standard'\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiTextField: {\r\n\t\t\tdefaultProps: {\r\n\t\t\t\tvariant: 'standard'\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiFilledInput: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\tbackgroundColor: palette.background.paper,\r\n\t\t\t\t\tborderTopLeftRadius: 0,\r\n\t\t\t\t\tborderTopRightRadius: 0,\r\n\t\t\t\t\t'&:hover': {\r\n\t\t\t\t\t\tbackgroundColor: palette.background.paper\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'&.Mui-focused': {\r\n\t\t\t\t\t\tbackgroundColor: palette.background.paper\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'&:before': {\r\n\t\t\t\t\t\tborderBottom: '1px solid ' + palette.text.primary\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tinput: {\r\n\t\t\t\t\tpaddingLeft: 16,\r\n\t\t\t\t\tpaddingRight: 16\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiInput: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\t'&:before': {\r\n\t\t\t\t\t\tborderBottom: '1px solid ' + palette.text.primary\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tformControl: {\r\n\t\t\t\t\t'label + &': {\r\n\t\t\t\t\t\tmarginTop: 11\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiButtonBase: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\toutline: 'none !important'\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tdefaultProps: {\r\n\t\t\t\tdisableRipple: true\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiButton: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\ttextTransform: 'none'\r\n\t\t\t\t},\r\n\t\t\t\ttextPrimary: {\r\n\t\t\t\t\tcolor: palette.primary.main\r\n\t\t\t\t},\r\n\t\t\t\ttextSecondary: {\r\n\t\t\t\t\tcolor: palette.text.primary\r\n\t\t\t\t},\r\n\t\t\t\toutlinedSecondary: {\r\n\t\t\t\t\tcolor: palette.text.primary,\r\n\t\t\t\t\tborderColor: palette.text.primary,\r\n\t\t\t\t\t'&:hover': {\r\n\t\t\t\t\t\tborderColor: palette.text.primary\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiSwitch: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\twidth: 76,\r\n\t\t\t\t\theight: 48\r\n\t\t\t\t},\r\n\t\t\t\tswitchBase: {\r\n\t\t\t\t\ttop: 1,\r\n\t\t\t\t\tleft: 1,\r\n\t\t\t\t\tpadding: 14,\r\n\t\t\t\t\t'&.Mui-checked': {\r\n\t\t\t\t\t\ttransform: 'translateX(27px)',\r\n\t\t\t\t\t\t'& + .MuiSwitch-track': {\r\n\t\t\t\t\t\t\topacity: 1\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\ttrack: {\r\n\t\t\t\t\tborderRadius: 12,\r\n\t\t\t\t\topacity: 1,\r\n\t\t\t\t\tbackground: palette.text.disabled\r\n\t\t\t\t},\r\n\t\t\t\tthumb: {\r\n\t\t\t\t\twidth: 18,\r\n\t\t\t\t\theight: 18,\r\n\t\t\t\t\tboxShadow: 'none',\r\n\t\t\t\t\tcolor: palette.background.paper\r\n\t\t\t\t},\r\n\t\t\t\tcolorPrimary: {\r\n\t\t\t\t\t'&.Mui-disabled': {\r\n\t\t\t\t\t\t'&.Mui-checked': {\r\n\t\t\t\t\t\t\t'& + .MuiSwitch-track': {\r\n\t\t\t\t\t\t\t\tbackgroundColor: palette.primary.main,\r\n\t\t\t\t\t\t\t\topacity: 0.5\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tcolorSecondary: {\r\n\t\t\t\t\t'&.Mui-disabled': {\r\n\t\t\t\t\t\t'&.Mui-checked': {\r\n\t\t\t\t\t\t\t'& + .MuiSwitch-track': {\r\n\t\t\t\t\t\t\t\topacity: 0.12\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiSvgIcon: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\tverticalAlign: 'middle'\r\n\t\t\t\t},\r\n\t\t\t\tfontSizeSmall: {\r\n\t\t\t\t\tfontSize: '22px'\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiIconButton: {\r\n\t\t\tstyleOverrides: {\r\n\t\t\t\troot: {\r\n\t\t\t\t\tfontSize: '27px',\r\n\t\t\t\t\t[breakpoints.up('xl')]: {\r\n\t\t\t\t\t\tfontSize: '31px'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'@media (hover: hover)': {\r\n\t\t\t\t\t\t'&:hover': {\r\n\t\t\t\t\t\t\tcolor: palette.primary.main\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'&:active': {\r\n\t\t\t\t\t\tcolor: palette.primary.main\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tcolorPrimary: {\r\n\t\t\t\t\t'@media (hover: hover)': {\r\n\t\t\t\t\t\t'&:hover': {\r\n\t\t\t\t\t\t\tcolor: palette.primary.main\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},\r\n\t\t\t\t\t'&:active': {\r\n\t\t\t\t\t\tcolor: palette.primary.main\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tsizeSmall: {\r\n\t\t\t\t\tfontSize: '24px',\r\n\t\t\t\t\t[breakpoints.up('xl')]: {\r\n\t\t\t\t\t\tfontSize: '28px'\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiPaper: {\r\n\t\t\tdefaultProps: {\r\n\t\t\t\tsquare: true\r\n\t\t\t}\r\n\t\t},\r\n\t\tMuiCheckbox: {\r\n\t\t\tdefaultProps: {\r\n\t\t\t\ticon: \r\n\t\t\t\t\t
)}\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t \r\n\t\t
\r\n\t);\r\n};\r\n\r\nconst ThemeProviderStaticBreakpoints: React.FC\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{textClose}\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t Math.floor(val) + ' %'} />\r\n\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantyLarge' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 100,\r\n\t\tposition: 'relative',\r\n\t\talignItems: 'center',\r\n\t\tmaxWidth: 1200,\r\n\t\twidth: '100%'\r\n\t},\r\n\tprogress: {\r\n\t\tmarginRight: 25\r\n\t},\r\n\tpanelTitle: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tgap: 3\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '21px',\r\n\t\tlineHeight: '26px',\r\n\t\tletterSpacing: '0.02em'\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap'\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tfontWeight: 700,\r\n\t\tgap: 4\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0'\r\n\t},\r\n\tvalueRemaining: {\r\n\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\ttextAlign: 'end',\r\n\t\tposition: 'absolute',\r\n\t\tbottom: 0,\r\n\t\tright: 0\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '21px',\r\n\t\tlineHeight: '26px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantyLarge = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{translations.linkConditions} }\r\n\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantyMedium-0' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tgap: 24,\r\n\t\tmaxWidth: 580\r\n\t},\r\n\tpanelContent: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 50\r\n\t},\r\n\tpanelRight: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tgap: 12,\r\n\t\tflexGrow: 1\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em'\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tfontWeight: 700,\r\n\t\tgap: 4\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0'\r\n\t},\r\n\tvalueRemaining: {\r\n\r\n\t},\r\n\tpanelBottom: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 18,\r\n\t\tjustifyContent: 'space-between'\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap'\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\ttextAlign: 'end'\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '20px',\r\n\t\tlineHeight: '24px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantyMedium0 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t{translations.title && {translations.title}}\r\n\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t{remainingValueText}\r\n\t\t\t
\r\n\t\t\t{link && \r\n\t\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantyMedium-1' })(theme => ({\r\n\troot: {\r\n\t\tmaxWidth: 580\r\n\t},\r\n\tpanelContent: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 30\r\n\t},\r\n\tpanelRight: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tflexGrow: 1\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tmarginBottom: 12\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tfontWeight: 700,\r\n\t\tgap: 8,\r\n\t\tmarginBottom: 18\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0'\r\n\t},\r\n\tvalueRemaining: {\r\n\r\n\t},\r\n\tpanelBottom: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 18,\r\n\t\tjustifyContent: 'space-between'\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap'\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\ttextAlign: 'end'\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '20px',\r\n\t\tlineHeight: '24px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantyMedium1 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\t{(expiryDateText || link) &&\r\n\t\t\t\t\r\n\t\t\t\t\t{translations.title && {translations.title}}\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t\t{link && {translations.linkConditions} }\r\n\t\t\t\t
}\r\n\t\t\r\n\t\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantyMedium-2' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 45,\r\n\t\tmaxWidth: 580\r\n\t},\r\n\tpanelRight: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tgap: 24,\r\n\t\tflexGrow: 1\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '24px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em'\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '24px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tfontWeight: 700\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0'\r\n\t},\r\n\tvalueRemaining: {\r\n\r\n\t},\r\n\tpanelBottom: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 30,\r\n\t\tjustifyContent: 'space-between'\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap'\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\ttextAlign: 'end'\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '30px',\r\n\t\tlineHeight: '36px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantyMedium2 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t{translations.title && {translations.title}}\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t\t
\r\n\t\t\t\t\t{(expiryDateText || link) &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t\t\t\t{link && {translations.linkConditions} }\r\n\t\t\t\t\t\t
}\r\n\t\t\t\t\r\n\t\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantySmall-0' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tmaxWidth: 400\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tmarginBottom: 21,\r\n\t\ttextAlign: 'center'\r\n\t},\r\n\tvaluesPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 28\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '14px',\r\n\t\tlineHeight: '20px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tgap: 4\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0',\r\n\t\tfontWeight: 700\r\n\t},\r\n\tvalueRemaining: {\r\n\t\tfontWeight: 700,\r\n\t\tmarginBottom: 4\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '16px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap'\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\ttextAlign: 'center',\r\n\t\tcursor: 'pointer',\r\n\t\tmarginTop: 28\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '14px',\r\n\t\tlineHeight: '20px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantySmall0 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, {props});\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t{translations.title && {translations.title}}\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t
\r\n\t\t\t\t{(expiryDateText || link) &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t\t\t{link && {translations.linkConditions} }\r\n\t\t\t\t\t
}\r\n\t\t\t\r\n\t\t\t{translations.title && {translations.title}}\r\n\t\t\t{translations.linkConditions} }\r\n\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantySmall-1' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tmaxWidth: 400\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tmarginBottom: 13,\r\n\t\ttextAlign: 'center'\r\n\t},\r\n\tvaluesPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 35\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em'\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0',\r\n\t\tfontWeight: 700\r\n\t},\r\n\tvalueRemaining: {\r\n\t\tfontWeight: 700\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '16px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap',\r\n\t\tmarginBottom: 12\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\tcursor: 'pointer',\r\n\t\tmarginTop: 24\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '26px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantySmall1 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\t{link && \r\n\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t{translations.title && {translations.title}}\r\n\t\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantySmall-2' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tmaxWidth: 400\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tmarginBottom: 24\r\n\t},\r\n\tvaluesPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 42,\r\n\t\tmarginBottom: 24\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tgap: 4\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0',\r\n\t\tfontWeight: 700\r\n\t},\r\n\tvalueRemaining: {\r\n\t\tfontWeight: 700,\r\n\t\tmarginBottom: 4\r\n\t},\r\n\tpanelBottom: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column'\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '16px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap',\r\n\t\tmarginBottom: 16\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\tcursor: 'pointer'\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '14px',\r\n\t\tlineHeight: '20px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantySmall2 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t\t{link && {translations.linkConditions} }\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t{translations.title && {translations.title}}\r\n\t\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantySmall-3' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tmaxWidth: 400\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tmarginBottom: 26\r\n\t},\r\n\tvaluesPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 33,\r\n\t\tmarginBottom: 25\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em'\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0',\r\n\t\tfontWeight: 700\r\n\t},\r\n\tvalueRemaining: {\r\n\t\tfontWeight: 700,\r\n\t\tmarginBottom: 4\r\n\t},\r\n\tpanelBottom: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column'\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '16px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap',\r\n\t\tmarginBottom: 16\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\tcursor: 'pointer'\r\n\t},\r\n\tcircularProgressLabel: {\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '20px'\r\n\t}\r\n}));\r\n\r\nexport const WarrantySmall3 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\t{(expiryDateText || link) &&\r\n\t\t\t\t\r\n\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t\t{link && {translations.linkConditions} }\r\n\t\t\t\t
}\r\n\t\t\r\n\t\t\t{translations.title && {translations.title}}\r\n\t\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { SkodaLink } from '../../buttons';\r\nimport { CircularProgress } from '../../circularProgress';\r\nimport { useDynamicPercentage, useExpiryDateText, useRemainingValueText } from '../hooks';\r\nimport { WarrantyBaseProps } from '../types';\r\n\r\nconst useStyles = makeStyles({ name: 'WarrantySmall-4' })(theme => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tmaxWidth: 400\r\n\t},\r\n\ttitle: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tmarginBottom: 27\r\n\t},\r\n\tvaluesPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 78,\r\n\t\tmarginBottom: 20\r\n\t},\r\n\tremainingPanel: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: 'column',\r\n\t\tfontSize: '18px',\r\n\t\tlineHeight: '28px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\tfontWeight: 700\r\n\t},\r\n\tlabelRemaining: {\r\n\t\tcolor: '#9E9FA0'\r\n\t},\r\n\tvalueRemaining: {\r\n\r\n\t},\r\n\tpanelBottom: {\r\n\t\tdisplay: 'flex',\r\n\t\tgap: 30,\r\n\t\tjustifyContent: 'space-between'\r\n\t},\r\n\texpiryDate: {\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '16px',\r\n\t\tletterSpacing: '0.02em',\r\n\t\twhiteSpace: 'nowrap'\r\n\t},\r\n\tlinkConditions: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '12px',\r\n\t\tlineHeight: '12px',\r\n\t\ttextAlign: 'end',\r\n\t\tcursor: 'pointer'\r\n\t}\r\n}));\r\n\r\nexport const WarrantySmall4 = (props: WarrantyBaseProps) => {\r\n\tconst { translations, value, max, className, link } = props;\r\n\tconst { classes, cx } = useStyles(null, { props });\r\n\r\n\tconst dynamicValue = useDynamicPercentage(value, max);\r\n\tconst remainingValueText = useRemainingValueText(props);\r\n\tconst expiryDateText = useExpiryDateText(props);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\t{(expiryDateText || link) &&\r\n\t\t\t\t\r\n\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t\t{link && {translations.linkConditions} }\r\n\t\t\t\t
}\r\n\t\t\r\n\t\t\t{translations.title && {translations.title}}\r\n\t\t\t
\r\n\t);\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from 'tss-react/mui';\r\nimport { useElementSize } from 'usehooks-ts';\r\nimport { interleave } from '../../utils/common';\r\nimport { Warranty } from '../warranty';\r\nimport { useGetWarrantyDistanceProps, useGetWarrantyDurationProps, useWarrantyLayout } from './warrantyPanel.hooks';\r\nimport { WarrantyPanelProps } from './warrantyPanel.types';\r\n\r\nconst useStyles = makeStyles<{ direction: 'row' | 'column', gap: number }>({ name: 'WarrantiesPanel' })((theme, { direction, gap }) => ({\r\n\troot: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: direction,\r\n\t\tgap,\r\n\t\talignItems: 'center'\r\n\t},\r\n\twarranty: {\r\n\t\tflexGrow: 1\r\n\t},\r\n\tpanelCombined: {\r\n\t\tdisplay: 'flex',\r\n\t\tflexDirection: direction,\r\n\t\tgap,\r\n\t\talignItems: 'center'\r\n\t},\r\n\tlabelOr: {\r\n\t\tfontWeight: 700,\r\n\t\tfontSize: '16px',\r\n\t\tlineHeight: '24px'\r\n\t},\r\n\tdivider: {\r\n\t\tborder: '0.5px solid ' + theme.palette.divider,\r\n\t\tborderRight: 'none',\r\n\t\tborderBottom: 'none',\r\n\t\talignSelf: 'stretch'\r\n\t},\r\n\tvisibilityHidden: {\r\n\t\tvisibility: 'hidden'\r\n\t},\r\n\tdisplayNone: {\r\n\t\tdisplay: 'none'\r\n\t}\r\n}));\r\n\r\nexport const WarrantyPanel = (props: WarrantyPanelProps) => {\r\n\tconst { warranties, car, translations } = props;\r\n\tconst { mileage } = car;\r\n\r\n\tconst [ref, { width }] = useElementSize();\r\n\tconst { size, direction, gap } = useWarrantyLayout(warranties, width);\r\n\tconst getWarrantyDurationProps = useGetWarrantyDurationProps(size, translations);\r\n\tconst getWarrantyDistanceProps = useGetWarrantyDistanceProps(size, translations, mileage);\r\n\r\n\tconst { classes } = useStyles({ direction, gap });\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\t{(expiryDateText || link) &&\r\n\t\t\t\t\r\n\t\t\t\t\t{translations.remainingLabel}\r\n\t\t\t\t\t{remainingValueText}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t{expiryDateText && {expiryDateText}}\r\n\t\t\t\t\t{link && {translations.linkConditions} }\r\n\t\t\t\t
}\r\n\t\t\r\n\t\t\t{interleave(warranties.map((warranty, index) => {\r\n\t\t\t\tif (warranty.product_distance && warranty.product_duration) {\r\n\t\t\t\t\tlet propsDistance = getWarrantyDistanceProps(warranty);\r\n\t\t\t\t\tlet propsDuration = getWarrantyDurationProps(warranty);\r\n\t\t\t\t\tconst classesDistance = { \r\n\t\t\t\t\t\ttitle: direction === 'row' ? classes.visibilityHidden : classes.displayNone,\r\n\t\t\t\t\t\tlinkConditions: direction === 'row' && classes.visibilityHidden\r\n\t\t\t\t\t};\r\n\t\t\t\t\tconst classesDuration = { \r\n\t\t\t\t\t\tlinkConditions: direction === 'column' && classes.displayNone\r\n\t\t\t\t\t};\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t
\r\n\t);\r\n};\r\n","import { Fab } from '@mui/material';\r\nimport React, { FunctionComponent } from 'react';\r\nimport './errorPage.scss';\r\n\r\nexport type ErrorPageProps = {\r\n onSubmit: () => void;\r\n title: string;\r\n description: string;\r\n submit: string;\r\n};\r\n\r\nexport const ErrorPage: FunctionComponent\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tOr\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t\tif (warranty.product_distance)\r\n\t\t\t\t\treturn invalid warranty
;\r\n\t\t\t}), )}\r\n\t\t\r\n \r\n {submit}\r\n \r\n
;\r\n","import { EmobilityFilter } from '../context';\r\nimport { notNullOrEmpty } from './common';\r\n\r\ntype BaseEngineInfoModel = {\r\n\tmbv?: string;\r\n\tsalesGroupCode?: string;\r\n\tactionCode?: string;\r\n};\r\n\r\nexport type FilterEnginesBy\r\n {title}\r\n
\r\n \r\n {description}\r\n
\r\n