` does not define any animation behavior!\n * Exactly _how_ a list item animates is up to the individual transition\n * component. This means you can mix and match animations across different list\n * items.\n */\n\nvar TransitionGroup = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(TransitionGroup, _React$Component);\n function TransitionGroup(props, context) {\n var _this;\n _this = _React$Component.call(this, props, context) || this;\n var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear\n\n _this.state = {\n contextValue: {\n isMounting: true\n },\n handleExited: handleExited,\n firstRender: true\n };\n return _this;\n }\n var _proto = TransitionGroup.prototype;\n _proto.componentDidMount = function componentDidMount() {\n this.mounted = true;\n this.setState({\n contextValue: {\n isMounting: false\n }\n });\n };\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.mounted = false;\n };\n TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {\n var prevChildMapping = _ref.children,\n handleExited = _ref.handleExited,\n firstRender = _ref.firstRender;\n return {\n children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),\n firstRender: false\n };\n } // node is `undefined` when user provided `nodeRef` prop\n ;\n _proto.handleExited = function handleExited(child, node) {\n var currentChildMapping = getChildMapping(this.props.children);\n if (child.key in currentChildMapping) return;\n if (child.props.onExited) {\n child.props.onExited(node);\n }\n if (this.mounted) {\n this.setState(function (state) {\n var children = _extends({}, state.children);\n delete children[child.key];\n return {\n children: children\n };\n });\n }\n };\n _proto.render = function render() {\n var _this$props = this.props,\n Component = _this$props.component,\n childFactory = _this$props.childFactory,\n props = _objectWithoutPropertiesLoose(_this$props, [\"component\", \"childFactory\"]);\n var contextValue = this.state.contextValue;\n var children = values(this.state.children).map(childFactory);\n delete props.appear;\n delete props.enter;\n delete props.exit;\n if (Component === null) {\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, children);\n }\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, /*#__PURE__*/React.createElement(Component, props, children));\n };\n return TransitionGroup;\n}(React.Component);\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","export default {\n disabled: false\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n * \n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n function Transition(props, context) {\n var _this;\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n var _proto = Transition.prototype;\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n if (prevProps !== this.props) {\n var status = this.state.status;\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n this.updateStatus(false, nextStatus);\n };\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n _proto.performExit = function performExit() {\n var _this3 = this;\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n var active = true;\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n this.nextCallback.cancel = function () {\n active = false;\n };\n return this.nextCallback;\n };\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n _proto.render = function render() {\n var status = this.state.status;\n if (status === UNMOUNTED) {\n return null;\n }\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n return (/*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n return Transition;\n}(React.Component);\nTransition.contextType = TransitionGroupContext;\n// Name the function so it is clearer in the documentation\n\nfunction noop() {}\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","export var forceReflow = function forceReflow(node) {\n return node.scrollTop;\n};","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport { useMemo, useRef } from 'react';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { devWarning, utilStyles, getMs } from '@paypalcorp/pp-react-utils';\nimport { TransitionGroup, Transition } from 'react-transition-group';\nvar _templateObject, _templateObject2;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysMotionDurationArrive = tokens.sysMotionDurationArrive,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceLg = tokens.sysSpaceLg;\n var _utilStyles = utilStyles(tokens),\n variables = _utilStyles.variables;\n var ppuiEaseInOut = variables.ppuiEaseInOut;\n var container = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n position: relative;\\n height: 100%;\\n white-space: nowrap;\\n padding: 0 \", \";\\n overflow: hidden;\\n \"])), sysSpaceMd);\n var panel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n display: inline-block;\\n width: 100%;\\n padding: \", \" \", \"\\n height: 100%;\\n white-space: normal;\\n \"])), sysSpaceLg, sysSpaceMd);\n return {\n container: container,\n panel: panel,\n defaultEasing: ppuiEaseInOut,\n defaultDurationMs: getMs(sysMotionDurationArrive)\n };\n}\nvar styles$1 = /*#__PURE__*/Object.freeze({\n __proto__: null,\n 'default': styles\n});\nvar _excluded = [\"as\", \"className\", \"children\"];\nvar Panel = function (_ref) {\n var _ref$as = _ref.as,\n Tag = _ref$as === void 0 ? 'section' : _ref$as,\n className = _ref.className,\n children = _ref.children,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var PanelStyles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n return jsx(Tag, _extends({\n css: PanelStyles.panel,\n className: className\n }, rest, {\n \"data-ppui\": \"true\"\n }), children);\n};\n\n/*\n NOTE, the default values of duration and easing are\n failsafes. The code below should never allow these\n values to be used --BCC\n */\n\n/* istanbul ignore next */\n\nfunction doAnimation(offset, elem) {\n var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;\n var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'linear';\n var player = elem.animate([{\n translate: offset\n }, {\n translate: 0\n }], {\n duration: duration,\n easing: easing\n });\n player.addEventListener('finish', function () {\n elem.style.translate = '0';\n });\n}\n/* istanbul ignore next */\n\nvar getSign = function (n) {\n return n / Math.abs(n);\n};\n/* istanbul ignore next */\n\nvar getDirection = function (oldId, newId) {\n return oldId < 0 ? 0 : getSign(newId - oldId);\n};\n/* istanbul ignore next */\n\nvar getComputedDirection = function (elem) {\n var cStyle = getComputedStyle(elem);\n return cStyle.direction === 'rtl' ? -1 : 1;\n};\nvar PanelSlider = function (_ref) {\n var child = _ref.children,\n panelId = _ref.panelId,\n durationProp = _ref.duration,\n easingProp = _ref.easing,\n onComplete = _ref.onComplete;\n var tokens = useTheme();\n var PanelStyles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var duration = durationProp !== null && durationProp !== void 0 ? durationProp : PanelStyles.defaultDurationMs;\n var easing = easingProp !== null && easingProp !== void 0 ? easingProp : PanelStyles.defaultEasing;\n var activeScreenId = useRef(-1);\n var direction = getDirection(activeScreenId.current, panelId);\n activeScreenId.current = panelId;\n /* istanbul ignore next */\n // @ts-ignore\n\n return jsx(\"div\", {\n css: PanelStyles.container,\n \"data-ppui-info\": \"panel-slider_1.2.8\"\n }, jsx(TransitionGroup, {\n \"data-ppui\": \"true\"\n }, jsx(Transition, {\n key: panelId,\n timeout: duration,\n onEnter: function onEnter(elem) {\n elem.style.translate = \"\".concat(direction * getComputedDirection(elem) * 100, \"%\");\n elem.style.left = '0';\n },\n onEntering: function onEntering(elem) {\n var offset = \"\".concat(direction * getComputedDirection(elem) * 100, \"%\");\n doAnimation(offset, elem, duration, easing);\n },\n onExit: function onExit(elem) {\n var _activeScreenId$curre;\n var dir = getDirection((_activeScreenId$curre = activeScreenId === null || activeScreenId === void 0 ? void 0 : activeScreenId.current) !== null && _activeScreenId$curre !== void 0 ? _activeScreenId$curre : -1, panelId) * getComputedDirection(elem);\n elem.style.left = \"\".concat(dir * 100, \"%\");\n elem.style.translate = \"\".concat(-dir * 100, \"%\");\n elem.style.position = 'absolute';\n },\n onExiting: function onExiting(elem) {\n var _activeScreenId$curre2;\n var dir = getDirection((_activeScreenId$curre2 = activeScreenId === null || activeScreenId === void 0 ? void 0 : activeScreenId.current) !== null && _activeScreenId$curre2 !== void 0 ? _activeScreenId$curre2 : -1, panelId) * getComputedDirection(elem);\n var offset = \"\".concat(-dir * 100, \"%\");\n doAnimation(offset, elem, duration, easing);\n },\n onEntered: function announceArrival(elem) {\n if (typeof onComplete === 'function') {\n onComplete(elem);\n }\n },\n \"data-ppui\": \"true\"\n }, child)));\n};\nexport { Panel, PanelSlider, styles$1 as panelStyles };","import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { css, useTheme, jsx, ClassNames } from '@emotion/react';\nimport { devWarning, uniqueId } from '@paypalcorp/pp-react-utils';\nimport { math } from 'polished';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { useMemo, forwardRef, useState, useContext, useCallback } from 'react';\nimport { IntlContext } from '@paypalcorp/pp-react-intl';\nimport { Flag } from '@paypalcorp/pp-react-flag';\nimport { MaskedTextInput } from '@paypalcorp/pp-react-masked-text-input';\nimport { DropdownMenu } from '@paypalcorp/pp-react-dropdown-menu';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysBorderRadiusSm = tokens.sysBorderRadiusSm,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysSizeTapTargetDefault = tokens.sysSizeTapTargetDefault,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceSm = tokens.sysSpaceSm,\n sysSpaceXs = tokens.sysSpaceXs,\n sysSizeMediaXs = tokens.sysSizeMediaXs;\n var phoneInputMenuMaxWidth = '8.813rem';\n var base = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: phone_input_base;\\n flex-grow: 1;\\n \"])));\n var telephoneInputRtlStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n input[type='tel'] {\\n label: tel_input_rtl;\\n direction: ltr;\\n text-align: right;\\n }\\n \"])));\n var combined = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: combined;\\n display: flex;\\n gap: \", \";\\n [dir='rtl'] & {\\n direction: ltr;\\n }\\n @media screen and (max-width: \", \") {\\n display: block;\\n }\\n \"])), sysSpaceSm, sysSizeMediaXs);\n var menuWidth = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: width;\\n min-width: \", \";\\n @media screen and (max-width: \", \") {\\n margin-bottom: \", \";\\n }\\n @media screen and (min-width: \", \") {\\n max-width: \", \";\\n }\\n \"])), phoneInputMenuMaxWidth, sysSizeMediaXs, sysSpaceSm, math(\"\".concat(sysSizeMediaXs, \" + \").concat('0.0625rem')), phoneInputMenuMaxWidth);\n var menu = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: menu;\\n flex-grow: 1;\\n [dir='rtl'] & {\\n direction: rtl;\\n }\\n \"])));\n var thumbnail = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: thumbnail;\\n margin-right: \", \";\\n [dir='rtl'] & {\\n margin-right: 0;\\n margin-left: \", \";\\n }\\n \"])), sysSpaceSm, sysSpaceSm);\n var menuList = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: menu_list;\\n white-space: nowrap;\\n \"])));\n var menuButton = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: menu_button;\\n flex-grow: 1;\\n &:not(:empty) {\\n padding-bottom: \", \";\\n padding-right: \", \";\\n }\\n & > span {\\n pointer-events: none;\\n }\\n [dir='rtl'] & {\\n border-radius: \", \";\\n margin-left: 0;\\n margin-right: 0;\\n &:not(:empty) {\\n padding-left: \", \";\\n padding-right: \", \";\\n }\\n }\\n \"])), sysSpaceSm, math(\"\".concat(sysSizeTapTargetDefault, \" + \").concat(sysSpaceXs)), sysBorderRadiusSm, math(\"\".concat(sysSizeTapTargetDefault, \" + \").concat(sysSpaceXs)), math(\"\".concat(sysSpaceMd, \" - \").concat(sysBorderThicknessNormal)));\n var menuButtonContent = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: menu_button_content;\\n display: flex;\\n \"])));\n var affordance = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: affordance;\\n margin-left: 0;\\n [dir='rtl'] & {\\n margin-right: 0;\\n }\\n \"])));\n var menuContainer = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: container;\\n [dir='rtl'] & {\\n left: 0;\\n }\\n \"])));\n return {\n base: base,\n combined: combined,\n menu: menu,\n thumbnail: thumbnail,\n menuList: menuList,\n menuButton: menuButton,\n menuButtonContent: menuButtonContent,\n affordance: affordance,\n telephoneInputRtlStyles: telephoneInputRtlStyles,\n menuWidth: menuWidth,\n menuContainer: menuContainer\n };\n}\n\n// 55 fixed line Countries with variable length\n// 38 mobile line Countries with variable length\n// 21 of those instersect\nvar VAR_LENGTH_COUNTRIES_FIXED_LINE = ['AT', 'AX', 'BD', 'BG', 'CD', 'CN', 'CU', 'CW', 'DE', 'DZ', 'EG', 'FI', 'GB', 'HR', 'ID', 'IE', 'IL', 'IQ', 'IR', 'IT', 'KE', 'KH', 'KI', 'KP', 'KR', 'LB', 'LR', 'LU', 'MM', 'MN', 'MU', 'MW', 'MY', 'NA', 'NG', 'PG', 'PH', 'PK', 'PL', 'PY', 'RO', 'RS', 'RW', 'SE', 'SH', 'SK', 'SO', 'SR', 'SY', 'TK', 'TW', 'VA', 'WS', 'YE', 'ZW'];\nvar VAR_LENGTH_COUNTRIES_MOBILE = ['AD', 'AR', 'AT', 'AX', 'BA', 'BG', 'BR', 'CD', 'CW', 'DE', 'EE', 'FI', 'GA', 'HR', 'ID', 'IS', 'IT', 'KH', 'KR', 'LB', 'LI', 'LR', 'MC', 'MM', 'MX', 'MY', 'NZ', 'PA', 'PN', 'RS', 'SB', 'SO', 'TK', 'TV', 'VA', 'WS', 'XK', 'ZA'];\nvar DEFAULT_PATTERN = '00000000000000000000';\n// Get phone format from IntlProvider\nfunction getPhoneFormat(intlContext, phoneRegion, formatType, isMobile) {\n var providedCountryCode = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;\n var providedPhoneFormat = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';\n var isPhoneMetaDataLoaded = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;\n if (providedCountryCode && providedPhoneFormat) {\n return {\n countryCode: providedCountryCode,\n pattern: providedPhoneFormat\n };\n } else if (phoneRegion && intlContext && intlContext.phoneFormatter) {\n var phoneType = isMobile ? 'MOBILE' : 'FIXED_LINE';\n var phoneExampleGenerator = intlContext.exampleGenerator({\n feature: 'phone',\n region: phoneRegion,\n type: phoneType\n });\n var exampleNumberObj = phoneExampleGenerator.generate();\n var countryCode = exampleNumberObj.countryCode,\n nationalNumber = exampleNumberObj.nationalNumber;\n var pattern = DEFAULT_PATTERN;\n if (isPhoneMetaDataLoaded) {\n var phoneNumberFormat = intlContext.phoneFormatter({\n phoneRegion: phoneRegion,\n style: formatType\n });\n var formattedNumber = phoneNumberFormat.format({\n countryCode: countryCode,\n nationalNumber: nationalNumber\n });\n var phoneNumber = formattedNumber;\n if (formattedNumber.includes('+')) {\n phoneNumber = formattedNumber.split(\"+\".concat(countryCode))[1].trim();\n }\n pattern = phoneNumber.replace(/\\d/g, '0');\n var varLengthCountries = isMobile ? VAR_LENGTH_COUNTRIES_MOBILE : VAR_LENGTH_COUNTRIES_FIXED_LINE;\n if (varLengthCountries.includes(phoneRegion)) {\n var patternLength = pattern.match(/0/g).length;\n var optionalDigits = '0'.repeat(20 - patternLength);\n pattern = pattern + \"[\".concat(optionalDigits, \"]\");\n }\n }\n return {\n countryCode: countryCode,\n pattern: pattern\n };\n }\n return {\n countryCode: providedCountryCode || '',\n pattern: providedPhoneFormat || DEFAULT_PATTERN\n };\n}\nvar _excluded = [\"rtl\", \"countryOptions\", \"options\", \"flagId\", \"codeId\", \"value\"];\nvar PhoneCodeDropdown = function (_ref) {\n var rtl = _ref.rtl,\n countryOptions = _ref.countryOptions,\n options = _ref.options,\n flagId = _ref.flagId,\n codeId = _ref.codeId,\n value = _ref.value,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme(); // Fetch tokens from Emotion context\n\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n return jsx(DropdownMenu, _extends({\n renderButtonContent: function renderButtonContent() {\n var selectedOption; //istanbul ignore next\n\n if (value && !!options) {\n var selectedIndex = options.findIndex(function (opt) {\n return opt.value === value;\n });\n selectedOption = countryOptions[selectedIndex];\n }\n var countryPhoneCode = '';\n if (selectedOption && selectedOption.countryPhoneCode) {\n //istanbul ignore next\n if (rtl) {\n countryPhoneCode = \"\".concat(selectedOption.countryPhoneCode, \"+\");\n } else {\n countryPhoneCode = \"+\".concat(selectedOption.countryPhoneCode);\n }\n }\n if (selectedOption && selectedOption.phoneRegion) {\n return jsx(\"span\", {\n css: _styles.menuButtonContent,\n \"data-ppui\": \"true\"\n }, jsx(\"span\", {\n css: _styles.thumbnail,\n \"data-ppui\": \"true\"\n }, jsx(Flag, {\n id: flagId,\n countryCode: selectedOption.phoneRegion,\n size: 'md',\n \"aria-label\": selectedOption.countryName,\n role: \"img\",\n \"data-ppui\": \"true\"\n })), jsx(\"span\", {\n id: codeId,\n \"data-ppui\": \"true\"\n }, countryPhoneCode));\n }\n return jsx(React.Fragment, null, countryPhoneCode);\n },\n options: options,\n value: value\n }, rest, {\n \"data-ppui\": \"true\"\n }));\n};\nvar _excluded$1 = [\"name\", \"countryOptions\", \"inputLabel\", \"menuLabel\", \"menuId\", \"className\", \"inputClassName\", \"menuClassName\", \"mobile\", \"onPhoneCodeChange\", \"phoneCode\", \"showUnselect\", \"unselectLabel\", \"formatType\"];\nvar PhoneInputWithMenu = forwardRef(function (_ref, ref) {\n var _ref$name = _ref.name,\n name = _ref$name === void 0 ? 'phoneInputMenu' : _ref$name,\n _ref$countryOptions = _ref.countryOptions,\n countryOptions = _ref$countryOptions === void 0 ? [] : _ref$countryOptions,\n _ref$inputLabel = _ref.inputLabel,\n inputLabel = _ref$inputLabel === void 0 ? 'Phone Number' : _ref$inputLabel,\n _ref$menuLabel = _ref.menuLabel,\n menuLabel = _ref$menuLabel === void 0 ? 'Code' : _ref$menuLabel,\n menuId = _ref.menuId,\n className = _ref.className,\n inputClassName = _ref.inputClassName,\n menuClassName = _ref.menuClassName,\n _ref$mobile = _ref.mobile,\n mobile = _ref$mobile === void 0 ? false : _ref$mobile,\n onPhoneCodeChange = _ref.onPhoneCodeChange,\n phoneCode = _ref.phoneCode,\n _ref$showUnselect = _ref.showUnselect,\n showUnselect = _ref$showUnselect === void 0 ? false : _ref$showUnselect,\n _ref$unselectLabel = _ref.unselectLabel,\n unselectLabel = _ref$unselectLabel === void 0 ? 'None' : _ref$unselectLabel,\n _ref$formatType = _ref.formatType,\n formatType = _ref$formatType === void 0 ? 'international' : _ref$formatType,\n rest = _objectWithoutProperties(_ref, _excluded$1);\n\n /* istanbul ignore next */\n if (!countryOptions.length) {\n devWarning('Required prop `countryOptions` is missing.');\n }\n var tokens = useTheme(); // Fetch tokens from Emotion context\n\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var _useState = useState(false),\n _useState2 = _slicedToArray(_useState, 2),\n isRtl = _useState2[0],\n setRtl = _useState2[1];\n var intlContext = useContext(IntlContext);\n var containerRef = useCallback(function (node) {\n if (node !== null && window && window.getComputedStyle(node)) {\n var computedStyle = window.getComputedStyle(node);\n setRtl(computedStyle && computedStyle.direction === 'rtl');\n }\n }, [intlContext === null || intlContext === void 0 ? void 0 : intlContext.locale]);\n var optionText;\n var optionCode;\n var optionPattern;\n var optionCountryRegion;\n var optionCountryName;\n var menuOptions;\n var _useState3 = useState(false),\n _useState4 = _slicedToArray(_useState3, 2),\n hasFocus = _useState4[0],\n setFocus = _useState4[1];\n var constructOptionProps = function (countryName, countryPhoneCode, countryRegion, rtl) {\n optionText = countryName; // for none option don't need to show +\n\n /* istanbul ignore next */\n\n if (countryPhoneCode) {\n optionText += rtl ? \" \".concat(countryPhoneCode, \"+\") : \" +\".concat(countryPhoneCode);\n }\n var optionValue = countryRegion && countryPhoneCode ? \"\".concat(countryRegion, \"_\").concat(countryPhoneCode) : '';\n return {\n primaryText: optionText,\n value: optionValue,\n decoration: countryRegion && jsx(Flag, {\n countryCode: countryRegion,\n size: \"md\",\n \"data-ppui\": \"true\"\n })\n };\n }; // Removing 'None' option if exists\n\n if (countryOptions[0] && countryOptions[0].phoneRegion === '') {\n countryOptions.splice(0, 1);\n }\n if (showUnselect) {\n // Adding 'None' option to list\n countryOptions.unshift({\n phoneRegion: '',\n countryName: unselectLabel,\n phoneFormat: DEFAULT_PATTERN\n });\n }\n menuOptions = useMemo(function () {\n return countryOptions.map(function (country, i) {\n var phoneParts = getPhoneFormat(intlContext, country.phoneRegion, formatType, mobile, country.countryPhoneCode, country.phoneFormat, country.isPhoneMetaDataLoaded);\n /* istanbul ignore next */\n\n var displayNamesObj = intlContext && intlContext.getDisplayNamesObject && intlContext.getDisplayNamesObject({\n type: 'region'\n });\n var countryCode = phoneParts.countryCode,\n pattern = phoneParts.pattern;\n optionCountryRegion = country.phoneRegion; //this one must be provided\n\n optionCode = country.countryPhoneCode || countryCode; //if provided use that\n\n optionPattern = country.phoneFormat || pattern; //if provided use that\n\n /* istanbul ignore next */\n\n optionCountryName = country.countryName || displayNamesObj && displayNamesObj.select(country.phoneRegion); //if provided use that\n\n countryOptions[i].countryPhoneCode = optionCode;\n countryOptions[i].phoneFormat = optionPattern;\n countryOptions[i].countryName = optionCountryName;\n return constructOptionProps(optionCountryName, optionCode, optionCountryRegion, isRtl);\n });\n }, [countryOptions, formatType, mobile]);\n var currentMask = DEFAULT_PATTERN;\n var selectedCountry = countryOptions.filter(function (country) {\n var selectedPhoneCode = country.phoneRegion && country.countryPhoneCode ? \"\".concat(country.phoneRegion, \"_\").concat(country.countryPhoneCode) : '';\n return phoneCode === selectedPhoneCode;\n });\n if (selectedCountry.length) {\n currentMask = selectedCountry[0].phoneFormat;\n }\n var handleChange = function (evt) {\n //istanbul ignore next\n if (onPhoneCodeChange) {\n var _evt$target, _evt$target$value;\n onPhoneCodeChange(evt); // determine if selected option is none/unselect\n // if it is don't move the focus to the next element\n\n if (!(((_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : (_evt$target$value = _evt$target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length) === 0 && showUnselect)) {\n setFocus(true);\n }\n }\n };\n var flagIdPrefix = 'phone-input-country-flag_';\n var codeIdPrefix = 'phone-input-country-code_';\n var generatedFlagId = menuId ? \"\".concat(flagIdPrefix).concat(menuId) : uniqueId(flagIdPrefix);\n var generatedCodeId = menuId ? \"\".concat(codeIdPrefix).concat(menuId) : uniqueId(codeIdPrefix);\n var phoneDropdownMenuCSS = [_styles.menu, _styles.menuWidth];\n var dropdownEl = jsx(ClassNames, {\n \"data-ppui\": \"true\"\n }, function (_ref2) {\n var css = _ref2.css;\n return jsx(PhoneCodeDropdown, {\n id: menuId,\n label: menuLabel,\n options: menuOptions,\n countryOptions: countryOptions,\n value: phoneCode,\n onChange: handleChange,\n css: phoneDropdownMenuCSS,\n className: menuClassName,\n menuContainerClassName: css(_styles.menuContainer),\n menuListClassName: css(_styles.menuList),\n menuButtonClassName: css(_styles.menuButton),\n sheetClassName: css(_styles.menuList),\n rtl: isRtl,\n showUnselect: true,\n flagId: generatedFlagId,\n codeId: generatedCodeId,\n \"data-ppui\": \"true\"\n });\n });\n var inputEl = jsx(ClassNames, {\n \"data-ppui\": \"true\"\n }, function (_ref3) {\n var cx = _ref3.cx;\n return jsx(MaskedTextInput, _extends({\n type: \"tel\",\n name: name,\n label: inputLabel,\n maskOptions: {\n mask: currentMask\n },\n css: _styles.menu,\n inputClassName: cx(inputClassName),\n setFocus: hasFocus,\n ref: ref,\n onBlur: function onBlur() {\n return setFocus(false);\n },\n \"aria-describedby\": \"\".concat(generatedFlagId, \" \").concat(generatedCodeId)\n }, rest, {\n \"data-ppui\": \"true\"\n }));\n });\n var combinedInputCSS = [_styles.combined,\n //istanbul ignore next\n isRtl && _styles.telephoneInputRtlStyles];\n return jsx(\"div\", {\n ref: containerRef,\n css: _styles.base,\n className: className,\n \"data-ppui-info\": \"phone-input_2.7.6\"\n }, jsx(\"div\", {\n css: combinedInputCSS,\n \"data-ppui\": \"true\"\n }, dropdownEl, inputEl));\n});\nvar _excluded$2 = [\"name\", \"label\", \"countryOptions\", \"className\", \"inputClassName\", \"formatType\", \"mobile\"];\nvar PhoneInput = forwardRef(function (_ref, ref) {\n var _ref$name = _ref.name,\n name = _ref$name === void 0 ? '' : _ref$name,\n _ref$label = _ref.label,\n label = _ref$label === void 0 ? 'Phone Number' : _ref$label,\n countryOptions = _ref.countryOptions,\n className = _ref.className,\n inputClassName = _ref.inputClassName,\n _ref$formatType = _ref.formatType,\n formatType = _ref$formatType === void 0 ? (countryOptions === null || countryOptions === void 0 ? void 0 : countryOptions.countryPhoneCode) ? 'international' : 'national' : _ref$formatType,\n _ref$mobile = _ref.mobile,\n mobile = _ref$mobile === void 0 ? false : _ref$mobile,\n rest = _objectWithoutProperties(_ref, _excluded$2);\n\n /* istanbul ignore next */\n if (!countryOptions) {\n devWarning('Required prop `countryOptions` is missing.');\n }\n var tokens = useTheme(); // Fetch tokens from Emotion context\n\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var _useState = useState(false),\n _useState2 = _slicedToArray(_useState, 2),\n isRtl = _useState2[0],\n setRtl = _useState2[1];\n var intlContext = useContext(IntlContext);\n var containerRef = useCallback(function (node) {\n if (node !== null && window && window.getComputedStyle(node)) {\n var computedStyle = window.getComputedStyle(node);\n setRtl(computedStyle && computedStyle.direction === 'rtl');\n }\n }, [intlContext === null || intlContext === void 0 ? void 0 : intlContext.locale]);\n var phoneParts = useMemo(function () {\n return getPhoneFormat(intlContext, countryOptions === null || countryOptions === void 0 ? void 0 : countryOptions.phoneRegion, formatType, mobile, countryOptions === null || countryOptions === void 0 ? void 0 : countryOptions.countryPhoneCode, countryOptions === null || countryOptions === void 0 ? void 0 : countryOptions.phoneFormat, countryOptions === null || countryOptions === void 0 ? void 0 : countryOptions.isPhoneMetaDataLoaded);\n }, [countryOptions === null || countryOptions === void 0 ? void 0 : countryOptions.phoneRegion, formatType, mobile]);\n var countryCode = phoneParts.countryCode,\n pattern = phoneParts.pattern;\n var codePrefix = formatType === 'international' ? countryCode : '';\n var codeSuffix = codePrefix;\n if (formatType === 'international') {\n //istanbul ignore next\n codePrefix = isRtl ? '' : \"+\".concat(codePrefix); //istanbul ignore next\n\n codeSuffix = isRtl ? \"\".concat(codeSuffix, \"+\") : '';\n }\n return jsx(\"div\", {\n ref: containerRef,\n css: [_styles.base, isRtl && _styles.telephoneInputRtlStyles],\n className: className,\n \"data-ppui-info\": \"phone-input_2.7.6\"\n }, jsx(ClassNames, {\n \"data-ppui\": \"true\"\n }, function (_ref2) {\n var cx = _ref2.cx;\n return jsx(MaskedTextInput, _extends({\n type: \"tel\",\n name: \"phoneInput-\".concat(name),\n label: label,\n prefix: codePrefix,\n suffix: codeSuffix,\n ref: ref,\n maskOptions: {\n mask: pattern\n },\n inputClassName: cx(inputClassName)\n }, rest, {\n \"data-ppui\": \"true\"\n }));\n }));\n});\nexport { PhoneInput, PhoneInputWithMenu, styles as phoneInputStyles };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { forwardRef, useRef, useEffect } from 'react';\nimport { TextInput } from '@paypalcorp/pp-react-text-input';\nimport { IconButton } from '@paypalcorp/pp-react-icon-button';\nimport { ViewIcon, HideIcon } from '@paypalcorp/pp-react-icons';\nvar _excluded = [\"as\", \"isHidden\", \"hideToggleLabel\", \"onToggleHide\", \"value\"];\nvar PasswordInput = forwardRef(function (props, ref) {\n var as = props.as,\n _props$isHidden = props.isHidden,\n isHidden = _props$isHidden === void 0 ? true : _props$isHidden,\n hideToggleLabel = props.hideToggleLabel,\n onToggleHide = props.onToggleHide,\n value = props.value,\n rest = _objectWithoutProperties(props, _excluded);\n var internalRef = useRef();\n var inputRef = ref || internalRef;\n useEffect(function () {\n var inputElm = inputRef.current;\n if (inputElm && (value === null || value === void 0 ? void 0 : value.length)) {\n inputElm.setSelectionRange(value.length, value.length); //restore cursor to the last char\n }\n }, [isHidden]);\n var typeProp = isHidden ? {\n type: 'password'\n } : {};\n var iconButtonLabel = hideToggleLabel || (isHidden ? 'show' : 'hide');\n return /*#__PURE__*/React.createElement(as || TextInput, _extends({\n ref: inputRef,\n rightIcon: /*#__PURE__*/React.createElement(IconButton, {\n buttonType: \"tertiary\",\n svgIconComponent: isHidden ? ViewIcon : HideIcon,\n onClick: function handleHideToggleClick() {\n /* istanbul ignore next */\n if (onToggleHide) {\n onToggleHide(!isHidden);\n }\n },\n onMouseDown: function onMouseDown(evt) {\n return evt.preventDefault();\n },\n \"data-ppui\": \"true\"\n }, iconButtonLabel),\n value: value,\n \"data-ppui-info\": \"password-input_2.1.23\"\n }, typeProp, rest));\n});\nexport { PasswordInput };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport 'react';\nimport { IconButton } from '@paypalcorp/pp-react-icon-button';\nimport { CloseIcon } from '@paypalcorp/pp-react-icons';\nimport { devWarning } from '@paypalcorp/pp-react-utils';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { textStyles } from '@paypalcorp/pp-react-text';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;\nfunction pillStyles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n // eslint-disable-next-line no-console\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysColorSelectedRangeMain = tokens.sysColorSelectedRangeMain,\n sysColorSelectedRangeContrast = tokens.sysColorSelectedRangeContrast,\n sysSpaceTiny = tokens.sysSpaceTiny,\n sysSpaceXs = tokens.sysSpaceXs,\n sysSpaceSm = tokens.sysSpaceSm,\n sysSpaceLg = tokens.sysSpaceLg;\n var pill = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: pill;\\n background-color: \", \";\\n padding-block: 0 0;\\n padding-inline: \", \" 0;\\n white-space: nowrap;\\n border-radius: 100px;\\n position: relative;\\n display: inline-grid;\\n grid-gap: \", \";\\n grid-template-columns: 1fr auto;\\n place-items: center;\\n \"])), sysColorSelectedRangeMain, sysSpaceLg, sysSpaceXs);\n var _textStyles = textStyles(tokens),\n captionStrong = _textStyles.captionStrong;\n var pillLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: pill_label;\\n \", \"\\n text-overflow: ellipsis;\\n white-space: nowrap;\\n \"])), captionStrong({\n color: sysColorSelectedRangeContrast\n }));\n var buttonSpace = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: btn_space;\\n margin: \", \";\\n \"])), sysSpaceTiny);\n var pillTray = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: pill_tray;\\n background-color: \", \";\\n \"])), sysColorBackgroundSurface);\n var pillTrayScroller = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: pill_scroll;\\n overflow-x: scroll;\\n margin: 0;\\n padding: \", \" \", \" \", \";\\n display: flex;\\n column-gap: \", \";\\n \"])), sysSpaceSm, sysSpaceSm, sysSpaceLg, sysSpaceSm);\n return {\n pill: pill,\n pillLabel: pillLabel,\n buttonSpace: buttonSpace,\n pillTray: pillTray,\n pillTrayScroller: pillTrayScroller\n };\n}\nvar _excluded = [\"as\", \"value\", \"className\", \"dismissButtonLabel\", \"onDismiss\", \"children\"];\nvar Pill = function (_ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n _ref$value = _ref.value,\n value = _ref$value === void 0 ? 'value' : _ref$value,\n className = _ref.className,\n _ref$dismissButtonLab = _ref.dismissButtonLabel,\n dismissButtonLabel = _ref$dismissButtonLab === void 0 ? 'dismiss' : _ref$dismissButtonLab,\n onDismiss = _ref.onDismiss,\n children = _ref.children,\n rest = _objectWithoutProperties(_ref, _excluded);\n\n /* istanbul ignore next */\n if (!onDismiss) {\n onDismiss = function () {\n return devWarning('Required prop `onDismiss` is missing');\n };\n }\n var tokens = useTheme();\n var styles = pillStyles(tokens);\n var handleClick = function (evt) {\n var target = evt.target;\n onDismiss(target.dataset.value);\n };\n return jsx(Component, _extends({\n css: styles.pill,\n role: \"listitem\",\n className: className\n }, rest, {\n \"data-ppui\": \"true\"\n }), jsx(\"label\", {\n css: styles.pillLabel,\n \"data-ppui\": \"true\"\n }, children), jsx(IconButton, {\n buttonType: \"tertiary\",\n size: \"sm\",\n css: styles.buttonSpace,\n \"data-value\": value,\n svgIconComponent: CloseIcon,\n onClick: handleClick,\n \"data-ppui\": \"true\"\n }, dismissButtonLabel));\n};\nvar PillTray = function (_ref) {\n var children = _ref.children;\n var tokens = useTheme();\n var _pillStyles = pillStyles(tokens),\n pillTray = _pillStyles.pillTray,\n pillTrayScroller = _pillStyles.pillTrayScroller;\n return jsx(\"div\", {\n css: pillTray,\n \"data-ppui-info\": \"pill_2.3.5\"\n }, jsx(\"div\", {\n css: pillTrayScroller,\n role: \"list\",\n \"data-ppui\": \"true\"\n }, children));\n};\nexport { Pill, PillTray, pillStyles };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport { useMemo, forwardRef } from 'react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport { textStyles, CaptionText, HeadingText } from '@paypalcorp/pp-react-text';\nimport { devWarning, uniqueId, utilStyles } from '@paypalcorp/pp-react-utils';\nvar Color;\n/** @deprecated */\n\n(function (Color) {\n Color[\"Accent1\"] = \"sysColorAccent1Main\";\n Color[\"Accent2\"] = \"sysColorAccent2Main\";\n Color[\"Accent3\"] = \"sysColorAccent3Main\";\n Color[\"Accent4\"] = \"sysColorAccent4Main\";\n})(Color || (Color = {}));\nvar colorMap = {\n blue: Color.Accent1,\n magenta: Color.Accent2,\n green: Color.Accent3,\n purple: Color.Accent4\n};\nvar Size;\n(function (Size) {\n Size[\"SMALL\"] = \"sm\";\n Size[\"LARGE\"] = \"lg\";\n})(Size || (Size = {}));\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysBorderRadiusInteractive = tokens.sysBorderRadiusInteractive,\n sysBorderRadiusSm = tokens.sysBorderRadiusSm,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysColorAccent1Contrast = tokens.sysColorAccent1Contrast,\n sysColorAccent1Main = tokens.sysColorAccent1Main,\n sysColorAccent2Contrast = tokens.sysColorAccent2Contrast,\n sysColorAccent2Main = tokens.sysColorAccent2Main,\n sysColorAccent3Contrast = tokens.sysColorAccent3Contrast,\n sysColorAccent3Main = tokens.sysColorAccent3Main,\n sysColorAccent4Contrast = tokens.sysColorAccent4Contrast,\n sysColorAccent4Main = tokens.sysColorAccent4Main,\n sysColorBackgroundAlt = tokens.sysColorBackgroundAlt,\n sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorBackgroundHighContrast = tokens.sysColorBackgroundHighContrast,\n sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysColorSystemContrast = tokens.sysColorSystemContrast,\n sysSizeCircleMd = tokens.sysSizeCircleMd,\n sysSizeCircleXl = tokens.sysSizeCircleXl,\n sysSizeIndicatorLg = tokens.sysSizeIndicatorLg,\n sysSizeIndicatorMd = tokens.sysSizeIndicatorMd,\n sysSizeIndicatorSm = tokens.sysSizeIndicatorSm,\n sysSizeIndicatorXs = tokens.sysSizeIndicatorXs,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceSm = tokens.sysSpaceSm,\n sysSizeIconSm = tokens.sysSizeIconSm,\n sysSizeIconLg = tokens.sysSizeIconLg,\n sysSpaceXl = tokens.sysSpaceXl,\n sysSpaceXs = tokens.sysSpaceXs,\n sysMotionDurationArrive = tokens.sysMotionDurationArrive;\n var _textStyles = textStyles(tokens),\n textBody = _textStyles.body,\n textCaption = _textStyles.caption,\n textCaptionStrong = _textStyles.captionStrong; // Circle progress meter variables\n\n var circleRadiusSvg = 50;\n var circleProgressMeterSize = parseInt(sysSizeCircleXl, 10);\n var circleProgressMeterBorderSize = parseFloat(sysSizeIndicatorSm);\n var circleProgressMeterSmSize = parseInt(sysSizeCircleMd, 10);\n var circleProgressMeterSmBorderSize = sysSizeIndicatorXs;\n var progressIndicatorCircleStrokeWidth = circleProgressMeterBorderSize / circleProgressMeterSize * 100;\n var progressIndicatorCircleSmStrokeWidth = parseFloat(circleProgressMeterSmBorderSize) / circleProgressMeterSmSize * 100;\n var colorMapContrast = new Map();\n colorMapContrast.set(Color.Accent1, sysColorAccent1Contrast);\n colorMapContrast.set(Color.Accent2, sysColorAccent2Contrast);\n colorMapContrast.set(Color.Accent3, sysColorAccent3Contrast);\n colorMapContrast.set(Color.Accent4, sysColorAccent4Contrast);\n var colorMapAccent = new Map();\n colorMapAccent.set(Color.Accent1, sysColorAccent1Main);\n colorMapAccent.set(Color.Accent2, sysColorAccent2Main);\n colorMapAccent.set(Color.Accent3, sysColorAccent3Main);\n colorMapAccent.set(Color.Accent4, sysColorAccent4Main);\n /**\n * Get the styles for the height of the linear progress meter\n * @param height string [This should include value with units, example: `10px`, `2rem`]\n * @returns SerializedStyles\n */\n\n var getProgressMeterHeightStyles = function (height) {\n return css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n height: \", \";\\n\\n &::-moz-progress-bar {\\n height: \", \";\\n }\\n\\n &::-webkit-progress-value {\\n height: \", \";\\n }\\n\\n &::-webkit-progress-bar {\\n height: \", \";\\n }\\n \"])), height, height, height, height);\n };\n /**\n * Get the styles for color and background\n * @param color Color\n * @returns SerializedStyles\n */\n\n var getColorStyles = function (color) {\n var label = \"color_\".concat(color);\n return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: \", \";\\n color: \", \";\\n background-color: \", \";\\n \"])), label, colorMapContrast.get(color), colorMapAccent.get(color));\n };\n /**\n * Check whether the size is small or not\n * @param size Size\n * @returns boolean\n */\n\n var isSizeSmall = function () {\n var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;\n return size && size === Size.SMALL;\n };\n /**\n * Get the styles for the color of the linear progress meter\n * @param color Color\n * @param backgroundColor string\n * @returns SerializedStyles\n */\n\n var getProgressMeterColorStyles = function (color) {\n var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : sysColorBackgroundAlt;\n var meterColor = colorMapAccent.get(color);\n var label = \"container_color_\".concat(color);\n return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: \", \";\\n progress {\\n color: \", \";\\n\\n &::-moz-progress-bar {\\n background-color: \", \";\\n }\\n\\n &::-webkit-progress-value {\\n background-color: \", \";\\n }\\n\\n &::-webkit-progress-bar {\\n background-color: \", \";\\n }\\n }\\n \"])), label, colorMapContrast.get(color), meterColor, meterColor, backgroundColor);\n };\n /**\n * Get the styles for the stroke color\n * @param color Color\n * @returns SerializedStyles\n */\n\n var getStrokeColorStyles = function (color) {\n var label = \"stroke_\".concat(color);\n return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: \", \";\\n stroke: \", \";\\n \"])), label, colorMapAccent.get(color));\n };\n /**\n * Get the radius based on circle size\n * @param size Size [defaults to null]\n * @returns number\n */\n\n /**\n * Get the dash offset styles for the Circle Meter\n * @param maxDashOffset number\n * @param dashOffset number\n * @returns SerializedStyles\n */\n var getDashOffsetStyles = function (maxDashOffset, dashOffset) {\n return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n stroke-dasharray: \", \";\\n stroke-dashoffset: \", \";\\n \"])), maxDashOffset.toFixed(5), dashOffset.toFixed(5));\n };\n /**\n * Get the width and height of the bounding-box / wrapper of the Icon container\n * @param size Size;\n * @returns SerializedStyles\n */\n\n var getIconWrapStyles = function () {\n var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;\n var sizeValue = isSizeSmall(size) ? sysSizeIconSm : sysSizeIconLg;\n return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: icon_wrap;\\n width: \", \";\\n height: \", \";\\n \"])), sizeValue, sizeValue);\n };\n var base = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: progress-meter_base;\\n\\n & {\\n padding: \", \" \", \" \", \" \", \";\\n transition: value \", \";\\n }\\n\\n progress {\\n vertical-align: bottom;\\n width: 100%;\\n background-clip: content-box;\\n -webkit-background-clip: content-box;\\n border: \", \" solid transparent;\\n border-radius: \", \";\\n \", \"\\n margin-bottom: \", \";\\n\\n &::-moz-progress-bar {\\n margin-top: -\", \";\\n border-radius: \", \";\\n padding: 0;\\n }\\n\\n &::-webkit-progress-value {\\n margin-top: -\", \";\\n border-radius: \", \";\\n }\\n\\n &::-webkit-progress-bar {\\n border-radius: \", \";\\n }\\n }\\n\\n \", \";\\n \"])), sysSpaceXs, sysSpaceXl, sysSpaceXl, sysSpaceXl, sysMotionDurationArrive, sysBorderThicknessNormal, sysBorderRadiusSm, getProgressMeterHeightStyles(sysSizeIndicatorLg), sysSpaceSm, sysBorderThicknessNormal, sysBorderRadiusSm, sysBorderThicknessNormal, sysBorderRadiusSm, sysBorderRadiusSm, getProgressMeterColorStyles(Color.Accent3));\n var inverseLabel = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: inverse_label;\\n color: \", \";\\n \"])), sysColorBackgroundSurface);\n var inverseLabelSteps = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: inverse_steps;\\n color: \", \";\\n \"])), sysColorSystemContrast);\n var inverseLabelTitle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: inverse_title;\\n color: \", \";\\n \"])), sysColorBackgroundSurface);\n var label = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: label;\\n \", \";\\n \"])), textBody({}));\n var steps = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\n label: steps;\\n \", \"\\n letter-spacing: normal;\\n margin-right: \", \";\\n\\n [dir='rtl'] & {\\n margin-left: \", \";\\n }\\n \"])), textCaptionStrong({}), sysSpaceMd, sysSpaceXs);\n var title = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([\"\\n label: title;\\n \", \"\\n letter-spacing: normal;\\n \"])), textCaption({}));\n var labelSteps = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([\"\\n label: label_steps;\\n \", \"\\n margin-right: \", \";\\n \"])), textBody({}), sysSpaceXs);\n var labelTitle = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([\"\\n label: label_title;\\n \", \"\\n \"])), textBody({\n color: sysColorBackgroundMediumContrast\n }));\n var sizeSm = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([\"\\n label: size_sm;\\n progress {\\n \", \"\\n }\\n \"])), getProgressMeterHeightStyles(sysSizeIndicatorMd));\n var sizeSmLabel = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral([\"\\n label: size_sm_label;\\n \", \"\\n \"])), textCaption({}));\n var sizeSmLabelSteps = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral([\"\\n label: size_sm_steps;\\n \", \"\\n \"])), textCaption({}));\n var sizeSmLabelTitle = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral([\"\\n label: size_sm_title;\\n \", \"\\n \"])), textCaption({\n color: sysColorBackgroundMediumContrast\n }));\n var sizeSmInverseLabelSteps = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral([\"\\n label: size_sm_inverse_label_steps;\\n color: \", \";\\n \"])), sysColorSystemContrast);\n var sizeSmInverseLabelTitle = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral([\"\\n label: size_sm_inverse_label_title;\\n color: \", \";\\n \"])), sysColorBackgroundSurface); // Circle progress meter Styles\n\n var circleBase = css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral([\"\\n label: circle-progress-meter_base;\\n position: relative;\\n border-radius: \", \";\\n border: \", \"rem solid \", \";\\n width: \", \"rem;\\n height: \", \"rem;\\n background-color: \", \";\\n padding: \", \";\\n flex-shrink: 0;\\n \"])), sysBorderRadiusInteractive, circleProgressMeterBorderSize, sysColorBackgroundAlt, circleProgressMeterSize, circleProgressMeterSize, sysColorBackgroundSurface, sysSpaceXs);\n var circleInner = css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral([\"\\n label: circle_inner;\\n border-radius: \", \";\\n width: 100%;\\n height: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n \", \"\\n \"])), sysBorderRadiusInteractive, getColorStyles(Color.Accent2));\n var circleInnerImage = css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral([\"\\n label: circle_inner_image;\\n width: 100%;\\n height: 100%;\\n border-radius: inherit;\\n \"])));\n var circleProgressIndicator = css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral([\"\\n label: progress_indicator;\\n position: absolute;\\n top: -\", \"rem;\\n left: -\", \"rem;\\n width: \", \"rem;\\n height: \", \"rem;\\n fill: none;\\n stroke-width: \", \"%;\\n stroke-linecap: round;\\n transform: rotate(-90deg);\\n transform-origin: 50% 50%;\\n \", \"\\n \"])), circleProgressMeterBorderSize, circleProgressMeterBorderSize, circleProgressMeterSize, circleProgressMeterSize, progressIndicatorCircleStrokeWidth.toFixed(5), getStrokeColorStyles(Color.Accent2));\n var circleSm = css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral([\"\\n label: size_sm;\\n width: \", \"rem;\\n height: \", \"rem;\\n border-width: \", \";\\n \"])), circleProgressMeterSmSize, circleProgressMeterSmSize, circleProgressMeterSmBorderSize);\n var circleSmProgressIndicator = css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral([\"\\n label: size_sm_progress_indicator;\\n top: -\", \";\\n left: -\", \";\\n width: \", \"rem;\\n height: \", \"rem;\\n stroke-width: \", \"%;\\n \"])), circleProgressMeterSmBorderSize, circleProgressMeterSmBorderSize, circleProgressMeterSmSize, circleProgressMeterSmSize, progressIndicatorCircleSmStrokeWidth);\n var textProgressMeterBase = css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral([\"\\n label: text_progress_meter_base;\\n padding: 0;\\n \"])));\n var textProgressMeterInnerText = css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral([\"\\n label: text_progress_meter_inner_text;\\n background-color: \", \";\\n \"])), sysColorBackgroundSurface);\n var textContent = css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral([\"\\n label: text_content;\\n overflow: hidden;\\n color: \", \";\\n \"])), sysColorBackgroundHighContrast);\n return {\n linear: {\n base: base,\n label: label,\n steps: steps,\n title: title,\n getProgressMeterColorStyles: getProgressMeterColorStyles,\n inverseLabel: inverseLabel,\n inverseLabelSteps: inverseLabelSteps,\n inverseLabelTitle: inverseLabelTitle,\n labelSteps: labelSteps,\n labelTitle: labelTitle,\n sizeSm: sizeSm,\n sizeSmLabel: sizeSmLabel,\n sizeSmLabelSteps: sizeSmLabelSteps,\n sizeSmLabelTitle: sizeSmLabelTitle,\n sizeSmInverseLabelSteps: sizeSmInverseLabelSteps,\n sizeSmInverseLabelTitle: sizeSmInverseLabelTitle\n },\n circle: {\n base: circleBase,\n inner: circleInner,\n progressIndicator: circleProgressIndicator,\n sizeSm: circleSm,\n progressIndicatorSizeSm: circleSmProgressIndicator,\n innerImage: circleInnerImage,\n circleRadiusSvg: circleRadiusSvg,\n getStrokeColorStyles: getStrokeColorStyles,\n getCircleRadius: function getCircleRadius() {\n var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;\n return isSizeSmall(size) ? circleRadiusSvg - progressIndicatorCircleSmStrokeWidth / 2 : circleRadiusSvg - progressIndicatorCircleStrokeWidth / 2;\n },\n getDashOffsetStyles: getDashOffsetStyles,\n getIconWrapStyles: getIconWrapStyles\n },\n text: {\n base: textProgressMeterBase,\n inner: textProgressMeterInnerText,\n content: textContent\n },\n util: {\n getColorStyles: getColorStyles,\n isSizeSmall: isSizeSmall\n }\n };\n}\nvar _excluded = [\"className\", \"id\", \"max\", \"value\", \"inverse\", \"steps\", \"size\", \"title\", \"color\"];\nvar ProgressMeter = function (_ref) {\n var _styles$util, _styles$util$isSizeSm, _styles$linear, _styles$linear2, _styles$linear3, _styles$linear4, _styles$linear5, _styles$linear5$getPr, _styles$linear6, _styles$linear7, _styles$linear8, _styles$linear9, _styles$linear10, _styles$linear11, _styles$linear12, _styles$linear13, _styles$linear14, _styles$linear15, _styles$linear16;\n var className = _ref.className,\n _ref$id = _ref.id,\n id = _ref$id === void 0 ? uniqueId('progressMeter_') : _ref$id,\n _ref$max = _ref.max,\n max = _ref$max === void 0 ? 0 : _ref$max,\n _ref$value = _ref.value,\n value = _ref$value === void 0 ? 0 : _ref$value,\n _ref$inverse = _ref.inverse,\n inverse = _ref$inverse === void 0 ? false : _ref$inverse,\n steps = _ref.steps,\n size = _ref.size,\n title = _ref.title,\n color = _ref.color,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var isSizeSmall = (_styles$util = _styles.util) === null || _styles$util === void 0 ? void 0 : (_styles$util$isSizeSm = _styles$util.isSizeSmall) === null || _styles$util$isSizeSm === void 0 ? void 0 : _styles$util$isSizeSm.call(_styles$util, size);\n var labelStyles = [(_styles$linear = _styles.linear) === null || _styles$linear === void 0 ? void 0 : _styles$linear.label, inverse && ((_styles$linear2 = _styles.linear) === null || _styles$linear2 === void 0 ? void 0 : _styles$linear2.inverseLabel), isSizeSmall && ((_styles$linear3 = _styles.linear) === null || _styles$linear3 === void 0 ? void 0 : _styles$linear3.sizeSmLabel)];\n var computedColor = colorMap[color] || color;\n var progressMeterStyles = [(_styles$linear4 = _styles.linear) === null || _styles$linear4 === void 0 ? void 0 : _styles$linear4.base, color && ((_styles$linear5 = _styles.linear) === null || _styles$linear5 === void 0 ? void 0 : (_styles$linear5$getPr = _styles$linear5.getProgressMeterColorStyles) === null || _styles$linear5$getPr === void 0 ? void 0 : _styles$linear5$getPr.call(_styles$linear5, computedColor)), isSizeSmall && ((_styles$linear6 = _styles.linear) === null || _styles$linear6 === void 0 ? void 0 : _styles$linear6.sizeSm)];\n var stepsStyles = [(_styles$linear7 = _styles.linear) === null || _styles$linear7 === void 0 ? void 0 : _styles$linear7.steps, (_styles$linear8 = _styles.linear) === null || _styles$linear8 === void 0 ? void 0 : _styles$linear8.labelSteps, inverse && ((_styles$linear9 = _styles.linear) === null || _styles$linear9 === void 0 ? void 0 : _styles$linear9.inverseLabelSteps), isSizeSmall && ((_styles$linear10 = _styles.linear) === null || _styles$linear10 === void 0 ? void 0 : _styles$linear10.sizeSmLabelSteps), isSizeSmall && inverse && ((_styles$linear11 = _styles.linear) === null || _styles$linear11 === void 0 ? void 0 : _styles$linear11.sizeSmInverseLabelSteps)];\n var titleStyles = [(_styles$linear12 = _styles.linear) === null || _styles$linear12 === void 0 ? void 0 : _styles$linear12.title, (_styles$linear13 = _styles.linear) === null || _styles$linear13 === void 0 ? void 0 : _styles$linear13.labelTitle, inverse && ((_styles$linear14 = _styles.linear) === null || _styles$linear14 === void 0 ? void 0 : _styles$linear14.inverseLabelTitle), isSizeSmall && ((_styles$linear15 = _styles.linear) === null || _styles$linear15 === void 0 ? void 0 : _styles$linear15.sizeSmLabelTitle), isSizeSmall && inverse && ((_styles$linear16 = _styles.linear) === null || _styles$linear16 === void 0 ? void 0 : _styles$linear16.sizeSmInverseLabelTitle)];\n return jsx(\"div\", {\n css: progressMeterStyles,\n className: className,\n \"data-ppui-info\": \"progress-meter_3.6.1\"\n }, jsx(\"progress\", _extends({\n id: id,\n max: max,\n value: value\n }, rest, {\n \"data-ppui\": \"true\"\n })), jsx(\"label\", {\n css: labelStyles,\n htmlFor: id,\n \"data-ppui\": \"true\"\n }, steps && jsx(\"span\", {\n css: stepsStyles,\n \"data-ppui\": \"true\"\n }, steps), title && jsx(\"span\", {\n css: titleStyles,\n \"data-ppui\": \"true\"\n }, title)));\n};\nvar _excluded$1 = [\"className\", \"max\", \"value\", \"color\", \"label\", \"size\", \"children\", \"innerText\"],\n _excluded2 = [\"iconComponent\", \"size\"],\n _excluded3 = [\"imageSrc\"];\nvar CircleProgressMeter = forwardRef(function (props, ref) {\n var _styles$util, _styles$util$isSizeSm, _styles$circle, _styles$circle$getCir, _styles$circle2, _styles$text, _styles$circle3, _styles$circle4, _styles$circle5, _styles$circle6, _styles$circle7, _styles$circle7$getDa, _styles$circle8, _styles$util2, _styles$util2$getColo, _styles$text2, _styles$circle9, _styles$circle10;\n var className = props.className,\n _props$max = props.max,\n max = _props$max === void 0 ? 1 : _props$max,\n _props$value = props.value,\n value = _props$value === void 0 ? 0 : _props$value,\n color = props.color,\n label = props.label,\n size = props.size,\n children = props.children,\n innerText = props.innerText,\n rest = _objectWithoutProperties(props, _excluded$1);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var _utilStyles = utilStyles(tokens),\n screenReader = _utilStyles.screenReader;\n var isSizeSmall = (_styles$util = _styles.util) === null || _styles$util === void 0 ? void 0 : (_styles$util$isSizeSm = _styles$util.isSizeSmall) === null || _styles$util$isSizeSm === void 0 ? void 0 : _styles$util$isSizeSm.call(_styles$util, size);\n var radius = (_styles$circle = _styles.circle) === null || _styles$circle === void 0 ? void 0 : (_styles$circle$getCir = _styles$circle.getCircleRadius) === null || _styles$circle$getCir === void 0 ? void 0 : _styles$circle$getCir.call(_styles$circle, size);\n var maxDashOffset = 2 * Math.PI * radius;\n\n /* \n // Commenting out code related to draw out animation\n const [dashOffset, setDashOffset] = useState(maxDashOffset);\n useEffect(() => {\n const newDashOffset = maxDashOffset - (value / max) * maxDashOffset;\n setDashOffset(newDashOffset);\n }, [value]);\n */\n var computedColor = colorMap[color] || color;\n var baseStyles = [(_styles$circle2 = _styles.circle) === null || _styles$circle2 === void 0 ? void 0 : _styles$circle2.base, innerText && ((_styles$text = _styles.text) === null || _styles$text === void 0 ? void 0 : _styles$text.base), isSizeSmall && ((_styles$circle3 = _styles.circle) === null || _styles$circle3 === void 0 ? void 0 : _styles$circle3.sizeSm)];\n var iconStyles = [(_styles$circle4 = _styles.circle) === null || _styles$circle4 === void 0 ? void 0 : _styles$circle4.progressIndicator, color && ((_styles$circle5 = _styles.circle) === null || _styles$circle5 === void 0 ? void 0 : _styles$circle5.getStrokeColorStyles(computedColor)), isSizeSmall && ((_styles$circle6 = _styles.circle) === null || _styles$circle6 === void 0 ? void 0 : _styles$circle6.progressIndicatorSizeSm), (_styles$circle7 = _styles.circle) === null || _styles$circle7 === void 0 ? void 0 : (_styles$circle7$getDa = _styles$circle7.getDashOffsetStyles) === null || _styles$circle7$getDa === void 0 ? void 0 : _styles$circle7$getDa.call(_styles$circle7, maxDashOffset, maxDashOffset - value / max * maxDashOffset)];\n var circleInnerStyles = [(_styles$circle8 = _styles.circle) === null || _styles$circle8 === void 0 ? void 0 : _styles$circle8.inner, color && ((_styles$util2 = _styles.util) === null || _styles$util2 === void 0 ? void 0 : (_styles$util2$getColo = _styles$util2.getColorStyles) === null || _styles$util2$getColo === void 0 ? void 0 : _styles$util2$getColo.call(_styles$util2, computedColor)), innerText && ((_styles$text2 = _styles.text) === null || _styles$text2 === void 0 ? void 0 : _styles$text2.inner)];\n var renderContent = innerText ? function renderInnerText() {\n var _styles$text3;\n var textColor = [(_styles$text3 = _styles.text) === null || _styles$text3 === void 0 ? void 0 : _styles$text3.content];\n return size === 'sm' ? jsx(CaptionText, {\n css: textColor,\n \"data-ppui\": \"true\"\n }, innerText) : jsx(HeadingText, {\n size: \"sm\",\n css: textColor,\n \"data-ppui\": \"true\"\n }, innerText);\n }() : children;\n return jsx(\"div\", {\n css: baseStyles,\n className: className,\n \"data-ppui-info\": \"progress-meter_3.6.1\"\n }, jsx(\"svg\", {\n css: iconStyles,\n \"aria-hidden\": \"true\",\n viewBox: \"0 0 100 100\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"data-ppui\": \"true\"\n }, jsx(\"circle\", {\n cx: (_styles$circle9 = _styles.circle) === null || _styles$circle9 === void 0 ? void 0 : _styles$circle9.circleRadiusSvg,\n cy: (_styles$circle10 = _styles.circle) === null || _styles$circle10 === void 0 ? void 0 : _styles$circle10.circleRadiusSvg,\n r: radius,\n \"data-ppui\": \"true\"\n })), jsx(\"div\", {\n css: circleInnerStyles,\n \"aria-hidden\": \"true\",\n \"data-ppui\": \"true\"\n }, renderContent), jsx(\"label\", {\n css: screenReader,\n \"data-ppui\": \"true\"\n }, label, jsx(\"progress\", _extends({\n max: max,\n value: value\n }, rest, {\n ref: ref,\n \"data-ppui\": \"true\"\n }))));\n});\nvar IconProgressMeter = forwardRef(function (props, ref) {\n var _styles$util3, _styles$util3$isSizeS, _styles$circle11, _styles$circle11$getI;\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var iconComponent = props.iconComponent,\n size = props.size,\n rest = _objectWithoutProperties(props, _excluded2);\n var iconSize = ((_styles$util3 = _styles.util) === null || _styles$util3 === void 0 ? void 0 : (_styles$util3$isSizeS = _styles$util3.isSizeSmall) === null || _styles$util3$isSizeS === void 0 ? void 0 : _styles$util3$isSizeS.call(_styles$util3, size)) ? Size.SMALL : Size.LARGE;\n return jsx(CircleProgressMeter, _extends({\n size: size,\n ref: ref\n }, rest, {\n \"data-ppui\": \"true\"\n }), jsx(\"div\", {\n css: (_styles$circle11 = _styles.circle) === null || _styles$circle11 === void 0 ? void 0 : (_styles$circle11$getI = _styles$circle11.getIconWrapStyles) === null || _styles$circle11$getI === void 0 ? void 0 : _styles$circle11$getI.call(_styles$circle11, size),\n \"data-ppui\": \"true\"\n }, jsx(iconComponent, {\n size: iconSize,\n \"data-ppui\": \"true\"\n })));\n});\nvar ImageProgressMeter = forwardRef(function (props, ref) {\n var _styles$circle12;\n var imageSrc = props.imageSrc,\n rest = _objectWithoutProperties(props, _excluded3);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n return jsx(CircleProgressMeter, _extends({\n ref: ref\n }, rest, {\n \"data-ppui\": \"true\"\n }), jsx(\"img\", {\n src: imageSrc,\n css: (_styles$circle12 = _styles.circle) === null || _styles$circle12 === void 0 ? void 0 : _styles$circle12.innerImage,\n \"data-ppui\": \"true\"\n }));\n});\nexport { CircleProgressMeter, IconProgressMeter, ImageProgressMeter, ProgressMeter, styles as progressMeterStyles };","import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport { devWarning } from '@paypalcorp/pp-react-utils';\nimport { math } from 'polished';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { useMemo } from 'react';\nimport { BodyText, CaptionText } from '@paypalcorp/pp-react-text';\nimport { CloseIcon, CriticalIcon, ClockIcon, CheckmarkIcon } from '@paypalcorp/pp-react-icons';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysColorPrimaryContrast = tokens.sysColorPrimaryContrast,\n sysColorStructureDivider = tokens.sysColorStructureDivider,\n sysColorBackgroundHighContrast = tokens.sysColorBackgroundHighContrast,\n sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorBackgroundAlt = tokens.sysColorBackgroundAlt,\n sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysColorSuccessMain = tokens.sysColorSuccessMain,\n sysColorWarningMain = tokens.sysColorWarningMain,\n sysColorErrorMain = tokens.sysColorErrorMain,\n sysSpaceJumbo = tokens.sysSpaceJumbo,\n sysSpaceLg = tokens.sysSpaceLg,\n sysSpaceXs = tokens.sysSpaceXs,\n sysSizeIconMd = tokens.sysSizeIconMd,\n sysBorderThicknessFocus = tokens.sysBorderThicknessFocus,\n sysBorderRadiusInteractive = tokens.sysBorderRadiusInteractive,\n sysSizeMediaMd = tokens.sysSizeMediaMd;\n var bgColorMap = {\n success: sysColorSuccessMain,\n warning: sysColorWarningMain,\n critical: sysColorErrorMain,\n cancelled: sysColorErrorMain,\n default: sysColorBackgroundSurface\n };\n var markerFn = function (type) {\n return css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n // prettier-ignore\\n label: marker_\", \";\\n &:after {\\n background-color: \", \";\\n }\\n \"])), type, bgColorMap[type]);\n };\n var iconFn = function (type) {\n return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n // prettier-ignore\\n label: icon_\", \";\\n background-color: \", \";\\n \"])), type, bgColorMap[type]);\n };\n var verticalStyles = {\n base: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n display: block;\\n \"]))),\n item: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n flex-direction: row;\\n align-items: initial;\\n \"]))),\n itemContent: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n margin: \", \" 0;\\n text-align: initial;\\n \"])), sysSpaceLg),\n itemContentWithoutDescription: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n display: inline-flex;\\n align-items: center;\\n \"]))),\n marker: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n margin: 0 \", \" 0 \", \";\\n padding: \", \" 0;\\n &:after {\\n left: auto;\\n top: \", \"; // Margin + Icon Size\\n width: \", \"; // This is termed as a border for designers, hence used border token\\n height: 100%;\\n [dir='rtl'] & {\\n right: auto;\\n }\\n }\\n \"])), sysSpaceLg, sysSpaceJumbo, sysSpaceLg, math(\"\".concat(sysSizeIconMd, \" + \").concat(sysSpaceLg)), sysBorderThicknessFocus)\n };\n var base = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: step_tracker_base;\\n color: \", \";\\n list-style: none;\\n margin: 0;\\n padding: 0;\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\\n &[data-stepper-variant='vertical'] {\\n \", \"\\n }\\n @media screen and (max-width: \", \") {\\n \", \"\\n }\\n \"])), sysColorBackgroundHighContrast, verticalStyles.base, sysSizeMediaMd, verticalStyles.base);\n var item = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: timeline_item;\\n display: flex;\\n position: relative;\\n flex-direction: column;\\n align-items: center;\\n &:last-of-type {\\n > div:first-of-type {\\n &:after {\\n display: none;\\n }\\n }\\n }\\n @media screen and (max-width: \", \") {\\n \", \"\\n }\\n [data-stepper-variant='vertical'] & {\\n \", \"\\n }\\n \"])), sysSizeMediaMd, verticalStyles.item, verticalStyles.item);\n var itemContent = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: timeline_item_content;\\n text-align: center;\\n margin-top: \", \";\\n @media screen and (max-width: \", \") {\\n \", \"\\n }\\n [data-stepper-variant='vertical'] & {\\n \", \"\\n }\\n \"])), sysSpaceLg, sysSizeMediaMd, verticalStyles.itemContent, verticalStyles.itemContent);\n var itemContentWithoutDescription = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: content_without_description;\\n @media screen and (max-width: \", \") {\\n \", \"\\n }\\n [data-stepper-variant='vertical'] & {\\n \", \"\\n }\\n \"])), sysSizeMediaMd, verticalStyles.itemContentWithoutDescription, verticalStyles.itemContentWithoutDescription);\n var description = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\n label: description;\\n color: \", \";\\n margin-top: \", \";\\n \"])), sysColorBackgroundMediumContrast, sysSpaceXs);\n var marker = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([\"\\n label: marker;\\n color: \", \";\\n display: flex;\\n justify-content: center;\\n margin: 0;\\n padding: 0;\\n &:after {\\n position: absolute;\\n content: '';\\n top: \", \";\\n left: calc(50% + \", \");\\n width: calc(100% - \", \");\\n height: \", \"; // This is termed as a border for designers, hence used border token\\n background-color: \", \";\\n [dir='rtl'] & {\\n left: auto;\\n right: calc(50% + \", \");\\n }\\n }\\n @media screen and (max-width: \", \") {\\n \", \"\\n }\\n [data-stepper-variant='vertical'] & {\\n \", \"\\n }\\n \"])), sysColorBackgroundAlt, sysSpaceLg, sysSpaceLg, sysSpaceLg, sysBorderThicknessFocus, sysColorStructureDivider, sysSpaceLg, sysSizeMediaMd, verticalStyles.marker, verticalStyles.marker);\n var successMarker = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), markerFn('success'));\n var warningMarker = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), markerFn('warning'));\n var cancelledMarker = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), markerFn('cancelled'));\n var criticalMarker = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), markerFn('critical'));\n var icon = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral([\"\\n label: icon;\\n border-radius: \", \";\\n height: \", \";\\n width: \", \";\\n padding: \", \";\\n \"])), sysBorderRadiusInteractive, sysSizeIconMd, sysSizeIconMd, sysSpaceXs);\n var cancelledIcon = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), iconFn('cancelled'));\n var criticalIcon = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), iconFn('critical'));\n var warningIcon = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), iconFn('warning'));\n var successIcon = css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral([\"\\n \", \"\\n \"])), iconFn('success'));\n var defaultIcon = css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral([\"\\n \", \"\\n border: \", \" solid \", \";\\n padding: \", \" \", \";\\n \"])), iconFn('default'), sysBorderThicknessFocus, sysColorStructureDivider, sysSpaceXs, math(\"\".concat(sysSpaceLg, \" - \").concat(sysBorderThicknessFocus)));\n var numeric = css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral([\"\\n label: numeric;\\n text-align: center;\\n \"])));\n var numericDefault = css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral([\"\\n label: numeric_default;\\n background-color: \", \";\\n padding: 0;\\n \"])), sysColorBackgroundAlt);\n var numericSuccess = css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral([\"\\n label: numeric_success;\\n color: \", \";\\n \"])), sysColorPrimaryContrast);\n return {\n base: base,\n item: item,\n itemContent: itemContent,\n itemContentWithoutDescription: itemContentWithoutDescription,\n description: description,\n marker: marker,\n successMarker: successMarker,\n warningMarker: warningMarker,\n cancelledMarker: cancelledMarker,\n criticalMarker: criticalMarker,\n icon: icon,\n cancelledIcon: cancelledIcon,\n criticalIcon: criticalIcon,\n warningIcon: warningIcon,\n successIcon: successIcon,\n defaultIcon: defaultIcon,\n numeric: numeric,\n numericSuccess: numericSuccess,\n numericDefault: numericDefault\n };\n}\nvar _excluded = [\"className\", \"children\", \"showDescription\", \"desktopVariant\"];\nvar ProgressStepper = function (_ref) {\n var className = _ref.className,\n children = _ref.children,\n _ref$showDescription = _ref.showDescription,\n showDescription = _ref$showDescription === void 0 ? 'all' : _ref$showDescription,\n desktopVariant = _ref.desktopVariant,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var childrenMap;\n var isCurrentDetected = false;\n var statusQueue = [];\n React.Children.map(children, function (child) {\n var status = child.props.status;\n statusQueue.push(status || 'default');\n });\n childrenMap = React.Children.map(children, function (child, index) {\n var _child$props = child.props,\n isCurrent = _child$props.isCurrent,\n isDescriptionEnabled = _child$props.isDescriptionEnabled; // Decide when to display the description giving priority to override\n\n if (isDescriptionEnabled === undefined) {\n // Always display Current unless display option is \"none\" or is overridden\n if (isCurrent) {\n isDescriptionEnabled = true;\n isCurrentDetected = true;\n }\n if (showDescription === 'all' || showDescription === 'current' && isCurrent || showDescription === 'afterCurrent' && isCurrentDetected === true || showDescription === 'beforeCurrent' && isCurrentDetected === false) {\n isDescriptionEnabled = true;\n } else if (showDescription === 'none') {\n isDescriptionEnabled = false;\n }\n }\n var currentStep = index + 1;\n var nextStatus = statusQueue[currentStep] === 'default' && statusQueue[index] === 'success' ? 'success' : statusQueue[currentStep];\n return React.cloneElement(child, {\n isDescriptionEnabled: isDescriptionEnabled,\n status: statusQueue[index],\n nextStatus: nextStatus,\n index: currentStep,\n 'aria-setsize': statusQueue.length,\n 'aria-posinset': currentStep\n });\n });\n return jsx(\"ul\", _extends({\n css: _styles.base,\n className: className,\n \"data-stepper-variant\": desktopVariant,\n \"data-ppui-info\": \"progress-stepper_2.3.5\"\n }, rest), childrenMap);\n};\nvar _excluded$1 = [\"title\", \"status\", \"ariaLabel\", \"isCurrent\", \"isDescriptionEnabled\", \"children\", \"nextStatus\", \"className\", \"isNumeric\", \"index\"];\nvar Step = function (_ref) {\n var _ref$title = _ref.title,\n title = _ref$title === void 0 ? 'no title' : _ref$title,\n status = _ref.status,\n ariaLabel = _ref.ariaLabel,\n isCurrent = _ref.isCurrent,\n _ref$isDescriptionEna = _ref.isDescriptionEnabled,\n isDescriptionEnabled = _ref$isDescriptionEna === void 0 ? undefined : _ref$isDescriptionEna,\n children = _ref.children,\n nextStatus = _ref.nextStatus,\n className = _ref.className,\n _ref$isNumeric = _ref.isNumeric,\n isNumeric = _ref$isNumeric === void 0 ? false : _ref$isNumeric,\n index = _ref.index,\n rest = _objectWithoutProperties(_ref, _excluded$1);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var mapping = {\n cancelled: jsx(CloseIcon, {\n size: \"sm\",\n color: \"sysColorErrorContrast\",\n \"data-ppui\": \"true\"\n }),\n critical: jsx(CriticalIcon, {\n size: \"sm\",\n color: \"sysColorErrorContrast\",\n \"data-ppui\": \"true\"\n }),\n warning: jsx(ClockIcon, {\n size: \"sm\",\n color: \"sysColorWarningContrast\",\n \"data-ppui\": \"true\"\n }),\n success: isNumeric ? jsx(BodyText, {\n css: [_styles.numeric, _styles.numericSuccess],\n \"data-ppui\": \"true\"\n }, index) : jsx(CheckmarkIcon, {\n size: \"sm\",\n color: \"sysColorSuccessContrast\",\n \"data-ppui\": \"true\"\n }),\n default: isNumeric ? jsx(BodyText, {\n css: _styles.numeric,\n \"data-ppui\": \"true\"\n }, index) : jsx(React.Fragment, null)\n };\n var statusName = mapping[status] ? status : 'default';\n var nextStatusName = mapping[nextStatus] ? nextStatus : 'default';\n var itemContentCSS = [_styles.itemContent, (!isDescriptionEnabled || !children) && _styles.itemContentWithoutDescription];\n var markerCSS = [_styles.marker,\n //@ts-ignore\n nextStatusName && _styles[nextStatusName + 'Marker']];\n var iconCSS = [_styles.icon,\n //@ts-ignore\n _styles[statusName + 'Icon'], isNumeric && statusName === 'default' && _styles.numericDefault];\n return jsx(\"li\", _extends({\n css: _styles.item,\n className: className,\n \"aria-current\": !!isCurrent\n }, rest, {\n \"data-ppui\": \"true\"\n }), jsx(\"div\", {\n css: markerCSS,\n \"aria-hidden\": !ariaLabel,\n \"data-ppui\": \"true\"\n }, jsx(\"div\", {\n role: ariaLabel && 'img',\n \"aria-label\": ariaLabel,\n css: iconCSS,\n \"data-ppui\": \"true\"\n }, mapping[statusName])), jsx(\"div\", {\n css: itemContentCSS,\n \"data-ppui\": \"true\"\n }, jsx(BodyText, {\n strong: !!isCurrent,\n \"data-ppui\": \"true\"\n }, title), isDescriptionEnabled && children && jsx(CaptionText, {\n css: _styles.description,\n \"data-ppui\": \"true\"\n }, children)));\n};\nexport { ProgressStepper, Step, styles as progressStepperStyles };","import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport { math } from 'polished';\nimport { textStyles } from '@paypalcorp/pp-react-text';\nimport { devWarning, utilStyles, uniqueId } from '@paypalcorp/pp-react-utils';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { forwardRef, useMemo } from 'react';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport { CriticalIcon } from '@paypalcorp/pp-react-icons';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysBorderRadiusInteractive = tokens.sysBorderRadiusInteractive,\n sysBorderThicknessEmphasis = tokens.sysBorderThicknessEmphasis,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysColorBackgroundSurfaceActive = tokens.sysColorBackgroundSurfaceActive,\n sysColorErrorMain = tokens.sysColorErrorMain,\n sysColorSelectedMain = tokens.sysColorSelectedMain,\n sysColorStructureBorderHighContrast = tokens.sysColorStructureBorderHighContrast,\n sysSizeCircleXs = tokens.sysSizeCircleXs,\n sysSizeTapTargetSm = tokens.sysSizeTapTargetSm,\n sysSpaceSm = tokens.sysSpaceSm,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceXl = tokens.sysSpaceXl,\n sysSpaceXs = tokens.sysSpaceXs;\n var radiobuttonItemTextSpacing = math(\"\".concat(sysSpaceXl, \" + \").concat(sysSpaceMd));\n var _textStyles = textStyles(tokens),\n textCaption = _textStyles.caption,\n fieldLabelLg = _textStyles.fieldLabelLg,\n fieldValueSm = _textStyles.fieldValueSm;\n var _utilStyles = utilStyles(tokens),\n focusStyles = _utilStyles.focusStyles; // Base Class for radio-group\n\n var radioGroupBase = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: radio_group_base;\\n display: flex; // to avoid collapsing margins\\n flex-direction: column;\\n margin: 0;\\n padding: 0;\\n border: none;\\n text-align: left;\\n\\n [dir='rtl'] & {\\n text-align: right;\\n }\\n \"]))); // Base Class for radio\n\n var radioBase = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: radio_base;\\n position: relative;\\n padding: \", \" 0;\\n text-align: left;\\n\\n [dir='rtl'] & {\\n text-align: right;\\n }\\n \"])), sysSpaceMd);\n var radioGroupLabel = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: radio_group_label;\\n \", \";\\n display: block;\\n padding-bottom: \", \";\\n margin-bottom: \", \";\\n \"])), fieldLabelLg({\n color: sysColorBackgroundMediumContrast\n }), sysSpaceMd, sysSpaceXs);\n var radioGroupLabelWithIcon = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: with_icon;\\n display: flex;\\n align-items: center;\\n min-height: \", \";\\n padding-bottom: 0;\\n \"])), sysSizeTapTargetSm);\n var radioGroupLabelIcon = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: radio_group_label-icon;\\n margin-inline-start: \", \";\\n \"])), sysSpaceSm);\n var radioLabel = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: radio_label;\\n -moz-osx-font-smoothing: grayscale;\\n cursor: pointer;\\n display: inline-block;\\n padding-left: \", \";\\n \", \"\\n position: relative;\\n -webkit-tap-highlight-color: transparent;\\n\\n [dir='rtl'] & {\\n padding-right: \", \";\\n padding-left: 0;\\n }\\n \"])), radiobuttonItemTextSpacing, fieldValueSm(), radiobuttonItemTextSpacing);\n var checkIconContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: check_icon_container;\\n border-radius: \", \";\\n border: \", \" solid\\n \", \";\\n height: \", \";\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: \", \";\\n background-color: \", \";\\n\\n [dir='rtl'] & {\\n right: 0;\\n }\\n \"])), sysBorderRadiusInteractive, sysBorderThicknessNormal, sysColorStructureBorderHighContrast, sysSizeCircleXs, sysSizeCircleXs, sysColorBackgroundSurface);\n var errorCheckIconContainer = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: error_check_icon_container;\\n border: \", \" solid \", \";\\n \"])), sysBorderThicknessEmphasis, sysColorErrorMain);\n var checkIcon = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: check_icon;\\n display: none;\\n \"])));\n var input = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: input;\\n cursor: pointer;\\n opacity: 0;\\n position: absolute;\\n margin: 0;\\n\\n &:checked + label > span:first-of-type {\\n border-color: \", \";\\n background-color: \", \";\\n color: \", \";\\n\\n span:first-of-type {\\n display: inline;\\n }\\n }\\n\\n &:focus + label > span:first-of-type {\\n \", \";\\n }\\n\\n &:active:not(:checked) + label > span:first-of-type {\\n background: \", \";\\n }\\n \"])), sysColorSelectedMain, sysColorSelectedMain, sysColorBackgroundSurface, focusStyles.focusOffsetElement, sysColorBackgroundSurfaceActive);\n var inputWithError = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: input_with_error;\\n &:checked + label > span:first-of-type {\\n border: \", \" solid \", \";\\n }\\n \"])), sysBorderThicknessEmphasis, sysColorErrorMain);\n var centeredLabelCheckIconContainer = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\n label: centered_label_check_icon_container;\\n top: 50%;\\n transform: translateY(-50%);\\n \"])));\n var helperText = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([\"\\n label: helper_text;\\n \", \";\\n margin: 0;\\n list-style: none; // In case it's a list of helper texts\\n margin-top: \", \";\\n \"])), textCaption({\n color: sysColorBackgroundMediumContrast\n }), sysSpaceXs);\n var groupHelperText = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([\"\\n label: group_helper_text;\\n \", \";\\n margin: 0;\\n list-style: none; // In case it's a list of helper texts\\n \"])), textCaption({\n color: sysColorBackgroundMediumContrast\n }));\n var errorText = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([\"\\n label: error_text;\\n \", \";\\n display: flex;\\n margin: 0;\\n align-items: center;\\n \"])), textCaption({\n color: sysColorBackgroundMediumContrast\n }));\n var errorIcon = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([\"\\n label: error_icon;\\n color: \", \";\\n margin-right: \", \";\\n\\n [dir='rtl'] & {\\n margin-left: \", \";\\n margin-right: 0;\\n }\\n \"])), sysColorErrorMain, sysSpaceXs, sysSpaceXs);\n return {\n radioGroupBase: radioGroupBase,\n radioBase: radioBase,\n radioGroupLabel: radioGroupLabel,\n radioGroupLabelWithIcon: radioGroupLabelWithIcon,\n radioGroupLabelIcon: radioGroupLabelIcon,\n radioLabel: radioLabel,\n checkIconContainer: checkIconContainer,\n errorCheckIconContainer: errorCheckIconContainer,\n checkIcon: checkIcon,\n input: input,\n inputWithError: inputWithError,\n centeredLabelCheckIconContainer: centeredLabelCheckIconContainer,\n helperText: helperText,\n groupHelperText: groupHelperText,\n errorText: errorText,\n errorIcon: errorIcon\n };\n}\nvar _excluded = [\"label\", \"name\", \"value\", \"id\", \"centeredLabel\", \"helperText\", \"className\", \"labelClassName\", \"onChange\", \"checked\", \"errorText\"];\nvar renderHelperText = function (text, helperTextCssVals) {\n return text && jsx(\"p\", {\n css: helperTextCssVals,\n \"data-ppui\": \"true\"\n }, text);\n};\nvar inferValue = function (label) {\n if (typeof label === 'string') {\n return label;\n }\n return 'value_not_set';\n};\nvar RadioCheckIcon = function (props) {\n return jsx(\"span\", {\n css: props.checkIconCssVals,\n \"aria-hidden\": \"true\",\n \"data-ppui\": \"true\"\n }, jsx(\"svg\", {\n viewBox: \"0 0 100 100\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"data-ppui\": \"true\"\n }, jsx(\"circle\", {\n r: \"18\",\n cy: \"50\",\n cx: \"50\",\n strokeWidth: \"0\",\n fill: \"currentColor\",\n \"data-ppui\": \"true\"\n })));\n};\nvar Radio = forwardRef(function (_ref, ref) {\n var label = _ref.label,\n _ref$name = _ref.name,\n name = _ref$name === void 0 ? uniqueId() : _ref$name,\n _ref$value = _ref.value,\n value = _ref$value === void 0 ? inferValue(label) : _ref$value,\n _ref$id = _ref.id,\n id = _ref$id === void 0 ? \"Radio_\".concat(name, \"_\").concat(value) : _ref$id,\n _ref$centeredLabel = _ref.centeredLabel,\n centeredLabel = _ref$centeredLabel === void 0 ? false : _ref$centeredLabel,\n helperText = _ref.helperText,\n className = _ref.className,\n labelClassName = _ref.labelClassName,\n onChange = _ref.onChange,\n _ref$checked = _ref.checked,\n checked = _ref$checked === void 0 ? false : _ref$checked,\n errorText = _ref.errorText,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var checkedPropName = onChange ? 'checked' : 'defaultChecked';\n var valueProps = {\n onChange: onChange\n };\n valueProps[checkedPropName] = checked;\n var inputCssVals = [_styles.input, !!errorText && _styles.inputWithError];\n var checkIconContainerCssVals = [_styles.checkIconContainer, !!errorText && _styles.errorCheckIconContainer, centeredLabel && _styles.centeredLabelCheckIconContainer];\n return jsx(\"div\", {\n css: _styles.radioBase,\n className: className,\n \"data-ppui-info\": \"radio_3.7.5\"\n }, jsx(\"input\", _extends({\n css: inputCssVals,\n type: \"radio\",\n name: name,\n value: value,\n id: id,\n ref: ref\n }, valueProps, rest, {\n \"data-ppui\": \"true\"\n })), jsx(\"label\", {\n css: _styles.radioLabel,\n className: labelClassName,\n htmlFor: id,\n \"data-ppui\": \"true\"\n }, jsx(\"span\", {\n css: checkIconContainerCssVals,\n \"data-ppui\": \"true\"\n }, jsx(RadioCheckIcon, {\n checkIconCssVals: _styles.checkIcon,\n \"data-ppui\": \"true\"\n })), label, renderHelperText(helperText, _styles.helperText)));\n});\nvar _excluded$1 = [\"as\", \"children\", \"className\"];\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\nvar FieldGroupLabel = function (_ref) {\n var as = _ref.as,\n children = _ref.children,\n className = _ref.className,\n rest = _objectWithoutProperties(_ref, _excluded$1);\n var componentProps = _objectSpread({\n className: className,\n children: children\n }, rest);\n return /*#__PURE__*/React.createElement(as || 'legend', _extends({}, componentProps, {\n \"data-ppui\": \"true\"\n }));\n};\nvar FieldGroupMessage = function (_ref) {\n var errorText = _ref.errorText,\n helperText = _ref.helperText,\n errorIconAriaLabel = _ref.errorIconAriaLabel,\n msgId = _ref.msgId,\n _styles = _ref._styles;\n // Get either the error message or helper text or... nothing\n var radioErrorIcon = jsx(CriticalIcon, {\n css: _styles.errorIcon,\n size: \"sm\",\n role: \"img\",\n \"aria-label\": errorIconAriaLabel,\n \"data-ppui\": \"true\"\n });\n return errorText && jsx(\"p\", {\n css: _styles.errorText,\n id: msgId,\n \"data-ppui\": \"true\"\n }, radioErrorIcon, errorText) || helperText && jsx(\"p\", {\n css: _styles.groupHelperText,\n id: msgId,\n \"data-ppui\": \"true\"\n }, helperText) || null;\n};\nvar _excluded$2 = [\"className\", \"radioLabelClassName\", \"errorText\", \"errorIconAriaLabel\", \"helperText\", \"id\", \"label\", \"name\", \"value\", \"icon\", \"options\", \"onChange\"];\nfunction ownKeys$1(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread$1(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\nvar RadioButton = function (_ref) {\n var className = _ref.className,\n radioLabelClassName = _ref.radioLabelClassName,\n errorText = _ref.errorText,\n _ref$errorIconAriaLab = _ref.errorIconAriaLabel,\n errorIconAriaLabel = _ref$errorIconAriaLab === void 0 ? 'Error' : _ref$errorIconAriaLab,\n helperText = _ref.helperText,\n id = _ref.id,\n label = _ref.label,\n _ref$name = _ref.name,\n name = _ref$name === void 0 ? 'radioButton' : _ref$name,\n _ref$value = _ref.value,\n value = _ref$value === void 0 ? '' : _ref$value,\n icon = _ref.icon,\n _ref$options = _ref.options,\n options = _ref$options === void 0 ? [] : _ref$options,\n onChange = _ref.onChange,\n rest = _objectWithoutProperties(_ref, _excluded$2);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var radioId = id !== null && id !== void 0 ? id : uniqueId('RadioButtton_');\n var msgId = \"message_\".concat(radioId);\n var fieldGroupLabelCssVal = [_styles.radioGroupLabel, icon && _styles.radioGroupLabelWithIcon];\n return (\n //@ts-ignore\n jsx(\"fieldset\", _extends({\n css: _styles.radioGroupBase,\n className: className,\n \"data-ppui-info\": \"radio_3.7.5\"\n }, rest), jsx(FieldGroupLabel, {\n css: fieldGroupLabelCssVal,\n \"data-ppui\": \"true\"\n }, label, icon && jsx(\"span\", {\n css: _styles.radioGroupLabelIcon,\n \"data-ppui\": \"true\"\n }, icon)), function renderRadios(optionsList, componentName, currentValue, changeHandler) {\n if (optionsList.length === 0) {\n return jsx(\"i\", {\n \"data-ppui\": \"true\"\n }, \"No Options!\");\n }\n return optionsList.map(function (listProps, index) {\n var checkedPropName = changeHandler ? 'checked' : 'defaultChecked';\n var radioProps = _objectSpread$1(_objectSpread$1({}, listProps), {}, {\n labelClassName: radioLabelClassName\n });\n if (currentValue === listProps.value) {\n radioProps[checkedPropName] = true;\n }\n return jsx(Radio, _extends({\n key: \"rbtn-item\".concat(index),\n name: componentName,\n onChange: changeHandler,\n errorText: errorText\n }, radioProps, rest, {\n \"data-ppui\": \"true\"\n }));\n });\n }(options, name, value, onChange), jsx(FieldGroupMessage, {\n errorText: errorText,\n helperText: helperText,\n errorIconAriaLabel: errorIconAriaLabel,\n msgId: msgId,\n _styles: _styles,\n \"data-ppui\": \"true\"\n }))\n );\n};\nexport { Radio, RadioButton, styles as radioStyles };","import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';\nimport React, { createContext, Children, useContext } from 'react';\nimport { jsx } from '@emotion/react';\n\n/** @jsxFrag React.Fragment */\n\nvar PPTemplateContext = createContext({\n partMap: {}\n});\nvar addChild = function (map, key, child) {\n if (!map.hasOwnProperty(key)) {\n map[key] = [];\n } else if (!Array.isArray(map[key])) {\n map[key] = [map[key]];\n } // istanbul ignore next\n\n if (Array.isArray(child)) {\n var _map$key;\n (_map$key = map[key]).push.apply(_map$key, _toConsumableArray(child));\n } else {\n map[key].push(child);\n }\n return map;\n};\n\n// istanbul ignore next\nvar NamePart = function (_ref) {\n var children = _ref.children;\n return jsx(React.Fragment, null, children);\n};\nvar collateChildren = function (children) {\n var partMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var anonymousName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '$anonymous';\n return Children.toArray(children).reduce(function (childMap, child) {\n var childElem = child;\n if (typeof childElem.type === 'function') {\n var displayName = childElem.type.name;\n if (displayName === 'NamePart') {\n var _childElem$props$name;\n return addChild(childMap, (_childElem$props$name = childElem.props.name) !== null && _childElem$props$name !== void 0 ? _childElem$props$name : anonymousName, childElem);\n }\n }\n return addChild(childMap, anonymousName, child);\n }, partMap);\n};\nvar PartProvider = function (_ref2) {\n var parts = _ref2.parts,\n partMap = _ref2.partMap,\n children = _ref2.children,\n anonymousName = _ref2.anonymousName;\n var collatedParts = collateChildren(parts, partMap, anonymousName);\n return jsx(PPTemplateContext.Provider, {\n value: {\n partMap: collatedParts\n },\n \"data-ppui\": \"true\"\n }, children);\n};\nvar IncludePart = function (_ref3) {\n var name = _ref3.name;\n var templateContext = useContext(PPTemplateContext);\n var partMap = templateContext.partMap;\n return partMap[name];\n};\nexport { IncludePart, NamePart, PPTemplateContext, PartProvider, collateChildren };","import { useMemo } from 'react';\nimport { IncludePart, PartProvider } from '@paypalcorp/pp-react-template';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { devWarning, utilStyles } from '@paypalcorp/pp-react-utils';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysSpaceSm = tokens.sysSpaceSm,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceJumbo = tokens.sysSpaceJumbo;\n var _utilStyles = utilStyles(tokens),\n elevationStyles = _utilStyles.elevationStyles;\n var base = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: grid;\\n grid-template-rows: auto 1fr auto;\\n height: 100%;\\n \"])));\n var header = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n padding: \", \" \", \";\\n \"])), sysSpaceSm, sysSpaceMd);\n var footer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n padding: \", \" \", \";\\n \"])), sysSpaceSm, sysSpaceMd);\n var content = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n position: relative;\\n overflow: hidden;\\n z-index: 0;\\n\\n &:before {\\n content: '';\\n position: absolute;\\n top: -1rem;\\n left: 0;\\n right: 0;\\n display: block;\\n height: 1rem;\\n box-shadow: \", \";\\n z-index: -1;\\n }\\n\\n &:after {\\n content: '';\\n position: absolute;\\n bottom: -1rem;\\n left: 0;\\n right: 0;\\n display: block;\\n height: 1rem;\\n box-shadow: \", \";\\n z-index: -1;\\n }\\n \"])), elevationStyles.level3, elevationStyles.level3Above);\n var scroller = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n padding: 0 \", \";\\n height: 100%;\\n overflow: scroll;\\n background: linear-gradient(\\n to bottom,\\n \", \",\\n transparent \", \",\\n transparent calc(100% - \", \"),\\n \", \" 100%\\n );\\n background-attachment: local;\\n \"])), sysSpaceMd, sysColorBackgroundSurface, sysSpaceJumbo, sysSpaceJumbo, sysColorBackgroundSurface);\n return {\n base: base,\n header: header,\n footer: footer,\n content: content,\n scroller: scroller\n };\n}\nvar ScrollBox = function (_ref) {\n var children = _ref.children,\n partMap = _ref.partMap;\n var tokens = useTheme();\n var scrollBoxStyles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var headerSection = jsx(\"header\", {\n css: scrollBoxStyles.header,\n \"data-ppui\": \"true\"\n }, jsx(IncludePart, {\n name: \"header\",\n \"data-ppui\": \"true\"\n }));\n var footerSection = jsx(\"footer\", {\n css: scrollBoxStyles.footer,\n \"data-ppui\": \"true\"\n }, jsx(IncludePart, {\n name: \"footer\",\n \"data-ppui\": \"true\"\n }));\n return jsx(PartProvider, {\n parts: children,\n partMap: partMap,\n anonymousName: \"contents\",\n \"data-ppui\": \"true\"\n }, jsx(\"section\", {\n css: scrollBoxStyles.base,\n \"data-ppui\": \"true\"\n }, headerSection, jsx(\"div\", {\n css: scrollBoxStyles.content,\n \"data-ppui\": \"true\"\n }, jsx(\"div\", {\n css: scrollBoxStyles.scroller,\n \"data-ppui\": \"true\"\n }, jsx(IncludePart, {\n name: \"contents\",\n \"data-ppui\": \"true\"\n }))), footerSection));\n};\nexport { ScrollBox };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport { forwardRef, useMemo, useState } from 'react';\nimport { TextInput } from '@paypalcorp/pp-react-text-input';\nimport { IconButton } from '@paypalcorp/pp-react-icon-button';\nimport { DeclineIcon, SearchIcon } from '@paypalcorp/pp-react-icons';\nimport { css, useTheme, jsx, ClassNames } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { math } from 'polished';\nimport { devWarning } from '@paypalcorp/pp-react-utils';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysBorderThicknessEmphasis = tokens.sysBorderThicknessEmphasis,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorErrorMain = tokens.sysColorErrorMain,\n sysSizeIconSm = tokens.sysSizeIconSm,\n sysSizeIconXl = tokens.sysSizeIconXl,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceLg = tokens.sysSpaceLg;\n var base = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: search_input;\\n border-radius: \", \";\\n padding-left: \", \";\\n\\n &:not(:focus) {\\n border-color: \", \";\\n box-shadow: none;\\n }\\n\\n [dir='rtl'] & {\\n padding-right: \", \";\\n }\\n \"])), sysSizeIconXl, math(\"3 * \".concat(sysSpaceMd, \" + \").concat(sysSizeIconSm, \" - \").concat(sysBorderThicknessNormal)), sysColorBackgroundMediumContrast, math(\"3 * \".concat(sysSpaceMd, \" + \").concat(sysSizeIconSm, \" - \").concat(sysBorderThicknessNormal)));\n var label = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: label;\\n left: \", \";\\n\\n [dir='rtl'] & {\\n right: \", \";\\n }\\n \"])), math(\"3 * \".concat(sysSpaceMd, \" + \").concat(sysSizeIconSm)), math(\"3 * \".concat(sysSpaceMd, \" + \").concat(sysSizeIconSm)));\n var leftIcon = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: left_icon;\\n left: \", \";\\n\\n [dir='rtl'] & {\\n right: \", \";\\n }\\n \"])), math(\"2 * \".concat(sysSpaceMd)), math(\"2 * \".concat(sysSpaceMd)));\n var error = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: error;\\n padding: \", \"\\n \", \"\\n \", \"\\n \", \";\\n\\n &:not(:focus) {\\n border-color: \", \";\\n box-shadow: none;\\n }\\n \"])), math(\"\".concat(sysSpaceLg, \" + \").concat(sysBorderThicknessEmphasis)), math(\"3 * \".concat(sysSpaceMd, \" + \").concat(sysSizeIconSm, \" - \").concat(sysBorderThicknessEmphasis)), math(\"\".concat(sysSpaceLg, \" + \").concat(sysBorderThicknessEmphasis)), math(\"3 * \".concat(sysSpaceMd, \" + \").concat(sysSizeIconSm, \" - \").concat(sysBorderThicknessEmphasis)), sysColorErrorMain);\n return {\n base: base,\n label: label,\n leftIcon: leftIcon,\n error: error\n };\n}\nvar _excluded = [\"keepClearButton\", \"onClear\", \"className\", \"clearButtonLabel\", \"clearButtonAriaLabel\", \"inputClassName\", \"labelClassName\", \"errorText\", \"label\", \"value\", \"onKeyDown\"];\nvar SearchInput = forwardRef(function (props, ref) {\n var keepClearButton = props.keepClearButton,\n onClear = props.onClear,\n className = props.className,\n _props$clearButtonLab = props.clearButtonLabel,\n clearButtonLabel = _props$clearButtonLab === void 0 ? 'Clear input' : _props$clearButtonLab,\n _props$clearButtonAri = props.clearButtonAriaLabel,\n clearButtonAriaLabel = _props$clearButtonAri === void 0 ? 'The info has been cleared' : _props$clearButtonAri,\n inputClassName = props.inputClassName,\n labelClassName = props.labelClassName,\n errorText = props.errorText,\n label = props.label,\n value = props.value,\n onKeyDown = props.onKeyDown,\n rest = _objectWithoutProperties(props, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var _useState = useState(false),\n _useState2 = _slicedToArray(_useState, 2),\n cleared = _useState2[0],\n setCleared = _useState2[1];\n\n /* istanbul ignore next */\n var handleKey = function (evt) {\n if (cleared) {\n setCleared(false);\n }\n if (evt.key === 'Escape' && onClear) {\n onClear(evt);\n }\n if (onKeyDown) {\n onKeyDown(evt);\n }\n };\n var clearButtonProps = cleared ? {\n 'aria-label': clearButtonAriaLabel,\n 'aria-atomic': 'true',\n 'aria-live': 'polite',\n role: 'button'\n } : null;\n var clearButton = value || keepClearButton ? {\n rightIcon: jsx(IconButton, _extends({\n buttonType: \"tertiary\",\n svgIconComponent: DeclineIcon,\n onClick: function handleClearClick(evt) {\n /* istanbul ignore next */\n if (onClear) {\n onClear(evt);\n setCleared(true);\n }\n },\n onMouseDown: function onMouseDown(evt) {\n return evt.preventDefault();\n } // remove focus on click\n }, clearButtonProps, {\n \"data-ppui\": \"true\"\n }), clearButtonLabel)\n } : null;\n return jsx(ClassNames, {\n \"data-ppui\": \"true\"\n }, function (_ref) {\n var css = _ref.css,\n cx = _ref.cx;\n return jsx(TextInput, _extends({\n className: className,\n ref: ref,\n leftIcon: jsx(SearchIcon, {\n size: \"sm\",\n \"aria-hidden\": \"true\",\n \"data-ppui\": \"true\"\n }),\n leftIconCSS: _styles.leftIcon\n }, clearButton, {\n inputClassName: cx(css([_styles.base, errorText && _styles.error]), inputClassName),\n labelClassName: cx(css([_styles.label]), labelClassName),\n errorText: errorText,\n isLabelHidden: true,\n placeholder: label,\n label: label,\n value: value,\n \"data-ppui-info\": \"search-input_2.3.7\"\n }, rest, {\n onKeyDown: handleKey\n }));\n });\n});\nexport { SearchInput, styles as searchInputStyles };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { useMemo, useRef, useLayoutEffect } from 'react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport { devWarning, utilStyles, throttle, KeyboardCode } from '@paypalcorp/pp-react-utils';\nimport { textStyles } from '@paypalcorp/pp-react-text';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysBorderRadiusInteractive = tokens.sysBorderRadiusInteractive,\n sysColorBackgroundAlt = tokens.sysColorBackgroundAlt,\n sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorPrimaryContrast = tokens.sysColorPrimaryContrast,\n sysColorPrimaryMain = tokens.sysColorPrimaryMain,\n sysColorStructureBorderHighContrast = tokens.sysColorStructureBorderHighContrast,\n sysMotionDurationMoveSmall = tokens.sysMotionDurationMoveSmall,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysColorStructureFocus = tokens.sysColorStructureFocus,\n sysSpaceSm = tokens.sysSpaceSm,\n sysBorderThicknessEmphasis = tokens.sysBorderThicknessEmphasis;\n var _utilStyles = utilStyles(tokens),\n focusStyles = _utilStyles.focusStyles,\n variables = _utilStyles.variables;\n var _textStyles = textStyles(tokens),\n textCaption = _textStyles.caption;\n /* istanbul ignore next */\n\n var borderRadius = sysBorderRadiusInteractive === '50%' ? '64rem' : sysBorderRadiusInteractive;\n var webkitSize = '0.0421875rem';\n var segmentedControllerSpace = '0.1875rem'; // 3px\n\n var tabWrapBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: segmented_controller_tab_wrap_base;\\n background-color: \", \";\\n border-radius: \", \";\\n display: flex;\\n align-items: stretch;\\n justify-content: flex-start;\\n position: relative;\\n padding: \", \";\\n gap: \", \";\\n \"])), sysColorBackgroundAlt, borderRadius, segmentedControllerSpace, segmentedControllerSpace);\n var tabStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: segmented_controller_tab;\\n border-radius: inherit;\\n position: relative;\\n background-color: transparent;\\n width: 100%;\\n border: 0;\\n min-width: 0;\\n padding: 0;\\n cursor: pointer;\\n \", \"\\n z-index: 1;\\n\\n &:focus {\\n \", \";\\n }\\n\\n @media (hover: hover) {\\n &:hover {\\n &:not(:focus) {\\n span {\\n outline: \", \" solid\\n \", \";\\n }\\n }\\n }\\n }\\n\\n &[aria-selected='true'] {\\n label: tab_aria_selected;\\n \", \"\\n -webkit-text-stroke-width: \", \";\\n\\n span {\\n color: \", \";\\n }\\n &:focus {\\n span {\\n outline-offset: -\", \";\\n outline: \", \" solid\\n \", \";\\n }\\n }\\n }\\n \"])), textCaption(), focusStyles.focusOffsetElement, sysBorderThicknessEmphasis, sysColorStructureFocus, textCaption(), webkitSize, sysColorPrimaryMain, sysBorderThicknessNormal, sysBorderThicknessNormal, sysColorStructureBorderHighContrast);\n var tabSlider = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: slider;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 0;\\n height: 0;\\n background: \", \";\\n border-radius: \", \";\\n -webkit-text-stroke-width: \", \";\\n transition: all \", \" \", \";\\n \"])), sysColorPrimaryContrast, borderRadius, webkitSize, sysMotionDurationMoveSmall, variables.ppuiEaseMoveSmall);\n var tabTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: tab_title_base;\\n display: flex;\\n flex-wrap: wrap;\\n justify-content: center;\\n align-items: center;\\n height: 100%;\\n word-break: break-word;\\n border: \", \" solid transparent;\\n padding: \", \";\\n border-radius: inherit;\\n color: \", \";\\n pointer-events: none;\\n \"])), sysBorderThicknessNormal, sysSpaceSm, sysColorBackgroundMediumContrast);\n var tabContentStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: tab_content;\\n\\n &[aria-hidden='true'] {\\n display: none;\\n }\\n \"])));\n var tabContentVisible = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: tab_content_visible;\\n display: block;\\n \"])));\n var tabContentHidden = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: tab_content_hidden;\\n display: none;\\n \"])));\n return {\n tabWrapBaseStyles: tabWrapBaseStyles,\n tabStyles: tabStyles,\n tabSlider: tabSlider,\n tabTitleStyles: tabTitleStyles,\n tabContentStyles: tabContentStyles,\n tabContentVisible: tabContentVisible,\n tabContentHidden: tabContentHidden\n };\n}\nvar _excluded = [\"id\", \"tabIdx\", \"label\", \"segmentedControllerId\", \"panelId\", \"selected\", \"onClick\", \"className\"];\nvar SegmentedControllerTab = React.forwardRef(function (_ref, ref) {\n var id = _ref.id,\n tabIdx = _ref.tabIdx,\n label = _ref.label,\n segmentedControllerId = _ref.segmentedControllerId,\n panelId = _ref.panelId,\n selected = _ref.selected,\n onClick = _ref.onClick,\n className = _ref.className,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var focusable = selected ? 0 : -1;\n var tabId = id || \"\".concat(segmentedControllerId, \"-tab\").concat(parseInt(tabIdx, 10) + 1);\n var tabStyles = [_styles.tabStyles];\n return jsx(\"button\", _extends({\n \"data-tab-index\": tabIdx,\n id: tabId,\n css: tabStyles,\n className: className,\n \"aria-controls\": panelId,\n \"aria-selected\": selected,\n tabIndex: focusable,\n type: \"button\",\n role: \"tab\",\n ref: ref\n }, rest, {\n onClick: onClick,\n \"data-ppui\": \"true\"\n }), jsx(\"span\", {\n css: _styles.tabTitleStyles,\n \"data-ppui\": \"true\"\n }, label));\n});\nvar _excluded$1 = [\"id\", \"panelId\", \"label\"];\nvar getRefCurrent = function (myRef) {\n return /* istanbul ignore next */myRef && myRef.current ? myRef.current : null;\n};\nvar SegmentedControllerTabs = function (_ref) {\n var _ref$name = _ref.name,\n name = _ref$name === void 0 ? 'segmentedController' : _ref$name,\n selectedTabIdx = _ref.selectedTabIdx,\n _ref$tabs = _ref.tabs,\n tabs = _ref$tabs === void 0 ? [] : _ref$tabs,\n onClick = _ref.onClick,\n className = _ref.className,\n tabClassName = _ref.tabClassName,\n tabsWrapperClassName = _ref.tabsWrapperClassName,\n keepAlive = _ref.keepAlive,\n lazyLoad = _ref.lazyLoad,\n children = _ref.children;\n\n /* istanbul ignore next */\n if (!onClick) {\n devWarning('Required prop `onClick` is missing');\n }\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var containerEleRef = useRef();\n var prevSelectedTabIdxRef = useRef(0);\n var isTabsFocusedRef = useRef(false);\n var focusedIdxRef = useRef();\n var sliderRef = useRef();\n var tabRef = useRef([]);\n var getSelectedTabIdx = function () {\n var index = Math.floor(selectedTabIdx);\n if (!selectedTabIdx || !index || index >= tabs.length || index < 0) {\n return 0;\n }\n return index;\n };\n var getWrapperCurrent = function (w) {\n return /* istanbul ignore next */w && w.current ? w.current : null;\n }; // apply styles to the slider element based on the\n // dimention of the tab\n\n var applySliderStyles = function (element) {\n var _element$offsetParent;\n var slider = getWrapperCurrent(sliderRef);\n slider.style.left = \"\".concat((element === null || element === void 0 ? void 0 : element.getBoundingClientRect().left) - (element === null || element === void 0 ? void 0 : (_element$offsetParent = element.offsetParent) === null || _element$offsetParent === void 0 ? void 0 : _element$offsetParent.getBoundingClientRect().left), \"px\");\n slider.style.width = \"\".concat(element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width, \"px\");\n slider.style.top = \"\".concat(element === null || element === void 0 ? void 0 : element.offsetTop, \"px\");\n slider.style.height = \"\".concat(element === null || element === void 0 ? void 0 : element.offsetHeight, \"px\");\n };\n var offsetFocus = function (offset) {\n var container = getRefCurrent(containerEleRef);\n var tabDomItems = container.querySelectorAll('[role=\"tab\"]');\n var nextIndex = focusedIdxRef.current + offset;\n var index;\n /* istanbul ignore next */\n\n if (nextIndex === tabs.length) {\n index = 0;\n } else if (nextIndex === -1) {\n index = tabs.length - 1;\n } else {\n index = nextIndex;\n }\n tabDomItems[index].focus();\n focusedIdxRef.current = index;\n };\n var keyHandler = function (event) {\n if (!isTabsFocusedRef.current) {\n return;\n }\n var selectedIndex = getSelectedTabIdx();\n /* istanbul ignore next */\n\n var KeyCode = new KeyboardCode(event.key || event.keyCode);\n if (KeyCode.IS_ARROW_LEFT) {\n offsetFocus(-1);\n } else if (KeyCode.IS_ARROW_RIGHT) {\n offsetFocus(1);\n } else if (KeyCode.IS_ENTER || KeyCode.IS_SPACEBAR) {\n /* istanbul ignore next */\n if (selectedIndex !== focusedIdxRef.current) {\n onClick(event, focusedIdxRef.current);\n }\n }\n };\n useLayoutEffect(function () {\n prevSelectedTabIdxRef.current = getSelectedTabIdx();\n }, [tabs, selectedTabIdx, onClick]);\n useLayoutEffect(function () {\n // For the first time during initialisation\n focusedIdxRef.current = getSelectedTabIdx();\n /* istanbul ignore next */\n\n var resizeObserver = window.ResizeObserver ? new ResizeObserver(throttle(function () {\n applySliderStyles(tabRef.current[focusedIdxRef.current]);\n }, 100)) : null;\n /* istanbul ignore next */\n\n if (window.ResizeObserver) {\n resizeObserver.observe(containerEleRef.current);\n }\n return function () {\n /* istanbul ignore next */\n if (resizeObserver) {\n resizeObserver.disconnect();\n }\n };\n }, [selectedTabIdx]);\n var handleClick = function (event) {\n var tabIdxClicked = parseInt(event.currentTarget.getAttribute('data-tab-index'), 10);\n event.currentTarget.focus(); // This is tested, but coverage not registering it\n\n /* istanbul ignore next */\n\n if (!isNaN(tabIdxClicked)) {\n focusedIdxRef.current = tabIdxClicked;\n }\n applySliderStyles(event.target);\n onClick(event, tabIdxClicked);\n };\n var selectedIndex = getSelectedTabIdx();\n var selectedId;\n var tabItems = tabs.map(function (tabProps, index) {\n var id = tabProps.id,\n panelId = tabProps.panelId,\n label = tabProps.label,\n rest = _objectWithoutProperties(tabProps, _excluded$1);\n var keyIdentifier = \"\".concat(name, \"-tab\").concat(index + 1); // update animation (only on the selected tab)\n\n if (index === selectedIndex) {\n selectedId = id || keyIdentifier;\n }\n return jsx(SegmentedControllerTab, _extends({\n key: keyIdentifier,\n id: id,\n tabIdx: index.toString(),\n label: label,\n ref: function ref(el) {\n return tabRef.current[index] = el;\n },\n segmentedControllerId: name,\n panelId: panelId,\n selected: index === selectedIndex,\n onClick: handleClick,\n className: tabClassName\n }, rest, {\n \"data-ppui\": \"true\"\n }));\n });\n var tabContent = null;\n if (keepAlive || lazyLoad) {\n tabContent = React.Children.toArray(children).map(function (_panel, index) {\n var isSelected = selectedIndex === index;\n return React.cloneElement(_panel, {\n hidden: !isSelected,\n tabId: isSelected ? selectedId : undefined,\n visible: keepAlive ? true : isSelected\n });\n });\n } else {\n var tabPanel = React.Children.toArray(children).filter(function (_panel, index) {\n return selectedIndex === index;\n })[0];\n tabContent = React.cloneElement(tabPanel, {\n tabId: selectedId,\n hidden: false\n });\n }\n return jsx(\"div\", {\n ref: containerEleRef,\n id: name,\n className: className,\n \"data-ppui-info\": \"segmented-controller_2.10.0\"\n }, jsx(\"div\", {\n id: \"\".concat(name, \"-tabs\"),\n css: _styles.tabWrapBaseStyles,\n className: tabsWrapperClassName,\n role: \"tablist\",\n onFocus: function handleFocus() {\n isTabsFocusedRef.current = true;\n },\n onBlur: function handleFocusOut() {\n isTabsFocusedRef.current = false;\n },\n onKeyDown: function onKeyDown(evt) {\n return keyHandler(evt);\n },\n \"data-ppui\": \"true\"\n }, tabItems, jsx(\"div\", {\n css: _styles.tabSlider,\n ref: sliderRef,\n \"data-ppui\": \"true\"\n })), tabContent);\n};\nvar _excluded$2 = [\"id\", \"tabId\", \"className\", \"hidden\", \"children\", \"visible\"];\nvar SegmentedControllerPanel = function (_ref) {\n var id = _ref.id,\n tabId = _ref.tabId,\n className = _ref.className,\n hidden = _ref.hidden,\n children = _ref.children,\n _ref$visible = _ref.visible,\n visible = _ref$visible === void 0 ? true : _ref$visible,\n rest = _objectWithoutProperties(_ref, _excluded$2);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]); // MutableRefObject variable to determine whether to render the component or not.\n\n var hasRendered = useRef(visible);\n /* istanbul ignore next */\n\n if (visible && !hasRendered.current) {\n hasRendered.current = true;\n }\n /* istanbul ignore next */\n\n if (!hasRendered.current) {\n // Do not re-render the Panel when its already present in the DOM.\n return null;\n }\n var panelContentStyles = [_styles.tabContentStyles, /* istanbul ignore next */\n visible ? _styles.tabContentVisible : _styles.tabContentHidden];\n return jsx(\"div\", _extends({\n id: id,\n css: panelContentStyles,\n className: className,\n \"aria-labelledby\": tabId,\n \"aria-hidden\": hidden,\n tabIndex: 0,\n role: \"tabpanel\"\n }, rest, {\n \"data-ppui\": \"true\"\n }), children);\n};\nexport { SegmentedControllerTabs as SegmentedController, SegmentedControllerPanel, SegmentedControllerTab, styles as segmentedControllerStyles };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { useMemo } from 'react';\nimport { CriticalIcon } from '@paypalcorp/pp-react-icons';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { math } from 'polished';\nimport { textStyles, CaptionText } from '@paypalcorp/pp-react-text';\nimport { devWarning, utilStyles, uniqueId } from '@paypalcorp/pp-react-utils';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceSm = tokens.sysSpaceSm,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysSpaceXs = tokens.sysSpaceXs,\n sysMotionDurationAction = tokens.sysMotionDurationAction,\n sysBorderThicknessEmphasis = tokens.sysBorderThicknessEmphasis,\n sysBorderThicknessFocus = tokens.sysBorderThicknessFocus,\n sysSizeMediaSm = tokens.sysSizeMediaSm,\n sysSizeMediaMd = tokens.sysSizeMediaMd,\n sysColorBackgroundHighContrast = tokens.sysColorBackgroundHighContrast,\n sysColorPrimaryMain = tokens.sysColorPrimaryMain,\n sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysColorSecondaryMain = tokens.sysColorSecondaryMain,\n sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorErrorMain = tokens.sysColorErrorMain;\n // 60px\n var selectionGroupBorderRadius = '0.375rem';\n var selectionGroupLabelPadding = math(\"\".concat(sysSpaceMd, \" - \").concat(sysBorderThicknessNormal)); // 11px\n\n var selectionGroupErrorLabelPadding = math(\"\".concat(sysSpaceMd, \" - \").concat(sysBorderThicknessEmphasis)); // 10px\n\n var selectionGroupErrorSelectedLabelPadding = math(\"\".concat(sysSpaceMd, \" - \").concat(sysBorderThicknessFocus)); // 9px\n\n var selectionGroupFocusBorderWidthInner = math(\"\".concat(sysBorderThicknessNormal, \" + \").concat(sysBorderThicknessEmphasis)); // 3px\n\n var selectionGroupFocusBorderHeightWidth = '0.125rem';\n var _textStyles = textStyles(tokens),\n caption = _textStyles.caption,\n body = _textStyles.body;\n var _utilStyles = utilStyles(tokens),\n elevationStyles = _utilStyles.elevationStyles,\n focusStyles = _utilStyles.focusStyles;\n var borderAfterStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n content: '';\\n position: absolute;\\n top: -\", \";\\n left: -\", \";\\n right: 0;\\n border-radius: \", \";\\n width: \", \";\\n height: \", \";\\n pointer-events: none;\\n \"])), sysBorderThicknessNormal, sysBorderThicknessNormal, selectionGroupBorderRadius, \"calc(100% + \".concat(selectionGroupFocusBorderHeightWidth, \")\"), \"calc(100% + \".concat(selectionGroupFocusBorderHeightWidth, \")\"));\n function secondaryStyle() {\n return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n background-color: \", \";\\n color: \", \";\\n border-color: \", \";\\n border-width: \", \";\\n padding: \", \";\\n z-index: 1;\\n -webkit-text-stroke-width: \", \"; // Hack to stop selection group from jumping since having a bold font-family will increase the width of the text and ultimately the width of the button\\n \"])), sysColorBackgroundSurface, sysColorSecondaryMain, sysColorSecondaryMain, sysBorderThicknessNormal, selectionGroupLabelPadding, '0.0421875rem');\n }\n function verticalOrientation() {\n return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n flex-direction: column;\\n min-width: auto;\\n \"])));\n }\n var base = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: selection_group_base;\\n box-sizing: border-box;\\n border-style: none;\\n padding: 0;\\n text-align: left;\\n [dir='rtl'] & {\\n text-align: right;\\n }\\n \"])));\n var buttons = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: buttons;\\n display: flex;\\n flex-wrap: wrap;\\n position: relative;\\n min-width: \", \";\\n margin-top: -\", \";\\n margin-right: -\", \";\\n [dir='rtl'] & {\\n margin-right: 0;\\n margin-left: -\", \";\\n }\\n \"])), '18rem', sysSpaceMd, sysSpaceMd, sysSpaceMd);\n var buttonsResponsiveXs = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: buttons_responsive_xs;\\n @media (max-width: \", \") {\\n \", \";\\n }\\n \"])), '25rem', verticalOrientation());\n var buttonsResponsiveSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: buttons_responsive_sm;\\n @media (max-width: \", \") {\\n \", \";\\n }\\n \"])), sysSizeMediaSm, verticalOrientation());\n var buttonsResponsiveMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: buttons_responsive_md;\\n @media (max-width: \", \") {\\n \", \";\\n }\\n \"])), sysSizeMediaMd, verticalOrientation());\n var verticalButtons = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: buttons_vertical;\\n margin-top: 0;\\n display: grid;\\n grid-auto-rows: 1fr;\\n gap: \", \";\\n \", \";\\n \"])), sysSpaceMd, verticalOrientation());\n var groupLabel = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: group_label;\\n \", \";\\n display: block;\\n color: \", \";\\n margin-bottom: \", \";\\n \"])), body(), sysColorBackgroundHighContrast, sysSpaceMd);\n var helperText = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: helper_text;\\n \", \";\\n display: block;\\n list-style: none; // In case it's a list of helper texts\\n padding-left: 0;\\n margin: \", \" 0 0 0;\\n \"])), caption({\n color: sysColorBackgroundMediumContrast\n }), sysSpaceSm);\n var errorText = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\n label: error_text;\\n \", \";\\n display: flex;\\n align-items: center;\\n margin-top: \", \";\\n margin-bottom: 0;\\n \"])), caption({\n color: sysColorBackgroundMediumContrast\n }), sysSpaceXs);\n var errorIcon = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([\"\\n label: error_icon;\\n color: \", \";\\n margin-right: \", \";\\n margin-left: initial;\\n [dir='rtl'] & {\\n margin-left: \", \";\\n margin-right: initial;\\n }\\n \"])), sysColorErrorMain, sysSpaceXs, sysSpaceXs);\n var centerButtons = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([\"\\n label: center;\\n justify-content: center;\\n \"])));\n var justifyButtons = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([\"\\n label: justify;\\n justify-content: stretch;\\n \"])));\n var control = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([\"\\n label: control;\\n position: absolute;\\n clip: rect(0, 0, 0, 0);\\n pointer-events: none;\\n /* We're hiding these so no need to use rems */\\n width: 1px;\\n height: 1px;\\n &:focus + label {\\n outline: none;\\n border-width: \", \";\\n padding: \", \";\\n &:hover {\\n border: \", \" solid \", \";\\n }\\n &:after {\\n \", \";\\n }\\n \", \";\\n }\\n &:checked + label {\\n background-color: \", \";\\n color: \", \";\\n -webkit-text-stroke-width: inherit;\\n z-index: 1;\\n span {\\n color: \", \";\\n }\\n div {\\n color: \", \";\\n }\\n &:hover {\\n border-color: \", \";\\n }\\n }\\n \"])), sysBorderThicknessNormal, selectionGroupLabelPadding, sysBorderThicknessNormal, sysColorSecondaryMain, borderAfterStyles, focusStyles.focusOffsetElement, sysColorPrimaryMain, sysColorBackgroundSurface, sysColorBackgroundSurface, sysColorBackgroundSurface, sysColorBackgroundSurface);\n var primaryLabelWhenFocusedAndChecked = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral([\"\\n label: primary_label_when_focused_and_checked;\\n input:checked:focus + label:after {\\n border: \", \" solid\\n \", \";\\n }\\n \"])), selectionGroupFocusBorderWidthInner, sysColorPrimaryMain);\n var label = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral([\"\\n label: label;\\n \", \";\\n \", \";\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n background-color: \", \";\\n padding: \", \";\\n margin-top: \", \";\\n margin-right: \", \";\\n text-align: center;\\n cursor: pointer;\\n user-select: none;\\n border: \", \" solid \", \";\\n border-radius: \", \";\\n position: relative;\\n transition: color \", \" ease,\\n background-color \", \" ease,\\n border-color \", \" ease;\\n min-height: \", \";\\n min-width: \", \";\\n &:hover {\\n background: \", \";\\n border-color: \", \";\\n }\\n [dir='rtl'] & {\\n margin-right: 0;\\n margin-left: \", \";\\n }\\n \"])), body(), elevationStyles.level1, sysColorBackgroundSurface, selectionGroupLabelPadding, sysSpaceMd, sysSpaceMd, sysBorderThicknessNormal, sysColorBackgroundSurface, selectionGroupBorderRadius, sysMotionDurationAction, sysMotionDurationAction, sysMotionDurationAction, '3.75rem', '5.125rem', sysColorBackgroundSurface, sysColorSecondaryMain, sysSpaceMd);\n var secondaryLabelVertical = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral([\"\\n label: secondary_label_vertical;\\n text-align: left;\\n [dir='rtl'] & {\\n text-align: right;\\n }\\n \"])));\n var verticalLabel = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral([\"\\n label: label_vertical;\\n margin-right: 0;\\n margin-top: 0;\\n \"])));\n var justifyLabel = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral([\"\\n label: label_justify;\\n flex: 1 0 auto;\\n \"])));\n var secondary = css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral([\"\\n label: secondary;\\n input:checked + label {\\n \", \";\\n &:after {\\n \", \";\\n border: \", \" solid \", \";\\n }\\n &:hover {\\n border: \", \" solid \", \";\\n }\\n span {\\n color: \", \";\\n }\\n }\\n input:focus + label:after {\\n border-color: \", \";\\n }\\n \"])), secondaryStyle(), borderAfterStyles, sysBorderThicknessFocus, sysColorSecondaryMain, sysBorderThicknessNormal, sysColorSecondaryMain, sysColorSecondaryMain, sysColorSecondaryMain);\n var secondaryLabelTwo = css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral([\"\\n label: secondary_label_two;\\n \", \";\\n \"])), caption({\n color: sysColorBackgroundMediumContrast\n }));\n var errorLabel = css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral([\"\\n label: error_label;\\n border-width: \", \";\\n background-color: \", \";\\n border-color: \", \";\\n padding: \", \";\\n \"])), sysBorderThicknessEmphasis, sysColorBackgroundSurface, sysColorErrorMain, selectionGroupErrorLabelPadding);\n var errorLabelWhenChecked = css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral([\"\\n label: error_label_when_checked;\\n input:checked + label {\\n label: label_error_when_checked;\\n padding: \", \";\\n border: \", \" solid \", \";\\n z-index: 1;\\n &:hover {\\n border: \", \" solid \", \";\\n }\\n &:after {\\n border: none;\\n }\\n }\\n \"])), selectionGroupErrorSelectedLabelPadding, sysBorderThicknessFocus, sysColorErrorMain, sysBorderThicknessFocus, sysColorErrorMain);\n var errorLabelWhenFocus = css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral([\"\\n label: error_label_when_focus;\\n input:focus + label {\\n padding: \", \";\\n border: \", \" solid \", \";\\n &:hover {\\n border-color: \", \";\\n border-width: \", \";\\n }\\n &:after {\\n border: none;\\n }\\n }\\n \"])), selectionGroupErrorLabelPadding, sysBorderThicknessEmphasis, sysColorErrorMain, sysColorErrorMain, sysBorderThicknessEmphasis);\n return {\n base: base,\n buttons: buttons,\n buttonsResponsiveXs: buttonsResponsiveXs,\n buttonsResponsiveSm: buttonsResponsiveSm,\n buttonsResponsiveMd: buttonsResponsiveMd,\n verticalButtons: verticalButtons,\n centerButtons: centerButtons,\n justifyButtons: justifyButtons,\n groupLabel: groupLabel,\n helperText: helperText,\n errorText: errorText,\n errorIcon: errorIcon,\n control: control,\n label: label,\n verticalLabel: verticalLabel,\n justifyLabel: justifyLabel,\n primaryLabelWhenFocusedAndChecked: primaryLabelWhenFocusedAndChecked,\n secondary: secondary,\n secondaryLabelTwo: secondaryLabelTwo,\n errorLabel: errorLabel,\n errorLabelWhenChecked: errorLabelWhenChecked,\n errorLabelWhenFocus: errorLabelWhenFocus,\n secondaryLabelVertical: secondaryLabelVertical\n };\n}\nvar FieldGroupMessage = function (_ref) {\n var errorText = _ref.errorText,\n errorIconAriaLabel = _ref.errorIconAriaLabel,\n helperText = _ref.helperText,\n msgId = _ref.msgId;\n var tokens = useTheme(); // Fetch tokens from Emotion context\n\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]); // Get either the error message or helper text or... nothing\n\n return errorText && jsx(\"p\", {\n css: _styles.errorText,\n id: msgId,\n \"data-ppui\": \"true\"\n }, jsx(CriticalIcon, {\n css: _styles.errorIcon,\n size: \"sm\",\n role: \"img\",\n \"aria-label\": errorIconAriaLabel,\n \"data-ppui\": \"true\"\n }), errorText) || helperText && jsx(\"p\", {\n css: _styles.helperText,\n id: msgId,\n \"data-ppui\": \"true\"\n }, helperText) || null;\n};\nvar _excluded = [\"value\", \"label\", \"secondaryLabel\", \"id\", \"className\", \"onMouseOver\"],\n _excluded2 = [\"className\", \"errorText\", \"errorIconAriaLabel\", \"helperText\", \"id\", \"label\", \"hideLabel\", \"name\", \"value\", \"align\", \"responsive\", \"secondary\", \"options\", \"onChange\", \"alignContent\"];\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\nvar renderSingleButtons = function (options, name, inputValue, onChange, error, msgId, align, _styles, alignContent, rest) {\n if (!options.length) {\n return jsx(\"em\", {\n \"data-ppui\": \"true\"\n }, \"No options to choose from\");\n }\n return options.map(function (_ref, index) {\n var value = _ref.value,\n label = _ref.label,\n secondaryLabel = _ref.secondaryLabel,\n _ref$id = _ref.id,\n id = _ref$id === void 0 ? \"selection_\".concat(name, \"_\").concat(value) : _ref$id,\n className = _ref.className,\n onMouseOver = _ref.onMouseOver,\n optionRest = _objectWithoutProperties(_ref, _excluded);\n var checked = value === inputValue;\n var valueProps = onChange ? {\n onChange: onChange,\n value: value,\n checked: checked\n } : {\n value: value,\n defaultChecked: checked\n };\n var otherInputAttr = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, msgId && index === 0 && {\n 'aria-describedby': msgId\n }), error && {\n 'aria-invalid': true\n }), valueProps), rest), optionRest);\n var labelCSS = [_styles.label, align === 'vertical' && alignContent === 'left' && _styles.secondaryLabelVertical, error && _styles.errorLabel, align && _styles[align + 'Label']];\n return jsx(React.Fragment, {\n key: index\n }, jsx(\"input\", _extends({\n type: \"radio\",\n name: name,\n id: id,\n css: _styles.control\n }, otherInputAttr, {\n \"data-ppui\": \"true\"\n })), jsx(\"label\", _extends({\n className: className,\n css: labelCSS\n }, {\n htmlFor: id,\n onMouseOver: onMouseOver\n }, {\n \"data-ppui\": \"true\"\n }), label, secondaryLabel && jsx(CaptionText, _extends({\n css: _styles.secondaryLabelTwo\n }, typeof secondaryLabel === 'string' ? {\n as: 'span'\n } : null, align === 'vertical' ? {\n clampAtLine: 3\n } : null, {\n \"data-ppui\": \"true\"\n }), secondaryLabel)));\n });\n};\nvar SingleSelectionGroup = function (_ref2) {\n var className = _ref2.className,\n errorText = _ref2.errorText,\n _ref2$errorIconAriaLa = _ref2.errorIconAriaLabel,\n errorIconAriaLabel = _ref2$errorIconAriaLa === void 0 ? 'Error' : _ref2$errorIconAriaLa,\n helperText = _ref2.helperText,\n _ref2$id = _ref2.id,\n id = _ref2$id === void 0 ? uniqueId('SelectionGroup_') : _ref2$id,\n label = _ref2.label,\n hideLabel = _ref2.hideLabel,\n _ref2$name = _ref2.name,\n name = _ref2$name === void 0 ? 'singleSelect' : _ref2$name,\n _ref2$value = _ref2.value,\n value = _ref2$value === void 0 ? '' : _ref2$value,\n align = _ref2.align,\n responsive = _ref2.responsive,\n secondary = _ref2.secondary,\n _ref2$options = _ref2.options,\n options = _ref2$options === void 0 ? [] : _ref2$options,\n onChange = _ref2.onChange,\n _ref2$alignContent = _ref2.alignContent,\n alignContent = _ref2$alignContent === void 0 ? 'center' : _ref2$alignContent,\n rest = _objectWithoutProperties(_ref2, _excluded2);\n var tokens = useTheme(); // Fetch tokens from Emotion context\n\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var error = !!errorText;\n var msgId = errorText && \"errorMessage_\".concat(id) || helperText && \"helperMessage_\".concat(id);\n var containerCSS = [_styles.base, secondary && _styles.secondary];\n var buttonBarCSS = [_styles.buttons,\n //@ts-ignore\n align && _styles[align + 'Buttons'], !error && !secondary && _styles.primaryLabelWhenFocusedAndChecked, error && _styles.errorLabelWhenFocus, error && _styles.errorLabelWhenChecked, responsive &&\n // @ts-ignore\n _styles['buttonsResponsive' + responsive.charAt(0).toUpperCase() + responsive.charAt(1)]];\n return (\n //@ts-ignore\n jsx(\"fieldset\", _extends({\n className: className,\n css: containerCSS,\n \"aria-label\": hideLabel ? label : null,\n \"data-ppui-info\": \"selection-group_4.6.5\"\n }, rest), !hideLabel && jsx(\"legend\", {\n css: _styles.groupLabel,\n \"data-ppui\": \"true\"\n }, label), jsx(\"div\", {\n css: buttonBarCSS,\n \"data-ppui\": \"true\"\n }, renderSingleButtons(options, name, value, onChange, error, msgId, align, _styles, alignContent, rest)), jsx(FieldGroupMessage, {\n errorText: errorText,\n errorIconAriaLabel: errorIconAriaLabel,\n helperText: helperText,\n msgId: msgId,\n \"data-ppui\": \"true\"\n }))\n );\n};\nvar _excluded$1 = [\"value\", \"label\", \"secondaryLabel\", \"name\", \"className\", \"checked\", \"onChange\", \"id\", \"onMouseOver\"],\n _excluded2$1 = [\"className\", \"errorText\", \"errorIconAriaLabel\", \"helperText\", \"id\", \"label\", \"hideLabel\", \"align\", \"responsive\", \"secondary\", \"options\", \"onChange\", \"alignContent\"];\nfunction ownKeys$1(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread$1(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\nvar renderMultiButtons = function (options, masterOnChange, error, msgId, align, _styles, alignContent, rest) {\n if (!options.length) {\n return jsx(\"em\", {\n \"data-ppui\": \"true\"\n }, \"No options to choose from\");\n }\n return options.map(function (_ref, index) {\n var value = _ref.value,\n label = _ref.label,\n secondaryLabel = _ref.secondaryLabel,\n name = _ref.name,\n className = _ref.className,\n checked = _ref.checked,\n _ref$onChange = _ref.onChange,\n onChange = _ref$onChange === void 0 ? masterOnChange : _ref$onChange,\n _ref$id = _ref.id,\n id = _ref$id === void 0 ? \"selection_\".concat(name) : _ref$id,\n onMouseOver = _ref.onMouseOver,\n optionRest = _objectWithoutProperties(_ref, _excluded$1);\n var valueProps = onChange ? {\n onChange: onChange,\n value: value,\n checked: checked\n } : {\n value: value,\n defaultChecked: checked\n };\n var otherInputAttr = _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, msgId && index === 0 && {\n 'aria-describedby': msgId\n }), error && {\n 'aria-invalid': true\n }), valueProps), rest), optionRest);\n var labelCSS = [_styles.label, align === 'vertical' && alignContent === 'left' && _styles.secondaryLabelVertical, error && _styles.errorLabel, align && _styles[align + 'Label']];\n return jsx(React.Fragment, {\n key: index\n }, jsx(\"input\", _extends({\n type: \"checkbox\",\n name: name,\n id: id,\n css: _styles.control\n }, otherInputAttr, {\n \"data-ppui\": \"true\"\n })), jsx(\"label\", _extends({\n className: className,\n css: labelCSS\n }, {\n htmlFor: id,\n onMouseOver: onMouseOver\n }, {\n \"data-ppui\": \"true\"\n }), label, secondaryLabel && jsx(CaptionText, _extends({\n css: _styles.secondaryLabelTwo\n }, typeof secondaryLabel === 'string' ? {\n as: 'span'\n } : null, align === 'vertical' ? {\n clampAtLine: 3\n } : null, {\n \"data-ppui\": \"true\"\n }), secondaryLabel)));\n });\n};\nvar MultiSelectionGroup = function (_ref2) {\n var className = _ref2.className,\n errorText = _ref2.errorText,\n _ref2$errorIconAriaLa = _ref2.errorIconAriaLabel,\n errorIconAriaLabel = _ref2$errorIconAriaLa === void 0 ? 'Error' : _ref2$errorIconAriaLa,\n helperText = _ref2.helperText,\n _ref2$id = _ref2.id,\n id = _ref2$id === void 0 ? uniqueId('SelectionGroup_') : _ref2$id,\n _ref2$label = _ref2.label,\n label = _ref2$label === void 0 ? 'label' : _ref2$label,\n hideLabel = _ref2.hideLabel,\n align = _ref2.align,\n responsive = _ref2.responsive,\n secondary = _ref2.secondary,\n _ref2$options = _ref2.options,\n options = _ref2$options === void 0 ? [] : _ref2$options,\n onChange = _ref2.onChange,\n _ref2$alignContent = _ref2.alignContent,\n alignContent = _ref2$alignContent === void 0 ? 'center' : _ref2$alignContent,\n rest = _objectWithoutProperties(_ref2, _excluded2$1);\n var tokens = useTheme(); // Fetch tokens from Emotion context\n\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var error = !!errorText;\n var msgId = errorText && \"errorMessage_\".concat(id) || helperText && \"helperMessage_\".concat(id);\n var containerCSS = [_styles.base, secondary && _styles.secondary];\n var buttonBarCSS = [_styles.buttons,\n //@ts-ignore\n align && _styles[align + 'Buttons'], !error && !secondary && _styles.primaryLabelWhenFocusedAndChecked, error && _styles.errorLabelWhenFocus, error && _styles.errorLabelWhenChecked, responsive &&\n // @ts-ignore\n _styles['buttonsResponsive' + responsive.charAt(0).toUpperCase() + responsive.charAt(1)]];\n return (\n //@ts-ignore\n jsx(\"fieldset\", _extends({\n className: className,\n css: containerCSS,\n \"aria-label\": hideLabel ? label : null,\n \"data-ppui-info\": \"selection-group_4.6.5\"\n }, rest), !hideLabel && jsx(\"legend\", {\n css: _styles.groupLabel,\n \"data-ppui\": \"true\"\n }, label), jsx(\"div\", {\n css: buttonBarCSS,\n \"data-ppui\": \"true\"\n }, renderMultiButtons(options, onChange, error, msgId, align, _styles, alignContent, rest)), jsx(FieldGroupMessage, {\n errorText: errorText,\n errorIconAriaLabel: errorIconAriaLabel,\n helperText: helperText,\n msgId: msgId,\n \"data-ppui\": \"true\"\n }))\n );\n};\nexport { MultiSelectionGroup, SingleSelectionGroup, styles as selectionGroupStyles };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { forwardRef, useMemo } from 'react';\nimport { CheckmarkSmIcon } from '@paypalcorp/pp-react-icons';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { math } from 'polished';\nimport { textStyles } from '@paypalcorp/pp-react-text';\nimport { devWarning, utilStyles, uniqueId } from '@paypalcorp/pp-react-utils';\nvar _excluded = [\"as\", \"children\", \"className\"];\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\nvar IfNotEmpty = function (_ref) {\n var _ref$as = _ref.as,\n as = _ref$as === void 0 ? 'span' : _ref$as,\n children = _ref.children,\n className = _ref.className,\n rest = _objectWithoutProperties(_ref, _excluded);\n return children ? React.createElement(as, _objectSpread({\n className: className\n }, rest), children) : null;\n};\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysBorderRadiusInteractive = tokens.sysBorderRadiusInteractive,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorSelectedMain = tokens.sysColorSelectedMain,\n sysColorSelectedMainHover = tokens.sysColorSelectedMainHover,\n sysColorSelectedContrast = tokens.sysColorSelectedContrast,\n sysColorStructureBorderHighContrast = tokens.sysColorStructureBorderHighContrast,\n sysColorUnselectedMainHover = tokens.sysColorUnselectedMainHover,\n sysColorUnselectedMain = tokens.sysColorUnselectedMain,\n sysMotionDurationMoveSmall = tokens.sysMotionDurationMoveSmall,\n sysSizeCircleSm = tokens.sysSizeCircleSm,\n sysSpaceXs = tokens.sysSpaceXs,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceXl = tokens.sysSpaceXl;\n var _textStyles = textStyles(tokens),\n textBody = _textStyles.body,\n caption = _textStyles.caption;\n var _utilStyles = utilStyles(tokens),\n focusStyles = _utilStyles.focusStyles,\n variables = _utilStyles.variables;\n var switchIndicatorWidth = '3.5rem';\n var switchBorderRadius = math(\"\".concat(sysSizeCircleSm, \" / 2\"));\n var switchTranslateWidth = math(\"\".concat(switchIndicatorWidth, \" - \").concat(sysSizeCircleSm));\n var base = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: switch_base;\\n position: relative;\\n text-align: left;\\n\\n [dir='rtl'] & {\\n text-align: right;\\n }\\n \"])));\n var label = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: label;\\n \", \";\\n display: block;\\n margin-bottom: \", \";\\n\\n [dir='rtl'] & {\\n padding-right: 0;\\n padding-left: \", \";\\n }\\n \"])), textBody(), sysSpaceMd, sysSpaceXl);\n var secondaryLabel = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: secondary_label;\\n display: block;\\n \", \";\\n \"])), textBody({\n color: sysColorBackgroundMediumContrast\n }));\n var inline = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: inline;\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n width: 100%;\\n \"])));\n var inlineLabel = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: inline_label;\\n flex: 1 1 0;\\n text-align: start;\\n padding-right: \", \";\\n margin-bottom: 0;\\n\\n [dir='rtl'] & {\\n padding-right: 0;\\n padding-left: \", \";\\n }\\n \"])), sysSpaceXl, sysSpaceXl);\n var inlineHelperText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: inline_helper_text;\\n flex: 0 0 100%;\\n \"])));\n var container = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: container;\\n width: \", \";\\n height: \", \";\\n position: relative;\\n \"])), switchIndicatorWidth, sysSizeCircleSm);\n var state = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: state;\\n display: inline-block;\\n width: \", \";\\n height: \", \";\\n cursor: pointer;\\n border: \", \" solid\\n \", \";\\n border-radius: \", \";\\n background-color: \", \";\\n\\n > span {\\n visibility: hidden;\\n }\\n \"])), switchIndicatorWidth, sysSizeCircleSm, sysBorderThicknessNormal, sysColorStructureBorderHighContrast, switchBorderRadius, sysColorUnselectedMain);\n var handler = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: handler;\\n position: absolute;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n pointer-events: none;\\n top: 0;\\n left: 0;\\n width: \", \";\\n height: \", \";\\n background-color: \", \";\\n border-radius: \", \";\\n border: \", \" solid\\n \", \";\\n transition: \", \" \", \";\\n \"])), sysSizeCircleSm, sysSizeCircleSm, sysColorSelectedContrast, sysBorderRadiusInteractive, sysBorderThicknessNormal, sysColorStructureBorderHighContrast, sysMotionDurationMoveSmall, variables.ppuiEaseMoveSmall);\n var selectedIcon = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: selected_icon;\\n display: none;\\n color: \", \";\\n \"])), sysColorSelectedMain);\n var control = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: control;\\n opacity: 0;\\n position: absolute;\\n\\n &:focus ~ label {\\n \", \"\\n }\\n\\n &:hover ~ label {\\n background-color: \", \";\\n }\\n\\n &:checked ~ label {\\n background-color: \", \";\\n border: \", \" solid \", \";\\n }\\n\\n &:checked ~ span {\\n transform: translateX(\", \");\\n border: \", \" solid \", \";\\n }\\n\\n &:checked + label + span > span:first-of-type {\\n display: inline-block;\\n }\\n\\n &:checked:hover ~ label {\\n background-color: \", \";\\n }\\n \"])), focusStyles.focusOffsetElement, sysColorUnselectedMainHover, sysColorSelectedMain, sysBorderThicknessNormal, sysColorSelectedMain, switchTranslateWidth, sysBorderThicknessNormal, sysColorSelectedMain, sysColorSelectedMainHover);\n var helperText = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\n label: helper_text;\\n margin-top: \", \";\\n list-style: none;\\n padding-left: 0;\\n \", \"\\n \"])), sysSpaceXs, caption({\n color: sysColorBackgroundMediumContrast\n }));\n return {\n base: base,\n label: label,\n secondaryLabel: secondaryLabel,\n inline: inline,\n inlineLabel: inlineLabel,\n inlineHelperText: inlineHelperText,\n container: container,\n state: state,\n control: control,\n handler: handler,\n selectedIcon: selectedIcon,\n helperText: helperText\n };\n}\nvar _excluded$1 = [\"checked\", \"inline\", \"className\", \"inputClassName\", \"labelClassName\", \"helperText\", \"hideLabel\", \"id\", \"label\", \"secondaryLabel\", \"onChange\", \"required\", \"value\"];\nvar Switch = forwardRef(function (_ref, ref) {\n var checked = _ref.checked,\n inline = _ref.inline,\n className = _ref.className,\n inputClassName = _ref.inputClassName,\n labelClassName = _ref.labelClassName,\n helperText = _ref.helperText,\n hideLabel = _ref.hideLabel,\n _ref$id = _ref.id,\n id = _ref$id === void 0 ? uniqueId('Switch_') : _ref$id,\n label = _ref.label,\n secondaryLabel = _ref.secondaryLabel,\n onChange = _ref.onChange,\n required = _ref.required,\n value = _ref.value,\n rest = _objectWithoutProperties(_ref, _excluded$1);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var containerCSSVal = [_styles.base, inline && _styles.inline];\n var labelCssVal = [_styles.label, inline && _styles.inlineLabel];\n var helperCssVal = [_styles.helperText, inline && _styles.inlineHelperText];\n var messageId = \"message_\".concat(id);\n var labelId = \"label_\".concat(id);\n var valueProps = onChange ? {\n onChange: onChange,\n checked: checked\n } : {\n defaultChecked: checked\n };\n return jsx(\"div\", {\n css: containerCSSVal,\n className: className,\n \"data-ppui-info\": \"switch_3.6.4\"\n }, !hideLabel && jsx(\"span\", {\n id: labelId,\n css: labelCssVal,\n \"data-ppui\": \"true\"\n }, label, jsx(IfNotEmpty, {\n as: \"div\",\n css: _styles.secondaryLabel,\n \"data-ppui\": \"true\"\n }, secondaryLabel)), jsx(\"div\", {\n css: _styles.container,\n \"data-ppui\": \"true\"\n }, jsx(\"input\", _extends({}, helperText ? {\n 'aria-describedby': messageId\n } : null, !hideLabel ? {\n 'aria-labelledby': labelId\n } : {}, {\n //@ts-ignore\n \"aria-label\": hideLabel ? label : null,\n css: _styles.control,\n className: inputClassName,\n id: id,\n role: \"switch\",\n type: \"checkbox\",\n value: value,\n ref: ref\n }, valueProps, rest, {\n \"data-ppui\": \"true\"\n })), jsx(\"label\", {\n css: _styles.state,\n className: labelClassName,\n htmlFor: id,\n \"data-ppui\": \"true\"\n }, jsx(\"span\", {\n \"data-ppui\": \"true\"\n }, label)), jsx(\"span\", {\n css: _styles.handler,\n \"data-ppui\": \"true\"\n }, jsx(CheckmarkSmIcon, {\n size: \"xs\",\n css: _styles.selectedIcon,\n \"aria-hidden\": \"true\",\n \"data-ppui\": \"true\"\n }))), function renderMessage(help, msgId) {\n return help && jsx(\"div\", {\n css: helperCssVal,\n id: msgId,\n \"data-ppui\": \"true\"\n }, help) || null;\n }(helperText, messageId));\n});\nexport { Switch, styles as switchStyles };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { math, rgba } from 'polished';\nimport { textStyles } from '@paypalcorp/pp-react-text';\nimport { devWarning, utilStyles, throttle, hasNavigator, KeyboardCode } from '@paypalcorp/pp-react-utils';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport { IconButton } from '@paypalcorp/pp-react-icon-button';\nimport { ArrowLeftIcon, ArrowRightIcon } from '@paypalcorp/pp-react-icons';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysBorderThicknessEmphasis = tokens.sysBorderThicknessEmphasis,\n sysSpaceXl = tokens.sysSpaceXl,\n sysColorStructureFocus = tokens.sysColorStructureFocus,\n sysMotionDurationMoveSmall = tokens.sysMotionDurationMoveSmall,\n sysColorPrimaryMain = tokens.sysColorPrimaryMain,\n sysSizeFieldSm = tokens.sysSizeFieldSm,\n sysSpaceLg = tokens.sysSpaceLg,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceJumbo = tokens.sysSpaceJumbo,\n sysBorderRadiusLg = tokens.sysBorderRadiusLg,\n sysColorPrimaryMainHover = tokens.sysColorPrimaryMainHover,\n sysColorPrimaryMainActive = tokens.sysColorPrimaryMainActive,\n sysSizeMediaSm = tokens.sysSizeMediaSm,\n sysSizeTapTargetDefault = tokens.sysSizeTapTargetDefault;\n var _utilStyles = utilStyles(tokens),\n elevationStyles = _utilStyles.elevationStyles,\n focusStyles = _utilStyles.focusStyles,\n variables = _utilStyles.variables;\n var _textStyles = textStyles(tokens),\n textBody = _textStyles.body;\n var tabPaddingLeft = math(\"\".concat(sysSpaceJumbo, \" + \").concat(sysSpaceXl));\n var noDisplay = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: none;\\n \"])));\n var blockDisplay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n display: block;\\n \"])));\n var tabWrapperBase = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: tabs_wrapper_base;\\n position: relative;\\n \"])));\n var base = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: tabs_base;\\n overflow-y: hidden;\\n white-space: nowrap;\\n position: relative;\\n scrollbar-width: none;\\n padding: \", \" \", \" \", \" \", \";\\n &::-webkit-scrollbar {\\n \", \"\\n }\\n \"])), sysSpaceXl, sysSpaceXl, sysSpaceXl, tabPaddingLeft, noDisplay);\n var tabsWrapper = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: tabs_wrapper;\\n display: flex;\\n float: left;\\n min-height: \", \";\\n align-items: center;\\n width: max-content;\\n position: relative;\\n [dir='rtl'] & {\\n float: right;\\n }\\n \"])), sysSizeFieldSm);\n var tabsCenter = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: tabs_center;\\n min-width: 100%;\\n width: auto;\\n min-height: \", \";\\n justify-content: center;\\n @media (max-width: \", \") {\\n width: auto;\\n justify-content: flex-start;\\n }\\n \"])), sysSizeFieldSm, sysSizeMediaSm);\n var tabsBtn = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: tabs_btn;\\n \", \"\\n padding: \", \" \", \";\\n min-height: \", \";\\n min-width: \", \";\\n max-width: \", \";\\n margin-inline-end: \", \";\\n outline: none;\\n position: relative;\\n border: none;\\n background-color: transparent;\\n white-space: normal;\\n word-wrap: break-word;\\n text-decoration: none;\\n flex-shrink: 0;\\n \", \"\\n align-items: center;\\n cursor: pointer;\\n border-radius: \", \";\\n z-index: 1;\\n &:last-of-type {\\n margin-inline-end: 0;\\n }\\n &:before {\\n left: 0;\\n bottom: 0;\\n right: 0;\\n position: relative;\\n \", \"\\n content: attr(data-button-text);\\n height: 0;\\n overflow: hidden;\\n visibility: hidden;\\n pointer-events: none;\\n }\\n &:after {\\n content: '';\\n position: absolute;\\n inset: 0;\\n border: none;\\n border-radius: \", \";\\n pointer-events: none;\\n }\\n &:hover {\\n text-decoration: none;\\n\\n &:after {\\n border: \", \" solid \", \";\\n }\\n }\\n &:active {\\n border-radius: \", \";\\n background: \", \";\\n text-decoration: none;\\n &:after {\\n border: \", \" solid \", \";\\n }\\n }\\n &:focus {\\n outline: none;\\n text-decoration: none;\\n \", \"\\n transform: none;\\n transition: none;\\n }\\n &:visited {\\n text-decoration: none;\\n }\\n \"])), textBody(), sysSpaceMd, sysSpaceLg, sysSizeFieldSm, '5.25rem', '11.5rem', sysSpaceLg, blockDisplay, math(\"\".concat(sysBorderRadiusLg, \" * 2\")), blockDisplay, math(\"\".concat(sysBorderRadiusLg, \" * 2\")), sysBorderThicknessEmphasis, sysColorPrimaryMainHover, math(\"\".concat(sysBorderRadiusLg, \" * 2\")), sysColorBackgroundSurface, sysBorderThicknessEmphasis, sysColorPrimaryMainActive, focusStyles.focusOffsetElement);\n var tabSlider = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: slider;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 0;\\n height: 100%;\\n \", \"\\n -webkit-text-stroke-width: 0.0421875rem;\\n border-radius: \", \";\\n transition: all \", \" \", \";\\n \"])), elevationStyles.level1, math(\"\".concat(sysBorderRadiusLg, \" * 2\")), sysMotionDurationMoveSmall, variables.ppuiEaseMoveSmall);\n var tabsSelectedBtn = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: tab_selected;\\n -webkit-text-stroke-width: 0.0421875rem;\\n color: \", \";\\n &:hover {\\n text-decoration: none;\\n &:after {\\n border: \", \" solid \", \";\\n }\\n }\\n \"])), sysColorPrimaryMain, sysBorderThicknessEmphasis, sysColorPrimaryMainHover);\n var tabsScrollBtn = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: tabs_scroll_btn;\\n background-color: \", \";\\n position: absolute;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n opacity: 0;\\n visibility: hidden;\\n width: \", \";\\n height: \", \";\\n top: 0;\\n \"])), sysColorBackgroundSurface, sysSizeTapTargetDefault, math(\"\".concat(sysSizeTapTargetDefault, \" * 2\")));\n var tabsScrollBtnLeft = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: tabs_scroll_btn_left;\\n left: 0;\\n background: linear-gradient(\\n 90deg,\\n \", \" 47.45%,\\n \", \" 100%\\n );\\n z-index: 1;\\n \"])), sysColorBackgroundSurface, rgba(255, 255, 255, 0));\n var tabsScrollBtnRight = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\n label: tabs_scroll_btn_right;\\n right: 0;\\n background: linear-gradient(\\n 270deg,\\n \", \" 47.45%,\\n \", \" 100%\\n );\\n z-index: 1;\\n \"])), sysColorBackgroundSurface, rgba(255, 255, 255, 0));\n var tabsScrollBtnVisible = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([\"\\n label: btn_visible;\\n visibility: visible;\\n opacity: 1;\\n transition: visibility \", \",\\n opacity \", \";\\n \"])), sysMotionDurationMoveSmall, sysMotionDurationMoveSmall);\n var tabsArrowIcon = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([\"\\n label: tabs_arrow_icon;\\n color: \", \";\\n background: \", \";\\n \", \"\\n \"])), sysColorPrimaryMain, sysColorBackgroundSurface, elevationStyles.level1);\n var tabContent = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([\"\\n label: tabs_content;\\n margin: 0 \", \" 0 \", \";\\n\\n &:focus {\\n outline: none;\\n }\\n &[aria-hidden='true'] {\\n \", \"\\n }\\n \"])), sysSpaceXl, math(\"\".concat(sysSpaceXl, \" * 3\")), noDisplay);\n var tabContentFocus = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([\"\\n label: tabs_content_focus;\\n &:focus {\\n box-shadow: 0 0 \", \"\\n \", \" \", \";\\n }\\n \"])), sysBorderThicknessEmphasis, sysBorderThicknessEmphasis, sysColorStructureFocus);\n var hideBtn = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral([\"\\n label: no_scroll_buttons;\\n \", \"\\n \"])), noDisplay);\n var tabContentVisible = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral([\"\\n label: tab_content_visible;\\n \", \"\\n \"])), blockDisplay);\n var tabContentHidden = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral([\"\\n label: tab_content_hidden;\\n \", \"\\n \"])), noDisplay);\n var navBackground = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral([\"\\n label: tab_background;\\n \", \"\\n background: \", \";\\n \"])), elevationStyles.level3, sysColorBackgroundSurface);\n return {\n tabWrapperBase: tabWrapperBase,\n base: base,\n tabsWrapper: tabsWrapper,\n tabsCenter: tabsCenter,\n tabsBtn: tabsBtn,\n tabSlider: tabSlider,\n tabsSelectedBtn: tabsSelectedBtn,\n tabsScrollBtn: tabsScrollBtn,\n tabsScrollBtnLeft: tabsScrollBtnLeft,\n tabsScrollBtnRight: tabsScrollBtnRight,\n tabsScrollBtnVisible: tabsScrollBtnVisible,\n tabsArrowIcon: tabsArrowIcon,\n tabContent: tabContent,\n tabContentFocus: tabContentFocus,\n hideBtn: hideBtn,\n tabContentVisible: tabContentVisible,\n tabContentHidden: tabContentHidden,\n navBackground: navBackground\n };\n}\nvar _excluded = [\"id\", \"tabIdx\", \"label\", \"tabGroupId\", \"panelId\", \"selected\", \"onClick\", \"className\"];\nvar Tab = React.forwardRef(function (_ref, ref) {\n var id = _ref.id,\n tabIdx = _ref.tabIdx,\n label = _ref.label,\n tabGroupId = _ref.tabGroupId,\n panelId = _ref.panelId,\n selected = _ref.selected,\n onClick = _ref.onClick,\n className = _ref.className,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var tabStyles = [_styles.tabsBtn, selected && _styles.tabsSelectedBtn];\n var focusable = selected ? 0 : -1;\n var tabId = id || \"\".concat(tabGroupId, \"-tab\").concat(parseInt(tabIdx, 10) + 1);\n return jsx(\"button\", _extends({\n ref: ref,\n \"data-tab-index\": tabIdx,\n id: tabId,\n css: tabStyles,\n className: className,\n \"aria-controls\": panelId,\n \"aria-selected\": selected,\n tabIndex: focusable,\n type: \"button\",\n role: \"tab\"\n }, rest, {\n onClick: onClick,\n \"data-button-text\": label,\n \"data-ppui\": \"true\"\n }), label);\n});\nvar _excluded$1 = [\"id\", \"panelId\", \"label\"];\nvar isRunningOnIEorEdge = function () {\n if (hasNavigator() && (/MSIE 9/i.test(navigator.userAgent) || /MSIE 10/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent))) {\n return true;\n }\n return false;\n};\nvar getRefCurrent = function (myRef) {\n return /* istanbul ignore next */myRef && myRef.current ? myRef.current : null;\n}; // for scrolling with transition\n\nvar SPEED = 25;\nvar DISTANCE = 120;\nvar STEP = 20; // eslint-disable-next-line max-statements\n\nvar Tabs = function (_ref) {\n var _ref$name = _ref.name,\n name = _ref$name === void 0 ? 'TabsGroup' : _ref$name,\n selectedTabIdx = _ref.selectedTabIdx,\n center = _ref.center,\n _ref$tabs = _ref.tabs,\n tabs = _ref$tabs === void 0 ? [] : _ref$tabs,\n onClick = _ref.onClick,\n className = _ref.className,\n tabClassName = _ref.tabClassName,\n tabsWrapperClassName = _ref.tabsWrapperClassName,\n children = _ref.children,\n _ref$scrollLeftLabel = _ref.scrollLeftLabel,\n scrollLeftLabel = _ref$scrollLeftLabel === void 0 ? 'scroll left' : _ref$scrollLeftLabel,\n _ref$scrollRightLabel = _ref.scrollRightLabel,\n scrollRightLabel = _ref$scrollRightLabel === void 0 ? 'scroll right' : _ref$scrollRightLabel,\n keepAlive = _ref.keepAlive,\n lazyLoad = _ref.lazyLoad,\n addBackgroundColor = _ref.addBackgroundColor;\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var navEleRef = useRef();\n var containerEleRef = useRef();\n var prevSelectedTabIdxRef = useRef(0);\n var sliderRef = useRef();\n var tabRef = useRef([]);\n var isTabsFocusedRef = useRef(false);\n var focusedIdxRef = useRef();\n var _useState = useState('none'),\n _useState2 = _slicedToArray(_useState, 2),\n overflowDir = _useState2[0],\n setOverflowDir = _useState2[1];\n var getSelectedTabIdx = function () {\n var index = typeof selectedTabIdx === 'string' ? parseInt(selectedTabIdx, 10) : Math.floor(selectedTabIdx);\n if (!selectedTabIdx || !index || index >= tabs.length || index < 0) {\n return 0;\n }\n return index;\n };\n /* istanbul ignore next */\n\n var determineOverflow = function () {\n var nav = getRefCurrent(navEleRef);\n if (nav) {\n var tabsWrapper = nav.children[0];\n var _scroll = nav.scrollLeft;\n var navRight = Math.floor(nav.getBoundingClientRect().right);\n var tabsRight = Math.floor(tabsWrapper.getBoundingClientRect().right);\n var navLeft = Math.floor(nav.getBoundingClientRect().left);\n var tabsLeft = Math.floor(tabsWrapper.getBoundingClientRect().left);\n if (_scroll === 0 && navRight > tabsRight && tabsLeft > navLeft) {\n setOverflowDir('none');\n return;\n }\n if (tabsLeft < navLeft && navRight < tabsRight) {\n setOverflowDir('both');\n return;\n }\n if (tabsRight > navRight) {\n setOverflowDir('right');\n return;\n }\n if (tabsLeft < navLeft) {\n setOverflowDir('left');\n return;\n }\n } // record that the function was called\n\n var evt = new Event('checkOverflow');\n window.dispatchEvent(evt);\n };\n var getWrapperCurrent = function (w) {\n return /* istanbul ignore next */w && w.current ? w.current : null;\n }; // apply styles to the slider element based on the\n // dimention of the tab\n\n var applySliderStyles = function (element) {\n var _element$offsetParent;\n var slider = getWrapperCurrent(sliderRef);\n slider.style.left = \"\".concat((element === null || element === void 0 ? void 0 : element.getBoundingClientRect().left) - (element === null || element === void 0 ? void 0 : (_element$offsetParent = element.offsetParent) === null || _element$offsetParent === void 0 ? void 0 : _element$offsetParent.getBoundingClientRect().left), \"px\");\n slider.style.width = \"\".concat(element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width, \"px\");\n slider.style.top = \"\".concat(element === null || element === void 0 ? void 0 : element.offsetTop, \"px\");\n slider.style.height = \"\".concat(element === null || element === void 0 ? void 0 : element.offsetHeight, \"px\");\n };\n var offsetFocus = function (offset) {\n var nav = getRefCurrent(navEleRef);\n var tabDomItems = nav.querySelectorAll('[role=\"tab\"]');\n var nextIndex = focusedIdxRef.current + offset;\n var index;\n /* istanbul ignore next */\n\n if (nextIndex === tabs.length) {\n index = 0;\n } else if (nextIndex === -1) {\n index = tabs.length - 1;\n } else {\n index = nextIndex;\n }\n tabDomItems[index].focus();\n tabDomItems[index].scrollIntoView({\n block: 'nearest'\n });\n focusedIdxRef.current = index;\n };\n var keyHandler = function (event) {\n /* istanbul ignore next */\n var KeyCode = new KeyboardCode(event.key || event.keyCode);\n var selectedIndex = getSelectedTabIdx();\n if (KeyCode.IS_ARROW_LEFT) {\n event.preventDefault();\n offsetFocus(-1);\n } else if (KeyCode.IS_ARROW_RIGHT) {\n event.preventDefault();\n offsetFocus(1);\n } else if (KeyCode.IS_ENTER || KeyCode.IS_SPACEBAR) {\n event.preventDefault();\n /* istanbul ignore next */\n\n if (selectedIndex !== focusedIdxRef.current) {\n onClick(event, focusedIdxRef.current);\n }\n }\n };\n var handleFocusOut = function (event) {\n isTabsFocusedRef.current = false;\n var newFocusedItem = event.relatedTarget;\n /* istanbul ignore next */\n\n if (!newFocusedItem || newFocusedItem.parentElement !== event.currentTarget) {\n // @ts-ignore\n document.removeEventListener('keydown', keyHandler, false); // reset focusedIdx to current selected tab\n\n focusedIdxRef.current = getSelectedTabIdx(); // add scroll arrows back when focus is out:\n\n determineOverflow();\n }\n };\n useLayoutEffect(function () {\n var nav = getRefCurrent(navEleRef);\n prevSelectedTabIdxRef.current = getSelectedTabIdx();\n /* istanbul ignore next */\n\n if (isTabsFocusedRef.current) {\n // @ts-ignore\n document.addEventListener('keydown', keyHandler, false);\n }\n nav.firstChild.addEventListener('focusout',\n // @ts-ignore\n handleFocusOut, false);\n return function () {\n // @ts-ignore\n document.removeEventListener('keydown', keyHandler, false);\n nav.firstChild.removeEventListener('focusout',\n // @ts-ignore\n handleFocusOut, false);\n };\n }, [tabs, selectedTabIdx, onClick]);\n useLayoutEffect(function () {\n var container = getRefCurrent(containerEleRef);\n var nav = getRefCurrent(navEleRef);\n var resizeObserver;\n focusedIdxRef.current = getSelectedTabIdx();\n var scrollButtons = container.querySelectorAll(\"[data-id=\\\"scroll-btn\\\"]\");\n if (!isRunningOnIEorEdge()) {\n determineOverflow(); // Check for overflow after window resize:\n\n /* istanbul ignore next */\n\n if (window.ResizeObserver) {\n resizeObserver = new ResizeObserver(function () {\n determineOverflow();\n });\n resizeObserver.observe(nav);\n } // adjust left/right arrow buttons height tof the tabs wrapper.\n\n var tabsWrapper = nav.children[0];\n /* istanbul ignore next */\n\n var btnHeight = (tabsWrapper.offsetHeight + tabsWrapper.offsetTop * 2).toString();\n /* istanbul ignore next */\n\n if (scrollButtons && tabsWrapper.offsetHeight !== scrollButtons[0].offsetHeight) {\n scrollButtons[0].style.height = \"\".concat(btnHeight, \"px\");\n scrollButtons[1].style.height = \"\".concat(btnHeight, \"px\");\n }\n }\n return function () {\n /* istanbul ignore next */\n if (resizeObserver) {\n resizeObserver.disconnect();\n }\n };\n }, []);\n useLayoutEffect(function () {\n // For the first time during initialisation\n focusedIdxRef.current = getSelectedTabIdx();\n /* istanbul ignore next */\n\n var resizeObserver = window.ResizeObserver ? new ResizeObserver(throttle(function () {\n applySliderStyles(tabRef.current[focusedIdxRef.current]);\n }, 100)) : null;\n /* istanbul ignore next */\n\n if (window.ResizeObserver) {\n resizeObserver.observe(containerEleRef.current);\n }\n return function () {\n /* istanbul ignore next */\n if (resizeObserver) {\n resizeObserver.disconnect();\n }\n };\n }, [selectedTabIdx]);\n var handleClick = function (event) {\n var nav = getRefCurrent(navEleRef);\n var tabDomItems = nav.querySelectorAll('[role=\"tab\"]');\n applySliderStyles(event.target);\n isTabsFocusedRef.current = false;\n /* istanbul ignore next */\n\n if (tabDomItems[focusedIdxRef.current]) {\n tabDomItems[focusedIdxRef.current].blur();\n }\n var tabIdxClicked = parseInt(event.currentTarget.getAttribute('data-tab-index'), 10); // This is tested, but coverage not registering it\n\n /* istanbul ignore next */\n\n if (tabIdxClicked) {\n focusedIdxRef.current = tabIdxClicked;\n }\n onClick(event, tabIdxClicked);\n };\n var handleFocus = function (event) {\n isTabsFocusedRef.current = true;\n var prevFocusedItem = event.relatedTarget;\n if (!prevFocusedItem || prevFocusedItem.parentElement !== event.currentTarget) {\n // @ts-ignore\n document.addEventListener('keydown', keyHandler, false); // remove arrows when navigating with keyboard:\n\n setOverflowDir('none');\n }\n };\n var handleTouchScroll = function () {\n var isScrolling;\n window.clearTimeout(isScrolling);\n /* istanbul ignore next */\n\n isScrolling = setTimeout(function () {\n determineOverflow();\n }, 15);\n };\n /* istanbul ignore next */\n\n var scroll = function (direction) {\n var nav = getRefCurrent(navEleRef); // scroll with transition\n\n var scrollAmount = 0;\n var slideTimer = window.setInterval(function () {\n if (direction === 'right') {\n nav.scrollLeft += STEP;\n } else {\n nav.scrollLeft -= STEP;\n }\n scrollAmount += STEP;\n if (scrollAmount >= DISTANCE) {\n window.clearInterval(slideTimer);\n }\n }, SPEED);\n setTimeout(function () {\n determineOverflow();\n }, 150); // record that scroll event was called\n\n var evt = new Event('tabsScrolled');\n window.dispatchEvent(evt);\n };\n var selectedIndex = getSelectedTabIdx();\n var leftScrollCssVal = [_styles.tabsScrollBtn, _styles.tabsScrollBtnLeft, /* istanbul ignore next */\n (overflowDir === 'left' || overflowDir === 'both') && _styles.tabsScrollBtnVisible, isRunningOnIEorEdge() && _styles.hideBtn];\n var rightScrollCssVal = [_styles.tabsScrollBtn, _styles.tabsScrollBtnRight, /* istanbul ignore next */\n (overflowDir === 'right' || overflowDir === 'both') && _styles.tabsScrollBtnVisible, isRunningOnIEorEdge() && _styles.hideBtn];\n var scrollButtonFocus = -1;\n var selectedId;\n var tabItems = tabs.map(function (tab, index) {\n var id = tab.id,\n panelId = tab.panelId,\n label = tab.label,\n otherTabProps = _objectWithoutProperties(tab, _excluded$1); // update animation (only on the selected tab)\n\n if (index === selectedIndex) {\n selectedId = tab.id || \"\".concat(name, \"-tab\").concat(index + 1);\n }\n return jsx(Tab, _extends({\n key: \"\".concat(name, \"-tab\").concat(index + 1),\n id: id,\n ref: function ref(el) {\n return tabRef.current[index] = el;\n },\n tabIdx: index.toString(),\n label: label,\n tabGroupId: name,\n panelId: panelId,\n selected: index === selectedIndex,\n onClick: handleClick,\n className: tabClassName\n }, otherTabProps, {\n \"data-ppui\": \"true\"\n }));\n }); // Get selected tab panel and update selected tab panel props\n\n var tabContentItem;\n if (keepAlive || lazyLoad) {\n tabContentItem = React.Children.toArray(children).map(function (_panel, idx) {\n var isSelected = selectedIndex === idx;\n /* istanbul ignore next */\n\n return React.cloneElement(_panel, {\n hidden: !isSelected,\n tabId: isSelected ? selectedId : undefined,\n visible: keepAlive ? true : isSelected\n });\n });\n } else {\n var tabPanel = React.Children.toArray(children).filter(function (_panel, idx) {\n return selectedIndex === idx;\n })[0];\n tabContentItem = React.cloneElement(tabPanel, {\n tabId: selectedId,\n hidden: false\n });\n }\n var otherIconButtonAttr = {\n buttonType: 'secondary',\n css: _styles.tabsArrowIcon\n };\n return jsx(\"div\", {\n ref: containerEleRef,\n id: name,\n css: _styles.tabWrapperBase,\n className: className,\n \"data-ppui-info\": \"tabs_3.10.5\"\n }, jsx(\"nav\", {\n css: [_styles.base, addBackgroundColor && _styles.navBackground],\n id: \"\".concat(name, \"-nav\"),\n ref: navEleRef,\n onScroll: function onScroll() {\n return handleTouchScroll();\n },\n \"data-ppui\": \"true\"\n }, jsx(\"div\", {\n id: \"\".concat(name, \"-tabs\"),\n className: tabsWrapperClassName,\n css: [_styles.tabsWrapper, center && _styles.tabsCenter],\n role: \"tablist\",\n onFocus: function onFocus(e) {\n return handleFocus(e);\n },\n onMouseDown: function onMouseDown(e) {\n return e.preventDefault();\n } // remove focus on click\n ,\n\n \"data-ppui\": \"true\"\n }, tabItems, jsx(\"div\", {\n ref: sliderRef,\n css: [_styles.tabSlider],\n \"data-ppui\": \"true\"\n }))), jsx(\"span\", {\n \"data-id\": \"scroll-btn\",\n css: leftScrollCssVal,\n \"data-ppui\": \"true\"\n }, jsx(IconButton, _extends({\n inverse: true,\n svgIconComponent: ArrowLeftIcon,\n \"aria-label\": scrollLeftLabel,\n tabIndex: scrollButtonFocus,\n onClick: function () {\n return scroll('left');\n }\n }, otherIconButtonAttr, {\n \"data-ppui\": \"true\"\n }), scrollLeftLabel)), jsx(\"span\", {\n \"data-id\": \"scroll-btn\",\n css: rightScrollCssVal,\n \"data-ppui\": \"true\"\n }, jsx(IconButton, _extends({\n inverse: true,\n svgIconComponent: ArrowRightIcon,\n tabIndex: scrollButtonFocus,\n onClick: function () {\n return scroll('right');\n }\n }, otherIconButtonAttr, {\n \"data-ppui\": \"true\"\n }), scrollRightLabel)), tabContentItem);\n};\nvar _excluded$2 = [\"id\", \"tabId\", \"hidden\", \"className\", \"visible\", \"children\"];\nvar TabPanel = function (_ref) {\n var id = _ref.id,\n tabId = _ref.tabId,\n hidden = _ref.hidden,\n className = _ref.className,\n _ref$visible = _ref.visible,\n visible = _ref$visible === void 0 ? true : _ref$visible,\n children = _ref.children,\n rest = _objectWithoutProperties(_ref, _excluded$2);\n var hasMouseClickFocus = useRef(false);\n var _useState = useState(false),\n _useState2 = _slicedToArray(_useState, 2),\n mouseFocus = _useState2[0],\n updateMouseFocus = _useState2[1];\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]); // Ref variable to determine whether to render the component or not.\n\n var hasRendered = useRef(visible);\n /* istanbul ignore next */\n\n if (visible && !hasRendered.current) {\n hasRendered.current = true;\n }\n /* istanbul ignore next */\n\n if (!hasRendered.current) {\n // Do not re-render the TabPanel when its already present in the DOM.\n return null;\n } // to prevent tab panel from getting focus on mouse-click\n\n var tabContentStyles = [_styles.tabContent, !mouseFocus && _styles.tabContentFocus, /* istanbul ignore next */\n visible ? _styles.tabContentVisible : _styles.tabContentHidden];\n return jsx(\"div\", _extends({\n id: id,\n css: tabContentStyles,\n className: className,\n \"aria-labelledby\": tabId,\n \"aria-hidden\": hidden,\n tabIndex: 0,\n role: \"tabpanel\",\n onFocus: function handleFocus() {\n var hasClickFocus = hasMouseClickFocus.current ? true : false;\n updateMouseFocus(hasClickFocus);\n hasMouseClickFocus.current = false;\n },\n onMouseDown: function handleMouseDown() {\n hasMouseClickFocus.current = true;\n }\n }, rest, {\n \"data-ppui\": \"true\"\n }), children);\n};\nexport { Tab, TabPanel, Tabs, styles as tabsStyles };","const PAYPAL_THEME = {\n \"name\": \"paypal\",\n \"mode\": \"light\",\n \"sysSizeIconXs\": \"1.125rem\",\n \"sysSizeIconSm\": \"1.5rem\",\n \"sysSizeIconMd\": \"2rem\",\n \"sysSizeIconLg\": \"3rem\",\n \"sysSizeIconXl\": \"4rem\",\n \"sysSizePictogramSm\": \"6rem\",\n \"sysSizePictogramMd\": \"8.5rem\",\n \"sysSizePictogramLg\": \"10rem\",\n \"sysSizeCircleXs\": \"1.5rem\",\n \"sysSizeCircleSm\": \"2rem\",\n \"sysSizeCircleMd\": \"3rem\",\n \"sysSizeCircleLg\": \"4rem\",\n \"sysSizeCircleXl\": \"6rem\",\n \"sysSizeTapTargetXs\": \"2.5rem\",\n \"sysSizeTapTargetSm\": \"2.75rem\",\n \"sysSizeTapTargetDefault\": \"3rem\",\n \"sysSizeTapTargetLg\": \"4rem\",\n \"sysSizePointerWidthSm\": \"0.75rem\",\n \"sysSizePointerWidthLg\": \"1rem\",\n \"sysSizeIndicatorXs\": \"0.1875rem\",\n \"sysSizeIndicatorSm\": \"0.25rem\",\n \"sysSizeIndicatorMd\": \"0.375rem\",\n \"sysSizeIndicatorLg\": \"0.5rem\",\n \"sysSizeFieldSm\": \"3rem\",\n \"sysSizeFieldLg\": \"4rem\",\n \"sysSizeMediaXs\": \"22rem\",\n \"sysSizeMediaSm\": \"36rem\",\n \"sysSizeMediaMd\": \"47rem\",\n \"sysSizeMediaLg\": \"64rem\",\n \"sysSizeMediaXl\": \"72rem\",\n \"sysSizeMediaXxl\": \"90rem\",\n \"sysSpaceTiny\": \"0.125rem\",\n \"sysSpaceXs\": \"0.25rem\",\n \"sysSpaceSm\": \"0.5rem\",\n \"sysSpaceMd\": \"0.75rem\",\n \"sysSpaceLg\": \"1rem\",\n \"sysSpaceXl\": \"1.5rem\",\n \"sysSpaceJumbo\": \"2rem\",\n \"sysElevationLevel1Yoffset\": \"0.0625rem\",\n \"sysElevationLevel1Opacity\": 0.08,\n \"sysElevationLevel1Blur\": \"0.75rem\",\n \"sysElevationLevel2Yoffset\": \"0.125rem\",\n \"sysElevationLevel2Opacity\": 0.1,\n \"sysElevationLevel2Blur\": \"0.875rem\",\n \"sysElevationLevel3Yoffset\": \"0.125rem\",\n \"sysElevationLevel3Opacity\": 0.1,\n \"sysElevationLevel3Blur\": \"1.125rem\",\n \"sysElevationBlurCurve\": 1,\n \"sysElevationBlurSlope\": -1,\n \"sysElevationBlurBase\": \"0.625rem\",\n \"sysElevationOpacity\": 0.15,\n \"sysElevationBrightenFactor\": 0.02,\n \"sysElevationVerticalOffsetRatio\": 1,\n \"sysElevationHorizontalOffsetRatio\": 0,\n \"sysMotionTimingX1\": 0,\n \"sysMotionTimingY1\": 0.9,\n \"sysMotionTimingX2\": 0.3,\n \"sysMotionTimingY2\": 1,\n \"sysMotionDurationHover\": \"0.10s\",\n \"sysMotionDurationAction\": \"0.20s\",\n \"sysMotionDurationArrive\": \"0.50s\",\n \"sysMotionDurationDepart\": \"0.30s\",\n \"sysMotionDurationRepeat\": \"1.30s\",\n \"sysMotionDurationLinger\": \"7.00s\",\n \"sysMotionDurationEnterSmall\": \"0.20s\",\n \"sysMotionDurationEnterMedium\": \"0.30s\",\n \"sysMotionDurationEnterLarge\": \"0.50s\",\n \"sysMotionDurationExitSmall\": \"0.10s\",\n \"sysMotionDurationExitMedium\": \"0.20s\",\n \"sysMotionDurationExitLarge\": \"0.20s\",\n \"sysMotionDurationMoveSmall\": \"0.20s\",\n \"sysMotionDurationMoveMedium\": \"0.50s\",\n \"sysMotionDurationMoveLarge\": \"0.80s\",\n \"sysMotionDurationLoopBackForth\": \"0.50s\",\n \"sysMotionDurationLoopStandard\": \"1.30s\",\n \"sysMotionEasingEnterSmall\": \"0,0,0,1\",\n \"sysMotionEasingEnterMedium\": \"0.05,0.7,0.1,1\",\n \"sysMotionEasingEnterLarge\": \"0.05,0.7,0.1,1\",\n \"sysMotionEasingExitSmall\": \"0.3,0,1,1\",\n \"sysMotionEasingExitMedium\": \"0.3,0,0.8,0.15\",\n \"sysMotionEasingExitLarge\": \"0.3,0,0.8,0.15\",\n \"sysMotionEasingMoveSmall\": \"0.2,0,0,1\",\n \"sysMotionEasingMoveMedium\": \"0.2,0,0,1\",\n \"sysMotionEasingMoveLarge\": \"0.2,0,0,1\",\n \"sysMotionEasingLoopBackForth\": \"0.2,0,0,1\",\n \"sysMotionEasingLoopStandard\": \"0,0,1,1\",\n \"sysBorderThicknessNormal\": \"0.0625rem\",\n \"sysBorderThicknessEmphasis\": \"0.125rem\",\n \"sysBorderThicknessFocus\": \"0.1875rem\",\n \"sysBorderThicknessFocusOutline\": \"0.375rem\",\n \"sysBorderRadiusXs\": \"0.125rem\",\n \"sysBorderRadiusSm\": \"0.25rem\",\n \"sysBorderRadiusMd\": \"0.5rem\",\n \"sysBorderRadiusLg\": \"0.75rem\",\n \"sysBorderRadiusInteractive\": \"50%\",\n \"sysTypographyDisplayFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyDisplaySize\": \"4.5rem\",\n \"sysTypographyDisplayWeight\": 400,\n \"sysTypographyDisplayLineHeight\": \"4.875rem\",\n \"sysTypographyDisplayMaxScaleFactor\": 1.25,\n \"sysTypographyHeadingLgFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyHeadingLgSize\": \"2.75rem\",\n \"sysTypographyHeadingLgWeight\": 400,\n \"sysTypographyHeadingLgLineHeight\": \"3rem\",\n \"sysTypographyHeadingLgMaxScaleFactor\": 1.5,\n \"sysTypographyHeadingSmFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyHeadingSmSize\": \"1.75rem\",\n \"sysTypographyHeadingSmWeight\": 400,\n \"sysTypographyHeadingSmLineHeight\": \"2.25rem\",\n \"sysTypographyHeadingSmMaxScaleFactor\": 1.5,\n \"sysTypographyTitleStrongFamily\": \"PayPalOpen-Bold\",\n \"sysTypographyTitleStrongSize\": \"1.375rem\",\n \"sysTypographyTitleStrongWeight\": 400,\n \"sysTypographyTitleStrongLineHeight\": \"1.75rem\",\n \"sysTypographyTitleStrongMaxScaleFactor\": 2,\n \"sysTypographyTitleFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyTitleSize\": \"1.375rem\",\n \"sysTypographyTitleWeight\": 400,\n \"sysTypographyTitleLineHeight\": \"1.75rem\",\n \"sysTypographyTitleMaxScaleFactor\": 2,\n \"sysTypographyBodyStrongFamily\": \"PayPalOpen-Bold\",\n \"sysTypographyBodyStrongSize\": \"1.125rem\",\n \"sysTypographyBodyStrongWeight\": 400,\n \"sysTypographyBodyStrongLineHeight\": \"1.5rem\",\n \"sysTypographyBodyStrongMaxScaleFactor\": 2,\n \"sysTypographyBodyFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyBodySize\": \"1.125rem\",\n \"sysTypographyBodyWeight\": 400,\n \"sysTypographyBodyLineHeight\": \"1.5rem\",\n \"sysTypographyBodyMaxScaleFactor\": 2,\n \"sysTypographyCaptionStrongFamily\": \"PayPalOpen-Bold\",\n \"sysTypographyCaptionStrongSize\": \"0.875rem\",\n \"sysTypographyCaptionStrongWeight\": 400,\n \"sysTypographyCaptionStrongLineHeight\": \"1.25rem\",\n \"sysTypographyCaptionStrongMaxScaleFactor\": 2,\n \"sysTypographyCaptionFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyCaptionSize\": \"0.875rem\",\n \"sysTypographyCaptionWeight\": 400,\n \"sysTypographyCaptionLineHeight\": \"1.25rem\",\n \"sysTypographyCaptionMaxScaleFactor\": 2,\n \"sysTypographyLinkLgFamily\": \"PayPalOpen-Bold\",\n \"sysTypographyLinkLgSize\": \"1.125rem\",\n \"sysTypographyLinkLgWeight\": 400,\n \"sysTypographyLinkLgLineHeight\": \"1.5rem\",\n \"sysTypographyLinkLgUnderline\": true,\n \"sysTypographyLinkLgMaxScaleFactor\": 2,\n \"sysTypographyLinkSmFamily\": \"PayPalOpen-Bold\",\n \"sysTypographyLinkSmSize\": \"0.875rem\",\n \"sysTypographyLinkSmWeight\": 400,\n \"sysTypographyLinkSmLineHeight\": \"1.25rem\",\n \"sysTypographyLinkSmUnderline\": true,\n \"sysTypographyLinkSmMaxScaleFactor\": 2,\n \"sysTypographyButtonLgFamily\": \"PayPalOpen-Bold\",\n \"sysTypographyButtonLgSize\": \"1.125rem\",\n \"sysTypographyButtonLgWeight\": 400,\n \"sysTypographyButtonLgLineHeight\": \"1.5rem\",\n \"sysTypographyButtonLgMaxScaleFactor\": 2,\n \"sysTypographyButtonSmFamily\": \"PayPalOpen-Bold\",\n \"sysTypographyButtonSmSize\": \"0.875rem\",\n \"sysTypographyButtonSmWeight\": 400,\n \"sysTypographyButtonSmLineHeight\": \"1.25rem\",\n \"sysTypographyButtonSmMaxScaleFactor\": 2,\n \"sysTypographyFieldLabelLgFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyFieldLabelLgSize\": \"1.125rem\",\n \"sysTypographyFieldLabelLgWeight\": 400,\n \"sysTypographyFieldLabelLgLineHeight\": \"1.5rem\",\n \"sysTypographyFieldLabelLgMaxScaleFactor\": 2,\n \"sysTypographyFieldLabelSmFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyFieldLabelSmSize\": \"0.875rem\",\n \"sysTypographyFieldLabelSmWeight\": 400,\n \"sysTypographyFieldLabelSmLineHeight\": \"1.25rem\",\n \"sysTypographyFieldLabelSmMaxScaleFactor\": 2,\n \"sysTypographyFieldValueXlFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyFieldValueXlSize\": \"2.75rem\",\n \"sysTypographyFieldValueXlWeight\": 400,\n \"sysTypographyFieldValueXlLineHeight\": \"3rem\",\n \"sysTypographyFieldValueXlMaxScaleFactor\": 1.5,\n \"sysTypographyFieldValueLgFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyFieldValueLgSize\": \"1.75rem\",\n \"sysTypographyFieldValueLgWeight\": 400,\n \"sysTypographyFieldValueLgLineHeight\": \"2.25rem\",\n \"sysTypographyFieldValueLgMaxScaleFactor\": 2,\n \"sysTypographyFieldValueSmFamily\": \"PayPalOpen-Regular\",\n \"sysTypographyFieldValueSmSize\": \"1.125rem\",\n \"sysTypographyFieldValueSmWeight\": 400,\n \"sysTypographyFieldValueSmLineHeight\": \"1.5rem\",\n \"sysTypographyFieldValueSmMaxScaleFactor\": 2,\n \"sysColorBackgroundMain\": \"#faf8f5\",\n \"sysColorBackgroundAlt\": \"#f1ede8\",\n \"sysColorBackgroundSurface\": \"#ffffff\",\n \"sysColorBackgroundSurfaceHover\": \"#faf8f5\",\n \"sysColorBackgroundSurfaceActive\": \"#f1ede8\",\n \"sysColorBackgroundHighContrast\": \"#001435\",\n \"sysColorBackgroundMediumContrast\": \"#545d68\",\n \"sysColorPrimaryMain\": \"#003087\",\n \"sysColorPrimaryMainHover\": \"#0070e0\",\n \"sysColorPrimaryMainActive\": \"#001c64\",\n \"sysColorPrimaryContrast\": \"#ffffff\",\n \"sysColorPrimaryContrastHover\": \"#b9effc\",\n \"sysColorPrimaryContrastActive\": \"#5bbbfc\",\n \"sysColorSecondaryMain\": \"#0070e0\",\n \"sysColorSecondaryMainHover\": \"#5bbbfc\",\n \"sysColorSecondaryMainActive\": \"#003087\",\n \"sysColorSecondaryContrast\": \"#ffffff\",\n \"sysColorTertiaryMain\": \"#faf8f5\",\n \"sysColorTertiaryMainHover\": \"#f1ede8\",\n \"sysColorTertiaryMainActive\": \"#e6e0d9\",\n \"sysColorTertiaryContrast\": \"#003087\",\n \"sysColorFeaturedMain\": \"#ffd140\",\n \"sysColorFeaturedMainHover\": \"#ffe888\",\n \"sysColorFeaturedMainActive\": \"#ff9100\",\n \"sysColorFeaturedContrast\": \"#003087\",\n \"sysColorUnselectedMain\": \"#e6e0d9\",\n \"sysColorUnselectedMainHover\": \"#faf8f5\",\n \"sysColorUnselectedMainActive\": \"#f1ede8\",\n \"sysColorUnselectedContrast\": \"#545d68\",\n \"sysColorSelectedMain\": \"#0070e0\",\n \"sysColorSelectedMainHover\": \"#5bbbfc\",\n \"sysColorSelectedMainActive\": \"#003087\",\n \"sysColorSelectedContrast\": \"#ffffff\",\n \"sysColorSelectedRangeMain\": \"#b9effc\",\n \"sysColorSelectedRangeMainHover\": \"#5bbbfc\",\n \"sysColorSelectedRangeMainActive\": \"#0070e0\",\n \"sysColorSelectedRangeContrast\": \"#003087\",\n \"sysColorLinkMain\": \"#0070e0\",\n \"sysColorLinkMainHover\": \"#003087\",\n \"sysColorLinkMainActive\": \"#003087\",\n \"sysColorLinkAlt\": \"#001435\",\n \"sysColorLinkAltHover\": \"#001435\",\n \"sysColorLinkAltActive\": \"#001435\",\n \"sysColorLinkContrast\": \"#ffffff\",\n \"sysColorLinkContrastHover\": \"#b9effc\",\n \"sysColorLinkContrastActive\": \"#5bbbfc\",\n \"sysColorOverlayMain\": \"rgba(0, 0, 0, 0.55)\",\n \"sysColorOverlayMainHover\": \"rgba(0, 0, 0, 0.4)\",\n \"sysColorOverlayMainActive\": \"rgba(0, 0, 0, 0.7)\",\n \"sysColorOverlayContrast\": \"#ffffff\",\n \"sysColorAccent1Main\": \"#003087\",\n \"sysColorAccent1Contrast\": \"#ffffff\",\n \"sysColorAccent2Main\": \"#e02d50\",\n \"sysColorAccent2Contrast\": \"#ffffff\",\n \"sysColorAccent3Main\": \"#388c00\",\n \"sysColorAccent3Contrast\": \"#ffffff\",\n \"sysColorAccent4Main\": \"#7252cc\",\n \"sysColorAccent4Contrast\": \"#ffffff\",\n \"sysColorErrorMain\": \"#d50102\",\n \"sysColorErrorMainHover\": \"#ff5a6d\",\n \"sysColorErrorMainActive\": \"#9b0021\",\n \"sysColorErrorContrast\": \"#ffffff\",\n \"sysColorWarningMain\": \"#ffbe4a\",\n \"sysColorWarningMainHover\": \"#ffe888\",\n \"sysColorWarningMainActive\": \"#ff9100\",\n \"sysColorWarningAlt\": \"#e85e00\",\n \"sysColorWarningContrast\": \"#001435\",\n \"sysColorSuccessMain\": \"#0f8514\",\n \"sysColorSuccessMainHover\": \"#6fc400\",\n \"sysColorSuccessMainActive\": \"#388c00\",\n \"sysColorSuccessContrast\": \"#ffffff\",\n \"sysColorSystemMain\": \"#001435\",\n \"sysColorSystemMainHover\": \"#929496\",\n \"sysColorSystemMainActive\": \"#545d68\",\n \"sysColorSystemContrast\": \"#ffffff\",\n \"sysColorInfoMain\": \"#e6e0d9\",\n \"sysColorInfoMainHover\": \"#faf8f5\",\n \"sysColorInfoMainActive\": \"#f1ede8\",\n \"sysColorInfoContrast\": \"#001435\",\n \"sysColorSpecialtyMain\": \"#7252cc\",\n \"sysColorSpecialtyMainHover\": \"#b976ff\",\n \"sysColorSpecialtyMainActive\": \"#24247f\",\n \"sysColorSpecialtyContrast\": \"#ffffff\",\n \"sysColorStructureBorderHighContrast\": \"#929496\",\n \"sysColorStructureBorderLowContrast\": \"rgba(0, 0, 0, 0.1)\",\n \"sysColorStructureDivider\": \"#f1ede8\",\n \"sysColorStructureFocus\": \"#097ff5\",\n \"sysColorStructureFocusOutline\": \"rgba(209, 229, 249, 0.9)\",\n \"sysColorStructureErrorOutline\": \"rgba(224, 45, 80, 0.16)\",\n \"sysColorStructureScrim\": \"rgba(0, 0, 0, 0.4)\",\n \"sysColorStructureShimmer\": \"#e6e0d9\",\n \"sysColorStructureShimmerInverse\": \"#545d68\",\n \"sysColorStructureSheen\": \"rgba(255, 255, 255, 0.7)\",\n \"sysColorStructureShadow\": \"#000000\"\n};\nexport { PAYPAL_THEME };","import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport { useMemo } from 'react';\nimport { devWarning, utilStyles, Shimmer } from '@paypalcorp/pp-react-utils';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { textStyles } from '@paypalcorp/pp-react-text';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysSpaceXl = tokens.sysSpaceXl,\n sysColorStructureBorderLowContrast = tokens.sysColorStructureBorderLowContrast,\n sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysBorderThicknessNormal = tokens.sysBorderThicknessNormal,\n sysBorderRadiusLg = tokens.sysBorderRadiusLg,\n sysSpaceXs = tokens.sysSpaceXs;\n var _utilStyles = utilStyles(tokens),\n focusStyles = _utilStyles.focusStyles,\n elevationStyles = _utilStyles.elevationStyles;\n var _textStyles = textStyles(tokens),\n textHeadingSm = _textStyles.headingSm;\n var base = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: card_base;\\n padding: \", \";\\n position: relative;\\n text-align: initial;\\n background-color: \", \";\\n border: \", \" solid\\n \", \";\\n border-radius: \", \";\\n appearance: none;\\n\\n &:focus {\\n \", \";\\n }\\n \"])), sysSpaceXl, sysColorBackgroundSurface, sysBorderThicknessNormal, sysColorStructureBorderLowContrast, sysBorderRadiusLg, focusStyles.focusInlineElement);\n var clickable = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: clickable;\\n cursor: pointer;\\n width: 100%;\\n appearance: none;\\n\\n &:hover {\\n \", \"\\n }\\n\\n &:active {\\n box-shadow: none;\\n }\\n\\n &:focus:active {\\n &:after {\\n content: none;\\n }\\n }\\n \"])), elevationStyles.level1); // header styles\n\n var header = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: header;\\n margin-bottom: \", \";\\n display: table;\\n \"])), sysSpaceXl);\n var title = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: title;\\n \", \"\\n width: 100%;\\n display: table-cell;\\n margin: initial;\\n padding: \", \" 0;\\n text-transform: none;\\n vertical-align: middle;\\n \"])), textHeadingSm(), sysSpaceXs); // content styles\n\n var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: content;\\n margin-top: 0.9375rem;\\n margin-bottom: 0.9375rem;\\n \"]))); // footer styles\n\n var footer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: footer;\\n margin-top: \", \";\\n\\n button,\\n a {\\n margin: initial;\\n }\\n\\n button:not(:last-child),\\n a:not(:last-child) {\\n margin-right: \", \";\\n }\\n\\n [dir='rtl'] & {\\n button:not(:last-child),\\n a:not(:last-child) {\\n margin-right: initial;\\n margin-left: \", \";\\n }\\n }\\n \"])), sysSpaceXl, sysSpaceXl, sysSpaceXl); // sizes\n\n var sizeXs = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: sizeXs;\\n min-width: \", \";\\n min-height: \", \";\\n \"])), '10.3125rem', '5rem');\n var sizeXsLong = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: sizeXsLong;\\n min-width: \", \";\\n min-height: \", \";\\n \"])), '21.4375rem', '5rem');\n var sizeSm = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: sizeSm;\\n min-width: \", \";\\n min-height: \", \";\\n \"])), '10.3125rem', '13.25rem');\n var sizeMd = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: sizeMd;\\n min-width: \", \";\\n min-height: \", \";\\n \"])), '21.4375rem', '12.5rem');\n var sizeLg = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n label: sizeLg;\\n min-width: \", \";\\n min-height: \", \";\\n \"])), '21.4375rem', '26.25rem');\n return {\n base: base,\n clickable: clickable,\n header: header,\n title: title,\n content: content,\n footer: footer,\n sizeXs: sizeXs,\n sizeXsLong: sizeXsLong,\n sizeSm: sizeSm,\n sizeMd: sizeMd,\n sizeLg: sizeLg\n };\n}\nvar _excluded = [\"onClick\", \"label\", \"as\", \"children\", \"className\", \"isLoading\", \"isInverse\", \"size\"],\n _excluded2 = [\"className\", \"children\"],\n _excluded3 = [\"className\", \"children\"],\n _excluded4 = [\"className\", \"children\"];\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\nvar Card = function (_ref) {\n var onClick = _ref.onClick,\n label = _ref.label,\n _ref$as = _ref.as,\n as = _ref$as === void 0 ? typeof onClick === 'function' ? 'button' : 'div' : _ref$as,\n children = _ref.children,\n className = _ref.className,\n isLoading = _ref.isLoading,\n isInverse = _ref.isInverse,\n size = _ref.size,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var cardStyles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n if (isLoading) {\n return jsx(Shimmer, _extends({\n isInverse: isInverse\n }, rest, {\n \"data-ppui\": \"true\"\n }), children);\n }\n var isCardSizeDeprecated = size && ['sm', 'md', 'lg'].some(function (str) {\n return size.includes(str);\n });\n if (isCardSizeDeprecated) {\n devWarning(\"Card size \".concat(size, \" is deprecated and will be removed in the next major release.\"));\n }\n var sizeStyleMap = {\n xs: cardStyles.sizeXs,\n 'xs-long': cardStyles.sizeXsLong,\n sm: cardStyles.sizeSm,\n md: cardStyles.sizeMd,\n lg: cardStyles.sizeLg\n };\n var props = _objectSpread({}, rest);\n if (label) {\n props['aria-label'] = label;\n }\n return jsx(as, _extends({\n css: [cardStyles.base, sizeStyleMap[size], onClick && cardStyles.clickable],\n className: className,\n \"data-ppui-info\": \"card_2.4.5\",\n onClick: onClick\n }, props), children);\n};\nvar Header = function (_ref2) {\n var className = _ref2.className,\n children = _ref2.children,\n rest = _objectWithoutProperties(_ref2, _excluded2);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n return jsx(\"header\", _extends({\n css: _styles.header,\n className: className\n }, rest, {\n \"data-ppui\": \"true\"\n }), jsx(\"h3\", {\n css: _styles.title,\n className: className,\n \"data-ppui\": \"true\"\n }, children));\n};\nvar Content = function (_ref3) {\n var className = _ref3.className,\n children = _ref3.children,\n rest = _objectWithoutProperties(_ref3, _excluded3);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n return jsx(\"div\", _extends({\n css: _styles.content,\n className: className\n }, rest, {\n \"data-ppui\": \"true\"\n }), children);\n};\nvar Footer = function (_ref4) {\n var className = _ref4.className,\n children = _ref4.children,\n rest = _objectWithoutProperties(_ref4, _excluded4);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n return jsx(\"footer\", _extends({\n css: _styles.footer,\n className: className\n }, rest, {\n \"data-ppui\": \"true\"\n }), children);\n};\nCard.Header = Header;\nCard.Content = Content;\nCard.Footer = Footer;\nexport { Card, styles as cardStyles };","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport { useMemo, useState, useRef, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport { css, keyframes, useTheme, jsx } from '@emotion/react';\nimport { CheckmarkBackgroundIcon } from '@paypalcorp/pp-react-icons';\nimport { devWarning, utilStyles, ZINDEX_TOAST, getColorFamily, hasDocument, ColorProvider, KeyboardCode } from '@paypalcorp/pp-react-utils';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { math } from 'polished';\nimport { textStyles } from '@paypalcorp/pp-react-text';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {};\n }\n var sysBorderRadiusLg = tokens.sysBorderRadiusLg,\n sysColorSystemMain = tokens.sysColorSystemMain,\n sysColorSystemContrast = tokens.sysColorSystemContrast,\n sysColorSuccessMain = tokens.sysColorSuccessMain,\n sysColorSuccessContrast = tokens.sysColorSuccessContrast,\n sysSpaceLg = tokens.sysSpaceLg,\n sysSpaceSm = tokens.sysSpaceSm,\n sysSizeIconSm = tokens.sysSizeIconSm,\n sysMotionDurationEnterSmall = tokens.sysMotionDurationEnterSmall,\n sysMotionDurationExitSmall = tokens.sysMotionDurationExitSmall;\n var _utilStyles = utilStyles(tokens),\n variables = _utilStyles.variables;\n var _utilStyles2 = utilStyles(tokens),\n elevationStyles = _utilStyles2.elevationStyles;\n var ppuiEaseEnterSmall = variables.ppuiEaseEnterSmall,\n ppuiEaseExitSmall = variables.ppuiEaseExitSmall;\n var _textStyles = textStyles(tokens),\n textBody = _textStyles.body;\n var verticalExitPosition = math(\"-2*\".concat(sysSpaceLg));\n var base = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: toast_base;\\n display: flex;\\n padding: \", \";\\n border-radius: \", \";\\n left: 0;\\n right: 0;\\n margin: auto;\\n white-space: normal;\\n \", \";\\n background-color: \", \";\\n max-width: \", \";\\n \", \"\\n pointer-events: auto;\\n \"])), sysSpaceLg, sysBorderRadiusLg, elevationStyles.level2, sysColorSystemMain, '30rem', textBody({\n color: sysColorSystemContrast\n }));\n var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: container;\\n display: flex;\\n position: fixed;\\n top: \", \";\\n z-index: \", \";\\n left: 50%;\\n transform: translateX(-50%);\\n width: calc(100% - \", \" * 2);\\n visibility: hidden;\\n opacity: 0;\\n pointer-events: none;\\n\\n &[aria-hidden='false'] {\\n visibility: visible;\\n opacity: 1;\\n }\\n \"])), sysSpaceLg, ZINDEX_TOAST, sysSpaceLg);\n var fadeIn = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n 0% {\\n transform: translate(\\n -50%,\\n \", \"\\n );\\n opacity: 0;\\n\\n }\\n 100% {\\n visibility: visible;\\n transform: translate(-50%, 0);\\n opacity: 1;\\n }\\n \"])), verticalExitPosition);\n var fadeOut = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n 0% {\\n visibility: visible;\\n transform: translate(-50%, 0);\\n opacity: 1;\\n }\\n 100% {\\n visibility: hidden;\\n transform: translate(\\n -50%,\\n \", \"\\n );\\n opacity: 0;\\n } \\n \"])), verticalExitPosition);\n var show = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: show;\\n animation: \", \" \", \" \", \";\\n \"])), fadeIn, sysMotionDurationEnterSmall, ppuiEaseEnterSmall);\n var hide = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: hide;\\n animation: \", \" \", \" \", \";\\n \"])), fadeOut, sysMotionDurationExitSmall, ppuiEaseExitSmall);\n var success = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: success;\\n background-color: \", \";\\n color: \", \";\\n \"])), sysColorSuccessMain, sysColorSuccessContrast);\n var successIcon = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: success_icon;\\n margin-right: \", \";\\n height: \", \";\\n\\n [dir='rtl'] & {\\n margin-left: \", \";\\n margin-right: 0;\\n }\\n \"])), sysSpaceSm, sysSizeIconSm, sysSpaceSm);\n return {\n base: base,\n container: container,\n show: show,\n hide: hide,\n success: success,\n successIcon: successIcon\n };\n}\nvar _excluded = [\"id\", \"message\", \"isSuccess\", \"duration\", \"onClose\", \"direction\", \"className\", \"containerClassName\", \"containerRef\"];\nvar defaultDuration = 7000;\nvar Toast = function (_ref) {\n var _ref$id = _ref.id,\n id = _ref$id === void 0 ? 'Toast' : _ref$id,\n _ref$message = _ref.message,\n message = _ref$message === void 0 ? 'message' : _ref$message,\n _ref$isSuccess = _ref.isSuccess,\n isSuccess = _ref$isSuccess === void 0 ? false : _ref$isSuccess,\n _ref$duration = _ref.duration,\n duration = _ref$duration === void 0 ? defaultDuration : _ref$duration,\n onClose = _ref.onClose,\n direction = _ref.direction,\n className = _ref.className,\n containerClassName = _ref.containerClassName,\n containerRef = _ref.containerRef,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var _useState = useState(-1),\n _useState2 = _slicedToArray(_useState, 2),\n showState = _useState2[0],\n setShowState = _useState2[1];\n var startY = null;\n var startX = null;\n var toastRef = useRef();\n var getWrapperCurrent = function (w) {\n return /* istanbul ignore next */w && w.current ? w.current : null;\n };\n var autoHideTimer = getWrapperCurrent(useRef());\n var handleClose = function () {\n setShowState(0);\n clearTimeout(autoHideTimer);\n startX = null;\n startY = null;\n };\n var handleKey = function (evt) {\n if (new KeyboardCode(evt.key || evt.keyCode).IS_ESC) {\n handleClose();\n }\n };\n /* istanbul ignore next */\n\n var handleTouchStart = function (evt) {\n //prevent from scrolling\n evt.preventDefault();\n /* istanbul ignore next */\n\n if (!startY && !startX) {\n var firstTouch = evt.changedTouches[0];\n startY = firstTouch.pageY;\n startX = firstTouch.pageX;\n }\n };\n /* istanbul ignore next */\n\n var handleTouchEnd = function (evt) {\n var endTouch = evt.changedTouches[0];\n var endX = endTouch.pageX;\n var endY = endTouch.pageY;\n var xDiff = startX - endX;\n var yDiff = startY - endY;\n if (Math.abs(yDiff) > Math.abs(xDiff)) {\n // means up/down is most significant\n if (yDiff > 0) {\n // swipe up\n handleClose();\n }\n }\n startX = null;\n startY = null;\n };\n useEffect(function () {\n if (showState < 0) {\n setShowState(1);\n }\n document.addEventListener('keydown', handleKey);\n var toast = getWrapperCurrent(toastRef); // Adding native event since evt.preventDefault (for preventing from scrolling\n // while swiping on toast up) is not possible using synthetic event\n //eslint-disable-next-line no-unused-expressions\n\n toast === null || toast === void 0 ? void 0 : toast.addEventListener('touchstart', handleTouchStart);\n return function () {\n document.removeEventListener('keydown', handleKey); //eslint-disable-next-line no-unused-expressions\n\n toast === null || toast === void 0 ? void 0 : toast.removeEventListener('touchstart', handleTouchStart);\n clearTimeout(autoHideTimer);\n };\n }, [showState]);\n /* istanbul ignore next */\n\n var containerStyles = [_styles.container, showState && _styles.show, !showState && _styles.hide];\n var toastCSSVal = [_styles.base, isSuccess && _styles.success];\n var successIcon = isSuccess && jsx(CheckmarkBackgroundIcon, {\n css: _styles.successIcon,\n size: \"sm\",\n \"data-ppui\": \"true\"\n });\n var colorFamily = getColorFamily(isSuccess ? 'Success' : 'Info', tokens);\n /* istanbul ignore next */\n\n return hasDocument() ? ReactDOM.createPortal(jsx(ColorProvider, {\n colorFamily: colorFamily,\n \"data-ppui\": \"true\"\n }, jsx(\"div\", _extends({\n id: id,\n dir: direction,\n css: containerStyles,\n className: containerClassName,\n \"aria-hidden\": showState <= 0,\n role: \"alert\",\n onAnimationEnd: function onAnimatonEnd() {\n if (showState === 1) {\n var timeOut = duration > defaultDuration ? duration : defaultDuration;\n autoHideTimer = setTimeout(handleClose, timeOut);\n } else if (typeof onClose === 'function') {\n onClose();\n }\n },\n \"data-ppui-info\": \"toast_3.5.5\"\n }, rest), jsx(\"div\", {\n ref: toastRef,\n css: toastCSSVal,\n className: className,\n onTouchEnd: handleTouchEnd,\n \"data-ppui\": \"true\"\n }, successIcon, message))), getWrapperCurrent(containerRef) || document.body) : null;\n};\nexport { Toast, styles as toastStyles };","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nvar SideCar = function (_a) {\n var sideCar = _a.sideCar,\n rest = __rest(_a, [\"sideCar\"]);\n if (!sideCar) {\n throw new Error('Sidecar: please provide `sideCar` property to import the right car');\n }\n var Target = sideCar.read();\n if (!Target) {\n throw new Error('Sidecar medium not found');\n }\n return React.createElement(Target, __assign({}, rest));\n};\nSideCar.isSideCarExport = true;\nexport function exportSidecar(medium, exported) {\n medium.useMedium(exported);\n return SideCar;\n}","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport React, { useMemo, useRef, useEffect, useState } from 'react';\nimport { css, useTheme, jsx } from '@emotion/react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';\nimport { devWarning, utilStyles, KeyboardCode } from '@paypalcorp/pp-react-utils';\nimport { CaptionText, BodyText } from '@paypalcorp/pp-react-text';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport { CheckmarkIcon } from '@paypalcorp/pp-react-icons';\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;\nfunction styles(tokens) {\n /* istanbul ignore next */\n if (!Object.keys(tokens).length) {\n devWarning('Missing Emotion theme. Use ThemeProvider from @emotion/react to pass a valid theme from pp-react.');\n return {\n listItem: function listItem() {},\n align: function () {}\n };\n }\n var sysColorBackgroundMediumContrast = tokens.sysColorBackgroundMediumContrast,\n sysColorPrimaryMain = tokens.sysColorPrimaryMain,\n sysSpaceLg = tokens.sysSpaceLg,\n sysSpaceMd = tokens.sysSpaceMd,\n sysSpaceSm = tokens.sysSpaceSm,\n sysSpaceXs = tokens.sysSpaceXs,\n sysColorBackgroundSurface = tokens.sysColorBackgroundSurface,\n sysColorBackgroundSurfaceHover = tokens.sysColorBackgroundSurfaceHover,\n sysColorBackgroundSurfaceActive = tokens.sysColorBackgroundSurfaceActive;\n var _utilStyles = utilStyles(tokens),\n focusStyles = _utilStyles.focusStyles;\n var base = css(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n label: list_base;\\n list-style: none;\\n padding: 0;\\n margin: 0;\\n background-color: transparent;\\n \"])));\n var listItemWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n label: list_item_wrapper;\\n padding: \", \" \", \";\\n display: flex;\\n text-decoration: none;\\n background-color: \", \";\\n outline: none;\\n\\n > div:not(:last-child),\\n a:not(:last-child) {\\n margin-inline-end: \", \";\\n }\\n \"])), sysSpaceMd, sysSpaceLg, sysColorBackgroundSurface, sysSpaceSm);\n var hoverAndActiveStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n label: hover_active;\\n cursor: pointer;\\n position: relative;\\n &:hover {\\n background-color: \", \";\\n }\\n &:active {\\n background-color: \", \";\\n }\\n \"])), sysColorBackgroundSurfaceHover, sysColorBackgroundSurfaceActive);\n var highlight = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n label: highlight;\\n background-color: \", \";\\n \"])), sysColorBackgroundSurfaceHover);\n var decoration = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n label: decoration;\\n display: inherit;\\n color: \", \"; // Possible Breaking Change - Review later with team.\\n pointer-events: none;\\n flex-grow: 0;\\n \"])), sysColorPrimaryMain);\n var content = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n label: content;\\n align-self: center;\\n display: inline-flex;\\n flex-direction: column;\\n gap: \", \";\\n pointer-events: none;\\n flex-grow: 1;\\n \"])), sysSpaceXs);\n var action = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n label: action;\\n * {\\n pointer-events: auto;\\n }\\n \"])));\n var trailingContent = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n label: trailing_content;\\n align-self: center;\\n text-align: right;\\n display: flex;\\n flex-direction: column;\\n gap: \", \";\\n pointer-events: none;\\n flex-grow: 0;\\n [dir='rtl'] & {\\n text-align: left;\\n justify-self: end;\\n }\\n \"])), sysSpaceXs);\n var text = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\n label: text;\\n margin: 0;\\n \"])));\n var labelDescription = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n label: secondary_text;\\n \", \";\\n color: \", \";\\n \"])), text, sysColorBackgroundMediumContrast);\n var align = function () {\n var alignment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'top';\n return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n align-self: \", \";\\n \"])), {\n top: 'start',\n bottom: 'end',\n center: 'center'\n }[alignment] || 'start');\n };\n var focusActive = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\n label: keyboard_active;\\n position: relative;\\n &:focus {\\n \", \";\\n }\\n \"])), focusStyles.focusInlineElement);\n var sectionList = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([\"\\n label: section_list;\\n list-style-type: none;\\n margin: 0;\\n padding: 0;\\n \"])));\n var title = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([\"\\n label: title;\\n padding: \", \" \", \";\\n \"])), sysSpaceMd, sysSpaceLg);\n return {\n base: base,\n listItemWrapper: listItemWrapper,\n hoverAndActiveStyles: hoverAndActiveStyles,\n highlight: highlight,\n content: content,\n action: action,\n decoration: decoration,\n trailingContent: trailingContent,\n text: text,\n labelDescription: labelDescription,\n align: align,\n focusActive: focusActive,\n sectionList: sectionList,\n title: title\n };\n}\nvar _excluded = [\"label\", \"labelLineClamp\", \"status\", \"labelContext\", \"labelDescription\", \"labelDescriptionLineClamp\", \"alert\", \"action\", \"value\", \"decoration\", \"trailingContent\", \"navigationOptions\", \"className\", \"focusActive\", \"isFocused\", \"isHighlighted\", \"isSelected\", \"as\", \"isItemFocusable\", \"isItemNavigational\", \"ariaDescribedby\", \"role\"];\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\n/* eslint-disable complexity */\n\nvar ListItem = function (_ref) {\n var label = _ref.label,\n labelLineClamp = _ref.labelLineClamp,\n status = _ref.status,\n labelContext = _ref.labelContext,\n labelDescription = _ref.labelDescription,\n labelDescriptionLineClamp = _ref.labelDescriptionLineClamp,\n alert = _ref.alert,\n action = _ref.action,\n value = _ref.value,\n decoration = _ref.decoration,\n trailingContent = _ref.trailingContent,\n navigationOptions = _ref.navigationOptions,\n className = _ref.className,\n focusActive = _ref.focusActive,\n isFocused = _ref.isFocused,\n isHighlighted = _ref.isHighlighted,\n isSelected = _ref.isSelected,\n _ref$as = _ref.as,\n as = _ref$as === void 0 ? 'div' : _ref$as,\n isItemFocusable = _ref.isItemFocusable,\n isItemNavigational = _ref.isItemNavigational,\n ariaDescribedby = _ref.ariaDescribedby,\n role = _ref.role,\n rest = _objectWithoutProperties(_ref, _excluded);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var listRef = useRef();\n useEffect(function () {\n if (isFocused) {\n listRef.current.focus();\n }\n }, [isFocused]);\n var listItemWrapperCSS = [_styles.listItemWrapper, isItemNavigational && _styles.hoverAndActiveStyles, isHighlighted && _styles.highlight, isItemFocusable && _styles.focusActive];\n var decorationCSS = [_styles.decoration, decoration && _styles.align(decoration.align)];\n var trailingContentCSS = [_styles.trailingContent, trailingContent && _styles.align(trailingContent.align)];\n var navigationProps = navigationOptions && _objectSpread({}, navigationOptions);\n return jsx(as, _extends({\n css: listItemWrapperCSS,\n role: role,\n tabIndex: -1,\n ref: listRef\n }, navigationProps, rest, {\n \"aria-describedby\": ariaDescribedby,\n \"aria-selected\": isSelected !== undefined && isSelected,\n \"data-ppui\": \"true\"\n }), (decoration === null || decoration === void 0 ? void 0 : decoration.thumbnail) && jsx(\"div\", {\n css: decorationCSS,\n \"data-ppui\": \"true\"\n }, decoration.thumbnail), (!!label || !!alert || !!action || !!status || !!labelContext || !!labelDescription) && jsx(\"div\", {\n css: _styles.content,\n \"data-ppui\": \"true\"\n }, status && jsx(\"div\", {\n \"data-ppui\": \"true\"\n }, status), labelContext && jsx(CaptionText, {\n as: \"p\",\n css: _styles.labelDescription,\n \"data-ppui\": \"true\"\n }, labelContext, \" \\xA0\"), label && jsx(BodyText, {\n as: \"p\",\n strong: isSelected,\n css: _styles.text,\n clampAtLine: labelLineClamp,\n \"data-ppui\": \"true\"\n }, label, \" \\xA0\"), labelDescription && jsx(CaptionText, {\n as: \"p\",\n css: _styles.labelDescription,\n clampAtLine: labelDescriptionLineClamp,\n \"data-ppui\": \"true\"\n }, labelDescription, \" \\xA0\"), alert, action && jsx(\"div\", {\n css: _styles.action,\n \"data-ppui\": \"true\"\n }, action)), (trailingContent || isSelected) && jsx(\"div\", {\n css: trailingContentCSS,\n \"data-ppui\": \"true\"\n }, isSelected ? jsx(CheckmarkIcon, {\n size: \"sm\",\n color: \"SelectedMain\",\n \"data-ppui\": \"true\"\n }) : null, (trailingContent === null || trailingContent === void 0 ? void 0 : trailingContent.status) && jsx(\"div\", {\n \"data-ppui\": \"true\"\n }, trailingContent.status), (trailingContent === null || trailingContent === void 0 ? void 0 : trailingContent.labelContext) && jsx(CaptionText, {\n as: \"p\",\n css: _styles.labelDescription,\n \"data-ppui\": \"true\"\n }, trailingContent.labelContext), (trailingContent === null || trailingContent === void 0 ? void 0 : trailingContent.label) && jsx(BodyText, {\n as: \"p\",\n css: _styles.text,\n \"data-ppui\": \"true\"\n }, trailingContent.label), (trailingContent === null || trailingContent === void 0 ? void 0 : trailingContent.labelDescription) && jsx(CaptionText, {\n as: \"p\",\n css: _styles.labelDescription,\n \"data-ppui\": \"true\"\n }, trailingContent.labelDescription), (trailingContent === null || trailingContent === void 0 ? void 0 : trailingContent.action) && jsx(\"div\", {\n css: _styles.action,\n \"data-ppui\": \"true\"\n }, trailingContent.action)));\n};\nvar _excluded$1 = [\"options\", \"listStyles\", \"focusActive\", \"activeIndex\", \"focusedIndex\", \"onKeyDown\", \"onClick\", \"onFocus\", \"onBlur\", \"hasSections\", \"isTextHighlighted\", \"itemAs\"];\nvar List = React.forwardRef(function (_ref, ref) {\n var options = _ref.options,\n listStyles = _ref.listStyles,\n focusActive = _ref.focusActive,\n _ref$activeIndex = _ref.activeIndex,\n activeIndex = _ref$activeIndex === void 0 ? -1 : _ref$activeIndex,\n _ref$focusedIndex = _ref.focusedIndex,\n focusedIndex = _ref$focusedIndex === void 0 ? -1 : _ref$focusedIndex,\n onKeyDown = _ref.onKeyDown,\n onClick = _ref.onClick,\n onFocus = _ref.onFocus,\n onBlur = _ref.onBlur,\n hasSections = _ref.hasSections,\n isTextHighlighted = _ref.isTextHighlighted,\n _ref$itemAs = _ref.itemAs,\n itemAs = _ref$itemAs === void 0 ? ListItem : _ref$itemAs,\n rest = _objectWithoutProperties(_ref, _excluded$1);\n var tokens = useTheme();\n var _styles = useMemo(function () {\n return styles(tokens);\n }, [tokens]);\n var listRef = useRef();\n var computedRef = ref || listRef;\n var _useState = useState(focusedIndex),\n _useState2 = _slicedToArray(_useState, 2),\n focusedIndexRef = _useState2[0],\n setFocusedIndex = _useState2[1];\n useEffect(function () {\n setFocusedIndex(focusedIndex);\n }, [focusedIndex]);\n var handleClick = function (evt, index) {\n setFocusedIndex(index);\n /* istanbul ignore next */\n\n if (onClick) {\n onClick(evt, index);\n }\n };\n /* Create a flat list of sectionItems for highlight and selection by index */\n\n var normalizeSectionItem = function (items) {\n return items.reduce(function (acc, item) {\n /* istanbul ignore next */\n if (item === null || item === void 0 ? void 0 : item.sectionItems) {\n acc.push.apply(acc, _toConsumableArray(item.sectionItems));\n }\n return acc;\n }, []);\n };\n var listItems = function (optList, ItemAs, sectionId) {\n var normalizedIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;\n return optList.map(function (option, index) {\n var _option$value;\n if (typeof option.label !== 'string' && !option.value) {\n devWarning('When label is a React Element, `value` property is necessary in option');\n }\n var hasOnClick = onClick || option.onClick;\n var isItemNavigational = !!hasOnClick || !!option.navigationOptions;\n var idx = hasSections ? index + normalizedIndex : index;\n var otherProps = {\n value: (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : option.label,\n role: hasOnClick ? 'option' : null,\n focusActive: focusActive,\n isFocused: focusActive && focusedIndexRef === idx,\n isHighlighted: activeIndex === idx,\n isItemNavigational: isItemNavigational,\n isItemFocusable: focusActive !== null && focusActive !== void 0 ? focusActive : isItemNavigational,\n as: option.navigationOptions ? 'a' : 'div',\n ariaDescribedby: hasSections ? sectionId : null\n };\n return jsx(\"li\", {\n className: option.className //@ts-ignore\n ,\n\n onClick: function (evt) {\n return handleClick(evt, idx);\n },\n key: idx,\n role: \"listitem\",\n \"data-value\": option.value,\n \"data-ppui\": \"true\"\n }, jsx(ItemAs, _extends({}, otherProps, option, {\n \"data-ppui\": \"true\"\n })));\n });\n };\n return jsx(\"menu\", _extends({\n css: [_styles.base, listStyles],\n ref: computedRef,\n tabIndex: focusActive && focusedIndexRef === -1 ? 0 : -1\n }, rest, {\n onFocus: function handleListFocus(evt) {\n var isFocusedCurrent = focusActive && evt.target === computedRef.current && evt.currentTarget === computedRef.current;\n if (!onKeyDown && isFocusedCurrent) {\n setFocusedIndex(0);\n }\n if (onFocus) {\n onFocus(evt);\n }\n },\n onBlur: function handleListBlur(evt) {\n var isTargetContained = !computedRef.current.contains(evt.target) || !evt.relatedTarget;\n if (!onKeyDown && focusActive && isTargetContained) {\n setFocusedIndex(-1);\n }\n if (onBlur) {\n onBlur(evt);\n }\n },\n onKeyDown: function handleKey(evt) {\n var tempOptions = hasSections ? normalizeSectionItem(options) : options;\n if (onKeyDown) {\n onKeyDown(evt);\n } else {\n /* istanbul ignore next */\n var KeyCode = new KeyboardCode(evt.key);\n if (KeyCode.IS_ARROW_UP && focusedIndexRef > 0) {\n evt.preventDefault();\n setFocusedIndex(focusedIndexRef - 1);\n } else if (KeyCode.IS_ARROW_DOWN && focusedIndexRef < tempOptions.length - 1) {\n evt.preventDefault();\n setFocusedIndex(focusedIndexRef + 1);\n } else if ((KeyCode.IS_ENTER || KeyCode.IS_SPACEBAR) && onClick) {\n evt.preventDefault();\n handleClick(evt, focusedIndexRef);\n }\n }\n },\n \"data-ppui\": \"true\"\n }), hasSections ? function listSectionItems(optList, ItemAs) {\n var currentNormalizedIndex = 0;\n return optList.reduce(function (acc, option) {\n var _option$sectionItems;\n if (option === null || option === void 0 ? void 0 : (_option$sectionItems = option.sectionItems) === null || _option$sectionItems === void 0 ? void 0 : _option$sectionItems.length) {\n /* istanbul ignore next */\n var uniqueKey = option.id ? option.id : Math.floor(Math.random() * (1000 - 1));\n acc.push(jsx(\"li\", {\n role: \"presentation\",\n key: uniqueKey,\n \"data-ppui\": \"true\"\n }, option.title && jsx(\"div\", {\n css: _styles.title,\n id: option.id,\n \"aria-hidden\": \"true\",\n \"data-ppui\": \"true\"\n }, jsx(CaptionText, {\n \"data-ppui\": \"true\"\n }, option.title)), jsx(\"menu\", _extends({\n \"aria-labelledby\": option.id,\n css: _styles.sectionList\n }, rest, {\n \"data-ppui\": \"true\"\n }), listItems(option.sectionItems, ItemAs, option.id, currentNormalizedIndex))));\n currentNormalizedIndex += option.sectionItems.length;\n }\n return acc;\n }, []);\n }(options, itemAs) : listItems(options, itemAs));\n});\nexport { List, ListItem, styles as listStyles };","export default function _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}","export default function _isNativeReflectConstruct() {\n try {\n var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n } catch (t) {}\n return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {\n return !!t;\n })();\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nimport isNativeReflectConstruct from \"./isNativeReflectConstruct.js\";\nexport default function _construct(t, e, r) {\n if (isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);\n var o = [null];\n o.push.apply(o, e);\n var p = new (t.bind.apply(t, o))();\n return r && setPrototypeOf(p, r.prototype), p;\n}","import getPrototypeOf from \"./getPrototypeOf.js\";\nimport setPrototypeOf from \"./setPrototypeOf.js\";\nimport isNativeFunction from \"./isNativeFunction.js\";\nimport construct from \"./construct.js\";\nexport default function _wrapNativeSuper(Class) {\n var _cache = typeof Map === \"function\" ? new Map() : undefined;\n _wrapNativeSuper = function _wrapNativeSuper(Class) {\n if (Class === null || !isNativeFunction(Class)) return Class;\n if (typeof Class !== \"function\") {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n if (typeof _cache !== \"undefined\") {\n if (_cache.has(Class)) return _cache.get(Class);\n _cache.set(Class, Wrapper);\n }\n function Wrapper() {\n return construct(Class, arguments, getPrototypeOf(this).constructor);\n }\n Wrapper.prototype = Object.create(Class.prototype, {\n constructor: {\n value: Wrapper,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n return setPrototypeOf(Wrapper, Class);\n };\n return _wrapNativeSuper(Class);\n}","export default function _isNativeFunction(fn) {\n try {\n return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n } catch (e) {\n return typeof fn === \"function\";\n }\n}","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';\nimport _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _wrapNativeSuper from '@babel/runtime/helpers/esm/wrapNativeSuper';\nimport _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose';\nfunction last() {\n var _ref;\n return _ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref];\n}\nfunction negation(a) {\n return -a;\n}\nfunction addition(a, b) {\n return a + b;\n}\nfunction subtraction(a, b) {\n return a - b;\n}\nfunction multiplication(a, b) {\n return a * b;\n}\nfunction division(a, b) {\n return a / b;\n}\nfunction max() {\n return Math.max.apply(Math, arguments);\n}\nfunction min() {\n return Math.min.apply(Math, arguments);\n}\nfunction comma() {\n return Array.of.apply(Array, arguments);\n}\nvar defaultSymbols = {\n symbols: {\n '*': {\n infix: {\n symbol: '*',\n f: multiplication,\n notation: 'infix',\n precedence: 4,\n rightToLeft: 0,\n argCount: 2\n },\n symbol: '*',\n regSymbol: '\\\\*'\n },\n '/': {\n infix: {\n symbol: '/',\n f: division,\n notation: 'infix',\n precedence: 4,\n rightToLeft: 0,\n argCount: 2\n },\n symbol: '/',\n regSymbol: '/'\n },\n '+': {\n infix: {\n symbol: '+',\n f: addition,\n notation: 'infix',\n precedence: 2,\n rightToLeft: 0,\n argCount: 2\n },\n prefix: {\n symbol: '+',\n f: last,\n notation: 'prefix',\n precedence: 3,\n rightToLeft: 0,\n argCount: 1\n },\n symbol: '+',\n regSymbol: '\\\\+'\n },\n '-': {\n infix: {\n symbol: '-',\n f: subtraction,\n notation: 'infix',\n precedence: 2,\n rightToLeft: 0,\n argCount: 2\n },\n prefix: {\n symbol: '-',\n f: negation,\n notation: 'prefix',\n precedence: 3,\n rightToLeft: 0,\n argCount: 1\n },\n symbol: '-',\n regSymbol: '-'\n },\n ',': {\n infix: {\n symbol: ',',\n f: comma,\n notation: 'infix',\n precedence: 1,\n rightToLeft: 0,\n argCount: 2\n },\n symbol: ',',\n regSymbol: ','\n },\n '(': {\n prefix: {\n symbol: '(',\n f: last,\n notation: 'prefix',\n precedence: 0,\n rightToLeft: 0,\n argCount: 1\n },\n symbol: '(',\n regSymbol: '\\\\('\n },\n ')': {\n postfix: {\n symbol: ')',\n f: undefined,\n notation: 'postfix',\n precedence: 0,\n rightToLeft: 0,\n argCount: 1\n },\n symbol: ')',\n regSymbol: '\\\\)'\n },\n min: {\n func: {\n symbol: 'min',\n f: min,\n notation: 'func',\n precedence: 0,\n rightToLeft: 0,\n argCount: 1\n },\n symbol: 'min',\n regSymbol: 'min\\\\b'\n },\n max: {\n func: {\n symbol: 'max',\n f: max,\n notation: 'func',\n precedence: 0,\n rightToLeft: 0,\n argCount: 1\n },\n symbol: 'max',\n regSymbol: 'max\\\\b'\n }\n }\n};\nvar defaultSymbolMap = defaultSymbols;\n\n// based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js\n/**\n * Parse errors.md and turn it into a simple hash of code: message\n * @private\n */\nvar ERRORS = {\n \"1\": \"Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\\n\\n\",\n \"2\": \"Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\\n\\n\",\n \"3\": \"Passed an incorrect argument to a color function, please pass a string representation of a color.\\n\\n\",\n \"4\": \"Couldn't generate valid rgb string from %s, it returned %s.\\n\\n\",\n \"5\": \"Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\\n\\n\",\n \"6\": \"Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\\n\\n\",\n \"7\": \"Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\\n\\n\",\n \"8\": \"Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\\n\\n\",\n \"9\": \"Please provide a number of steps to the modularScale helper.\\n\\n\",\n \"10\": \"Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\\n\\n\",\n \"11\": \"Invalid value passed as base to modularScale, expected number or em string but got \\\"%s\\\"\\n\\n\",\n \"12\": \"Expected a string ending in \\\"px\\\" or a number passed as the first argument to %s(), got \\\"%s\\\" instead.\\n\\n\",\n \"13\": \"Expected a string ending in \\\"px\\\" or a number passed as the second argument to %s(), got \\\"%s\\\" instead.\\n\\n\",\n \"14\": \"Passed invalid pixel value (\\\"%s\\\") to %s(), please pass a value like \\\"12px\\\" or 12.\\n\\n\",\n \"15\": \"Passed invalid base value (\\\"%s\\\") to %s(), please pass a value like \\\"12px\\\" or 12.\\n\\n\",\n \"16\": \"You must provide a template to this method.\\n\\n\",\n \"17\": \"You passed an unsupported selector state to this method.\\n\\n\",\n \"18\": \"minScreen and maxScreen must be provided as stringified numbers with the same units.\\n\\n\",\n \"19\": \"fromSize and toSize must be provided as stringified numbers with the same units.\\n\\n\",\n \"20\": \"expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\\n\\n\",\n \"21\": \"expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\\n\\n\",\n \"22\": \"expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\\n\\n\",\n \"23\": \"fontFace expects a name of a font-family.\\n\\n\",\n \"24\": \"fontFace expects either the path to the font file(s) or a name of a local copy.\\n\\n\",\n \"25\": \"fontFace expects localFonts to be an array.\\n\\n\",\n \"26\": \"fontFace expects fileFormats to be an array.\\n\\n\",\n \"27\": \"radialGradient requries at least 2 color-stops to properly render.\\n\\n\",\n \"28\": \"Please supply a filename to retinaImage() as the first argument.\\n\\n\",\n \"29\": \"Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\\n\\n\",\n \"30\": \"Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\\n\\n\",\n \"31\": \"The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\\n\\n\",\n \"32\": \"To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\\n\\n\",\n \"33\": \"The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\\n\\n\",\n \"34\": \"borderRadius expects a radius value as a string or number as the second argument.\\n\\n\",\n \"35\": \"borderRadius expects one of \\\"top\\\", \\\"bottom\\\", \\\"left\\\" or \\\"right\\\" as the first argument.\\n\\n\",\n \"36\": \"Property must be a string value.\\n\\n\",\n \"37\": \"Syntax Error at %s.\\n\\n\",\n \"38\": \"Formula contains a function that needs parentheses at %s.\\n\\n\",\n \"39\": \"Formula is missing closing parenthesis at %s.\\n\\n\",\n \"40\": \"Formula has too many closing parentheses at %s.\\n\\n\",\n \"41\": \"All values in a formula must have the same unit or be unitless.\\n\\n\",\n \"42\": \"Please provide a number of steps to the modularScale helper.\\n\\n\",\n \"43\": \"Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\\n\\n\",\n \"44\": \"Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\\n\\n\",\n \"45\": \"Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\\n\\n\",\n \"46\": \"Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\\n\\n\",\n \"47\": \"minScreen and maxScreen must be provided as stringified numbers with the same units.\\n\\n\",\n \"48\": \"fromSize and toSize must be provided as stringified numbers with the same units.\\n\\n\",\n \"49\": \"Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\\n\\n\",\n \"50\": \"Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\\n\\n\",\n \"51\": \"Expects the first argument object to have the properties prop, fromSize, and toSize.\\n\\n\",\n \"52\": \"fontFace expects either the path to the font file(s) or a name of a local copy.\\n\\n\",\n \"53\": \"fontFace expects localFonts to be an array.\\n\\n\",\n \"54\": \"fontFace expects fileFormats to be an array.\\n\\n\",\n \"55\": \"fontFace expects a name of a font-family.\\n\\n\",\n \"56\": \"linearGradient requries at least 2 color-stops to properly render.\\n\\n\",\n \"57\": \"radialGradient requries at least 2 color-stops to properly render.\\n\\n\",\n \"58\": \"Please supply a filename to retinaImage() as the first argument.\\n\\n\",\n \"59\": \"Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\\n\\n\",\n \"60\": \"Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\\n\\n\",\n \"61\": \"Property must be a string value.\\n\\n\",\n \"62\": \"borderRadius expects a radius value as a string or number as the second argument.\\n\\n\",\n \"63\": \"borderRadius expects one of \\\"top\\\", \\\"bottom\\\", \\\"left\\\" or \\\"right\\\" as the first argument.\\n\\n\",\n \"64\": \"The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\\n\\n\",\n \"65\": \"To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\\n\\n\",\n \"66\": \"The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\\n\\n\",\n \"67\": \"You must provide a template to this method.\\n\\n\",\n \"68\": \"You passed an unsupported selector state to this method.\\n\\n\",\n \"69\": \"Expected a string ending in \\\"px\\\" or a number passed as the first argument to %s(), got %s instead.\\n\\n\",\n \"70\": \"Expected a string ending in \\\"px\\\" or a number passed as the second argument to %s(), got %s instead.\\n\\n\",\n \"71\": \"Passed invalid pixel value %s to %s(), please pass a value like \\\"12px\\\" or 12.\\n\\n\",\n \"72\": \"Passed invalid base value %s to %s(), please pass a value like \\\"12px\\\" or 12.\\n\\n\",\n \"73\": \"Please provide a valid CSS variable.\\n\\n\",\n \"74\": \"CSS variable not found and no default was provided.\\n\\n\",\n \"75\": \"important requires a valid style object, got a %s instead.\\n\\n\",\n \"76\": \"fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\\n\\n\",\n \"77\": \"remToPx expects a value in \\\"rem\\\" but you provided it in \\\"%s\\\".\\n\\n\",\n \"78\": \"base must be set in \\\"px\\\" or \\\"%\\\" but you set it in \\\"%s\\\".\\n\"\n};\n\n/**\n * super basic version of sprintf\n * @private\n */\nfunction format() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n var a = args[0];\n var b = [];\n var c;\n for (c = 1; c < args.length; c += 1) {\n b.push(args[c]);\n }\n b.forEach(function (d) {\n a = a.replace(/%[a-z]/, d);\n });\n return a;\n}\n\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n * @private\n */\nvar PolishedError = /*#__PURE__*/function (_Error) {\n _inheritsLoose(PolishedError, _Error);\n function PolishedError(code) {\n var _this;\n if (process.env.NODE_ENV === 'production') {\n _this = _Error.call(this, \"An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#\" + code + \" for more information.\") || this;\n } else {\n for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n args[_key2 - 1] = arguments[_key2];\n }\n _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;\n }\n return _assertThisInitialized(_this);\n }\n return PolishedError;\n}(/*#__PURE__*/_wrapNativeSuper(Error));\nvar unitRegExp = /((?!\\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|s(?!\\D|$)|ged|darg?|nrut)/g;\n\n// Merges additional math functionality into the defaults.\nfunction mergeSymbolMaps(additionalSymbols) {\n var symbolMap = {};\n symbolMap.symbols = additionalSymbols ? _extends({}, defaultSymbolMap.symbols, additionalSymbols.symbols) : _extends({}, defaultSymbolMap.symbols);\n return symbolMap;\n}\nfunction exec(operators, values) {\n var _ref;\n var op = operators.pop();\n values.push(op.f.apply(op, (_ref = []).concat.apply(_ref, values.splice(-op.argCount))));\n return op.precedence;\n}\nfunction calculate(expression, additionalSymbols) {\n var symbolMap = mergeSymbolMaps(additionalSymbols);\n var match;\n var operators = [symbolMap.symbols['('].prefix];\n var values = [];\n var pattern = new RegExp(\n // Pattern for numbers\n \"\\\\d+(?:\\\\.\\\\d+)?|\" +\n // ...and patterns for individual operators/function names\n Object.keys(symbolMap.symbols).map(function (key) {\n return symbolMap.symbols[key];\n })\n // longer symbols should be listed first\n // $FlowFixMe\n .sort(function (a, b) {\n return b.symbol.length - a.symbol.length;\n })\n // $FlowFixMe\n .map(function (val) {\n return val.regSymbol;\n }).join('|') + \"|(\\\\S)\", 'g');\n pattern.lastIndex = 0; // Reset regular expression object\n\n var afterValue = false;\n do {\n match = pattern.exec(expression);\n var _ref2 = match || [')', undefined],\n token = _ref2[0],\n bad = _ref2[1];\n var notNumber = symbolMap.symbols[token];\n var notNewValue = notNumber && !notNumber.prefix && !notNumber.func;\n var notAfterValue = !notNumber || !notNumber.postfix && !notNumber.infix;\n\n // Check for syntax errors:\n if (bad || (afterValue ? notAfterValue : notNewValue)) {\n throw new PolishedError(37, match ? match.index : expression.length, expression);\n }\n if (afterValue) {\n // We either have an infix or postfix operator (they should be mutually exclusive)\n var curr = notNumber.postfix || notNumber.infix;\n do {\n var prev = operators[operators.length - 1];\n if ((curr.precedence - prev.precedence || prev.rightToLeft) > 0) break;\n // Apply previous operator, since it has precedence over current one\n } while (exec(operators, values)); // Exit loop after executing an opening parenthesis or function\n afterValue = curr.notation === 'postfix';\n if (curr.symbol !== ')') {\n operators.push(curr);\n // Postfix always has precedence over any operator that follows after it\n if (afterValue) exec(operators, values);\n }\n } else if (notNumber) {\n // prefix operator or function\n operators.push(notNumber.prefix || notNumber.func);\n if (notNumber.func) {\n // Require an opening parenthesis\n match = pattern.exec(expression);\n if (!match || match[0] !== '(') {\n throw new PolishedError(38, match ? match.index : expression.length, expression);\n }\n }\n } else {\n // number\n values.push(+token);\n afterValue = true;\n }\n } while (match && operators.length);\n if (operators.length) {\n throw new PolishedError(39, match ? match.index : expression.length, expression);\n } else if (match) {\n throw new PolishedError(40, match ? match.index : expression.length, expression);\n } else {\n return values.pop();\n }\n}\nfunction reverseString(str) {\n return str.split('').reverse().join('');\n}\n\n/**\n * Helper for doing math with CSS Units. Accepts a formula as a string. All values in the formula must have the same unit (or be unitless). Supports complex formulas utliziing addition, subtraction, multiplication, division, square root, powers, factorial, min, max, as well as parentheses for order of operation.\n *\n *In cases where you need to do calculations with mixed units where one unit is a [relative length unit](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units), you will want to use [CSS Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).\n *\n * *warning* While we've done everything possible to ensure math safely evalutes formulas expressed as strings, you should always use extreme caution when passing `math` user provided values.\n * @example\n * // Styles as object usage\n * const styles = {\n * fontSize: math('12rem + 8rem'),\n * fontSize: math('(12px + 2px) * 3'),\n * fontSize: math('3px^2 + sqrt(4)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * fontSize: ${math('12rem + 8rem')};\n * fontSize: ${math('(12px + 2px) * 3')};\n * fontSize: ${math('3px^2 + sqrt(4)')};\n * `\n *\n * // CSS as JS Output\n *\n * div: {\n * fontSize: '20rem',\n * fontSize: '42px',\n * fontSize: '11px',\n * }\n */\nfunction math(formula, additionalSymbols) {\n var reversedFormula = reverseString(formula);\n var formulaMatch = reversedFormula.match(unitRegExp);\n\n // Check that all units are the same\n if (formulaMatch && !formulaMatch.every(function (unit) {\n return unit === formulaMatch[0];\n })) {\n throw new PolishedError(41);\n }\n var cleanFormula = reverseString(reversedFormula.replace(unitRegExp, ''));\n return \"\" + calculate(cleanFormula, additionalSymbols) + (formulaMatch ? reverseString(formulaMatch[0]) : '');\n}\nvar cssVariableRegex = /--[\\S]*/g;\n\n/**\n * Fetches the value of a passed CSS Variable in the :root scope, or otherwise returns a defaultValue if provided.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * 'background': cssVar('--background-color'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${cssVar('--background-color')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * 'background': 'red'\n * }\n */\nfunction cssVar(cssVariable, defaultValue) {\n if (!cssVariable || !cssVariable.match(cssVariableRegex)) {\n throw new PolishedError(73);\n }\n var variableValue;\n\n /* eslint-disable */\n /* istanbul ignore next */\n if (typeof document !== 'undefined' && document.documentElement !== null) {\n variableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable);\n }\n /* eslint-enable */\n\n if (variableValue) {\n return variableValue.trim();\n } else if (defaultValue) {\n return defaultValue;\n }\n throw new PolishedError(74);\n}\n\n// @private\nfunction capitalizeString(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\nvar positionMap$1 = ['Top', 'Right', 'Bottom', 'Left'];\nfunction generateProperty(property, position) {\n if (!property) return position.toLowerCase();\n var splitProperty = property.split('-');\n if (splitProperty.length > 1) {\n splitProperty.splice(1, 0, position);\n return splitProperty.reduce(function (acc, val) {\n return \"\" + acc + capitalizeString(val);\n });\n }\n var joinedProperty = property.replace(/([a-z])([A-Z])/g, \"$1\" + position + \"$2\");\n return property === joinedProperty ? \"\" + property + position : joinedProperty;\n}\nfunction generateStyles(property, valuesWithDefaults) {\n var styles = {};\n for (var i = 0; i < valuesWithDefaults.length; i += 1) {\n if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {\n styles[generateProperty(property, positionMap$1[i])] = valuesWithDefaults[i];\n }\n }\n return styles;\n}\n\n/**\n * Enables shorthand for direction-based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...directionalProperty('padding', '12px', '24px', '36px', '48px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${directionalProperty('padding', '12px', '24px', '36px', '48px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'paddingTop': '12px',\n * 'paddingRight': '24px',\n * 'paddingBottom': '36px',\n * 'paddingLeft': '48px'\n * }\n */\nfunction directionalProperty(property) {\n for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n values[_key - 1] = arguments[_key];\n }\n // prettier-ignore\n var firstValue = values[0],\n _values$ = values[1],\n secondValue = _values$ === void 0 ? firstValue : _values$,\n _values$2 = values[2],\n thirdValue = _values$2 === void 0 ? firstValue : _values$2,\n _values$3 = values[3],\n fourthValue = _values$3 === void 0 ? secondValue : _values$3;\n var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];\n return generateStyles(property, valuesWithDefaults);\n}\n\n/**\n * Check if a string ends with something\n * @private\n */\nfunction endsWith(string, suffix) {\n return string.substr(-suffix.length) === suffix;\n}\nvar cssRegex$1 = /^([+-]?(?:\\d+|\\d*\\.\\d+))([a-z]*|%)$/;\n\n/**\n * Returns a given CSS value minus its unit of measure.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * '--dimension': stripUnit('100px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * --dimension: ${stripUnit('100px')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * '--dimension': 100\n * }\n */\nfunction stripUnit(value) {\n if (typeof value !== 'string') return value;\n var matchedValue = value.match(cssRegex$1);\n return matchedValue ? parseFloat(value) : value;\n}\n\n/**\n * Factory function that creates pixel-to-x converters\n * @private\n */\nvar pxtoFactory = function pxtoFactory(to) {\n return function (pxval, base) {\n if (base === void 0) {\n base = '16px';\n }\n var newPxval = pxval;\n var newBase = base;\n if (typeof pxval === 'string') {\n if (!endsWith(pxval, 'px')) {\n throw new PolishedError(69, to, pxval);\n }\n newPxval = stripUnit(pxval);\n }\n if (typeof base === 'string') {\n if (!endsWith(base, 'px')) {\n throw new PolishedError(70, to, base);\n }\n newBase = stripUnit(base);\n }\n if (typeof newPxval === 'string') {\n throw new PolishedError(71, pxval, to);\n }\n if (typeof newBase === 'string') {\n throw new PolishedError(72, base, to);\n }\n return \"\" + newPxval / newBase + to;\n };\n};\nvar pixelsto = pxtoFactory;\n\n/**\n * Convert pixel value to ems. The default base value is 16px, but can be changed by passing a\n * second argument to the function.\n * @function\n * @param {string|number} pxval\n * @param {string|number} [base='16px']\n * @example\n * // Styles as object usage\n * const styles = {\n * 'height': em('16px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * height: ${em('16px')}\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * 'height': '1em'\n * }\n */\nvar em = pixelsto('em');\nvar em$1 = em;\nvar cssRegex = /^([+-]?(?:\\d+|\\d*\\.\\d+))([a-z]*|%)$/;\n\n/**\n * Returns a given CSS value and its unit as elements of an array.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * '--dimension': getValueAndUnit('100px')[0],\n * '--unit': getValueAndUnit('100px')[1],\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * --dimension: ${getValueAndUnit('100px')[0]};\n * --unit: ${getValueAndUnit('100px')[1]};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * '--dimension': 100,\n * '--unit': 'px',\n * }\n */\nfunction getValueAndUnit(value) {\n if (typeof value !== 'string') return [value, ''];\n var matchedValue = value.match(cssRegex);\n if (matchedValue) return [parseFloat(value), matchedValue[2]];\n return [value, undefined];\n}\n\n/**\n * Helper for targeting rules in a style block generated by polished modules that need !important-level specificity. Can optionally specify a rule (or rules) to target specific rules.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...important(cover())\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${important(cover())}\n * `\n *\n * // CSS as JS Output\n *\n * div: {\n * 'position': 'absolute !important',\n * 'top': '0 !important',\n * 'right: '0 !important',\n * 'bottom': '0 !important',\n * 'left: '0 !important'\n * }\n */\nfunction important(styleBlock, rules) {\n if (typeof styleBlock !== 'object' || styleBlock === null) {\n throw new PolishedError(75, typeof styleBlock);\n }\n var newStyleBlock = {};\n Object.keys(styleBlock).forEach(function (key) {\n if (typeof styleBlock[key] === 'object' && styleBlock[key] !== null) {\n newStyleBlock[key] = important(styleBlock[key], rules);\n } else if (!rules || rules && (rules === key || rules.indexOf(key) >= 0)) {\n newStyleBlock[key] = styleBlock[key] + \" !important\";\n } else {\n newStyleBlock[key] = styleBlock[key];\n }\n });\n return newStyleBlock;\n}\nvar ratioNames = {\n minorSecond: 1.067,\n majorSecond: 1.125,\n minorThird: 1.2,\n majorThird: 1.25,\n perfectFourth: 1.333,\n augFourth: 1.414,\n perfectFifth: 1.5,\n minorSixth: 1.6,\n goldenSection: 1.618,\n majorSixth: 1.667,\n minorSeventh: 1.778,\n majorSeventh: 1.875,\n octave: 2,\n majorTenth: 2.5,\n majorEleventh: 2.667,\n majorTwelfth: 3,\n doubleOctave: 4\n};\nfunction getRatio(ratioName) {\n return ratioNames[ratioName];\n}\n\n/**\n * Establish consistent measurements and spacial relationships throughout your projects by incrementing an em or rem value up or down a defined scale. We provide a list of commonly used scales as pre-defined variables.\n * @example\n * // Styles as object usage\n * const styles = {\n * // Increment two steps up the default scale\n * 'fontSize': modularScale(2)\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * // Increment two steps up the default scale\n * fontSize: ${modularScale(2)}\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * 'fontSize': '1.77689em'\n * }\n */\nfunction modularScale(steps, base, ratio) {\n if (base === void 0) {\n base = '1em';\n }\n if (ratio === void 0) {\n ratio = 1.333;\n }\n if (typeof steps !== 'number') {\n throw new PolishedError(42);\n }\n if (typeof ratio === 'string' && !ratioNames[ratio]) {\n throw new PolishedError(43);\n }\n var _ref = typeof base === 'string' ? getValueAndUnit(base) : [base, ''],\n realBase = _ref[0],\n unit = _ref[1];\n var realRatio = typeof ratio === 'string' ? getRatio(ratio) : ratio;\n if (typeof realBase === 'string') {\n throw new PolishedError(44, base);\n }\n return \"\" + realBase * Math.pow(realRatio, steps) + (unit || '');\n}\n\n/**\n * Convert pixel value to rems. The default base value is 16px, but can be changed by passing a\n * second argument to the function.\n * @function\n * @param {string|number} pxval\n * @param {string|number} [base='16px']\n * @example\n * // Styles as object usage\n * const styles = {\n * 'height': rem('16px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * height: ${rem('16px')}\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * 'height': '1rem'\n * }\n */\nvar rem = pixelsto('rem');\nvar rem$1 = rem;\nvar defaultFontSize = 16;\nfunction convertBase(base) {\n var deconstructedValue = getValueAndUnit(base);\n if (deconstructedValue[1] === 'px') {\n return parseFloat(base);\n }\n if (deconstructedValue[1] === '%') {\n return parseFloat(base) / 100 * defaultFontSize;\n }\n throw new PolishedError(78, deconstructedValue[1]);\n}\nfunction getBaseFromDoc() {\n /* eslint-disable */\n /* istanbul ignore next */\n if (typeof document !== 'undefined' && document.documentElement !== null) {\n var rootFontSize = getComputedStyle(document.documentElement).fontSize;\n return rootFontSize ? convertBase(rootFontSize) : defaultFontSize;\n }\n /* eslint-enable */\n /* istanbul ignore next */\n return defaultFontSize;\n}\n\n/**\n * Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.\n * @example\n * // Styles as object usage\n * const styles = {\n * 'height': remToPx('1.6rem')\n * 'height': remToPx('1.6rem', '10px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * height: ${remToPx('1.6rem')}\n * height: ${remToPx('1.6rem', '10px')}\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * 'height': '25.6px',\n * 'height': '16px',\n * }\n */\nfunction remToPx(value, base) {\n var deconstructedValue = getValueAndUnit(value);\n if (deconstructedValue[1] !== 'rem' && deconstructedValue[1] !== '') {\n throw new PolishedError(77, deconstructedValue[1]);\n }\n var newBase = base ? convertBase(base) : getBaseFromDoc();\n return deconstructedValue[0] * newBase + \"px\";\n}\nvar functionsMap$3 = {\n back: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n circ: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n cubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n expo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n quad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n quart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n quint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n sine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)'\n};\n\n/**\n * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * 'transitionTimingFunction': easeIn('quad')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * transitionTimingFunction: ${easeIn('quad')};\n * `\n *\n * // CSS as JS Output\n *\n * 'div': {\n * 'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n * }\n */\nfunction easeIn(functionName) {\n return functionsMap$3[functionName.toLowerCase().trim()];\n}\nvar functionsMap$2 = {\n back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'\n};\n\n/**\n * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * 'transitionTimingFunction': easeInOut('quad')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * transitionTimingFunction: ${easeInOut('quad')};\n * `\n *\n * // CSS as JS Output\n *\n * 'div': {\n * 'transitionTimingFunction': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n * }\n */\nfunction easeInOut(functionName) {\n return functionsMap$2[functionName.toLowerCase().trim()];\n}\nvar functionsMap$1 = {\n back: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n cubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n circ: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n expo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n quad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n quart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n quint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n sine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)'\n};\n\n/**\n * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * 'transitionTimingFunction': easeOut('quad')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * transitionTimingFunction: ${easeOut('quad')};\n * `\n *\n * // CSS as JS Output\n *\n * 'div': {\n * 'transitionTimingFunction': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n * }\n */\nfunction easeOut(functionName) {\n return functionsMap$1[functionName.toLowerCase().trim()];\n}\n\n/**\n * Returns a CSS calc formula for linear interpolation of a property between two values. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px').\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * fontSize: between('20px', '100px', '400px', '1000px'),\n * fontSize: between('20px', '100px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * fontSize: ${between('20px', '100px', '400px', '1000px')};\n * fontSize: ${between('20px', '100px')}\n * `\n *\n * // CSS as JS Output\n *\n * h1: {\n * 'fontSize': 'calc(-33.33333333333334px + 13.333333333333334vw)',\n * 'fontSize': 'calc(-9.090909090909093px + 9.090909090909092vw)'\n * }\n */\nfunction between(fromSize, toSize, minScreen, maxScreen) {\n if (minScreen === void 0) {\n minScreen = '320px';\n }\n if (maxScreen === void 0) {\n maxScreen = '1200px';\n }\n var _getValueAndUnit = getValueAndUnit(fromSize),\n unitlessFromSize = _getValueAndUnit[0],\n fromSizeUnit = _getValueAndUnit[1];\n var _getValueAndUnit2 = getValueAndUnit(toSize),\n unitlessToSize = _getValueAndUnit2[0],\n toSizeUnit = _getValueAndUnit2[1];\n var _getValueAndUnit3 = getValueAndUnit(minScreen),\n unitlessMinScreen = _getValueAndUnit3[0],\n minScreenUnit = _getValueAndUnit3[1];\n var _getValueAndUnit4 = getValueAndUnit(maxScreen),\n unitlessMaxScreen = _getValueAndUnit4[0],\n maxScreenUnit = _getValueAndUnit4[1];\n if (typeof unitlessMinScreen !== 'number' || typeof unitlessMaxScreen !== 'number' || !minScreenUnit || !maxScreenUnit || minScreenUnit !== maxScreenUnit) {\n throw new PolishedError(47);\n }\n if (typeof unitlessFromSize !== 'number' || typeof unitlessToSize !== 'number' || fromSizeUnit !== toSizeUnit) {\n throw new PolishedError(48);\n }\n if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {\n throw new PolishedError(76);\n }\n var slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen);\n var base = unitlessToSize - slope * unitlessMaxScreen;\n return \"calc(\" + base.toFixed(2) + (fromSizeUnit || '') + \" + \" + (100 * slope).toFixed(2) + \"vw)\";\n}\n\n/**\n * CSS to contain a float (credit to CSSMojo).\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...clearFix(),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${clearFix()}\n * `\n *\n * // CSS as JS Output\n *\n * '&::after': {\n * 'clear': 'both',\n * 'content': '\"\"',\n * 'display': 'table'\n * }\n */\nfunction clearFix(parent) {\n var _ref;\n if (parent === void 0) {\n parent = '&';\n }\n var pseudoSelector = parent + \"::after\";\n return _ref = {}, _ref[pseudoSelector] = {\n clear: 'both',\n content: '\"\"',\n display: 'table'\n }, _ref;\n}\n\n/**\n * CSS to fully cover an area. Can optionally be passed an offset to act as a \"padding\".\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...cover()\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${cover()}\n * `\n *\n * // CSS as JS Output\n *\n * div: {\n * 'position': 'absolute',\n * 'top': '0',\n * 'right: '0',\n * 'bottom': '0',\n * 'left: '0'\n * }\n */\nfunction cover(offset) {\n if (offset === void 0) {\n offset = 0;\n }\n return {\n position: 'absolute',\n top: offset,\n right: offset,\n bottom: offset,\n left: offset\n };\n}\n\n/**\n * CSS to represent truncated text with an ellipsis. You can optionally pass a max-width and number of lines before truncating.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...ellipsis('250px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${ellipsis('250px')}\n * `\n *\n * // CSS as JS Output\n *\n * div: {\n * 'display': 'inline-block',\n * 'maxWidth': '250px',\n * 'overflow': 'hidden',\n * 'textOverflow': 'ellipsis',\n * 'whiteSpace': 'nowrap',\n * 'wordWrap': 'normal'\n * }\n */\nfunction ellipsis(width, lines) {\n if (lines === void 0) {\n lines = 1;\n }\n var styles = {\n display: 'inline-block',\n maxWidth: width || '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n wordWrap: 'normal'\n };\n return lines > 1 ? _extends({}, styles, {\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: lines,\n display: '-webkit-box',\n whiteSpace: 'normal'\n }) : styles;\n}\nfunction _createForOfIteratorHelperLoose(o, allowArrayLike) {\n var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"];\n if (it) return (it = it.call(o)).next.bind(it);\n if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") {\n if (it) o = it;\n var i = 0;\n return function () {\n if (i >= o.length) return {\n done: true\n };\n return {\n done: false,\n value: o[i++]\n };\n };\n }\n throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n return arr2;\n}\n/**\n * Returns a set of media queries that resizes a property (or set of properties) between a provided fromSize and toSize. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px') to constrain the interpolation.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...fluidRange(\n * {\n * prop: 'padding',\n * fromSize: '20px',\n * toSize: '100px',\n * },\n * '400px',\n * '1000px',\n * )\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${fluidRange(\n * {\n * prop: 'padding',\n * fromSize: '20px',\n * toSize: '100px',\n * },\n * '400px',\n * '1000px',\n * )}\n * `\n *\n * // CSS as JS Output\n *\n * div: {\n * \"@media (min-width: 1000px)\": Object {\n * \"padding\": \"100px\",\n * },\n * \"@media (min-width: 400px)\": Object {\n * \"padding\": \"calc(-33.33333333333334px + 13.333333333333334vw)\",\n * },\n * \"padding\": \"20px\",\n * }\n */\nfunction fluidRange(cssProp, minScreen, maxScreen) {\n if (minScreen === void 0) {\n minScreen = '320px';\n }\n if (maxScreen === void 0) {\n maxScreen = '1200px';\n }\n if (!Array.isArray(cssProp) && typeof cssProp !== 'object' || cssProp === null) {\n throw new PolishedError(49);\n }\n if (Array.isArray(cssProp)) {\n var mediaQueries = {};\n var fallbacks = {};\n for (var _iterator = _createForOfIteratorHelperLoose(cssProp), _step; !(_step = _iterator()).done;) {\n var _extends2, _extends3;\n var obj = _step.value;\n if (!obj.prop || !obj.fromSize || !obj.toSize) {\n throw new PolishedError(50);\n }\n fallbacks[obj.prop] = obj.fromSize;\n mediaQueries[\"@media (min-width: \" + minScreen + \")\"] = _extends({}, mediaQueries[\"@media (min-width: \" + minScreen + \")\"], (_extends2 = {}, _extends2[obj.prop] = between(obj.fromSize, obj.toSize, minScreen, maxScreen), _extends2));\n mediaQueries[\"@media (min-width: \" + maxScreen + \")\"] = _extends({}, mediaQueries[\"@media (min-width: \" + maxScreen + \")\"], (_extends3 = {}, _extends3[obj.prop] = obj.toSize, _extends3));\n }\n return _extends({}, fallbacks, mediaQueries);\n } else {\n var _ref, _ref2, _ref3;\n if (!cssProp.prop || !cssProp.fromSize || !cssProp.toSize) {\n throw new PolishedError(51);\n }\n return _ref3 = {}, _ref3[cssProp.prop] = cssProp.fromSize, _ref3[\"@media (min-width: \" + minScreen + \")\"] = (_ref = {}, _ref[cssProp.prop] = between(cssProp.fromSize, cssProp.toSize, minScreen, maxScreen), _ref), _ref3[\"@media (min-width: \" + maxScreen + \")\"] = (_ref2 = {}, _ref2[cssProp.prop] = cssProp.toSize, _ref2), _ref3;\n }\n}\nvar dataURIRegex = /^\\s*data:([a-z]+\\/[a-z-]+(;[a-z-]+=[a-z-]+)?)?(;charset=[a-z0-9-]+)?(;base64)?,[a-z0-9!$&',()*+,;=\\-._~:@/?%\\s]*\\s*$/i;\nvar formatHintMap = {\n woff: 'woff',\n woff2: 'woff2',\n ttf: 'truetype',\n otf: 'opentype',\n eot: 'embedded-opentype',\n svg: 'svg',\n svgz: 'svg'\n};\nfunction generateFormatHint(format, formatHint) {\n if (!formatHint) return '';\n return \" format(\\\"\" + formatHintMap[format] + \"\\\")\";\n}\nfunction isDataURI(fontFilePath) {\n return !!fontFilePath.replace(/\\s+/g, ' ').match(dataURIRegex);\n}\nfunction generateFileReferences(fontFilePath, fileFormats, formatHint) {\n if (isDataURI(fontFilePath)) {\n return \"url(\\\"\" + fontFilePath + \"\\\")\" + generateFormatHint(fileFormats[0], formatHint);\n }\n var fileFontReferences = fileFormats.map(function (format) {\n return \"url(\\\"\" + fontFilePath + \".\" + format + \"\\\")\" + generateFormatHint(format, formatHint);\n });\n return fileFontReferences.join(', ');\n}\nfunction generateLocalReferences(localFonts) {\n var localFontReferences = localFonts.map(function (font) {\n return \"local(\\\"\" + font + \"\\\")\";\n });\n return localFontReferences.join(', ');\n}\nfunction generateSources(fontFilePath, localFonts, fileFormats, formatHint) {\n var fontReferences = [];\n if (localFonts) fontReferences.push(generateLocalReferences(localFonts));\n if (fontFilePath) {\n fontReferences.push(generateFileReferences(fontFilePath, fileFormats, formatHint));\n }\n return fontReferences.join(', ');\n}\n\n/**\n * CSS for a @font-face declaration. Defaults to check for local copies of the font on the user's machine. You can disable this by passing `null` to localFonts.\n *\n * @example\n * // Styles as object basic usage\n * const styles = {\n * ...fontFace({\n * 'fontFamily': 'Sans-Pro',\n * 'fontFilePath': 'path/to/file'\n * })\n * }\n *\n * // styled-components basic usage\n * const GlobalStyle = createGlobalStyle`${\n * fontFace({\n * 'fontFamily': 'Sans-Pro',\n * 'fontFilePath': 'path/to/file'\n * }\n * )}`\n *\n * // CSS as JS Output\n *\n * '@font-face': {\n * 'fontFamily': 'Sans-Pro',\n * 'src': 'url(\"path/to/file.eot\"), url(\"path/to/file.woff2\"), url(\"path/to/file.woff\"), url(\"path/to/file.ttf\"), url(\"path/to/file.svg\")',\n * }\n */\n\nfunction fontFace(_ref) {\n var fontFamily = _ref.fontFamily,\n fontFilePath = _ref.fontFilePath,\n fontStretch = _ref.fontStretch,\n fontStyle = _ref.fontStyle,\n fontVariant = _ref.fontVariant,\n fontWeight = _ref.fontWeight,\n _ref$fileFormats = _ref.fileFormats,\n fileFormats = _ref$fileFormats === void 0 ? ['eot', 'woff2', 'woff', 'ttf', 'svg'] : _ref$fileFormats,\n _ref$formatHint = _ref.formatHint,\n formatHint = _ref$formatHint === void 0 ? false : _ref$formatHint,\n _ref$localFonts = _ref.localFonts,\n localFonts = _ref$localFonts === void 0 ? [fontFamily] : _ref$localFonts,\n unicodeRange = _ref.unicodeRange,\n fontDisplay = _ref.fontDisplay,\n fontVariationSettings = _ref.fontVariationSettings,\n fontFeatureSettings = _ref.fontFeatureSettings;\n // Error Handling\n if (!fontFamily) throw new PolishedError(55);\n if (!fontFilePath && !localFonts) {\n throw new PolishedError(52);\n }\n if (localFonts && !Array.isArray(localFonts)) {\n throw new PolishedError(53);\n }\n if (!Array.isArray(fileFormats)) {\n throw new PolishedError(54);\n }\n var fontFaceDeclaration = {\n '@font-face': {\n fontFamily: fontFamily,\n src: generateSources(fontFilePath, localFonts, fileFormats, formatHint),\n unicodeRange: unicodeRange,\n fontStretch: fontStretch,\n fontStyle: fontStyle,\n fontVariant: fontVariant,\n fontWeight: fontWeight,\n fontDisplay: fontDisplay,\n fontVariationSettings: fontVariationSettings,\n fontFeatureSettings: fontFeatureSettings\n }\n };\n\n // Removes undefined fields for cleaner css object.\n return JSON.parse(JSON.stringify(fontFaceDeclaration));\n}\n\n/**\n * CSS to hide text to show a background image in a SEO-friendly way.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * 'backgroundImage': 'url(logo.png)',\n * ...hideText(),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * backgroundImage: url(logo.png);\n * ${hideText()};\n * `\n *\n * // CSS as JS Output\n *\n * 'div': {\n * 'backgroundImage': 'url(logo.png)',\n * 'textIndent': '101%',\n * 'overflow': 'hidden',\n * 'whiteSpace': 'nowrap',\n * }\n */\nfunction hideText() {\n return {\n textIndent: '101%',\n overflow: 'hidden',\n whiteSpace: 'nowrap'\n };\n}\n\n/**\n * CSS to hide content visually but remain accessible to screen readers.\n * from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/9a176f57af1cfe8ec70300da4621fb9b07e5fa31/src/css/main.css#L121)\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...hideVisually(),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${hideVisually()};\n * `\n *\n * // CSS as JS Output\n *\n * 'div': {\n * 'border': '0',\n * 'clip': 'rect(0 0 0 0)',\n * 'height': '1px',\n * 'margin': '-1px',\n * 'overflow': 'hidden',\n * 'padding': '0',\n * 'position': 'absolute',\n * 'whiteSpace': 'nowrap',\n * 'width': '1px',\n * }\n */\nfunction hideVisually() {\n return {\n border: '0',\n clip: 'rect(0 0 0 0)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0',\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1px'\n };\n}\n\n/**\n * Generates a media query to target HiDPI devices.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * [hiDPI(1.5)]: {\n * width: 200px;\n * }\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${hiDPI(1.5)} {\n * width: 200px;\n * }\n * `\n *\n * // CSS as JS Output\n *\n * '@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\n * only screen and (min--moz-device-pixel-ratio: 1.5),\n * only screen and (-o-min-device-pixel-ratio: 1.5/1),\n * only screen and (min-resolution: 144dpi),\n * only screen and (min-resolution: 1.5dppx)': {\n * 'width': '200px',\n * }\n */\nfunction hiDPI(ratio) {\n if (ratio === void 0) {\n ratio = 1.3;\n }\n return \"\\n @media only screen and (-webkit-min-device-pixel-ratio: \" + ratio + \"),\\n only screen and (min--moz-device-pixel-ratio: \" + ratio + \"),\\n only screen and (-o-min-device-pixel-ratio: \" + ratio + \"/1),\\n only screen and (min-resolution: \" + Math.round(ratio * 96) + \"dpi),\\n only screen and (min-resolution: \" + ratio + \"dppx)\\n \";\n}\nfunction constructGradientValue(literals) {\n var template = '';\n for (var _len = arguments.length, substitutions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n substitutions[_key - 1] = arguments[_key];\n }\n for (var i = 0; i < literals.length; i += 1) {\n template += literals[i];\n if (i === substitutions.length - 1 && substitutions[i]) {\n var definedValues = substitutions.filter(function (substitute) {\n return !!substitute;\n });\n // Adds leading coma if properties preceed color-stops\n if (definedValues.length > 1) {\n template = template.slice(0, -1);\n template += \", \" + substitutions[i];\n // No trailing space if color-stops is the only param provided\n } else if (definedValues.length === 1) {\n template += \"\" + substitutions[i];\n }\n } else if (substitutions[i]) {\n template += substitutions[i] + \" \";\n }\n }\n return template.trim();\n}\nvar _templateObject$1;\n/**\n * CSS for declaring a linear gradient, including a fallback background-color. The fallback is either the first color-stop or an explicitly passed fallback color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...linearGradient({\n colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],\n toDirection: 'to top right',\n fallback: '#FFF',\n })\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${linearGradient({\n colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],\n toDirection: 'to top right',\n fallback: '#FFF',\n })}\n *`\n *\n * // CSS as JS Output\n *\n * div: {\n * 'backgroundColor': '#FFF',\n * 'backgroundImage': 'linear-gradient(to top right, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%)',\n * }\n */\nfunction linearGradient(_ref) {\n var colorStops = _ref.colorStops,\n fallback = _ref.fallback,\n _ref$toDirection = _ref.toDirection,\n toDirection = _ref$toDirection === void 0 ? '' : _ref$toDirection;\n if (!colorStops || colorStops.length < 2) {\n throw new PolishedError(56);\n }\n return {\n backgroundColor: fallback || colorStops[0].replace(/,\\s+/g, ',').split(' ')[0].replace(/,(?=\\S)/g, ', '),\n backgroundImage: constructGradientValue(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose([\"linear-gradient(\", \"\", \")\"])), toDirection, colorStops.join(', ').replace(/,(?=\\S)/g, ', '))\n };\n}\n\n/**\n * CSS to normalize abnormalities across browsers (normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css)\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...normalize(),\n * }\n *\n * // styled-components usage\n * const GlobalStyle = createGlobalStyle`${normalize()}`\n *\n * // CSS as JS Output\n *\n * html {\n * lineHeight: 1.15,\n * textSizeAdjust: 100%,\n * } ...\n */\nfunction normalize() {\n var _ref;\n return [(_ref = {\n html: {\n lineHeight: '1.15',\n textSizeAdjust: '100%'\n },\n body: {\n margin: '0'\n },\n main: {\n display: 'block'\n },\n h1: {\n fontSize: '2em',\n margin: '0.67em 0'\n },\n hr: {\n boxSizing: 'content-box',\n height: '0',\n overflow: 'visible'\n },\n pre: {\n fontFamily: 'monospace, monospace',\n fontSize: '1em'\n },\n a: {\n backgroundColor: 'transparent'\n },\n 'abbr[title]': {\n borderBottom: 'none',\n textDecoration: 'underline'\n }\n }, _ref[\"b,\\n strong\"] = {\n fontWeight: 'bolder'\n }, _ref[\"code,\\n kbd,\\n samp\"] = {\n fontFamily: 'monospace, monospace',\n fontSize: '1em'\n }, _ref.small = {\n fontSize: '80%'\n }, _ref[\"sub,\\n sup\"] = {\n fontSize: '75%',\n lineHeight: '0',\n position: 'relative',\n verticalAlign: 'baseline'\n }, _ref.sub = {\n bottom: '-0.25em'\n }, _ref.sup = {\n top: '-0.5em'\n }, _ref.img = {\n borderStyle: 'none'\n }, _ref[\"button,\\n input,\\n optgroup,\\n select,\\n textarea\"] = {\n fontFamily: 'inherit',\n fontSize: '100%',\n lineHeight: '1.15',\n margin: '0'\n }, _ref[\"button,\\n input\"] = {\n overflow: 'visible'\n }, _ref[\"button,\\n select\"] = {\n textTransform: 'none'\n }, _ref[\"button,\\n html [type=\\\"button\\\"],\\n [type=\\\"reset\\\"],\\n [type=\\\"submit\\\"]\"] = {\n WebkitAppearance: 'button'\n }, _ref[\"button::-moz-focus-inner,\\n [type=\\\"button\\\"]::-moz-focus-inner,\\n [type=\\\"reset\\\"]::-moz-focus-inner,\\n [type=\\\"submit\\\"]::-moz-focus-inner\"] = {\n borderStyle: 'none',\n padding: '0'\n }, _ref[\"button:-moz-focusring,\\n [type=\\\"button\\\"]:-moz-focusring,\\n [type=\\\"reset\\\"]:-moz-focusring,\\n [type=\\\"submit\\\"]:-moz-focusring\"] = {\n outline: '1px dotted ButtonText'\n }, _ref.fieldset = {\n padding: '0.35em 0.625em 0.75em'\n }, _ref.legend = {\n boxSizing: 'border-box',\n color: 'inherit',\n display: 'table',\n maxWidth: '100%',\n padding: '0',\n whiteSpace: 'normal'\n }, _ref.progress = {\n verticalAlign: 'baseline'\n }, _ref.textarea = {\n overflow: 'auto'\n }, _ref[\"[type=\\\"checkbox\\\"],\\n [type=\\\"radio\\\"]\"] = {\n boxSizing: 'border-box',\n padding: '0'\n }, _ref[\"[type=\\\"number\\\"]::-webkit-inner-spin-button,\\n [type=\\\"number\\\"]::-webkit-outer-spin-button\"] = {\n height: 'auto'\n }, _ref['[type=\"search\"]'] = {\n WebkitAppearance: 'textfield',\n outlineOffset: '-2px'\n }, _ref['[type=\"search\"]::-webkit-search-decoration'] = {\n WebkitAppearance: 'none'\n }, _ref['::-webkit-file-upload-button'] = {\n WebkitAppearance: 'button',\n font: 'inherit'\n }, _ref.details = {\n display: 'block'\n }, _ref.summary = {\n display: 'list-item'\n }, _ref.template = {\n display: 'none'\n }, _ref['[hidden]'] = {\n display: 'none'\n }, _ref), {\n 'abbr[title]': {\n textDecoration: 'underline dotted'\n }\n }];\n}\nvar _templateObject;\n/**\n * CSS for declaring a radial gradient, including a fallback background-color. The fallback is either the first color-stop or an explicitly passed fallback color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...radialGradient({\n * colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],\n * extent: 'farthest-corner at 45px 45px',\n * position: 'center',\n * shape: 'ellipse',\n * })\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${radialGradient({\n * colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],\n * extent: 'farthest-corner at 45px 45px',\n * position: 'center',\n * shape: 'ellipse',\n * })}\n *`\n *\n * // CSS as JS Output\n *\n * div: {\n * 'backgroundColor': '#00FFFF',\n * 'backgroundImage': 'radial-gradient(center ellipse farthest-corner at 45px 45px, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%)',\n * }\n */\nfunction radialGradient(_ref) {\n var colorStops = _ref.colorStops,\n _ref$extent = _ref.extent,\n extent = _ref$extent === void 0 ? '' : _ref$extent,\n fallback = _ref.fallback,\n _ref$position = _ref.position,\n position = _ref$position === void 0 ? '' : _ref$position,\n _ref$shape = _ref.shape,\n shape = _ref$shape === void 0 ? '' : _ref$shape;\n if (!colorStops || colorStops.length < 2) {\n throw new PolishedError(57);\n }\n return {\n backgroundColor: fallback || colorStops[0].split(' ')[0],\n backgroundImage: constructGradientValue(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([\"radial-gradient(\", \"\", \"\", \"\", \")\"])), position, shape, extent, colorStops.join(', '))\n };\n}\n\n/**\n * A helper to generate a retina background image and non-retina\n * background image. The retina background image will output to a HiDPI media query. The mixin uses\n * a _2x.png filename suffix by default.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...retinaImage('my-img')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${retinaImage('my-img')}\n * `\n *\n * // CSS as JS Output\n * div {\n * backgroundImage: 'url(my-img.png)',\n * '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),\n * only screen and (min--moz-device-pixel-ratio: 1.3),\n * only screen and (-o-min-device-pixel-ratio: 1.3/1),\n * only screen and (min-resolution: 144dpi),\n * only screen and (min-resolution: 1.5dppx)': {\n * backgroundImage: 'url(my-img_2x.png)',\n * }\n * }\n */\nfunction retinaImage(filename, backgroundSize, extension, retinaFilename, retinaSuffix) {\n var _ref;\n if (extension === void 0) {\n extension = 'png';\n }\n if (retinaSuffix === void 0) {\n retinaSuffix = '_2x';\n }\n if (!filename) {\n throw new PolishedError(58);\n }\n // Replace the dot at the beginning of the passed extension if one exists\n var ext = extension.replace(/^\\./, '');\n var rFilename = retinaFilename ? retinaFilename + \".\" + ext : \"\" + filename + retinaSuffix + \".\" + ext;\n return _ref = {\n backgroundImage: \"url(\" + filename + \".\" + ext + \")\"\n }, _ref[hiDPI()] = _extends({\n backgroundImage: \"url(\" + rFilename + \")\"\n }, backgroundSize ? {\n backgroundSize: backgroundSize\n } : {}), _ref;\n}\n\n/* eslint-disable key-spacing */\nvar functionsMap = {\n easeInBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n easeInCirc: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n easeInCubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n easeInExpo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n easeInQuad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n easeInQuart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n easeInQuint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n easeInSine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n easeOutBack: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n easeOutCubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n easeOutCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n easeOutExpo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n easeOutQuad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n easeOutQuart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n easeOutQuint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n easeOutSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n easeInOutBack: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n easeInOutCirc: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n easeInOutExpo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n easeInOutQuad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n easeInOutQuart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n easeInOutQuint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n easeInOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'\n};\n/* eslint-enable key-spacing */\n\nfunction getTimingFunction(functionName) {\n return functionsMap[functionName];\n}\n\n/**\n * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).\n *\n * @deprecated - This will be deprecated in v5 in favor of `easeIn`, `easeOut`, `easeInOut`.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * 'transitionTimingFunction': timingFunctions('easeInQuad')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * transitionTimingFunction: ${timingFunctions('easeInQuad')};\n * `\n *\n * // CSS as JS Output\n *\n * 'div': {\n * 'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n * }\n */\n\nfunction timingFunctions(timingFunction) {\n return getTimingFunction(timingFunction);\n}\nvar getBorderWidth = function getBorderWidth(pointingDirection, height, width) {\n var fullWidth = \"\" + width[0] + (width[1] || '');\n var halfWidth = \"\" + width[0] / 2 + (width[1] || '');\n var fullHeight = \"\" + height[0] + (height[1] || '');\n var halfHeight = \"\" + height[0] / 2 + (height[1] || '');\n switch (pointingDirection) {\n case 'top':\n return \"0 \" + halfWidth + \" \" + fullHeight + \" \" + halfWidth;\n case 'topLeft':\n return fullWidth + \" \" + fullHeight + \" 0 0\";\n case 'left':\n return halfHeight + \" \" + fullWidth + \" \" + halfHeight + \" 0\";\n case 'bottomLeft':\n return fullWidth + \" 0 0 \" + fullHeight;\n case 'bottom':\n return fullHeight + \" \" + halfWidth + \" 0 \" + halfWidth;\n case 'bottomRight':\n return \"0 0 \" + fullWidth + \" \" + fullHeight;\n case 'right':\n return halfHeight + \" 0 \" + halfHeight + \" \" + fullWidth;\n case 'topRight':\n default:\n return \"0 \" + fullWidth + \" \" + fullHeight + \" 0\";\n }\n};\nvar getBorderColor = function getBorderColor(pointingDirection, foregroundColor) {\n switch (pointingDirection) {\n case 'top':\n case 'bottomRight':\n return {\n borderBottomColor: foregroundColor\n };\n case 'right':\n case 'bottomLeft':\n return {\n borderLeftColor: foregroundColor\n };\n case 'bottom':\n case 'topLeft':\n return {\n borderTopColor: foregroundColor\n };\n case 'left':\n case 'topRight':\n return {\n borderRightColor: foregroundColor\n };\n default:\n throw new PolishedError(59);\n }\n};\n\n/**\n * CSS to represent triangle with any pointing direction with an optional background color.\n *\n * @example\n * // Styles as object usage\n *\n * const styles = {\n * ...triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })\n * }\n *\n *\n * // styled-components usage\n * const div = styled.div`\n * ${triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })}\n *\n *\n * // CSS as JS Output\n *\n * div: {\n * 'borderColor': 'transparent transparent transparent red',\n * 'borderStyle': 'solid',\n * 'borderWidth': '50px 0 50px 100px',\n * 'height': '0',\n * 'width': '0',\n * }\n */\nfunction triangle(_ref) {\n var pointingDirection = _ref.pointingDirection,\n height = _ref.height,\n width = _ref.width,\n foregroundColor = _ref.foregroundColor,\n _ref$backgroundColor = _ref.backgroundColor,\n backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor;\n var widthAndUnit = getValueAndUnit(width);\n var heightAndUnit = getValueAndUnit(height);\n if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) {\n throw new PolishedError(60);\n }\n return _extends({\n width: '0',\n height: '0',\n borderColor: backgroundColor\n }, getBorderColor(pointingDirection, foregroundColor), {\n borderStyle: 'solid',\n borderWidth: getBorderWidth(pointingDirection, heightAndUnit, widthAndUnit)\n });\n}\n\n/**\n * Provides an easy way to change the `wordWrap` property.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...wordWrap('break-word')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${wordWrap('break-word')}\n * `\n *\n * // CSS as JS Output\n *\n * const styles = {\n * overflowWrap: 'break-word',\n * wordWrap: 'break-word',\n * wordBreak: 'break-all',\n * }\n */\nfunction wordWrap(wrap) {\n if (wrap === void 0) {\n wrap = 'break-word';\n }\n var wordBreak = wrap === 'break-word' ? 'break-all' : wrap;\n return {\n overflowWrap: wrap,\n wordWrap: wrap,\n wordBreak: wordBreak\n };\n}\nfunction colorToInt(color) {\n return Math.round(color * 255);\n}\nfunction convertToInt(red, green, blue) {\n return colorToInt(red) + \",\" + colorToInt(green) + \",\" + colorToInt(blue);\n}\nfunction hslToRgb(hue, saturation, lightness, convert) {\n if (convert === void 0) {\n convert = convertToInt;\n }\n if (saturation === 0) {\n // achromatic\n return convert(lightness, lightness, lightness);\n }\n\n // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV\n var huePrime = (hue % 360 + 360) % 360 / 60;\n var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;\n var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));\n var red = 0;\n var green = 0;\n var blue = 0;\n if (huePrime >= 0 && huePrime < 1) {\n red = chroma;\n green = secondComponent;\n } else if (huePrime >= 1 && huePrime < 2) {\n red = secondComponent;\n green = chroma;\n } else if (huePrime >= 2 && huePrime < 3) {\n green = chroma;\n blue = secondComponent;\n } else if (huePrime >= 3 && huePrime < 4) {\n green = secondComponent;\n blue = chroma;\n } else if (huePrime >= 4 && huePrime < 5) {\n red = secondComponent;\n blue = chroma;\n } else if (huePrime >= 5 && huePrime < 6) {\n red = chroma;\n blue = secondComponent;\n }\n var lightnessModification = lightness - chroma / 2;\n var finalRed = red + lightnessModification;\n var finalGreen = green + lightnessModification;\n var finalBlue = blue + lightnessModification;\n return convert(finalRed, finalGreen, finalBlue);\n}\nvar namedColorMap = {\n aliceblue: 'f0f8ff',\n antiquewhite: 'faebd7',\n aqua: '00ffff',\n aquamarine: '7fffd4',\n azure: 'f0ffff',\n beige: 'f5f5dc',\n bisque: 'ffe4c4',\n black: '000',\n blanchedalmond: 'ffebcd',\n blue: '0000ff',\n blueviolet: '8a2be2',\n brown: 'a52a2a',\n burlywood: 'deb887',\n cadetblue: '5f9ea0',\n chartreuse: '7fff00',\n chocolate: 'd2691e',\n coral: 'ff7f50',\n cornflowerblue: '6495ed',\n cornsilk: 'fff8dc',\n crimson: 'dc143c',\n cyan: '00ffff',\n darkblue: '00008b',\n darkcyan: '008b8b',\n darkgoldenrod: 'b8860b',\n darkgray: 'a9a9a9',\n darkgreen: '006400',\n darkgrey: 'a9a9a9',\n darkkhaki: 'bdb76b',\n darkmagenta: '8b008b',\n darkolivegreen: '556b2f',\n darkorange: 'ff8c00',\n darkorchid: '9932cc',\n darkred: '8b0000',\n darksalmon: 'e9967a',\n darkseagreen: '8fbc8f',\n darkslateblue: '483d8b',\n darkslategray: '2f4f4f',\n darkslategrey: '2f4f4f',\n darkturquoise: '00ced1',\n darkviolet: '9400d3',\n deeppink: 'ff1493',\n deepskyblue: '00bfff',\n dimgray: '696969',\n dimgrey: '696969',\n dodgerblue: '1e90ff',\n firebrick: 'b22222',\n floralwhite: 'fffaf0',\n forestgreen: '228b22',\n fuchsia: 'ff00ff',\n gainsboro: 'dcdcdc',\n ghostwhite: 'f8f8ff',\n gold: 'ffd700',\n goldenrod: 'daa520',\n gray: '808080',\n green: '008000',\n greenyellow: 'adff2f',\n grey: '808080',\n honeydew: 'f0fff0',\n hotpink: 'ff69b4',\n indianred: 'cd5c5c',\n indigo: '4b0082',\n ivory: 'fffff0',\n khaki: 'f0e68c',\n lavender: 'e6e6fa',\n lavenderblush: 'fff0f5',\n lawngreen: '7cfc00',\n lemonchiffon: 'fffacd',\n lightblue: 'add8e6',\n lightcoral: 'f08080',\n lightcyan: 'e0ffff',\n lightgoldenrodyellow: 'fafad2',\n lightgray: 'd3d3d3',\n lightgreen: '90ee90',\n lightgrey: 'd3d3d3',\n lightpink: 'ffb6c1',\n lightsalmon: 'ffa07a',\n lightseagreen: '20b2aa',\n lightskyblue: '87cefa',\n lightslategray: '789',\n lightslategrey: '789',\n lightsteelblue: 'b0c4de',\n lightyellow: 'ffffe0',\n lime: '0f0',\n limegreen: '32cd32',\n linen: 'faf0e6',\n magenta: 'f0f',\n maroon: '800000',\n mediumaquamarine: '66cdaa',\n mediumblue: '0000cd',\n mediumorchid: 'ba55d3',\n mediumpurple: '9370db',\n mediumseagreen: '3cb371',\n mediumslateblue: '7b68ee',\n mediumspringgreen: '00fa9a',\n mediumturquoise: '48d1cc',\n mediumvioletred: 'c71585',\n midnightblue: '191970',\n mintcream: 'f5fffa',\n mistyrose: 'ffe4e1',\n moccasin: 'ffe4b5',\n navajowhite: 'ffdead',\n navy: '000080',\n oldlace: 'fdf5e6',\n olive: '808000',\n olivedrab: '6b8e23',\n orange: 'ffa500',\n orangered: 'ff4500',\n orchid: 'da70d6',\n palegoldenrod: 'eee8aa',\n palegreen: '98fb98',\n paleturquoise: 'afeeee',\n palevioletred: 'db7093',\n papayawhip: 'ffefd5',\n peachpuff: 'ffdab9',\n peru: 'cd853f',\n pink: 'ffc0cb',\n plum: 'dda0dd',\n powderblue: 'b0e0e6',\n purple: '800080',\n rebeccapurple: '639',\n red: 'f00',\n rosybrown: 'bc8f8f',\n royalblue: '4169e1',\n saddlebrown: '8b4513',\n salmon: 'fa8072',\n sandybrown: 'f4a460',\n seagreen: '2e8b57',\n seashell: 'fff5ee',\n sienna: 'a0522d',\n silver: 'c0c0c0',\n skyblue: '87ceeb',\n slateblue: '6a5acd',\n slategray: '708090',\n slategrey: '708090',\n snow: 'fffafa',\n springgreen: '00ff7f',\n steelblue: '4682b4',\n tan: 'd2b48c',\n teal: '008080',\n thistle: 'd8bfd8',\n tomato: 'ff6347',\n turquoise: '40e0d0',\n violet: 'ee82ee',\n wheat: 'f5deb3',\n white: 'fff',\n whitesmoke: 'f5f5f5',\n yellow: 'ff0',\n yellowgreen: '9acd32'\n};\n\n/**\n * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.\n * @private\n */\nfunction nameToHex(color) {\n if (typeof color !== 'string') return color;\n var normalizedColorName = color.toLowerCase();\n return namedColorMap[normalizedColorName] ? \"#\" + namedColorMap[normalizedColorName] : color;\n}\nvar hexRegex = /^#[a-fA-F0-9]{6}$/;\nvar hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;\nvar reducedHexRegex = /^#[a-fA-F0-9]{3}$/;\nvar reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;\nvar rgbRegex = /^rgb\\(\\s*(\\d{1,3})\\s*(?:,)?\\s*(\\d{1,3})\\s*(?:,)?\\s*(\\d{1,3})\\s*\\)$/i;\nvar rgbaRegex = /^rgb(?:a)?\\(\\s*(\\d{1,3})\\s*(?:,)?\\s*(\\d{1,3})\\s*(?:,)?\\s*(\\d{1,3})\\s*(?:,|\\/)\\s*([-+]?\\d*[.]?\\d+[%]?)\\s*\\)$/i;\nvar hslRegex = /^hsl\\(\\s*(\\d{0,3}[.]?[0-9]+(?:deg)?)\\s*(?:,)?\\s*(\\d{1,3}[.]?[0-9]?)%\\s*(?:,)?\\s*(\\d{1,3}[.]?[0-9]?)%\\s*\\)$/i;\nvar hslaRegex = /^hsl(?:a)?\\(\\s*(\\d{0,3}[.]?[0-9]+(?:deg)?)\\s*(?:,)?\\s*(\\d{1,3}[.]?[0-9]?)%\\s*(?:,)?\\s*(\\d{1,3}[.]?[0-9]?)%\\s*(?:,|\\/)\\s*([-+]?\\d*[.]?\\d+[%]?)\\s*\\)$/i;\n\n/**\n * Returns an RgbColor or RgbaColor object. This utility function is only useful\n * if want to extract a color component. With the color util `toColorString` you\n * can convert a RgbColor or RgbaColor object back to a string.\n *\n * @example\n * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1\n * const color1 = parseToRgb('rgb(255, 0, 0)');\n * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2\n * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');\n */\nfunction parseToRgb(color) {\n if (typeof color !== 'string') {\n throw new PolishedError(3);\n }\n var normalizedColor = nameToHex(color);\n if (normalizedColor.match(hexRegex)) {\n return {\n red: parseInt(\"\" + normalizedColor[1] + normalizedColor[2], 16),\n green: parseInt(\"\" + normalizedColor[3] + normalizedColor[4], 16),\n blue: parseInt(\"\" + normalizedColor[5] + normalizedColor[6], 16)\n };\n }\n if (normalizedColor.match(hexRgbaRegex)) {\n var alpha = parseFloat((parseInt(\"\" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));\n return {\n red: parseInt(\"\" + normalizedColor[1] + normalizedColor[2], 16),\n green: parseInt(\"\" + normalizedColor[3] + normalizedColor[4], 16),\n blue: parseInt(\"\" + normalizedColor[5] + normalizedColor[6], 16),\n alpha: alpha\n };\n }\n if (normalizedColor.match(reducedHexRegex)) {\n return {\n red: parseInt(\"\" + normalizedColor[1] + normalizedColor[1], 16),\n green: parseInt(\"\" + normalizedColor[2] + normalizedColor[2], 16),\n blue: parseInt(\"\" + normalizedColor[3] + normalizedColor[3], 16)\n };\n }\n if (normalizedColor.match(reducedRgbaHexRegex)) {\n var _alpha = parseFloat((parseInt(\"\" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));\n return {\n red: parseInt(\"\" + normalizedColor[1] + normalizedColor[1], 16),\n green: parseInt(\"\" + normalizedColor[2] + normalizedColor[2], 16),\n blue: parseInt(\"\" + normalizedColor[3] + normalizedColor[3], 16),\n alpha: _alpha\n };\n }\n var rgbMatched = rgbRegex.exec(normalizedColor);\n if (rgbMatched) {\n return {\n red: parseInt(\"\" + rgbMatched[1], 10),\n green: parseInt(\"\" + rgbMatched[2], 10),\n blue: parseInt(\"\" + rgbMatched[3], 10)\n };\n }\n var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));\n if (rgbaMatched) {\n return {\n red: parseInt(\"\" + rgbaMatched[1], 10),\n green: parseInt(\"\" + rgbaMatched[2], 10),\n blue: parseInt(\"\" + rgbaMatched[3], 10),\n alpha: parseFloat(\"\" + rgbaMatched[4]) > 1 ? parseFloat(\"\" + rgbaMatched[4]) / 100 : parseFloat(\"\" + rgbaMatched[4])\n };\n }\n var hslMatched = hslRegex.exec(normalizedColor);\n if (hslMatched) {\n var hue = parseInt(\"\" + hslMatched[1], 10);\n var saturation = parseInt(\"\" + hslMatched[2], 10) / 100;\n var lightness = parseInt(\"\" + hslMatched[3], 10) / 100;\n var rgbColorString = \"rgb(\" + hslToRgb(hue, saturation, lightness) + \")\";\n var hslRgbMatched = rgbRegex.exec(rgbColorString);\n if (!hslRgbMatched) {\n throw new PolishedError(4, normalizedColor, rgbColorString);\n }\n return {\n red: parseInt(\"\" + hslRgbMatched[1], 10),\n green: parseInt(\"\" + hslRgbMatched[2], 10),\n blue: parseInt(\"\" + hslRgbMatched[3], 10)\n };\n }\n var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));\n if (hslaMatched) {\n var _hue = parseInt(\"\" + hslaMatched[1], 10);\n var _saturation = parseInt(\"\" + hslaMatched[2], 10) / 100;\n var _lightness = parseInt(\"\" + hslaMatched[3], 10) / 100;\n var _rgbColorString = \"rgb(\" + hslToRgb(_hue, _saturation, _lightness) + \")\";\n var _hslRgbMatched = rgbRegex.exec(_rgbColorString);\n if (!_hslRgbMatched) {\n throw new PolishedError(4, normalizedColor, _rgbColorString);\n }\n return {\n red: parseInt(\"\" + _hslRgbMatched[1], 10),\n green: parseInt(\"\" + _hslRgbMatched[2], 10),\n blue: parseInt(\"\" + _hslRgbMatched[3], 10),\n alpha: parseFloat(\"\" + hslaMatched[4]) > 1 ? parseFloat(\"\" + hslaMatched[4]) / 100 : parseFloat(\"\" + hslaMatched[4])\n };\n }\n throw new PolishedError(5);\n}\nfunction rgbToHsl(color) {\n // make sure rgb are contained in a set of [0, 255]\n var red = color.red / 255;\n var green = color.green / 255;\n var blue = color.blue / 255;\n var max = Math.max(red, green, blue);\n var min = Math.min(red, green, blue);\n var lightness = (max + min) / 2;\n if (max === min) {\n // achromatic\n if (color.alpha !== undefined) {\n return {\n hue: 0,\n saturation: 0,\n lightness: lightness,\n alpha: color.alpha\n };\n } else {\n return {\n hue: 0,\n saturation: 0,\n lightness: lightness\n };\n }\n }\n var hue;\n var delta = max - min;\n var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);\n switch (max) {\n case red:\n hue = (green - blue) / delta + (green < blue ? 6 : 0);\n break;\n case green:\n hue = (blue - red) / delta + 2;\n break;\n default:\n // blue case\n hue = (red - green) / delta + 4;\n break;\n }\n hue *= 60;\n if (color.alpha !== undefined) {\n return {\n hue: hue,\n saturation: saturation,\n lightness: lightness,\n alpha: color.alpha\n };\n }\n return {\n hue: hue,\n saturation: saturation,\n lightness: lightness\n };\n}\n\n/**\n * Returns an HslColor or HslaColor object. This utility function is only useful\n * if want to extract a color component. With the color util `toColorString` you\n * can convert a HslColor or HslaColor object back to a string.\n *\n * @example\n * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1\n * const color1 = parseToHsl('rgb(255, 0, 0)');\n * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2\n * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');\n */\nfunction parseToHsl(color) {\n // Note: At a later stage we can optimize this function as right now a hsl\n // color would be parsed converted to rgb values and converted back to hsl.\n return rgbToHsl(parseToRgb(color));\n}\n\n/**\n * Reduces hex values if possible e.g. #ff8866 to #f86\n * @private\n */\nvar reduceHexValue = function reduceHexValue(value) {\n if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {\n return \"#\" + value[1] + value[3] + value[5];\n }\n return value;\n};\nvar reduceHexValue$1 = reduceHexValue;\nfunction numberToHex(value) {\n var hex = value.toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n}\nfunction colorToHex(color) {\n return numberToHex(Math.round(color * 255));\n}\nfunction convertToHex(red, green, blue) {\n return reduceHexValue$1(\"#\" + colorToHex(red) + colorToHex(green) + colorToHex(blue));\n}\nfunction hslToHex(hue, saturation, lightness) {\n return hslToRgb(hue, saturation, lightness, convertToHex);\n}\n\n/**\n * Returns a string value for the color. The returned result is the smallest possible hex notation.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: hsl(359, 0.75, 0.4),\n * background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${hsl(359, 0.75, 0.4)};\n * background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#b3191c\";\n * background: \"#b3191c\";\n * }\n */\nfunction hsl(value, saturation, lightness) {\n if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {\n return hslToHex(value, saturation, lightness);\n } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {\n return hslToHex(value.hue, value.saturation, value.lightness);\n }\n throw new PolishedError(1);\n}\n\n/**\n * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: hsla(359, 0.75, 0.4, 0.7),\n * background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),\n * background: hsla(359, 0.75, 0.4, 1),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${hsla(359, 0.75, 0.4, 0.7)};\n * background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};\n * background: ${hsla(359, 0.75, 0.4, 1)};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"rgba(179,25,28,0.7)\";\n * background: \"rgba(179,25,28,0.7)\";\n * background: \"#b3191c\";\n * }\n */\nfunction hsla(value, saturation, lightness, alpha) {\n if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {\n return alpha >= 1 ? hslToHex(value, saturation, lightness) : \"rgba(\" + hslToRgb(value, saturation, lightness) + \",\" + alpha + \")\";\n } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {\n return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : \"rgba(\" + hslToRgb(value.hue, value.saturation, value.lightness) + \",\" + value.alpha + \")\";\n }\n throw new PolishedError(2);\n}\n\n/**\n * Returns a string value for the color. The returned result is the smallest possible hex notation.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: rgb(255, 205, 100),\n * background: rgb({ red: 255, green: 205, blue: 100 }),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${rgb(255, 205, 100)};\n * background: ${rgb({ red: 255, green: 205, blue: 100 })};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#ffcd64\";\n * background: \"#ffcd64\";\n * }\n */\nfunction rgb(value, green, blue) {\n if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {\n return reduceHexValue$1(\"#\" + numberToHex(value) + numberToHex(green) + numberToHex(blue));\n } else if (typeof value === 'object' && green === undefined && blue === undefined) {\n return reduceHexValue$1(\"#\" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));\n }\n throw new PolishedError(6);\n}\n\n/**\n * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.\n *\n * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: rgba(255, 205, 100, 0.7),\n * background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),\n * background: rgba(255, 205, 100, 1),\n * background: rgba('#ffffff', 0.4),\n * background: rgba('black', 0.7),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${rgba(255, 205, 100, 0.7)};\n * background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};\n * background: ${rgba(255, 205, 100, 1)};\n * background: ${rgba('#ffffff', 0.4)};\n * background: ${rgba('black', 0.7)};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"rgba(255,205,100,0.7)\";\n * background: \"rgba(255,205,100,0.7)\";\n * background: \"#ffcd64\";\n * background: \"rgba(255,255,255,0.4)\";\n * background: \"rgba(0,0,0,0.7)\";\n * }\n */\nfunction rgba(firstValue, secondValue, thirdValue, fourthValue) {\n if (typeof firstValue === 'string' && typeof secondValue === 'number') {\n var rgbValue = parseToRgb(firstValue);\n return \"rgba(\" + rgbValue.red + \",\" + rgbValue.green + \",\" + rgbValue.blue + \",\" + secondValue + \")\";\n } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {\n return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : \"rgba(\" + firstValue + \",\" + secondValue + \",\" + thirdValue + \",\" + fourthValue + \")\";\n } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {\n return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : \"rgba(\" + firstValue.red + \",\" + firstValue.green + \",\" + firstValue.blue + \",\" + firstValue.alpha + \")\";\n }\n throw new PolishedError(7);\n}\nvar isRgb = function isRgb(color) {\n return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');\n};\nvar isRgba = function isRgba(color) {\n return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';\n};\nvar isHsl = function isHsl(color) {\n return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');\n};\nvar isHsla = function isHsla(color) {\n return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';\n};\n\n/**\n * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.\n * This util is useful in case you only know on runtime which color object is\n * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: toColorString({ red: 255, green: 205, blue: 100 }),\n * background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),\n * background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),\n * background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${toColorString({ red: 255, green: 205, blue: 100 })};\n * background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};\n * background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};\n * background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#ffcd64\";\n * background: \"rgba(255,205,100,0.72)\";\n * background: \"#00f\";\n * background: \"rgba(179,25,25,0.72)\";\n * }\n */\n\nfunction toColorString(color) {\n if (typeof color !== 'object') throw new PolishedError(8);\n if (isRgba(color)) return rgba(color);\n if (isRgb(color)) return rgb(color);\n if (isHsla(color)) return hsla(color);\n if (isHsl(color)) return hsl(color);\n throw new PolishedError(8);\n}\n\n// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js\n// eslint-disable-next-line no-unused-vars\n// eslint-disable-next-line no-unused-vars\n// eslint-disable-next-line no-redeclare\nfunction curried(f, length, acc) {\n return function fn() {\n // eslint-disable-next-line prefer-rest-params\n var combined = acc.concat(Array.prototype.slice.call(arguments));\n return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);\n };\n}\n\n// eslint-disable-next-line no-redeclare\nfunction curry(f) {\n // eslint-disable-line no-redeclare\n return curried(f, f.length, []);\n}\n\n/**\n * Changes the hue of the color. Hue is a number between 0 to 360. The first\n * argument for adjustHue is the amount of degrees the color is rotated around\n * the color wheel, always producing a positive hue value.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: adjustHue(180, '#448'),\n * background: adjustHue('180', 'rgba(101,100,205,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${adjustHue(180, '#448')};\n * background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#888844\";\n * background: \"rgba(136,136,68,0.7)\";\n * }\n */\nfunction adjustHue(degree, color) {\n if (color === 'transparent') return color;\n var hslColor = parseToHsl(color);\n return toColorString(_extends({}, hslColor, {\n hue: hslColor.hue + parseFloat(degree)\n }));\n}\n\n// prettier-ignore\nvar curriedAdjustHue = curry /* :: */(adjustHue);\nvar curriedAdjustHue$1 = curriedAdjustHue;\n\n/**\n * Returns the complement of the provided color. This is identical to adjustHue(180, ).\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: complement('#448'),\n * background: complement('rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${complement('#448')};\n * background: ${complement('rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#884\";\n * background: \"rgba(153,153,153,0.7)\";\n * }\n */\nfunction complement(color) {\n if (color === 'transparent') return color;\n var hslColor = parseToHsl(color);\n return toColorString(_extends({}, hslColor, {\n hue: (hslColor.hue + 180) % 360\n }));\n}\nfunction guard(lowerBoundary, upperBoundary, value) {\n return Math.max(lowerBoundary, Math.min(upperBoundary, value));\n}\n\n/**\n * Returns a string value for the darkened color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: darken(0.2, '#FFCD64'),\n * background: darken('0.2', 'rgba(255,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${darken(0.2, '#FFCD64')};\n * background: ${darken('0.2', 'rgba(255,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#ffbd31\";\n * background: \"rgba(255,189,49,0.7)\";\n * }\n */\nfunction darken(amount, color) {\n if (color === 'transparent') return color;\n var hslColor = parseToHsl(color);\n return toColorString(_extends({}, hslColor, {\n lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))\n }));\n}\n\n// prettier-ignore\nvar curriedDarken = curry /* :: */(darken);\nvar curriedDarken$1 = curriedDarken;\n\n/**\n * Decreases the intensity of a color. Its range is between 0 to 1. The first\n * argument of the desaturate function is the amount by how much the color\n * intensity should be decreased.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: desaturate(0.2, '#CCCD64'),\n * background: desaturate('0.2', 'rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${desaturate(0.2, '#CCCD64')};\n * background: ${desaturate('0.2', 'rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#b8b979\";\n * background: \"rgba(184,185,121,0.7)\";\n * }\n */\nfunction desaturate(amount, color) {\n if (color === 'transparent') return color;\n var hslColor = parseToHsl(color);\n return toColorString(_extends({}, hslColor, {\n saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))\n }));\n}\n\n// prettier-ignore\nvar curriedDesaturate = curry /* :: */(desaturate);\nvar curriedDesaturate$1 = curriedDesaturate;\n\n/**\n * Returns a number (float) representing the luminance of a color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff',\n * background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?\n * 'rgba(58, 133, 255, 1)' :\n * 'rgba(255, 57, 149, 1)',\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'};\n * background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?\n * 'rgba(58, 133, 255, 1)' :\n * 'rgba(255, 57, 149, 1)'};\n *\n * // CSS in JS Output\n *\n * div {\n * background: \"#CCCD64\";\n * background: \"rgba(58, 133, 255, 1)\";\n * }\n */\nfunction getLuminance(color) {\n if (color === 'transparent') return 0;\n var rgbColor = parseToRgb(color);\n var _Object$keys$map = Object.keys(rgbColor).map(function (key) {\n var channel = rgbColor[key] / 255;\n return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);\n }),\n r = _Object$keys$map[0],\n g = _Object$keys$map[1],\n b = _Object$keys$map[2];\n return parseFloat((0.2126 * r + 0.7152 * g + 0.0722 * b).toFixed(3));\n}\n\n/**\n * Returns the contrast ratio between two colors based on\n * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).\n *\n * @example\n * const contrastRatio = getContrast('#444', '#fff');\n */\nfunction getContrast(color1, color2) {\n var luminance1 = getLuminance(color1);\n var luminance2 = getLuminance(color2);\n return parseFloat((luminance1 > luminance2 ? (luminance1 + 0.05) / (luminance2 + 0.05) : (luminance2 + 0.05) / (luminance1 + 0.05)).toFixed(2));\n}\n\n/**\n * Converts the color to a grayscale, by reducing its saturation to 0.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: grayscale('#CCCD64'),\n * background: grayscale('rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${grayscale('#CCCD64')};\n * background: ${grayscale('rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#999\";\n * background: \"rgba(153,153,153,0.7)\";\n * }\n */\nfunction grayscale(color) {\n if (color === 'transparent') return color;\n return toColorString(_extends({}, parseToHsl(color), {\n saturation: 0\n }));\n}\n\n/**\n * Converts a HslColor or HslaColor object to a color string.\n * This util is useful in case you only know on runtime which color object is\n * used. Otherwise we recommend to rely on `hsl` or `hsla`.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: hslToColorString({ hue: 240, saturation: 1, lightness: 0.5 }),\n * background: hslToColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${hslToColorString({ hue: 240, saturation: 1, lightness: 0.5 })};\n * background: ${hslToColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#00f\";\n * background: \"rgba(179,25,25,0.72)\";\n * }\n */\nfunction hslToColorString(color) {\n if (typeof color === 'object' && typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number') {\n if (color.alpha && typeof color.alpha === 'number') {\n return hsla({\n hue: color.hue,\n saturation: color.saturation,\n lightness: color.lightness,\n alpha: color.alpha\n });\n }\n return hsl({\n hue: color.hue,\n saturation: color.saturation,\n lightness: color.lightness\n });\n }\n throw new PolishedError(45);\n}\n\n/**\n * Inverts the red, green and blue values of a color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: invert('#CCCD64'),\n * background: invert('rgba(101,100,205,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${invert('#CCCD64')};\n * background: ${invert('rgba(101,100,205,0.7)')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#33329b\";\n * background: \"rgba(154,155,50,0.7)\";\n * }\n */\nfunction invert(color) {\n if (color === 'transparent') return color;\n // parse color string to rgb\n var value = parseToRgb(color);\n return toColorString(_extends({}, value, {\n red: 255 - value.red,\n green: 255 - value.green,\n blue: 255 - value.blue\n }));\n}\n\n/**\n * Returns a string value for the lightened color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: lighten(0.2, '#CCCD64'),\n * background: lighten('0.2', 'rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${lighten(0.2, '#FFCD64')};\n * background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#e5e6b1\";\n * background: \"rgba(229,230,177,0.7)\";\n * }\n */\nfunction lighten(amount, color) {\n if (color === 'transparent') return color;\n var hslColor = parseToHsl(color);\n return toColorString(_extends({}, hslColor, {\n lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))\n }));\n}\n\n// prettier-ignore\nvar curriedLighten = curry /* :: */(lighten);\nvar curriedLighten$1 = curriedLighten;\n\n/**\n * Determines which contrast guidelines have been met for two colors.\n * Based on the [contrast calculations recommended by W3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html).\n *\n * @example\n * const scores = meetsContrastGuidelines('#444', '#fff');\n */\nfunction meetsContrastGuidelines(color1, color2) {\n var contrastRatio = getContrast(color1, color2);\n return {\n AA: contrastRatio >= 4.5,\n AALarge: contrastRatio >= 3,\n AAA: contrastRatio >= 7,\n AAALarge: contrastRatio >= 4.5\n };\n}\n\n/**\n * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: mix(0.5, '#f00', '#00f')\n * background: mix(0.25, '#f00', '#00f')\n * background: mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${mix(0.5, '#f00', '#00f')};\n * background: ${mix(0.25, '#f00', '#00f')};\n * background: ${mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#7f007f\";\n * background: \"#3f00bf\";\n * background: \"rgba(63, 0, 191, 0.75)\";\n * }\n */\nfunction mix(weight, color, otherColor) {\n if (color === 'transparent') return otherColor;\n if (otherColor === 'transparent') return color;\n if (weight === 0) return otherColor;\n var parsedColor1 = parseToRgb(color);\n var color1 = _extends({}, parsedColor1, {\n alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1\n });\n var parsedColor2 = parseToRgb(otherColor);\n var color2 = _extends({}, parsedColor2, {\n alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1\n });\n\n // The formula is copied from the original Sass implementation:\n // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method\n var alphaDelta = color1.alpha - color2.alpha;\n var x = parseFloat(weight) * 2 - 1;\n var y = x * alphaDelta === -1 ? x : x + alphaDelta;\n var z = 1 + x * alphaDelta;\n var weight1 = (y / z + 1) / 2.0;\n var weight2 = 1 - weight1;\n var mixedColor = {\n red: Math.floor(color1.red * weight1 + color2.red * weight2),\n green: Math.floor(color1.green * weight1 + color2.green * weight2),\n blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),\n alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))\n };\n return rgba(mixedColor);\n}\n\n// prettier-ignore\nvar curriedMix = curry /* :: */(mix);\nvar mix$1 = curriedMix;\n\n/**\n * Increases the opacity of a color. Its range for the amount is between 0 to 1.\n *\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');\n * background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),\n * background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};\n * background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},\n * background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#fff\";\n * background: \"rgba(255,255,255,0.7)\";\n * background: \"rgba(255,0,0,0.7)\";\n * }\n */\nfunction opacify(amount, color) {\n if (color === 'transparent') return color;\n var parsedColor = parseToRgb(color);\n var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;\n var colorWithAlpha = _extends({}, parsedColor, {\n alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)\n });\n return rgba(colorWithAlpha);\n}\n\n// prettier-ignore\nvar curriedOpacify = curry /* :: */(opacify);\nvar curriedOpacify$1 = curriedOpacify;\nvar defaultReturnIfLightColor = '#000';\nvar defaultReturnIfDarkColor = '#fff';\n\n/**\n * Returns black or white (or optional passed colors) for best\n * contrast depending on the luminosity of the given color.\n * When passing custom return colors, strict mode ensures that the\n * return color always meets or exceeds WCAG level AA or greater. If this test\n * fails, the default return color (black or white) is returned in place of the\n * custom return color. You can optionally turn off strict mode.\n *\n * Follows [W3C specs for readability](https://www.w3.org/TR/WCAG20-TECHS/G18.html).\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * color: readableColor('#000'),\n * color: readableColor('black', '#001', '#ff8'),\n * color: readableColor('white', '#001', '#ff8'),\n * color: readableColor('red', '#333', '#ddd', true)\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * color: ${readableColor('#000')};\n * color: ${readableColor('black', '#001', '#ff8')};\n * color: ${readableColor('white', '#001', '#ff8')};\n * color: ${readableColor('red', '#333', '#ddd', true)};\n * `\n *\n * // CSS in JS Output\n * element {\n * color: \"#fff\";\n * color: \"#ff8\";\n * color: \"#001\";\n * color: \"#000\";\n * }\n */\nfunction readableColor(color, returnIfLightColor, returnIfDarkColor, strict) {\n if (returnIfLightColor === void 0) {\n returnIfLightColor = defaultReturnIfLightColor;\n }\n if (returnIfDarkColor === void 0) {\n returnIfDarkColor = defaultReturnIfDarkColor;\n }\n if (strict === void 0) {\n strict = true;\n }\n var isColorLight = getLuminance(color) > 0.179;\n var preferredReturnColor = isColorLight ? returnIfLightColor : returnIfDarkColor;\n if (!strict || getContrast(color, preferredReturnColor) >= 4.5) {\n return preferredReturnColor;\n }\n return isColorLight ? defaultReturnIfLightColor : defaultReturnIfDarkColor;\n}\n\n/**\n * Converts a RgbColor or RgbaColor object to a color string.\n * This util is useful in case you only know on runtime which color object is\n * used. Otherwise we recommend to rely on `rgb` or `rgba`.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: rgbToColorString({ red: 255, green: 205, blue: 100 }),\n * background: rgbToColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${rgbToColorString({ red: 255, green: 205, blue: 100 })};\n * background: ${rgbToColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#ffcd64\";\n * background: \"rgba(255,205,100,0.72)\";\n * }\n */\nfunction rgbToColorString(color) {\n if (typeof color === 'object' && typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number') {\n if (typeof color.alpha === 'number') {\n return rgba({\n red: color.red,\n green: color.green,\n blue: color.blue,\n alpha: color.alpha\n });\n }\n return rgb({\n red: color.red,\n green: color.green,\n blue: color.blue\n });\n }\n throw new PolishedError(46);\n}\n\n/**\n * Increases the intensity of a color. Its range is between 0 to 1. The first\n * argument of the saturate function is the amount by how much the color\n * intensity should be increased.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: saturate(0.2, '#CCCD64'),\n * background: saturate('0.2', 'rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${saturate(0.2, '#FFCD64')};\n * background: ${saturate('0.2', 'rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#e0e250\";\n * background: \"rgba(224,226,80,0.7)\";\n * }\n */\nfunction saturate(amount, color) {\n if (color === 'transparent') return color;\n var hslColor = parseToHsl(color);\n return toColorString(_extends({}, hslColor, {\n saturation: guard(0, 1, hslColor.saturation + parseFloat(amount))\n }));\n}\n\n// prettier-ignore\nvar curriedSaturate = curry /* :: */(saturate);\nvar curriedSaturate$1 = curriedSaturate;\n\n/**\n * Sets the hue of a color to the provided value. The hue range can be\n * from 0 and 359.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: setHue(42, '#CCCD64'),\n * background: setHue('244', 'rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${setHue(42, '#CCCD64')};\n * background: ${setHue('244', 'rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#cdae64\";\n * background: \"rgba(107,100,205,0.7)\";\n * }\n */\nfunction setHue(hue, color) {\n if (color === 'transparent') return color;\n return toColorString(_extends({}, parseToHsl(color), {\n hue: parseFloat(hue)\n }));\n}\n\n// prettier-ignore\nvar curriedSetHue = curry /* :: */(setHue);\nvar curriedSetHue$1 = curriedSetHue;\n\n/**\n * Sets the lightness of a color to the provided value. The lightness range can be\n * from 0 and 1.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: setLightness(0.2, '#CCCD64'),\n * background: setLightness('0.75', 'rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${setLightness(0.2, '#CCCD64')};\n * background: ${setLightness('0.75', 'rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#4d4d19\";\n * background: \"rgba(223,224,159,0.7)\";\n * }\n */\nfunction setLightness(lightness, color) {\n if (color === 'transparent') return color;\n return toColorString(_extends({}, parseToHsl(color), {\n lightness: parseFloat(lightness)\n }));\n}\n\n// prettier-ignore\nvar curriedSetLightness = curry /* :: */(setLightness);\nvar curriedSetLightness$1 = curriedSetLightness;\n\n/**\n * Sets the saturation of a color to the provided value. The saturation range can be\n * from 0 and 1.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: setSaturation(0.2, '#CCCD64'),\n * background: setSaturation('0.75', 'rgba(204,205,100,0.7)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${setSaturation(0.2, '#CCCD64')};\n * background: ${setSaturation('0.75', 'rgba(204,205,100,0.7)')};\n * `\n *\n * // CSS in JS Output\n * element {\n * background: \"#adad84\";\n * background: \"rgba(228,229,76,0.7)\";\n * }\n */\nfunction setSaturation(saturation, color) {\n if (color === 'transparent') return color;\n return toColorString(_extends({}, parseToHsl(color), {\n saturation: parseFloat(saturation)\n }));\n}\n\n// prettier-ignore\nvar curriedSetSaturation = curry /* :: */(setSaturation);\nvar curriedSetSaturation$1 = curriedSetSaturation;\n\n/**\n * Shades a color by mixing it with black. `shade` can produce\n * hue shifts, where as `darken` manipulates the luminance channel and therefore\n * doesn't produce hue shifts.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: shade(0.25, '#00f')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${shade(0.25, '#00f')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#00003f\";\n * }\n */\n\nfunction shade(percentage, color) {\n if (color === 'transparent') return color;\n return mix$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);\n}\n\n// prettier-ignore\nvar curriedShade = curry /* :: */(shade);\nvar curriedShade$1 = curriedShade;\n\n/**\n * Tints a color by mixing it with white. `tint` can produce\n * hue shifts, where as `lighten` manipulates the luminance channel and therefore\n * doesn't produce hue shifts.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: tint(0.25, '#00f')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${tint(0.25, '#00f')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"#bfbfff\";\n * }\n */\n\nfunction tint(percentage, color) {\n if (color === 'transparent') return color;\n return mix$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);\n}\n\n// prettier-ignore\nvar curriedTint = curry /* :: */(tint);\nvar curriedTint$1 = curriedTint;\n\n/**\n * Decreases the opacity of a color. Its range for the amount is between 0 to 1.\n *\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * background: transparentize(0.1, '#fff'),\n * background: transparentize(0.2, 'hsl(0, 0%, 100%)'),\n * background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * background: ${transparentize(0.1, '#fff')};\n * background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')};\n * background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')};\n * `\n *\n * // CSS in JS Output\n *\n * element {\n * background: \"rgba(255,255,255,0.9)\";\n * background: \"rgba(255,255,255,0.8)\";\n * background: \"rgba(255,0,0,0.3)\";\n * }\n */\nfunction transparentize(amount, color) {\n if (color === 'transparent') return color;\n var parsedColor = parseToRgb(color);\n var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;\n var colorWithAlpha = _extends({}, parsedColor, {\n alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)\n });\n return rgba(colorWithAlpha);\n}\n\n// prettier-ignore\nvar curriedTransparentize = curry /* :: */(transparentize);\nvar curriedTransparentize$1 = curriedTransparentize;\n\n/**\n * Shorthand for easily setting the animation property. Allows either multiple arrays with animations\n * or a single animation spread over the arguments.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'animation': 'rotate 1s ease-in-out, colorchange 2s'\n * }\n * @example\n * // Styles as object usage\n * const styles = {\n * ...animation('rotate', '1s', 'ease-in-out')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${animation('rotate', '1s', 'ease-in-out')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'animation': 'rotate 1s ease-in-out'\n * }\n */\nfunction animation() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n // Allow single or multiple animations passed\n var multiMode = Array.isArray(args[0]);\n if (!multiMode && args.length > 8) {\n throw new PolishedError(64);\n }\n var code = args.map(function (arg) {\n if (multiMode && !Array.isArray(arg) || !multiMode && Array.isArray(arg)) {\n throw new PolishedError(65);\n }\n if (Array.isArray(arg) && arg.length > 8) {\n throw new PolishedError(66);\n }\n return Array.isArray(arg) ? arg.join(' ') : arg;\n }).join(', ');\n return {\n animation: code\n };\n}\n\n/**\n * Shorthand that accepts any number of backgroundImage values as parameters for creating a single background statement.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...backgroundImages('url(\"/image/background.jpg\")', 'linear-gradient(red, green)')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${backgroundImages('url(\"/image/background.jpg\")', 'linear-gradient(red, green)')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'backgroundImage': 'url(\"/image/background.jpg\"), linear-gradient(red, green)'\n * }\n */\nfunction backgroundImages() {\n for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {\n properties[_key] = arguments[_key];\n }\n return {\n backgroundImage: properties.join(', ')\n };\n}\n\n/**\n * Shorthand that accepts any number of background values as parameters for creating a single background statement.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...backgrounds('url(\"/image/background.jpg\")', 'linear-gradient(red, green)', 'center no-repeat')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${backgrounds('url(\"/image/background.jpg\")', 'linear-gradient(red, green)', 'center no-repeat')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'background': 'url(\"/image/background.jpg\"), linear-gradient(red, green), center no-repeat'\n * }\n */\nfunction backgrounds() {\n for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {\n properties[_key] = arguments[_key];\n }\n return {\n background: properties.join(', ')\n };\n}\nvar sideMap = ['top', 'right', 'bottom', 'left'];\n\n/**\n * Shorthand for the border property that splits out individual properties for use with tools like Fela and Styletron. A side keyword can optionally be passed to target only one side's border properties.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n * ...border('1px', 'solid', 'red')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${border('1px', 'solid', 'red')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'borderColor': 'red',\n * 'borderStyle': 'solid',\n * 'borderWidth': `1px`,\n * }\n *\n * // Styles as object usage\n * const styles = {\n * ...border('top', '1px', 'solid', 'red')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${border('top', '1px', 'solid', 'red')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'borderTopColor': 'red',\n * 'borderTopStyle': 'solid',\n * 'borderTopWidth': `1px`,\n * }\n */\n\nfunction border(sideKeyword) {\n for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n values[_key - 1] = arguments[_key];\n }\n if (typeof sideKeyword === 'string' && sideMap.indexOf(sideKeyword) >= 0) {\n var _ref;\n return _ref = {}, _ref[\"border\" + capitalizeString(sideKeyword) + \"Width\"] = values[0], _ref[\"border\" + capitalizeString(sideKeyword) + \"Style\"] = values[1], _ref[\"border\" + capitalizeString(sideKeyword) + \"Color\"] = values[2], _ref;\n } else {\n values.unshift(sideKeyword);\n return {\n borderWidth: values[0],\n borderStyle: values[1],\n borderColor: values[2]\n };\n }\n}\n\n/**\n * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...borderColor('red', 'green', 'blue', 'yellow')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${borderColor('red', 'green', 'blue', 'yellow')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'borderTopColor': 'red',\n * 'borderRightColor': 'green',\n * 'borderBottomColor': 'blue',\n * 'borderLeftColor': 'yellow'\n * }\n */\nfunction borderColor() {\n for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n values[_key] = arguments[_key];\n }\n return directionalProperty.apply(void 0, ['borderColor'].concat(values));\n}\n\n/**\n * Shorthand that accepts a value for side and a value for radius and applies the radius value to both corners of the side.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...borderRadius('top', '5px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${borderRadius('top', '5px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'borderTopRightRadius': '5px',\n * 'borderTopLeftRadius': '5px',\n * }\n */\nfunction borderRadius(side, radius) {\n var uppercaseSide = capitalizeString(side);\n if (!radius && radius !== 0) {\n throw new PolishedError(62);\n }\n if (uppercaseSide === 'Top' || uppercaseSide === 'Bottom') {\n var _ref;\n return _ref = {}, _ref[\"border\" + uppercaseSide + \"RightRadius\"] = radius, _ref[\"border\" + uppercaseSide + \"LeftRadius\"] = radius, _ref;\n }\n if (uppercaseSide === 'Left' || uppercaseSide === 'Right') {\n var _ref2;\n return _ref2 = {}, _ref2[\"borderTop\" + uppercaseSide + \"Radius\"] = radius, _ref2[\"borderBottom\" + uppercaseSide + \"Radius\"] = radius, _ref2;\n }\n throw new PolishedError(63);\n}\n\n/**\n * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...borderStyle('solid', 'dashed', 'dotted', 'double')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${borderStyle('solid', 'dashed', 'dotted', 'double')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'borderTopStyle': 'solid',\n * 'borderRightStyle': 'dashed',\n * 'borderBottomStyle': 'dotted',\n * 'borderLeftStyle': 'double'\n * }\n */\nfunction borderStyle() {\n for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n values[_key] = arguments[_key];\n }\n return directionalProperty.apply(void 0, ['borderStyle'].concat(values));\n}\n\n/**\n * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...borderWidth('12px', '24px', '36px', '48px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${borderWidth('12px', '24px', '36px', '48px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'borderTopWidth': '12px',\n * 'borderRightWidth': '24px',\n * 'borderBottomWidth': '36px',\n * 'borderLeftWidth': '48px'\n * }\n */\nfunction borderWidth() {\n for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n values[_key] = arguments[_key];\n }\n return directionalProperty.apply(void 0, ['borderWidth'].concat(values));\n}\nfunction generateSelectors(template, state) {\n var stateSuffix = state ? \":\" + state : '';\n return template(stateSuffix);\n}\n\n/**\n * Function helper that adds an array of states to a template of selectors. Used in textInputs and buttons.\n * @private\n */\nfunction statefulSelectors(states, template, stateMap) {\n if (!template) throw new PolishedError(67);\n if (states.length === 0) return generateSelectors(template, null);\n var selectors = [];\n for (var i = 0; i < states.length; i += 1) {\n if (stateMap && stateMap.indexOf(states[i]) < 0) {\n throw new PolishedError(68);\n }\n selectors.push(generateSelectors(template, states[i]));\n }\n selectors = selectors.join(',');\n return selectors;\n}\nvar stateMap$1 = [undefined, null, 'active', 'focus', 'hover'];\nfunction template$1(state) {\n return \"button\" + state + \",\\n input[type=\\\"button\\\"]\" + state + \",\\n input[type=\\\"reset\\\"]\" + state + \",\\n input[type=\\\"submit\\\"]\" + state;\n}\n\n/**\n * Populates selectors that target all buttons. You can pass optional states to append to the selectors.\n * @example\n * // Styles as object usage\n * const styles = {\n * [buttons('active')]: {\n * 'border': 'none'\n * }\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * > ${buttons('active')} {\n * border: none;\n * }\n * `\n *\n * // CSS in JS Output\n *\n * 'button:active,\n * 'input[type=\"button\"]:active,\n * 'input[type=\\\"reset\\\"]:active,\n * 'input[type=\\\"submit\\\"]:active: {\n * 'border': 'none'\n * }\n */\nfunction buttons() {\n for (var _len = arguments.length, states = new Array(_len), _key = 0; _key < _len; _key++) {\n states[_key] = arguments[_key];\n }\n return statefulSelectors(states, template$1, stateMap$1);\n}\n\n/**\n * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...margin('12px', '24px', '36px', '48px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${margin('12px', '24px', '36px', '48px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'marginTop': '12px',\n * 'marginRight': '24px',\n * 'marginBottom': '36px',\n * 'marginLeft': '48px'\n * }\n */\nfunction margin() {\n for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n values[_key] = arguments[_key];\n }\n return directionalProperty.apply(void 0, ['margin'].concat(values));\n}\n\n/**\n * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...padding('12px', '24px', '36px', '48px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${padding('12px', '24px', '36px', '48px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'paddingTop': '12px',\n * 'paddingRight': '24px',\n * 'paddingBottom': '36px',\n * 'paddingLeft': '48px'\n * }\n */\nfunction padding() {\n for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n values[_key] = arguments[_key];\n }\n return directionalProperty.apply(void 0, ['padding'].concat(values));\n}\nvar positionMap = ['absolute', 'fixed', 'relative', 'static', 'sticky'];\n\n/**\n * Shorthand accepts up to five values, including null to skip a value, and maps them to their respective directions. The first value can optionally be a position keyword.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...position('12px', '24px', '36px', '48px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${position('12px', '24px', '36px', '48px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'top': '12px',\n * 'right': '24px',\n * 'bottom': '36px',\n * 'left': '48px'\n * }\n *\n * // Styles as object usage\n * const styles = {\n * ...position('absolute', '12px', '24px', '36px', '48px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${position('absolute', '12px', '24px', '36px', '48px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'position': 'absolute',\n * 'top': '12px',\n * 'right': '24px',\n * 'bottom': '36px',\n * 'left': '48px'\n * }\n */\nfunction position(firstValue) {\n for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n values[_key - 1] = arguments[_key];\n }\n if (positionMap.indexOf(firstValue) >= 0 && firstValue) {\n return _extends({}, directionalProperty.apply(void 0, [''].concat(values)), {\n position: firstValue\n });\n } else {\n return directionalProperty.apply(void 0, ['', firstValue].concat(values));\n }\n}\n\n/**\n * Shorthand to set the height and width properties in a single statement.\n * @example\n * // Styles as object usage\n * const styles = {\n * ...size('300px', '250px')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${size('300px', '250px')}\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'height': '300px',\n * 'width': '250px',\n * }\n */\nfunction size(height, width) {\n if (width === void 0) {\n width = height;\n }\n return {\n height: height,\n width: width\n };\n}\nvar stateMap = [undefined, null, 'active', 'focus', 'hover'];\nfunction template(state) {\n return \"input[type=\\\"color\\\"]\" + state + \",\\n input[type=\\\"date\\\"]\" + state + \",\\n input[type=\\\"datetime\\\"]\" + state + \",\\n input[type=\\\"datetime-local\\\"]\" + state + \",\\n input[type=\\\"email\\\"]\" + state + \",\\n input[type=\\\"month\\\"]\" + state + \",\\n input[type=\\\"number\\\"]\" + state + \",\\n input[type=\\\"password\\\"]\" + state + \",\\n input[type=\\\"search\\\"]\" + state + \",\\n input[type=\\\"tel\\\"]\" + state + \",\\n input[type=\\\"text\\\"]\" + state + \",\\n input[type=\\\"time\\\"]\" + state + \",\\n input[type=\\\"url\\\"]\" + state + \",\\n input[type=\\\"week\\\"]\" + state + \",\\n input:not([type])\" + state + \",\\n textarea\" + state;\n}\n\n/**\n * Populates selectors that target all text inputs. You can pass optional states to append to the selectors.\n * @example\n * // Styles as object usage\n * const styles = {\n * [textInputs('active')]: {\n * 'border': 'none'\n * }\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * > ${textInputs('active')} {\n * border: none;\n * }\n * `\n *\n * // CSS in JS Output\n *\n * 'input[type=\"color\"]:active,\n * input[type=\"date\"]:active,\n * input[type=\"datetime\"]:active,\n * input[type=\"datetime-local\"]:active,\n * input[type=\"email\"]:active,\n * input[type=\"month\"]:active,\n * input[type=\"number\"]:active,\n * input[type=\"password\"]:active,\n * input[type=\"search\"]:active,\n * input[type=\"tel\"]:active,\n * input[type=\"text\"]:active,\n * input[type=\"time\"]:active,\n * input[type=\"url\"]:active,\n * input[type=\"week\"]:active,\n * input:not([type]):active,\n * textarea:active': {\n * 'border': 'none'\n * }\n */\nfunction textInputs() {\n for (var _len = arguments.length, states = new Array(_len), _key = 0; _key < _len; _key++) {\n states[_key] = arguments[_key];\n }\n return statefulSelectors(states, template, stateMap);\n}\n\n/**\n * Accepts any number of transition values as parameters for creating a single transition statement. You may also pass an array of properties as the first parameter that you would like to apply the same transition values to (second parameter).\n * @example\n * // Styles as object usage\n * const styles = {\n * ...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s'),\n * ...transitions(['color', 'background-color'], '2.0s ease-in 2s')\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n * ${transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')};\n * ${transitions(['color', 'background-color'], '2.0s ease-in 2s'),};\n * `\n *\n * // CSS as JS Output\n *\n * div {\n * 'transition': 'opacity 1.0s ease-in 0s, width 2.0s ease-in 2s'\n * 'transition': 'color 2.0s ease-in 2s, background-color 2.0s ease-in 2s',\n * }\n */\nfunction transitions() {\n for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {\n properties[_key] = arguments[_key];\n }\n if (Array.isArray(properties[0]) && properties.length === 2) {\n var value = properties[1];\n if (typeof value !== 'string') {\n throw new PolishedError(61);\n }\n var transitionsString = properties[0].map(function (property) {\n return property + \" \" + value;\n }).join(', ');\n return {\n transition: transitionsString\n };\n } else {\n return {\n transition: properties.join(', ')\n };\n }\n}\nexport { curriedAdjustHue$1 as adjustHue, animation, backgroundImages, backgrounds, between, border, borderColor, borderRadius, borderStyle, borderWidth, buttons, clearFix, complement, cover, cssVar, curriedDarken$1 as darken, curriedDesaturate$1 as desaturate, directionalProperty, easeIn, easeInOut, easeOut, ellipsis, em$1 as em, fluidRange, fontFace, getContrast, getLuminance, getValueAndUnit, grayscale, hiDPI, hideText, hideVisually, hsl, hslToColorString, hsla, important, invert, curriedLighten$1 as lighten, linearGradient, margin, math, meetsContrastGuidelines, mix$1 as mix, modularScale, normalize, curriedOpacify$1 as opacify, padding, parseToHsl, parseToRgb, position, radialGradient, readableColor, rem$1 as rem, remToPx, retinaImage, rgb, rgbToColorString, rgba, curriedSaturate$1 as saturate, curriedSetHue$1 as setHue, curriedSetLightness$1 as setLightness, curriedSetSaturation$1 as setSaturation, curriedShade$1 as shade, size, stripUnit, textInputs, timingFunctions, curriedTint$1 as tint, toColorString, transitions, curriedTransparentize$1 as transparentize, triangle, wordWrap };","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport * as constants from 'focus-lock/constants';\nimport { inlineProp } from './util';\nvar AutoFocusInside = function AutoFocusInside(_ref) {\n var _ref$disabled = _ref.disabled,\n disabled = _ref$disabled === void 0 ? false : _ref$disabled,\n children = _ref.children,\n _ref$className = _ref.className,\n className = _ref$className === void 0 ? undefined : _ref$className;\n return /*#__PURE__*/React.createElement(\"div\", _extends({}, inlineProp(constants.FOCUS_AUTO, !disabled), {\n className: className\n }), children);\n};\nexport default AutoFocusInside;","/**\n * defines a focus group\n */\nexport var FOCUS_GROUP = 'data-focus-lock';\n/**\n * disables element discovery inside a group marked by key\n */\nexport var FOCUS_DISABLED = 'data-focus-lock-disabled';\n/**\n * allows uncontrolled focus within the marked area, effectively disabling focus lock for it's content\n */\nexport var FOCUS_ALLOW = 'data-no-focus-lock';\n/**\n * instructs autofocus engine to pick default autofocus inside a given node\n * can be set on the element or container\n */\nexport var FOCUS_AUTO = 'data-autofocus-inside';\n/**\n * instructs autofocus to ignore elements within a given node\n * can be set on the element or container\n */\nexport var FOCUS_NO_AUTOFOCUS = 'data-no-autofocus';","import * as React from 'react';\nvar syncFallback = function syncFallback(create) {\n return create();\n};\nvar useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;\nvar useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;\nvar useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;\nexport { useInsertionEffectAlwaysWithSyncFallback, useInsertionEffectWithLayoutFallback };","const plugins = require(`./api-runner-browser-plugins`)\nconst {\n getResourcesForPathname,\n getResourcesForPathnameSync,\n getResourceURLsForPathname,\n loadPage,\n loadPageSync,\n} = require(`./loader`).publicLoader\n\nexports.apiRunner = (api, args = {}, defaultReturn, argTransform) => {\n // Hooks for gatsby-cypress's API handler\n if (process.env.CYPRESS_SUPPORT) {\n if (window.___apiHandler) {\n window.___apiHandler(api)\n } else if (window.___resolvedAPIs) {\n window.___resolvedAPIs.push(api)\n } else {\n window.___resolvedAPIs = [api]\n }\n }\n\n let results = plugins.map(plugin => {\n if (!plugin.plugin[api]) {\n return undefined\n }\n\n // Deprecated April 2019. Use `loadPageSync` instead\n args.getResourcesForPathnameSync = getResourcesForPathnameSync\n // Deprecated April 2019. Use `loadPage` instead\n args.getResourcesForPathname = getResourcesForPathname\n args.getResourceURLsForPathname = getResourceURLsForPathname\n args.loadPage = loadPage\n args.loadPageSync = loadPageSync\n\n const result = plugin.plugin[api](args, plugin.options)\n if (result && argTransform) {\n args = argTransform({ args, result, plugin })\n }\n return result\n })\n\n // Filter out undefined results.\n results = results.filter(result => typeof result !== `undefined`)\n\n if (results.length > 0) {\n return results\n } else if (defaultReturn) {\n return [defaultReturn]\n } else {\n return []\n }\n}\n\nexports.apiRunnerAsync = (api, args, defaultReturn) =>\n plugins.reduce(\n (previous, next) =>\n next.plugin[api]\n ? previous.then(() => next.plugin[api](args, next.options))\n : previous,\n Promise.resolve()\n )\n","import { createMedium, createSidecarMedium } from 'use-sidecar';\nexport var mediumFocus = createMedium({}, function (_ref) {\n var target = _ref.target,\n currentTarget = _ref.currentTarget;\n return {\n target: target,\n currentTarget: currentTarget\n };\n});\nexport var mediumBlur = createMedium();\nexport var mediumEffect = createMedium();\nexport var mediumSidecar = createSidecarMedium({\n async: true,\n ssr: typeof document !== 'undefined'\n});","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n return target;\n}"],"sourceRoot":""}