The mounted status\n */\n\nfunction useIsMountedRef() {\n const isMounted = useRef(false);\n useEffect(() => {\n isMounted.current = true;\n return () => {\n isMounted.current = false;\n };\n }, []);\n return isMounted;\n}\n\nexport { useIsMountedRef };\n","var styles = {\n \"startFade\": \"Polaris-Frame-CSSAnimation--startFade\",\n \"endFade\": \"Polaris-Frame-CSSAnimation--endFade\"\n};\n\nexport { styles as default };\n","import React, { useState, useRef, useEffect } from 'react';\nimport { classNames, variationName } from '../../../../utilities/css.js';\nimport styles from './CSSAnimation.scss.js';\n\nvar TransitionStatus;\n\n(function (TransitionStatus) {\n TransitionStatus[\"Entering\"] = \"entering\";\n TransitionStatus[\"Entered\"] = \"entered\";\n TransitionStatus[\"Exiting\"] = \"exiting\";\n TransitionStatus[\"Exited\"] = \"exited\";\n})(TransitionStatus || (TransitionStatus = {}));\n\nfunction CSSAnimation({\n in: inProp,\n className,\n type,\n children\n}) {\n const [transitionStatus, setTransitionStatus] = useState(inProp ? TransitionStatus.Entering : TransitionStatus.Exited);\n const isMounted = useRef(false);\n const node = useRef(null);\n useEffect(() => {\n if (!isMounted.current) return;\n transitionStatus === TransitionStatus.Entering && changeTransitionStatus(TransitionStatus.Entered);\n }, [transitionStatus]);\n useEffect(() => {\n if (!isMounted.current) return;\n inProp && changeTransitionStatus(TransitionStatus.Entering);\n !inProp && changeTransitionStatus(TransitionStatus.Exiting);\n }, [inProp]);\n useEffect(() => {\n isMounted.current = true;\n }, []);\n const wrapperClassName = classNames(className, styles[variationName('start', type)], inProp && styles[variationName('end', type)]);\n const content = transitionStatus === TransitionStatus.Exited && !inProp ? null : children;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: wrapperClassName,\n ref: node,\n onTransitionEnd: handleTransitionEnd\n }, content);\n\n function handleTransitionEnd() {\n transitionStatus === TransitionStatus.Exiting && changeTransitionStatus(TransitionStatus.Exited);\n }\n\n function changeTransitionStatus(transitionStatus) {\n setTransitionStatus(transitionStatus); // Forcing a reflow to enable the animation\n\n if (transitionStatus === TransitionStatus.Entering) node.current && node.current.getBoundingClientRect();\n }\n}\n\nexport { CSSAnimation };\n","var styles = {\n \"ContextualSaveBar\": \"Polaris-Frame-ContextualSaveBar\",\n \"LogoContainer\": \"Polaris-Frame-ContextualSaveBar__LogoContainer\",\n \"ContextControl\": \"Polaris-Frame-ContextualSaveBar__ContextControl\",\n \"Message\": \"Polaris-Frame-ContextualSaveBar__Message\",\n \"Contents\": \"Polaris-Frame-ContextualSaveBar__Contents\",\n \"fullWidth\": \"Polaris-Frame-ContextualSaveBar--fullWidth\",\n \"ActionContainer\": \"Polaris-Frame-ContextualSaveBar__ActionContainer\",\n \"Action\": \"Polaris-Frame-ContextualSaveBar__Action\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { Modal } from '../../../../../Modal/Modal.js';\nimport { useI18n } from '../../../../../../utilities/i18n/hooks.js';\n\nfunction DiscardConfirmationModal({\n open,\n onDiscard,\n onCancel\n}) {\n const i18n = useI18n();\n return /*#__PURE__*/React.createElement(Modal, {\n title: i18n.translate('Polaris.DiscardConfirmationModal.title'),\n open: open,\n onClose: onCancel,\n primaryAction: {\n content: i18n.translate('Polaris.DiscardConfirmationModal.primaryAction'),\n destructive: true,\n onAction: onDiscard\n },\n secondaryActions: [{\n content: i18n.translate('Polaris.DiscardConfirmationModal.secondaryAction'),\n onAction: onCancel\n }],\n sectioned: true\n }, i18n.translate('Polaris.DiscardConfirmationModal.message'));\n}\n\nexport { DiscardConfirmationModal };\n","import React, { useCallback } from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { getWidth } from '../../../../utilities/get-width.js';\nimport { useToggle } from '../../../../utilities/use-toggle.js';\nimport styles from './ContextualSaveBar.scss.js';\nimport { DiscardConfirmationModal } from './components/DiscardConfirmationModal/DiscardConfirmationModal.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { useFrame } from '../../../../utilities/frame/hooks.js';\nimport { Button } from '../../../Button/Button.js';\nimport { Image } from '../../../Image/Image.js';\nimport { CustomProperties } from '../../../CustomProperties/CustomProperties.js';\nimport { Stack } from '../../../Stack/Stack.js';\n\nfunction ContextualSaveBar({\n alignContentFlush,\n message,\n saveAction,\n discardAction,\n fullWidth,\n contextControl,\n secondaryMenu\n}) {\n const i18n = useI18n();\n const {\n logo\n } = useFrame();\n const {\n value: discardConfirmationModalVisible,\n toggle: toggleDiscardConfirmationModal,\n setFalse: closeDiscardConfirmationModal\n } = useToggle(false);\n const handleDiscardAction = useCallback(() => {\n if (discardAction && discardAction.onAction) {\n discardAction.onAction();\n }\n\n closeDiscardConfirmationModal();\n }, [closeDiscardConfirmationModal, discardAction]);\n const discardActionContent = discardAction && discardAction.content ? discardAction.content : i18n.translate('Polaris.ContextualSaveBar.discard');\n let discardActionHandler;\n\n if (discardAction && discardAction.discardConfirmationModal) {\n discardActionHandler = toggleDiscardConfirmationModal;\n } else if (discardAction) {\n discardActionHandler = discardAction.onAction;\n }\n\n const discardConfirmationModalMarkup = discardAction && discardAction.onAction && discardAction.discardConfirmationModal && /*#__PURE__*/React.createElement(DiscardConfirmationModal, {\n open: discardConfirmationModalVisible,\n onCancel: toggleDiscardConfirmationModal,\n onDiscard: handleDiscardAction\n });\n const discardActionMarkup = discardAction && /*#__PURE__*/React.createElement(Button, {\n url: discardAction.url,\n onClick: discardActionHandler,\n loading: discardAction.loading,\n disabled: discardAction.disabled,\n accessibilityLabel: discardAction.content\n }, discardActionContent);\n const saveActionContent = saveAction && saveAction.content ? saveAction.content : i18n.translate('Polaris.ContextualSaveBar.save');\n const saveActionMarkup = saveAction && /*#__PURE__*/React.createElement(Button, {\n primary: true,\n url: saveAction.url,\n onClick: saveAction.onAction,\n loading: saveAction.loading,\n disabled: saveAction.disabled,\n accessibilityLabel: saveAction.content\n }, saveActionContent);\n const width = getWidth(logo, 104);\n const imageMarkup = logo && /*#__PURE__*/React.createElement(Image, {\n style: {\n width\n },\n source: logo.contextualSaveBarSource || '',\n alt: \"\"\n });\n const logoMarkup = alignContentFlush || contextControl ? null : /*#__PURE__*/React.createElement(\"div\", {\n className: styles.LogoContainer,\n style: {\n width\n }\n }, imageMarkup);\n const contextControlMarkup = contextControl ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ContextControl\n }, contextControl) : null;\n const contentsClassName = classNames(styles.Contents, fullWidth && styles.fullWidth);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomProperties, {\n colorScheme: \"dark\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ContextualSaveBar\n }, contextControlMarkup, logoMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: contentsClassName\n }, /*#__PURE__*/React.createElement(\"h2\", {\n className: styles.Message\n }, message), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ActionContainer\n }, /*#__PURE__*/React.createElement(Stack, {\n spacing: \"tight\",\n wrap: false\n }, secondaryMenu, discardActionMarkup, saveActionMarkup))))), discardConfirmationModalMarkup);\n}\n\nexport { ContextualSaveBar };\n","var styles = {\n \"ToastManager\": \"Polaris-Frame-ToastManager\",\n \"ToastWrapper\": \"Polaris-Frame-ToastManager__ToastWrapper\",\n \"ToastWrapper-enter\": \"Polaris-Frame-ToastManager__ToastWrapper--enter\",\n \"ToastWrapper-exit\": \"Polaris-Frame-ToastManager__ToastWrapper--exit\",\n \"ToastWrapper-enter-done\": \"Polaris-Frame-ToastManager--toastWrapperEnterDone\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Toast\": \"Polaris-Frame-Toast\",\n \"Action\": \"Polaris-Frame-Toast__Action\",\n \"error\": \"Polaris-Frame-Toast--error\",\n \"CloseButton\": \"Polaris-Frame-Toast__CloseButton\"\n};\n\nexport { styles as default };\n","import React, { useEffect } from 'react';\nimport { MobileCancelMajor } from '@shopify/polaris-icons';\nimport { classNames } from '../../../../utilities/css.js';\nimport { Key } from '../../../../types.js';\nimport styles from './Toast.scss.js';\nimport { Icon } from '../../../Icon/Icon.js';\nimport { Button } from '../../../Button/Button.js';\nimport { CustomProperties } from '../../../CustomProperties/CustomProperties.js';\nimport { KeypressListener } from '../../../KeypressListener/KeypressListener.js';\n\nconst DEFAULT_TOAST_DURATION = 5000;\nconst DEFAULT_TOAST_DURATION_WITH_ACTION = 10000;\nfunction Toast({\n content,\n onDismiss,\n duration,\n error,\n action\n}) {\n useEffect(() => {\n let timeoutDuration = duration || DEFAULT_TOAST_DURATION;\n\n if (action && !duration) {\n timeoutDuration = DEFAULT_TOAST_DURATION_WITH_ACTION;\n } else if (action && duration && duration < DEFAULT_TOAST_DURATION_WITH_ACTION) {\n // eslint-disable-next-line no-console\n console.log('Toast with action should persist for at least 10,000 milliseconds to give the merchant enough time to act on it.');\n }\n\n const timer = setTimeout(onDismiss, timeoutDuration);\n return () => {\n clearTimeout(timer);\n };\n }, [action, duration, onDismiss]);\n const dismissMarkup = /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: styles.CloseButton,\n onClick: onDismiss\n }, /*#__PURE__*/React.createElement(Icon, {\n source: MobileCancelMajor\n }));\n const actionMarkup = action ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Action\n }, /*#__PURE__*/React.createElement(Button, {\n plain: true,\n monochrome: true,\n onClick: action.onAction\n }, action.content)) : null;\n const className = classNames(styles.Toast, error && styles.error);\n return /*#__PURE__*/React.createElement(CustomProperties, {\n colorScheme: \"dark\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, /*#__PURE__*/React.createElement(KeypressListener, {\n keyCode: Key.Escape,\n handler: onDismiss\n }), content, actionMarkup, dismissMarkup));\n}\n\nexport { DEFAULT_TOAST_DURATION, DEFAULT_TOAST_DURATION_WITH_ACTION, Toast };\n","import React, { memo, createRef } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { classNames } from '../../../../utilities/css.js';\nimport { useDeepEffect } from '../../../../utilities/use-deep-effect.js';\nimport { useDeepCallback } from '../../../../utilities/use-deep-callback.js';\nimport styles from './ToastManager.scss.js';\nimport { Toast } from '../Toast/Toast.js';\nimport { Portal } from '../../../Portal/Portal.js';\nimport { EventListener } from '../../../EventListener/EventListener.js';\n\nconst ToastManager = /*#__PURE__*/memo(function ToastManager({\n toastMessages\n}) {\n const toastNodes = [];\n const updateToasts = useDeepCallback(() => {\n let targetInPos = 0;\n toastMessages.forEach((_, index) => {\n const currentToast = toastNodes[index];\n if (!currentToast.current) return;\n targetInPos += currentToast.current.clientHeight;\n currentToast.current.style.setProperty('--pc-toast-manager-translate-y-in', `-${targetInPos}px`);\n currentToast.current.style.setProperty('--pc-toast-manager-translate-y-out', `${-targetInPos + 150}px`);\n });\n }, [toastMessages, toastNodes]);\n useDeepEffect(() => {\n updateToasts();\n }, [toastMessages]);\n const toastsMarkup = toastMessages.map((toast, index) => {\n const toastNode = /*#__PURE__*/createRef();\n toastNodes[index] = toastNode;\n return /*#__PURE__*/React.createElement(CSSTransition, {\n nodeRef: toastNodes[index],\n key: toast.id,\n timeout: {\n enter: 0,\n exit: 400\n },\n classNames: toastClasses\n }, /*#__PURE__*/React.createElement(\"div\", {\n ref: toastNode\n }, /*#__PURE__*/React.createElement(Toast, toast)));\n });\n return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: updateToasts\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ToastManager,\n \"aria-live\": \"assertive\"\n }, /*#__PURE__*/React.createElement(TransitionGroup, {\n component: null\n }, toastsMarkup)));\n});\nconst toastClasses = {\n enter: classNames(styles.ToastWrapper, styles['ToastWrapper-enter']),\n enterDone: classNames(styles.ToastWrapper, styles['ToastWrapper-enter-done']),\n exit: classNames(styles.ToastWrapper, styles['ToastWrapper-exit'])\n};\n\nexport { ToastManager };\n","import { useCallback } from 'react';\nimport { useDeepCompareRef } from './use-deep-compare-ref.js';\n\n/**\n * A replacement for React's useCallback that'll allow for custom and deep compares.\n * @see {@link https://reactjs.org/docs/hooks-reference.html#usecallback}\n * @param callback Accepts a callback that's forwarded to React's useCallback\n * @param dependencies A dependency array similar to React's useCallback however it utilizes a deep compare\n * @param customCompare Opportunity to provide a custom compare function\n * @returns A memoized callback\n * @example\n * const Child = memo(function Child({onClick}) {\n * console.log('Child has rendered.');\n * return ;\n * });\n *\n * function ComponentExample() {\n * const [timesClicked, setTimesClicked] = useState(0);\n *\n * const handleClick = useDeepCallback(() => {\n * setTimesClicked((timesClicked) => timesClicked + 1);\n * // New reference every render\n * }, [{}]);\n *\n * return (\n * <>\n * Times clicked: {timesClicked}
\n * \n * >\n * );\n * }\n */\n\nfunction useDeepCallback(callback, dependencies, customCompare) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return useCallback(callback, useDeepCompareRef(dependencies, customCompare));\n}\n\nexport { useDeepCallback };\n","import React, { PureComponent, createRef } from 'react';\nimport { MobileCancelMajor } from '@shopify/polaris-icons';\nimport { CSSTransition } from 'react-transition-group';\nimport { tokens } from '@shopify/polaris-tokens';\nimport { classNames } from '../../utilities/css.js';\nimport { layer, dataPolarisTopBar } from '../shared.js';\nimport { setRootProperty } from '../../utilities/set-root-property.js';\nimport styles from './Frame.scss.js';\nimport { Loading } from './components/Loading/Loading.js';\nimport { CSSAnimation } from './components/CSSAnimation/CSSAnimation.js';\nimport { ContextualSaveBar } from './components/ContextualSaveBar/ContextualSaveBar.js';\nimport { FrameContext } from '../../utilities/frame/context.js';\nimport { ToastManager } from './components/ToastManager/ToastManager.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { useMediaQuery } from '../../utilities/media-query/hooks.js';\nimport { TrapFocus } from '../TrapFocus/TrapFocus.js';\nimport { Icon } from '../Icon/Icon.js';\nimport { Backdrop } from '../Backdrop/Backdrop.js';\nimport { EventListener } from '../EventListener/EventListener.js';\n\nconst APP_FRAME_MAIN = 'AppFrameMain';\nconst APP_FRAME_NAV = 'AppFrameNav';\nconst APP_FRAME_TOP_BAR = 'AppFrameTopBar';\nconst APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';\n\nclass FrameInner extends PureComponent {\n constructor(...args) {\n super(...args);\n this.state = {\n skipFocused: false,\n globalRibbonHeight: 0,\n loadingStack: 0,\n toastMessages: [],\n showContextualSaveBar: false\n };\n this.contextualSaveBar = null;\n this.globalRibbonContainer = null;\n this.navigationNode = /*#__PURE__*/createRef();\n\n this.setGlobalRibbonHeight = () => {\n const {\n globalRibbonContainer\n } = this;\n\n if (globalRibbonContainer) {\n this.setState({\n globalRibbonHeight: globalRibbonContainer.offsetHeight\n }, this.setGlobalRibbonRootProperty);\n }\n };\n\n this.setOffset = () => {\n const {\n offset = '0px'\n } = this.props;\n setRootProperty('--pc-frame-offset', offset);\n };\n\n this.setGlobalRibbonRootProperty = () => {\n const {\n globalRibbonHeight\n } = this.state;\n setRootProperty('--pc-frame-global-ribbon-height', `${globalRibbonHeight}px`);\n };\n\n this.showToast = toast => {\n this.setState(({\n toastMessages\n }) => {\n const hasToastById = toastMessages.find(({\n id\n }) => id === toast.id) != null;\n return {\n toastMessages: hasToastById ? toastMessages : [...toastMessages, toast]\n };\n });\n };\n\n this.hideToast = ({\n id\n }) => {\n this.setState(({\n toastMessages\n }) => {\n return {\n toastMessages: toastMessages.filter(({\n id: toastId\n }) => id !== toastId)\n };\n });\n };\n\n this.setContextualSaveBar = props => {\n const {\n showContextualSaveBar\n } = this.state;\n this.contextualSaveBar = { ...props\n };\n\n if (showContextualSaveBar === true) {\n this.forceUpdate();\n } else {\n this.setState({\n showContextualSaveBar: true\n });\n }\n };\n\n this.removeContextualSaveBar = () => {\n this.contextualSaveBar = null;\n this.setState({\n showContextualSaveBar: false\n });\n };\n\n this.startLoading = () => {\n this.setState(({\n loadingStack\n }) => ({\n loadingStack: loadingStack + 1\n }));\n };\n\n this.stopLoading = () => {\n this.setState(({\n loadingStack\n }) => ({\n loadingStack: Math.max(0, loadingStack - 1)\n }));\n };\n\n this.handleResize = () => {\n if (this.props.globalRibbon) {\n this.setGlobalRibbonHeight();\n }\n };\n\n this.handleFocus = () => {\n this.setState({\n skipFocused: true\n });\n };\n\n this.handleBlur = () => {\n this.setState({\n skipFocused: false\n });\n };\n\n this.handleClick = event => {\n const {\n skipToContentTarget\n } = this.props;\n\n if (skipToContentTarget && skipToContentTarget.current) {\n skipToContentTarget.current.focus();\n event === null || event === void 0 ? void 0 : event.preventDefault();\n }\n };\n\n this.handleNavigationDismiss = () => {\n const {\n onNavigationDismiss\n } = this.props;\n\n if (onNavigationDismiss != null) {\n onNavigationDismiss();\n }\n };\n\n this.setGlobalRibbonContainer = node => {\n this.globalRibbonContainer = node;\n };\n\n this.handleNavKeydown = event => {\n const {\n key\n } = event;\n const {\n mediaQuery: {\n isNavigationCollapsed\n },\n showMobileNavigation\n } = this.props;\n const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;\n\n if (mobileNavShowing && key === 'Escape') {\n this.handleNavigationDismiss();\n }\n };\n }\n\n componentDidMount() {\n this.handleResize();\n\n if (this.props.globalRibbon) {\n return;\n }\n\n this.setGlobalRibbonRootProperty();\n this.setOffset();\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.globalRibbon !== prevProps.globalRibbon) {\n this.setGlobalRibbonHeight();\n }\n\n this.setOffset();\n }\n\n render() {\n const {\n skipFocused,\n loadingStack,\n toastMessages,\n showContextualSaveBar\n } = this.state;\n const {\n logo,\n children,\n navigation,\n topBar,\n globalRibbon,\n showMobileNavigation = false,\n skipToContentTarget,\n i18n,\n mediaQuery: {\n isNavigationCollapsed\n }\n } = this.props;\n const navClassName = classNames(styles.Navigation, showMobileNavigation && styles['Navigation-visible']);\n const mobileNavHidden = isNavigationCollapsed && !showMobileNavigation;\n const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;\n const tabIndex = mobileNavShowing ? 0 : -1;\n const mobileNavAttributes = { ...(mobileNavShowing && {\n 'aria-modal': true,\n role: 'dialog'\n })\n };\n const navigationMarkup = navigation ? /*#__PURE__*/React.createElement(TrapFocus, {\n trapping: mobileNavShowing\n }, /*#__PURE__*/React.createElement(CSSTransition, {\n nodeRef: this.navigationNode,\n appear: isNavigationCollapsed,\n exit: isNavigationCollapsed,\n in: showMobileNavigation,\n timeout: parseInt(tokens.motion['duration-300'].value, 10),\n classNames: navTransitionClasses\n }, /*#__PURE__*/React.createElement(\"div\", Object.assign({\n key: \"NavContent\"\n }, mobileNavAttributes, {\n \"aria-label\": i18n.translate('Polaris.Frame.navigationLabel'),\n ref: this.navigationNode,\n className: navClassName,\n onKeyDown: this.handleNavKeydown,\n id: APP_FRAME_NAV,\n hidden: mobileNavHidden\n }), navigation, /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: styles.NavigationDismiss,\n onClick: this.handleNavigationDismiss,\n \"aria-hidden\": mobileNavHidden || !isNavigationCollapsed && !showMobileNavigation,\n \"aria-label\": i18n.translate('Polaris.Frame.Navigation.closeMobileNavigationLabel'),\n tabIndex: tabIndex\n }, /*#__PURE__*/React.createElement(Icon, {\n source: MobileCancelMajor\n }))))) : null;\n const loadingMarkup = loadingStack > 0 ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.LoadingBar,\n id: APP_FRAME_LOADING_BAR\n }, /*#__PURE__*/React.createElement(Loading, null)) : null;\n const contextualSaveBarMarkup = /*#__PURE__*/React.createElement(CSSAnimation, {\n in: showContextualSaveBar,\n className: styles.ContextualSaveBar,\n type: \"fade\"\n }, /*#__PURE__*/React.createElement(ContextualSaveBar, this.contextualSaveBar));\n const topBarMarkup = topBar ? /*#__PURE__*/React.createElement(\"div\", Object.assign({\n className: styles.TopBar\n }, layer.props, dataPolarisTopBar.props, {\n id: APP_FRAME_TOP_BAR\n }), topBar) : null;\n const globalRibbonMarkup = globalRibbon ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.GlobalRibbonContainer,\n ref: this.setGlobalRibbonContainer\n }, globalRibbon) : null;\n const skipClassName = classNames(styles.Skip, skipFocused && styles.focused);\n const skipTarget = skipToContentTarget !== null && skipToContentTarget !== void 0 && skipToContentTarget.current ? skipToContentTarget.current.id : APP_FRAME_MAIN;\n const skipMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: skipClassName\n }, /*#__PURE__*/React.createElement(\"a\", {\n href: `#${skipTarget}`,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onClick: this.handleClick\n }, i18n.translate('Polaris.Frame.skipToContent')));\n const navigationAttributes = navigation ? {\n 'data-has-navigation': true\n } : {};\n const frameClassName = classNames(styles.Frame, navigation && styles.hasNav, topBar && styles.hasTopBar);\n const navigationOverlayMarkup = showMobileNavigation && isNavigationCollapsed ? /*#__PURE__*/React.createElement(Backdrop, {\n belowNavigation: true,\n onClick: this.handleNavigationDismiss,\n onTouchStart: this.handleNavigationDismiss\n }) : null; // This is probably a legit error but I don't have the time to refactor this\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n\n const context = {\n logo,\n showToast: this.showToast,\n hideToast: this.hideToast,\n startLoading: this.startLoading,\n stopLoading: this.stopLoading,\n setContextualSaveBar: this.setContextualSaveBar,\n removeContextualSaveBar: this.removeContextualSaveBar\n };\n return /*#__PURE__*/React.createElement(FrameContext.Provider, {\n value: context\n }, /*#__PURE__*/React.createElement(\"div\", Object.assign({\n className: frameClassName\n }, layer.props, navigationAttributes), skipMarkup, topBarMarkup, navigationMarkup, contextualSaveBarMarkup, loadingMarkup, navigationOverlayMarkup, /*#__PURE__*/React.createElement(\"main\", {\n className: styles.Main,\n id: APP_FRAME_MAIN,\n \"data-has-global-ribbon\": Boolean(globalRibbon)\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Content\n }, children)), /*#__PURE__*/React.createElement(ToastManager, {\n toastMessages: toastMessages\n }), globalRibbonMarkup, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: this.handleResize\n })));\n }\n\n}\n\nconst navTransitionClasses = {\n enter: classNames(styles['Navigation-enter']),\n enterActive: classNames(styles['Navigation-enterActive']),\n enterDone: classNames(styles['Navigation-enterActive']),\n exit: classNames(styles['Navigation-exit']),\n exitActive: classNames(styles['Navigation-exitActive'])\n};\nfunction Frame(props) {\n const i18n = useI18n();\n const mediaQuery = useMediaQuery();\n return /*#__PURE__*/React.createElement(FrameInner, Object.assign({}, props, {\n i18n: i18n,\n mediaQuery: mediaQuery\n }));\n}\n\nexport { Frame };\n","var styles = {\n \"Grid\": \"Polaris-Grid\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Cell\": \"Polaris-Grid-Cell\",\n \"Cell-1-column-xs\": \"Polaris-Grid-Cell--cell_1ColumnXs\",\n \"Cell-2-column-xs\": \"Polaris-Grid-Cell--cell_2ColumnXs\",\n \"Cell-3-column-xs\": \"Polaris-Grid-Cell--cell_3ColumnXs\",\n \"Cell-4-column-xs\": \"Polaris-Grid-Cell--cell_4ColumnXs\",\n \"Cell-5-column-xs\": \"Polaris-Grid-Cell--cell_5ColumnXs\",\n \"Cell-6-column-xs\": \"Polaris-Grid-Cell--cell_6ColumnXs\",\n \"Cell-1-column-sm\": \"Polaris-Grid-Cell--cell_1ColumnSm\",\n \"Cell-2-column-sm\": \"Polaris-Grid-Cell--cell_2ColumnSm\",\n \"Cell-3-column-sm\": \"Polaris-Grid-Cell--cell_3ColumnSm\",\n \"Cell-4-column-sm\": \"Polaris-Grid-Cell--cell_4ColumnSm\",\n \"Cell-5-column-sm\": \"Polaris-Grid-Cell--cell_5ColumnSm\",\n \"Cell-6-column-sm\": \"Polaris-Grid-Cell--cell_6ColumnSm\",\n \"Cell-1-column-md\": \"Polaris-Grid-Cell--cell_1ColumnMd\",\n \"Cell-2-column-md\": \"Polaris-Grid-Cell--cell_2ColumnMd\",\n \"Cell-3-column-md\": \"Polaris-Grid-Cell--cell_3ColumnMd\",\n \"Cell-4-column-md\": \"Polaris-Grid-Cell--cell_4ColumnMd\",\n \"Cell-5-column-md\": \"Polaris-Grid-Cell--cell_5ColumnMd\",\n \"Cell-6-column-md\": \"Polaris-Grid-Cell--cell_6ColumnMd\",\n \"Cell-1-column-lg\": \"Polaris-Grid-Cell--cell_1ColumnLg\",\n \"Cell-2-column-lg\": \"Polaris-Grid-Cell--cell_2ColumnLg\",\n \"Cell-3-column-lg\": \"Polaris-Grid-Cell--cell_3ColumnLg\",\n \"Cell-4-column-lg\": \"Polaris-Grid-Cell--cell_4ColumnLg\",\n \"Cell-5-column-lg\": \"Polaris-Grid-Cell--cell_5ColumnLg\",\n \"Cell-6-column-lg\": \"Polaris-Grid-Cell--cell_6ColumnLg\",\n \"Cell-7-column-lg\": \"Polaris-Grid-Cell--cell_7ColumnLg\",\n \"Cell-8-column-lg\": \"Polaris-Grid-Cell--cell_8ColumnLg\",\n \"Cell-9-column-lg\": \"Polaris-Grid-Cell--cell_9ColumnLg\",\n \"Cell-10-column-lg\": \"Polaris-Grid-Cell--cell_10ColumnLg\",\n \"Cell-11-column-lg\": \"Polaris-Grid-Cell--cell_11ColumnLg\",\n \"Cell-12-column-lg\": \"Polaris-Grid-Cell--cell_12ColumnLg\",\n \"Cell-1-column-xl\": \"Polaris-Grid-Cell--cell_1ColumnXl\",\n \"Cell-2-column-xl\": \"Polaris-Grid-Cell--cell_2ColumnXl\",\n \"Cell-3-column-xl\": \"Polaris-Grid-Cell--cell_3ColumnXl\",\n \"Cell-4-column-xl\": \"Polaris-Grid-Cell--cell_4ColumnXl\",\n \"Cell-5-column-xl\": \"Polaris-Grid-Cell--cell_5ColumnXl\",\n \"Cell-6-column-xl\": \"Polaris-Grid-Cell--cell_6ColumnXl\",\n \"Cell-7-column-xl\": \"Polaris-Grid-Cell--cell_7ColumnXl\",\n \"Cell-8-column-xl\": \"Polaris-Grid-Cell--cell_8ColumnXl\",\n \"Cell-9-column-xl\": \"Polaris-Grid-Cell--cell_9ColumnXl\",\n \"Cell-10-column-xl\": \"Polaris-Grid-Cell--cell_10ColumnXl\",\n \"Cell-11-column-xl\": \"Polaris-Grid-Cell--cell_11ColumnXl\",\n \"Cell-12-column-xl\": \"Polaris-Grid-Cell--cell_12ColumnXl\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './Grid.scss.js';\nimport { Cell } from './components/Cell/Cell.js';\n\n/** **Experimental!**\n * This component is in alpha. Use with caution.\n * 6 column default for xs, sm, and md breakpoints.\n * 12 columns for lg, and xl.\n */\nconst Grid = function Grid({\n gap,\n areas,\n children,\n columns\n}) {\n const style = {\n '--pc-grid-gap-xs': gap === null || gap === void 0 ? void 0 : gap.xs,\n '--pc-grid-gap-sm': gap === null || gap === void 0 ? void 0 : gap.sm,\n '--pc-grid-gap-md': gap === null || gap === void 0 ? void 0 : gap.md,\n '--pc-grid-gap-lg': gap === null || gap === void 0 ? void 0 : gap.lg,\n '--pc-grid-gap-xl': gap === null || gap === void 0 ? void 0 : gap.xl,\n '--pc-grid-columns-xs': columns === null || columns === void 0 ? void 0 : columns.xs,\n '--pc-grid-columns-sm': columns === null || columns === void 0 ? void 0 : columns.sm,\n '--pc-grid-columns-md': columns === null || columns === void 0 ? void 0 : columns.md,\n '--pc-grid-columns-lg': columns === null || columns === void 0 ? void 0 : columns.lg,\n '--pc-grid-columns-xl': columns === null || columns === void 0 ? void 0 : columns.xl,\n '--pc-grid-areas-xs': formatAreas(areas === null || areas === void 0 ? void 0 : areas.xs),\n '--pc-grid-areas-sm': formatAreas(areas === null || areas === void 0 ? void 0 : areas.sm),\n '--pc-grid-areas-md': formatAreas(areas === null || areas === void 0 ? void 0 : areas.md),\n '--pc-grid-areas-lg': formatAreas(areas === null || areas === void 0 ? void 0 : areas.lg),\n '--pc-grid-areas-xl': formatAreas(areas === null || areas === void 0 ? void 0 : areas.xl)\n };\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Grid,\n style: style\n }, children);\n};\nfunction formatAreas(areas) {\n if (!areas) return;\n return `'${areas === null || areas === void 0 ? void 0 : areas.join(`' '`)}'`;\n}\nGrid.Cell = Cell;\n\nexport { Grid, formatAreas };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from './Cell.scss.js';\n\nfunction Cell({\n area: gridArea,\n column,\n columnSpan,\n row,\n children\n}) {\n const className = classNames(styles.Cell, (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.xs) && styles[`Cell-${columnSpan.xs}-column-xs`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.sm) && styles[`Cell-${columnSpan.sm}-column-sm`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.md) && styles[`Cell-${columnSpan.md}-column-md`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.lg) && styles[`Cell-${columnSpan.lg}-column-lg`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.xl) && styles[`Cell-${columnSpan.xl}-column-xl`]);\n const style = {\n gridArea,\n '--pc-column-xs': column === null || column === void 0 ? void 0 : column.xs,\n '--pc-column-sm': column === null || column === void 0 ? void 0 : column.sm,\n '--pc-column-md': column === null || column === void 0 ? void 0 : column.md,\n '--pc-column-lg': column === null || column === void 0 ? void 0 : column.lg,\n '--pc-column-xl': column === null || column === void 0 ? void 0 : column.xl,\n '--pc-row-xs': row === null || row === void 0 ? void 0 : row.xs,\n '--pc-row-sm': row === null || row === void 0 ? void 0 : row.sm,\n '--pc-row-md': row === null || row === void 0 ? void 0 : row.md,\n '--pc-row-lg': row === null || row === void 0 ? void 0 : row.lg,\n '--pc-row-xl': row === null || row === void 0 ? void 0 : row.xl\n };\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n style: style\n }, children);\n}\n\nexport { Cell };\n","var styles = {\n \"Heading\": \"Polaris-Heading\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './Heading.scss.js';\n\nfunction Heading({\n element: Element = 'h2',\n children,\n id\n}) {\n return /*#__PURE__*/React.createElement(Element, {\n className: styles.Heading,\n id: id\n }, children);\n}\n\nexport { Heading };\n","var styles = {\n \"Icon\": \"Polaris-Icon\",\n \"applyColor\": \"Polaris-Icon--applyColor\",\n \"hasBackdrop\": \"Polaris-Icon--hasBackdrop\",\n \"colorBase\": \"Polaris-Icon--colorBase\",\n \"colorSubdued\": \"Polaris-Icon--colorSubdued\",\n \"colorCritical\": \"Polaris-Icon--colorCritical\",\n \"colorInteractive\": \"Polaris-Icon--colorInteractive\",\n \"colorWarning\": \"Polaris-Icon--colorWarning\",\n \"colorHighlight\": \"Polaris-Icon--colorHighlight\",\n \"colorSuccess\": \"Polaris-Icon--colorSuccess\",\n \"colorPrimary\": \"Polaris-Icon--colorPrimary\",\n \"Svg\": \"Polaris-Icon__Svg\",\n \"Img\": \"Polaris-Icon__Img\",\n \"Placeholder\": \"Polaris-Icon__Placeholder\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport styles from './Icon.scss.js';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';\n\nconst COLORS_WITH_BACKDROPS = ['base', 'critical', 'highlight', 'success', 'warning'];\nfunction Icon({\n source,\n color,\n backdrop,\n accessibilityLabel\n}) {\n let sourceType;\n\n if (typeof source === 'function') {\n sourceType = 'function';\n } else if (source === 'placeholder') {\n sourceType = 'placeholder';\n } else {\n sourceType = 'external';\n }\n\n if (color && sourceType === 'external' && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('Recoloring external SVGs is not supported. Set the intended color on your SVG instead.');\n }\n\n if (backdrop && color && !COLORS_WITH_BACKDROPS.includes(color) && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(`The ${color} variant does not have a supported backdrop color`);\n }\n\n const className = classNames(styles.Icon, color && styles[variationName('color', color)], color && styles.applyColor, backdrop && styles.hasBackdrop);\n const SourceComponent = source;\n const contentMarkup = {\n function: /*#__PURE__*/React.createElement(SourceComponent, {\n className: styles.Svg,\n focusable: \"false\",\n \"aria-hidden\": \"true\"\n }),\n placeholder: /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Placeholder\n }),\n external: /*#__PURE__*/React.createElement(\"img\", {\n className: styles.Img,\n src: `data:image/svg+xml;utf8,${source}`,\n alt: \"\",\n \"aria-hidden\": \"true\"\n })\n };\n return /*#__PURE__*/React.createElement(\"span\", {\n className: className\n }, /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel), contentMarkup[sourceType]);\n}\n\nexport { Icon };\n","import React, { useCallback } from 'react';\n\nfunction Image({\n alt,\n sourceSet,\n source,\n crossOrigin,\n onLoad,\n className,\n ...rest\n}) {\n const finalSourceSet = sourceSet ? sourceSet.map(({\n source: subSource,\n descriptor\n }) => `${subSource} ${descriptor}`).join(',') : null;\n const handleLoad = useCallback(() => {\n if (onLoad) onLoad();\n }, [onLoad]);\n return /*#__PURE__*/React.createElement(\"img\", Object.assign({\n alt: alt,\n src: source,\n crossOrigin: crossOrigin,\n className: className,\n onLoad: handleLoad\n }, finalSourceSet ? {\n srcSet: finalSourceSet\n } : {}, rest));\n}\n\nexport { Image };\n","var styles = {\n \"Indicator\": \"Polaris-Indicator\",\n \"pulseIndicator\": \"Polaris-Indicator--pulseIndicator\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './Indicator.scss.js';\n\nfunction Indicator({\n pulse = true\n}) {\n const className = classNames(styles.Indicator, pulse && styles.pulseIndicator);\n return /*#__PURE__*/React.createElement(\"span\", {\n className: className\n });\n}\n\nexport { Indicator };\n","import React from 'react';\n\nvar SvgAlertMinor = function SvgAlertMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-9a1 1 0 0 0 2 0v-2a1 1 0 1 0-2 0v2zm0 4a1 1 0 1 0 2 0 1 1 0 0 0-2 0z\"\n }));\n};\n\nexport { SvgAlertMinor as S };\n","var styles = {\n \"InlineError\": \"Polaris-InlineError\",\n \"Icon\": \"Polaris-InlineError__Icon\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { AlertMinor } from '@shopify/polaris-icons';\nimport styles from './InlineError.scss.js';\nimport { Icon } from '../Icon/Icon.js';\n\nfunction InlineError({\n message,\n fieldID\n}) {\n if (!message) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"div\", {\n id: errorTextID(fieldID),\n className: styles.InlineError\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Icon\n }, /*#__PURE__*/React.createElement(Icon, {\n source: AlertMinor\n })), message);\n}\nfunction errorTextID(id) {\n return `${id}Error`;\n}\n\nexport { InlineError, errorTextID };\n","import { useEffect, useLayoutEffect } from 'react';\nimport { isServer } from './target.js';\n\nconst useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;\n\nexport { useIsomorphicLayoutEffect };\n","import { useRef, useCallback, useEffect } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../utilities/use-isomorphic-layout-effect.js';\n\nfunction KeypressListener({\n keyCode,\n handler,\n keyEvent = 'keyup',\n options,\n useCapture\n}) {\n const tracked = useRef({\n handler,\n keyCode\n });\n useIsomorphicLayoutEffect(() => {\n tracked.current = {\n handler,\n keyCode\n };\n }, [handler, keyCode]);\n const handleKeyEvent = useCallback(event => {\n const {\n handler,\n keyCode\n } = tracked.current;\n\n if (event.keyCode === keyCode) {\n handler(event);\n }\n }, []);\n useEffect(() => {\n document.addEventListener(keyEvent, handleKeyEvent, useCapture || options);\n return () => {\n document.removeEventListener(keyEvent, handleKeyEvent, useCapture || options);\n };\n }, [keyEvent, handleKeyEvent, useCapture, options]);\n return null;\n}\n\nexport { KeypressListener };\n","var styles = {\n \"Label\": \"Polaris-Label\",\n \"hidden\": \"Polaris-Label--hidden\",\n \"Text\": \"Polaris-Label__Text\",\n \"RequiredIndicator\": \"Polaris-Label__RequiredIndicator\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './Label.scss.js';\n\nfunction labelID(id) {\n return `${id}Label`;\n}\nfunction Label({\n children,\n id,\n hidden,\n requiredIndicator\n}) {\n const className = classNames(styles.Label, hidden && styles.hidden);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, /*#__PURE__*/React.createElement(\"label\", {\n id: labelID(id),\n htmlFor: id,\n className: classNames(styles.Text, requiredIndicator && styles.RequiredIndicator)\n }, children));\n}\n\nexport { Label, labelID };\n","var styles = {\n \"hidden\": \"Polaris-Labelled--hidden\",\n \"LabelWrapper\": \"Polaris-Labelled__LabelWrapper\",\n \"HelpText\": \"Polaris-Labelled__HelpText\",\n \"Error\": \"Polaris-Labelled__Error\",\n \"Action\": \"Polaris-Labelled__Action\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './Labelled.scss.js';\nimport { InlineError } from '../InlineError/InlineError.js';\nimport { Label } from '../Label/Label.js';\nexport { labelID } from '../Label/Label.js';\nimport { buttonFrom } from '../Button/utils.js';\n\nfunction Labelled({\n id,\n label,\n error,\n action,\n helpText,\n children,\n labelHidden,\n requiredIndicator,\n ...rest\n}) {\n const className = classNames(labelHidden && styles.hidden);\n const actionMarkup = action ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Action\n }, buttonFrom(action, {\n plain: true\n })) : null;\n const helpTextMarkup = helpText ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.HelpText,\n id: helpTextID(id)\n }, helpText) : null;\n const errorMarkup = error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Error\n }, /*#__PURE__*/React.createElement(InlineError, {\n message: error,\n fieldID: id\n }));\n const labelMarkup = label ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.LabelWrapper\n }, /*#__PURE__*/React.createElement(Label, Object.assign({\n id: id,\n requiredIndicator: requiredIndicator\n }, rest, {\n hidden: false\n }), label), actionMarkup) : null;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, labelMarkup, children, errorMarkup, helpTextMarkup);\n}\nfunction helpTextID(id) {\n return `${id}HelpText`;\n}\n\nexport { Labelled, helpTextID };\n","var styles = {\n \"Link\": \"Polaris-Link\",\n \"monochrome\": \"Polaris-Link--monochrome\",\n \"removeUnderline\": \"Polaris-Link--removeUnderline\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { BannerContext } from '../../utilities/banner-context.js';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './Link.scss.js';\nimport { UnstyledLink } from '../UnstyledLink/UnstyledLink.js';\n\nfunction Link({\n url,\n children,\n onClick,\n external,\n id,\n monochrome,\n removeUnderline,\n accessibilityLabel,\n dataPrimaryLink\n}) {\n return /*#__PURE__*/React.createElement(BannerContext.Consumer, null, BannerContext => {\n const shouldBeMonochrome = monochrome || BannerContext;\n const className = classNames(styles.Link, shouldBeMonochrome && styles.monochrome, removeUnderline && styles.removeUnderline);\n return url ? /*#__PURE__*/React.createElement(UnstyledLink, {\n onClick: onClick,\n className: className,\n url: url,\n external: external,\n id: id,\n \"aria-label\": accessibilityLabel,\n \"data-primary-link\": dataPrimaryLink\n }, children) : /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n onClick: onClick,\n className: className,\n id: id,\n \"aria-label\": accessibilityLabel,\n \"data-primary-link\": dataPrimaryLink\n }, children);\n });\n}\n\nexport { Link };\n","var styles = {\n \"List\": \"Polaris-List\",\n \"typeNumber\": \"Polaris-List--typeNumber\",\n \"Item\": \"Polaris-List__Item\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport styles from './List.scss.js';\nimport { Item } from './components/Item/Item.js';\n\nconst List = function List({\n children,\n type = 'bullet'\n}) {\n const className = classNames(styles.List, type && styles[variationName('type', type)]);\n const ListElement = type === 'bullet' ? 'ul' : 'ol';\n return /*#__PURE__*/React.createElement(ListElement, {\n className: className\n }, children);\n};\nList.Item = Item;\n\nexport { List };\n","import React from 'react';\nimport styles from '../../List.scss.js';\n\nfunction Item({\n children\n}) {\n return /*#__PURE__*/React.createElement(\"li\", {\n className: styles.Item\n }, children);\n}\n\nexport { Item };\n","var styles = {\n \"MediaCard\": \"Polaris-MediaCard\",\n \"portrait\": \"Polaris-MediaCard--portrait\",\n \"MediaContainer\": \"Polaris-MediaCard__MediaContainer\",\n \"sizeSmall\": \"Polaris-MediaCard--sizeSmall\",\n \"InfoContainer\": \"Polaris-MediaCard__InfoContainer\",\n \"Popover\": \"Polaris-MediaCard__Popover\",\n \"Heading\": \"Polaris-MediaCard__Heading\",\n \"PrimaryAction\": \"Polaris-MediaCard__PrimaryAction\",\n \"SecondaryAction\": \"Polaris-MediaCard__SecondaryAction\",\n \"ActionContainer\": \"Polaris-MediaCard__ActionContainer\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { HorizontalDotsMinor } from '@shopify/polaris-icons';\nimport { useToggle } from '../../utilities/use-toggle.js';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './MediaCard.scss.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { Button } from '../Button/Button.js';\nimport { Popover } from '../Popover/Popover.js';\nimport { ActionList } from '../ActionList/ActionList.js';\nimport { buttonFrom } from '../Button/utils.js';\nimport { Card } from '../Card/Card.js';\nimport { Stack } from '../Stack/Stack.js';\nimport { Heading } from '../Heading/Heading.js';\nimport { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';\n\nfunction MediaCard({\n title,\n children,\n primaryAction,\n secondaryAction,\n description,\n popoverActions = [],\n portrait = false,\n size = 'medium'\n}) {\n const i18n = useI18n();\n const {\n value: popoverActive,\n toggle: togglePopoverActive\n } = useToggle(false);\n let headerMarkup = null;\n\n if (title) {\n const headerContent = typeof title === 'string' ? /*#__PURE__*/React.createElement(Heading, null, title) : title;\n headerMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Heading\n }, headerContent);\n }\n\n const popoverActivator = /*#__PURE__*/React.createElement(Button, {\n icon: HorizontalDotsMinor,\n onClick: togglePopoverActive,\n size: \"slim\",\n plain: true,\n accessibilityLabel: i18n.translate('Polaris.MediaCard.popoverButton')\n });\n const popoverActionsMarkup = popoverActions.length > 0 ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Popover\n }, /*#__PURE__*/React.createElement(Popover, {\n active: popoverActive,\n activator: popoverActivator,\n onClose: togglePopoverActive,\n preferredAlignment: \"left\",\n preferredPosition: \"below\"\n }, /*#__PURE__*/React.createElement(ActionList, {\n items: popoverActions,\n onActionAnyItem: togglePopoverActive\n }))) : null;\n const primaryActionMarkup = primaryAction ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.PrimaryAction\n }, buttonFrom(primaryAction)) : null;\n const secondaryActionMarkup = secondaryAction ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SecondaryAction\n }, buttonFrom(secondaryAction, {\n plain: true\n })) : null;\n const actionClassName = classNames(styles.ActionContainer, portrait && styles.portrait);\n const actionMarkup = primaryActionMarkup || secondaryActionMarkup ? /*#__PURE__*/React.createElement(\"div\", {\n className: actionClassName\n }, /*#__PURE__*/React.createElement(ButtonGroup, null, primaryActionMarkup, secondaryActionMarkup)) : null;\n const mediaCardClassName = classNames(styles.MediaCard, portrait && styles.portrait);\n const mediaContainerClassName = classNames(styles.MediaContainer, portrait && styles.portrait, size === 'small' && styles.sizeSmall);\n const infoContainerClassName = classNames(styles.InfoContainer, portrait && styles.portrait, size === 'small' && styles.sizeSmall);\n return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(\"div\", {\n className: mediaCardClassName\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: mediaContainerClassName\n }, children), /*#__PURE__*/React.createElement(\"div\", {\n className: infoContainerClassName\n }, /*#__PURE__*/React.createElement(Card.Section, null, popoverActionsMarkup, /*#__PURE__*/React.createElement(Stack, {\n vertical: true,\n spacing: \"tight\"\n }, headerMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Description\n }, description), actionMarkup)))));\n}\n\nexport { MediaCard };\n","var styles = {\n \"BodyWrapper\": \"Polaris-Modal__BodyWrapper\",\n \"Body\": \"Polaris-Modal__Body\",\n \"IFrame\": \"Polaris-Modal__IFrame\",\n \"Spinner\": \"Polaris-Modal__Spinner\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Container\": \"Polaris-Modal-Dialog__Container\",\n \"Dialog\": \"Polaris-Modal-Dialog\",\n \"Modal\": \"Polaris-Modal-Dialog__Modal\",\n \"limitHeight\": \"Polaris-Modal-Dialog--limitHeight\",\n \"sizeSmall\": \"Polaris-Modal-Dialog--sizeSmall\",\n \"sizeLarge\": \"Polaris-Modal-Dialog--sizeLarge\",\n \"fullScreen\": \"Polaris-Modal-Dialog--fullScreen\",\n \"animateFadeUp\": \"Polaris-Modal-Dialog--animateFadeUp\",\n \"entering\": \"Polaris-Modal-Dialog--entering\",\n \"exiting\": \"Polaris-Modal-Dialog--exiting\",\n \"exited\": \"Polaris-Modal-Dialog--exited\",\n \"entered\": \"Polaris-Modal-Dialog--entered\"\n};\n\nexport { styles as default };\n","import React, { useRef, useEffect } from 'react';\nimport { Transition, CSSTransition } from 'react-transition-group';\nimport { tokens } from '@shopify/polaris-tokens';\nimport { classNames } from '../../../../utilities/css.js';\nimport { focusFirstFocusableNode } from '../../../../utilities/focus.js';\nimport { Key } from '../../../../types.js';\nimport styles from './Dialog.scss.js';\nimport { TrapFocus } from '../../../TrapFocus/TrapFocus.js';\nimport { KeypressListener } from '../../../KeypressListener/KeypressListener.js';\n\nfunction Dialog({\n instant,\n labelledBy,\n children,\n onClose,\n onExited,\n onEntered,\n large,\n small,\n limitHeight,\n fullScreen,\n ...props\n}) {\n const containerNode = useRef(null);\n const classes = classNames(styles.Modal, small && styles.sizeSmall, large && styles.sizeLarge, limitHeight && styles.limitHeight, fullScreen && styles.fullScreen);\n const TransitionChild = instant ? Transition : FadeUp;\n useEffect(() => {\n containerNode.current && !containerNode.current.contains(document.activeElement) && focusFirstFocusableNode(containerNode.current);\n }, []);\n return /*#__PURE__*/React.createElement(TransitionChild, Object.assign({}, props, {\n nodeRef: containerNode,\n mountOnEnter: true,\n unmountOnExit: true,\n timeout: parseInt(tokens.motion['duration-200'].value, 10),\n onEntered: onEntered,\n onExited: onExited\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Container,\n \"data-polaris-layer\": true,\n \"data-polaris-overlay\": true,\n ref: containerNode\n }, /*#__PURE__*/React.createElement(TrapFocus, null, /*#__PURE__*/React.createElement(\"div\", {\n role: \"dialog\",\n \"aria-modal\": true,\n \"aria-labelledby\": labelledBy,\n tabIndex: -1,\n className: styles.Dialog\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes\n }, /*#__PURE__*/React.createElement(KeypressListener, {\n keyCode: Key.Escape,\n handler: onClose\n }), children)))));\n}\nconst fadeUpClasses = {\n appear: classNames(styles.animateFadeUp, styles.entering),\n appearActive: classNames(styles.animateFadeUp, styles.entered),\n enter: classNames(styles.animateFadeUp, styles.entering),\n enterActive: classNames(styles.animateFadeUp, styles.entered),\n exit: classNames(styles.animateFadeUp, styles.exiting),\n exitActive: classNames(styles.animateFadeUp, styles.exited)\n};\n\nfunction FadeUp({\n children,\n ...props\n}) {\n return /*#__PURE__*/React.createElement(CSSTransition, Object.assign({}, props, {\n classNames: fadeUpClasses\n }), children);\n}\n\nexport { Dialog };\n","var styles = {\n \"Header\": \"Polaris-Modal-Header\",\n \"titleHidden\": \"Polaris-Modal-Header--titleHidden\",\n \"Title\": \"Polaris-Modal-Header__Title\"\n};\n\nexport { styles as default };\n","var styles = {\n \"CloseButton\": \"Polaris-Modal-CloseButton\",\n \"titleHidden\": \"Polaris-Modal-CloseButton--titleHidden\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { MobileCancelMajor } from '@shopify/polaris-icons';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from './CloseButton.scss.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { Icon } from '../../../Icon/Icon.js';\n\nfunction CloseButton({\n titleHidden = false,\n onClick\n}) {\n const i18n = useI18n();\n return /*#__PURE__*/React.createElement(\"button\", {\n onClick: onClick,\n className: classNames(styles.CloseButton, titleHidden && styles.titleHidden),\n \"aria-label\": i18n.translate('Polaris.Common.close')\n }, /*#__PURE__*/React.createElement(Icon, {\n source: MobileCancelMajor,\n color: \"base\"\n }));\n}\n\nexport { CloseButton };\n","import React from 'react';\nimport styles from './Header.scss.js';\nimport { CloseButton } from '../CloseButton/CloseButton.js';\nimport { DisplayText } from '../../../DisplayText/DisplayText.js';\n\nfunction Header({\n id,\n titleHidden,\n children,\n onClose\n}) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: titleHidden || !children ? styles.titleHidden : styles.Header\n }, /*#__PURE__*/React.createElement(\"div\", {\n id: id,\n className: styles.Title\n }, /*#__PURE__*/React.createElement(DisplayText, {\n element: \"h2\",\n size: \"small\"\n }, children)), /*#__PURE__*/React.createElement(CloseButton, {\n titleHidden: titleHidden,\n onClick: onClose\n }));\n}\n\nexport { Header };\n","var styles = {\n \"Section\": \"Polaris-Modal-Section\",\n \"subdued\": \"Polaris-Modal-Section--subdued\",\n \"flush\": \"Polaris-Modal-Section--flush\",\n \"titleHidden\": \"Polaris-Modal-Section--titleHidden\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from './Section.scss.js';\n\nfunction Section({\n children,\n flush = false,\n subdued = false,\n titleHidden = false\n}) {\n const className = classNames(styles.Section, flush && styles.flush, subdued && styles.subdued, titleHidden && styles.titleHidden);\n return /*#__PURE__*/React.createElement(\"section\", {\n className: className\n }, children);\n}\n\nexport { Section };\n","var styles = {\n \"Footer\": \"Polaris-Modal-Footer\",\n \"FooterContent\": \"Polaris-Modal-Footer__FooterContent\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './Footer.scss.js';\nimport { buttonsFrom } from '../../../Button/utils.js';\nimport { Stack } from '../../../Stack/Stack.js';\nimport { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.js';\n\nfunction Footer({\n primaryAction,\n secondaryActions,\n children\n}) {\n const primaryActionButton = primaryAction && buttonsFrom(primaryAction, {\n primary: true\n }) || null;\n const secondaryActionButtons = secondaryActions && buttonsFrom(secondaryActions) || null;\n const actions = primaryActionButton || secondaryActionButtons ? /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryActionButtons, primaryActionButton) : null;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Footer\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.FooterContent\n }, /*#__PURE__*/React.createElement(Stack, {\n alignment: \"center\"\n }, /*#__PURE__*/React.createElement(Stack.Item, {\n fill: true\n }, children), actions)));\n}\n\nexport { Footer };\n","import React, { useState, useRef, useCallback } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport { focusFirstFocusableNode } from '../../utilities/focus.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\nimport { WithinContentContext } from '../../utilities/within-content-context.js';\nimport { wrapWithComponent } from '../../utilities/components.js';\nimport styles from './Modal.scss.js';\nimport { Dialog } from './components/Dialog/Dialog.js';\nimport { Header } from './components/Header/Header.js';\nimport { Section } from './components/Section/Section.js';\nimport { Footer } from './components/Footer/Footer.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { Spinner } from '../Spinner/Spinner.js';\nimport { Scrollable } from '../Scrollable/Scrollable.js';\nimport { Portal } from '../Portal/Portal.js';\nimport { Backdrop } from '../Backdrop/Backdrop.js';\n\nconst IFRAME_LOADING_HEIGHT = 200;\nconst DEFAULT_IFRAME_CONTENT_HEIGHT = 400;\nconst Modal = function Modal({\n children,\n title,\n titleHidden = false,\n src,\n iFrameName,\n open,\n instant,\n sectioned,\n loading,\n large,\n small,\n limitHeight,\n footer,\n primaryAction,\n secondaryActions,\n onScrolledToBottom,\n activator,\n onClose,\n onIFrameLoad,\n onTransitionEnd,\n noScroll,\n fullScreen\n}) {\n const [iframeHeight, setIframeHeight] = useState(IFRAME_LOADING_HEIGHT);\n const headerId = useUniqueId('modal-header');\n const activatorRef = useRef(null);\n const i18n = useI18n();\n const iframeTitle = i18n.translate('Polaris.Modal.iFrameTitle');\n let dialog;\n let backdrop;\n const handleEntered = useCallback(() => {\n if (onTransitionEnd) {\n onTransitionEnd();\n }\n }, [onTransitionEnd]);\n const handleExited = useCallback(() => {\n setIframeHeight(IFRAME_LOADING_HEIGHT);\n const activatorElement = activator && isRef(activator) ? activator && activator.current : activatorRef.current;\n\n if (activatorElement) {\n requestAnimationFrame(() => focusFirstFocusableNode(activatorElement));\n }\n }, [activator]);\n const handleIFrameLoad = useCallback(evt => {\n const iframe = evt.target;\n\n if (iframe && iframe.contentWindow) {\n try {\n setIframeHeight(iframe.contentWindow.document.body.scrollHeight);\n } catch (_error) {\n setIframeHeight(DEFAULT_IFRAME_CONTENT_HEIGHT);\n }\n }\n\n if (onIFrameLoad != null) {\n onIFrameLoad(evt);\n }\n }, [onIFrameLoad]);\n\n if (open) {\n const footerMarkup = !footer && !primaryAction && !secondaryActions ? null : /*#__PURE__*/React.createElement(Footer, {\n primaryAction: primaryAction,\n secondaryActions: secondaryActions\n }, footer);\n const content = sectioned ? wrapWithComponent(children, Section, {\n titleHidden\n }) : children;\n const body = loading ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Spinner\n }, /*#__PURE__*/React.createElement(Spinner, null)) : content;\n const scrollContainerMarkup = noScroll ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Body\n }, body) : /*#__PURE__*/React.createElement(Scrollable, {\n shadow: true,\n className: styles.Body,\n onScrolledToBottom: onScrolledToBottom\n }, body);\n const bodyMarkup = src ? /*#__PURE__*/React.createElement(\"iframe\", {\n name: iFrameName,\n title: iframeTitle,\n src: src,\n className: styles.IFrame,\n onLoad: handleIFrameLoad,\n style: {\n height: `${iframeHeight}px`\n }\n }) : scrollContainerMarkup;\n dialog = /*#__PURE__*/React.createElement(Dialog, {\n instant: instant,\n labelledBy: headerId,\n onClose: onClose,\n onEntered: handleEntered,\n onExited: handleExited,\n large: large,\n small: small,\n limitHeight: limitHeight,\n fullScreen: fullScreen\n }, /*#__PURE__*/React.createElement(Header, {\n titleHidden: titleHidden,\n id: headerId,\n onClose: onClose\n }, title), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.BodyWrapper\n }, bodyMarkup), footerMarkup);\n backdrop = /*#__PURE__*/React.createElement(Backdrop, {\n onClick: onClose\n });\n }\n\n const animated = !instant;\n const activatorMarkup = activator && !isRef(activator) ? /*#__PURE__*/React.createElement(\"div\", {\n ref: activatorRef\n }, activator) : null;\n return /*#__PURE__*/React.createElement(WithinContentContext.Provider, {\n value: true\n }, activatorMarkup, /*#__PURE__*/React.createElement(Portal, {\n idPrefix: \"modal\"\n }, /*#__PURE__*/React.createElement(TransitionGroup, {\n appear: animated,\n enter: animated,\n exit: animated\n }, dialog), backdrop));\n};\n\nfunction isRef(ref) {\n return Object.prototype.hasOwnProperty.call(ref, 'current');\n}\n\nModal.Section = Section;\n\nexport { Modal };\n","import { createContext } from 'react';\n\nconst NavigationContext = /*#__PURE__*/createContext({\n location: ''\n});\n\nexport { NavigationContext };\n","var styles = {\n \"Navigation\": \"Polaris-Navigation\",\n \"UserMenu\": \"Polaris-Navigation__UserMenu\",\n \"ContextControl\": \"Polaris-Navigation__ContextControl\",\n \"PrimaryNavigation\": \"Polaris-Navigation__PrimaryNavigation\",\n \"LogoContainer\": \"Polaris-Navigation__LogoContainer\",\n \"hasLogoSuffix\": \"Polaris-Navigation--hasLogoSuffix\",\n \"Logo\": \"Polaris-Navigation__Logo\",\n \"LogoLink\": \"Polaris-Navigation__LogoLink\",\n \"Item\": \"Polaris-Navigation__Item\",\n \"keyFocused\": \"Polaris-Navigation--keyFocused\",\n \"Icon-resized\": \"Polaris-Navigation__Icon--resized\",\n \"Item-selected\": \"Polaris-Navigation__Item--selected\",\n \"Item-disabled\": \"Polaris-Navigation__Item--disabled\",\n \"Icon\": \"Polaris-Navigation__Icon\",\n \"Badge\": \"Polaris-Navigation__Badge\",\n \"subNavigationActive\": \"Polaris-Navigation--subNavigationActive\",\n \"Item-child-active\": \"Polaris-Navigation--itemChildActive\",\n \"ExternalIcon\": \"Polaris-Navigation__ExternalIcon\",\n \"ListItem\": \"Polaris-Navigation__ListItem\",\n \"RollupSection\": \"Polaris-Navigation__RollupSection\",\n \"SecondaryNavigation\": \"Polaris-Navigation__SecondaryNavigation\",\n \"ListItem-hasAction\": \"Polaris-Navigation__ListItem--hasAction\",\n \"ItemWrapper\": \"Polaris-Navigation__ItemWrapper\",\n \"Text\": \"Polaris-Navigation__Text\",\n \"SecondaryAction\": \"Polaris-Navigation__SecondaryAction\",\n \"isExpanded\": \"Polaris-Navigation--isExpanded\",\n \"List\": \"Polaris-Navigation__List\",\n \"SecondaryNavigation-noIcon\": \"Polaris-Navigation__SecondaryNavigation--noIcon\",\n \"Section\": \"Polaris-Navigation__Section\",\n \"Section-fill\": \"Polaris-Navigation__Section--fill\",\n \"Section-withSeparator\": \"Polaris-Navigation__Section--withSeparator\",\n \"SectionHeading\": \"Polaris-Navigation__SectionHeading\",\n \"Action\": \"Polaris-Navigation__Action\",\n \"RollupToggle\": \"Polaris-Navigation__RollupToggle\",\n \"Indicator\": \"Polaris-Navigation__Indicator\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from '../../../../Navigation.scss.js';\nimport { useUniqueId } from '../../../../../../utilities/unique-id/hooks.js';\nimport { Collapsible } from '../../../../../Collapsible/Collapsible.js';\n\nfunction Secondary({\n id,\n children,\n expanded\n}) {\n const uid = useUniqueId('SecondaryNavigation');\n return /*#__PURE__*/React.createElement(Collapsible, {\n id: id || uid,\n open: expanded,\n transition: {\n duration: '0ms',\n timingFunction: 'linear'\n }\n }, /*#__PURE__*/React.createElement(\"ul\", {\n className: styles.List\n }, children));\n}\n\nexport { Secondary };\n","import React, { useContext, useState, useEffect, useCallback } from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { NavigationContext } from '../../context.js';\nimport { Key } from '../../../../types.js';\nimport styles from '../../Navigation.scss.js';\nimport { Secondary } from './components/Secondary/Secondary.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { useMediaQuery } from '../../../../utilities/media-query/hooks.js';\nimport { useUniqueId } from '../../../../utilities/unique-id/hooks.js';\nimport { Indicator } from '../../../Indicator/Indicator.js';\nimport { Icon } from '../../../Icon/Icon.js';\nimport { Badge } from '../../../Badge/Badge.js';\nimport { UnstyledLink } from '../../../UnstyledLink/UnstyledLink.js';\nimport { Tooltip } from '../../../Tooltip/Tooltip.js';\n\nvar MatchState;\n\n(function (MatchState) {\n MatchState[MatchState[\"MatchForced\"] = 0] = \"MatchForced\";\n MatchState[MatchState[\"MatchUrl\"] = 1] = \"MatchUrl\";\n MatchState[MatchState[\"MatchPaths\"] = 2] = \"MatchPaths\";\n MatchState[MatchState[\"Excluded\"] = 3] = \"Excluded\";\n MatchState[MatchState[\"NoMatch\"] = 4] = \"NoMatch\";\n})(MatchState || (MatchState = {}));\n\nfunction Item({\n url,\n icon,\n label,\n subNavigationItems = [],\n secondaryAction,\n disabled,\n onClick,\n accessibilityLabel,\n selected: selectedOverride,\n badge,\n new: isNew,\n matches,\n exactMatch,\n matchPaths,\n excludePaths,\n external,\n onToggleExpandedState,\n expanded,\n shouldResizeIcon\n}) {\n const i18n = useI18n();\n const {\n isNavigationCollapsed\n } = useMediaQuery();\n const secondaryNavigationId = useUniqueId('SecondaryNavigation');\n const {\n location,\n onNavigationDismiss\n } = useContext(NavigationContext);\n const [keyFocused, setKeyFocused] = useState(false);\n useEffect(() => {\n if (!isNavigationCollapsed && expanded) {\n onToggleExpandedState === null || onToggleExpandedState === void 0 ? void 0 : onToggleExpandedState();\n }\n }, [expanded, isNavigationCollapsed, onToggleExpandedState]);\n const handleKeyUp = useCallback(event => {\n if (event.keyCode === Key.Tab) {\n !keyFocused && setKeyFocused(true);\n }\n }, [keyFocused]);\n const handleBlur = useCallback(() => {\n keyFocused && setKeyFocused(false);\n }, [keyFocused]);\n const tabIndex = disabled ? -1 : 0;\n const hasNewChild = subNavigationItems.filter(subNavigationItem => subNavigationItem.new).length > 0;\n const indicatorMarkup = hasNewChild ? /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Indicator\n }, /*#__PURE__*/React.createElement(Indicator, {\n pulse: true\n })) : null;\n const iconMarkup = icon ? /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.Icon, shouldResizeIcon && styles['Icon-resized'])\n }, /*#__PURE__*/React.createElement(Icon, {\n source: icon\n })) : null;\n let badgeMarkup = null;\n\n if (isNew) {\n badgeMarkup = /*#__PURE__*/React.createElement(Badge, {\n status: \"new\",\n size: \"small\"\n }, i18n.translate('Polaris.Badge.STATUS_LABELS.new'));\n } else if (typeof badge === 'string') {\n badgeMarkup = /*#__PURE__*/React.createElement(Badge, {\n status: \"new\",\n size: \"small\"\n }, badge);\n } else {\n badgeMarkup = badge;\n }\n\n const wrappedBadgeMarkup = badgeMarkup == null ? null : /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Badge\n }, badgeMarkup);\n const itemContentMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, iconMarkup, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Text\n }, label, indicatorMarkup), wrappedBadgeMarkup);\n\n if (url == null) {\n const className = classNames(styles.Item, disabled && styles['Item-disabled'], keyFocused && styles.keyFocused, selectedOverride && styles['Item-selected']);\n return /*#__PURE__*/React.createElement(\"li\", {\n className: styles.ListItem\n }, /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: className,\n disabled: disabled,\n \"aria-disabled\": disabled,\n \"aria-label\": accessibilityLabel,\n onClick: getClickHandler(onClick),\n onKeyUp: handleKeyUp,\n onBlur: handleBlur\n }, itemContentMarkup));\n }\n\n const secondaryActionLinkMarkup = secondaryAction && /*#__PURE__*/React.createElement(UnstyledLink, {\n external: true,\n url: secondaryAction.url,\n className: styles.SecondaryAction,\n tabIndex: tabIndex,\n \"aria-disabled\": disabled,\n \"aria-label\": secondaryAction.accessibilityLabel,\n onClick: secondaryAction.onClick\n }, /*#__PURE__*/React.createElement(Icon, {\n source: secondaryAction.icon\n }));\n const secondaryActionMarkup = secondaryAction && (secondaryAction.tooltip ? /*#__PURE__*/React.createElement(Tooltip, secondaryAction.tooltip, secondaryActionLinkMarkup) : secondaryActionLinkMarkup);\n const matchState = matchStateForItem({\n url,\n matches,\n exactMatch,\n matchPaths,\n excludePaths\n }, location);\n const matchingSubNavigationItems = subNavigationItems.filter(item => {\n const subMatchState = matchStateForItem(item, location);\n return subMatchState === MatchState.MatchForced || subMatchState === MatchState.MatchUrl || subMatchState === MatchState.MatchPaths;\n });\n const childIsActive = matchingSubNavigationItems.length > 0;\n const selected = selectedOverride == null ? matchState === MatchState.MatchForced || matchState === MatchState.MatchUrl || matchState === MatchState.MatchPaths : selectedOverride;\n const showExpanded = selected || expanded || childIsActive;\n const canBeActive = subNavigationItems.length === 0 || !childIsActive;\n const itemClassName = classNames(styles.Item, disabled && styles['Item-disabled'], selected && canBeActive && styles['Item-selected'], showExpanded && styles.subNavigationActive, childIsActive && styles['Item-child-active'], keyFocused && styles.keyFocused);\n let secondaryNavigationMarkup = null;\n\n if (subNavigationItems.length > 0) {\n const longestMatch = matchingSubNavigationItems.sort(({\n url: firstUrl\n }, {\n url: secondUrl\n }) => secondUrl.length - firstUrl.length)[0];\n const SecondaryNavigationClassName = classNames(styles.SecondaryNavigation, showExpanded && styles.isExpanded, !icon && styles['SecondaryNavigation-noIcon']);\n secondaryNavigationMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: SecondaryNavigationClassName\n }, /*#__PURE__*/React.createElement(Secondary, {\n expanded: showExpanded,\n id: secondaryNavigationId\n }, subNavigationItems.map(item => {\n const {\n label,\n ...rest\n } = item;\n\n const onClick = () => {\n if (onNavigationDismiss) {\n onNavigationDismiss();\n }\n\n if (item.onClick && item.onClick !== onNavigationDismiss) {\n item.onClick();\n }\n };\n\n return /*#__PURE__*/React.createElement(Item, Object.assign({\n key: label\n }, rest, {\n label: label,\n matches: item === longestMatch,\n onClick: onClick\n }));\n })));\n }\n\n const className = classNames(styles.ListItem, secondaryAction && styles['ListItem-hasAction']);\n return /*#__PURE__*/React.createElement(\"li\", {\n className: className\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ItemWrapper\n }, /*#__PURE__*/React.createElement(UnstyledLink, Object.assign({\n url: url,\n className: itemClassName,\n external: external,\n tabIndex: tabIndex,\n \"aria-disabled\": disabled,\n \"aria-label\": accessibilityLabel,\n onClick: getClickHandler(onClick),\n onKeyUp: handleKeyUp,\n onBlur: handleBlur\n }, normalizeAriaAttributes(secondaryNavigationId, subNavigationItems.length > 0, showExpanded)), itemContentMarkup), secondaryActionMarkup), secondaryNavigationMarkup);\n\n function getClickHandler(onClick) {\n return event => {\n const {\n currentTarget\n } = event;\n\n if (currentTarget.getAttribute('href') === location) {\n event.preventDefault();\n }\n\n if (subNavigationItems && subNavigationItems.length > 0 && isNavigationCollapsed) {\n event.preventDefault();\n onToggleExpandedState === null || onToggleExpandedState === void 0 ? void 0 : onToggleExpandedState();\n } else if (onNavigationDismiss) {\n onNavigationDismiss();\n\n if (onClick && onClick !== onNavigationDismiss) {\n onClick();\n }\n\n return;\n }\n\n if (onClick) {\n onClick();\n }\n };\n }\n}\nfunction isNavigationItemActive(navigationItem, currentPath) {\n const matchState = matchStateForItem(navigationItem, currentPath);\n const matchingSubNavigationItems = navigationItem.subNavigationItems && navigationItem.subNavigationItems.filter(item => {\n const subMatchState = matchStateForItem(item, currentPath);\n return subMatchState === MatchState.MatchForced || subMatchState === MatchState.MatchUrl || subMatchState === MatchState.MatchPaths;\n });\n const childIsActive = matchingSubNavigationItems && matchingSubNavigationItems.length > 0;\n const selected = matchState === MatchState.MatchForced || matchState === MatchState.MatchUrl || matchState === MatchState.MatchPaths;\n return selected || childIsActive;\n}\n\nfunction normalizePathname(pathname) {\n const barePathname = pathname.split('?')[0].split('#')[0];\n return barePathname.endsWith('/') ? barePathname : `${barePathname}/`;\n}\n\nfunction safeEqual(location, path) {\n return normalizePathname(location) === normalizePathname(path);\n}\n\nfunction safeStartsWith(location, path) {\n return normalizePathname(location).startsWith(normalizePathname(path));\n}\n\nfunction matchStateForItem({\n url,\n matches,\n exactMatch,\n matchPaths,\n excludePaths\n}, location) {\n if (url == null) {\n return MatchState.NoMatch;\n }\n\n if (matches) {\n return MatchState.MatchForced;\n }\n\n if (matches === false || excludePaths && excludePaths.some(path => safeStartsWith(location, path))) {\n return MatchState.Excluded;\n }\n\n if (matchPaths && matchPaths.some(path => safeStartsWith(location, path))) {\n return MatchState.MatchPaths;\n }\n\n const matchesUrl = exactMatch ? safeEqual(location, url) : safeStartsWith(location, url);\n return matchesUrl ? MatchState.MatchUrl : MatchState.NoMatch;\n}\n\nfunction normalizeAriaAttributes(controlId, hasSubMenu, expanded) {\n return hasSubMenu ? {\n 'aria-expanded': expanded,\n 'aria-controls': controlId\n } : undefined;\n}\n\nexport { Item, isNavigationItemActive };\n","import React, { useMemo } from 'react';\nimport { WithinContentContext } from '../../utilities/within-content-context.js';\nimport { classNames } from '../../utilities/css.js';\nimport { getWidth } from '../../utilities/get-width.js';\nimport { NavigationContext } from './context.js';\nimport styles from './Navigation.scss.js';\nimport { Section } from './components/Section/Section.js';\nimport { useFrame } from '../../utilities/frame/hooks.js';\nimport { UnstyledLink } from '../UnstyledLink/UnstyledLink.js';\nimport { Image } from '../Image/Image.js';\nimport { Scrollable } from '../Scrollable/Scrollable.js';\nimport { Item } from './components/Item/Item.js';\n\nconst Navigation = function Navigation({\n children,\n contextControl,\n location,\n onDismiss,\n ariaLabelledBy,\n logoSuffix\n}) {\n const {\n logo\n } = useFrame();\n const width = getWidth(logo, 104);\n const logoMarkup = logo ? /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.LogoContainer, logoSuffix && styles.hasLogoSuffix)\n }, /*#__PURE__*/React.createElement(UnstyledLink, {\n url: logo.url || '',\n className: styles.LogoLink,\n style: {\n width\n }\n }, /*#__PURE__*/React.createElement(Image, {\n source: logo.topBarSource || '',\n alt: logo.accessibilityLabel || '',\n className: styles.Logo,\n style: {\n width\n }\n })), logoSuffix) : null;\n const mediaMarkup = contextControl ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ContextControl\n }, contextControl) : logoMarkup;\n const context = useMemo(() => ({\n location,\n onNavigationDismiss: onDismiss\n }), [location, onDismiss]);\n return /*#__PURE__*/React.createElement(NavigationContext.Provider, {\n value: context\n }, /*#__PURE__*/React.createElement(WithinContentContext.Provider, {\n value: true\n }, /*#__PURE__*/React.createElement(\"nav\", {\n className: styles.Navigation,\n \"aria-labelledby\": ariaLabelledBy\n }, mediaMarkup, /*#__PURE__*/React.createElement(Scrollable, {\n className: styles.PrimaryNavigation\n }, children))));\n};\nNavigation.Item = Item;\nNavigation.Section = Section;\n\nexport { Navigation };\n","import React, { useRef, useState, useEffect } from 'react';\nimport { HorizontalDotsMinor } from '@shopify/polaris-icons';\nimport { classNames } from '../../../../utilities/css.js';\nimport { useToggle } from '../../../../utilities/use-toggle.js';\nimport styles from '../../Navigation.scss.js';\nimport { Item } from '../Item/Item.js';\nimport { useMediaQuery } from '../../../../utilities/media-query/hooks.js';\nimport { Icon } from '../../../Icon/Icon.js';\nimport { Tooltip } from '../../../Tooltip/Tooltip.js';\nimport { useUniqueId } from '../../../../utilities/unique-id/hooks.js';\nimport { Collapsible } from '../../../Collapsible/Collapsible.js';\n\nfunction Section({\n title,\n fill,\n action,\n items,\n rollup,\n separator\n}) {\n const {\n value: expanded,\n toggle: toggleExpanded,\n setFalse: setExpandedFalse\n } = useToggle(false);\n const animationFrame = useRef(null);\n const {\n isNavigationCollapsed\n } = useMediaQuery();\n const [expandedIndex, setExpandedIndex] = useState();\n\n const handleClick = (onClick, hasSubNavItems) => {\n return () => {\n if (onClick) {\n onClick();\n }\n\n if (animationFrame.current) {\n cancelAnimationFrame(animationFrame.current);\n }\n\n if (!hasSubNavItems || !isNavigationCollapsed) {\n animationFrame.current = requestAnimationFrame(setExpandedFalse);\n }\n };\n };\n\n useEffect(() => {\n return () => {\n animationFrame.current && cancelAnimationFrame(animationFrame.current);\n };\n });\n const className = classNames(styles.Section, separator && styles['Section-withSeparator'], fill && styles['Section-fill']);\n const buttonMarkup = action && /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: styles.Action,\n \"aria-label\": action.accessibilityLabel,\n onClick: action.onClick\n }, /*#__PURE__*/React.createElement(Icon, {\n source: action.icon\n }));\n const actionMarkup = action && (action.tooltip ? /*#__PURE__*/React.createElement(Tooltip, action.tooltip, buttonMarkup) : buttonMarkup);\n const sectionHeadingMarkup = title && /*#__PURE__*/React.createElement(\"li\", {\n className: styles.SectionHeading\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Text\n }, title), actionMarkup);\n const itemsMarkup = items.map((item, index) => {\n const {\n onClick,\n label,\n subNavigationItems,\n ...rest\n } = item;\n const hasSubNavItems = subNavigationItems != null && subNavigationItems.length > 0;\n\n const handleToggleExpandedState = () => {\n if (expandedIndex === index) {\n setExpandedIndex(-1);\n } else {\n setExpandedIndex(index);\n }\n };\n\n return /*#__PURE__*/React.createElement(Item, Object.assign({\n key: label\n }, rest, {\n label: label,\n subNavigationItems: subNavigationItems,\n onClick: handleClick(onClick, hasSubNavItems),\n onToggleExpandedState: handleToggleExpandedState,\n expanded: expandedIndex === index\n }));\n });\n const toggleClassName = classNames(styles.Item, styles.RollupToggle);\n const ariaLabel = rollup && (expanded ? rollup.hide : rollup.view);\n const toggleRollup = rollup && items.length > rollup.after && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ListItem,\n key: \"List Item\"\n }, /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: toggleClassName,\n onClick: toggleExpanded,\n \"aria-label\": ariaLabel\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Icon\n }, /*#__PURE__*/React.createElement(Icon, {\n source: HorizontalDotsMinor\n }))));\n const activeItemIndex = items.findIndex(item => {\n if (!rollup) {\n return false;\n }\n\n return rollup.activePath === item.url || item.url && rollup.activePath.startsWith(item.url) || (item.subNavigationItems ? item.subNavigationItems.some(({\n url: itemUrl\n }) => rollup.activePath.startsWith(itemUrl)) : false);\n });\n const sectionItems = rollup ? itemsMarkup.slice(0, rollup.after) : itemsMarkup;\n const additionalItems = rollup ? itemsMarkup.slice(rollup.after) : [];\n\n if (rollup && activeItemIndex !== -1 && activeItemIndex > rollup.after - 1) {\n sectionItems.push(...additionalItems.splice(activeItemIndex - rollup.after, 1));\n }\n\n const additionalItemsId = useUniqueId('AdditionalItems');\n const activeItemsMarkup = rollup && additionalItems.length > 0 && /*#__PURE__*/React.createElement(\"li\", {\n className: styles.RollupSection\n }, /*#__PURE__*/React.createElement(Collapsible, {\n id: additionalItemsId,\n open: expanded\n }, /*#__PURE__*/React.createElement(\"ul\", {\n className: styles.List\n }, additionalItems)), toggleRollup);\n return /*#__PURE__*/React.createElement(\"ul\", {\n className: className\n }, sectionHeadingMarkup, sectionItems, activeItemsMarkup);\n}\n\nexport { Section };\n","import { isValidElement } from 'react';\n\nfunction isInterface(x) {\n return ! /*#__PURE__*/isValidElement(x) && x !== undefined;\n}\n\nexport { isInterface };\n","import { isValidElement } from 'react';\n\nfunction isReactElement(x) {\n return /*#__PURE__*/isValidElement(x) && x !== undefined;\n}\n\nexport { isReactElement };\n","var styles = {\n \"Page\": \"Polaris-Page\",\n \"fullWidth\": \"Polaris-Page--fullWidth\",\n \"narrowWidth\": \"Polaris-Page--narrowWidth\",\n \"Content\": \"Polaris-Page__Content\",\n \"divider\": \"Polaris-Page--divider\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Header\": \"Polaris-Page-Header\",\n \"titleHidden\": \"Polaris-Page-Header--titleHidden\",\n \"TitleWrapper\": \"Polaris-Page-Header__TitleWrapper\",\n \"Navigation\": \"Polaris-Page-Header__Navigation\",\n \"hasActionMenu\": \"Polaris-Page-Header--hasActionMenu\",\n \"mobileView\": \"Polaris-Page-Header--mobileView\",\n \"BreadcrumbWrapper\": \"Polaris-Page-Header__BreadcrumbWrapper\",\n \"PaginationWrapper\": \"Polaris-Page-Header__PaginationWrapper\",\n \"AdditionalNavigationWrapper\": \"Polaris-Page-Header__AdditionalNavigationWrapper\",\n \"MainContent\": \"Polaris-Page-Header__MainContent\",\n \"TitleActionMenuWrapper\": \"Polaris-Page-Header__TitleActionMenuWrapper\",\n \"hasNavigation\": \"Polaris-Page-Header--hasNavigation\",\n \"PrimaryActionWrapper\": \"Polaris-Page-Header__PrimaryActionWrapper\",\n \"Row\": \"Polaris-Page-Header__Row\",\n \"RightAlign\": \"Polaris-Page-Header__RightAlign\",\n \"LeftAlign\": \"Polaris-Page-Header__LeftAlign\",\n \"noBreadcrumbs\": \"Polaris-Page-Header--noBreadcrumbs\",\n \"AdditionalMetaData\": \"Polaris-Page-Header__AdditionalMetaData\",\n \"Actions\": \"Polaris-Page-Header__Actions\",\n \"longTitle\": \"Polaris-Page-Header--longTitle\",\n \"mediumTitle\": \"Polaris-Page-Header--mediumTitle\",\n \"isSingleRow\": \"Polaris-Page-Header--isSingleRow\"\n};\n\nexport { styles as default };\n","import React from 'react';\n\nvar SvgArrowLeftMinor = function SvgArrowLeftMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17 9h-11.586l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-3.293-3.293h11.586a1 1 0 1 0 0-2z\"\n }));\n};\n\nexport { SvgArrowLeftMinor as S };\n","var styles = {\n \"Breadcrumb\": \"Polaris-Breadcrumbs__Breadcrumb\",\n \"Icon\": \"Polaris-Breadcrumbs__Icon\",\n \"Content\": \"Polaris-Breadcrumbs__Content\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { ArrowLeftMinor } from '@shopify/polaris-icons';\nimport { handleMouseUpByBlurring } from '../../utilities/focus.js';\nimport styles from './Breadcrumbs.scss.js';\nimport { Icon } from '../Icon/Icon.js';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';\nimport { UnstyledLink } from '../UnstyledLink/UnstyledLink.js';\n\nfunction Breadcrumbs({\n breadcrumbs\n}) {\n const breadcrumb = breadcrumbs[breadcrumbs.length - 1];\n\n if (breadcrumb == null) {\n return null;\n }\n\n const {\n content\n } = breadcrumb;\n const contentMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Icon\n }, /*#__PURE__*/React.createElement(Icon, {\n source: ArrowLeftMinor\n })), /*#__PURE__*/React.createElement(VisuallyHidden, null, content));\n const breadcrumbMarkup = 'url' in breadcrumb ? /*#__PURE__*/React.createElement(UnstyledLink, {\n key: content,\n url: breadcrumb.url,\n className: styles.Breadcrumb,\n onMouseUp: handleMouseUpByBlurring,\n \"aria-label\": breadcrumb.accessibilityLabel\n }, contentMarkup) : /*#__PURE__*/React.createElement(\"button\", {\n key: content,\n className: styles.Breadcrumb,\n onClick: breadcrumb.onAction,\n onMouseUp: handleMouseUpByBlurring,\n type: \"button\",\n \"aria-label\": breadcrumb.accessibilityLabel\n }, contentMarkup);\n return /*#__PURE__*/React.createElement(\"nav\", {\n role: \"navigation\"\n }, breadcrumbMarkup);\n}\n\nexport { Breadcrumbs };\n","var styles = {\n \"Title\": \"Polaris-Header-Title\",\n \"TitleWithSubtitle\": \"Polaris-Header-Title__TitleWithSubtitle\",\n \"SubTitle\": \"Polaris-Header-Title__SubTitle\",\n \"SubtitleCompact\": \"Polaris-Header-Title__SubtitleCompact\",\n \"TitleWithMetadataWrapper\": \"Polaris-Header-Title__TitleWithMetadataWrapper\",\n \"TitleMetadata\": \"Polaris-Header-Title__TitleMetadata\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../../../../../utilities/css.js';\nimport styles from './Title.scss.js';\n\nfunction Title({\n title,\n subtitle,\n titleMetadata,\n compactTitle\n}) {\n const className = classNames(styles.Title, subtitle && styles.TitleWithSubtitle);\n const titleMarkup = title ? /*#__PURE__*/React.createElement(\"h1\", {\n className: className\n }, title) : null;\n const titleMetadataMarkup = titleMetadata ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.TitleMetadata\n }, titleMetadata) : null;\n const wrappedTitleMarkup = titleMetadata ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.TitleWithMetadataWrapper\n }, titleMarkup, titleMetadataMarkup) : titleMarkup;\n const subtitleMarkup = subtitle ? /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.SubTitle, compactTitle && styles.SubtitleCompact)\n }, /*#__PURE__*/React.createElement(\"p\", null, subtitle)) : null;\n return /*#__PURE__*/React.createElement(React.Fragment, null, wrappedTitleMarkup, subtitleMarkup);\n}\n\nexport { Title };\n","var styles = {\n \"ActionMenu\": \"Polaris-ActionMenu\"\n};\n\nexport { styles as default };\n","var styles = {\n \"RollupActivator\": \"Polaris-ActionMenu-RollupActions__RollupActivator\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { HorizontalDotsMinor } from '@shopify/polaris-icons';\nimport { useToggle } from '../../../../utilities/use-toggle.js';\nimport styles from './RollupActions.scss.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { Button } from '../../../Button/Button.js';\nimport { Popover } from '../../../Popover/Popover.js';\nimport { ActionList } from '../../../ActionList/ActionList.js';\n\nfunction RollupActions({\n accessibilityLabel,\n items = [],\n sections = []\n}) {\n const i18n = useI18n();\n const {\n value: rollupOpen,\n toggle: toggleRollupOpen\n } = useToggle(false);\n\n if (items.length === 0 && sections.length === 0) {\n return null;\n }\n\n const activatorMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.RollupActivator\n }, /*#__PURE__*/React.createElement(Button, {\n outline: true,\n icon: HorizontalDotsMinor,\n accessibilityLabel: accessibilityLabel || i18n.translate('Polaris.ActionMenu.RollupActions.rollupButton'),\n onClick: toggleRollupOpen\n }));\n return /*#__PURE__*/React.createElement(Popover, {\n active: rollupOpen,\n activator: activatorMarkup,\n preferredAlignment: \"right\",\n onClose: toggleRollupOpen,\n hideOnPrint: true\n }, /*#__PURE__*/React.createElement(ActionList, {\n items: items,\n sections: sections,\n onActionAnyItem: toggleRollupOpen\n }));\n}\n\nexport { RollupActions };\n","var styles = {\n \"ActionsLayout\": \"Polaris-ActionMenu-Actions__ActionsLayout\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Details\": \"Polaris-ActionMenu-MenuGroup__Details\"\n};\n\nexport { styles as default };\n","var styles = {\n \"SecondaryAction\": \"Polaris-ActionMenu-SecondaryAction\",\n \"destructive\": \"Polaris-ActionMenu-SecondaryAction--destructive\"\n};\n\nexport { styles as default };\n","import React, { useRef, useEffect } from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from './SecondaryAction.scss.js';\nimport { Tooltip } from '../../../Tooltip/Tooltip.js';\nimport { Button } from '../../../Button/Button.js';\n\nfunction SecondaryAction({\n children,\n destructive,\n helpText,\n onAction,\n getOffsetWidth,\n ...rest\n}) {\n const secondaryActionsRef = useRef(null);\n useEffect(() => {\n var _secondaryActionsRef$;\n\n if (!getOffsetWidth || !secondaryActionsRef.current) return;\n getOffsetWidth((_secondaryActionsRef$ = secondaryActionsRef.current) === null || _secondaryActionsRef$ === void 0 ? void 0 : _secondaryActionsRef$.offsetWidth);\n }, [getOffsetWidth]);\n const buttonMarkup = /*#__PURE__*/React.createElement(Button, Object.assign({\n onClick: onAction\n }, rest), children);\n const actionMarkup = helpText ? /*#__PURE__*/React.createElement(Tooltip, {\n content: helpText\n }, buttonMarkup) : buttonMarkup;\n return /*#__PURE__*/React.createElement(\"span\", {\n className: classNames(styles.SecondaryAction, destructive && styles.destructive),\n ref: secondaryActionsRef\n }, actionMarkup);\n}\n\nexport { SecondaryAction };\n","import React, { useCallback } from 'react';\nimport styles from './MenuGroup.scss.js';\nimport { SecondaryAction } from '../SecondaryAction/SecondaryAction.js';\nimport { Popover } from '../../../Popover/Popover.js';\nimport { ActionList } from '../../../ActionList/ActionList.js';\n\nfunction MenuGroup({\n accessibilityLabel,\n active,\n actions,\n details,\n title,\n icon,\n disabled,\n onClick,\n onClose,\n onOpen,\n getOffsetWidth,\n sections\n}) {\n const handleClose = useCallback(() => {\n onClose(title);\n }, [onClose, title]);\n const handleOpen = useCallback(() => {\n onOpen(title);\n }, [onOpen, title]);\n const handleClick = useCallback(() => {\n if (onClick) {\n onClick(handleOpen);\n } else {\n handleOpen();\n }\n }, [onClick, handleOpen]);\n const handleOffsetWidth = useCallback(width => {\n if (!getOffsetWidth) return;\n getOffsetWidth(width);\n }, [getOffsetWidth]);\n const popoverActivator = /*#__PURE__*/React.createElement(SecondaryAction, {\n disclosure: true,\n disabled: disabled,\n icon: icon,\n accessibilityLabel: accessibilityLabel,\n onClick: handleClick,\n getOffsetWidth: handleOffsetWidth\n }, title);\n return /*#__PURE__*/React.createElement(Popover, {\n active: Boolean(active),\n activator: popoverActivator,\n preferredAlignment: \"left\",\n onClose: handleClose,\n hideOnPrint: true\n }, /*#__PURE__*/React.createElement(ActionList, {\n items: actions,\n sections: sections,\n onActionAnyItem: handleClose\n }), details && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Details\n }, details));\n}\n\nexport { MenuGroup };\n","import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';\nimport { debounce } from '../../../../utilities/debounce.js';\nimport styles from './Actions.scss.js';\nimport { MenuGroup } from '../MenuGroup/MenuGroup.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { SecondaryAction } from '../SecondaryAction/SecondaryAction.js';\nimport { EventListener } from '../../../EventListener/EventListener.js';\nimport { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.js';\n\nconst ACTION_SPACING = 8;\nfunction Actions({\n actions = [],\n groups = [],\n onActionRollup\n}) {\n const i18n = useI18n();\n const actionsLayoutRef = useRef(null);\n const menuGroupWidthRef = useRef(0);\n const availableWidthRef = useRef(0);\n const actionsAndGroupsLengthRef = useRef(0);\n const timesMeasured = useRef(0);\n const actionWidthsRef = useRef([]);\n const rollupActiveRef = useRef(null);\n const [activeMenuGroup, setActiveMenuGroup] = useState(undefined);\n const [measuredActions, setMeasuredActions] = useState({\n showable: [],\n rolledUp: []\n });\n const defaultRollupGroup = {\n title: i18n.translate('Polaris.ActionMenu.Actions.moreActions'),\n actions: []\n };\n const lastMenuGroup = [...groups].pop();\n const lastMenuGroupWidth = [...actionWidthsRef.current].pop() || 0;\n const handleActionsOffsetWidth = useCallback(width => {\n actionWidthsRef.current = [...actionWidthsRef.current, width];\n }, []);\n const handleMenuGroupToggle = useCallback(group => setActiveMenuGroup(activeMenuGroup ? undefined : group), [activeMenuGroup]);\n const handleMenuGroupClose = useCallback(() => setActiveMenuGroup(undefined), []);\n const updateActions = useCallback(() => {\n let actionsAndGroups = [...actions, ...groups];\n\n if (groups.length > 0) {\n // We don't want to include actions from the last group\n // since it is always rendered with its own actions\n actionsAndGroups = [...actionsAndGroups].slice(0, actionsAndGroups.length - 1);\n }\n\n const showable = actionsAndGroups.slice(0, measuredActions.showable.length);\n const rolledUp = actionsAndGroups.slice(measuredActions.showable.length, actionsAndGroups.length);\n setMeasuredActions({\n showable,\n rolledUp\n });\n }, [actions, groups, measuredActions.showable.length]);\n const measureActions = useCallback(() => {\n if (actionWidthsRef.current.length === 0 || availableWidthRef.current === 0) {\n return;\n }\n\n const actionsAndGroups = [...actions, ...groups];\n\n if (actionsAndGroups.length === 1) {\n setMeasuredActions({\n showable: actionsAndGroups,\n rolledUp: []\n });\n return;\n }\n\n let currentAvailableWidth = availableWidthRef.current;\n let newShowableActions = [];\n let newRolledUpActions = [];\n actionsAndGroups.forEach((action, index) => {\n const canFitAction = actionWidthsRef.current[index] + menuGroupWidthRef.current + ACTION_SPACING + lastMenuGroupWidth <= currentAvailableWidth;\n\n if (canFitAction) {\n currentAvailableWidth -= actionWidthsRef.current[index] + ACTION_SPACING * 2;\n newShowableActions = [...newShowableActions, action];\n } else {\n currentAvailableWidth = 0; // Find last group if it exists and always render it as a rolled up action below\n\n if (action === lastMenuGroup) return;\n newRolledUpActions = [...newRolledUpActions, action];\n }\n });\n\n if (onActionRollup) {\n // Note: Do not include last group actions since we are skipping `lastMenuGroup` above\n // as it is always rendered with its own actions\n const isRollupActive = newShowableActions.length < actionsAndGroups.length - 1;\n\n if (rollupActiveRef.current !== isRollupActive) {\n onActionRollup(isRollupActive);\n rollupActiveRef.current = isRollupActive;\n }\n }\n\n setMeasuredActions({\n showable: newShowableActions,\n rolledUp: newRolledUpActions\n });\n timesMeasured.current += 1;\n actionsAndGroupsLengthRef.current = actionsAndGroups.length;\n }, [actions, groups, lastMenuGroup, lastMenuGroupWidth, onActionRollup]);\n const handleResize = useMemo(() => debounce(() => {\n if (!actionsLayoutRef.current) return;\n availableWidthRef.current = actionsLayoutRef.current.offsetWidth; // Set timesMeasured to 0 to allow re-measuring\n\n timesMeasured.current = 0;\n measureActions();\n }, 50, {\n leading: false,\n trailing: true\n }), [measureActions]);\n useEffect(() => {\n if (!actionsLayoutRef.current) {\n return;\n }\n\n availableWidthRef.current = actionsLayoutRef.current.offsetWidth;\n\n if ( // Allow measuring twice\n // This accounts for the initial paint and re-flow\n timesMeasured.current >= 2 && [...actions, ...groups].length === actionsAndGroupsLengthRef.current) {\n updateActions();\n return;\n }\n\n measureActions();\n }, [actions, groups, measureActions, updateActions]);\n const actionsMarkup = actions.map(action => {\n if (measuredActions.showable.length > 0 || measuredActions.rolledUp.includes(action)) return null;\n const {\n content,\n onAction,\n ...rest\n } = action;\n return /*#__PURE__*/React.createElement(SecondaryAction, Object.assign({\n key: content,\n onClick: onAction\n }, rest, {\n getOffsetWidth: handleActionsOffsetWidth\n }), content);\n });\n const rollUppableActionsMarkup = measuredActions.showable.length > 0 ? measuredActions.showable.map(action => action.content && /*#__PURE__*/React.createElement(SecondaryAction, Object.assign({\n key: action.content\n }, action, {\n getOffsetWidth: handleActionsOffsetWidth\n }), action.content)) : null;\n const filteredGroups = [...groups, defaultRollupGroup].filter(group => {\n return groups.length === 0 ? group : group === lastMenuGroup || !measuredActions.rolledUp.some(rolledUpGroup => isMenuGroup(rolledUpGroup) && rolledUpGroup.title === group.title);\n });\n const groupsMarkup = filteredGroups.map(group => {\n const {\n title,\n actions: groupActions,\n ...rest\n } = group;\n const isDefaultGroup = group === defaultRollupGroup;\n const isLastMenuGroup = group === lastMenuGroup;\n const [finalRolledUpActions, finalRolledUpSectionGroups] = measuredActions.rolledUp.reduce(([actions, sections], action) => {\n if (isMenuGroup(action)) {\n sections.push({\n title: action.title,\n items: action.actions.map(sectionAction => ({ ...sectionAction,\n disabled: action.disabled || sectionAction.disabled\n }))\n });\n } else {\n actions.push(action);\n }\n\n return [actions, sections];\n }, [[], []]);\n\n if (!isDefaultGroup && !isLastMenuGroup) {\n // Render a normal MenuGroup with just its actions\n return /*#__PURE__*/React.createElement(MenuGroup, Object.assign({\n key: title,\n title: title,\n active: title === activeMenuGroup,\n actions: groupActions\n }, rest, {\n onOpen: handleMenuGroupToggle,\n onClose: handleMenuGroupClose,\n getOffsetWidth: handleActionsOffsetWidth\n }));\n } else if (!isDefaultGroup && isLastMenuGroup) {\n // render the last, rollup group with its actions and finalRolledUpActions\n return /*#__PURE__*/React.createElement(MenuGroup, Object.assign({\n key: title,\n title: title,\n active: title === activeMenuGroup,\n actions: [...finalRolledUpActions, ...groupActions],\n sections: finalRolledUpSectionGroups\n }, rest, {\n onOpen: handleMenuGroupToggle,\n onClose: handleMenuGroupClose,\n getOffsetWidth: handleActionsOffsetWidth\n }));\n } else if (isDefaultGroup && groups.length === 0 && finalRolledUpActions.length) {\n // Render the default group to rollup into if one does not exist\n return /*#__PURE__*/React.createElement(MenuGroup, Object.assign({\n key: title,\n title: title,\n active: title === activeMenuGroup,\n actions: finalRolledUpActions,\n sections: finalRolledUpSectionGroups\n }, rest, {\n onOpen: handleMenuGroupToggle,\n onClose: handleMenuGroupClose,\n getOffsetWidth: handleActionsOffsetWidth\n }));\n }\n });\n const groupedActionsMarkup = /*#__PURE__*/React.createElement(ButtonGroup, {\n spacing: \"extraTight\"\n }, rollUppableActionsMarkup, actionsMarkup, groupsMarkup);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ActionsLayout,\n ref: actionsLayoutRef\n }, groupedActionsMarkup, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: handleResize\n }));\n}\n\nfunction isMenuGroup(actionOrMenuGroup) {\n return 'title' in actionOrMenuGroup;\n}\n\nexport { Actions };\n","import React from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './ActionMenu.scss.js';\nimport { RollupActions } from './components/RollupActions/RollupActions.js';\nimport { Actions } from './components/Actions/Actions.js';\n\nfunction ActionMenu({\n actions = [],\n groups = [],\n rollup,\n rollupActionsLabel,\n onActionRollup\n}) {\n if (actions.length === 0 && groups.length === 0) {\n return null;\n }\n\n const actionMenuClassNames = classNames(styles.ActionMenu, rollup && styles.rollup);\n const rollupSections = groups.map(group => convertGroupToSection(group));\n return /*#__PURE__*/React.createElement(\"div\", {\n className: actionMenuClassNames\n }, rollup ? /*#__PURE__*/React.createElement(RollupActions, {\n accessibilityLabel: rollupActionsLabel,\n items: actions,\n sections: rollupSections\n }) : /*#__PURE__*/React.createElement(Actions, {\n actions: actions,\n groups: groups,\n onActionRollup: onActionRollup\n }));\n}\nfunction hasGroupsWithActions(groups = []) {\n return groups.length === 0 ? false : groups.some(group => group.actions.length > 0);\n}\n\nfunction convertGroupToSection({\n title,\n actions,\n disabled\n}) {\n return {\n title,\n items: actions.map(action => ({ ...action,\n disabled: disabled || action.disabled\n }))\n };\n}\n\nexport { ActionMenu, hasGroupsWithActions };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { ConditionalRender, ConditionalWrapper } from '../../../../utilities/components.js';\nimport { isInterface } from '../../../../utilities/is-interface.js';\nimport { isReactElement } from '../../../../utilities/is-react-element.js';\nimport styles from './Header.scss.js';\nimport { Breadcrumbs } from '../../../Breadcrumbs/Breadcrumbs.js';\nimport { Pagination } from '../../../Pagination/Pagination.js';\nimport { Title } from './components/Title/Title.js';\nimport { hasGroupsWithActions, ActionMenu } from '../../../ActionMenu/ActionMenu.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { useMediaQuery } from '../../../../utilities/media-query/hooks.js';\nimport { TextStyle } from '../../../TextStyle/TextStyle.js';\nimport { buttonFrom } from '../../../Button/utils.js';\nimport { Tooltip } from '../../../Tooltip/Tooltip.js';\n\nconst SHORT_TITLE = 20;\nconst REALLY_SHORT_TITLE = 8;\nconst LONG_TITLE = 34;\nfunction Header({\n title,\n subtitle,\n titleMetadata,\n additionalMetadata,\n titleHidden = false,\n primaryAction,\n pagination,\n additionalNavigation,\n breadcrumbs = [],\n secondaryActions = [],\n actionGroups = [],\n compactTitle = false,\n onActionRollup\n}) {\n const i18n = useI18n();\n const {\n isNavigationCollapsed\n } = useMediaQuery();\n\n if (additionalNavigation && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('Deprecation: The `additionalNavigation` on Page is deprecated and will be removed in the next major version.');\n }\n\n const isSingleRow = !primaryAction && !pagination && (isInterface(secondaryActions) && !secondaryActions.length || isReactElement(secondaryActions)) && !actionGroups.length;\n const breadcrumbMarkup = breadcrumbs.length > 0 ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.BreadcrumbWrapper\n }, /*#__PURE__*/React.createElement(Breadcrumbs, {\n breadcrumbs: breadcrumbs\n })) : null;\n const paginationMarkup = pagination && !isNavigationCollapsed ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.PaginationWrapper\n }, /*#__PURE__*/React.createElement(Pagination, pagination)) : null;\n const additionalNavigationMarkup = additionalNavigation ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.AdditionalNavigationWrapper\n }, additionalNavigation) : null;\n const navigationMarkup = breadcrumbMarkup || paginationMarkup || additionalNavigationMarkup ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Navigation\n }, breadcrumbMarkup, additionalNavigationMarkup, paginationMarkup) : null;\n const pageTitleMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.TitleWrapper\n }, /*#__PURE__*/React.createElement(Title, {\n title: title,\n subtitle: subtitle,\n titleMetadata: titleMetadata,\n compactTitle: compactTitle\n }));\n const primaryActionMarkup = primaryAction ? /*#__PURE__*/React.createElement(PrimaryActionMarkup, {\n primaryAction: primaryAction\n }) : null;\n let actionMenuMarkup = null;\n\n if (isInterface(secondaryActions) && (secondaryActions.length > 0 || hasGroupsWithActions(actionGroups))) {\n actionMenuMarkup = /*#__PURE__*/React.createElement(ActionMenu, {\n actions: secondaryActions,\n groups: actionGroups,\n rollup: isNavigationCollapsed,\n rollupActionsLabel: title ? i18n.translate('Polaris.Page.Header.rollupActionsLabel', {\n title\n }) : undefined,\n onActionRollup: onActionRollup\n });\n } else if (isReactElement(secondaryActions)) {\n actionMenuMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, secondaryActions);\n }\n\n const additionalMetadataMarkup = additionalMetadata ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.AdditionalMetaData\n }, /*#__PURE__*/React.createElement(TextStyle, {\n variation: \"subdued\"\n }, additionalMetadata)) : null;\n const headerClassNames = classNames(styles.Header, isSingleRow && styles.isSingleRow, titleHidden && styles.titleHidden, navigationMarkup && styles.hasNavigation, actionMenuMarkup && styles.hasActionMenu, isNavigationCollapsed && styles.mobileView, !breadcrumbs.length && styles.noBreadcrumbs, title && title.length < LONG_TITLE && styles.mediumTitle, title && title.length > LONG_TITLE && styles.longTitle);\n const {\n slot1,\n slot2,\n slot3,\n slot4,\n slot5,\n slot6\n } = determineLayout({\n actionMenuMarkup,\n additionalMetadataMarkup,\n additionalNavigationMarkup,\n breadcrumbMarkup,\n isNavigationCollapsed,\n pageTitleMarkup,\n paginationMarkup,\n primaryActionMarkup,\n title\n });\n return /*#__PURE__*/React.createElement(\"div\", {\n className: headerClassNames\n }, /*#__PURE__*/React.createElement(ConditionalRender, {\n condition: [slot1, slot2, slot3, slot4].some(notNull)\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Row\n }, slot1, slot2, /*#__PURE__*/React.createElement(ConditionalRender, {\n condition: [slot3, slot4].some(notNull)\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.RightAlign\n }, /*#__PURE__*/React.createElement(ConditionalWrapper, {\n condition: [slot3, slot4].every(notNull),\n wrapper: children => /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Actions\n }, children)\n }, slot3, slot4))))), /*#__PURE__*/React.createElement(ConditionalRender, {\n condition: [slot5, slot6].some(notNull)\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Row\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.LeftAlign\n }, slot5), /*#__PURE__*/React.createElement(ConditionalRender, {\n condition: slot6 != null\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.RightAlign\n }, slot6)))));\n}\n\nfunction PrimaryActionMarkup({\n primaryAction\n}) {\n const {\n isNavigationCollapsed\n } = useMediaQuery();\n let actionMarkup = primaryAction;\n\n if (isInterface(primaryAction)) {\n const {\n primary: isPrimary,\n helpText\n } = primaryAction;\n const primary = isPrimary === undefined ? true : isPrimary;\n const content = buttonFrom(shouldShowIconOnly(isNavigationCollapsed, primaryAction), {\n primary\n });\n actionMarkup = helpText ? /*#__PURE__*/React.createElement(Tooltip, {\n content: helpText\n }, content) : content;\n }\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.PrimaryActionWrapper\n }, actionMarkup);\n}\n\nfunction shouldShowIconOnly(isMobile, action) {\n let {\n content,\n accessibilityLabel,\n icon\n } = action;\n if (icon == null) return { ...action,\n icon: undefined\n };\n\n if (isMobile) {\n accessibilityLabel = accessibilityLabel || content;\n content = undefined;\n } else {\n icon = undefined;\n }\n\n return { ...action,\n content,\n accessibilityLabel,\n icon\n };\n}\n\nfunction notNull(value) {\n return value != null;\n}\n\nfunction determineLayout({\n actionMenuMarkup,\n additionalMetadataMarkup,\n additionalNavigationMarkup,\n breadcrumbMarkup,\n isNavigationCollapsed,\n pageTitleMarkup,\n paginationMarkup,\n primaryActionMarkup,\n title\n}) {\n // Header Layout\n // |----------------------------------------------------|\n // | slot1 | slot2 | | slot3 | slot4 |\n // |----------------------------------------------------|\n // | slot5 | | slot6 |\n // |----------------------------------------------------|\n //\n const layouts = {\n mobileCompact: {\n slots: {\n slot1: null,\n slot2: pageTitleMarkup,\n slot3: actionMenuMarkup,\n slot4: primaryActionMarkup,\n slot5: additionalMetadataMarkup,\n slot6: additionalNavigationMarkup\n },\n condition: isNavigationCollapsed && breadcrumbMarkup == null && title != null && title.length <= REALLY_SHORT_TITLE\n },\n mobileDefault: {\n slots: {\n slot1: breadcrumbMarkup,\n slot2: pageTitleMarkup,\n slot3: actionMenuMarkup,\n slot4: primaryActionMarkup,\n slot5: additionalMetadataMarkup,\n slot6: additionalNavigationMarkup\n },\n condition: isNavigationCollapsed\n },\n desktopCompact: {\n slots: {\n slot1: breadcrumbMarkup,\n slot2: pageTitleMarkup,\n slot3: actionMenuMarkup,\n slot4: primaryActionMarkup,\n slot5: additionalMetadataMarkup,\n slot6: additionalNavigationMarkup\n },\n condition: !isNavigationCollapsed && paginationMarkup == null && actionMenuMarkup == null && title != null && title.length <= SHORT_TITLE\n },\n desktopDefault: {\n slots: {\n slot1: breadcrumbMarkup,\n slot2: pageTitleMarkup,\n slot3: /*#__PURE__*/React.createElement(React.Fragment, null, actionMenuMarkup, primaryActionMarkup),\n slot4: paginationMarkup,\n slot5: additionalMetadataMarkup,\n slot6: additionalNavigationMarkup\n },\n condition: !isNavigationCollapsed\n }\n };\n const layout = Object.values(layouts).find(layout => layout.condition) || layouts.desktopDefault;\n return layout.slots;\n}\n\nexport { Header };\n","import React from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport { isInterface } from '../../utilities/is-interface.js';\nimport { isReactElement } from '../../utilities/is-react-element.js';\nimport styles from './Page.scss.js';\nimport { Header } from './components/Header/Header.js';\n\nfunction Page({\n children,\n fullWidth,\n narrowWidth,\n divider,\n ...rest\n}) {\n const pageClassName = classNames(styles.Page, fullWidth && styles.fullWidth, narrowWidth && styles.narrowWidth);\n const hasHeaderContent = rest.title != null && rest.title !== '' || rest.primaryAction != null || rest.secondaryActions != null && (isInterface(rest.secondaryActions) && rest.secondaryActions.length > 0 || isReactElement(rest.secondaryActions)) || rest.actionGroups != null && rest.actionGroups.length > 0 || rest.breadcrumbs != null && rest.breadcrumbs.length > 0;\n const contentClassName = classNames(!hasHeaderContent && styles.Content, divider && hasHeaderContent && styles.divider);\n const headerMarkup = hasHeaderContent ? /*#__PURE__*/React.createElement(Header, rest) : null;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: pageClassName\n }, headerMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: contentClassName\n }, children));\n}\n\nexport { Page };\n","var EditableTarget;\n\n(function (EditableTarget) {\n EditableTarget[\"Input\"] = \"INPUT\";\n EditableTarget[\"Textarea\"] = \"TEXTAREA\";\n EditableTarget[\"Select\"] = \"SELECT\";\n EditableTarget[\"ContentEditable\"] = \"contenteditable\";\n})(EditableTarget || (EditableTarget = {}));\n\nfunction isInputFocused() {\n if (document == null || document.activeElement == null) {\n return false;\n }\n\n const {\n tagName\n } = document.activeElement;\n return tagName === EditableTarget.Input || tagName === EditableTarget.Textarea || tagName === EditableTarget.Select || document.activeElement.hasAttribute(EditableTarget.ContentEditable);\n}\n\nexport { isInputFocused };\n","import { ChevronLeftMinor, ChevronRightMinor } from '@shopify/polaris-icons';\nimport React, { createRef } from 'react';\nimport { isInputFocused } from '../../utilities/is-input-focused.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { KeypressListener } from '../KeypressListener/KeypressListener.js';\nimport { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';\nimport { Tooltip } from '../Tooltip/Tooltip.js';\nimport { Button } from '../Button/Button.js';\nimport { TextStyle } from '../TextStyle/TextStyle.js';\n\nfunction Pagination({\n hasNext,\n hasPrevious,\n nextURL,\n previousURL,\n onNext,\n onPrevious,\n nextTooltip,\n previousTooltip,\n nextKeys,\n previousKeys,\n accessibilityLabel,\n accessibilityLabels,\n label\n}) {\n const i18n = useI18n();\n const node = /*#__PURE__*/createRef();\n const navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');\n const previousLabel = (accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.previous) || i18n.translate('Polaris.Pagination.previous');\n const nextLabel = (accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.next) || i18n.translate('Polaris.Pagination.next');\n const prev = /*#__PURE__*/React.createElement(Button, {\n outline: true,\n icon: ChevronLeftMinor,\n accessibilityLabel: previousLabel,\n url: previousURL,\n onClick: onPrevious,\n disabled: !hasPrevious,\n id: \"previousURL\"\n });\n const constructedPrevious = previousTooltip && hasPrevious ? /*#__PURE__*/React.createElement(Tooltip, {\n activatorWrapper: \"span\",\n content: previousTooltip\n }, prev) : prev;\n const next = /*#__PURE__*/React.createElement(Button, {\n outline: true,\n icon: ChevronRightMinor,\n accessibilityLabel: nextLabel,\n url: nextURL,\n onClick: onNext,\n disabled: !hasNext,\n id: \"nextURL\"\n });\n const constructedNext = nextTooltip && hasNext ? /*#__PURE__*/React.createElement(Tooltip, {\n activatorWrapper: \"span\",\n content: nextTooltip\n }, next) : next;\n const previousHandler = onPrevious || noop;\n const previousButtonEvents = previousKeys && (previousURL || onPrevious) && hasPrevious && previousKeys.map(key => /*#__PURE__*/React.createElement(KeypressListener, {\n key: key,\n keyCode: key,\n handler: previousURL ? handleCallback(clickPaginationLink('previousURL', node)) : handleCallback(previousHandler)\n }));\n const nextHandler = onNext || noop;\n const nextButtonEvents = nextKeys && (nextURL || onNext) && hasNext && nextKeys.map(key => /*#__PURE__*/React.createElement(KeypressListener, {\n key: key,\n keyCode: key,\n handler: nextURL ? handleCallback(clickPaginationLink('nextURL', node)) : handleCallback(nextHandler)\n }));\n const labelTextMarkup = hasNext && hasPrevious ? /*#__PURE__*/React.createElement(TextStyle, null, label) : /*#__PURE__*/React.createElement(TextStyle, {\n variation: \"subdued\"\n }, label);\n const labelMarkup = label ? /*#__PURE__*/React.createElement(\"div\", {\n \"aria-live\": \"polite\"\n }, labelTextMarkup) : null;\n return /*#__PURE__*/React.createElement(\"nav\", {\n \"aria-label\": navLabel,\n ref: node\n }, previousButtonEvents, nextButtonEvents, /*#__PURE__*/React.createElement(ButtonGroup, {\n segmented: !label\n }, constructedPrevious, labelMarkup, constructedNext));\n}\n\nfunction clickPaginationLink(id, node) {\n return () => {\n if (node.current == null) {\n return;\n }\n\n const link = node.current.querySelector(`#${id}`);\n\n if (link) {\n link.click();\n }\n };\n}\n\nfunction handleCallback(fn) {\n return () => {\n if (isInputFocused()) {\n return;\n }\n\n fn();\n };\n}\n\nfunction noop() {}\n\nexport { Pagination };\n","var styles = {\n \"Popover\": \"Polaris-Popover\",\n \"PopoverOverlay\": \"Polaris-Popover__PopoverOverlay\",\n \"PopoverOverlay-entering\": \"Polaris-Popover__PopoverOverlay--entering\",\n \"PopoverOverlay-open\": \"Polaris-Popover__PopoverOverlay--open\",\n \"PopoverOverlay-exiting\": \"Polaris-Popover__PopoverOverlay--exiting\",\n \"measuring\": \"Polaris-Popover--measuring\",\n \"fullWidth\": \"Polaris-Popover--fullWidth\",\n \"Content\": \"Polaris-Popover__Content\",\n \"positionedAbove\": \"Polaris-Popover--positionedAbove\",\n \"Wrapper\": \"Polaris-Popover__Wrapper\",\n \"Content-fullHeight\": \"Polaris-Popover__Content--fullHeight\",\n \"Content-fluidContent\": \"Polaris-Popover__Content--fluidContent\",\n \"Pane\": \"Polaris-Popover__Pane\",\n \"Pane-fixed\": \"Polaris-Popover__Pane--fixed\",\n \"Section\": \"Polaris-Popover__Section\",\n \"FocusTracker\": \"Polaris-Popover__FocusTracker\",\n \"PopoverOverlay-hideOnPrint\": \"Polaris-Popover__PopoverOverlay--hideOnPrint\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from '../../Popover.scss.js';\n\nfunction Section({\n children\n}) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Section\n }, children);\n}\n\nexport { Section };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { wrapWithComponent } from '../../../../utilities/components.js';\nimport styles from '../../Popover.scss.js';\nimport { Section } from '../Section/Section.js';\nimport { Scrollable } from '../../../Scrollable/Scrollable.js';\n\nfunction Pane({\n fixed,\n sectioned,\n children,\n height,\n onScrolledToBottom\n}) {\n const className = classNames(styles.Pane, fixed && styles['Pane-fixed']);\n const content = sectioned ? wrapWithComponent(children, Section, {}) : children;\n const style = height ? {\n height,\n maxHeight: height,\n minHeight: height\n } : undefined;\n return fixed ? /*#__PURE__*/React.createElement(\"div\", {\n style: style,\n className: className\n }, content) : /*#__PURE__*/React.createElement(Scrollable, {\n shadow: true,\n className: className,\n style: style,\n onScrolledToBottom: onScrolledToBottom\n }, content);\n}\n\nexport { Pane };\n","import React, { PureComponent, createRef, Children } from 'react';\nimport { tokens } from '@shopify/polaris-tokens';\nimport { findFirstKeyboardFocusableNode } from '../../../../utilities/focus.js';\nimport { classNames } from '../../../../utilities/css.js';\nimport { isElementOfType, wrapWithComponent } from '../../../../utilities/components.js';\nimport { Key } from '../../../../types.js';\nimport { overlay } from '../../../shared.js';\nimport styles from '../../Popover.scss.js';\nimport { KeypressListener } from '../../../KeypressListener/KeypressListener.js';\nimport { PositionedOverlay } from '../../../PositionedOverlay/PositionedOverlay.js';\nimport { Pane } from '../Pane/Pane.js';\nimport { EventListener } from '../../../EventListener/EventListener.js';\nimport { CustomProperties } from '../../../CustomProperties/CustomProperties.js';\n\nlet PopoverCloseSource;\n\n(function (PopoverCloseSource) {\n PopoverCloseSource[PopoverCloseSource[\"Click\"] = 0] = \"Click\";\n PopoverCloseSource[PopoverCloseSource[\"EscapeKeypress\"] = 1] = \"EscapeKeypress\";\n PopoverCloseSource[PopoverCloseSource[\"FocusOut\"] = 2] = \"FocusOut\";\n PopoverCloseSource[PopoverCloseSource[\"ScrollOut\"] = 3] = \"ScrollOut\";\n})(PopoverCloseSource || (PopoverCloseSource = {}));\n\nvar TransitionStatus;\n\n(function (TransitionStatus) {\n TransitionStatus[\"Entering\"] = \"entering\";\n TransitionStatus[\"Entered\"] = \"entered\";\n TransitionStatus[\"Exiting\"] = \"exiting\";\n TransitionStatus[\"Exited\"] = \"exited\";\n})(TransitionStatus || (TransitionStatus = {}));\n\nclass PopoverOverlay extends PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n transitionStatus: this.props.active ? TransitionStatus.Entering : TransitionStatus.Exited\n };\n this.contentNode = /*#__PURE__*/createRef();\n this.enteringTimer = void 0;\n this.exitingTimer = void 0;\n this.overlayRef = void 0;\n\n this.renderPopover = overlayDetails => {\n const {\n measuring,\n desiredHeight,\n positioning\n } = overlayDetails;\n const {\n id,\n children,\n sectioned,\n fullWidth,\n fullHeight,\n fluidContent,\n hideOnPrint,\n colorScheme,\n autofocusTarget\n } = this.props;\n const className = classNames(styles.Popover, positioning === 'above' && styles.positionedAbove, fullWidth && styles.fullWidth, measuring && styles.measuring, hideOnPrint && styles['PopoverOverlay-hideOnPrint']);\n const contentStyles = measuring ? undefined : {\n height: desiredHeight\n };\n const contentClassNames = classNames(styles.Content, fullHeight && styles['Content-fullHeight'], fluidContent && styles['Content-fluidContent']);\n const content = /*#__PURE__*/React.createElement(\"div\", {\n id: id,\n tabIndex: autofocusTarget === 'none' ? undefined : -1,\n className: contentClassNames,\n style: contentStyles,\n ref: this.contentNode\n }, renderPopoverContent(children, {\n sectioned\n }));\n return /*#__PURE__*/React.createElement(\"div\", Object.assign({\n className: className\n }, overlay.props), /*#__PURE__*/React.createElement(EventListener, {\n event: \"click\",\n handler: this.handleClick\n }), /*#__PURE__*/React.createElement(EventListener, {\n event: \"touchstart\",\n handler: this.handleClick\n }), /*#__PURE__*/React.createElement(KeypressListener, {\n keyCode: Key.Escape,\n handler: this.handleEscape\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.FocusTracker // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n ,\n tabIndex: 0,\n onFocus: this.handleFocusFirstItem\n }), /*#__PURE__*/React.createElement(CustomProperties, {\n colorScheme: colorScheme\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Wrapper\n }, content)), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.FocusTracker // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n ,\n tabIndex: 0,\n onFocus: this.handleFocusLastItem\n }));\n };\n\n this.handleClick = event => {\n const target = event.target;\n const {\n contentNode,\n props: {\n activator,\n onClose\n }\n } = this;\n const isDescendant = contentNode.current != null && nodeContainsDescendant(contentNode.current, target);\n const isActivatorDescendant = nodeContainsDescendant(activator, target);\n\n if (isDescendant || isActivatorDescendant || this.state.transitionStatus !== TransitionStatus.Entered) {\n return;\n }\n\n onClose(PopoverCloseSource.Click);\n };\n\n this.handleScrollOut = () => {\n this.props.onClose(PopoverCloseSource.ScrollOut);\n };\n\n this.handleEscape = () => {\n this.props.onClose(PopoverCloseSource.EscapeKeypress);\n };\n\n this.handleFocusFirstItem = () => {\n this.props.onClose(PopoverCloseSource.FocusOut);\n };\n\n this.handleFocusLastItem = () => {\n this.props.onClose(PopoverCloseSource.FocusOut);\n };\n\n this.overlayRef = /*#__PURE__*/createRef();\n }\n\n forceUpdatePosition() {\n var _this$overlayRef$curr;\n\n (_this$overlayRef$curr = this.overlayRef.current) === null || _this$overlayRef$curr === void 0 ? void 0 : _this$overlayRef$curr.forceUpdatePosition();\n }\n\n changeTransitionStatus(transitionStatus, cb) {\n this.setState({\n transitionStatus\n }, cb); // Forcing a reflow to enable the animation\n\n this.contentNode.current && this.contentNode.current.getBoundingClientRect();\n }\n\n componentDidMount() {\n if (this.props.active) {\n this.focusContent();\n this.changeTransitionStatus(TransitionStatus.Entered);\n }\n }\n\n componentDidUpdate(oldProps) {\n if (this.props.active && !oldProps.active) {\n this.focusContent();\n this.changeTransitionStatus(TransitionStatus.Entering, () => {\n this.clearTransitionTimeout();\n this.enteringTimer = window.setTimeout(() => {\n this.setState({\n transitionStatus: TransitionStatus.Entered\n });\n }, parseInt(tokens.motion['duration-100'].value, 10));\n });\n }\n\n if (!this.props.active && oldProps.active) {\n this.changeTransitionStatus(TransitionStatus.Exiting, () => {\n this.clearTransitionTimeout();\n this.exitingTimer = window.setTimeout(() => {\n this.setState({\n transitionStatus: TransitionStatus.Exited\n });\n }, parseInt(tokens.motion['duration-100'].value, 10));\n });\n }\n }\n\n componentWillUnmount() {\n this.clearTransitionTimeout();\n }\n\n render() {\n const {\n active,\n activator,\n fullWidth,\n preferredPosition = 'below',\n preferredAlignment = 'center',\n preferInputActivator = true,\n fixed,\n zIndexOverride\n } = this.props;\n const {\n transitionStatus\n } = this.state;\n if (transitionStatus === TransitionStatus.Exited && !active) return null;\n const className = classNames(styles.PopoverOverlay, transitionStatus === TransitionStatus.Entering && styles['PopoverOverlay-entering'], transitionStatus === TransitionStatus.Entered && styles['PopoverOverlay-open'], transitionStatus === TransitionStatus.Exiting && styles['PopoverOverlay-exiting']);\n return /*#__PURE__*/React.createElement(PositionedOverlay, {\n ref: this.overlayRef,\n fullWidth: fullWidth,\n active: active,\n activator: activator,\n preferInputActivator: preferInputActivator,\n preferredPosition: preferredPosition,\n preferredAlignment: preferredAlignment,\n render: this.renderPopover.bind(this),\n fixed: fixed,\n onScrollOut: this.handleScrollOut,\n classNames: className,\n zIndexOverride: zIndexOverride\n });\n }\n\n clearTransitionTimeout() {\n if (this.enteringTimer) {\n window.clearTimeout(this.enteringTimer);\n }\n\n if (this.exitingTimer) {\n window.clearTimeout(this.exitingTimer);\n }\n }\n\n focusContent() {\n const {\n autofocusTarget = 'container'\n } = this.props;\n\n if (autofocusTarget === 'none' || this.contentNode == null) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (this.contentNode.current == null) {\n return;\n }\n\n const focusableChild = findFirstKeyboardFocusableNode(this.contentNode.current);\n\n if (focusableChild && autofocusTarget === 'first-node') {\n focusableChild.focus({\n preventScroll: process.env.NODE_ENV === 'development'\n });\n } else {\n this.contentNode.current.focus({\n preventScroll: process.env.NODE_ENV === 'development'\n });\n }\n });\n } // eslint-disable-next-line @shopify/react-no-multiple-render-methods\n\n\n}\n\nfunction renderPopoverContent(children, props) {\n const childrenArray = Children.toArray(children);\n\n if (isElementOfType(childrenArray[0], Pane)) {\n return childrenArray;\n }\n\n return wrapWithComponent(childrenArray, Pane, props);\n}\n\nfunction nodeContainsDescendant(rootNode, descendant) {\n if (rootNode === descendant) {\n return true;\n }\n\n let parent = descendant.parentNode;\n\n while (parent != null) {\n if (parent === rootNode) {\n return true;\n }\n\n parent = parent.parentNode;\n }\n\n return false;\n}\n\nexport { PopoverCloseSource, PopoverOverlay, nodeContainsDescendant };\n","import React, { forwardRef, useState, useRef, useImperativeHandle, useCallback, useEffect, Children } from 'react';\nimport { findFirstFocusableNodeIncludingDisabled, focusNextFocusableNode } from '../../utilities/focus.js';\nimport { portal } from '../shared.js';\nimport { setActivatorAttributes } from './set-activator-attributes.js';\nimport { Portal } from '../Portal/Portal.js';\nimport { PopoverOverlay, PopoverCloseSource } from './components/PopoverOverlay/PopoverOverlay.js';\nexport { PopoverCloseSource } from './components/PopoverOverlay/PopoverOverlay.js';\nimport { Pane } from './components/Pane/Pane.js';\nimport { Section } from './components/Section/Section.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\n\n// TypeScript can't generate types that correctly infer the typing of\n// subcomponents so explicitly state the subcomponents in the type definition.\n// Letting this be implicit works in this project but fails in projects that use\n// generated *.d.ts files.\nconst PopoverComponent = /*#__PURE__*/forwardRef(function Popover({\n activatorWrapper = 'div',\n children,\n onClose,\n activator,\n preventFocusOnClose,\n active,\n fixed,\n ariaHaspopup,\n preferInputActivator = true,\n colorScheme,\n zIndexOverride,\n ...rest\n}, ref) {\n const [activatorNode, setActivatorNode] = useState();\n const overlayRef = useRef(null);\n const activatorContainer = useRef(null);\n const WrapperComponent = activatorWrapper;\n const id = useUniqueId('popover');\n\n function forceUpdatePosition() {\n var _overlayRef$current;\n\n (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.forceUpdatePosition();\n }\n\n useImperativeHandle(ref, () => {\n return {\n forceUpdatePosition\n };\n });\n const setAccessibilityAttributes = useCallback(() => {\n if (activatorContainer.current == null) {\n return;\n }\n\n const firstFocusable = findFirstFocusableNodeIncludingDisabled(activatorContainer.current);\n const focusableActivator = firstFocusable || activatorContainer.current;\n const activatorDisabled = 'disabled' in focusableActivator && Boolean(focusableActivator.disabled);\n setActivatorAttributes(focusableActivator, {\n id,\n active,\n ariaHaspopup,\n activatorDisabled\n });\n }, [id, active, ariaHaspopup]);\n\n const handleClose = source => {\n onClose(source);\n\n if (activatorContainer.current == null || preventFocusOnClose) {\n return;\n }\n\n if ((source === PopoverCloseSource.FocusOut || source === PopoverCloseSource.EscapeKeypress) && activatorNode) {\n const focusableActivator = findFirstFocusableNodeIncludingDisabled(activatorNode) || findFirstFocusableNodeIncludingDisabled(activatorContainer.current) || activatorContainer.current;\n\n if (!focusNextFocusableNode(focusableActivator, isInPortal)) {\n focusableActivator.focus();\n }\n }\n };\n\n useEffect(() => {\n if (!activatorNode && activatorContainer.current) {\n setActivatorNode(activatorContainer.current.firstElementChild);\n } else if (activatorNode && activatorContainer.current && !activatorContainer.current.contains(activatorNode)) {\n setActivatorNode(activatorContainer.current.firstElementChild);\n }\n\n setAccessibilityAttributes();\n }, [activatorNode, setAccessibilityAttributes]);\n useEffect(() => {\n if (activatorNode && activatorContainer.current) {\n setActivatorNode(activatorContainer.current.firstElementChild);\n }\n\n setAccessibilityAttributes();\n }, [activatorNode, setAccessibilityAttributes]);\n\n if (colorScheme && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('Deprecation: The `colorScheme` prop on the `Popover` component has been deprecated. See the v10 migration guide for replacing dark color scheme styles. https://github.com/Shopify/polaris/blob/main/documentation/guides/migrating-from-v9-to-v10.md');\n }\n\n const portal = activatorNode ? /*#__PURE__*/React.createElement(Portal, {\n idPrefix: \"popover\"\n }, /*#__PURE__*/React.createElement(PopoverOverlay, Object.assign({\n ref: overlayRef,\n id: id,\n activator: activatorNode,\n preferInputActivator: preferInputActivator,\n onClose: handleClose,\n active: active,\n fixed: fixed,\n colorScheme: colorScheme,\n zIndexOverride: zIndexOverride\n }, rest), children)) : null;\n return /*#__PURE__*/React.createElement(WrapperComponent, {\n ref: activatorContainer\n }, Children.only(activator), portal);\n});\n\nfunction isInPortal(element) {\n let parentElement = element.parentElement;\n\n while (parentElement) {\n if (parentElement.matches(portal.selector)) return false;\n parentElement = parentElement.parentElement;\n }\n\n return true;\n}\n\nconst Popover = Object.assign(PopoverComponent, {\n Pane,\n Section\n});\n\nexport { Popover };\n","function setActivatorAttributes(activator, {\n id,\n active = false,\n ariaHaspopup,\n activatorDisabled = false\n}) {\n if (!activatorDisabled) {\n activator.tabIndex = activator.tabIndex || 0;\n }\n\n activator.setAttribute('aria-controls', id);\n activator.setAttribute('aria-owns', id);\n activator.setAttribute('aria-expanded', String(active));\n\n if (ariaHaspopup != null) {\n activator.setAttribute('aria-haspopup', String(ariaHaspopup));\n }\n}\n\nexport { setActivatorAttributes };\n","import React, { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePortalsManager } from '../../utilities/portals/hooks.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\n\nfunction Portal({\n children,\n idPrefix = '',\n onPortalCreated = noop\n}) {\n const {\n container\n } = usePortalsManager();\n const uniqueId = useUniqueId('portal');\n const portalId = idPrefix !== '' ? `${idPrefix}-${uniqueId}` : uniqueId;\n useEffect(() => {\n onPortalCreated();\n }, [onPortalCreated]);\n return container ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(\"div\", {\n \"data-portal-id\": portalId\n }, children), container) : null;\n}\n\nfunction noop() {}\n\nexport { Portal };\n","import { useContext } from 'react';\nimport { PortalsManagerContext } from './context.js';\n\nfunction usePortalsManager() {\n const portalsManager = useContext(PortalsManagerContext);\n\n if (!portalsManager) {\n throw new Error('No portals manager was provided. Your application must be wrapped in an component. See https://polaris.shopify.com/components/app-provider for implementation instructions.');\n }\n\n return portalsManager;\n}\n\nexport { usePortalsManager };\n","import { Rect } from '../../../utilities/geometry.js';\n\nfunction calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed, topBarOffset = 0) {\n const activatorTop = activatorRect.top;\n const activatorBottom = activatorTop + activatorRect.height;\n const spaceAbove = activatorRect.top - topBarOffset;\n const spaceBelow = containerRect.height - activatorRect.top - activatorRect.height;\n const desiredHeight = overlayRect.height;\n const verticalMargins = overlayMargins.activator + overlayMargins.container;\n const minimumSpaceToScroll = overlayMargins.container;\n const distanceToTopScroll = activatorRect.top - Math.max(scrollableContainerRect.top, 0);\n const distanceToBottomScroll = containerRect.top + Math.min(containerRect.height, scrollableContainerRect.top + scrollableContainerRect.height) - (activatorRect.top + activatorRect.height);\n const enoughSpaceFromTopScroll = distanceToTopScroll >= minimumSpaceToScroll;\n const enoughSpaceFromBottomScroll = distanceToBottomScroll >= minimumSpaceToScroll;\n const heightIfBelow = Math.min(spaceBelow, desiredHeight);\n const heightIfAbove = Math.min(spaceAbove, desiredHeight);\n const containerRectTop = fixed ? 0 : containerRect.top;\n const positionIfAbove = {\n height: heightIfAbove - verticalMargins,\n top: activatorTop + containerRectTop - heightIfAbove,\n positioning: 'above'\n };\n const positionIfBelow = {\n height: heightIfBelow - verticalMargins,\n top: activatorBottom + containerRectTop,\n positioning: 'below'\n };\n\n if (preferredPosition === 'above') {\n return (enoughSpaceFromTopScroll || distanceToTopScroll >= distanceToBottomScroll && !enoughSpaceFromBottomScroll) && (spaceAbove > desiredHeight || spaceAbove > spaceBelow) ? positionIfAbove : positionIfBelow;\n }\n\n if (preferredPosition === 'below') {\n return (enoughSpaceFromBottomScroll || distanceToBottomScroll >= distanceToTopScroll && !enoughSpaceFromTopScroll) && (spaceBelow > desiredHeight || spaceBelow > spaceAbove) ? positionIfBelow : positionIfAbove;\n }\n\n if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {\n return spaceAbove > spaceBelow ? positionIfAbove : positionIfBelow;\n }\n\n return distanceToTopScroll > minimumSpaceToScroll ? positionIfAbove : positionIfBelow;\n}\nfunction calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment) {\n const maximum = containerRect.width - overlayRect.width;\n\n if (preferredAlignment === 'left') {\n return Math.min(maximum, Math.max(0, activatorRect.left - overlayMargins.horizontal));\n } else if (preferredAlignment === 'right') {\n const activatorRight = containerRect.width - (activatorRect.left + activatorRect.width);\n return Math.min(maximum, Math.max(0, activatorRight - overlayMargins.horizontal));\n }\n\n return Math.min(maximum, Math.max(0, activatorRect.center.x - overlayRect.width / 2));\n}\nfunction rectIsOutsideOfRect(inner, outer) {\n const {\n center\n } = inner;\n return center.y < outer.top || center.y > outer.top + outer.height;\n}\nfunction intersectionWithViewport(rect, viewport = windowRect()) {\n const top = Math.max(rect.top, 0);\n const left = Math.max(rect.left, 0);\n const bottom = Math.min(rect.top + rect.height, viewport.height);\n const right = Math.min(rect.left + rect.width, viewport.width);\n return new Rect({\n top,\n left,\n height: bottom - top,\n width: right - left\n });\n}\nfunction windowRect() {\n return new Rect({\n top: window.scrollY,\n left: window.scrollX,\n height: window.innerHeight,\n width: document.body.clientWidth\n });\n}\n\nexport { calculateHorizontalPosition, calculateVerticalPosition, intersectionWithViewport, rectIsOutsideOfRect, windowRect };\n","var styles = {\n \"PositionedOverlay\": \"Polaris-PositionedOverlay\",\n \"fixed\": \"Polaris-PositionedOverlay--fixed\",\n \"calculating\": \"Polaris-PositionedOverlay--calculating\",\n \"preventInteraction\": \"Polaris-PositionedOverlay--preventInteraction\"\n};\n\nexport { styles as default };\n","import React, { PureComponent } from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport { getRectForNode, Rect } from '../../utilities/geometry.js';\nimport { dataPolarisTopBar, layer } from '../shared.js';\nimport { windowRect, calculateVerticalPosition, calculateHorizontalPosition, rectIsOutsideOfRect, intersectionWithViewport } from './utilities/math.js';\nimport styles from './PositionedOverlay.scss.js';\nimport { Scrollable } from '../Scrollable/Scrollable.js';\nimport { EventListener } from '../EventListener/EventListener.js';\n\nconst OBSERVER_CONFIG = {\n childList: true,\n subtree: true,\n characterData: true\n};\nclass PositionedOverlay extends PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n measuring: true,\n activatorRect: getRectForNode(this.props.activator),\n right: undefined,\n left: undefined,\n top: 0,\n height: 0,\n width: null,\n positioning: 'below',\n zIndex: null,\n outsideScrollableContainer: false,\n lockPosition: false\n };\n this.overlay = null;\n this.scrollableContainer = null;\n this.observer = void 0;\n\n this.overlayDetails = () => {\n const {\n measuring,\n left,\n right,\n positioning,\n height,\n activatorRect\n } = this.state;\n return {\n measuring,\n left,\n right,\n desiredHeight: height,\n positioning,\n activatorRect\n };\n };\n\n this.setOverlay = node => {\n this.overlay = node;\n };\n\n this.handleMeasurement = () => {\n const {\n lockPosition,\n top\n } = this.state;\n this.observer.disconnect();\n this.setState(({\n left,\n top,\n right\n }) => ({\n left,\n right,\n top,\n height: 0,\n positioning: 'below',\n measuring: true\n }), () => {\n if (this.overlay == null || this.scrollableContainer == null) {\n return;\n }\n\n const {\n activator,\n preferredPosition = 'below',\n preferredAlignment = 'center',\n onScrollOut,\n fullWidth,\n fixed,\n preferInputActivator = true\n } = this.props;\n const preferredActivator = preferInputActivator ? activator.querySelector('input') || activator : activator;\n const activatorRect = getRectForNode(preferredActivator);\n const currentOverlayRect = getRectForNode(this.overlay);\n const scrollableElement = isDocument(this.scrollableContainer) ? document.body : this.scrollableContainer;\n const scrollableContainerRect = getRectForNode(scrollableElement);\n const overlayRect = fullWidth ? new Rect({ ...currentOverlayRect,\n width: activatorRect.width\n }) : currentOverlayRect; // If `body` is 100% height, it still acts as though it were not constrained to that size. This adjusts for that.\n\n if (scrollableElement === document.body) {\n scrollableContainerRect.height = document.body.scrollHeight;\n }\n\n let topBarOffset = 0;\n const topBarElement = scrollableElement.querySelector(`${dataPolarisTopBar.selector}`);\n\n if (topBarElement) {\n topBarOffset = topBarElement.clientHeight;\n }\n\n const overlayMargins = this.overlay.firstElementChild && this.overlay.firstChild instanceof HTMLElement ? getMarginsForNode(this.overlay.firstElementChild) : {\n activator: 0,\n container: 0,\n horizontal: 0\n };\n const containerRect = windowRect();\n const zIndexForLayer = getZIndexForLayerFromNode(activator);\n const zIndex = zIndexForLayer == null ? zIndexForLayer : zIndexForLayer + 1;\n const verticalPosition = calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed, topBarOffset);\n const horizontalPosition = calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment);\n this.setState({\n measuring: false,\n activatorRect: getRectForNode(activator),\n left: preferredAlignment !== 'right' ? horizontalPosition : undefined,\n right: preferredAlignment === 'right' ? horizontalPosition : undefined,\n top: lockPosition ? top : verticalPosition.top,\n lockPosition: Boolean(fixed),\n height: verticalPosition.height || 0,\n width: fullWidth ? overlayRect.width : null,\n positioning: verticalPosition.positioning,\n outsideScrollableContainer: onScrollOut != null && rectIsOutsideOfRect(activatorRect, intersectionWithViewport(scrollableContainerRect)),\n zIndex\n }, () => {\n if (!this.overlay) return;\n this.observer.observe(this.overlay, OBSERVER_CONFIG);\n this.observer.observe(activator, OBSERVER_CONFIG);\n });\n });\n };\n\n this.observer = new MutationObserver(this.handleMeasurement);\n }\n\n componentDidMount() {\n this.scrollableContainer = Scrollable.forNode(this.props.activator);\n\n if (this.scrollableContainer && !this.props.fixed) {\n this.scrollableContainer.addEventListener('scroll', this.handleMeasurement);\n }\n\n this.handleMeasurement();\n }\n\n componentWillUnmount() {\n this.observer.disconnect();\n\n if (this.scrollableContainer && !this.props.fixed) {\n this.scrollableContainer.removeEventListener('scroll', this.handleMeasurement);\n }\n }\n\n componentDidUpdate() {\n const {\n outsideScrollableContainer,\n top\n } = this.state;\n const {\n onScrollOut,\n active\n } = this.props;\n\n if (active && onScrollOut != null && top !== 0 && outsideScrollableContainer) {\n onScrollOut();\n }\n }\n\n render() {\n const {\n left,\n right,\n top,\n zIndex,\n width\n } = this.state;\n const {\n render,\n fixed,\n preventInteraction,\n classNames: propClassNames,\n zIndexOverride\n } = this.props;\n const style = {\n top: top == null || isNaN(top) ? undefined : top,\n left: left == null || isNaN(left) ? undefined : left,\n right: right == null || isNaN(right) ? undefined : right,\n width: width == null || isNaN(width) ? undefined : width,\n zIndex: zIndexOverride || zIndex || undefined\n };\n const className = classNames(styles.PositionedOverlay, fixed && styles.fixed, preventInteraction && styles.preventInteraction, propClassNames);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n style: style,\n ref: this.setOverlay\n }, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: this.handleMeasurement\n }), render(this.overlayDetails()));\n }\n\n forceUpdatePosition() {\n // Wait a single animation frame before re-measuring.\n // Consumer's may also need to setup their own timers for\n // triggering forceUpdatePosition() `children` use animation.\n // Ideally, forceUpdatePosition() is fired at the end of a transition event.\n requestAnimationFrame(this.handleMeasurement);\n }\n\n}\n\nfunction getMarginsForNode(node) {\n const nodeStyles = window.getComputedStyle(node);\n return {\n activator: parseFloat(nodeStyles.marginTop || '0'),\n container: parseFloat(nodeStyles.marginBottom || '0'),\n horizontal: parseFloat(nodeStyles.marginLeft || '0')\n };\n}\n\nfunction getZIndexForLayerFromNode(node) {\n const layerNode = node.closest(layer.selector) || document.body;\n const zIndex = layerNode === document.body ? 'auto' : parseInt(window.getComputedStyle(layerNode).zIndex || '0', 10);\n return zIndex === 'auto' || isNaN(zIndex) ? null : zIndex;\n}\n\nfunction isDocument(node) {\n return node === document;\n}\n\nexport { PositionedOverlay };\n","import React, { Component, createRef } from 'react';\nimport { debounce } from '../../../../utilities/debounce.js';\nimport { classNames } from '../../../../utilities/css.js';\nimport { Key } from '../../../../types.js';\nimport sharedStyles from '../../RangeSlider.scss.js';\nimport styles from './DualThumb.scss.js';\nimport { Labelled } from '../../../Labelled/Labelled.js';\nimport { labelID } from '../../../Label/Label.js';\nimport { EventListener } from '../../../EventListener/EventListener.js';\nimport { FeaturesContext } from '../../../../utilities/features/context.js';\n\nvar Control;\n\n(function (Control) {\n Control[Control[\"Lower\"] = 0] = \"Lower\";\n Control[Control[\"Upper\"] = 1] = \"Upper\";\n})(Control || (Control = {}));\n\nclass DualThumb extends Component {\n constructor(...args) {\n super(...args);\n this.context = void 0;\n this.state = {\n value: sanitizeValue(this.props.value, this.props.min, this.props.max, this.props.step),\n trackWidth: 0,\n trackLeft: 0\n };\n this.track = /*#__PURE__*/createRef();\n this.trackWrapper = /*#__PURE__*/createRef();\n this.thumbLower = /*#__PURE__*/createRef();\n this.thumbUpper = /*#__PURE__*/createRef();\n this.setTrackPosition = debounce(() => {\n if (this.track.current) {\n const thumbSize = 16;\n const {\n width,\n left\n } = this.track.current.getBoundingClientRect();\n const adjustedTrackWidth = width - thumbSize;\n const adjustedTrackLeft = left + thumbSize / 2;\n const range = this.props.max - this.props.min;\n const minValuePosition = this.props.min / range * adjustedTrackWidth;\n this.setState({\n trackWidth: adjustedTrackWidth,\n trackLeft: adjustedTrackLeft - minValuePosition\n });\n }\n }, 40, {\n leading: true,\n trailing: true,\n maxWait: 40\n });\n\n this.handleMouseDownThumbLower = event => {\n if (event.button !== 0 || this.props.disabled) return;\n registerMouseMoveHandler(this.handleMouseMoveThumbLower);\n event.stopPropagation();\n };\n\n this.handleMouseMoveThumbLower = event => {\n const valueUpper = this.state.value[1];\n this.setValue([this.actualXPosition(event.clientX), valueUpper], Control.Upper);\n };\n\n this.handleTouchStartThumbLower = event => {\n if (this.props.disabled) return;\n registerTouchMoveHandler(this.handleTouchMoveThumbLower);\n event.stopPropagation();\n };\n\n this.handleTouchMoveThumbLower = event => {\n event.preventDefault();\n const valueUpper = this.state.value[1];\n this.setValue([this.actualXPosition(event.touches[0].clientX), valueUpper], Control.Upper);\n };\n\n this.handleMouseDownThumbUpper = event => {\n if (event.button !== 0 || this.props.disabled) return;\n registerMouseMoveHandler(this.handleMouseMoveThumbUpper);\n event.stopPropagation();\n };\n\n this.handleMouseMoveThumbUpper = event => {\n const valueLower = this.state.value[0];\n this.setValue([valueLower, this.actualXPosition(event.clientX)], Control.Lower);\n };\n\n this.handleTouchStartThumbUpper = event => {\n if (this.props.disabled) return;\n registerTouchMoveHandler(this.handleTouchMoveThumbUpper);\n event.stopPropagation();\n };\n\n this.handleTouchMoveThumbUpper = event => {\n event.preventDefault();\n const valueLower = this.state.value[0];\n this.setValue([valueLower, this.actualXPosition(event.touches[0].clientX)], Control.Lower);\n };\n\n this.handleKeypressLower = event => {\n if (this.props.disabled) return;\n const {\n incrementValueLower,\n decrementValueLower\n } = this;\n const handlerMap = {\n [Key.UpArrow]: incrementValueLower,\n [Key.RightArrow]: incrementValueLower,\n [Key.DownArrow]: decrementValueLower,\n [Key.LeftArrow]: decrementValueLower\n };\n const handler = handlerMap[event.keyCode];\n\n if (handler != null) {\n event.preventDefault();\n event.stopPropagation();\n handler();\n }\n };\n\n this.handleKeypressUpper = event => {\n if (this.props.disabled) return;\n const {\n incrementValueUpper,\n decrementValueUpper\n } = this;\n const handlerMap = {\n [Key.UpArrow]: incrementValueUpper,\n [Key.RightArrow]: incrementValueUpper,\n [Key.DownArrow]: decrementValueUpper,\n [Key.LeftArrow]: decrementValueUpper\n };\n const handler = handlerMap[event.keyCode];\n\n if (handler != null) {\n event.preventDefault();\n event.stopPropagation();\n handler();\n }\n };\n\n this.incrementValueLower = () => {\n this.setValue([this.state.value[0] + this.props.step, this.state.value[1]], Control.Upper);\n };\n\n this.decrementValueLower = () => {\n this.setValue([this.state.value[0] - this.props.step, this.state.value[1]], Control.Upper);\n };\n\n this.incrementValueUpper = () => {\n this.setValue([this.state.value[0], this.state.value[1] + this.props.step], Control.Lower);\n };\n\n this.decrementValueUpper = () => {\n this.setValue([this.state.value[0], this.state.value[1] - this.props.step], Control.Lower);\n };\n\n this.dispatchValue = () => {\n const {\n onChange,\n id\n } = this.props;\n const {\n value\n } = this.state;\n onChange(value, id);\n };\n\n this.setValue = (dirtyValue, control) => {\n const {\n props: {\n min,\n max,\n step\n },\n state: {\n value\n }\n } = this;\n const sanitizedValue = sanitizeValue(dirtyValue, min, max, step, control);\n\n if (isTupleEqual(sanitizedValue, value) === false) {\n this.setState({\n value: sanitizedValue\n }, this.dispatchValue);\n }\n };\n\n this.handleMouseDownTrack = event => {\n if (event.button !== 0 || this.props.disabled) return;\n event.preventDefault();\n const clickXPosition = this.actualXPosition(event.clientX);\n const {\n value\n } = this.state;\n const distanceFromLowerThumb = Math.abs(value[0] - clickXPosition);\n const distanceFromUpperThumb = Math.abs(value[1] - clickXPosition);\n\n if (distanceFromLowerThumb <= distanceFromUpperThumb) {\n this.setValue([clickXPosition, value[1]], Control.Upper);\n registerMouseMoveHandler(this.handleMouseMoveThumbLower);\n\n if (this.thumbLower.current != null) {\n this.thumbLower.current.focus();\n }\n } else {\n this.setValue([value[0], clickXPosition], Control.Lower);\n registerMouseMoveHandler(this.handleMouseMoveThumbUpper);\n\n if (this.thumbUpper.current != null) {\n this.thumbUpper.current.focus();\n }\n }\n };\n\n this.handleTouchStartTrack = event => {\n if (this.props.disabled) return;\n event.preventDefault();\n const clickXPosition = this.actualXPosition(event.touches[0].clientX);\n const {\n value\n } = this.state;\n const distanceFromLowerThumb = Math.abs(value[0] - clickXPosition);\n const distanceFromUpperThumb = Math.abs(value[1] - clickXPosition);\n\n if (distanceFromLowerThumb <= distanceFromUpperThumb) {\n this.setValue([clickXPosition, value[1]], Control.Upper);\n registerTouchMoveHandler(this.handleTouchMoveThumbLower);\n\n if (this.thumbLower.current != null) {\n this.thumbLower.current.focus();\n }\n } else {\n this.setValue([value[0], clickXPosition], Control.Lower);\n registerTouchMoveHandler(this.handleTouchMoveThumbUpper);\n\n if (this.thumbUpper.current != null) {\n this.thumbUpper.current.focus();\n }\n }\n };\n\n this.actualXPosition = dirtyXPosition => {\n if (this.track.current) {\n const {\n min,\n max\n } = this.props;\n const {\n trackLeft,\n trackWidth\n } = this.state;\n const relativeX = dirtyXPosition - trackLeft;\n const percentageOfTrack = relativeX / trackWidth;\n return percentageOfTrack * (max - min);\n } else {\n return 0;\n }\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n const {\n min,\n step,\n max,\n value,\n onChange,\n id\n } = props;\n const {\n prevValue\n } = state;\n\n if (isTupleEqual(prevValue, value)) {\n return null;\n }\n\n const sanitizedValue = sanitizeValue(value, min, max, step);\n\n if (!isTupleEqual(value, sanitizedValue)) {\n onChange(sanitizedValue, id);\n }\n\n return {\n prevValue: value,\n value: sanitizedValue\n };\n }\n\n componentDidMount() {\n this.setTrackPosition();\n\n if (this.trackWrapper.current != null) {\n this.trackWrapper.current.addEventListener('touchstart', this.handleTouchStartTrack, {\n passive: false\n });\n }\n }\n\n componentWillUnmount() {\n if (this.trackWrapper.current != null) {\n this.trackWrapper.current.removeEventListener('touchstart', this.handleTouchStartTrack);\n }\n }\n\n render() {\n const {\n id,\n min,\n max,\n prefix,\n suffix,\n disabled,\n output,\n error,\n onFocus,\n onBlur,\n label,\n labelAction,\n labelHidden,\n helpText\n } = this.props;\n const {\n value\n } = this.state;\n const idLower = id;\n const idUpper = `${id}Upper`;\n const describedBy = [];\n\n if (error) {\n describedBy.push(`${id}Error`);\n }\n\n const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;\n const trackWrapperClassName = classNames(styles.TrackWrapper, error && styles.error, disabled && styles.disabled);\n const thumbLowerClassName = classNames(styles.Thumbs, styles.ThumbLower, disabled && styles.disabled);\n const thumbUpperClassName = classNames(styles.Thumbs, styles.ThumbUpper, disabled && styles.disabled);\n const trackWidth = this.state.trackWidth;\n const range = max - min;\n const minValuePosition = min / range * trackWidth;\n const leftPositionThumbLower = value[0] / range * trackWidth - minValuePosition;\n const leftPositionThumbUpper = value[1] / range * trackWidth - minValuePosition;\n const outputLowerClassName = classNames(styles.Output, styles.OutputLower);\n const outputMarkupLower = !disabled && output ? /*#__PURE__*/React.createElement(\"output\", {\n htmlFor: idLower,\n className: outputLowerClassName,\n style: {\n left: `${leftPositionThumbLower}px`\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.OutputBubble\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.OutputText\n }, value[0]))) : null;\n const outputUpperClassName = classNames(styles.Output, styles.OutputUpper);\n const outputMarkupUpper = !disabled && output ? /*#__PURE__*/React.createElement(\"output\", {\n htmlFor: idUpper,\n className: outputUpperClassName,\n style: {\n left: `${leftPositionThumbUpper}px`\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.OutputBubble\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.OutputText\n }, value[1]))) : null;\n const cssVars = {\n '--pc-range-slider-progress-lower': `${leftPositionThumbLower}px`,\n '--pc-range-slider-progress-upper': `${leftPositionThumbUpper}px`\n };\n const prefixMarkup = prefix && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Prefix\n }, prefix);\n const suffixMarkup = suffix && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Suffix\n }, suffix);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Labelled, {\n id: id,\n label: label,\n error: error,\n action: labelAction,\n labelHidden: labelHidden,\n helpText: helpText\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.DualThumb, sharedStyles.RangeSlider)\n }, prefixMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: trackWrapperClassName,\n onMouseDown: this.handleMouseDownTrack,\n ref: this.trackWrapper\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Track,\n style: cssVars,\n ref: this.track\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: styles['Track--dashed']\n }), /*#__PURE__*/React.createElement(\"div\", {\n id: idLower,\n className: thumbLowerClassName,\n style: {\n left: `${leftPositionThumbLower}px`\n },\n role: \"slider\",\n \"aria-disabled\": disabled,\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": value[0],\n \"aria-invalid\": Boolean(error),\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": labelID(id),\n onFocus: onFocus,\n onBlur: onBlur,\n tabIndex: 0,\n onKeyDown: this.handleKeypressLower,\n onMouseDown: this.handleMouseDownThumbLower,\n onTouchStart: this.handleTouchStartThumbLower,\n ref: this.thumbLower\n }), outputMarkupLower, /*#__PURE__*/React.createElement(\"div\", {\n id: idUpper,\n className: thumbUpperClassName,\n style: {\n left: `${leftPositionThumbUpper}px`\n },\n role: \"slider\",\n \"aria-disabled\": disabled,\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": value[1],\n \"aria-invalid\": Boolean(error),\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": labelID(id),\n onFocus: onFocus,\n onBlur: onBlur,\n tabIndex: 0,\n onKeyDown: this.handleKeypressUpper,\n onMouseDown: this.handleMouseDownThumbUpper,\n onTouchStart: this.handleTouchStartThumbUpper,\n ref: this.thumbUpper\n }), outputMarkupUpper), suffixMarkup)), /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: this.setTrackPosition\n }));\n }\n\n}\nDualThumb.contextType = FeaturesContext;\n\nfunction registerMouseMoveHandler(handler) {\n document.addEventListener('mousemove', handler);\n document.addEventListener('mouseup', () => {\n document.removeEventListener('mousemove', handler);\n }, {\n once: true\n });\n}\n\nfunction registerTouchMoveHandler(handler) {\n const removeHandler = () => {\n document.removeEventListener('touchmove', handler);\n document.removeEventListener('touchend', removeHandler);\n document.removeEventListener('touchcancel', removeHandler);\n };\n\n document.addEventListener('touchmove', handler, {\n passive: false\n });\n document.addEventListener('touchend', removeHandler, {\n once: true\n });\n document.addEventListener('touchcancel', removeHandler, {\n once: true\n });\n}\n\nfunction sanitizeValue(value, min, max, step, control = Control.Upper) {\n let upperValue = inBoundsUpper(roundedToStep(value[1]));\n let lowerValue = inBoundsLower(roundedToStep(value[0]));\n const maxLowerValue = upperValue - step;\n const minUpperValue = lowerValue + step;\n\n if (control === Control.Upper && lowerValue > maxLowerValue) {\n lowerValue = maxLowerValue;\n } else if (control === Control.Lower && upperValue < minUpperValue) {\n upperValue = minUpperValue;\n }\n\n return [lowerValue, upperValue];\n\n function inBoundsUpper(value) {\n const lowerMin = min + step;\n\n if (value < lowerMin) {\n return lowerMin;\n } else if (value > max) {\n return max;\n } else {\n return value;\n }\n }\n\n function inBoundsLower(value) {\n const upperMax = max - step;\n\n if (value < min) {\n return min;\n } else if (value > upperMax) {\n return upperMax;\n } else {\n return value;\n }\n }\n\n function roundedToStep(value) {\n return Math.round(value / step) * step;\n }\n} // eslint-disable-next-line id-length\n\n\nfunction isTupleEqual(a, b) {\n if (a == null || b == null) {\n return false;\n }\n\n return a[0] === b[0] && a[1] === b[1];\n}\n\nexport { DualThumb };\n","var sharedStyles = {\n \"RangeSlider\": \"Polaris-RangeSlider\"\n};\n\nexport { sharedStyles as default };\n","var styles = {\n \"RangeSlider\": \"Polaris-RangeSlider-DualThumb__RangeSlider\",\n \"DualThumb\": \"Polaris-RangeSlider-DualThumb\",\n \"TrackWrapper\": \"Polaris-RangeSlider-DualThumb__TrackWrapper\",\n \"disabled\": \"Polaris-RangeSlider-DualThumb--disabled\",\n \"Track\": \"Polaris-RangeSlider-DualThumb__Track\",\n \"error\": \"Polaris-RangeSlider-DualThumb--error\",\n \"Track--dashed\": \"Polaris-RangeSlider-DualThumb--trackDashed\",\n \"Thumbs\": \"Polaris-RangeSlider-DualThumb__Thumbs\",\n \"Prefix\": \"Polaris-RangeSlider-DualThumb__Prefix\",\n \"Suffix\": \"Polaris-RangeSlider-DualThumb__Suffix\",\n \"Output\": \"Polaris-RangeSlider-DualThumb__Output\",\n \"OutputBubble\": \"Polaris-RangeSlider-DualThumb__OutputBubble\",\n \"OutputText\": \"Polaris-RangeSlider-DualThumb__OutputText\"\n};\n\nexport { styles as default };\n","var styles = {\n \"RangeSlider\": \"Polaris-RangeSlider-SingleThumb__RangeSlider\",\n \"SingleThumb\": \"Polaris-RangeSlider-SingleThumb\",\n \"disabled\": \"Polaris-RangeSlider-SingleThumb--disabled\",\n \"InputWrapper\": \"Polaris-RangeSlider-SingleThumb__InputWrapper\",\n \"Prefix\": \"Polaris-RangeSlider-SingleThumb__Prefix\",\n \"Suffix\": \"Polaris-RangeSlider-SingleThumb__Suffix\",\n \"Input\": \"Polaris-RangeSlider-SingleThumb__Input\",\n \"error\": \"Polaris-RangeSlider-SingleThumb--error\",\n \"Output\": \"Polaris-RangeSlider-SingleThumb__Output\",\n \"OutputBubble\": \"Polaris-RangeSlider-SingleThumb__OutputBubble\",\n \"OutputText\": \"Polaris-RangeSlider-SingleThumb__OutputText\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { clamp } from '../../../../utilities/clamp.js';\nimport sharedStyles from '../../RangeSlider.scss.js';\nimport styles from './SingleThumb.scss.js';\nimport { invertNumber } from '../../utilities/invertNumber.js';\nimport { Labelled, helpTextID } from '../../../Labelled/Labelled.js';\n\nfunction SingleThumb(props) {\n const {\n id,\n error,\n helpText,\n value,\n min,\n max,\n disabled,\n output,\n prefix,\n suffix,\n label,\n labelAction,\n labelHidden,\n step,\n onBlur,\n onFocus\n } = props;\n const clampedValue = clamp(value, min, max);\n const describedBy = [];\n\n if (error) {\n describedBy.push(`${id}Error`);\n }\n\n if (helpText) {\n describedBy.push(helpTextID(id));\n }\n\n const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;\n const sliderProgress = (clampedValue - min) * 100 / (max - min);\n const outputFactor = invertNumber((sliderProgress - 50) / 100);\n const cssVars = {\n '--pc-range-slider-min': min,\n '--pc-range-slider-max': max,\n '--pc-range-slider-current': clampedValue,\n '--pc-range-slider-progress': `${sliderProgress}%`,\n '--pc-range-slider-output-factor': `${outputFactor}`\n };\n const outputMarkup = !disabled && output && /*#__PURE__*/React.createElement(\"output\", {\n htmlFor: id,\n className: styles.Output\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.OutputBubble\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.OutputText\n }, clampedValue)));\n const prefixMarkup = prefix && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Prefix\n }, prefix);\n const suffixMarkup = suffix && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Suffix\n }, suffix);\n const className = classNames(styles.SingleThumb, sharedStyles.RangeSlider, error && styles.error, disabled && styles.disabled);\n /* eslint-disable @shopify/react-require-autocomplete */\n\n return /*#__PURE__*/React.createElement(Labelled, {\n id: id,\n label: label,\n error: error,\n action: labelAction,\n labelHidden: labelHidden,\n helpText: helpText\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n style: cssVars\n }, prefixMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.InputWrapper\n }, /*#__PURE__*/React.createElement(\"input\", {\n type: \"range\",\n className: styles.Input,\n id: id,\n name: id,\n min: min,\n max: max,\n step: step,\n value: clampedValue,\n disabled: disabled,\n onChange: handleChange,\n onFocus: onFocus,\n onBlur: onBlur,\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": clampedValue,\n \"aria-invalid\": Boolean(error),\n \"aria-describedby\": ariaDescribedBy\n }), outputMarkup), suffixMarkup));\n /* eslint-enable @shopify/react-require-autocomplete */\n\n function handleChange(event) {\n const {\n onChange\n } = props;\n onChange && onChange(parseFloat(event.currentTarget.value), id);\n }\n}\n\nexport { SingleThumb };\n","function invertNumber(number) {\n if (Math.sign(number) === 1) {\n return -Math.abs(number);\n } else if (Math.sign(number) === -1) {\n return Math.abs(number);\n } else {\n return 0;\n }\n}\n\nexport { invertNumber };\n","import React from 'react';\nimport { DualThumb } from './components/DualThumb/DualThumb.js';\nimport { SingleThumb } from './components/SingleThumb/SingleThumb.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\n\nfunction RangeSlider({\n min = 0,\n max = 100,\n step = 1,\n value,\n ...rest\n}) {\n const id = useUniqueId('RangeSlider');\n const sharedProps = {\n id,\n min,\n max,\n step,\n ...rest\n };\n return isDualThumb(value) ? /*#__PURE__*/React.createElement(DualThumb, Object.assign({\n value: value\n }, sharedProps)) : /*#__PURE__*/React.createElement(SingleThumb, Object.assign({\n value: value\n }, sharedProps));\n}\n\nfunction isDualThumb(value) {\n return Array.isArray(value);\n}\n\nexport { RangeSlider };\n","var styles = {\n \"CheckboxWrapper\": \"Polaris-ResourceItem__CheckboxWrapper\",\n \"ResourceItem\": \"Polaris-ResourceItem\",\n \"persistActions\": \"Polaris-ResourceItem--persistActions\",\n \"Actions\": \"Polaris-ResourceItem__Actions\",\n \"ItemWrapper\": \"Polaris-ResourceItem__ItemWrapper\",\n \"focusedInner\": \"Polaris-ResourceItem--focusedInner\",\n \"focused\": \"Polaris-ResourceItem--focused\",\n \"selected\": \"Polaris-ResourceItem--selected\",\n \"Link\": \"Polaris-ResourceItem__Link\",\n \"Button\": \"Polaris-ResourceItem__Button\",\n \"Container\": \"Polaris-ResourceItem__Container\",\n \"alignmentLeading\": \"Polaris-ResourceItem--alignmentLeading\",\n \"alignmentTrailing\": \"Polaris-ResourceItem--alignmentTrailing\",\n \"alignmentCenter\": \"Polaris-ResourceItem--alignmentCenter\",\n \"alignmentFill\": \"Polaris-ResourceItem--alignmentFill\",\n \"alignmentBaseline\": \"Polaris-ResourceItem--alignmentBaseline\",\n \"Owned\": \"Polaris-ResourceItem__Owned\",\n \"OwnedNoMedia\": \"Polaris-ResourceItem__OwnedNoMedia\",\n \"Handle\": \"Polaris-ResourceItem__Handle\",\n \"selectMode\": \"Polaris-ResourceItem--selectMode\",\n \"selectable\": \"Polaris-ResourceItem--selectable\",\n \"Media\": \"Polaris-ResourceItem__Media\",\n \"Content\": \"Polaris-ResourceItem__Content\",\n \"Disclosure\": \"Polaris-ResourceItem__Disclosure\",\n \"ListItem\": \"Polaris-ResourceItem__ListItem\"\n};\n\nexport { styles as default };\n","import React, { useContext, Component, createRef } from 'react';\nimport { HorizontalDotsMinor } from '@shopify/polaris-icons';\nimport isEqual from 'react-fast-compare';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport styles from './ResourceItem.scss.js';\nimport { SELECT_ALL_ITEMS } from '../../utilities/resource-list/types.js';\nimport { ResourceListContext } from '../../utilities/resource-list/context.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { Checkbox } from '../Checkbox/Checkbox.js';\nimport { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';\nimport { buttonsFrom } from '../Button/utils.js';\nimport { Popover } from '../Popover/Popover.js';\nimport { Button } from '../Button/Button.js';\nimport { ActionList } from '../ActionList/ActionList.js';\nimport { UnstyledLink } from '../UnstyledLink/UnstyledLink.js';\nimport { globalIdGeneratorFactory } from '../../utilities/unique-id/unique-id-factory.js';\n\nconst getUniqueCheckboxID = globalIdGeneratorFactory('ResourceListItemCheckbox');\nconst getUniqueOverlayID = globalIdGeneratorFactory('ResourceListItemOverlay');\n\nclass BaseResourceItem extends Component {\n constructor(...args) {\n super(...args);\n this.state = {\n actionsMenuVisible: false,\n focused: false,\n focusedInner: false,\n selected: isSelected(this.props.id, this.props.context.selectedItems)\n };\n this.node = null;\n this.checkboxId = getUniqueCheckboxID();\n this.overlayId = getUniqueOverlayID();\n this.buttonOverlay = /*#__PURE__*/createRef();\n\n this.setNode = node => {\n this.node = node;\n };\n\n this.handleFocus = event => {\n if (event.target === this.buttonOverlay.current || this.node && event.target === this.node.querySelector(`#${this.overlayId}`)) {\n this.setState({\n focused: true,\n focusedInner: false\n });\n } else if (this.node && this.node.contains(event.target)) {\n this.setState({\n focused: true,\n focusedInner: true\n });\n }\n };\n\n this.handleBlur = ({\n relatedTarget\n }) => {\n if (this.node && relatedTarget instanceof Element && this.node.contains(relatedTarget)) {\n return;\n }\n\n this.setState({\n focused: false,\n focusedInner: false\n });\n };\n\n this.handleMouseOut = () => {\n this.state.focused && this.setState({\n focused: false,\n focusedInner: false\n });\n };\n\n this.handleLargerSelectionArea = event => {\n stopPropagation(event);\n this.handleSelection(!this.state.selected, event.nativeEvent.shiftKey);\n };\n\n this.handleSelection = (value, shiftKey) => {\n const {\n id,\n sortOrder,\n context: {\n onSelectionChange\n }\n } = this.props;\n\n if (id == null || onSelectionChange == null) {\n return;\n }\n\n this.setState({\n focused: value,\n focusedInner: value\n });\n onSelectionChange(value, id, sortOrder, shiftKey);\n };\n\n this.handleClick = event => {\n stopPropagation(event);\n const {\n id,\n onClick,\n url,\n context: {\n selectMode\n }\n } = this.props;\n const {\n ctrlKey,\n metaKey\n } = event.nativeEvent;\n const anchor = this.node && this.node.querySelector('a');\n\n if (selectMode) {\n this.handleLargerSelectionArea(event);\n return;\n }\n\n if (anchor === event.target) {\n return;\n }\n\n if (onClick) {\n onClick(id);\n }\n\n if (url && (ctrlKey || metaKey)) {\n window.open(url, '_blank');\n return;\n }\n\n if (url && anchor) {\n anchor.click();\n }\n };\n\n this.handleKeyUp = event => {\n const {\n onClick = noop,\n context: {\n selectMode\n }\n } = this.props;\n const {\n key\n } = event;\n\n if (key === 'Enter' && this.props.url && !selectMode) {\n onClick();\n }\n };\n\n this.handleActionsClick = () => {\n this.setState(({\n actionsMenuVisible\n }) => ({\n actionsMenuVisible: !actionsMenuVisible\n }));\n };\n\n this.handleCloseRequest = () => {\n this.setState({\n actionsMenuVisible: false\n });\n };\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const selected = isSelected(nextProps.id, nextProps.context.selectedItems);\n\n if (prevState.selected === selected) {\n return null;\n }\n\n return {\n selected\n };\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n const {\n children: nextChildren,\n context: {\n selectedItems: nextSelectedItems,\n ...restNextContext\n },\n ...restNextProps\n } = nextProps;\n const {\n children,\n context: {\n selectedItems,\n ...restContext\n },\n ...restProps\n } = this.props;\n const nextSelectMode = nextProps.context.selectMode;\n return !isEqual(this.state, nextState) || this.props.context.selectMode !== nextSelectMode || !nextProps.context.selectMode && (!isEqual(restProps, restNextProps) || !isEqual(restContext, restNextContext));\n }\n\n render() {\n const {\n children,\n url,\n external,\n media,\n shortcutActions,\n ariaControls,\n ariaExpanded,\n persistActions = false,\n accessibilityLabel,\n name,\n context: {\n selectable,\n selectMode,\n loading,\n resourceName\n },\n i18n,\n verticalAlignment,\n dataHref\n } = this.props;\n const {\n actionsMenuVisible,\n focused,\n focusedInner,\n selected\n } = this.state;\n let ownedMarkup = null;\n let handleMarkup = null;\n const mediaMarkup = media ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Media\n }, media) : null;\n\n if (selectable) {\n const checkboxAccessibilityLabel = name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');\n handleMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Handle,\n onClick: this.handleLargerSelectionArea\n }, /*#__PURE__*/React.createElement(\"div\", {\n onClick: stopPropagation,\n className: styles.CheckboxWrapper\n }, /*#__PURE__*/React.createElement(\"div\", {\n onChange: this.handleLargerSelectionArea\n }, /*#__PURE__*/React.createElement(Checkbox, {\n id: this.checkboxId,\n label: checkboxAccessibilityLabel,\n labelHidden: true,\n checked: selected,\n disabled: loading\n }))));\n }\n\n if (media || selectable) {\n ownedMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.Owned, !mediaMarkup && styles.OwnedNoMedia)\n }, handleMarkup, mediaMarkup);\n }\n\n const className = classNames(styles.ResourceItem, focused && styles.focused, selectable && styles.selectable, selected && styles.selected, selectMode && styles.selectMode, persistActions && styles.persistActions, focusedInner && styles.focusedInner);\n const listItemClassName = classNames(styles.ListItem, focused && !focusedInner && styles.focused);\n let actionsMarkup = null;\n let disclosureMarkup = null;\n\n if (shortcutActions && !loading) {\n if (persistActions) {\n actionsMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Actions,\n onClick: stopPropagation\n }, /*#__PURE__*/React.createElement(ButtonGroup, null, buttonsFrom(shortcutActions, {\n plain: true\n })));\n const disclosureAccessibilityLabel = name ? i18n.translate('Polaris.ResourceList.Item.actionsDropdownLabel', {\n accessibilityLabel: name\n }) : i18n.translate('Polaris.ResourceList.Item.actionsDropdown');\n disclosureMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Disclosure,\n onClick: stopPropagation\n }, /*#__PURE__*/React.createElement(Popover, {\n activator: /*#__PURE__*/React.createElement(Button, {\n accessibilityLabel: disclosureAccessibilityLabel,\n onClick: this.handleActionsClick,\n plain: true,\n icon: HorizontalDotsMinor\n }),\n onClose: this.handleCloseRequest,\n active: actionsMenuVisible\n }, /*#__PURE__*/React.createElement(ActionList, {\n items: shortcutActions\n })));\n } else {\n actionsMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Actions,\n onClick: stopPropagation\n }, /*#__PURE__*/React.createElement(ButtonGroup, {\n segmented: true\n }, buttonsFrom(shortcutActions, {\n size: 'slim'\n })));\n }\n }\n\n const content = children ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Content\n }, children) : null;\n const containerClassName = classNames(styles.Container, verticalAlignment && styles[variationName('alignment', verticalAlignment)]);\n const containerMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: containerClassName,\n id: this.props.id\n }, ownedMarkup, content, actionsMarkup, disclosureMarkup);\n const tabIndex = loading ? -1 : 0;\n const ariaLabel = accessibilityLabel || i18n.translate('Polaris.ResourceList.Item.viewItem', {\n itemName: name || resourceName && resourceName.singular || ''\n });\n const accessibleMarkup = url ? /*#__PURE__*/React.createElement(UnstyledLink, {\n \"aria-describedby\": this.props.id,\n \"aria-label\": ariaLabel,\n className: styles.Link,\n url: url,\n external: external,\n tabIndex: tabIndex,\n id: this.overlayId\n }) : /*#__PURE__*/React.createElement(\"button\", {\n className: styles.Button,\n \"aria-label\": ariaLabel,\n \"aria-controls\": ariaControls,\n \"aria-expanded\": ariaExpanded,\n onClick: this.handleClick,\n tabIndex: tabIndex,\n ref: this.buttonOverlay\n });\n return /*#__PURE__*/React.createElement(\"li\", {\n className: listItemClassName,\n \"data-href\": dataHref\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ItemWrapper\n }, /*#__PURE__*/React.createElement(\"div\", {\n ref: this.setNode,\n className: className,\n onClick: this.handleClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyUp: this.handleKeyUp,\n onMouseOut: this.handleMouseOut,\n \"data-href\": url\n }, accessibleMarkup, containerMarkup)));\n }\n\n}\n\nfunction noop() {}\n\nfunction stopPropagation(event) {\n event.stopPropagation();\n}\n\nfunction isSelected(id, selectedItems) {\n return Boolean(selectedItems && (Array.isArray(selectedItems) && selectedItems.includes(id) || selectedItems === SELECT_ALL_ITEMS));\n}\n\nfunction ResourceItem(props) {\n return /*#__PURE__*/React.createElement(BaseResourceItem, Object.assign({}, props, {\n context: useContext(ResourceListContext),\n i18n: useI18n()\n }));\n}\n\nexport { ResourceItem };\n","import React from 'react';\n\nvar SvgEnableSelectionMinor = function SvgEnableSelectionMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M4.5 3a1.5 1.5 0 0 0-1.5 1.5v11a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-11a1.5 1.5 0 0 0-1.5-1.5h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414l-3.293 3.293-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z\"\n }));\n};\n\nexport { SvgEnableSelectionMinor as S };\n","import { useRef } from 'react';\n\nconst UNIQUE_IDENTIFIER = Symbol('unique_identifier');\n/**\n * useLazyRef provides a lazy initial value, similar to lazy\n * initial state the initialValue is the value used during\n * initialization and disregarded after that. Use this hook\n * for expensive initialization.\n * @param initialValue - A function that will return the initial\n * value and be disregarded after that\n * @returns MutableRefObject - Returns a ref object with the\n * results from invoking initial value\n * @example\n * function ComponentExample() {\n * const title = useLazyRef(() => someExpensiveComputation());\n * return {title.current}
;\n * }\n */\n\nfunction useLazyRef(initialValue) {\n const lazyRef = useRef(UNIQUE_IDENTIFIER);\n\n if (lazyRef.current === UNIQUE_IDENTIFIER) {\n lazyRef.current = initialValue();\n }\n\n return lazyRef;\n}\n\nexport { useLazyRef };\n","var styles = {\n \"FiltersWrapper\": \"Polaris-ResourceList__FiltersWrapper\",\n \"ResourceList\": \"Polaris-ResourceList\",\n \"HeaderOuterWrapper\": \"Polaris-ResourceList__HeaderOuterWrapper\",\n \"HeaderWrapper-disabled\": \"Polaris-ResourceList__HeaderWrapper--disabled\",\n \"HeaderWrapper-overlay\": \"Polaris-ResourceList__HeaderWrapper--overlay\",\n \"HeaderWrapper\": \"Polaris-ResourceList__HeaderWrapper\",\n \"HeaderWrapper-isSticky\": \"Polaris-ResourceList__HeaderWrapper--isSticky\",\n \"HeaderContentWrapper\": \"Polaris-ResourceList__HeaderContentWrapper\",\n \"HeaderWrapper-inSelectMode\": \"Polaris-ResourceList__HeaderWrapper--inSelectMode\",\n \"SortWrapper\": \"Polaris-ResourceList__SortWrapper\",\n \"AlternateToolWrapper\": \"Polaris-ResourceList__AlternateToolWrapper\",\n \"HeaderWrapper-hasSelect\": \"Polaris-ResourceList__HeaderWrapper--hasSelect\",\n \"HeaderWrapper-hasAlternateTool\": \"Polaris-ResourceList__HeaderWrapper--hasAlternateTool\",\n \"HeaderWrapper-hasSort\": \"Polaris-ResourceList__HeaderWrapper--hasSort\",\n \"HeaderTitleWrapper\": \"Polaris-ResourceList__HeaderTitleWrapper\",\n \"BulkActionsWrapper\": \"Polaris-ResourceList__BulkActionsWrapper\",\n \"CheckableButtonWrapper\": \"Polaris-ResourceList__CheckableButtonWrapper\",\n \"SelectButtonWrapper\": \"Polaris-ResourceList__SelectButtonWrapper\",\n \"EmptySearchResultWrapper\": \"Polaris-ResourceList__EmptySearchResultWrapper\",\n \"ResourceListWrapper\": \"Polaris-ResourceList__ResourceListWrapper\",\n \"ItemWrapper\": \"Polaris-ResourceList__ItemWrapper\",\n \"ItemWrapper-isLoading\": \"Polaris-ResourceList__ItemWrapper--isLoading\",\n \"SpinnerContainer\": \"Polaris-ResourceList__SpinnerContainer\",\n \"LoadingOverlay\": \"Polaris-ResourceList__LoadingOverlay\",\n \"DisabledPointerEvents\": \"Polaris-ResourceList__DisabledPointerEvents\",\n \"disableTextSelection\": \"Polaris-ResourceList--disableTextSelection\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Group\": \"Polaris-BulkActions__Group\",\n \"Group-measuring\": \"Polaris-BulkActions__Group--measuring\",\n \"Group-entering\": \"Polaris-BulkActions__Group--entering\",\n \"Group-exiting\": \"Polaris-BulkActions__Group--exiting\",\n \"Group-entered\": \"Polaris-BulkActions__Group--entered\",\n \"Group-exited\": \"Polaris-BulkActions__Group--exited\",\n \"Group-smallScreen\": \"Polaris-BulkActions__Group--smallScreen\",\n \"Group-largeScreen\": \"Polaris-BulkActions__Group--largeScreen\",\n \"ButtonGroupWrapper\": \"Polaris-BulkActions__ButtonGroupWrapper\",\n \"BulkActionButton\": \"Polaris-BulkActions__BulkActionButton\",\n \"CheckableContainer\": \"Polaris-BulkActions__CheckableContainer\",\n \"disabled\": \"Polaris-BulkActions--disabled\",\n \"PaginatedSelectAll\": \"Polaris-BulkActions__PaginatedSelectAll\",\n \"Slide\": \"Polaris-BulkActions__Slide\",\n \"Slide-appear\": \"Polaris-BulkActions__Slide--appear\",\n \"Slide-enter\": \"Polaris-BulkActions__Slide--enter\",\n \"Slide-exit\": \"Polaris-BulkActions__Slide--exit\",\n \"Slide-appearing\": \"Polaris-BulkActions__Slide--appearing\",\n \"Slide-entering\": \"Polaris-BulkActions__Slide--entering\"\n};\n\nexport { styles as default };\n","import React, { useRef } from 'react';\nimport { useComponentDidMount } from '../../../../utilities/use-component-did-mount.js';\nimport styles from '../../BulkActions.scss.js';\nimport { Indicator } from '../../../Indicator/Indicator.js';\nimport { Button } from '../../../Button/Button.js';\n\nfunction BulkActionButton({\n handleMeasurement,\n url,\n external,\n onAction,\n content,\n disclosure,\n accessibilityLabel,\n disabled,\n indicator\n}) {\n const bulkActionButton = useRef(null);\n useComponentDidMount(() => {\n if (handleMeasurement && bulkActionButton.current) {\n const width = bulkActionButton.current.getBoundingClientRect().width;\n handleMeasurement(width);\n }\n });\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.BulkActionButton,\n ref: bulkActionButton\n }, /*#__PURE__*/React.createElement(Button, {\n external: external,\n url: url,\n \"aria-label\": accessibilityLabel,\n onClick: onAction,\n disabled: disabled,\n disclosure: disclosure\n }, content), indicator && /*#__PURE__*/React.createElement(Indicator, null));\n}\n\nexport { BulkActionButton };\n","import React from 'react';\nimport { useToggle } from '../../../../utilities/use-toggle.js';\nimport { BulkActionButton } from '../BulkActionButton/BulkActionButton.js';\nimport { Popover } from '../../../Popover/Popover.js';\nimport { ActionList } from '../../../ActionList/ActionList.js';\n\nfunction BulkActionMenu({\n title,\n actions,\n isNewBadgeInBadgeActions\n}) {\n const {\n value: isVisible,\n toggle: toggleMenuVisibility\n } = useToggle(false);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {\n active: isVisible,\n activator: /*#__PURE__*/React.createElement(BulkActionButton, {\n disclosure: true,\n onAction: toggleMenuVisibility,\n content: title,\n indicator: isNewBadgeInBadgeActions\n }),\n onClose: toggleMenuVisibility,\n preferInputActivator: true\n }, /*#__PURE__*/React.createElement(ActionList, {\n items: actions,\n onActionAnyItem: toggleMenuVisibility\n })));\n}\n\nexport { BulkActionMenu };\n","var styles = {\n \"CheckableButton\": \"Polaris-CheckableButton\",\n \"CheckableButton-measuring\": \"Polaris-CheckableButton__CheckableButton--measuring\",\n \"CheckableButton-plain\": \"Polaris-CheckableButton__CheckableButton--plain\",\n \"CheckableButton-selectMode\": \"Polaris-CheckableButton__CheckableButton--selectMode\",\n \"CheckableButton-selected\": \"Polaris-CheckableButton__CheckableButton--selected\",\n \"Checkbox\": \"Polaris-CheckableButton__Checkbox\",\n \"Label\": \"Polaris-CheckableButton__Label\"\n};\n\nexport { styles as default };\n","import React, { useRef, useContext, useEffect } from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './CheckableButton.scss.js';\nimport { ResourceListContext } from '../../utilities/resource-list/context.js';\nimport { Checkbox } from '../Checkbox/Checkbox.js';\n\nfunction CheckableButton({\n accessibilityLabel,\n label = '',\n onToggleAll,\n selected,\n selectMode,\n plain,\n measuring,\n disabled,\n smallScreen\n}) {\n const checkBoxRef = useRef(null);\n const {\n registerCheckableButtons\n } = useContext(ResourceListContext);\n let currentKey = 'bulkLg';\n\n if (plain) {\n currentKey = 'plain';\n } else if (smallScreen) {\n currentKey = 'bulkSm';\n }\n\n useEffect(() => {\n if (checkBoxRef.current && registerCheckableButtons) {\n registerCheckableButtons(currentKey, checkBoxRef.current);\n }\n }, [currentKey, registerCheckableButtons]);\n const className = plain ? classNames(styles.CheckableButton, styles['CheckableButton-plain']) : classNames(styles.CheckableButton, selectMode && styles['CheckableButton-selectMode'], selected && styles['CheckableButton-selected'], measuring && styles['CheckableButton-measuring']);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n onClick: onToggleAll\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Checkbox\n }, /*#__PURE__*/React.createElement(Checkbox, {\n label: accessibilityLabel,\n labelHidden: true,\n checked: selected,\n disabled: disabled,\n onChange: onToggleAll,\n ref: checkBoxRef\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Label\n }, label));\n}\n\nexport { CheckableButton };\n","import React, { PureComponent, createRef } from 'react';\nimport { Transition, CSSTransition } from 'react-transition-group';\nimport { tokens } from '@shopify/polaris-tokens';\nimport { debounce } from '../../utilities/debounce.js';\nimport { classNames } from '../../utilities/css.js';\nimport { clamp } from '../../utilities/clamp.js';\nimport styles from './BulkActions.scss.js';\nimport { BulkActionMenu } from './components/BulkActionMenu/BulkActionMenu.js';\nimport { CheckableButton } from '../CheckableButton/CheckableButton.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { Button } from '../Button/Button.js';\nimport { Popover } from '../Popover/Popover.js';\nimport { BulkActionButton } from './components/BulkActionButton/BulkActionButton.js';\nimport { ActionList } from '../ActionList/ActionList.js';\nimport { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';\nimport { EventListener } from '../EventListener/EventListener.js';\n\nconst MAX_PROMOTED_ACTIONS = 2;\nconst slideClasses = {\n appear: classNames(styles.Slide, styles['Slide-appear']),\n appearActive: classNames(styles.Slide, styles['Slide-appearing']),\n enter: classNames(styles.Slide, styles['Slide-enter']),\n enterActive: classNames(styles.Slide, styles['Slide-entering']),\n exit: classNames(styles.Slide, styles['Slide-exit'])\n};\n\nclass BulkActionsInner extends PureComponent {\n constructor(...args) {\n super(...args);\n this.state = {\n smallScreenPopoverVisible: false,\n largeScreenPopoverVisible: false,\n containerWidth: 0,\n measuring: true\n };\n this.containerNode = null;\n this.largeScreenButtonsNode = null;\n this.moreActionsNode = null;\n this.checkableWrapperNode = /*#__PURE__*/createRef();\n this.largeScreenGroupNode = /*#__PURE__*/createRef();\n this.smallScreenGroupNode = /*#__PURE__*/createRef();\n this.promotedActionsWidths = [];\n this.bulkActionsWidth = 0;\n this.addedMoreActionsWidthForMeasuring = 0;\n this.handleResize = debounce(() => {\n const {\n smallScreenPopoverVisible,\n largeScreenPopoverVisible\n } = this.state;\n\n if (this.containerNode) {\n const containerWidth = this.containerNode.getBoundingClientRect().width;\n\n if (containerWidth > 0) {\n this.setState({\n containerWidth\n });\n }\n }\n\n if (smallScreenPopoverVisible || largeScreenPopoverVisible) {\n this.setState({\n smallScreenPopoverVisible: false,\n largeScreenPopoverVisible: false\n });\n }\n }, 50, {\n trailing: true\n });\n\n this.setLargeScreenButtonsNode = node => {\n this.largeScreenButtonsNode = node;\n };\n\n this.setContainerNode = node => {\n this.containerNode = node;\n };\n\n this.setMoreActionsNode = node => {\n this.moreActionsNode = node;\n };\n\n this.setSelectMode = val => {\n const {\n onSelectModeToggle\n } = this.props;\n\n if (onSelectModeToggle) {\n onSelectModeToggle(val);\n }\n };\n\n this.toggleSmallScreenPopover = () => {\n if (this.props.onMoreActionPopoverToggle) {\n this.props.onMoreActionPopoverToggle(this.state.smallScreenPopoverVisible);\n }\n\n this.setState(({\n smallScreenPopoverVisible\n }) => ({\n smallScreenPopoverVisible: !smallScreenPopoverVisible\n }));\n };\n\n this.toggleLargeScreenPopover = () => {\n if (this.props.onMoreActionPopoverToggle) {\n this.props.onMoreActionPopoverToggle(this.state.largeScreenPopoverVisible);\n }\n\n this.setState(({\n largeScreenPopoverVisible\n }) => ({\n largeScreenPopoverVisible: !largeScreenPopoverVisible\n }));\n };\n\n this.handleMeasurement = width => {\n const {\n measuring\n } = this.state;\n\n if (measuring) {\n this.promotedActionsWidths.push(width);\n }\n };\n }\n\n numberOfPromotedActionsToRender() {\n const {\n promotedActions\n } = this.props;\n const {\n containerWidth,\n measuring\n } = this.state;\n\n if (!promotedActions) {\n return 0;\n }\n\n if (containerWidth >= this.bulkActionsWidth || measuring) {\n return promotedActions.length;\n }\n\n let sufficientSpace = false;\n let counter = promotedActions.length - 1;\n let totalWidth = 0;\n\n while (!sufficientSpace && counter >= 0) {\n totalWidth += this.promotedActionsWidths[counter];\n const widthWithRemovedAction = this.bulkActionsWidth - totalWidth + this.addedMoreActionsWidthForMeasuring;\n\n if (containerWidth >= widthWithRemovedAction) {\n sufficientSpace = true;\n } else {\n counter--;\n }\n }\n\n return clamp(counter, 0, promotedActions.length);\n }\n\n hasActions() {\n const {\n promotedActions,\n actions\n } = this.props;\n return Boolean(promotedActions && promotedActions.length > 0 || actions && actions.length > 0);\n }\n\n actionSections() {\n const {\n actions\n } = this.props;\n\n if (!actions || actions.length === 0) {\n return;\n }\n\n if (instanceOfBulkActionListSectionArray(actions)) {\n return actions;\n }\n\n if (instanceOfBulkActionArray(actions)) {\n return [{\n items: actions\n }];\n }\n }\n\n rolledInPromotedActions() {\n const {\n promotedActions\n } = this.props;\n const numberOfPromotedActionsToRender = this.numberOfPromotedActionsToRender();\n\n if (!promotedActions || promotedActions.length === 0 || numberOfPromotedActionsToRender >= promotedActions.length) {\n return [];\n }\n\n const rolledInPromotedActions = promotedActions.map(action => {\n if (instanceOfMenuGroupDescriptor(action)) {\n return {\n items: [...action.actions]\n };\n }\n\n return {\n items: [action]\n };\n });\n return rolledInPromotedActions.slice(numberOfPromotedActionsToRender);\n } // eslint-disable-next-line @typescript-eslint/member-ordering\n\n\n componentDidMount() {\n const {\n actions,\n promotedActions\n } = this.props;\n\n if (promotedActions && !actions && this.moreActionsNode) {\n this.addedMoreActionsWidthForMeasuring = this.moreActionsNode.getBoundingClientRect().width;\n }\n\n this.bulkActionsWidth = this.largeScreenButtonsNode ? this.largeScreenButtonsNode.getBoundingClientRect().width - this.addedMoreActionsWidthForMeasuring : 0;\n\n if (this.containerNode) {\n this.setState({\n containerWidth: this.containerNode.getBoundingClientRect().width,\n measuring: false\n });\n }\n } // eslint-disable-next-line @typescript-eslint/member-ordering\n\n\n render() {\n const {\n selectMode,\n accessibilityLabel,\n label = '',\n onToggleAll,\n selected,\n smallScreen,\n disabled,\n promotedActions,\n paginatedSelectAllText = null,\n paginatedSelectAllAction,\n i18n\n } = this.props;\n const actionSections = this.actionSections();\n\n if (promotedActions && promotedActions.length > MAX_PROMOTED_ACTIONS && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(i18n.translate('Polaris.ResourceList.BulkActions.warningMessage', {\n maxPromotedActions: MAX_PROMOTED_ACTIONS\n }));\n }\n\n const {\n smallScreenPopoverVisible,\n largeScreenPopoverVisible,\n measuring\n } = this.state;\n const paginatedSelectAllActionMarkup = paginatedSelectAllAction ? /*#__PURE__*/React.createElement(Button, {\n onClick: paginatedSelectAllAction.onAction,\n plain: true,\n disabled: disabled\n }, paginatedSelectAllAction.content) : null;\n const paginatedSelectAllTextMarkup = paginatedSelectAllText && paginatedSelectAllAction ? /*#__PURE__*/React.createElement(\"span\", {\n \"aria-live\": \"polite\"\n }, paginatedSelectAllText) : paginatedSelectAllText;\n const paginatedSelectAllMarkup = paginatedSelectAllActionMarkup || paginatedSelectAllTextMarkup ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.PaginatedSelectAll\n }, paginatedSelectAllTextMarkup, \" \", paginatedSelectAllActionMarkup) : null;\n const cancelButton = /*#__PURE__*/React.createElement(Button, {\n onClick: this.setSelectMode.bind(this, false),\n disabled: disabled\n }, i18n.translate('Polaris.Common.cancel'));\n const numberOfPromotedActionsToRender = this.numberOfPromotedActionsToRender();\n const allActionsPopover = this.hasActions() ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Popover,\n ref: this.setMoreActionsNode\n }, /*#__PURE__*/React.createElement(Popover, {\n active: smallScreenPopoverVisible,\n activator: /*#__PURE__*/React.createElement(BulkActionButton, {\n disclosure: true,\n onAction: this.toggleSmallScreenPopover,\n content: i18n.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel'),\n disabled: disabled,\n indicator: this.isNewBadgeInBadgeActions()\n }),\n onClose: this.toggleSmallScreenPopover\n }, /*#__PURE__*/React.createElement(ActionList, {\n items: promotedActions,\n sections: actionSections,\n onActionAnyItem: this.toggleSmallScreenPopover\n }))) : null;\n const promotedActionsMarkup = promotedActions && numberOfPromotedActionsToRender > 0 ? [...promotedActions].slice(0, numberOfPromotedActionsToRender).map((action, index) => {\n if (instanceOfMenuGroupDescriptor(action)) {\n return /*#__PURE__*/React.createElement(BulkActionMenu, Object.assign({\n key: index\n }, action, {\n isNewBadgeInBadgeActions: this.isNewBadgeInBadgeActions()\n }));\n }\n\n return /*#__PURE__*/React.createElement(BulkActionButton, Object.assign({\n key: index,\n disabled: disabled\n }, action, {\n handleMeasurement: this.handleMeasurement\n }));\n }) : null;\n const rolledInPromotedActions = this.rolledInPromotedActions();\n const activatorLabel = !promotedActions || promotedActions && numberOfPromotedActionsToRender === 0 && !measuring ? i18n.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel') : i18n.translate('Polaris.ResourceList.BulkActions.moreActionsActivatorLabel');\n let combinedActions = [];\n\n if (actionSections && rolledInPromotedActions.length > 0) {\n combinedActions = [...rolledInPromotedActions, ...actionSections];\n } else if (actionSections) {\n combinedActions = actionSections;\n } else if (rolledInPromotedActions.length > 0) {\n combinedActions = [...rolledInPromotedActions];\n }\n\n const actionsPopover = actionSections || rolledInPromotedActions.length > 0 || measuring ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Popover,\n ref: this.setMoreActionsNode\n }, /*#__PURE__*/React.createElement(Popover, {\n active: largeScreenPopoverVisible,\n activator: /*#__PURE__*/React.createElement(BulkActionButton, {\n disclosure: true,\n onAction: this.toggleLargeScreenPopover,\n content: activatorLabel,\n disabled: disabled,\n indicator: this.isNewBadgeInBadgeActions()\n }),\n onClose: this.toggleLargeScreenPopover\n }, /*#__PURE__*/React.createElement(ActionList, {\n sections: combinedActions,\n onActionAnyItem: this.toggleLargeScreenPopover\n }))) : null;\n const checkableButtonProps = {\n accessibilityLabel,\n label,\n selected,\n selectMode,\n onToggleAll,\n measuring,\n disabled\n };\n const smallScreenGroup = smallScreen ? /*#__PURE__*/React.createElement(Transition, {\n timeout: 0,\n in: selectMode,\n key: \"smallGroup\",\n nodeRef: this.smallScreenGroupNode\n }, status => {\n const smallScreenGroupClassName = classNames(styles.Group, styles['Group-smallScreen'], styles[`Group-${status}`]);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: smallScreenGroupClassName,\n ref: this.smallScreenGroupNode\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ButtonGroupWrapper\n }, /*#__PURE__*/React.createElement(ButtonGroup, {\n segmented: true\n }, /*#__PURE__*/React.createElement(CSSTransition, {\n nodeRef: this.checkableWrapperNode,\n in: selectMode,\n timeout: parseInt(tokens.motion['duration-200'].value, 10),\n classNames: slideClasses,\n appear: !selectMode\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.CheckableContainer,\n ref: this.checkableWrapperNode\n }, /*#__PURE__*/React.createElement(CheckableButton, Object.assign({}, checkableButtonProps, {\n smallScreen: true\n })))), allActionsPopover, cancelButton)), paginatedSelectAllMarkup);\n }) : null;\n const largeGroupContent = promotedActionsMarkup || actionsPopover ? /*#__PURE__*/React.createElement(ButtonGroup, {\n segmented: true\n }, /*#__PURE__*/React.createElement(CheckableButton, checkableButtonProps), promotedActionsMarkup, actionsPopover) : /*#__PURE__*/React.createElement(CheckableButton, checkableButtonProps);\n const largeScreenGroup = smallScreen ? null : /*#__PURE__*/React.createElement(Transition, {\n timeout: 0,\n in: selectMode,\n key: \"largeGroup\",\n nodeRef: this.largeScreenGroupNode\n }, status => {\n const largeScreenGroupClassName = classNames(styles.Group, styles['Group-largeScreen'], !measuring && styles[`Group-${status}`], measuring && styles['Group-measuring']);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: largeScreenGroupClassName,\n ref: this.largeScreenGroupNode\n }, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: this.handleResize\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ButtonGroupWrapper,\n ref: this.setLargeScreenButtonsNode\n }, largeGroupContent), paginatedSelectAllMarkup);\n });\n return /*#__PURE__*/React.createElement(\"div\", {\n ref: this.setContainerNode\n }, smallScreenGroup, largeScreenGroup);\n }\n\n isNewBadgeInBadgeActions() {\n const actions = this.actionSections();\n if (!actions) return false;\n\n for (const action of actions) {\n for (const item of action.items) {\n var _item$badge;\n\n if (((_item$badge = item.badge) === null || _item$badge === void 0 ? void 0 : _item$badge.status) === 'new') return true;\n }\n }\n\n return false;\n }\n\n}\n\nfunction instanceOfBulkActionListSectionArray(actions) {\n const validList = actions.filter(action => {\n return action.items;\n });\n return actions.length === validList.length;\n}\n\nfunction instanceOfBulkActionArray(actions) {\n const validList = actions.filter(action => {\n return !action.items;\n });\n return actions.length === validList.length;\n}\n\nfunction instanceOfMenuGroupDescriptor(action) {\n return 'title' in action;\n}\n\nfunction BulkActions(props) {\n const i18n = useI18n();\n return /*#__PURE__*/React.createElement(BulkActionsInner, Object.assign({}, props, {\n i18n: i18n\n }));\n}\n\nexport { BulkActions };\n","import React from 'react';\nimport { DisplayText } from '../DisplayText/DisplayText.js';\nimport emptySearch from './illustrations/empty-search.svg.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { Stack } from '../Stack/Stack.js';\nimport { TextStyle } from '../TextStyle/TextStyle.js';\nimport { Image } from '../Image/Image.js';\n\nfunction EmptySearchResult({\n title,\n description,\n withIllustration\n}) {\n const i18n = useI18n();\n const altText = i18n.translate('Polaris.EmptySearchResult.altText');\n const descriptionMarkup = description ? /*#__PURE__*/React.createElement(\"p\", null, description) : null;\n const illustrationMarkup = withIllustration ? /*#__PURE__*/React.createElement(Image, {\n alt: altText,\n source: emptySearch,\n draggable: false\n }) : null;\n return /*#__PURE__*/React.createElement(Stack, {\n alignment: \"center\",\n vertical: true\n }, illustrationMarkup, /*#__PURE__*/React.createElement(DisplayText, {\n size: \"small\"\n }, title), /*#__PURE__*/React.createElement(TextStyle, {\n variation: \"subdued\"\n }, descriptionMarkup));\n}\n\nexport { EmptySearchResult };\n","var img = \"data:image/svg+xml,%3csvg width='60' height='60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M41.87 24a17.87 17.87 0 11-35.74 0 17.87 17.87 0 0135.74 0zm-3.15 18.96a24 24 0 114.24-4.24L59.04 54.8a3 3 0 11-4.24 4.24L38.72 42.96z' fill='%238C9196'/%3e%3c/svg%3e\";\n var emptySearch = img;\n\nexport { emptySearch as default };\n","import React, { useState, useReducer, useRef, useCallback, useEffect, Children } from 'react';\nimport { EnableSelectionMinor } from '@shopify/polaris-icons';\nimport { debounce } from '../../utilities/debounce.js';\nimport { classNames } from '../../utilities/css.js';\nimport { isElementOfType } from '../../utilities/components.js';\nimport { useLazyRef } from '../../utilities/use-lazy-ref.js';\nimport styles from './ResourceList.scss.js';\nimport { Select } from '../Select/Select.js';\nimport { ResourceItem } from '../ResourceItem/ResourceItem.js';\nimport { SELECT_ALL_ITEMS } from '../../utilities/resource-list/types.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { BulkActions } from '../BulkActions/BulkActions.js';\nimport { Button } from '../Button/Button.js';\nimport { CheckableButton } from '../CheckableButton/CheckableButton.js';\nimport { Sticky } from '../Sticky/Sticky.js';\nimport { EventListener } from '../EventListener/EventListener.js';\nimport { EmptySearchResult } from '../EmptySearchResult/EmptySearchResult.js';\nimport { Spinner } from '../Spinner/Spinner.js';\nimport { ResourceListContext } from '../../utilities/resource-list/context.js';\n\nconst SMALL_SCREEN_WIDTH = 458;\nconst SMALL_SPINNER_HEIGHT = 28;\nconst LARGE_SPINNER_HEIGHT = 45;\n\nfunction getAllItemsOnPage(items, idForItem) {\n return items.map((item, index) => {\n return idForItem(item, index);\n });\n}\n\nconst isSmallScreen = () => {\n return typeof window === 'undefined' ? false : window.innerWidth < SMALL_SCREEN_WIDTH;\n};\n\nfunction defaultIdForItem(item, index) {\n return Object.prototype.hasOwnProperty.call(item, 'id') ? item.id : index.toString();\n}\n\nconst ResourceList = function ResourceList({\n items,\n filterControl,\n emptyState,\n emptySearchState,\n resourceName: resourceNameProp,\n promotedBulkActions,\n bulkActions,\n selectedItems = [],\n isFiltered,\n selectable,\n hasMoreItems,\n loading,\n showHeader,\n totalItemsCount,\n sortValue,\n sortOptions,\n alternateTool,\n onSortChange,\n onSelectionChange,\n renderItem,\n idForItem = defaultIdForItem,\n resolveItemId\n}) {\n const i18n = useI18n();\n const [selectMode, setSelectMode] = useState(Boolean(selectedItems && selectedItems.length > 0));\n const [loadingPosition, setLoadingPositionState] = useState(0);\n const [lastSelected, setLastSelected] = useState();\n const [smallScreen, setSmallScreen] = useState(isSmallScreen());\n const forceUpdate = useReducer((x = 0) => x + 1, 0)[1];\n const [checkableButtons, setCheckableButtons] = useState(new Map());\n const defaultResourceName = useLazyRef(() => ({\n singular: i18n.translate('Polaris.ResourceList.defaultItemSingular'),\n plural: i18n.translate('Polaris.ResourceList.defaultItemPlural')\n }));\n const listRef = useRef(null);\n\n const handleSelectMode = selectMode => {\n setSelectMode(selectMode);\n\n if (!selectMode && onSelectionChange) {\n onSelectionChange([]);\n }\n };\n\n const handleResize = debounce(() => {\n const newSmallScreen = isSmallScreen();\n\n if (selectedItems && selectedItems.length === 0 && selectMode && !newSmallScreen) {\n handleSelectMode(false);\n }\n\n if (smallScreen !== newSmallScreen) {\n setSmallScreen(newSmallScreen);\n }\n }, 50, {\n leading: true,\n trailing: true,\n maxWait: 50\n });\n const isSelectable = Boolean(promotedBulkActions && promotedBulkActions.length > 0 || bulkActions && bulkActions.length > 0 || selectable);\n\n const bulkSelectState = () => {\n let selectState = 'indeterminate';\n\n if (!selectedItems || Array.isArray(selectedItems) && selectedItems.length === 0) {\n selectState = false;\n } else if (selectedItems === SELECT_ALL_ITEMS || Array.isArray(selectedItems) && selectedItems.length === items.length) {\n selectState = true;\n }\n\n return selectState;\n };\n\n const resourceName = resourceNameProp ? resourceNameProp : defaultResourceName.current;\n\n const headerTitle = () => {\n const itemsCount = items.length;\n const resource = !loading && (!totalItemsCount && itemsCount === 1 || totalItemsCount === 1) ? resourceName.singular : resourceName.plural;\n\n if (loading) {\n return i18n.translate('Polaris.ResourceList.loading', {\n resource\n });\n } else if (totalItemsCount) {\n return i18n.translate('Polaris.ResourceList.showingTotalCount', {\n itemsCount,\n totalItemsCount,\n resource\n });\n } else {\n return i18n.translate('Polaris.ResourceList.showing', {\n itemsCount,\n resource\n });\n }\n };\n\n const bulkActionsLabel = () => {\n const selectedItemsCount = selectedItems === SELECT_ALL_ITEMS ? `${items.length}+` : selectedItems.length;\n return i18n.translate('Polaris.ResourceList.selected', {\n selectedItemsCount\n });\n };\n\n const bulkActionsAccessibilityLabel = () => {\n const selectedItemsCount = selectedItems.length;\n const totalItemsCount = items.length;\n const allSelected = selectedItemsCount === totalItemsCount;\n\n if (totalItemsCount === 1 && allSelected) {\n return i18n.translate('Polaris.ResourceList.a11yCheckboxDeselectAllSingle', {\n resourceNameSingular: resourceName.singular\n });\n } else if (totalItemsCount === 1) {\n return i18n.translate('Polaris.ResourceList.a11yCheckboxSelectAllSingle', {\n resourceNameSingular: resourceName.singular\n });\n } else if (allSelected) {\n return i18n.translate('Polaris.ResourceList.a11yCheckboxDeselectAllMultiple', {\n itemsLength: items.length,\n resourceNamePlural: resourceName.plural\n });\n } else {\n return i18n.translate('Polaris.ResourceList.a11yCheckboxSelectAllMultiple', {\n itemsLength: items.length,\n resourceNamePlural: resourceName.plural\n });\n }\n };\n\n const paginatedSelectAllText = () => {\n if (!isSelectable || !hasMoreItems) {\n return;\n }\n\n if (selectedItems === SELECT_ALL_ITEMS) {\n return i18n.translate(isFiltered ? 'Polaris.ResourceList.allFilteredItemsSelected' : 'Polaris.ResourceList.allItemsSelected', {\n itemsLength: items.length,\n resourceNamePlural: resourceName.plural\n });\n }\n };\n\n const paginatedSelectAllAction = () => {\n if (!isSelectable || !hasMoreItems) {\n return;\n }\n\n const actionText = selectedItems === SELECT_ALL_ITEMS ? i18n.translate('Polaris.Common.undo') : i18n.translate(isFiltered ? 'Polaris.ResourceList.selectAllFilteredItems' : 'Polaris.ResourceList.selectAllItems', {\n itemsLength: items.length,\n resourceNamePlural: resourceName.plural\n });\n return {\n content: actionText,\n onAction: handleSelectAllItemsInStore\n };\n };\n\n const emptySearchResultText = {\n title: i18n.translate('Polaris.ResourceList.emptySearchResultTitle', {\n resourceNamePlural: resourceName.plural\n }),\n description: i18n.translate('Polaris.ResourceList.emptySearchResultDescription')\n };\n\n const handleSelectAllItemsInStore = () => {\n const newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : SELECT_ALL_ITEMS;\n\n if (onSelectionChange) {\n onSelectionChange(newlySelectedItems);\n }\n };\n\n const setLoadingPosition = useCallback(() => {\n if (listRef.current != null) {\n if (typeof window === 'undefined') {\n return;\n }\n\n const overlay = listRef.current.getBoundingClientRect();\n const viewportHeight = Math.max(document.documentElement ? document.documentElement.clientHeight : 0, window.innerHeight || 0);\n const overflow = viewportHeight - overlay.height;\n const spinnerHeight = items.length === 1 ? SMALL_SPINNER_HEIGHT : LARGE_SPINNER_HEIGHT;\n const spinnerPosition = overflow > 0 ? (overlay.height - spinnerHeight) / 2 : (viewportHeight - overlay.top - spinnerHeight) / 2;\n setLoadingPositionState(spinnerPosition);\n }\n }, [listRef, items.length]);\n const itemsExist = items.length > 0;\n useEffect(() => {\n if (loading) {\n setLoadingPosition();\n }\n }, [loading, setLoadingPosition]);\n useEffect(() => {\n if (selectedItems && selectedItems.length > 0 && !selectMode) {\n setSelectMode(true);\n }\n\n if ((!selectedItems || selectedItems.length === 0) && !isSmallScreen()) {\n setSelectMode(false);\n }\n }, [selectedItems, selectMode]);\n useEffect(() => {\n forceUpdate();\n }, [forceUpdate, items]);\n\n const renderItemWithId = (item, index) => {\n const id = idForItem(item, index);\n const itemContent = renderItem(item, id, index);\n\n if (process.env.NODE_ENV === 'development' && !isElementOfType(itemContent, ResourceItem)) {\n // eslint-disable-next-line no-console\n console.warn(' renderItem function should return a .');\n }\n\n return itemContent;\n };\n\n const handleMultiSelectionChange = (lastSelected, currentSelected, resolveItemId) => {\n const min = Math.min(lastSelected, currentSelected);\n const max = Math.max(lastSelected, currentSelected);\n return items.slice(min, max + 1).map(resolveItemId);\n };\n\n const handleCheckableButtonRegistration = (key, button) => {\n if (!checkableButtons.get(key)) {\n setCheckableButtons(new Map(checkableButtons).set(key, button));\n }\n };\n\n const handleSelectionChange = (selected, id, sortOrder, shiftKey) => {\n if (selectedItems == null || onSelectionChange == null) {\n return;\n }\n\n let newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : [...selectedItems];\n\n if (sortOrder !== undefined) {\n setLastSelected(sortOrder);\n }\n\n const lastSelectedFromState = lastSelected;\n let selectedIds = [id];\n\n if (shiftKey && lastSelectedFromState != null && sortOrder !== undefined && resolveItemId) {\n selectedIds = handleMultiSelectionChange(lastSelectedFromState, sortOrder, resolveItemId);\n }\n\n newlySelectedItems = [...new Set([...newlySelectedItems, ...selectedIds])];\n\n if (!selected) {\n for (const selectedId of selectedIds) {\n newlySelectedItems.splice(newlySelectedItems.indexOf(selectedId), 1);\n }\n }\n\n if (newlySelectedItems.length === 0 && !isSmallScreen()) {\n handleSelectMode(false);\n } else if (newlySelectedItems.length > 0) {\n handleSelectMode(true);\n }\n\n if (onSelectionChange) {\n onSelectionChange(newlySelectedItems);\n }\n };\n\n const handleToggleAll = () => {\n let newlySelectedItems;\n\n if (Array.isArray(selectedItems) && selectedItems.length === items.length || selectedItems === SELECT_ALL_ITEMS) {\n newlySelectedItems = [];\n } else {\n newlySelectedItems = items.map((item, index) => {\n return idForItem(item, index);\n });\n }\n\n if (newlySelectedItems.length === 0 && !isSmallScreen()) {\n handleSelectMode(false);\n } else if (newlySelectedItems.length > 0) {\n handleSelectMode(true);\n }\n\n let checkbox;\n\n if (isSmallScreen()) {\n checkbox = checkableButtons.get('bulkSm');\n } else if (newlySelectedItems.length === 0) {\n checkbox = checkableButtons.get('plain');\n } else {\n checkbox = checkableButtons.get('bulkLg');\n }\n\n if (onSelectionChange) {\n onSelectionChange(newlySelectedItems);\n } // setTimeout ensures execution after the Transition on BulkActions\n\n\n setTimeout(() => {\n checkbox && checkbox.focus();\n }, 0);\n };\n\n const bulkActionsMarkup = isSelectable ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.BulkActionsWrapper\n }, /*#__PURE__*/React.createElement(BulkActions, {\n label: bulkActionsLabel(),\n accessibilityLabel: bulkActionsAccessibilityLabel(),\n selected: bulkSelectState(),\n onToggleAll: handleToggleAll,\n selectMode: selectMode,\n onSelectModeToggle: handleSelectMode,\n promotedActions: promotedBulkActions,\n paginatedSelectAllAction: paginatedSelectAllAction(),\n paginatedSelectAllText: paginatedSelectAllText(),\n actions: bulkActions,\n disabled: loading,\n smallScreen: smallScreen\n })) : null;\n const filterControlMarkup = filterControl ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.FiltersWrapper\n }, filterControl) : null;\n const sortingSelectMarkup = sortOptions && sortOptions.length > 0 && !alternateTool ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SortWrapper\n }, /*#__PURE__*/React.createElement(Select, {\n label: i18n.translate('Polaris.ResourceList.sortingLabel'),\n labelInline: !smallScreen,\n labelHidden: smallScreen,\n options: sortOptions,\n onChange: onSortChange,\n value: sortValue,\n disabled: selectMode\n })) : null;\n const alternateToolMarkup = alternateTool && !sortingSelectMarkup ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.AlternateToolWrapper\n }, alternateTool) : null;\n const headerTitleMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.HeaderTitleWrapper\n }, headerTitle());\n const selectButtonMarkup = isSelectable ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SelectButtonWrapper\n }, /*#__PURE__*/React.createElement(Button, {\n disabled: selectMode,\n icon: EnableSelectionMinor,\n onClick: () => handleSelectMode(true)\n }, i18n.translate('Polaris.ResourceList.selectButtonText'))) : null;\n const checkableButtonMarkup = isSelectable ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.CheckableButtonWrapper\n }, /*#__PURE__*/React.createElement(CheckableButton, {\n accessibilityLabel: bulkActionsAccessibilityLabel(),\n label: headerTitle(),\n onToggleAll: handleToggleAll,\n plain: true,\n disabled: loading\n })) : null;\n const needsHeader = isSelectable || sortOptions && sortOptions.length > 0 || alternateTool;\n const headerWrapperOverlay = loading ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles['HeaderWrapper-overlay']\n }) : null;\n const showEmptyState = emptyState && !itemsExist && !loading;\n const showEmptySearchState = !showEmptyState && filterControl && !itemsExist && !loading;\n const headerMarkup = !showEmptyState && showHeader !== false && !showEmptySearchState && (showHeader || needsHeader) && listRef.current && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.HeaderOuterWrapper\n }, /*#__PURE__*/React.createElement(Sticky, {\n boundingElement: listRef.current\n }, isSticky => {\n const headerClassName = classNames(styles.HeaderWrapper, sortOptions && sortOptions.length > 0 && !alternateTool && styles['HeaderWrapper-hasSort'], alternateTool && styles['HeaderWrapper-hasAlternateTool'], isSelectable && styles['HeaderWrapper-hasSelect'], loading && styles['HeaderWrapper-disabled'], isSelectable && selectMode && styles['HeaderWrapper-inSelectMode'], isSticky && styles['HeaderWrapper-isSticky']);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: headerClassName\n }, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: handleResize\n }), headerWrapperOverlay, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.HeaderContentWrapper\n }, headerTitleMarkup, checkableButtonMarkup, alternateToolMarkup, sortingSelectMarkup, selectButtonMarkup), bulkActionsMarkup);\n }));\n const emptySearchStateMarkup = showEmptySearchState ? emptySearchState || /*#__PURE__*/React.createElement(\"div\", {\n className: styles.EmptySearchResultWrapper\n }, /*#__PURE__*/React.createElement(EmptySearchResult, Object.assign({}, emptySearchResultText, {\n withIllustration: true\n }))) : null;\n const emptyStateMarkup = showEmptyState ? emptyState : null;\n const defaultTopPadding = 8;\n const topPadding = loadingPosition > 0 ? loadingPosition : defaultTopPadding;\n const spinnerStyle = {\n paddingTop: `${topPadding}px`\n };\n const spinnerSize = items.length < 2 ? 'small' : 'large';\n const loadingOverlay = loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"li\", {\n className: styles.SpinnerContainer,\n style: spinnerStyle\n }, /*#__PURE__*/React.createElement(Spinner, {\n size: spinnerSize,\n accessibilityLabel: \"Items are loading\"\n })), /*#__PURE__*/React.createElement(\"li\", {\n className: styles.LoadingOverlay\n })) : null;\n const className = classNames(styles.ItemWrapper, loading && styles['ItemWrapper-isLoading']);\n const loadingWithoutItemsMarkup = loading && !itemsExist ? /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n tabIndex: -1\n }, loadingOverlay) : null;\n const resourceListClassName = classNames(styles.ResourceList, loading && styles.disabledPointerEvents, selectMode && styles.disableTextSelection);\n const listMarkup = itemsExist ? /*#__PURE__*/React.createElement(\"ul\", {\n className: resourceListClassName,\n ref: listRef,\n \"aria-live\": \"polite\",\n \"aria-busy\": loading\n }, loadingOverlay, Children.toArray(items.map(renderItemWithId))) : null; // This is probably a legit error but I don't have the time to refactor this\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n\n const context = {\n selectable: isSelectable,\n selectedItems,\n selectMode,\n resourceName,\n loading,\n onSelectionChange: handleSelectionChange,\n registerCheckableButtons: handleCheckableButtonRegistration\n };\n return /*#__PURE__*/React.createElement(ResourceListContext.Provider, {\n value: context\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ResourceListWrapper\n }, filterControlMarkup, headerMarkup, listMarkup, emptySearchStateMarkup, emptyStateMarkup, loadingWithoutItemsMarkup));\n};\nResourceList.Item = ResourceItem;\n\nexport { ResourceList };\n","import { useEffect } from 'react';\nimport './ScrollLock.scss.js';\nimport { useScrollLockManager } from '../../utilities/scroll-lock-manager/hooks.js';\n\n// Even though this has no args, reference ScrollLockProps so the prop explorer\n// in the styleguide works without warnings about unfound props\nfunction ScrollLock(_) {\n const scrollLockManager = useScrollLockManager();\n useEffect(() => {\n scrollLockManager.registerScrollLock();\n return () => {\n scrollLockManager.unregisterScrollLock();\n };\n }, [scrollLockManager]);\n return null;\n}\n\nexport { ScrollLock };\n","import { useContext } from 'react';\nimport { MissingAppProviderError } from '../errors.js';\nimport { ScrollLockManagerContext } from './context.js';\n\nfunction useScrollLockManager() {\n const scrollLockManager = useContext(ScrollLockManagerContext);\n\n if (!scrollLockManager) {\n throw new MissingAppProviderError('No ScrollLockManager was provided.');\n }\n\n return scrollLockManager;\n}\n\nexport { useScrollLockManager };\n","import { createContext } from 'react';\n\nconst ScrollableContext = /*#__PURE__*/createContext(undefined);\n\nexport { ScrollableContext };\n","var styles = {\n \"Scrollable\": \"Polaris-Scrollable\",\n \"horizontal\": \"Polaris-Scrollable--horizontal\",\n \"vertical\": \"Polaris-Scrollable--vertical\",\n \"verticalHasScrolling\": \"Polaris-Scrollable--verticalHasScrolling\",\n \"hasTopShadow\": \"Polaris-Scrollable--hasTopShadow\",\n \"hasBottomShadow\": \"Polaris-Scrollable--hasBottomShadow\"\n};\n\nexport { styles as default };\n","import React, { Component } from 'react';\nimport { debounce } from '../../utilities/debounce.js';\nimport { classNames } from '../../utilities/css.js';\nimport { scrollable } from '../shared.js';\nimport { ScrollableContext } from './context.js';\nimport styles from './Scrollable.scss.js';\nimport { ScrollTo } from './components/ScrollTo/ScrollTo.js';\nimport { StickyManager } from '../../utilities/sticky-manager/sticky-manager.js';\nimport { StickyManagerContext } from '../../utilities/sticky-manager/context.js';\n\nconst MAX_SCROLL_DISTANCE = 100;\nconst DELTA_THRESHOLD = 0.2;\nconst DELTA_PERCENTAGE = 0.2;\nconst EVENTS_TO_LOCK = ['scroll', 'touchmove', 'wheel'];\nconst PREFERS_REDUCED_MOTION = prefersReducedMotion();\nconst LOW_RES_BUFFER = 2;\nclass Scrollable extends Component {\n constructor(...args) {\n super(...args);\n this.state = {\n topShadow: false,\n bottomShadow: false,\n scrollPosition: 0,\n canScroll: false\n };\n this.stickyManager = new StickyManager();\n this.scrollArea = null;\n this.handleResize = debounce(() => {\n this.handleScroll();\n }, 50, {\n trailing: true\n });\n\n this.setScrollArea = scrollArea => {\n this.scrollArea = scrollArea;\n };\n\n this.handleScroll = () => {\n const {\n scrollArea\n } = this;\n const {\n scrollPosition\n } = this.state;\n const {\n shadow,\n onScrolledToBottom\n } = this.props;\n\n if (scrollArea == null) {\n return;\n }\n\n const {\n scrollTop,\n clientHeight,\n scrollHeight\n } = scrollArea;\n const shouldBottomShadow = Boolean(shadow && !(scrollTop + clientHeight >= scrollHeight));\n const shouldTopShadow = Boolean(shadow && scrollTop > 0 && scrollPosition > 0);\n const canScroll = scrollHeight > clientHeight;\n const hasScrolledToBottom = scrollHeight - scrollTop <= clientHeight + LOW_RES_BUFFER;\n\n if (canScroll && hasScrolledToBottom && onScrolledToBottom) {\n onScrolledToBottom();\n }\n\n this.setState({\n topShadow: shouldTopShadow,\n bottomShadow: shouldBottomShadow,\n scrollPosition: scrollTop,\n canScroll\n });\n };\n\n this.scrollHint = () => {\n const {\n scrollArea\n } = this;\n\n if (scrollArea == null) {\n return;\n }\n\n const {\n clientHeight,\n scrollHeight\n } = scrollArea;\n\n if (PREFERS_REDUCED_MOTION || this.state.scrollPosition > 0 || scrollHeight <= clientHeight) {\n return;\n }\n\n const scrollDistance = scrollHeight - clientHeight;\n this.toggleLock();\n this.setState({\n scrollPosition: scrollDistance > MAX_SCROLL_DISTANCE ? MAX_SCROLL_DISTANCE : scrollDistance\n }, () => {\n window.requestAnimationFrame(this.scrollStep);\n });\n };\n\n this.scrollStep = () => {\n this.setState(({\n scrollPosition\n }) => {\n const delta = scrollPosition * DELTA_PERCENTAGE;\n return {\n scrollPosition: delta < DELTA_THRESHOLD ? 0 : scrollPosition - delta\n };\n }, () => {\n if (this.state.scrollPosition > 0) {\n window.requestAnimationFrame(this.scrollStep);\n } else {\n this.toggleLock(false);\n }\n });\n };\n\n this.scrollToPosition = scrollY => {\n this.setState({\n scrollPosition: scrollY\n });\n };\n }\n\n static forNode(node) {\n const closestElement = node.closest(scrollable.selector);\n return closestElement instanceof HTMLElement ? closestElement : document;\n }\n\n componentDidMount() {\n if (this.scrollArea == null) {\n return;\n }\n\n this.stickyManager.setContainer(this.scrollArea);\n this.scrollArea.addEventListener('scroll', () => {\n window.requestAnimationFrame(this.handleScroll);\n });\n window.addEventListener('resize', this.handleResize);\n window.requestAnimationFrame(() => {\n this.handleScroll();\n\n if (this.props.hint) {\n this.scrollHint();\n }\n });\n }\n\n componentWillUnmount() {\n if (this.scrollArea == null) {\n return;\n }\n\n this.scrollArea.removeEventListener('scroll', this.handleScroll);\n window.removeEventListener('resize', this.handleResize);\n this.stickyManager.removeScrollListener();\n }\n\n componentDidUpdate() {\n const {\n scrollPosition\n } = this.state;\n\n if (scrollPosition && this.scrollArea && scrollPosition > 0) {\n this.scrollArea.scrollTop = scrollPosition;\n }\n }\n\n render() {\n const {\n topShadow,\n bottomShadow,\n canScroll\n } = this.state;\n const {\n children,\n className,\n horizontal,\n vertical = true,\n shadow,\n hint,\n focusable,\n onScrolledToBottom,\n ...rest\n } = this.props;\n const finalClassName = classNames(className, styles.Scrollable, vertical && styles.vertical, horizontal && styles.horizontal, topShadow && styles.hasTopShadow, bottomShadow && styles.hasBottomShadow, vertical && canScroll && styles.verticalHasScrolling);\n return /*#__PURE__*/React.createElement(ScrollableContext.Provider, {\n value: this.scrollToPosition\n }, /*#__PURE__*/React.createElement(StickyManagerContext.Provider, {\n value: this.stickyManager\n }, /*#__PURE__*/React.createElement(\"div\", Object.assign({\n className: finalClassName\n }, scrollable.props, rest, {\n ref: this.setScrollArea // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n ,\n tabIndex: focusable ? 0 : undefined\n }), children)));\n }\n\n toggleLock(shouldLock = true) {\n const {\n scrollArea\n } = this;\n\n if (scrollArea == null) {\n return;\n }\n\n EVENTS_TO_LOCK.forEach(eventName => {\n if (shouldLock) {\n scrollArea.addEventListener(eventName, prevent);\n } else {\n scrollArea.removeEventListener(eventName, prevent);\n }\n });\n }\n\n}\nScrollable.ScrollTo = ScrollTo;\n\nfunction prevent(evt) {\n evt.preventDefault();\n}\n\nfunction prefersReducedMotion() {\n try {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n } catch (err) {\n return false;\n }\n}\n\nexport { Scrollable };\n","import React, { useRef, useContext, useEffect } from 'react';\nimport { ScrollableContext } from '../../context.js';\nimport { useUniqueId } from '../../../../utilities/unique-id/hooks.js';\n\nfunction ScrollTo() {\n const anchorNode = useRef(null);\n const scrollToPosition = useContext(ScrollableContext);\n useEffect(() => {\n if (!scrollToPosition || !anchorNode.current) {\n return;\n }\n\n scrollToPosition(anchorNode.current.offsetTop);\n }, [scrollToPosition]);\n const id = useUniqueId(`ScrollTo`); // eslint-disable-next-line jsx-a11y/anchor-is-valid\n\n return /*#__PURE__*/React.createElement(\"a\", {\n id: id,\n ref: anchorNode\n });\n}\n\nexport { ScrollTo };\n","var styles = {\n \"Select\": \"Polaris-Select\",\n \"disabled\": \"Polaris-Select--disabled\",\n \"Content\": \"Polaris-Select__Content\",\n \"InlineLabel\": \"Polaris-Select__InlineLabel\",\n \"Icon\": \"Polaris-Select__Icon\",\n \"Backdrop\": \"Polaris-Select__Backdrop\",\n \"SelectedOption\": \"Polaris-Select__SelectedOption\",\n \"Prefix\": \"Polaris-Select__Prefix\",\n \"Input\": \"Polaris-Select__Input\",\n \"error\": \"Polaris-Select--error\",\n \"hover\": \"Polaris-Select--hover\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { SelectMinor } from '@shopify/polaris-icons';\nimport { classNames } from '../../utilities/css.js';\nimport styles from './Select.scss.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\nimport { Icon } from '../Icon/Icon.js';\nimport { Labelled, helpTextID } from '../Labelled/Labelled.js';\n\nconst PLACEHOLDER_VALUE = '';\nfunction Select({\n options: optionsProp,\n label,\n labelAction,\n labelHidden: labelHiddenProp,\n labelInline,\n disabled,\n helpText,\n placeholder,\n id: idProp,\n name,\n value = PLACEHOLDER_VALUE,\n error,\n onChange,\n onFocus,\n onBlur,\n requiredIndicator\n}) {\n const id = useUniqueId('Select', idProp);\n const labelHidden = labelInline ? true : labelHiddenProp;\n const className = classNames(styles.Select, error && styles.error, disabled && styles.disabled);\n const handleChange = onChange ? event => onChange(event.currentTarget.value, id) : undefined;\n const describedBy = [];\n\n if (helpText) {\n describedBy.push(helpTextID(id));\n }\n\n if (error) {\n describedBy.push(`${id}Error`);\n }\n\n const options = optionsProp || [];\n let normalizedOptions = options.map(normalizeOption);\n\n if (placeholder) {\n normalizedOptions = [{\n label: placeholder,\n value: PLACEHOLDER_VALUE,\n disabled: true\n }, ...normalizedOptions];\n }\n\n const inlineLabelMarkup = labelInline && /*#__PURE__*/React.createElement(\"span\", {\n className: styles.InlineLabel\n }, label);\n const selectedOption = getSelectedOption(normalizedOptions, value);\n const prefixMarkup = selectedOption.prefix && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Prefix\n }, selectedOption.prefix);\n const contentMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Content,\n \"aria-hidden\": true,\n \"aria-disabled\": disabled\n }, inlineLabelMarkup, prefixMarkup, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.SelectedOption\n }, selectedOption.label), /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Icon\n }, /*#__PURE__*/React.createElement(Icon, {\n source: SelectMinor\n })));\n const optionsMarkup = normalizedOptions.map(renderOption);\n return /*#__PURE__*/React.createElement(Labelled, {\n id: id,\n label: label,\n error: error,\n action: labelAction,\n labelHidden: labelHidden,\n helpText: helpText,\n requiredIndicator: requiredIndicator\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, /*#__PURE__*/React.createElement(\"select\", {\n id: id,\n name: name,\n value: value,\n className: styles.Input,\n disabled: disabled,\n onFocus: onFocus,\n onBlur: onBlur,\n onChange: handleChange,\n \"aria-invalid\": Boolean(error),\n \"aria-describedby\": describedBy.length ? describedBy.join(' ') : undefined,\n \"aria-required\": requiredIndicator\n }, optionsMarkup), contentMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Backdrop\n })));\n}\n\nfunction isString(option) {\n return typeof option === 'string';\n}\n\nfunction isGroup(option) {\n return typeof option === 'object' && 'options' in option && option.options != null;\n}\n\nfunction normalizeStringOption(option) {\n return {\n label: option,\n value: option\n };\n}\n/**\n * Converts a string option (and each string option in a Group) into\n * an Option object.\n */\n\n\nfunction normalizeOption(option) {\n if (isString(option)) {\n return normalizeStringOption(option);\n } else if (isGroup(option)) {\n const {\n title,\n options\n } = option;\n return {\n title,\n options: options.map(option => {\n return isString(option) ? normalizeStringOption(option) : option;\n })\n };\n }\n\n return option;\n}\n/**\n * Gets the text to display in the UI, for the currently selected option\n */\n\n\nfunction getSelectedOption(options, value) {\n const flatOptions = flattenOptions(options);\n let selectedOption = flatOptions.find(option => value === option.value);\n\n if (selectedOption === undefined) {\n // Get the first visible option (not the hidden placeholder)\n selectedOption = flatOptions.find(option => !option.hidden);\n }\n\n return selectedOption || {\n value: '',\n label: ''\n };\n}\n/**\n * Ungroups an options array\n */\n\n\nfunction flattenOptions(options) {\n let flatOptions = [];\n options.forEach(optionOrGroup => {\n if (isGroup(optionOrGroup)) {\n flatOptions = flatOptions.concat(optionOrGroup.options);\n } else {\n flatOptions.push(optionOrGroup);\n }\n });\n return flatOptions;\n}\n\nfunction renderSingleOption(option) {\n const {\n value,\n label,\n prefix: _prefix,\n ...rest\n } = option;\n return /*#__PURE__*/React.createElement(\"option\", Object.assign({\n key: value,\n value: value\n }, rest), label);\n}\n\nfunction renderOption(optionOrGroup) {\n if (isGroup(optionOrGroup)) {\n const {\n title,\n options\n } = optionOrGroup;\n return /*#__PURE__*/React.createElement(\"optgroup\", {\n label: title,\n key: title\n }, options.map(renderSingleOption));\n }\n\n return renderSingleOption(optionOrGroup);\n}\n\nexport { Select };\n","var styles = {\n \"SettingAction\": \"Polaris-SettingAction\",\n \"Setting\": \"Polaris-SettingAction__Setting\",\n \"Action\": \"Polaris-SettingAction__Action\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './SettingAction.scss.js';\n\nfunction SettingAction({\n action,\n children\n}) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SettingAction\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Setting\n }, children), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Action\n }, action));\n}\n\nexport { SettingAction };\n","import React, { useMemo } from 'react';\nimport { buttonFrom } from '../Button/utils.js';\nimport { Card } from '../Card/Card.js';\nimport { SettingAction } from '../SettingAction/SettingAction.js';\nimport { globalIdGeneratorFactory } from '../../utilities/unique-id/unique-id-factory.js';\n\nconst getUniqueSettingToggleId = globalIdGeneratorFactory('SettingToggle');\nfunction SettingToggle({\n enabled,\n action,\n children\n}) {\n const id = useMemo(getUniqueSettingToggleId, []);\n const actionMarkup = action ? buttonFrom(action, {\n primary: !enabled,\n role: 'switch',\n id,\n ariaChecked: enabled ? 'true' : 'false'\n }) : null;\n return /*#__PURE__*/React.createElement(Card, {\n sectioned: true\n }, /*#__PURE__*/React.createElement(SettingAction, {\n action: actionMarkup\n }, /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: id\n }, children)));\n}\n\nexport { SettingToggle };\n","var styles = {\n \"SkeletonBodyText\": \"Polaris-SkeletonBodyText\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './SkeletonBodyText.scss.js';\n\nfunction SkeletonBodyText({\n lines = 3\n}) {\n const bodyTextLines = [];\n\n for (let i = 0; i < lines; i++) {\n bodyTextLines.push( /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SkeletonBodyText,\n key: i\n }));\n }\n\n return /*#__PURE__*/React.createElement(React.Fragment, null, bodyTextLines);\n}\n\nexport { SkeletonBodyText };\n","var styles = {\n \"DisplayText\": \"Polaris-SkeletonDisplayText__DisplayText\",\n \"sizeSmall\": \"Polaris-SkeletonDisplayText--sizeSmall\",\n \"sizeMedium\": \"Polaris-SkeletonDisplayText--sizeMedium\",\n \"sizeLarge\": \"Polaris-SkeletonDisplayText--sizeLarge\",\n \"sizeExtraLarge\": \"Polaris-SkeletonDisplayText--sizeExtraLarge\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport styles from './SkeletonDisplayText.scss.js';\n\nfunction SkeletonDisplayText({\n size = 'medium'\n}) {\n const className = classNames(styles.DisplayText, size && styles[variationName('size', size)]);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className\n });\n}\n\nexport { SkeletonDisplayText };\n","var styles = {\n \"Spinner\": \"Polaris-Spinner\",\n \"sizeSmall\": \"Polaris-Spinner--sizeSmall\",\n \"sizeLarge\": \"Polaris-Spinner--sizeLarge\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport { useIsAfterInitialMount } from '../../utilities/use-is-after-initial-mount.js';\nimport styles from './Spinner.scss.js';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';\n\nfunction Spinner({\n size = 'large',\n accessibilityLabel,\n hasFocusableParent\n}) {\n const isAfterInitialMount = useIsAfterInitialMount();\n const className = classNames(styles.Spinner, size && styles[variationName('size', size)]);\n const spinnerSVGMarkup = size === 'large' ? /*#__PURE__*/React.createElement(\"svg\", {\n viewBox: \"0 0 44 44\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z\"\n })) : /*#__PURE__*/React.createElement(\"svg\", {\n viewBox: \"0 0 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z\"\n }));\n const spanAttributes = { ...(!hasFocusableParent && {\n role: 'status'\n })\n };\n const accessibilityLabelMarkup = (isAfterInitialMount || !hasFocusableParent) && /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: className\n }, spinnerSVGMarkup), /*#__PURE__*/React.createElement(\"span\", spanAttributes, accessibilityLabelMarkup));\n}\n\nexport { Spinner };\n","var styles = {\n \"Stack\": \"Polaris-Stack\",\n \"Item\": \"Polaris-Stack__Item\",\n \"noWrap\": \"Polaris-Stack--noWrap\",\n \"spacingNone\": \"Polaris-Stack--spacingNone\",\n \"spacingExtraTight\": \"Polaris-Stack--spacingExtraTight\",\n \"spacingTight\": \"Polaris-Stack--spacingTight\",\n \"spacingBaseTight\": \"Polaris-Stack--spacingBaseTight\",\n \"spacingLoose\": \"Polaris-Stack--spacingLoose\",\n \"spacingExtraLoose\": \"Polaris-Stack--spacingExtraLoose\",\n \"distributionLeading\": \"Polaris-Stack--distributionLeading\",\n \"distributionTrailing\": \"Polaris-Stack--distributionTrailing\",\n \"distributionCenter\": \"Polaris-Stack--distributionCenter\",\n \"distributionEqualSpacing\": \"Polaris-Stack--distributionEqualSpacing\",\n \"distributionFill\": \"Polaris-Stack--distributionFill\",\n \"distributionFillEvenly\": \"Polaris-Stack--distributionFillEvenly\",\n \"alignmentLeading\": \"Polaris-Stack--alignmentLeading\",\n \"alignmentTrailing\": \"Polaris-Stack--alignmentTrailing\",\n \"alignmentCenter\": \"Polaris-Stack--alignmentCenter\",\n \"alignmentFill\": \"Polaris-Stack--alignmentFill\",\n \"alignmentBaseline\": \"Polaris-Stack--alignmentBaseline\",\n \"vertical\": \"Polaris-Stack--vertical\",\n \"Item-fill\": \"Polaris-Stack__Item--fill\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from '../../Stack.scss.js';\n\nfunction Item({\n children,\n fill\n}) {\n const className = classNames(styles.Item, fill && styles['Item-fill']);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, children);\n}\n\nexport { Item };\n","import React, { memo } from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport { elementChildren, wrapWithComponent } from '../../utilities/components.js';\nimport styles from './Stack.scss.js';\nimport { Item } from './components/Item/Item.js';\n\nconst Stack = /*#__PURE__*/memo(function Stack({\n children,\n vertical,\n spacing,\n distribution,\n alignment,\n wrap\n}) {\n const className = classNames(styles.Stack, vertical && styles.vertical, spacing && styles[variationName('spacing', spacing)], distribution && styles[variationName('distribution', distribution)], alignment && styles[variationName('alignment', alignment)], wrap === false && styles.noWrap);\n const itemMarkup = elementChildren(children).map((child, index) => {\n const props = {\n key: index\n };\n return wrapWithComponent(child, Item, props);\n });\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, itemMarkup);\n});\nStack.Item = Item;\n\nexport { Stack };\n","import React, { Component } from 'react';\nimport { getRectForNode } from '../../utilities/geometry.js';\nimport { useStickyManager } from '../../utilities/sticky-manager/hooks.js';\n\nclass StickyInner extends Component {\n constructor(...args) {\n super(...args);\n this.state = {\n isSticky: false,\n style: {}\n };\n this.placeHolderNode = null;\n this.stickyNode = null;\n\n this.setPlaceHolderNode = node => {\n this.placeHolderNode = node;\n };\n\n this.setStickyNode = node => {\n this.stickyNode = node;\n };\n\n this.handlePositioning = (stick, top = 0, left = 0, width = 0) => {\n const {\n isSticky\n } = this.state;\n\n if (stick && !isSticky || !stick && isSticky) {\n this.adjustPlaceHolderNode(stick);\n this.setState({\n isSticky: !isSticky\n }, () => {\n if (this.props.onStickyChange == null) {\n return null;\n }\n\n this.props.onStickyChange(!isSticky);\n\n if (this.props.boundingElement == null) {\n return null;\n }\n\n this.props.boundingElement.toggleAttribute('data-sticky-active');\n });\n }\n\n const style = stick ? {\n position: 'fixed',\n top,\n left,\n width\n } : {};\n this.setState({\n style\n });\n };\n\n this.adjustPlaceHolderNode = add => {\n if (this.placeHolderNode && this.stickyNode) {\n this.placeHolderNode.style.paddingBottom = add ? `${getRectForNode(this.stickyNode).height}px` : '0px';\n }\n };\n }\n\n componentDidMount() {\n const {\n boundingElement,\n offset = false,\n disableWhenStacked = false,\n stickyManager\n } = this.props;\n if (!this.stickyNode || !this.placeHolderNode) return;\n stickyManager.registerStickyItem({\n stickyNode: this.stickyNode,\n placeHolderNode: this.placeHolderNode,\n handlePositioning: this.handlePositioning,\n offset,\n boundingElement,\n disableWhenStacked\n });\n }\n\n componentWillUnmount() {\n const {\n stickyManager\n } = this.props;\n if (!this.stickyNode) return;\n stickyManager.unregisterStickyItem(this.stickyNode);\n }\n\n render() {\n const {\n style,\n isSticky\n } = this.state;\n const {\n children\n } = this.props;\n const childrenContent = isFunction(children) ? children(isSticky) : children;\n return /*#__PURE__*/React.createElement(\"div\", null, /*#__PURE__*/React.createElement(\"div\", {\n ref: this.setPlaceHolderNode\n }), /*#__PURE__*/React.createElement(\"div\", {\n ref: this.setStickyNode,\n style: style\n }, childrenContent));\n }\n\n} // This should have a typeguard instead of using Function\n// eslint-disable-next-line @typescript-eslint/ban-types\n\n\nfunction isFunction(arg) {\n return typeof arg === 'function';\n}\n\nfunction Sticky(props) {\n const stickyManager = useStickyManager();\n return /*#__PURE__*/React.createElement(StickyInner, Object.assign({}, props, {\n stickyManager: stickyManager\n }));\n}\n\nexport { Sticky };\n","import { useContext } from 'react';\nimport { MissingAppProviderError } from '../errors.js';\nimport { StickyManagerContext } from './context.js';\n\nfunction useStickyManager() {\n const stickyManager = useContext(StickyManagerContext);\n\n if (!stickyManager) {\n throw new MissingAppProviderError('No StickyManager was provided.');\n }\n\n return stickyManager;\n}\n\nexport { useStickyManager };\n","function getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth) {\n const sumTabWidths = tabWidths.reduce((sum, width) => sum + width, 0);\n const arrayOfTabIndices = tabs.map((_, index) => {\n return index;\n });\n const visibleTabs = [];\n const hiddenTabs = [];\n\n if (containerWidth > sumTabWidths) {\n visibleTabs.push(...arrayOfTabIndices);\n } else {\n visibleTabs.push(selected);\n let tabListWidth = tabWidths[selected];\n arrayOfTabIndices.forEach(currentTabIndex => {\n if (currentTabIndex !== selected) {\n const currentTabWidth = tabWidths[currentTabIndex];\n\n if (tabListWidth + currentTabWidth >= containerWidth - disclosureWidth) {\n hiddenTabs.push(currentTabIndex);\n return;\n }\n\n visibleTabs.push(currentTabIndex);\n tabListWidth += currentTabWidth;\n }\n });\n }\n\n return {\n visibleTabs,\n hiddenTabs\n };\n}\n\nexport { getVisibleAndHiddenTabIndices };\n","var styles = {\n \"Tabs\": \"Polaris-Tabs\",\n \"Wrapper\": \"Polaris-Tabs__Wrapper\",\n \"fitted\": \"Polaris-Tabs--fitted\",\n \"TabContainer\": \"Polaris-Tabs__TabContainer\",\n \"Title\": \"Polaris-Tabs__Title\",\n \"fillSpace\": \"Polaris-Tabs--fillSpace\",\n \"Tab\": \"Polaris-Tabs__Tab\",\n \"Tab-selected\": \"Polaris-Tabs__Tab--selected\",\n \"titleWithIcon\": \"Polaris-Tabs--titleWithIcon\",\n \"Panel\": \"Polaris-Tabs__Panel\",\n \"Panel-hidden\": \"Polaris-Tabs__Panel--hidden\",\n \"List\": \"Polaris-Tabs__List\",\n \"Item\": \"Polaris-Tabs__Item\",\n \"DisclosureTab\": \"Polaris-Tabs__DisclosureTab\",\n \"DisclosureTab-visible\": \"Polaris-Tabs__DisclosureTab--visible\",\n \"DisclosureActivator\": \"Polaris-Tabs__DisclosureActivator\",\n \"TabMeasurer\": \"Polaris-Tabs__TabMeasurer\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from '../../Tabs.scss.js';\n\nfunction Panel({\n hidden,\n id,\n tabID,\n children\n}) {\n const className = classNames(styles.Panel, hidden && styles['Panel-hidden']);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n id: id,\n role: \"tabpanel\",\n \"aria-labelledby\": tabID,\n tabIndex: -1\n }, children);\n}\n\nexport { Panel };\n","import React, { useRef, useEffect } from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { focusFirstFocusableNode, handleMouseUpByBlurring } from '../../../../utilities/focus.js';\nimport styles from '../../Tabs.scss.js';\nimport { UnstyledLink } from '../../../UnstyledLink/UnstyledLink.js';\n\nfunction Tab({\n id,\n focused,\n siblingTabHasFocus,\n children,\n onClick,\n selected,\n url,\n panelID,\n measuring,\n accessibilityLabel\n}) {\n const wasSelected = useRef(selected);\n const panelFocused = useRef(false);\n const node = useRef(null); // A tab can start selected when it is moved from the disclosure dropdown\n // into the main list, so we need to send focus from the tab to the panel\n // on mount and update\n\n useEffect(() => {\n if (measuring) {\n return;\n } // Because of timing issues with the render, we may still have the old,\n // in-disclosure version of the tab that has focus. Check for this\n // as a second indicator of focus\n\n\n const itemHadFocus = focused || document.activeElement && document.activeElement.id === id; // If we just check for selected, the panel for the active tab will\n // be focused on page load, which we don’t want\n\n if (itemHadFocus && selected && panelID != null && !panelFocused.current) {\n focusPanelID(panelID);\n panelFocused.current = true;\n }\n\n if (selected && !wasSelected.current && panelID != null) {\n focusPanelID(panelID);\n } else if (focused && node.current != null) {\n focusFirstFocusableNode(node.current);\n }\n\n wasSelected.current = selected;\n }, [focused, id, measuring, panelID, selected]);\n const handleClick = onClick && onClick.bind(null, id);\n const className = classNames(styles.Tab, selected && styles['Tab-selected']);\n let tabIndex;\n\n if (selected && !siblingTabHasFocus && !measuring) {\n tabIndex = 0;\n } else if (focused && !measuring) {\n tabIndex = 0;\n } else {\n tabIndex = -1;\n }\n\n const tabContainerClassNames = classNames(styles.TabContainer, selected && styles.Underline);\n const markup = url ? /*#__PURE__*/React.createElement(UnstyledLink, {\n id: id,\n url: url,\n role: \"tab\",\n tabIndex: tabIndex,\n onClick: handleClick,\n className: className,\n \"aria-selected\": selected,\n \"aria-controls\": panelID,\n \"aria-label\": accessibilityLabel,\n onMouseUp: handleMouseUpByBlurring\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Title\n }, children)) : /*#__PURE__*/React.createElement(\"button\", {\n id: id,\n role: \"tab\",\n type: \"button\",\n tabIndex: tabIndex,\n className: className,\n onClick: handleClick,\n \"aria-selected\": selected,\n \"aria-controls\": panelID,\n \"aria-label\": accessibilityLabel,\n onMouseUp: handleMouseUpByBlurring\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Title\n }, children));\n return /*#__PURE__*/React.createElement(\"li\", {\n className: tabContainerClassNames,\n ref: node,\n role: \"presentation\"\n }, markup);\n}\n\nfunction focusPanelID(panelID) {\n const panel = document.getElementById(panelID);\n\n if (panel) {\n panel.focus({\n preventScroll: true\n });\n }\n}\n\nexport { Tab };\n","import React, { memo, useRef, useCallback, useEffect } from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { useComponentDidMount } from '../../../../utilities/use-component-did-mount.js';\nimport styles from '../../Tabs.scss.js';\nimport { Tab } from '../Tab/Tab.js';\nimport { EventListener } from '../../../EventListener/EventListener.js';\n\nconst TabMeasurer = /*#__PURE__*/memo(function TabMeasurer({\n selected,\n tabs,\n activator,\n tabToFocus,\n siblingTabHasFocus,\n handleMeasurement: handleMeasurementProp\n}) {\n const containerNode = useRef(null);\n const animationFrame = useRef(null);\n const handleMeasurement = useCallback(() => {\n if (animationFrame.current) {\n cancelAnimationFrame(animationFrame.current);\n }\n\n animationFrame.current = requestAnimationFrame(() => {\n if (!containerNode.current) {\n return;\n }\n\n const containerWidth = containerNode.current.offsetWidth;\n const hiddenTabNodes = containerNode.current.children;\n const hiddenTabNodesArray = Array.from(hiddenTabNodes);\n const hiddenTabWidths = hiddenTabNodesArray.map(node => {\n return Math.ceil(node.getBoundingClientRect().width);\n });\n const disclosureWidth = hiddenTabWidths.pop() || 0;\n handleMeasurementProp({\n containerWidth,\n disclosureWidth,\n hiddenTabWidths\n });\n });\n }, [handleMeasurementProp]);\n useEffect(() => {\n handleMeasurement();\n }, [handleMeasurement, tabs]);\n useComponentDidMount(() => {\n if (process.env.NODE_ENV === 'development') {\n setTimeout(handleMeasurement, 0);\n }\n });\n const tabsMarkup = tabs.map((tab, index) => {\n return /*#__PURE__*/React.createElement(Tab, {\n measuring: true,\n key: `${index}${tab.id}Hidden`,\n id: `${tab.id}Measurer`,\n siblingTabHasFocus: siblingTabHasFocus,\n focused: index === tabToFocus,\n selected: index === selected,\n onClick: noop,\n url: tab.url\n }, tab.content);\n });\n const classname = classNames(styles.Tabs, styles.TabMeasurer);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: classname,\n ref: containerNode\n }, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: handleMeasurement\n }), tabsMarkup, activator);\n});\n\nfunction noop() {}\n\nexport { TabMeasurer };\n","import React, { PureComponent } from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from '../../Tabs.scss.js';\nimport { UnstyledLink } from '../../../UnstyledLink/UnstyledLink.js';\nimport { FeaturesContext } from '../../../../utilities/features/context.js';\n\nclass Item extends PureComponent {\n constructor(...args) {\n super(...args);\n this.context = void 0;\n this.focusedNode = null;\n\n this.setFocusedNode = node => {\n this.focusedNode = node;\n };\n }\n\n componentDidMount() {\n const {\n focusedNode\n } = this;\n const {\n focused\n } = this.props;\n\n if (focusedNode && focusedNode instanceof HTMLElement && focused) {\n focusedNode.focus();\n }\n }\n\n componentDidUpdate() {\n const {\n focusedNode\n } = this;\n const {\n focused\n } = this.props;\n\n if (focusedNode && focusedNode instanceof HTMLElement && focused) {\n focusedNode.focus();\n }\n }\n\n render() {\n const {\n id,\n panelID,\n children,\n url,\n accessibilityLabel,\n onClick = noop\n } = this.props;\n const classname = classNames(styles.Item);\n const sharedProps = {\n id,\n ref: this.setFocusedNode,\n onClick,\n className: classname,\n 'aria-controls': panelID,\n 'aria-selected': false,\n 'aria-label': accessibilityLabel\n };\n const markup = url ? /*#__PURE__*/React.createElement(UnstyledLink, Object.assign({}, sharedProps, {\n url: url\n }), children) : /*#__PURE__*/React.createElement(\"button\", Object.assign({}, sharedProps, {\n type: \"button\"\n }), children);\n return /*#__PURE__*/React.createElement(\"li\", null, markup);\n }\n\n}\nItem.contextType = FeaturesContext;\n\nfunction noop() {}\n\nexport { Item };\n","import React from 'react';\nimport styles from '../../Tabs.scss.js';\nimport { Item } from '../Item/Item.js';\n\nfunction List({\n focusIndex,\n disclosureTabs,\n onClick = noop,\n onKeyPress = noop\n}) {\n const tabs = disclosureTabs.map(({\n id,\n content,\n ...tabProps\n }, index) => {\n return /*#__PURE__*/React.createElement(Item, Object.assign({\n key: id\n }, tabProps, {\n id: id,\n focused: index === focusIndex,\n onClick: onClick.bind(null, id)\n }), content);\n });\n return /*#__PURE__*/React.createElement(\"ul\", {\n className: styles.List,\n onKeyDown: handleKeyDown,\n onKeyUp: onKeyPress\n }, tabs);\n}\n\nfunction noop() {}\n\nfunction handleKeyDown(event) {\n const {\n key\n } = event;\n\n if (key === 'ArrowLeft' || key === 'ArrowRight') {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\nexport { List };\n","import React, { PureComponent } from 'react';\nimport { CaretDownMinor, HorizontalDotsMinor } from '@shopify/polaris-icons';\nimport { classNames } from '../../utilities/css.js';\nimport { getVisibleAndHiddenTabIndices } from './utilities.js';\nimport styles from './Tabs.scss.js';\nimport { Panel } from './components/Panel/Panel.js';\nimport { TabMeasurer } from './components/TabMeasurer/TabMeasurer.js';\nimport { List } from './components/List/List.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { Tab } from './components/Tab/Tab.js';\nimport { Icon } from '../Icon/Icon.js';\nimport { Popover } from '../Popover/Popover.js';\n\nclass TabsInner extends PureComponent {\n constructor(...args) {\n super(...args);\n this.state = {\n disclosureWidth: 0,\n containerWidth: Infinity,\n tabWidths: [],\n visibleTabs: [],\n hiddenTabs: [],\n showDisclosure: false,\n tabToFocus: -1\n };\n\n this.handleKeyPress = event => {\n const {\n tabToFocus,\n visibleTabs,\n hiddenTabs,\n showDisclosure\n } = this.state;\n const key = event.key;\n const tabsArrayInOrder = showDisclosure ? visibleTabs.concat(hiddenTabs) : [...visibleTabs];\n let newFocus = tabsArrayInOrder.indexOf(tabToFocus);\n\n if (key === 'ArrowRight') {\n newFocus += 1;\n\n if (newFocus === tabsArrayInOrder.length) {\n newFocus = 0;\n }\n }\n\n if (key === 'ArrowLeft') {\n if (newFocus === -1 || newFocus === 0) {\n newFocus = tabsArrayInOrder.length - 1;\n } else {\n newFocus -= 1;\n }\n }\n\n this.setState({\n tabToFocus: tabsArrayInOrder[newFocus]\n });\n };\n\n this.renderTabMarkup = (tab, index) => {\n const {\n selected,\n children\n } = this.props;\n const {\n tabToFocus\n } = this.state;\n const tabPanelID = tab.panelID || `${tab.id}-panel`;\n return /*#__PURE__*/React.createElement(Tab, {\n key: `${index}-${tab.id}`,\n id: tab.id,\n siblingTabHasFocus: tabToFocus > -1,\n focused: index === tabToFocus,\n selected: index === selected,\n onClick: this.handleTabClick,\n panelID: children ? tabPanelID : undefined,\n accessibilityLabel: tab.accessibilityLabel,\n url: tab.url\n }, tab.content);\n };\n\n this.handleFocus = event => {\n const {\n selected,\n tabs\n } = this.props; // If we are explicitly focusing a non-selected tab, this focuses it\n\n const target = event.target;\n\n if (target.classList.contains(styles.Tab) || target.classList.contains(styles.Item)) {\n let tabToFocus = -1;\n tabs.every((tab, index) => {\n if (tab.id === target.id) {\n tabToFocus = index;\n return false;\n }\n\n return true;\n });\n this.setState({\n tabToFocus\n });\n return;\n }\n\n if (target.classList.contains(styles.DisclosureActivator)) {\n return;\n } // If we are coming in from somewhere other than another tab, focus the\n // selected tab, and the focus (click) is not on the disclosure activator,\n // focus the selected tab\n\n\n if (!event.relatedTarget) {\n this.setState({\n tabToFocus: selected\n });\n return;\n }\n\n const relatedTarget = event.relatedTarget;\n\n if (relatedTarget instanceof HTMLElement && !relatedTarget.classList.contains(styles.Tab) && !relatedTarget.classList.contains(styles.Item) && !relatedTarget.classList.contains(styles.DisclosureActivator)) {\n this.setState({\n tabToFocus: selected\n });\n }\n };\n\n this.handleBlur = event => {\n // If we blur and the target is not another tab, forget the focus position\n if (event.relatedTarget == null) {\n this.setState({\n tabToFocus: -1\n });\n return;\n }\n\n const target = event.relatedTarget; // If we are going to anywhere other than another tab, lose the last focused tab\n\n if (target instanceof HTMLElement && !target.classList.contains(styles.Tab) && !target.classList.contains(styles.Item)) {\n this.setState({\n tabToFocus: -1\n });\n }\n };\n\n this.handleDisclosureActivatorClick = () => {\n this.setState(({\n showDisclosure\n }) => ({\n showDisclosure: !showDisclosure\n }));\n };\n\n this.handleClose = () => {\n this.setState({\n showDisclosure: false\n });\n };\n\n this.handleMeasurement = measurements => {\n const {\n tabs,\n selected\n } = this.props;\n const {\n tabToFocus\n } = this.state;\n const {\n hiddenTabWidths: tabWidths,\n containerWidth,\n disclosureWidth\n } = measurements;\n const {\n visibleTabs,\n hiddenTabs\n } = getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth);\n this.setState({\n tabToFocus: tabToFocus === -1 ? -1 : selected,\n visibleTabs,\n hiddenTabs,\n disclosureWidth,\n containerWidth,\n tabWidths\n });\n };\n\n this.handleTabClick = id => {\n const {\n tabs,\n onSelect = noop\n } = this.props;\n const tab = tabs.find(aTab => aTab.id === id);\n\n if (tab == null) {\n return;\n }\n\n const selectedIndex = tabs.indexOf(tab);\n onSelect(selectedIndex);\n };\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const {\n disclosureWidth,\n tabWidths,\n containerWidth\n } = prevState;\n const {\n visibleTabs,\n hiddenTabs\n } = getVisibleAndHiddenTabIndices(nextProps.tabs, nextProps.selected, disclosureWidth, tabWidths, containerWidth);\n return {\n visibleTabs,\n hiddenTabs,\n selected: nextProps.selected\n };\n }\n\n render() {\n const {\n tabs,\n selected,\n fitted,\n children,\n i18n,\n disclosureText\n } = this.props;\n const {\n tabToFocus,\n visibleTabs,\n hiddenTabs,\n showDisclosure\n } = this.state;\n const disclosureTabs = hiddenTabs.map(tabIndex => tabs[tabIndex]);\n const panelMarkup = children ? tabs.map((_tab, index) => {\n return selected === index ? /*#__PURE__*/React.createElement(Panel, {\n id: tabs[index].panelID || `${tabs[index].id}-panel`,\n tabID: tabs[index].id,\n key: tabs[index].id\n }, children) : /*#__PURE__*/React.createElement(Panel, {\n id: tabs[index].panelID || `${tabs[index].id}-panel`,\n tabID: tabs[index].id,\n key: tabs[index].id,\n hidden: true\n });\n }) : null;\n const tabsMarkup = visibleTabs.sort((tabA, tabB) => tabA - tabB).map(tabIndex => this.renderTabMarkup(tabs[tabIndex], tabIndex));\n const disclosureActivatorVisible = visibleTabs.length < tabs.length;\n const hasCustomDisclosure = Boolean(disclosureText);\n const classname = classNames(styles.Tabs, fitted && styles.fitted, disclosureActivatorVisible && styles.fillSpace);\n const disclosureTabClassName = classNames(styles.DisclosureTab, disclosureActivatorVisible && styles['DisclosureTab-visible']);\n const disclosureButtonClassName = classNames(styles.DisclosureActivator, hasCustomDisclosure && styles.Tab);\n const disclosureButtonContentWrapperClassName = classNames(styles.Title, hasCustomDisclosure && styles.titleWithIcon);\n const disclosureButtonContent = hasCustomDisclosure ? /*#__PURE__*/React.createElement(React.Fragment, null, disclosureText, /*#__PURE__*/React.createElement(Icon, {\n source: CaretDownMinor,\n color: \"subdued\"\n })) : /*#__PURE__*/React.createElement(Icon, {\n source: HorizontalDotsMinor,\n color: \"subdued\"\n });\n const disclosureButton = /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: disclosureButtonClassName,\n onClick: this.handleDisclosureActivatorClick,\n \"aria-label\": i18n.translate('Polaris.Tabs.toggleTabsLabel')\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: disclosureButtonContentWrapperClassName\n }, disclosureButtonContent));\n const activator = disclosureText ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.TabContainer\n }, disclosureButton) : disclosureButton;\n return /*#__PURE__*/React.createElement(\"div\", null, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Wrapper\n }, /*#__PURE__*/React.createElement(TabMeasurer, {\n tabToFocus: tabToFocus,\n activator: activator,\n selected: selected,\n tabs: tabs,\n siblingTabHasFocus: tabToFocus > -1,\n handleMeasurement: this.handleMeasurement\n }), /*#__PURE__*/React.createElement(\"ul\", {\n role: \"tablist\",\n className: classname,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown: handleKeyDown,\n onKeyUp: this.handleKeyPress\n }, tabsMarkup, /*#__PURE__*/React.createElement(\"li\", {\n className: disclosureTabClassName,\n role: \"presentation\"\n }, /*#__PURE__*/React.createElement(Popover, {\n preferredPosition: \"below\",\n activator: activator,\n active: disclosureActivatorVisible && showDisclosure,\n onClose: this.handleClose,\n autofocusTarget: \"first-node\"\n }, /*#__PURE__*/React.createElement(List, {\n focusIndex: hiddenTabs.indexOf(tabToFocus),\n disclosureTabs: disclosureTabs,\n onClick: this.handleTabClick,\n onKeyPress: this.handleKeyPress\n }))))), panelMarkup);\n }\n\n}\n\nfunction noop() {}\n\nfunction handleKeyDown(event) {\n const {\n key\n } = event;\n\n if (key === 'ArrowLeft' || key === 'ArrowRight') {\n event.preventDefault();\n event.stopPropagation();\n }\n}\n\nfunction Tabs(props) {\n const i18n = useI18n();\n return /*#__PURE__*/React.createElement(TabsInner, Object.assign({}, props, {\n i18n: i18n\n }));\n}\n\nexport { Tabs };\n","var styles = {\n \"TextContainer\": \"Polaris-TextContainer\",\n \"spacingTight\": \"Polaris-TextContainer--spacingTight\",\n \"spacingLoose\": \"Polaris-TextContainer--spacingLoose\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport styles from './TextContainer.scss.js';\n\nfunction TextContainer({\n spacing,\n children\n}) {\n const className = classNames(styles.TextContainer, spacing && styles[variationName('spacing', spacing)]);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, children);\n}\n\nexport { TextContainer };\n","var styles = {\n \"TextField\": \"Polaris-TextField\",\n \"multiline\": \"Polaris-TextField--multiline\",\n \"Input\": \"Polaris-TextField__Input\",\n \"hasValue\": \"Polaris-TextField--hasValue\",\n \"focus\": \"Polaris-TextField--focus\",\n \"VerticalContent\": \"Polaris-TextField__VerticalContent\",\n \"Backdrop\": \"Polaris-TextField__Backdrop\",\n \"error\": \"Polaris-TextField--error\",\n \"readOnly\": \"Polaris-TextField--readOnly\",\n \"disabled\": \"Polaris-TextField--disabled\",\n \"Prefix\": \"Polaris-TextField__Prefix\",\n \"suggestion\": \"Polaris-TextField--suggestion\",\n \"Input-hasClearButton\": \"Polaris-TextField__Input--hasClearButton\",\n \"Input-suffixed\": \"Polaris-TextField__Input--suffixed\",\n \"Input-alignRight\": \"Polaris-TextField__Input--alignRight\",\n \"Input-alignLeft\": \"Polaris-TextField__Input--alignLeft\",\n \"Input-alignCenter\": \"Polaris-TextField__Input--alignCenter\",\n \"Suffix\": \"Polaris-TextField__Suffix\",\n \"CharacterCount\": \"Polaris-TextField__CharacterCount\",\n \"AlignFieldBottom\": \"Polaris-TextField__AlignFieldBottom\",\n \"ClearButton\": \"Polaris-TextField__ClearButton\",\n \"Spinner\": \"Polaris-TextField__Spinner\",\n \"SpinnerIcon\": \"Polaris-TextField__SpinnerIcon\",\n \"Resizer\": \"Polaris-TextField__Resizer\",\n \"DummyInput\": \"Polaris-TextField__DummyInput\",\n \"Segment\": \"Polaris-TextField__Segment\",\n \"monospaced\": \"Polaris-TextField--monospaced\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { CaretUpMinor, CaretDownMinor } from '@shopify/polaris-icons';\nimport styles from '../../TextField.scss.js';\nimport { Icon } from '../../../Icon/Icon.js';\n\nconst Spinner = /*#__PURE__*/React.forwardRef(function Spinner({\n onChange,\n onClick,\n onMouseDown,\n onMouseUp\n}, ref) {\n function handleStep(step) {\n return () => onChange(step);\n }\n\n function handleMouseDown(onChange) {\n return event => {\n if (event.button !== 0) return;\n onMouseDown(onChange);\n };\n }\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Spinner,\n onClick: onClick,\n \"aria-hidden\": true,\n ref: ref\n }, /*#__PURE__*/React.createElement(\"div\", {\n role: \"button\",\n className: styles.Segment,\n tabIndex: -1,\n onClick: handleStep(1),\n onMouseDown: handleMouseDown(handleStep(1)),\n onMouseUp: onMouseUp\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SpinnerIcon\n }, /*#__PURE__*/React.createElement(Icon, {\n source: CaretUpMinor\n }))), /*#__PURE__*/React.createElement(\"div\", {\n role: \"button\",\n className: styles.Segment,\n tabIndex: -1,\n onClick: handleStep(-1),\n onMouseDown: handleMouseDown(handleStep(-1)),\n onMouseUp: onMouseUp\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SpinnerIcon\n }, /*#__PURE__*/React.createElement(Icon, {\n source: CaretDownMinor\n }))));\n});\n\nexport { Spinner };\n","var styles = {\n \"Connected\": \"Polaris-Connected\",\n \"Item\": \"Polaris-Connected__Item\",\n \"Item-primary\": \"Polaris-Connected__Item--primary\",\n \"Item-focused\": \"Polaris-Connected__Item--focused\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { useToggle } from '../../../../utilities/use-toggle.js';\nimport styles from '../../Connected.scss.js';\n\nfunction Item({\n children,\n position\n}) {\n const {\n value: focused,\n setTrue: forceTrueFocused,\n setFalse: forceFalseFocused\n } = useToggle(false);\n const className = classNames(styles.Item, focused && styles['Item-focused'], position === 'primary' ? styles['Item-primary'] : styles['Item-connection']);\n return /*#__PURE__*/React.createElement(\"div\", {\n onBlur: forceFalseFocused,\n onFocus: forceTrueFocused,\n className: className\n }, children);\n}\n\nexport { Item };\n","import React from 'react';\nimport styles from './Connected.scss.js';\nimport { Item } from './components/Item/Item.js';\n\nfunction Connected({\n children,\n left,\n right\n}) {\n const leftConnectionMarkup = left ? /*#__PURE__*/React.createElement(Item, {\n position: \"left\"\n }, left) : null;\n const rightConnectionMarkup = right ? /*#__PURE__*/React.createElement(Item, {\n position: \"right\"\n }, right) : null;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Connected\n }, leftConnectionMarkup, /*#__PURE__*/React.createElement(Item, {\n position: \"primary\"\n }, children), rightConnectionMarkup);\n}\n\nexport { Connected };\n","import React, { useRef, useEffect, useCallback, useLayoutEffect } from 'react';\nimport styles from '../../TextField.scss.js';\nimport { EventListener } from '../../../EventListener/EventListener.js';\n\nfunction Resizer({\n contents,\n currentHeight: currentHeightProp = null,\n minimumLines,\n onHeightChange\n}) {\n const contentNode = useRef(null);\n const minimumLinesNode = useRef(null);\n const animationFrame = useRef();\n const currentHeight = useRef(currentHeightProp);\n\n if (currentHeightProp !== currentHeight.current) {\n currentHeight.current = currentHeightProp;\n }\n\n useEffect(() => {\n return () => {\n if (animationFrame.current) {\n cancelAnimationFrame(animationFrame.current);\n }\n };\n }, []);\n const minimumLinesMarkup = minimumLines ? /*#__PURE__*/React.createElement(\"div\", {\n ref: minimumLinesNode,\n className: styles.DummyInput,\n dangerouslySetInnerHTML: {\n __html: getContentsForMinimumLines(minimumLines)\n }\n }) : null;\n const handleHeightCheck = useCallback(() => {\n if (animationFrame.current) {\n cancelAnimationFrame(animationFrame.current);\n }\n\n animationFrame.current = requestAnimationFrame(() => {\n if (!contentNode.current || !minimumLinesNode.current) {\n return;\n }\n\n const newHeight = Math.max(contentNode.current.offsetHeight, minimumLinesNode.current.offsetHeight);\n\n if (newHeight !== currentHeight.current) {\n onHeightChange(newHeight);\n }\n });\n }, [onHeightChange]);\n useLayoutEffect(() => {\n handleHeightCheck();\n });\n return /*#__PURE__*/React.createElement(\"div\", {\n \"aria-hidden\": true,\n className: styles.Resizer\n }, /*#__PURE__*/React.createElement(EventListener, {\n event: \"resize\",\n handler: handleHeightCheck\n }), /*#__PURE__*/React.createElement(\"div\", {\n ref: contentNode,\n className: styles.DummyInput,\n dangerouslySetInnerHTML: {\n __html: getFinalContents(contents)\n }\n }), minimumLinesMarkup);\n}\nconst ENTITIES_TO_REPLACE = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\\n': '
',\n '\\r': ''\n};\nconst REPLACE_REGEX = new RegExp(`[${Object.keys(ENTITIES_TO_REPLACE).join()}]`, 'g');\n\nfunction replaceEntity(entity) {\n return ENTITIES_TO_REPLACE[entity];\n}\n\nfunction getContentsForMinimumLines(minimumLines) {\n let content = '';\n\n for (let line = 0; line < minimumLines; line++) {\n content += '
';\n }\n\n return content;\n}\n\nfunction getFinalContents(contents) {\n return contents ? `${contents.replace(REPLACE_REGEX, replaceEntity)}
` : '
';\n}\n\nexport { Resizer };\n","import React, { useState, useRef, useEffect, useCallback, createElement } from 'react';\nimport { CircleCancelMinor } from '@shopify/polaris-icons';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport { useIsAfterInitialMount } from '../../utilities/use-is-after-initial-mount.js';\nimport { Key } from '../../types.js';\nimport styles from './TextField.scss.js';\nimport { Spinner } from './components/Spinner/Spinner.js';\nimport { Labelled, helpTextID } from '../Labelled/Labelled.js';\nimport { Connected } from '../Connected/Connected.js';\nimport { Resizer } from './components/Resizer/Resizer.js';\nimport { labelID } from '../Label/Label.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';\nimport { Icon } from '../Icon/Icon.js';\n\nfunction TextField({\n prefix,\n suffix,\n verticalContent,\n placeholder,\n value = '',\n helpText,\n label,\n labelAction,\n labelHidden,\n disabled,\n clearButton,\n readOnly,\n autoFocus,\n focused,\n multiline,\n error,\n connectedRight,\n connectedLeft,\n type = 'text',\n name,\n id: idProp,\n role,\n step,\n autoComplete,\n max,\n maxLength,\n maxHeight,\n min,\n minLength,\n pattern,\n inputMode,\n spellCheck,\n ariaOwns,\n ariaControls,\n ariaExpanded,\n ariaActiveDescendant,\n ariaAutocomplete,\n showCharacterCount,\n align,\n requiredIndicator,\n monospaced,\n selectTextOnFocus,\n suggestion,\n onClearButtonClick,\n onChange,\n onFocus,\n onBlur\n}) {\n const i18n = useI18n();\n const [height, setHeight] = useState(null);\n const [focus, setFocus] = useState(Boolean(focused));\n const isAfterInitial = useIsAfterInitialMount();\n const id = useUniqueId('TextField', idProp);\n const inputRef = useRef(null);\n const textAreaRef = useRef(null);\n const prefixRef = useRef(null);\n const suffixRef = useRef(null);\n const verticalContentRef = useRef(null);\n const buttonPressTimer = useRef();\n const spinnerRef = useRef(null);\n useEffect(() => {\n const input = multiline ? textAreaRef.current : inputRef.current;\n if (!input || focused === undefined) return;\n focused ? input.focus() : input.blur();\n }, [focused, verticalContent, multiline]);\n useEffect(() => {\n const input = inputRef.current;\n const isSupportedInputType = type === 'text' || type === 'tel' || type === 'search' || type === 'url' || type === 'password';\n\n if (!input || !isSupportedInputType || !suggestion) {\n return;\n }\n\n input.setSelectionRange(value.length, suggestion.length);\n }, [focus, value, type, suggestion]);\n const normalizedValue = suggestion ? suggestion : value;\n const normalizedStep = step != null ? step : 1;\n const normalizedMax = max != null ? max : Infinity;\n const normalizedMin = min != null ? min : -Infinity;\n const className = classNames(styles.TextField, Boolean(normalizedValue) && styles.hasValue, disabled && styles.disabled, readOnly && styles.readOnly, error && styles.error, multiline && styles.multiline, focus && styles.focus);\n const inputType = type === 'currency' ? 'text' : type;\n const prefixMarkup = prefix ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Prefix,\n id: `${id}-Prefix`,\n ref: prefixRef\n }, prefix) : null;\n const suffixMarkup = suffix ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Suffix,\n id: `${id}-Suffix`,\n ref: suffixRef\n }, suffix) : null;\n let characterCountMarkup = null;\n\n if (showCharacterCount) {\n const characterCount = normalizedValue.length;\n const characterCountLabel = maxLength ? i18n.translate('Polaris.TextField.characterCountWithMaxLength', {\n count: characterCount,\n limit: maxLength\n }) : i18n.translate('Polaris.TextField.characterCount', {\n count: characterCount\n });\n const characterCountClassName = classNames(styles.CharacterCount, multiline && styles.AlignFieldBottom);\n const characterCountText = !maxLength ? characterCount : `${characterCount}/${maxLength}`;\n characterCountMarkup = /*#__PURE__*/React.createElement(\"div\", {\n id: `${id}-CharacterCounter`,\n className: characterCountClassName,\n \"aria-label\": characterCountLabel,\n \"aria-live\": focus ? 'polite' : 'off',\n \"aria-atomic\": \"true\",\n onClick: handleClickChild\n }, characterCountText);\n }\n\n const clearButtonVisible = normalizedValue !== '';\n const clearButtonMarkup = clearButton && clearButtonVisible ? /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: styles.ClearButton,\n onClick: handleClearButtonPress,\n disabled: disabled\n }, /*#__PURE__*/React.createElement(VisuallyHidden, null, i18n.translate('Polaris.Common.clear')), /*#__PURE__*/React.createElement(Icon, {\n source: CircleCancelMinor,\n color: \"base\"\n })) : null;\n const handleNumberChange = useCallback(steps => {\n if (onChange == null) {\n return;\n } // Returns the length of decimal places in a number\n\n\n const dpl = num => (num.toString().split('.')[1] || []).length;\n\n const numericValue = value ? parseFloat(value) : 0;\n\n if (isNaN(numericValue)) {\n return;\n } // Making sure the new value has the same length of decimal places as the\n // step / value has.\n\n\n const decimalPlaces = Math.max(dpl(numericValue), dpl(normalizedStep));\n const newValue = Math.min(Number(normalizedMax), Math.max(numericValue + steps * normalizedStep, Number(normalizedMin)));\n onChange(String(newValue.toFixed(decimalPlaces)), id);\n }, [id, normalizedMax, normalizedMin, onChange, normalizedStep, value]);\n const handleButtonRelease = useCallback(() => {\n clearTimeout(buttonPressTimer.current);\n }, []);\n const handleButtonPress = useCallback(onChange => {\n const minInterval = 50;\n const decrementBy = 10;\n let interval = 200;\n\n const onChangeInterval = () => {\n if (interval > minInterval) interval -= decrementBy;\n onChange(0);\n buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);\n };\n\n buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);\n document.addEventListener('mouseup', handleButtonRelease, {\n once: true\n });\n }, [handleButtonRelease]);\n const spinnerMarkup = type === 'number' && step !== 0 && !disabled && !readOnly ? /*#__PURE__*/React.createElement(Spinner, {\n onClick: handleClickChild,\n onChange: handleNumberChange,\n onMouseDown: handleButtonPress,\n onMouseUp: handleButtonRelease,\n ref: spinnerRef\n }) : null;\n const style = multiline && height ? {\n height,\n maxHeight\n } : null;\n const handleExpandingResize = useCallback(height => {\n setHeight(height);\n }, []);\n const resizer = multiline && isAfterInitial ? /*#__PURE__*/React.createElement(Resizer, {\n contents: normalizedValue || placeholder,\n currentHeight: height,\n minimumLines: typeof multiline === 'number' ? multiline : 1,\n onHeightChange: handleExpandingResize\n }) : null;\n const describedBy = [];\n\n if (error) {\n describedBy.push(`${id}Error`);\n }\n\n if (helpText) {\n describedBy.push(helpTextID(id));\n }\n\n if (showCharacterCount) {\n describedBy.push(`${id}-CharacterCounter`);\n }\n\n const labelledBy = [];\n\n if (prefix) {\n labelledBy.push(`${id}-Prefix`);\n }\n\n if (suffix) {\n labelledBy.push(`${id}-Suffix`);\n }\n\n if (verticalContent) {\n labelledBy.push(`${id}-VerticalContent`);\n }\n\n labelledBy.unshift(labelID(id));\n const inputClassName = classNames(styles.Input, align && styles[variationName('Input-align', align)], suffix && styles['Input-suffixed'], clearButton && styles['Input-hasClearButton'], monospaced && styles.monospaced, suggestion && styles.suggestion);\n\n const handleOnFocus = event => {\n setFocus(true);\n\n if (selectTextOnFocus && !suggestion) {\n const input = multiline ? textAreaRef.current : inputRef.current;\n input === null || input === void 0 ? void 0 : input.select();\n }\n\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleOnBlur = event => {\n setFocus(false);\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const input = /*#__PURE__*/createElement(multiline ? 'textarea' : 'input', {\n name,\n id,\n disabled,\n readOnly,\n role,\n autoFocus,\n value: normalizedValue,\n placeholder,\n style,\n autoComplete,\n className: inputClassName,\n ref: multiline ? textAreaRef : inputRef,\n min,\n max,\n step,\n minLength,\n maxLength,\n spellCheck,\n pattern,\n inputMode,\n type: inputType,\n rows: getRows(multiline),\n 'aria-describedby': describedBy.length ? describedBy.join(' ') : undefined,\n 'aria-labelledby': labelledBy.join(' '),\n 'aria-invalid': Boolean(error),\n 'aria-owns': ariaOwns,\n 'aria-activedescendant': ariaActiveDescendant,\n 'aria-autocomplete': ariaAutocomplete,\n 'aria-controls': ariaControls,\n 'aria-expanded': ariaExpanded,\n 'aria-required': requiredIndicator,\n ...normalizeAriaMultiline(multiline),\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n onClick: handleClickChild,\n onKeyPress: handleKeyPress,\n onChange: !suggestion ? handleChange : undefined,\n onInput: suggestion ? handleChange : undefined\n });\n const inputWithVerticalContentMarkup = verticalContent ? /*#__PURE__*/React.createElement(\"div\", {\n className: styles.VerticalContent,\n id: `${id}-VerticalContent`,\n ref: verticalContentRef,\n onClick: handleClickChild\n }, verticalContent, input) : null;\n const inputMarkup = verticalContent ? inputWithVerticalContentMarkup : input;\n const backdropMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.Backdrop, connectedLeft && styles['Backdrop-connectedLeft'], connectedRight && styles['Backdrop-connectedRight'])\n });\n return /*#__PURE__*/React.createElement(Labelled, {\n label: label,\n id: id,\n error: error,\n action: labelAction,\n labelHidden: labelHidden,\n helpText: helpText,\n requiredIndicator: requiredIndicator\n }, /*#__PURE__*/React.createElement(Connected, {\n left: connectedLeft,\n right: connectedRight\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n onClick: handleClick\n }, prefixMarkup, inputMarkup, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, backdropMarkup, resizer)));\n\n function handleChange(event) {\n onChange && onChange(event.currentTarget.value, id);\n }\n\n function handleClick({\n target\n }) {\n var _inputRef$current;\n\n if (isPrefixOrSuffix(target) || isVerticalContent(target) || isInput(target) || isSpinner(target) || focus) {\n return;\n }\n\n (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();\n }\n\n function handleClickChild(event) {\n if (!isSpinner(event.target) && !isInput(event.target)) {\n event.stopPropagation();\n }\n\n if (isPrefixOrSuffix(event.target) || isVerticalContent(event.target) || isInput(event.target) || focus) {\n return;\n }\n\n setFocus(true);\n }\n\n function handleClearButtonPress() {\n onClearButtonClick && onClearButtonClick(id);\n }\n\n function handleKeyPress(event) {\n const {\n key,\n which\n } = event;\n const numbersSpec = /[\\d.eE+-]$/;\n\n if (type !== 'number' || which === Key.Enter || numbersSpec.test(key)) {\n return;\n }\n\n event.preventDefault();\n }\n\n function isInput(target) {\n return target instanceof HTMLElement && inputRef.current && (inputRef.current.contains(target) || inputRef.current.contains(document.activeElement));\n }\n\n function isPrefixOrSuffix(target) {\n return target instanceof Element && (prefixRef.current && prefixRef.current.contains(target) || suffixRef.current && suffixRef.current.contains(target));\n }\n\n function isSpinner(target) {\n return target instanceof Element && spinnerRef.current && spinnerRef.current.contains(target);\n }\n\n function isVerticalContent(target) {\n return target instanceof Element && verticalContentRef.current && (verticalContentRef.current.contains(target) || verticalContentRef.current.contains(document.activeElement));\n }\n}\n\nfunction getRows(multiline) {\n if (!multiline) return undefined;\n return typeof multiline === 'number' ? multiline : 1;\n}\n\nfunction normalizeAriaMultiline(multiline) {\n if (!multiline) return undefined;\n return Boolean(multiline) || multiline > 0 ? {\n 'aria-multiline': true\n } : undefined;\n}\n\nexport { TextField };\n","import React from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport styles from './TextStyle.scss.js';\n\nvar VariationValue;\n\n(function (VariationValue) {\n VariationValue[\"Positive\"] = \"positive\";\n VariationValue[\"Negative\"] = \"negative\";\n VariationValue[\"Warning\"] = \"warning\";\n VariationValue[\"Strong\"] = \"strong\";\n VariationValue[\"Subdued\"] = \"subdued\";\n VariationValue[\"Code\"] = \"code\";\n})(VariationValue || (VariationValue = {}));\n\nfunction TextStyle({\n variation,\n children\n}) {\n const className = classNames(variation && styles[variationName('variation', variation)], variation === VariationValue.Code && styles.code);\n const Element = variationElement(variation);\n return /*#__PURE__*/React.createElement(Element, {\n className: className\n }, children);\n}\n\nfunction variationElement(variation) {\n return variation === VariationValue.Code ? 'code' : 'span';\n}\n\nexport { TextStyle };\n","var styles = {\n \"variationPositive\": \"Polaris-TextStyle--variationPositive\",\n \"variationNegative\": \"Polaris-TextStyle--variationNegative\",\n \"variationWarning\": \"Polaris-TextStyle--variationWarning\",\n \"variationCode\": \"Polaris-TextStyle--variationCode\",\n \"variationStrong\": \"Polaris-TextStyle--variationStrong\",\n \"variationSubdued\": \"Polaris-TextStyle--variationSubdued\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Thumbnail\": \"Polaris-Thumbnail\",\n \"sizeExtraSmall\": \"Polaris-Thumbnail--sizeExtraSmall\",\n \"sizeSmall\": \"Polaris-Thumbnail--sizeSmall\",\n \"sizeMedium\": \"Polaris-Thumbnail--sizeMedium\",\n \"sizeLarge\": \"Polaris-Thumbnail--sizeLarge\",\n \"transparent\": \"Polaris-Thumbnail--transparent\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames, variationName } from '../../utilities/css.js';\nimport styles from './Thumbnail.scss.js';\nimport { Image } from '../Image/Image.js';\nimport { Icon } from '../Icon/Icon.js';\n\nfunction Thumbnail({\n source,\n alt,\n size = 'medium',\n transparent\n}) {\n const className = classNames(styles.Thumbnail, size && styles[variationName('size', size)], transparent && styles.transparent);\n const content = typeof source === 'string' ? /*#__PURE__*/React.createElement(Image, {\n alt: alt,\n source: source\n }) : /*#__PURE__*/React.createElement(Icon, {\n accessibilityLabel: alt,\n source: source\n });\n return /*#__PURE__*/React.createElement(\"span\", {\n className: className\n }, content);\n}\n\nexport { Thumbnail };\n","import { memo } from 'react';\nimport { useDeepEffect } from '../../utilities/use-deep-effect.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\nimport { useFrame } from '../../utilities/frame/hooks.js';\n\n// that the interface defining the props is defined in this file, not imported\n// from elsewhere. This silly workaround ensures that the Props Explorer table\n// is generated correctly.\n\nconst Toast = /*#__PURE__*/memo(function Toast(props) {\n const id = useUniqueId('Toast');\n const {\n showToast,\n hideToast\n } = useFrame();\n useDeepEffect(() => {\n showToast({\n id,\n ...props\n });\n return () => {\n hideToast({\n id\n });\n };\n }, [props]);\n return null;\n});\n\nexport { Toast };\n","var styles = {\n \"TooltipOverlay\": \"Polaris-Tooltip-TooltipOverlay\",\n \"measuring\": \"Polaris-Tooltip-TooltipOverlay--measuring\",\n \"positionedAbove\": \"Polaris-Tooltip-TooltipOverlay--positionedAbove\",\n \"Content\": \"Polaris-Tooltip-TooltipOverlay__Content\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport { layer } from '../../../shared.js';\nimport styles from './TooltipOverlay.scss.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { PositionedOverlay } from '../../../PositionedOverlay/PositionedOverlay.js';\n\nfunction TooltipOverlay({\n active,\n activator,\n preferredPosition = 'below',\n preventInteraction,\n id,\n children,\n accessibilityLabel\n}) {\n const i18n = useI18n();\n const markup = active ? /*#__PURE__*/React.createElement(PositionedOverlay, {\n active: active,\n activator: activator,\n preferredPosition: preferredPosition,\n preventInteraction: preventInteraction,\n render: renderTooltip\n }) : null;\n return markup;\n\n function renderTooltip(overlayDetails) {\n const {\n measuring,\n desiredHeight,\n positioning\n } = overlayDetails;\n const containerClassName = classNames(styles.TooltipOverlay, measuring && styles.measuring, positioning === 'above' && styles.positionedAbove);\n const contentStyles = measuring ? undefined : {\n minHeight: desiredHeight\n };\n return /*#__PURE__*/React.createElement(\"div\", Object.assign({\n className: containerClassName\n }, layer.props), /*#__PURE__*/React.createElement(\"div\", {\n id: id,\n role: \"tooltip\",\n className: styles.Content,\n style: contentStyles,\n \"aria-label\": accessibilityLabel ? i18n.translate('Polaris.TooltipOverlay.accessibilityLabel', {\n label: accessibilityLabel\n }) : undefined\n }, children));\n }\n}\n\nexport { TooltipOverlay };\n","import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { findFirstFocusableNode } from '../../utilities/focus.js';\nimport { useToggle } from '../../utilities/use-toggle.js';\nimport { Key } from '../../types.js';\nimport { TooltipOverlay } from './components/TooltipOverlay/TooltipOverlay.js';\nimport { useUniqueId } from '../../utilities/unique-id/hooks.js';\nimport { Portal } from '../Portal/Portal.js';\n\nfunction Tooltip({\n children,\n content,\n dismissOnMouseOut,\n active: originalActive,\n preferredPosition = 'below',\n activatorWrapper = 'span',\n accessibilityLabel\n}) {\n const WrapperComponent = activatorWrapper;\n const {\n value: active,\n setTrue: handleFocus,\n setFalse: handleBlur\n } = useToggle(Boolean(originalActive));\n const [activatorNode, setActivatorNode] = useState(null);\n const id = useUniqueId('TooltipContent');\n const activatorContainer = useRef(null);\n const mouseEntered = useRef(false);\n useEffect(() => {\n const firstFocusable = activatorContainer.current ? findFirstFocusableNode(activatorContainer.current) : null;\n const accessibilityNode = firstFocusable || activatorContainer.current;\n if (!accessibilityNode) return;\n accessibilityNode.tabIndex = 0;\n accessibilityNode.setAttribute('aria-describedby', id);\n accessibilityNode.setAttribute('data-polaris-tooltip-activator', 'true');\n }, [id, children]);\n const handleKeyUp = useCallback(event => {\n if (event.keyCode !== Key.Escape) return;\n handleBlur();\n }, [handleBlur]);\n const portal = activatorNode ? /*#__PURE__*/React.createElement(Portal, {\n idPrefix: \"tooltip\"\n }, /*#__PURE__*/React.createElement(TooltipOverlay, {\n id: id,\n preferredPosition: preferredPosition,\n activator: activatorNode,\n active: active,\n accessibilityLabel: accessibilityLabel,\n onClose: noop,\n preventInteraction: dismissOnMouseOut\n }, content)) : null;\n return /*#__PURE__*/React.createElement(WrapperComponent, {\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseLeave: handleMouseLeave,\n onMouseOver: handleMouseEnterFix,\n ref: setActivator,\n onKeyUp: handleKeyUp\n }, children, portal);\n\n function setActivator(node) {\n const activatorContainerRef = activatorContainer;\n\n if (node == null) {\n activatorContainerRef.current = null;\n setActivatorNode(null);\n return;\n }\n\n node.firstElementChild instanceof HTMLElement && setActivatorNode(node.firstElementChild);\n activatorContainerRef.current = node;\n }\n\n function handleMouseEnter() {\n mouseEntered.current = true;\n handleFocus();\n }\n\n function handleMouseLeave() {\n mouseEntered.current = false;\n handleBlur();\n } // https://github.com/facebook/react/issues/10109\n // Mouseenter event not triggered when cursor moves from disabled button\n\n\n function handleMouseEnterFix() {\n !mouseEntered.current && handleMouseEnter();\n }\n}\n\nfunction noop() {}\n\nexport { Tooltip };\n","import React from 'react';\n\nvar SvgMobileHamburgerMajor = function SvgMobileHamburgerMajor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 11h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z\"\n }));\n};\n\nexport { SvgMobileHamburgerMajor as S };\n","var styles = {\n \"TopBar\": \"Polaris-TopBar\",\n \"LogoDisplayControl\": \"Polaris-TopBar__LogoDisplayControl\",\n \"LogoDisplayContainer\": \"Polaris-TopBar__LogoDisplayContainer\",\n \"LogoContainer\": \"Polaris-TopBar__LogoContainer\",\n \"hasLogoSuffix\": \"Polaris-TopBar--hasLogoSuffix\",\n \"Logo\": \"Polaris-TopBar__Logo\",\n \"LogoLink\": \"Polaris-TopBar__LogoLink\",\n \"ContextControl\": \"Polaris-TopBar__ContextControl\",\n \"NavigationIcon\": \"Polaris-TopBar__NavigationIcon\",\n \"focused\": \"Polaris-TopBar--focused\",\n \"IconWrapper\": \"Polaris-TopBar__IconWrapper\",\n \"Contents\": \"Polaris-TopBar__Contents\",\n \"SearchField\": \"Polaris-TopBar__SearchField\",\n \"SecondaryMenu\": \"Polaris-TopBar__SecondaryMenu\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Search\": \"Polaris-TopBar-Search\",\n \"SearchContent\": \"Polaris-TopBar-Search__SearchContent\",\n \"visible\": \"Polaris-TopBar-Search--visible\",\n \"Results\": \"Polaris-TopBar-Search__Results\"\n};\n\nexport { styles as default };\n","var styles = {\n \"SearchDismissOverlay\": \"Polaris-TopBar-SearchDismissOverlay\",\n \"visible\": \"Polaris-TopBar-SearchDismissOverlay--visible\"\n};\n\nexport { styles as default };\n","import React, { useRef, useCallback } from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from './SearchDismissOverlay.scss.js';\nimport { ScrollLock } from '../../../ScrollLock/ScrollLock.js';\n\nfunction SearchDismissOverlay({\n onDismiss,\n visible\n}) {\n const node = useRef(null);\n const handleDismiss = useCallback(({\n target\n }) => {\n if (target === node.current && onDismiss != null) {\n onDismiss();\n }\n }, [onDismiss]);\n return /*#__PURE__*/React.createElement(React.Fragment, null, visible ? /*#__PURE__*/React.createElement(ScrollLock, null) : null, /*#__PURE__*/React.createElement(\"div\", {\n ref: node,\n className: classNames(styles.SearchDismissOverlay, visible && styles.visible),\n onClick: handleDismiss\n }));\n}\n\nexport { SearchDismissOverlay };\n","import React from 'react';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from './Search.scss.js';\nimport { SearchDismissOverlay } from '../SearchDismissOverlay/SearchDismissOverlay.js';\nimport { CustomProperties } from '../../../CustomProperties/CustomProperties.js';\n\nfunction Search({\n visible,\n children,\n onDismiss,\n overlayVisible = false\n}) {\n if (children == null) {\n return null;\n }\n\n const overlayMarkup = visible ? /*#__PURE__*/React.createElement(SearchDismissOverlay, {\n onDismiss: onDismiss,\n visible: overlayVisible\n }) : null;\n return /*#__PURE__*/React.createElement(React.Fragment, null, overlayMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.Search, visible && styles.visible)\n }, /*#__PURE__*/React.createElement(CustomProperties, {\n colorScheme: \"dark\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SearchContent\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Results\n }, children)))));\n}\n\nexport { Search };\n","var styles = {\n \"SearchField\": \"Polaris-TopBar-SearchField\",\n \"focused\": \"Polaris-TopBar-SearchField--focused\",\n \"Input\": \"Polaris-TopBar-SearchField__Input\",\n \"Backdrop\": \"Polaris-TopBar-SearchField__Backdrop\",\n \"BackdropShowFocusBorder\": \"Polaris-TopBar-SearchField__BackdropShowFocusBorder\",\n \"Icon\": \"Polaris-TopBar-SearchField__Icon\",\n \"Clear\": \"Polaris-TopBar-SearchField__Clear\"\n};\n\nexport { styles as default };\n","import React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { CircleCancelMinor, SearchMinor } from '@shopify/polaris-icons';\nimport { classNames } from '../../../../utilities/css.js';\nimport styles from './SearchField.scss.js';\nimport { useI18n } from '../../../../utilities/i18n/hooks.js';\nimport { useUniqueId } from '../../../../utilities/unique-id/hooks.js';\nimport { Icon } from '../../../Icon/Icon.js';\nimport { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden.js';\n\nfunction SearchField({\n value,\n focused,\n active,\n placeholder,\n onChange,\n onFocus,\n onBlur,\n onCancel,\n showFocusBorder\n}) {\n const i18n = useI18n();\n const [forceActive, setForceActive] = useState(false);\n const input = useRef(null);\n const searchId = useUniqueId('SearchField');\n const handleChange = useCallback(({\n currentTarget\n }) => {\n onChange(currentTarget.value);\n }, [onChange]);\n const handleFocus = useCallback(() => onFocus && onFocus(), [onFocus]);\n const handleBlur = useCallback(() => onBlur && onBlur(), [onBlur]);\n const handleClear = useCallback(() => {\n onCancel && onCancel();\n\n if (!input.current) {\n return;\n }\n\n input.current.value = '';\n onChange('');\n input.current.focus();\n }, [onCancel, onChange]);\n useEffect(() => {\n if (!input.current) {\n return;\n }\n\n if (focused) {\n input.current.focus();\n } else {\n input.current.blur();\n }\n }, [focused]);\n const clearMarkup = value !== '' && /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n \"aria-label\": i18n.translate('Polaris.TopBar.SearchField.clearButtonLabel'),\n className: styles.Clear,\n onClick: handleClear,\n onBlur: () => {\n setForceActive(false);\n handleClear();\n },\n onFocus: () => {\n handleFocus();\n setForceActive(true);\n }\n }, /*#__PURE__*/React.createElement(Icon, {\n source: CircleCancelMinor\n }));\n const className = classNames(styles.SearchField, (focused || active || forceActive) && styles.focused);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: className,\n onFocus: handleFocus,\n onBlur: handleBlur\n }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: searchId\n }, i18n.translate('Polaris.TopBar.SearchField.search'))), /*#__PURE__*/React.createElement(\"input\", {\n id: searchId,\n className: styles.Input,\n placeholder: placeholder,\n type: \"search\",\n autoCapitalize: \"off\",\n autoComplete: \"off\",\n autoCorrect: \"off\",\n ref: input,\n value: value,\n onChange: handleChange,\n onKeyDown: preventDefault\n }), /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Icon\n }, /*#__PURE__*/React.createElement(Icon, {\n source: SearchMinor\n })), clearMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(styles.Backdrop, showFocusBorder && styles.BackdropShowFocusBorder)\n }));\n}\n\nfunction preventDefault(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n }\n}\n\nexport { SearchField };\n","var styles = {\n \"Details\": \"Polaris-TopBar-UserMenu__Details\",\n \"Name\": \"Polaris-TopBar-UserMenu__Name\",\n \"Detail\": \"Polaris-TopBar-UserMenu__Detail\"\n};\n\nexport { styles as default };\n","var styles = {\n \"MessageIndicatorWrapper\": \"Polaris-MessageIndicator__MessageIndicatorWrapper\",\n \"MessageIndicator\": \"Polaris-MessageIndicator\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './MessageIndicator.scss.js';\n\nfunction MessageIndicator({\n children,\n active\n}) {\n const indicatorMarkup = active && /*#__PURE__*/React.createElement(\"div\", {\n className: styles.MessageIndicator\n });\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.MessageIndicatorWrapper\n }, indicatorMarkup, children);\n}\n\nexport { MessageIndicator };\n","var styles = {\n \"ActivatorWrapper\": \"Polaris-TopBar-Menu__ActivatorWrapper\",\n \"Activator\": \"Polaris-TopBar-Menu__Activator\",\n \"Section\": \"Polaris-TopBar-Menu__Section\"\n};\n\nexport { styles as default };\n","var styles = {\n \"Section\": \"Polaris-Menu-Message__Section\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './Message.scss.js';\nimport { Link } from '../../../../../Link/Link.js';\nimport { Badge } from '../../../../../Badge/Badge.js';\nimport { Popover } from '../../../../../Popover/Popover.js';\nimport { Stack } from '../../../../../Stack/Stack.js';\nimport { TextContainer } from '../../../../../TextContainer/TextContainer.js';\nimport { Heading } from '../../../../../Heading/Heading.js';\nimport { Button } from '../../../../../Button/Button.js';\n\nfunction Message({\n title,\n description,\n action,\n link,\n badge\n}) {\n const badgeMarkup = badge && /*#__PURE__*/React.createElement(Badge, {\n status: badge.status\n }, badge.content);\n const {\n to,\n content: linkContent\n } = link;\n const {\n onClick,\n content: actionContent\n } = action;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Section\n }, /*#__PURE__*/React.createElement(Popover.Section, null, /*#__PURE__*/React.createElement(Stack, {\n vertical: true,\n spacing: \"tight\"\n }, /*#__PURE__*/React.createElement(TextContainer, null, /*#__PURE__*/React.createElement(Heading, null, title, badgeMarkup), /*#__PURE__*/React.createElement(\"p\", null, description)), /*#__PURE__*/React.createElement(Link, {\n url: to\n }, linkContent), /*#__PURE__*/React.createElement(Button, {\n plain: true,\n onClick: onClick\n }, actionContent))));\n}\n\nexport { Message };\n","import React from 'react';\nimport styles from './Menu.scss.js';\nimport { Message } from './components/Message/Message.js';\nimport { Popover } from '../../../Popover/Popover.js';\nimport { ActionList } from '../../../ActionList/ActionList.js';\n\nfunction Menu(props) {\n const {\n actions,\n onOpen,\n onClose,\n open,\n activatorContent,\n message,\n colorScheme,\n accessibilityLabel\n } = props;\n const badgeProps = message && message.badge && {\n content: message.badge.content,\n status: message.badge.status\n };\n const messageMarkup = message && /*#__PURE__*/React.createElement(Message, {\n title: message.title,\n description: message.description,\n action: {\n onClick: message.action.onClick,\n content: message.action.content\n },\n link: {\n to: message.link.to,\n content: message.link.content\n },\n badge: badgeProps\n });\n const isFullHeight = Boolean(message);\n\n if (colorScheme && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('Deprecation: The `colorScheme` prop on the `Menu` component has been deprecated. See the v10 migration guide for replacing dark color scheme styles. https://github.com/Shopify/polaris/blob/main/documentation/guides/migrating-from-v9-to-v10.md');\n }\n\n return /*#__PURE__*/React.createElement(Popover, {\n activator: /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ActivatorWrapper\n }, /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: styles.Activator,\n onClick: onOpen,\n \"aria-label\": accessibilityLabel\n }, activatorContent)),\n active: open,\n onClose: onClose,\n fixed: true,\n fullHeight: isFullHeight,\n preferredAlignment: \"right\",\n colorScheme: colorScheme\n }, /*#__PURE__*/React.createElement(ActionList, {\n onActionAnyItem: onClose,\n sections: actions\n }), messageMarkup);\n}\n\nexport { Menu };\n","import React from 'react';\nimport { MobileHamburgerMajor } from '@shopify/polaris-icons';\nimport { classNames } from '../../utilities/css.js';\nimport { getWidth } from '../../utilities/get-width.js';\nimport { useToggle } from '../../utilities/use-toggle.js';\nimport styles from './TopBar.scss.js';\nimport { Search } from './components/Search/Search.js';\nimport { SearchField } from './components/SearchField/SearchField.js';\nimport { UserMenu } from './components/UserMenu/UserMenu.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\nimport { useFrame } from '../../utilities/frame/hooks.js';\nimport { Icon } from '../Icon/Icon.js';\nimport { UnstyledLink } from '../UnstyledLink/UnstyledLink.js';\nimport { Image } from '../Image/Image.js';\nimport { Menu } from './components/Menu/Menu.js';\n\n// TypeScript can't generate types that correctly infer the typing of\n// subcomponents so explicitly state the subcomponents in the type definition.\n// Letting this be implicit works in this project but fails in projects that use\n// generated *.d.ts files.\nconst TopBar = function TopBar({\n showNavigationToggle,\n userMenu,\n searchResults,\n searchField,\n secondaryMenu,\n searchResultsVisible,\n searchResultsOverlayVisible = false,\n onNavigationToggle,\n onSearchResultsDismiss,\n contextControl,\n logoSuffix\n}) {\n const i18n = useI18n();\n const {\n logo\n } = useFrame();\n const {\n value: focused,\n setTrue: forceTrueFocused,\n setFalse: forceFalseFocused\n } = useToggle(false);\n const iconClassName = classNames(styles.NavigationIcon, focused && styles.focused);\n const navigationButtonMarkup = showNavigationToggle ? /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: iconClassName,\n onClick: onNavigationToggle,\n onFocus: forceTrueFocused,\n onBlur: forceFalseFocused,\n \"aria-label\": i18n.translate('Polaris.TopBar.toggleMenuLabel')\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.IconWrapper\n }, /*#__PURE__*/React.createElement(Icon, {\n source: MobileHamburgerMajor\n }))) : null;\n const width = getWidth(logo, 104);\n let contextMarkup;\n\n if (contextControl) {\n contextMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.ContextControl\n }, contextControl);\n } else if (logo) {\n const className = classNames(styles.LogoContainer, showNavigationToggle || searchField ? styles.LogoDisplayControl : styles.LogoDisplayContainer, logoSuffix && styles.hasLogoSuffix);\n contextMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: className\n }, /*#__PURE__*/React.createElement(UnstyledLink, {\n url: logo.url || '',\n className: styles.LogoLink,\n style: {\n width\n }\n }, /*#__PURE__*/React.createElement(Image, {\n source: logo.topBarSource || '',\n alt: logo.accessibilityLabel || '',\n className: styles.Logo,\n style: {\n width\n }\n })), logoSuffix);\n }\n\n const searchMarkup = searchField ? /*#__PURE__*/React.createElement(React.Fragment, null, searchField, /*#__PURE__*/React.createElement(Search, {\n visible: searchResultsVisible,\n onDismiss: onSearchResultsDismiss,\n overlayVisible: searchResultsOverlayVisible\n }, searchResults)) : null;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.TopBar\n }, navigationButtonMarkup, contextMarkup, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Contents\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SearchField\n }, searchMarkup), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.SecondaryMenu\n }, secondaryMenu), userMenu));\n};\nTopBar.Menu = Menu;\nTopBar.SearchField = SearchField;\nTopBar.UserMenu = UserMenu;\n\nexport { TopBar };\n","import React from 'react';\nimport styles from './UserMenu.scss.js';\nimport { MessageIndicator } from '../../../MessageIndicator/MessageIndicator.js';\nimport { Menu } from '../Menu/Menu.js';\nimport { Avatar } from '../../../Avatar/Avatar.js';\n\nfunction UserMenu({\n name,\n detail,\n avatar,\n initials,\n actions,\n message,\n onToggle,\n open,\n colorScheme,\n accessibilityLabel\n}) {\n const showIndicator = Boolean(message);\n const activatorContentMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MessageIndicator, {\n active: showIndicator\n }, /*#__PURE__*/React.createElement(Avatar, {\n size: \"small\",\n source: avatar,\n initials: initials && initials.replace(' ', '')\n })), /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Details\n }, /*#__PURE__*/React.createElement(\"p\", {\n className: styles.Name\n }, name), /*#__PURE__*/React.createElement(\"p\", {\n className: styles.Detail\n }, detail)));\n\n if (colorScheme && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('Deprecation: The `colorScheme` prop on the `UserMenu` component has been deprecated. See the v10 migration guide for replacing dark color scheme styles. https://github.com/Shopify/polaris/blob/main/documentation/guides/migrating-from-v9-to-v10.md');\n }\n\n return /*#__PURE__*/React.createElement(Menu, {\n activatorContent: activatorContentMarkup,\n open: open,\n onOpen: onToggle,\n onClose: onToggle,\n actions: actions,\n message: message,\n colorScheme: colorScheme,\n accessibilityLabel: accessibilityLabel\n });\n}\n\nexport { UserMenu };\n","import React, { useRef, useState, useEffect } from 'react';\nimport { Key } from '../../types.js';\nimport { focusFirstFocusableNode, findFirstKeyboardFocusableNode, findLastKeyboardFocusableNode, focusFirstKeyboardFocusableNode, focusLastKeyboardFocusableNode } from '../../utilities/focus.js';\nimport { portal } from '../shared.js';\nimport { useFocusManager } from '../../utilities/focus-manager/hooks.js';\nimport { Focus } from '../Focus/Focus.js';\nimport { EventListener } from '../EventListener/EventListener.js';\nimport { KeypressListener } from '../KeypressListener/KeypressListener.js';\n\nfunction TrapFocus({\n trapping = true,\n children\n}) {\n const {\n canSafelyFocus\n } = useFocusManager({\n trapping\n });\n const focusTrapWrapper = useRef(null);\n const [disableFocus, setDisableFocus] = useState(true);\n useEffect(() => {\n const disable = canSafelyFocus && !(focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement)) ? !trapping : true;\n setDisableFocus(disable);\n }, [canSafelyFocus, trapping]);\n\n const handleFocusIn = event => {\n const containerContentsHaveFocus = focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement);\n\n if (trapping === false || !focusTrapWrapper.current || containerContentsHaveFocus || event.target instanceof Element && event.target.matches(`${portal.selector} *`)) {\n return;\n }\n\n if (canSafelyFocus && event.target instanceof HTMLElement && focusTrapWrapper.current !== event.target && !focusTrapWrapper.current.contains(event.target)) {\n focusFirstFocusableNode(focusTrapWrapper.current);\n }\n };\n\n const handleTab = event => {\n if (trapping === false || !focusTrapWrapper.current) {\n return;\n }\n\n const firstFocusableNode = findFirstKeyboardFocusableNode(focusTrapWrapper.current);\n const lastFocusableNode = findLastKeyboardFocusableNode(focusTrapWrapper.current);\n\n if (event.target === lastFocusableNode && !event.shiftKey) {\n event.preventDefault();\n focusFirstKeyboardFocusableNode(focusTrapWrapper.current);\n }\n\n if (event.target === firstFocusableNode && event.shiftKey) {\n event.preventDefault();\n focusLastKeyboardFocusableNode(focusTrapWrapper.current);\n }\n };\n\n return /*#__PURE__*/React.createElement(Focus, {\n disabled: disableFocus,\n root: focusTrapWrapper.current\n }, /*#__PURE__*/React.createElement(\"div\", {\n ref: focusTrapWrapper\n }, /*#__PURE__*/React.createElement(EventListener, {\n event: \"focusin\",\n handler: handleFocusIn\n }), /*#__PURE__*/React.createElement(KeypressListener, {\n keyCode: Key.Tab,\n keyEvent: \"keydown\",\n handler: handleTab\n }), children));\n}\n\nexport { TrapFocus };\n","import { useContext, useMemo, useEffect } from 'react';\nimport { MissingAppProviderError } from '../errors.js';\nimport { FocusManagerContext } from './context.js';\nimport { useUniqueId } from '../unique-id/hooks.js';\n\nfunction useFocusManager({\n trapping\n}) {\n const focusManager = useContext(FocusManagerContext);\n const id = useUniqueId();\n\n if (!focusManager) {\n throw new MissingAppProviderError('No FocusManager was provided.');\n }\n\n const {\n trapFocusList,\n add: addFocusItem,\n remove: removeFocusItem\n } = focusManager;\n const canSafelyFocus = trapFocusList[0] === id;\n const value = useMemo(() => ({\n canSafelyFocus\n }), [canSafelyFocus]);\n useEffect(() => {\n if (!trapping) return;\n addFocusItem(id);\n return () => {\n removeFocusItem(id);\n };\n }, [addFocusItem, id, removeFocusItem, trapping]);\n return value;\n}\n\nexport { useFocusManager };\n","import React from 'react';\nimport { handleMouseUpByBlurring } from '../../utilities/focus.js';\nimport { useDisableClick } from '../../utilities/use-disable-interaction.js';\nimport { UnstyledLink } from '../UnstyledLink/UnstyledLink.js';\n\nfunction UnstyledButton({\n id,\n children,\n className,\n url,\n external,\n download,\n submit,\n disabled,\n loading,\n pressed,\n accessibilityLabel,\n role,\n ariaControls,\n ariaExpanded,\n ariaDescribedBy,\n ariaChecked,\n onClick,\n onFocus,\n onBlur,\n onKeyDown,\n onKeyPress,\n onKeyUp,\n onMouseEnter,\n onTouchStart,\n ...rest\n}) {\n let buttonMarkup;\n const commonProps = {\n id,\n className,\n 'aria-label': accessibilityLabel\n };\n const interactiveProps = { ...commonProps,\n role,\n onClick,\n onFocus,\n onBlur,\n onMouseUp: handleMouseUpByBlurring,\n onMouseEnter,\n onTouchStart\n };\n const handleClick = useDisableClick(disabled, onClick);\n\n if (url) {\n buttonMarkup = disabled ?\n /*#__PURE__*/\n // Render an `` so toggling disabled/enabled state changes only the\n // `href` attribute instead of replacing the whole element.\n React.createElement(\"a\", commonProps, children) : /*#__PURE__*/React.createElement(UnstyledLink, Object.assign({}, interactiveProps, {\n url: url,\n external: external,\n download: download\n }, rest), children);\n } else {\n buttonMarkup = /*#__PURE__*/React.createElement(\"button\", Object.assign({}, interactiveProps, {\n \"aria-disabled\": disabled,\n type: submit ? 'submit' : 'button',\n \"aria-busy\": loading ? true : undefined,\n \"aria-controls\": ariaControls,\n \"aria-expanded\": ariaExpanded,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-checked\": ariaChecked,\n \"aria-pressed\": pressed,\n onKeyDown: onKeyDown,\n onKeyUp: onKeyUp,\n onKeyPress: onKeyPress,\n onClick: handleClick,\n tabIndex: disabled ? -1 : undefined\n }, rest), children);\n }\n\n return buttonMarkup;\n}\n\nexport { UnstyledButton };\n","import React, { memo, forwardRef } from 'react';\nimport { unstyled } from '../shared.js';\nimport { useLink } from '../../utilities/link/hooks.js';\n\n// that the interface defining the props is defined in this file, not imported\n// from elsewhere. This silly workaround ensures that the Props Explorer table\n// is generated correctly.\n\n// Wrapping forwardRef in a memo gets a name set since\n// https://github.com/facebook/react/issues/16722\n// but eslint-plugin-react doesn't know that just yet\n// eslint-disable-next-line react/display-name\nconst UnstyledLink = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function UnstyledLink(props, _ref) {\n const LinkComponent = useLink();\n\n if (LinkComponent) {\n return /*#__PURE__*/React.createElement(LinkComponent, Object.assign({}, unstyled.props, props));\n }\n\n const {\n external,\n url,\n ...rest\n } = props;\n const target = external ? '_blank' : undefined;\n const rel = external ? 'noopener noreferrer' : undefined;\n return /*#__PURE__*/React.createElement(\"a\", Object.assign({\n target: target\n }, rest, {\n href: url,\n rel: rel\n }, unstyled.props));\n}));\n\nexport { UnstyledLink };\n","import { useContext } from 'react';\nimport { LinkContext } from './context.js';\n\nfunction useLink() {\n return useContext(LinkContext);\n}\n\nexport { useLink };\n","const MINUTE = 60;\nconst HOUR = MINUTE * 60;\nfunction ensureTwoDigits(num) {\n return num > 9 ? String(num) : `0${num}`;\n}\nfunction secondsToTimeComponents(seconds) {\n return {\n hours: Math.floor(seconds / HOUR),\n minutes: Math.floor(seconds % HOUR / MINUTE),\n seconds: seconds % MINUTE\n };\n}\nfunction secondsToTimestamp(numSeconds) {\n const {\n hours,\n minutes,\n seconds\n } = secondsToTimeComponents(numSeconds);\n const hasHours = numSeconds > HOUR;\n const hoursText = hasHours ? `${hours}:` : '';\n const minutesText = `${hasHours ? ensureTwoDigits(minutes) : minutes}:`;\n const secondsText = `${ensureTwoDigits(seconds)}`;\n return `${hoursText}${minutesText}${secondsText}`;\n}\nfunction secondsToDurationTranslationKey(numSeconds) {\n const {\n hours,\n minutes,\n seconds\n } = secondsToTimeComponents(numSeconds);\n let durationKey = 'Polaris.VideoThumbnail.playButtonA11yLabel.duration';\n\n if (hours) {\n durationKey += `.hours.${hours > 1 ? 'other' : 'one'}`;\n\n if (seconds) {\n if (minutes > 1) {\n durationKey += `${seconds > 1 ? '.minutesAndSeconds' : '.minutesAndSecond'}`;\n } else if (minutes === 1) {\n durationKey += `${seconds > 1 ? '.minuteAndSeconds' : '.minuteAndSecond'}`;\n } else {\n durationKey += `${seconds > 1 ? '.andSeconds' : '.andSecond'}`;\n }\n } else if (minutes) {\n durationKey += `${minutes > 1 ? '.andMinutes' : '.andMinute'}`;\n } else {\n durationKey += '.only';\n }\n } else if (minutes) {\n durationKey += `.minutes.${minutes > 1 ? 'other' : 'one'}`;\n\n if (seconds) {\n durationKey += `${seconds > 1 ? '.andSeconds' : '.andSecond'}`;\n } else {\n durationKey += '.only';\n }\n } else if (seconds) {\n durationKey += seconds > 1 ? '.seconds.other' : '.seconds.one';\n }\n\n return durationKey;\n}\n\nexport { ensureTwoDigits, secondsToDurationTranslationKey, secondsToTimeComponents, secondsToTimestamp };\n","var styles = {\n \"Thumbnail\": \"Polaris-VideoThumbnail__Thumbnail\",\n \"WithPlayer\": \"Polaris-VideoThumbnail__WithPlayer\",\n \"PlayButton\": \"Polaris-VideoThumbnail__PlayButton\",\n \"PlayIcon\": \"Polaris-VideoThumbnail__PlayIcon\",\n \"Timestamp\": \"Polaris-VideoThumbnail__Timestamp\",\n \"withProgress\": \"Polaris-VideoThumbnail--withProgress\",\n \"Progress\": \"Polaris-VideoThumbnail__Progress\",\n \"Indicator\": \"Polaris-VideoThumbnail__Indicator\",\n \"ProgressBar\": \"Polaris-VideoThumbnail__ProgressBar\",\n \"Label\": \"Polaris-VideoThumbnail__Label\"\n};\n\nexport { styles as default };\n","var img = \"data:image/svg+xml,%3csvg viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='white'/%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='none' stroke='%23b5b5b5'/%3e%3cpath d='M15 11.723c0-.605.7-.942 1.173-.564l10.93 7.215a.72.72 0 010 1.128l-10.93 7.216A.723.723 0 0115 26.153v-14.43z' fill-opacity='.557'/%3e%3c/svg%3e\";\n var PlayIcon = img;\n\nexport { PlayIcon as default };\n","import React from 'react';\nimport { classNames } from '../../utilities/css.js';\nimport { secondsToTimeComponents, secondsToDurationTranslationKey, secondsToTimestamp } from '../../utilities/duration.js';\nimport styles from './VideoThumbnail.scss.js';\nimport PlayIcon from './illustrations/play.svg.js';\nimport { useI18n } from '../../utilities/i18n/hooks.js';\n\nfunction VideoThumbnail({\n thumbnailUrl,\n videoLength = 0,\n videoProgress = 0,\n showVideoProgress = false,\n accessibilityLabel,\n onClick,\n onBeforeStartPlaying\n}) {\n const i18n = useI18n();\n let buttonLabel;\n\n if (accessibilityLabel) {\n buttonLabel = accessibilityLabel;\n } else if (videoLength) {\n const {\n hours,\n minutes,\n seconds\n } = secondsToTimeComponents(videoLength);\n buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.defaultWithDuration', {\n duration: i18n.translate(secondsToDurationTranslationKey(videoLength), {\n hourCount: hours,\n minuteCount: minutes,\n secondCount: seconds\n })\n });\n } else {\n buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.default');\n }\n\n const timeStampMarkup = videoLength ? /*#__PURE__*/React.createElement(\"p\", {\n className: classNames(styles.Timestamp, showVideoProgress && styles.withProgress)\n }, secondsToTimestamp(videoLength)) : null;\n let progressMarkup = null;\n\n if (showVideoProgress) {\n const progressValue = calculateProgress(videoLength, videoProgress);\n const progressValuePercents = Math.round(progressValue * 100);\n /* eslint-disable @shopify/jsx-no-hardcoded-content */\n\n progressMarkup = /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Progress\n }, /*#__PURE__*/React.createElement(\"progress\", {\n className: styles.ProgressBar,\n value: progressValuePercents,\n max: \"100\"\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Indicator,\n style: {\n transform: `scaleX(${progressValue})`\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: styles.Label\n }, progressValuePercents, \"%\")));\n /* eslint-enable @shopify/jsx-no-hardcoded-content */\n }\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.Thumbnail,\n style: {\n backgroundImage: `url(${thumbnailUrl})`\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: styles.PlayButton,\n \"aria-label\": buttonLabel,\n onClick: onClick,\n onMouseEnter: onBeforeStartPlaying,\n onFocus: onBeforeStartPlaying,\n onTouchStart: onBeforeStartPlaying\n }, /*#__PURE__*/React.createElement(\"img\", {\n className: styles.PlayIcon,\n src: PlayIcon,\n alt: \"\"\n })), timeStampMarkup, progressMarkup);\n}\n\nfunction calculateProgress(videoLength, videoProgress) {\n if (videoProgress > videoLength && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('Value passed to the video progress should not exceed video length. Resetting progress to 100%.');\n }\n\n if (videoProgress > 0 && videoLength > 0) {\n const progress = parseFloat((videoProgress / videoLength).toFixed(2));\n return progress > 1 ? 1 : progress;\n }\n\n return 0;\n}\n\nexport { VideoThumbnail };\n","var styles = {\n \"VisuallyHidden\": \"Polaris-VisuallyHidden\"\n};\n\nexport { styles as default };\n","import React from 'react';\nimport styles from './VisuallyHidden.scss.js';\n\nfunction VisuallyHidden({\n children\n}) {\n return /*#__PURE__*/React.createElement(\"span\", {\n className: styles.VisuallyHidden\n }, children);\n}\n\nexport { VisuallyHidden };\n","const scrollable = {\n props: {\n 'data-polaris-scrollable': true\n },\n selector: '[data-polaris-scrollable]'\n};\nconst overlay = {\n props: {\n 'data-polaris-overlay': true\n },\n selector: '[data-polaris-overlay]'\n};\nconst layer = {\n props: {\n 'data-polaris-layer': true\n },\n selector: '[data-polaris-layer]'\n};\nconst unstyled = {\n props: {\n 'data-polaris-unstyled': true\n },\n selector: '[data-polaris-unstyled]'\n};\nconst dataPolarisTopBar = {\n props: {\n 'data-polaris-top-bar': true\n },\n selector: '[data-polaris-top-bar]'\n};\nconst headerCell = {\n props: {\n 'data-polaris-header-cell': true\n },\n selector: '[data-polaris-header-cell]'\n};\nconst portal = {\n props: ['data-portal-id'],\n selector: '[data-portal-id]'\n};\nconst DATA_ATTRIBUTE = {\n overlay,\n layer\n};\n\nexport { DATA_ATTRIBUTE, dataPolarisTopBar, headerCell, layer, overlay, portal, scrollable, unstyled };\n","/* eslint-disable @shopify/strict-component-boundaries */\n\n/* eslint-enable @shopify/strict-component-boundaries */\nlet Key;\n\n(function (Key) {\n Key[Key[\"Backspace\"] = 8] = \"Backspace\";\n Key[Key[\"Tab\"] = 9] = \"Tab\";\n Key[Key[\"Enter\"] = 13] = \"Enter\";\n Key[Key[\"Shift\"] = 16] = \"Shift\";\n Key[Key[\"Ctrl\"] = 17] = \"Ctrl\";\n Key[Key[\"Alt\"] = 18] = \"Alt\";\n Key[Key[\"Pause\"] = 19] = \"Pause\";\n Key[Key[\"CapsLock\"] = 20] = \"CapsLock\";\n Key[Key[\"Escape\"] = 27] = \"Escape\";\n Key[Key[\"Space\"] = 32] = \"Space\";\n Key[Key[\"PageUp\"] = 33] = \"PageUp\";\n Key[Key[\"PageDown\"] = 34] = \"PageDown\";\n Key[Key[\"End\"] = 35] = \"End\";\n Key[Key[\"Home\"] = 36] = \"Home\";\n Key[Key[\"LeftArrow\"] = 37] = \"LeftArrow\";\n Key[Key[\"UpArrow\"] = 38] = \"UpArrow\";\n Key[Key[\"RightArrow\"] = 39] = \"RightArrow\";\n Key[Key[\"DownArrow\"] = 40] = \"DownArrow\";\n Key[Key[\"Insert\"] = 45] = \"Insert\";\n Key[Key[\"Delete\"] = 46] = \"Delete\";\n Key[Key[\"Key0\"] = 48] = \"Key0\";\n Key[Key[\"Key1\"] = 49] = \"Key1\";\n Key[Key[\"Key2\"] = 50] = \"Key2\";\n Key[Key[\"Key3\"] = 51] = \"Key3\";\n Key[Key[\"Key4\"] = 52] = \"Key4\";\n Key[Key[\"Key5\"] = 53] = \"Key5\";\n Key[Key[\"Key6\"] = 54] = \"Key6\";\n Key[Key[\"Key7\"] = 55] = \"Key7\";\n Key[Key[\"Key8\"] = 56] = \"Key8\";\n Key[Key[\"Key9\"] = 57] = \"Key9\";\n Key[Key[\"KeyA\"] = 65] = \"KeyA\";\n Key[Key[\"KeyB\"] = 66] = \"KeyB\";\n Key[Key[\"KeyC\"] = 67] = \"KeyC\";\n Key[Key[\"KeyD\"] = 68] = \"KeyD\";\n Key[Key[\"KeyE\"] = 69] = \"KeyE\";\n Key[Key[\"KeyF\"] = 70] = \"KeyF\";\n Key[Key[\"KeyG\"] = 71] = \"KeyG\";\n Key[Key[\"KeyH\"] = 72] = \"KeyH\";\n Key[Key[\"KeyI\"] = 73] = \"KeyI\";\n Key[Key[\"KeyJ\"] = 74] = \"KeyJ\";\n Key[Key[\"KeyK\"] = 75] = \"KeyK\";\n Key[Key[\"KeyL\"] = 76] = \"KeyL\";\n Key[Key[\"KeyM\"] = 77] = \"KeyM\";\n Key[Key[\"KeyN\"] = 78] = \"KeyN\";\n Key[Key[\"KeyO\"] = 79] = \"KeyO\";\n Key[Key[\"KeyP\"] = 80] = \"KeyP\";\n Key[Key[\"KeyQ\"] = 81] = \"KeyQ\";\n Key[Key[\"KeyR\"] = 82] = \"KeyR\";\n Key[Key[\"KeyS\"] = 83] = \"KeyS\";\n Key[Key[\"KeyT\"] = 84] = \"KeyT\";\n Key[Key[\"KeyU\"] = 85] = \"KeyU\";\n Key[Key[\"KeyV\"] = 86] = \"KeyV\";\n Key[Key[\"KeyW\"] = 87] = \"KeyW\";\n Key[Key[\"KeyX\"] = 88] = \"KeyX\";\n Key[Key[\"KeyY\"] = 89] = \"KeyY\";\n Key[Key[\"KeyZ\"] = 90] = \"KeyZ\";\n Key[Key[\"LeftMeta\"] = 91] = \"LeftMeta\";\n Key[Key[\"RightMeta\"] = 92] = \"RightMeta\";\n Key[Key[\"Select\"] = 93] = \"Select\";\n Key[Key[\"Numpad0\"] = 96] = \"Numpad0\";\n Key[Key[\"Numpad1\"] = 97] = \"Numpad1\";\n Key[Key[\"Numpad2\"] = 98] = \"Numpad2\";\n Key[Key[\"Numpad3\"] = 99] = \"Numpad3\";\n Key[Key[\"Numpad4\"] = 100] = \"Numpad4\";\n Key[Key[\"Numpad5\"] = 101] = \"Numpad5\";\n Key[Key[\"Numpad6\"] = 102] = \"Numpad6\";\n Key[Key[\"Numpad7\"] = 103] = \"Numpad7\";\n Key[Key[\"Numpad8\"] = 104] = \"Numpad8\";\n Key[Key[\"Numpad9\"] = 105] = \"Numpad9\";\n Key[Key[\"Multiply\"] = 106] = \"Multiply\";\n Key[Key[\"Add\"] = 107] = \"Add\";\n Key[Key[\"Subtract\"] = 109] = \"Subtract\";\n Key[Key[\"Decimal\"] = 110] = \"Decimal\";\n Key[Key[\"Divide\"] = 111] = \"Divide\";\n Key[Key[\"F1\"] = 112] = \"F1\";\n Key[Key[\"F2\"] = 113] = \"F2\";\n Key[Key[\"F3\"] = 114] = \"F3\";\n Key[Key[\"F4\"] = 115] = \"F4\";\n Key[Key[\"F5\"] = 116] = \"F5\";\n Key[Key[\"F6\"] = 117] = \"F6\";\n Key[Key[\"F7\"] = 118] = \"F7\";\n Key[Key[\"F8\"] = 119] = \"F8\";\n Key[Key[\"F9\"] = 120] = \"F9\";\n Key[Key[\"F10\"] = 121] = \"F10\";\n Key[Key[\"F11\"] = 122] = \"F11\";\n Key[Key[\"F12\"] = 123] = \"F12\";\n Key[Key[\"NumLock\"] = 144] = \"NumLock\";\n Key[Key[\"ScrollLock\"] = 145] = \"ScrollLock\";\n Key[Key[\"Semicolon\"] = 186] = \"Semicolon\";\n Key[Key[\"Equals\"] = 187] = \"Equals\";\n Key[Key[\"Comma\"] = 188] = \"Comma\";\n Key[Key[\"Dash\"] = 189] = \"Dash\";\n Key[Key[\"Period\"] = 190] = \"Period\";\n Key[Key[\"ForwardSlash\"] = 191] = \"ForwardSlash\";\n Key[Key[\"GraveAccent\"] = 192] = \"GraveAccent\";\n Key[Key[\"OpenBracket\"] = 219] = \"OpenBracket\";\n Key[Key[\"BackSlash\"] = 220] = \"BackSlash\";\n Key[Key[\"CloseBracket\"] = 221] = \"CloseBracket\";\n Key[Key[\"SingleQuote\"] = 222] = \"SingleQuote\";\n})(Key || (Key = {}));\n\nexport { Key };\n","import { createContext } from 'react';\n\nconst BannerContext = /*#__PURE__*/createContext(false);\n\nexport { BannerContext };\n","import 'react';\nimport { tokens, getMediaConditions } from '@shopify/polaris-tokens';\n\nconst Breakpoints = {\n navigationBarCollapsed: '768px',\n stackedContent: '1043px'\n};\nconst noWindowMatches = {\n media: '',\n addListener: noop,\n removeListener: noop,\n matches: false,\n onchange: noop,\n addEventListener: noop,\n removeEventListener: noop,\n dispatchEvent: _ => true\n};\n\nfunction noop() {}\n\nfunction navigationBarCollapsed() {\n return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.navigationBarCollapsed})`);\n}\nfunction stackedContent() {\n return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.stackedContent})`);\n}\n/**\n * Directional alias for each Polaris `breakpoints` token.\n *\n * @example 'smUp' | 'smDown' | 'smOnly' | 'mdUp' | etc.\n */\n\ngetBreakpointsQueryEntries(tokens.breakpoints);\n/**\n * Converts `breakpoints` tokens into directional media query entries.\n *\n * @example\n * const breakpointsQueryEntries = getBreakpointsQueryEntries(breakpoints);\n * breakpointsQueryEntries === [\n * ['xsUp', '(min-width: ...)'],\n * ['xsDown', '(max-width: ...)'],\n * ['xsOnly', '(min-width: ...) and (max-width: ...)'],\n * ['smUp', '(min-width: ...) and (max-width: ...)'],\n * ['mdUp', '(min-width: ...) and (max-width: ...)'],\n * // etc.\n * ]\n */\n\nfunction getBreakpointsQueryEntries(breakpoints) {\n const mediaConditionEntries = Object.entries(getMediaConditions(breakpoints));\n return mediaConditionEntries.map(([breakpointsToken, mediaConditions]) => Object.entries(mediaConditions).map(([direction, mediaCondition]) => {\n const breakpointsAlias = breakpointsToken.split('-')[1]; // e.g. smUp, smDown, smOnly, etc.\n\n const directionAlias = `${breakpointsAlias}${capitalize(direction)}`;\n return [directionAlias, mediaCondition];\n })).flat();\n}\n\nfunction capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nexport { getBreakpointsQueryEntries, navigationBarCollapsed, stackedContent };\n","function clamp(number, min, max) {\n if (number < min) return min;\n if (number > max) return max;\n return number;\n}\n\nexport { clamp };\n","import React, { Children, isValidElement } from 'react';\n\n// `Component`. If `props` is passed, those will be added as props on the\n// wrapped component. If `element` is null, the component is not wrapped.\n\nfunction wrapWithComponent(element, Component, props) {\n if (element == null) {\n return null;\n }\n\n return isElementOfType(element, Component) ? element : /*#__PURE__*/React.createElement(Component, props, element);\n} // In development, we compare based on the name of the function because\n// React Hot Loader proxies React components in order to make updates. In\n// production we can simply compare the components for equality.\n\nconst isComponent = process.env.NODE_ENV === 'development' ? hotReloadComponentCheck : (AComponent, AnotherComponent) => AComponent === AnotherComponent; // Checks whether `element` is a React element of type `Component` (or one of\n// the passed components, if `Component` is an array of React components).\n\nfunction isElementOfType(element, Component) {\n var _element$props;\n\n if (element == null || ! /*#__PURE__*/isValidElement(element) || typeof element.type === 'string') {\n return false;\n }\n\n const {\n type: defaultType\n } = element; // Type override allows components to bypass default wrapping behavior. Ex: Stack, ResourceList...\n // See https://github.com/Shopify/app-extension-libs/issues/996#issuecomment-710437088\n\n const overrideType = (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.__type__;\n const type = overrideType || defaultType;\n const Components = Array.isArray(Component) ? Component : [Component];\n return Components.some(AComponent => typeof type !== 'string' && isComponent(AComponent, type));\n} // Returns all children that are valid elements as an array. Can optionally be\n// filtered by passing `predicate`.\n\nfunction elementChildren(children, predicate = () => true) {\n return Children.toArray(children).filter(child => /*#__PURE__*/isValidElement(child) && predicate(child));\n}\nfunction ConditionalWrapper({\n condition,\n wrapper,\n children\n}) {\n return condition ? wrapper(children) : children;\n}\nfunction ConditionalRender({\n condition,\n children\n}) {\n return condition ? children : null;\n}\n\nfunction hotReloadComponentCheck(AComponent, AnotherComponent) {\n const componentName = AComponent.name;\n const anotherComponentName = AnotherComponent.displayName;\n return AComponent === AnotherComponent || Boolean(componentName) && componentName === anotherComponentName;\n}\n\nexport { ConditionalRender, ConditionalWrapper, elementChildren, isElementOfType, wrapWithComponent };\n","function classNames(...classes) {\n return classes.filter(Boolean).join(' ');\n}\nfunction variationName(name, value) {\n return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport { classNames, variationName };\n","function debounce(func, waitArg, options) {\n let lastArgs;\n let lastThis;\n let maxWait;\n let result;\n let timerId;\n let lastCallTime;\n let lastInvokeTime = 0;\n let leading = false;\n let maxing = false;\n let trailing = true; // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.\n\n const useRAF = !waitArg && waitArg !== 0;\n\n if (typeof func !== 'function') {\n throw new TypeError('Expected a function');\n }\n\n const wait = waitArg || 0;\n\n if (typeof options === 'object') {\n leading = Boolean(options.leading);\n maxing = 'maxWait' in options;\n maxWait = maxing ? Math.max(Number(options.maxWait) || 0, wait) : undefined;\n trailing = 'trailing' in options ? Boolean(options.trailing) : trailing;\n }\n\n function invokeFunc(time) {\n const args = lastArgs;\n const thisArg = lastThis;\n lastArgs = undefined;\n lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n function startTimer(pendingFunc, wait) {\n if (useRAF) {\n cancelAnimationFrame(timerId);\n return requestAnimationFrame(pendingFunc);\n }\n\n return setTimeout(pendingFunc, wait);\n }\n\n function cancelTimer(id) {\n if (useRAF) {\n return cancelAnimationFrame(id);\n }\n\n clearTimeout(id);\n }\n\n function leadingEdge(time) {\n // Reset any `maxWait` timer.\n lastInvokeTime = time; // Start the timer for the trailing edge.\n\n timerId = startTimer(timerExpired, wait); // Invoke the leading edge.\n\n return leading ? invokeFunc(time) : result;\n }\n\n function remainingWait(time) {\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTime;\n const timeWaiting = wait - timeSinceLastCall;\n return maxing && maxWait ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;\n }\n\n function shouldInvoke(time) {\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTime; // Either this is the first call, activity has stopped and we're at the\n // trailing edge, the system time has gone backwards and we're treating\n // it as the trailing edge, or we've hit the `maxWait` limit.\n\n return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && maxWait && timeSinceLastInvoke >= maxWait;\n }\n\n function timerExpired() {\n const time = Date.now();\n\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n } // Restart the timer.\n\n\n timerId = startTimer(timerExpired, remainingWait(time));\n }\n\n function trailingEdge(time) {\n timerId = undefined; // Only invoke if we have `lastArgs` which means `func` has been\n // debounced at least once.\n\n if (trailing && lastArgs) {\n return invokeFunc(time);\n } // eslint-disable-next-line no-multi-assign\n\n\n lastArgs = lastThis = undefined;\n return result;\n }\n\n function cancel() {\n if (timerId !== undefined) {\n cancelTimer(timerId);\n }\n\n lastInvokeTime = 0; // eslint-disable-next-line no-multi-assign\n\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n function flush() {\n return timerId === undefined ? result : trailingEdge(Date.now());\n }\n\n function pending() {\n return timerId !== undefined;\n }\n\n function debounced(...args) {\n const time = Date.now();\n const isInvoking = shouldInvoke(time);\n lastArgs = args; // eslint-disable-next-line consistent-this, @typescript-eslint/no-this-alias\n\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n\n if (maxing) {\n // Handle invocations in a tight loop.\n timerId = startTimer(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n\n if (timerId === undefined) {\n timerId = startTimer(timerExpired, wait);\n }\n\n return result;\n }\n\n debounced.cancel = cancel;\n debounced.flush = flush;\n debounced.pending = pending;\n return debounced;\n}\n\nexport { debounce };\n","class MissingAppProviderError extends Error {\n constructor(message = '') {\n super(`${message ? `${message} ` : message}Your application must be wrapped in an component. See https://polaris.shopify.com/components/app-provider for implementation instructions.`);\n this.name = 'MissingAppProviderError';\n }\n\n}\n\nexport { MissingAppProviderError };\n","import { createContext } from 'react';\n\nconst FeaturesContext = /*#__PURE__*/createContext(undefined);\n\nexport { FeaturesContext };\n","import { createContext } from 'react';\n\nconst FocusManagerContext = /*#__PURE__*/createContext(undefined);\n\nexport { FocusManagerContext };\n","function isElementInViewport(element) {\n const {\n top,\n left,\n bottom,\n right\n } = element.getBoundingClientRect();\n return top >= 0 && right <= window.innerWidth && bottom <= window.innerHeight && left >= 0;\n}\n\nexport { isElementInViewport };\n","import { isElementInViewport } from './is-element-in-viewport.js';\n\nconst FOCUSABLE_SELECTOR = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]';\nconst KEYBOARD_FOCUSABLE_SELECTORS = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]:not([tabindex=\"-1\"])';\nconst MENUITEM_FOCUSABLE_SELECTORS = 'a[role=\"menuitem\"],frame[role=\"menuitem\"],iframe[role=\"menuitem\"],input[role=\"menuitem\"]:not([type=hidden]):not(:disabled),select[role=\"menuitem\"]:not(:disabled),textarea[role=\"menuitem\"]:not(:disabled),button[role=\"menuitem\"]:not(:disabled),*[tabindex]:not([tabindex=\"-1\"])';\nconst handleMouseUpByBlurring = ({\n currentTarget\n}) => currentTarget.blur();\nfunction nextFocusableNode(node, filter) {\n const allFocusableElements = [...document.querySelectorAll(FOCUSABLE_SELECTOR)];\n const sliceLocation = allFocusableElements.indexOf(node) + 1;\n const focusableElementsAfterNode = allFocusableElements.slice(sliceLocation);\n\n for (const focusableElement of focusableElementsAfterNode) {\n if (isElementInViewport(focusableElement) && (!filter || filter && filter(focusableElement))) {\n return focusableElement;\n }\n }\n\n return null;\n}\nfunction findFirstFocusableNode(element, onlyDescendants = true) {\n if (!onlyDescendants && matches(element, FOCUSABLE_SELECTOR)) {\n return element;\n }\n\n return element.querySelector(FOCUSABLE_SELECTOR);\n} // Popover needs to be able to find its activator even if it is disabled, which FOCUSABLE_SELECTOR doesn't support.\n\nfunction findFirstFocusableNodeIncludingDisabled(element) {\n const focusableSelector = `a,button,frame,iframe,input:not([type=hidden]),select,textarea,*[tabindex]`;\n\n if (matches(element, focusableSelector)) {\n return element;\n }\n\n return element.querySelector(focusableSelector);\n}\nfunction focusFirstFocusableNode(element, onlyDescendants = true) {\n var _findFirstFocusableNo;\n\n (_findFirstFocusableNo = findFirstFocusableNode(element, onlyDescendants)) === null || _findFirstFocusableNo === void 0 ? void 0 : _findFirstFocusableNo.focus();\n}\nfunction focusNextFocusableNode(node, filter) {\n const nextFocusable = nextFocusableNode(node, filter);\n\n if (nextFocusable && nextFocusable instanceof HTMLElement) {\n nextFocusable.focus();\n return true;\n }\n\n return false;\n}\nfunction findFirstKeyboardFocusableNode(element, onlyDescendants = true) {\n if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {\n return element;\n }\n\n return element.querySelector(KEYBOARD_FOCUSABLE_SELECTORS);\n}\nfunction focusFirstKeyboardFocusableNode(element, onlyDescendants = true) {\n const firstFocusable = findFirstKeyboardFocusableNode(element, onlyDescendants);\n\n if (firstFocusable) {\n firstFocusable.focus();\n return true;\n }\n\n return false;\n}\nfunction findLastKeyboardFocusableNode(element, onlyDescendants = true) {\n if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {\n return element;\n }\n\n const allFocusable = element.querySelectorAll(KEYBOARD_FOCUSABLE_SELECTORS);\n return allFocusable[allFocusable.length - 1];\n}\nfunction focusLastKeyboardFocusableNode(element, onlyDescendants = true) {\n const lastFocusable = findLastKeyboardFocusableNode(element, onlyDescendants);\n\n if (lastFocusable) {\n lastFocusable.focus();\n return true;\n }\n\n return false;\n}\nfunction wrapFocusPreviousFocusableMenuItem(parentElement, currentFocusedElement) {\n const allFocusableChildren = getMenuFocusableDescendants(parentElement);\n const currentItemIdx = getCurrentFocusedElementIndex(allFocusableChildren, currentFocusedElement);\n\n if (currentItemIdx === -1) {\n allFocusableChildren[0].focus();\n } else {\n allFocusableChildren[(currentItemIdx - 1 + allFocusableChildren.length) % allFocusableChildren.length].focus();\n }\n}\nfunction wrapFocusNextFocusableMenuItem(parentElement, currentFocusedElement) {\n const allFocusableChildren = getMenuFocusableDescendants(parentElement);\n const currentItemIdx = getCurrentFocusedElementIndex(allFocusableChildren, currentFocusedElement);\n\n if (currentItemIdx === -1) {\n allFocusableChildren[0].focus();\n } else {\n allFocusableChildren[(currentItemIdx + 1) % allFocusableChildren.length].focus();\n }\n}\n\nfunction getMenuFocusableDescendants(element) {\n return element.querySelectorAll(MENUITEM_FOCUSABLE_SELECTORS);\n}\n\nfunction getCurrentFocusedElementIndex(allFocusableChildren, currentFocusedElement) {\n let currentItemIdx = 0;\n\n for (const focusableChild of allFocusableChildren) {\n if (focusableChild === currentFocusedElement) {\n break;\n }\n\n currentItemIdx++;\n }\n\n return currentItemIdx === allFocusableChildren.length ? -1 : currentItemIdx;\n}\n\nfunction matches(node, selector) {\n if (node.matches) {\n return node.matches(selector);\n }\n\n const matches = (node.ownerDocument || document).querySelectorAll(selector);\n let i = matches.length;\n\n while (--i >= 0 && matches.item(i) !== node) return i > -1;\n}\n\nexport { findFirstFocusableNode, findFirstFocusableNodeIncludingDisabled, findFirstKeyboardFocusableNode, findLastKeyboardFocusableNode, focusFirstFocusableNode, focusFirstKeyboardFocusableNode, focusLastKeyboardFocusableNode, focusNextFocusableNode, handleMouseUpByBlurring, nextFocusableNode, wrapFocusNextFocusableMenuItem, wrapFocusPreviousFocusableMenuItem };\n","import { createContext } from 'react';\n\nconst FrameContext = /*#__PURE__*/createContext(undefined);\n\nexport { FrameContext };\n","import { useContext } from 'react';\nimport { FrameContext } from './context.js';\n\nfunction useFrame() {\n const frame = useContext(FrameContext);\n\n if (!frame) {\n throw new Error('No Frame context was provided. Your component must be wrapped in a component. See https://polaris.shopify.com/components/frame for implementation instructions.');\n }\n\n return frame;\n}\n\nexport { useFrame };\n","class Rect {\n static get zero() {\n return new Rect();\n }\n\n constructor({\n top = 0,\n left = 0,\n width = 0,\n height = 0\n } = {}) {\n this.top = void 0;\n this.left = void 0;\n this.width = void 0;\n this.height = void 0;\n this.top = top;\n this.left = left;\n this.width = width;\n this.height = height;\n }\n\n get center() {\n return {\n x: this.left + this.width / 2,\n y: this.top + this.height / 2\n };\n }\n\n}\nfunction getRectForNode(node) {\n if (!(node instanceof Element)) {\n return new Rect({\n width: window.innerWidth,\n height: window.innerHeight\n });\n }\n\n const rect = node.getBoundingClientRect();\n return new Rect({\n top: rect.top,\n left: rect.left,\n width: rect.width,\n height: rect.height\n });\n}\n\nexport { Rect, getRectForNode };\n","function isObject(value) {\n const type = typeof value;\n return value != null && (type === 'object' || type === 'function');\n}\n\nexport { isObject };\n","import { isObject } from './is-object.js';\n\nfunction pluckDeep(obj, key) {\n if (!obj) {\n return null;\n }\n\n const keys = Object.keys(obj);\n\n for (const currKey of keys) {\n if (currKey === key) {\n return obj[key];\n }\n\n if (isObject(obj[currKey])) {\n const plucked = pluckDeep(obj[currKey], key);\n\n if (plucked) {\n return plucked;\n }\n }\n }\n\n return null;\n}\n\nexport { pluckDeep };\n","import { pluckDeep } from './pluck-deep.js';\n\nfunction getWidth(value = {}, defaultWidth = 0, key = 'width') {\n const width = typeof value === 'number' ? value : pluckDeep(value, key);\n return width ? `${width}px` : `${defaultWidth}px`;\n}\n\nexport { getWidth };\n","import { createContext } from 'react';\n\nconst I18nContext = /*#__PURE__*/createContext(undefined);\n\nexport { I18nContext };\n","import { useContext } from 'react';\nimport { MissingAppProviderError } from '../errors.js';\nimport { I18nContext } from './context.js';\n\nfunction useI18n() {\n const i18n = useContext(I18nContext);\n\n if (!i18n) {\n throw new MissingAppProviderError('No i18n was provided.');\n }\n\n return i18n;\n}\n\nexport { useI18n };\n","import { createContext } from 'react';\n\nconst LinkContext = /*#__PURE__*/createContext(undefined);\n\nexport { LinkContext };\n","import { createContext } from 'react';\n\nconst MediaQueryContext = /*#__PURE__*/createContext(undefined);\n\nexport { MediaQueryContext };\n","import { useContext } from 'react';\nimport { MediaQueryContext } from './context.js';\n\nfunction useMediaQuery() {\n const mediaQuery = useContext(MediaQueryContext);\n\n if (!mediaQuery) {\n throw new Error('No mediaQuery was provided. Your application must be wrapped in an component. See https://polaris.shopify.com/components/app-provider for implementation instructions.');\n }\n\n return mediaQuery;\n}\n\nexport { useMediaQuery };\n","import { createContext } from 'react';\n\nconst PortalsManagerContext = /*#__PURE__*/createContext(undefined);\n\nexport { PortalsManagerContext };\n","import { createContext } from 'react';\n\nconst ResourceListContext = /*#__PURE__*/createContext({});\n\nexport { ResourceListContext };\n","const SELECT_ALL_ITEMS = 'All';\n\nexport { SELECT_ALL_ITEMS };\n","import { createContext } from 'react';\n\nconst ScrollLockManagerContext = /*#__PURE__*/createContext(undefined);\n\nexport { ScrollLockManagerContext };\n","import { createContext } from 'react';\n\nconst StickyManagerContext = /*#__PURE__*/createContext(undefined);\n\nexport { StickyManagerContext };\n","import { tokens } from '@shopify/polaris-tokens';\nimport { debounce } from '../debounce.js';\nimport { scrollable, dataPolarisTopBar } from '../../components/shared.js';\nimport { stackedContent } from '../breakpoints.js';\nimport { getRectForNode } from '../geometry.js';\n\nconst SIXTY_FPS = 1000 / 60;\nclass StickyManager {\n constructor(container) {\n this.stickyItems = [];\n this.stuckItems = [];\n this.container = null;\n this.topBarOffset = 0;\n this.handleResize = debounce(() => {\n this.manageStickyItems();\n }, SIXTY_FPS, {\n leading: true,\n trailing: true,\n maxWait: SIXTY_FPS\n });\n this.handleScroll = debounce(() => {\n this.manageStickyItems();\n }, SIXTY_FPS, {\n leading: true,\n trailing: true,\n maxWait: SIXTY_FPS\n });\n\n if (container) {\n this.setContainer(container);\n }\n }\n\n registerStickyItem(stickyItem) {\n this.stickyItems.push(stickyItem);\n }\n\n unregisterStickyItem(nodeToRemove) {\n const nodeIndex = this.stickyItems.findIndex(({\n stickyNode\n }) => nodeToRemove === stickyNode);\n this.stickyItems.splice(nodeIndex, 1);\n }\n\n setContainer(el) {\n this.container = el;\n\n if (isDocument(el)) {\n this.setTopBarOffset(el);\n }\n\n this.container.addEventListener('scroll', this.handleScroll);\n window.addEventListener('resize', this.handleResize);\n this.manageStickyItems();\n }\n\n removeScrollListener() {\n if (this.container) {\n this.container.removeEventListener('scroll', this.handleScroll);\n window.removeEventListener('resize', this.handleResize);\n }\n }\n\n manageStickyItems() {\n if (this.stickyItems.length <= 0) {\n return;\n }\n\n const scrollTop = this.container ? scrollTopFor(this.container) : 0;\n const containerTop = getRectForNode(this.container).top + this.topBarOffset;\n this.stickyItems.forEach(stickyItem => {\n const {\n handlePositioning\n } = stickyItem;\n const {\n sticky,\n top,\n left,\n width\n } = this.evaluateStickyItem(stickyItem, scrollTop, containerTop);\n this.updateStuckItems(stickyItem, sticky);\n handlePositioning(sticky, top, left, width);\n });\n }\n\n evaluateStickyItem(stickyItem, scrollTop, containerTop) {\n const {\n stickyNode,\n placeHolderNode,\n boundingElement,\n offset,\n disableWhenStacked\n } = stickyItem;\n\n if (disableWhenStacked && stackedContent().matches) {\n return {\n sticky: false,\n top: 0,\n left: 0,\n width: 'auto'\n };\n }\n\n const stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(tokens.spacing['space-5'].value, 10) : this.getOffset(stickyNode);\n const scrollPosition = scrollTop + stickyOffset;\n const placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;\n const top = containerTop + stickyOffset;\n const width = placeHolderNode.getBoundingClientRect().width;\n const left = placeHolderNode.getBoundingClientRect().left;\n let sticky;\n\n if (boundingElement == null) {\n sticky = scrollPosition >= placeHolderNodeCurrentTop;\n } else {\n var _stickyNode$firstElem;\n\n const stickyItemHeight = stickyNode.getBoundingClientRect().height || ((_stickyNode$firstElem = stickyNode.firstElementChild) === null || _stickyNode$firstElem === void 0 ? void 0 : _stickyNode$firstElem.getBoundingClientRect().height) || 0;\n const stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;\n sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;\n }\n\n return {\n sticky,\n top,\n left,\n width\n };\n }\n\n updateStuckItems(item, sticky) {\n const {\n stickyNode\n } = item;\n\n if (sticky && !this.isNodeStuck(stickyNode)) {\n this.addStuckItem(item);\n } else if (!sticky && this.isNodeStuck(stickyNode)) {\n this.removeStuckItem(item);\n }\n }\n\n addStuckItem(stickyItem) {\n this.stuckItems.push(stickyItem);\n }\n\n removeStuckItem(stickyItem) {\n const {\n stickyNode: nodeToRemove\n } = stickyItem;\n const nodeIndex = this.stuckItems.findIndex(({\n stickyNode\n }) => nodeToRemove === stickyNode);\n this.stuckItems.splice(nodeIndex, 1);\n }\n\n getOffset(node) {\n if (this.stuckItems.length === 0) {\n return 0;\n }\n\n let offset = 0;\n let count = 0;\n const stuckNodesLength = this.stuckItems.length;\n const nodeRect = getRectForNode(node);\n\n while (count < stuckNodesLength) {\n const stuckNode = this.stuckItems[count].stickyNode;\n\n if (stuckNode !== node) {\n const stuckNodeRect = getRectForNode(stuckNode);\n\n if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {\n offset += getRectForNode(stuckNode).height;\n }\n } else {\n break;\n }\n\n count++;\n }\n\n return offset;\n }\n\n isNodeStuck(node) {\n const nodeFound = this.stuckItems.findIndex(({\n stickyNode\n }) => node === stickyNode);\n return nodeFound >= 0;\n }\n\n setTopBarOffset(container) {\n const topbarElement = container.querySelector(`:not(${scrollable.selector}) ${dataPolarisTopBar.selector}`);\n this.topBarOffset = topbarElement ? topbarElement.clientHeight : 0;\n }\n\n}\n\nfunction isDocument(node) {\n return node === document;\n}\n\nfunction scrollTopFor(container) {\n return isDocument(container) ? document.body.scrollTop || document.documentElement.scrollTop : container.scrollTop;\n}\n\nfunction horizontallyOverlaps(rect1, rect2) {\n const rect1Left = rect1.left;\n const rect1Right = rect1.left + rect1.width;\n const rect2Left = rect2.left;\n const rect2Right = rect2.left + rect2.width;\n return rect2Right < rect1Left || rect1Right < rect2Left;\n}\n\nexport { StickyManager };\n","const isServer = typeof window === 'undefined' || typeof document === 'undefined';\n\nexport { isServer };\n","import { createContext } from 'react';\n\nconst UniqueIdFactoryContext = /*#__PURE__*/createContext(undefined);\n\nexport { UniqueIdFactoryContext };\n","import { useContext, useRef } from 'react';\nimport { MissingAppProviderError } from '../errors.js';\nimport { UniqueIdFactoryContext } from './context.js';\n\n/**\n * Returns a unique id that remains consistent across multiple re-renders of the\n * same hook\n * @param prefix Defines a prefix for the ID. You probably want to set this to\n * the name of the component you're calling `useUniqueId` in.\n * @param overrideId Defines a fixed value to use instead of generating a unique\n * ID. Useful for components that allow consumers to specify their own ID.\n */\n\nfunction useUniqueId(prefix = '', overrideId = '') {\n const idFactory = useContext(UniqueIdFactoryContext); // By using a ref to store the uniqueId for each invocation of the hook and\n // checking that it is not already populated we ensure that we don’t generate\n // a new ID on every re-render of a component.\n\n const uniqueIdRef = useRef(null);\n\n if (!idFactory) {\n throw new MissingAppProviderError('No UniqueIdFactory was provided.');\n } // If an override was specified, then use that instead of using a unique ID\n // Hooks can’t be called conditionally so this has to go after all use* calls\n\n\n if (overrideId) {\n return overrideId;\n } // If a unique id has not yet been generated, then get a new one\n\n\n if (!uniqueIdRef.current) {\n uniqueIdRef.current = idFactory.nextId(prefix);\n }\n\n return uniqueIdRef.current;\n}\n\nexport { useUniqueId };\n","class UniqueIdFactory {\n constructor(idGeneratorFactory) {\n this.idGeneratorFactory = void 0;\n this.idGenerators = {};\n this.idGeneratorFactory = idGeneratorFactory;\n }\n\n nextId(prefix) {\n if (!this.idGenerators[prefix]) {\n this.idGenerators[prefix] = this.idGeneratorFactory(prefix);\n }\n\n return this.idGenerators[prefix]();\n }\n\n}\nfunction globalIdGeneratorFactory(prefix = '') {\n let index = 1;\n return () => `Polaris${prefix}${index++}`;\n}\n\nexport { UniqueIdFactory, globalIdGeneratorFactory };\n","import { useRef } from 'react';\nimport { useIsAfterInitialMount } from './use-is-after-initial-mount.js';\n\n/**\n * Similarly to the life-cycle method componentDidMount, useComponentDidMount\n * will be invoked after the component has mounted, and only the initial mount.\n * @param callback Defines a callback to invoke once the component has\n * initially mounted.\n * @example\n * function Playground({active}) {\n * useComponentDidMount(() => {\n * if (active) {\n * console.warning(`Component has mounted.`);\n * }\n * });\n *\n * return null;\n * }\n */\n\nfunction useComponentDidMount(callback) {\n const isAfterInitialMount = useIsAfterInitialMount();\n const hasInvokedLifeCycle = useRef(false);\n\n if (isAfterInitialMount && !hasInvokedLifeCycle.current) {\n hasInvokedLifeCycle.current = true;\n return callback();\n }\n}\n\nexport { useComponentDidMount };\n","import { useRef } from 'react';\nimport isEqual from 'react-fast-compare';\n\n/**\n * Allows for custom or deep comparison of a dependency list. Useful to keep a consistent dependency\n * list across reference changes.\n * @param dependencies A dependency array similar to React's useEffect / useCallback / useMemo\n * @param comparator An optional function to compare dependencies that'll default to a deep comparison\n * @returns A dependency list\n * @see {@link https://github.com/Shopify/polaris-react/blob/main/src/utilities/use-deep-effect.tsx}\n * @see {@link https://github.com/Shopify/polaris-react/blob/main/src/utilities/use-deep-callback.tsx}\n * @example\n * function useDeepEffectExample(callback, dependencies, customCompare) {\n * useEffect(callback, useDeepCompareRef(dependencies, customCompare));\n * }\n */\nfunction useDeepCompareRef(dependencies, comparator = isEqual) {\n const dependencyList = useRef(dependencies);\n\n if (!comparator(dependencyList.current, dependencies)) {\n dependencyList.current = dependencies;\n }\n\n return dependencyList.current;\n}\n\nexport { useDeepCompareRef };\n","import { useEffect } from 'react';\nimport { useDeepCompareRef } from './use-deep-compare-ref.js';\n\n/**\n * A replacement for React's useEffect that'll allow for custom and deep\n * compares of the dependency list.\n * @see {@link https://reactjs.org/docs/hooks-reference.html#useeffect}\n * @param callback Accepts a callback that's forwarded to React's useEffect\n * @param dependencies A dependency array similar to React's useEffect however it utilizes a deep compare\n * @param customCompare Opportunity to provide a custom compare function\n * @example\n * function ComponentExample() {\n * const [, forceUpdate] = useState();\n * const obj = {a: 1};\n *\n * useDeepEffect(() => {\n * console.log('useDeepEffect invocation');\n * forceUpdate(obj);\n * }, [obj]);\n *\n * return null;\n * }\n */\nfunction useDeepEffect(callback, dependencies, customCompare) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(callback, useDeepCompareRef(dependencies, customCompare));\n}\n\nexport { useDeepEffect };\n","import { useCallback } from 'react';\n\n/**\n * useDisableInteraction provides the original event handler but disables interaction\n * if the boolean passed is true.\n * @param disabled - A boolean value that determines if the button should\n * be disabled\n * @param handleEvent - The original event handler\n * @returns Function - The original event handler but with interactions disabled if the\n * provided boolean is true\n * @example\n * function ComponentExample() {\n * const handleClick = () => {\n * console.log('disable me');\n * };\n * const handleClickEvent = useDisableInteraction(true, handleClick);\n * return ;\n * }\n */\n\nfunction useDisableClick(disabled, handleClick) {\n const handleClickWrapper = useCallback(event => {\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }, [disabled]);\n\n if (!disabled) {\n return handleClick;\n }\n\n return handleClickWrapper;\n}\n\nexport { useDisableClick };\n","import { useState, useEffect } from 'react';\n\n/**\n * useIsAfterInitialMount will trigger a re-render to provide\n * you with an updated value. Using this you enhance server-side\n * code that can only run on the client.\n * @returns MutableRefObject - Returns a ref object with the\n * results from invoking initial value\n * @example\n * function ComponentExample({children}) {\n * const isMounted = useIsAfterInitialMount();\n * const content = isMounted ? children : null;\n *\n * return <>{content}>;\n * }\n */\n\nfunction useIsAfterInitialMount() {\n const [isAfterInitialMount, setIsAfterInitialMount] = useState(false);\n useEffect(() => {\n setIsAfterInitialMount(true);\n }, []);\n return isAfterInitialMount;\n}\n\nexport { useIsAfterInitialMount };\n","import { useCallback, useState } from 'react';\n\n/**\n * Returns a stateful value, and a set of memoized functions to toggle it,\n * set it to true and set it to false\n */\n\nfunction useToggle(initialState) {\n const [value, setState] = useState(initialState);\n return {\n value,\n toggle: useCallback(() => setState(state => !state), []),\n setTrue: useCallback(() => setState(true), []),\n setFalse: useCallback(() => setState(false), [])\n };\n}\n\nexport { useToggle };\n","import { createContext } from 'react';\n\nconst WithinContentContext = /*#__PURE__*/createContext(false);\n\nexport { WithinContentContext };\n","import { createContext } from 'react';\n\nconst WithinFilterContext = /*#__PURE__*/createContext(false);\n\nexport { WithinFilterContext };\n","import React from 'react';\n\nvar SvgAppExtensionIcon = function SvgAppExtensionIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.28 8.78a.75.75 0 0 1-1.06-1.06l3.22-3.22h-1.19a.75.75 0 0 1 0-1.5h3a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-1.19l-3.22 3.22Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M5.75 3.5a2.25 2.25 0 0 0-2.25 2.25v2.75a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2.75Zm-.75 2.25a.75.75 0 0 1 .75-.75h2.25v3h-3v-2.25Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M3.5 14.25a2.25 2.25 0 0 0 2.25 2.25h2.75a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v2.75Zm2.25.75a.75.75 0 0 1-.75-.75v-2.25h3v3h-2.25Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M14.25 16.5a2.25 2.25 0 0 0 2.25-2.25v-2.75a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2.75Zm.75-2.25a.75.75 0 0 1-.75.75h-2.25v-3h3v2.25Z\"\n }));\n};\nSvgAppExtensionIcon.displayName = \"AppExtensionIcon\";\n\nexport { SvgAppExtensionIcon as S };\n","import React from 'react';\n\nvar SvgArrowRightIcon = function SvgArrowRightIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z\"\n }));\n};\nSvgArrowRightIcon.displayName = \"ArrowRightIcon\";\n\nexport { SvgArrowRightIcon as S };\n","import React from 'react';\n\nvar SvgCashDollarIcon = function SvgCashDollarIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.5 6.5a.75.75 0 0 1 1.5 0v.25h.75a.75.75 0 0 1 0 1.5h-2.25a.5.5 0 0 0 0 1h1a2 2 0 1 1 0 4v.25a.75.75 0 0 1-1.5 0v-.25h-.75a.75.75 0 0 1 0-1.5h2.25a.5.5 0 0 0 0-1h-1a2 2 0 1 1 0-4v-.25Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z\"\n }));\n};\nSvgCashDollarIcon.displayName = \"CashDollarIcon\";\n\nexport { SvgCashDollarIcon as S };\n","import React from 'react';\n\nvar SvgChevronDownIcon = function SvgChevronDownIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z\"\n }));\n};\nSvgChevronDownIcon.displayName = \"ChevronDownIcon\";\n\nexport { SvgChevronDownIcon as S };\n","import React from 'react';\n\nvar SvgChevronUpIcon = function SvgChevronUpIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M14.53 12.28a.75.75 0 0 1-1.06 0l-3.47-3.47-3.47 3.47a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1 0 1.06Z\"\n }));\n};\nSvgChevronUpIcon.displayName = \"ChevronUpIcon\";\n\nexport { SvgChevronUpIcon as S };\n","import React from 'react';\n\nvar SvgConnectIcon = function SvgConnectIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.95 11a1.5 1.5 0 1 1 0 1.5h-4.7a2.75 2.75 0 0 1-2.75-2.75v-3.5a2.75 2.75 0 0 1 2.75-2.75h5.5a.75.75 0 0 1 0 1.5h-5.5c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h4.7Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14 16.25a2.75 2.75 0 0 0 2.75-2.75v-3.5a2.75 2.75 0 0 0-2.75-2.75h-4.7a1.5 1.5 0 1 0 0 1.5h4.7c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-5.5a.75.75 0 0 0 0 1.5h5.5Z\"\n }));\n};\nSvgConnectIcon.displayName = \"ConnectIcon\";\n\nexport { SvgConnectIcon as S };\n","import React from 'react';\n\nvar SvgDiscountCodeIcon = function SvgDiscountCodeIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.25 5.5c0-1.242 1.007-2.25 2.25-2.25.414 0 .75.336.75.75s-.336.75-.75.75-.75.336-.75.75-.336.75-.75.75-.75-.336-.75-.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.78 7.22c.293.293.293.768 0 1.06l-4.5 4.5c-.293.293-.767.293-1.06 0-.293-.292-.293-.767 0-1.06l4.5-4.5c.293-.293.767-.293 1.06 0Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9 8c0 .553-.448 1-1 1s-1-.447-1-1c0-.552.448-1 1-1s1 .448 1 1Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 13c.552 0 1-.447 1-1 0-.552-.448-1-1-1s-1 .448-1 1c0 .553.448 1 1 1Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.25 14.5c0 1.243 1.007 2.25 2.25 2.25.414 0 .75-.335.75-.75 0-.414-.336-.75-.75-.75s-.75-.335-.75-.75c0-.414-.336-.75-.75-.75s-.75.336-.75.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.75 14.5c0 1.243-1.007 2.25-2.25 2.25-.414 0-.75-.335-.75-.75 0-.414.336-.75.75-.75s.75-.335.75-.75c0-.414.336-.75.75-.75s.75.336.75.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.75 5.5c0-1.242-1.007-2.25-2.25-2.25-.414 0-.75.336-.75.75s.336.75.75.75.75.336.75.75.336.75.75.75.75-.336.75-.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16 8.25c.414 0 .75.336.75.75v2c0 .415-.336.75-.75.75s-.75-.335-.75-.75v-2c0-.414.336-.75.75-.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11 16.75c.414 0 .75-.335.75-.75 0-.414-.336-.75-.75-.75h-2c-.414 0-.75.336-.75.75 0 .415.336.75.75.75h2Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4 8.25c.414 0 .75.336.75.75v2c0 .415-.336.75-.75.75s-.75-.335-.75-.75v-2c0-.414.336-.75.75-.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11 4.75c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-2c-.414 0-.75.336-.75.75s.336.75.75.75h2Z\"\n }));\n};\nSvgDiscountCodeIcon.displayName = \"DiscountCodeIcon\";\n\nexport { SvgDiscountCodeIcon as S };\n","import React from 'react';\n\nvar SvgDomainIcon = function SvgDomainIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.25 3c-.414 0-.75.336-.75.75v9c0 .414.336.75.75.75s.75-.336.75-.75v-8.25h10.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-11Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M5 6.25c0-.414.336-.75.75-.75h10.5c.414 0 .75.336.75.75v3.75c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-.5h-9v5h4c.414 0 .75.336.75.75s-.336.75-.75.75h-4.75c-.414 0-.75-.336-.75-.75v-9Zm10.5.75v1h-9v-1h9Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.565 10.96c-.17-.043-.35.007-.474.131s-.174.304-.132.474l1.122 4.51c.043.176.177.314.351.362.174.048.36-.001.487-.128l1.165-1.165.84.841c.196.196.512.196.708 0l.353-.353c.196-.195.196-.512 0-.707l-.84-.841 1.163-1.165c.128-.127.177-.313.129-.487-.049-.174-.187-.308-.361-.351l-4.51-1.122Z\"\n }));\n};\nSvgDomainIcon.displayName = \"DomainIcon\";\n\nexport { SvgDomainIcon as S };\n","import React from 'react';\n\nvar SvgDragHandleIcon = function SvgDragHandleIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.5 4.5c-.552 0-1 .448-1 1v.5c0 .552.448 1 1 1h.5c.552 0 1-.448 1-1v-.5c0-.552-.448-1-1-1h-.5Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.5 8.75c-.552 0-1 .448-1 1v.5c0 .552.448 1 1 1h.5c.552 0 1-.448 1-1v-.5c0-.552-.448-1-1-1h-.5Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.5 14c0-.552.448-1 1-1h.5c.552 0 1 .448 1 1v.5c0 .552-.448 1-1 1h-.5c-.552 0-1-.448-1-1v-.5Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 4.5c-.552 0-1 .448-1 1v.5c0 .552.448 1 1 1h.5c.552 0 1-.448 1-1v-.5c0-.552-.448-1-1-1h-.5Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11 9.75c0-.552.448-1 1-1h.5c.552 0 1 .448 1 1v.5c0 .552-.448 1-1 1h-.5c-.552 0-1-.448-1-1v-.5Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 13c-.552 0-1 .448-1 1v.5c0 .552.448 1 1 1h.5c.552 0 1-.448 1-1v-.5c0-.552-.448-1-1-1h-.5Z\"\n }));\n};\nSvgDragHandleIcon.displayName = \"DragHandleIcon\";\n\nexport { SvgDragHandleIcon as S };\n","import React from 'react';\n\nvar SvgEditIcon = function SvgEditIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M15.655 4.344a2.695 2.695 0 0 0-3.81 0l-.599.599-.009-.009-1.06 1.06.008.01-5.88 5.88a2.75 2.75 0 0 0-.805 1.944v1.922a.75.75 0 0 0 .75.75h1.922a2.75 2.75 0 0 0 1.944-.806l7.54-7.539a2.695 2.695 0 0 0 0-3.81Zm-4.409 2.72-5.88 5.88a1.25 1.25 0 0 0-.366.884v1.172h1.172c.331 0 .65-.132.883-.366l5.88-5.88-1.689-1.69Zm2.75.629.599-.599a1.195 1.195 0 1 0-1.69-1.689l-.598.599 1.69 1.689Z\"\n }));\n};\nSvgEditIcon.displayName = \"EditIcon\";\n\nexport { SvgEditIcon as S };\n","import React from 'react';\n\nvar SvgHomeIcon = function SvgHomeIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M8.344 3.692a2.25 2.25 0 0 1 3.312 0l3.854 4.19a3.75 3.75 0 0 1 .99 2.538v3.33a2.75 2.75 0 0 1-2.75 2.75h-1.75a1.5 1.5 0 0 1-1.5-1.5v-2h-1v2a1.5 1.5 0 0 1-1.5 1.5h-1.75a2.75 2.75 0 0 1-2.75-2.75v-3.33c0-.94.353-1.847.99-2.539l3.854-4.189Zm2.208 1.016a.75.75 0 0 0-1.104 0l-3.854 4.189a2.25 2.25 0 0 0-.594 1.523v3.33c0 .69.56 1.25 1.25 1.25h1.75v-2a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v2h1.75c.69 0 1.25-.56 1.25-1.25v-3.33a2.25 2.25 0 0 0-.594-1.523l-3.854-4.19Z\"\n }));\n};\nSvgHomeIcon.displayName = \"HomeIcon\";\n\nexport { SvgHomeIcon as S };\n","import React from 'react';\n\nvar SvgInfoIcon = function SvgInfoIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 14a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-.75.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z\"\n }));\n};\nSvgInfoIcon.displayName = \"InfoIcon\";\n\nexport { SvgInfoIcon as S };\n","import React from 'react';\n\nvar SvgLayoutColumn1Icon = function SvgLayoutColumn1Icon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M4 6.75c0-2.071 1.679-3.75 3.75-3.75h4.5c2.071 0 3.75 1.679 3.75 3.75v6.5c0 2.071-1.679 3.75-3.75 3.75h-4.5c-2.071 0-3.75-1.679-3.75-3.75v-6.5Zm3.75-2.25c-1.243 0-2.25 1.007-2.25 2.25v6.5c0 1.243 1.007 2.25 2.25 2.25h4.5c1.243 0 2.25-1.007 2.25-2.25v-6.5c0-1.243-1.007-2.25-2.25-2.25h-4.5Z\"\n }));\n};\nSvgLayoutColumn1Icon.displayName = \"LayoutColumn1Icon\";\n\nexport { SvgLayoutColumn1Icon as S };\n","import React from 'react';\n\nvar SvgLayoutColumns2Icon = function SvgLayoutColumns2Icon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M6.75 3c-2.071 0-3.75 1.679-3.75 3.75v6.5c0 2.071 1.679 3.75 3.75 3.75h6.5c2.071 0 3.75-1.679 3.75-3.75v-6.5c0-2.071-1.679-3.75-3.75-3.75h-6.5Zm-2.25 3.75c0-1.243 1.007-2.25 2.25-2.25h2.5v11h-2.5c-1.243 0-2.25-1.007-2.25-2.25v-6.5Zm6.25 8.75h2.5c1.243 0 2.25-1.007 2.25-2.25v-6.5c0-1.243-1.007-2.25-2.25-2.25h-2.5v11Z\"\n }));\n};\nSvgLayoutColumns2Icon.displayName = \"LayoutColumns2Icon\";\n\nexport { SvgLayoutColumns2Icon as S };\n","import React from 'react';\n\nvar SvgLayoutColumns3Icon = function SvgLayoutColumns3Icon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M3 6.75c0-2.071 1.679-3.75 3.75-3.75h6.5c2.071 0 3.75 1.679 3.75 3.75v6.5c0 2.071-1.679 3.75-3.75 3.75h-6.5c-2.071 0-3.75-1.679-3.75-3.75v-6.5Zm3.75-2.25c-1.243 0-2.25 1.007-2.25 2.25v6.5c0 1.243 1.007 2.25 2.25 2.25h.5v-11h-.5Zm4.5 11h-2.5v-11h2.5v11Zm1.5 0h.5c1.243 0 2.25-1.007 2.25-2.25v-6.5c0-1.243-1.007-2.25-2.25-2.25h-.5v11Z\"\n }));\n};\nSvgLayoutColumns3Icon.displayName = \"LayoutColumns3Icon\";\n\nexport { SvgLayoutColumns3Icon as S };\n","import React from 'react';\n\nvar SvgLinkIcon = function SvgLinkIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M15.842 4.175a3.746 3.746 0 0 0-5.298 0l-2.116 2.117a3.75 3.75 0 0 0 .01 5.313l.338.336a.75.75 0 1 0 1.057-1.064l-.339-.337a2.25 2.25 0 0 1-.005-3.187l2.116-2.117a2.246 2.246 0 1 1 3.173 3.18l-1.052 1.047a.75.75 0 0 0 1.058 1.064l1.052-1.047a3.746 3.746 0 0 0 .006-5.305Zm-11.664 11.67a3.75 3.75 0 0 0 5.304 0l2.121-2.121a3.75 3.75 0 0 0 0-5.303l-.362-.362a.75.75 0 0 0-1.06 1.06l.362.362a2.25 2.25 0 0 1 0 3.182l-2.122 2.122a2.25 2.25 0 1 1-3.182-3.182l1.07-1.07a.75.75 0 1 0-1.062-1.06l-1.069 1.069a3.75 3.75 0 0 0 0 5.303Z\"\n }));\n};\nSvgLinkIcon.displayName = \"LinkIcon\";\n\nexport { SvgLinkIcon as S };\n","import React from 'react';\n\nvar SvgMenuIcon = function SvgMenuIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M3 4.75a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5h-12.5a.75.75 0 0 1-.75-.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M3 10a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5h-12.5a.75.75 0 0 1-.75-.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M3 15.25a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5h-12.5a.75.75 0 0 1-.75-.75Z\"\n }));\n};\nSvgMenuIcon.displayName = \"MenuIcon\";\n\nexport { SvgMenuIcon as S };\n","import React from 'react';\n\nvar SvgPersonIcon = function SvgPersonIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M10 3a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm-2 3.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M15.484 14.227a6.274 6.274 0 0 0-10.968 0l-.437.786a1.338 1.338 0 0 0 1.17 1.987h9.502a1.338 1.338 0 0 0 1.17-1.987l-.437-.786Zm-9.657.728a4.773 4.773 0 0 1 8.346 0l.302.545h-8.95l.302-.545Z\"\n }));\n};\nSvgPersonIcon.displayName = \"PersonIcon\";\n\nexport { SvgPersonIcon as S };\n","import React from 'react';\n\nvar SvgPersonLockIcon = function SvgPersonLockIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M8 4.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-3.5 2a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm10.25 3a.75.75 0 0 1 .75.75v1.75h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1v-1.75a2.25 2.25 0 0 0-4.5 0 .75.75 0 0 0 1.5 0 .75.75 0 0 1 .75-.75Zm-2.25 4v2h4v-2h-4Zm-7.193-.153a5.24 5.24 0 0 0-1.718 2.16h5.724a.75.75 0 1 1 0 1.5h-5.93c-.407 0-.804-.167-1.073-.478a1.263 1.263 0 0 1-.24-1.243c.322-.96 1.094-2.246 2.361-3.157 1.298-.932 3.084-1.445 5.33-.854a.75.75 0 1 1-.382 1.45c-1.798-.473-3.126-.058-4.072.622Z\"\n }));\n};\nSvgPersonLockIcon.displayName = \"PersonLockIcon\";\n\nexport { SvgPersonLockIcon as S };\n","import React from 'react';\n\nvar SvgPlusCircleIcon = function SvgPlusCircleIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.25 10a.75.75 0 0 1 .75-.75h2.25v-2.25a.75.75 0 0 1 1.5 0v2.25h2.25a.75.75 0 0 1 0 1.5h-2.25v2.25a.75.75 0 0 1-1.5 0v-2.25h-2.25a.75.75 0 0 1-.75-.75Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-1.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z\"\n }));\n};\nSvgPlusCircleIcon.displayName = \"PlusCircleIcon\";\n\nexport { SvgPlusCircleIcon as S };\n","import React from 'react';\n\nvar SvgRefreshIcon = function SvgRefreshIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.5 9.25a.75.75 0 0 0 1.5 0 3 3 0 0 1 3-3h6.566l-1.123 1.248a.75.75 0 1 0 1.114 1.004l2.25-2.5a.75.75 0 0 0-.027-1.032l-2.25-2.25a.75.75 0 1 0-1.06 1.06l.97.97h-6.44a4.5 4.5 0 0 0-4.5 4.5Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.5 10.75a.75.75 0 0 0-1.5 0 3 3 0 0 1-3 3h-6.566l1.123-1.248a.75.75 0 1 0-1.114-1.004l-2.25 2.5a.75.75 0 0 0 .027 1.032l2.25 2.25a.75.75 0 0 0 1.06-1.06l-.97-.97h6.44a4.5 4.5 0 0 0 4.5-4.5Z\"\n }));\n};\nSvgRefreshIcon.displayName = \"RefreshIcon\";\n\nexport { SvgRefreshIcon as S };\n","import React from 'react';\n\nvar SvgSearchIcon = function SvgSearchIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z\"\n }));\n};\nSvgSearchIcon.displayName = \"SearchIcon\";\n\nexport { SvgSearchIcon as S };\n","import React from 'react';\n\nvar SvgTextTitleIcon = function SvgTextTitleIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4 4.75a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-.75h-3.5v8.75h1.25a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h1.25v-8.75h-3.5v.75a.75.75 0 0 1-1.5 0v-1.5Z\"\n }));\n};\nSvgTextTitleIcon.displayName = \"TextTitleIcon\";\n\nexport { SvgTextTitleIcon as S };\n","import React from 'react';\n\nvar SvgThumbsUpIcon = function SvgThumbsUpIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M12.539 14.57a9.25 9.25 0 0 1-4.074-.838l-.307-.141a3.751 3.751 0 0 0-1.158-.32v-5.222a1.5 1.5 0 0 0 .15-.099 6.489 6.489 0 0 0 2.475-3.95 1.41 1.41 0 0 1 1.378 1.557l-.133 1.26a1.75 1.75 0 0 0 1.74 1.933h1.595c.758 0 1.342.67 1.239 1.42l-.338 2.449a2.25 2.25 0 0 1-2.176 1.942l-.391.01Zm-7.039-6.32h-1v5h1v-5Zm2.34 6.845a10.75 10.75 0 0 0 4.735.975l.391-.01a3.75 3.75 0 0 0 3.626-3.236l.337-2.448a2.75 2.75 0 0 0-2.724-3.126h-1.594a.25.25 0 0 1-.249-.276l.133-1.26a2.91 2.91 0 0 0-2.894-3.214h-.364c-.5 0-.928.357-1.017.849l-.055.303a4.989 4.989 0 0 1-1.915 3.098h-2c-.69 0-1.25.56-1.25 1.25v5.5c0 .69.56 1.25 1.25 1.25h2.345c.324 0 .644.07.938.205l.307.14Z\"\n }));\n};\nSvgThumbsUpIcon.displayName = \"ThumbsUpIcon\";\n\nexport { SvgThumbsUpIcon as S };\n","import React from 'react';\n\nvar SvgUploadIcon = function SvgUploadIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.5 6.26a.75.75 0 0 1-1.5 0v-.51a.75.75 0 0 0-.75-.75h-8.5a.75.75 0 0 0-.75.75v.51a.75.75 0 0 1-1.5 0v-.51a2.25 2.25 0 0 1 2.25-2.25h8.5a2.25 2.25 0 0 1 2.25 2.25v.51Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.75 16.01a.75.75 0 0 1-1.5 0v-6.69l-1.72 1.72a.75.75 0 1 1-1.06-1.06l3-3a.75.75 0 0 1 1.06 0l3 3a.75.75 0 1 1-1.06 1.06l-1.72-1.72v6.69Z\"\n }));\n};\nSvgUploadIcon.displayName = \"UploadIcon\";\n\nexport { SvgUploadIcon as S };\n","import React from 'react';\n\nvar SvgViewIcon = function SvgViewIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M13 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-1.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M10 4c-2.476 0-4.348 1.23-5.577 2.532a9.266 9.266 0 0 0-1.4 1.922 5.98 5.98 0 0 0-.37.818c-.082.227-.153.488-.153.728s.071.501.152.728c.088.246.213.524.371.818.317.587.784 1.27 1.4 1.922 1.229 1.302 3.1 2.532 5.577 2.532 2.476 0 4.348-1.23 5.577-2.532a9.265 9.265 0 0 0 1.4-1.922 5.98 5.98 0 0 0 .37-.818c.082-.227.153-.488.153-.728s-.071-.501-.152-.728a5.984 5.984 0 0 0-.371-.818 9.269 9.269 0 0 0-1.4-1.922c-1.229-1.302-3.1-2.532-5.577-2.532Zm-5.999 6.002v-.004c.004-.02.017-.09.064-.223a4.5 4.5 0 0 1 .278-.608 7.768 7.768 0 0 1 1.17-1.605c1.042-1.104 2.545-2.062 4.487-2.062 1.942 0 3.445.958 4.486 2.062a7.77 7.77 0 0 1 1.17 1.605c.13.24.221.447.279.608.047.132.06.203.064.223v.004c-.004.02-.017.09-.064.223a4.503 4.503 0 0 1-.278.608 7.768 7.768 0 0 1-1.17 1.605c-1.042 1.104-2.545 2.062-4.487 2.062-1.942 0-3.445-.958-4.486-2.062a7.766 7.766 0 0 1-1.17-1.605 4.5 4.5 0 0 1-.279-.608c-.047-.132-.06-.203-.064-.223Z\"\n }));\n};\nSvgViewIcon.displayName = \"ViewIcon\";\n\nexport { SvgViewIcon as S };\n","import React from 'react';\n\nvar SvgXCircleIcon = function SvgXCircleIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.03 6.97a.75.75 0 0 1 0 1.06l-1.97 1.97 1.97 1.97a.75.75 0 1 1-1.06 1.06l-1.97-1.97-1.97 1.97a.75.75 0 0 1-1.06-1.06l1.97-1.97-1.97-1.97a.75.75 0 0 1 1.06-1.06l1.97 1.97 1.97-1.97a.75.75 0 0 1 1.06 0Z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-1.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z\"\n }));\n};\nSvgXCircleIcon.displayName = \"XCircleIcon\";\n\nexport { SvgXCircleIcon as S };\n","import React from 'react';\n\nvar SvgXIcon = function SvgXIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z\"\n }));\n};\nSvgXIcon.displayName = \"XIcon\";\n\nexport { SvgXIcon as S };\n","function ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\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\n return keys;\n}\n\nfunction _objectSpread2(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\n return target;\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) {\n if (!raw) {\n raw = strings.slice(0);\n }\n\n return Object.freeze(Object.defineProperties(strings, {\n raw: {\n value: Object.freeze(raw)\n }\n }));\n}\n\nfunction _slicedToArray(arr, i) {\n return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n}\n\nfunction _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"];\n\n if (_i == null) return;\n var _arr = [];\n var _n = true;\n var _d = false;\n\n var _s, _e;\n\n try {\n for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nfunction _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nexport { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toConsumableArray as toConsumableArray, _unsupportedIterableToArray as unsupportedIterableToArray };\n","import { taggedTemplateLiteral as _taggedTemplateLiteral, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, toConsumableArray as _toConsumableArray } from './_virtual/_rollupPluginBabelHelpers.mjs';\n\nvar _excluded = [\"colorSchemes\"];\n\nvar _templateObject;\n\nvar BASE_FONT_SIZE = 16;\nvar UNIT_PX = 'px';\nvar UNIT_EM = 'em';\nvar UNIT_REM = 'rem'; // https://regex101.com/r/zvY2bu/1\n\nvar DIGIT_REGEX = new RegExp(String.raw(_templateObject || (_templateObject = _taggedTemplateLiteral([\"-?d+(?:.d+|d*)\"], [\"-?\\\\d+(?:\\\\.\\\\d+|\\\\d*)\"]))));\nvar UNIT_REGEX = new RegExp(\"\".concat(UNIT_PX, \"|\").concat(UNIT_EM, \"|\").concat(UNIT_REM));\nfunction getUnit() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n var unit = value.match(new RegExp(\"\".concat(DIGIT_REGEX.source, \"(\").concat(UNIT_REGEX.source, \")\")));\n return unit && unit[1];\n}\nfunction toPx() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n var unit = getUnit(value);\n if (!unit) return value;\n\n if (unit === UNIT_PX) {\n return value;\n }\n\n if (unit === UNIT_EM || unit === UNIT_REM) {\n return \"\".concat(parseFloat(value) * BASE_FONT_SIZE).concat(UNIT_PX);\n }\n}\nfunction toEm() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BASE_FONT_SIZE;\n var unit = getUnit(value);\n if (!unit) return value;\n\n if (unit === UNIT_EM) {\n return value;\n }\n\n if (unit === UNIT_PX) {\n return \"\".concat(parseFloat(value) / fontSize).concat(UNIT_EM);\n }\n\n if (unit === UNIT_REM) {\n return \"\".concat(parseFloat(value) * BASE_FONT_SIZE / fontSize).concat(UNIT_EM);\n }\n}\nfunction toRem() {\n var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n var unit = getUnit(value);\n if (!unit) return value;\n\n if (unit === UNIT_REM) {\n return value;\n }\n\n if (unit === UNIT_EM) {\n return \"\".concat(parseFloat(value)).concat(UNIT_REM);\n }\n\n if (unit === UNIT_PX) {\n return \"\".concat(parseFloat(value) / BASE_FONT_SIZE).concat(UNIT_REM);\n }\n}\n\nfunction rem(value) {\n return value.replace(new RegExp(\"\".concat(DIGIT_REGEX.source, \"(\").concat(UNIT_PX, \")\"), 'g'), function (px) {\n var _toRem;\n\n return (_toRem = toRem(px)) !== null && _toRem !== void 0 ? _toRem : px;\n });\n}\n\nfunction tokensToRems(tokenGroup) {\n return Object.fromEntries(Object.entries(tokenGroup).map(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n token = _ref2[0],\n properties = _ref2[1];\n\n return [token, _objectSpread2(_objectSpread2({}, properties), {}, {\n value: rem(properties.value)\n })];\n }) // We loose the `tokenGroup` inference after transforming the object with\n // `Object.fromEntries()` and `Object.entries()`. Thus, we cast the result\n // back to `T` since we are simply converting the `value` from px to rem.\n );\n}\nfunction createVar(token) {\n return \"--p-\".concat(token);\n}\n/**\n * Allowed Polaris keyframes.\n *\n * Result: ['p-keyframes-fade-in', 'p-keyframes-spin', etc...]\n */\n\nfunction getKeyframeNames(motionTokenGroup) {\n return Object.keys(motionTokenGroup).map(function (token) {\n return token.startsWith('keyframes') ? \"p-\".concat(token) : null;\n }).filter(Boolean);\n}\n/**\n * Allowed Polaris token custom properties.\n *\n * Result: ['--p-background', '--p-text', etc...]\n */\n\nfunction getCustomPropertyNames(tokens) {\n var colorSchemes = tokens.colorSchemes,\n restTokenGroups = _objectWithoutProperties(tokens, _excluded);\n\n var customPropertyNames = [].concat(_toConsumableArray(Object.keys(colorSchemes.light).map(function (token) {\n return createVar(token);\n })), _toConsumableArray(Object.entries(restTokenGroups).map(function (_ref3) {\n var _ref4 = _slicedToArray(_ref3, 2);\n _ref4[0];\n var tokenGroup = _ref4[1];\n\n return Object.keys(tokenGroup).map(function (token) {\n return createVar(token);\n });\n }).flat()));\n return customPropertyNames;\n}\nfunction getMediaConditions(breakpoints) {\n var breakpointEntries = Object.entries(breakpoints);\n var lastBreakpointIndex = breakpointEntries.length - 1;\n return Object.fromEntries(breakpointEntries.map(function (entry, index) {\n var _ref5 = entry,\n _ref6 = _slicedToArray(_ref5, 2),\n breakpointsTokenName = _ref6[0],\n breakpoint = _ref6[1].value;\n\n var upMediaCondition = getUpMediaCondition(breakpoint);\n var downMediaCondition = getDownMediaCondition(breakpoint);\n var onlyMediaCondition = index === lastBreakpointIndex ? upMediaCondition : \"\".concat(upMediaCondition, \" and \").concat(getDownMediaCondition( // Next breakpoint\n breakpointEntries[index + 1][1].value));\n return [breakpointsTokenName, {\n // Media condition for the current breakpoint and up\n up: upMediaCondition,\n // Media condition for current breakpoint and down\n down: downMediaCondition,\n // Media condition for only the current breakpoint\n only: onlyMediaCondition\n }];\n }));\n}\n\nfunction getUpMediaCondition(breakpoint) {\n return \"(min-width: \".concat(toEm(breakpoint), \")\");\n}\n/**\n * Down media condition breakpoints are being subtracted by 0.05px to prevent\n * them from overwriting up media queries. We experimented with multiple offsets\n * and felt that 0.05px would be the safest across different pixel densities.\n */\n\n\nfunction getDownMediaCondition(breakpoint) {\n var _toPx;\n\n var offsetBreakpoint = parseFloat((_toPx = toPx(breakpoint)) !== null && _toPx !== void 0 ? _toPx : '') - 0.05;\n return \"(max-width: \".concat(toEm(\"\".concat(offsetBreakpoint, \"px\")), \")\");\n}\n\nexport { createVar, getCustomPropertyNames, getKeyframeNames, getMediaConditions, getUnit, toEm, toPx, toRem, tokensToRems };\n","import { breakpoints } from './token-groups/breakpoints.mjs';\nimport { depth } from './token-groups/depth.mjs';\nimport { legacy } from './token-groups/legacy.mjs';\nimport { colors as colors$1 } from './token-groups/color.dark.mjs';\nimport { colors } from './token-groups/color.light.mjs';\nimport { motion } from './token-groups/motion.mjs';\nimport { shape } from './token-groups/shape.mjs';\nimport { spacing } from './token-groups/spacing.mjs';\nimport { typography } from './token-groups/typography.mjs';\nimport { zIndex } from './token-groups/zIndex.mjs';\nimport { tokensToRems } from './utilities.mjs';\n\n/**\n * Values to convert to CSS custom properties.\n * @example {background: '#000'} // --p-background: #000;\n */\n\nvar osColorSchemes = {\n light: 'light',\n dark: 'dark'\n};\n/**\n * Polaris color schemes and their associated color tokens.\n */\n\nvar colorSchemes = {\n light: colors,\n dark: colors$1\n};\nvar tokens = createTokens({\n breakpoints: tokensToRems(breakpoints),\n colorSchemes: colorSchemes,\n depth: depth,\n legacyTokens: tokensToRems(legacy),\n motion: motion,\n shape: tokensToRems(shape),\n spacing: tokensToRems(spacing),\n typography: tokensToRems(typography),\n zIndex: zIndex\n});\n/**\n * Identity function that simply returns the provided tokens, but additionally\n * validates the input matches the `Tokens` type exactly and infers all members.\n */\n\nfunction createTokens(tokens) {\n return tokens;\n}\n\nexport { osColorSchemes, tokens };\n","var colors = {\n background: {\n value: 'rgba(246, 246, 247, 1)',\n description: 'For use as a background color, in components such as Page and Frame backgrounds.'\n },\n 'background-hovered': {\n value: 'rgba(241, 242, 243, 1)',\n description: 'For use when an action or navigation is used on a background.'\n },\n 'background-pressed': {\n value: 'rgba(237, 238, 239, 1)',\n description: 'For use when an action or navigation is used on a background.'\n },\n 'background-selected': {\n value: 'rgba(237, 238, 239, 1)',\n description: 'For use in the selected item in navigation'\n },\n surface: {\n value: 'rgba(255, 255, 255, 1)',\n description: 'For use as a background color, in components such as Card, Modal, and Popover.'\n },\n 'surface-dark': {\n value: 'rgba(32, 33, 35, 1)',\n description: 'For use as a dark background color, in components such as Card, Modal, and Popover.'\n },\n 'surface-neutral': {\n value: 'rgba(228, 229, 231, 1)',\n description: 'For use as a background color in neutral badges.'\n },\n 'surface-neutral-hovered': {\n value: 'rgba(219, 221, 223, 1)',\n description: 'For use as a hovered background color in neutral badges.'\n },\n 'surface-neutral-pressed': {\n value: 'rgba(201, 204, 208, 1)',\n description: 'For use as a pressed background color in neutral badges.'\n },\n 'surface-neutral-disabled': {\n value: 'rgba(241, 242, 243, 1)',\n description: 'For use as a disabled background color in neutral badges.'\n },\n 'surface-neutral-subdued': {\n value: 'rgba(246, 246, 247, 1)',\n description: 'For use as a background color in neutral banners.'\n },\n 'surface-neutral-subdued-dark': {\n value: 'rgba(68, 71, 74, 1)',\n description: 'For use as a dark background color in neutral banners.'\n },\n 'surface-subdued': {\n value: 'rgba(250, 251, 251, 1)',\n description: 'For use as a subdued background color, in components such as Card, Modal, and Popover.'\n },\n 'surface-disabled': {\n value: 'rgba(250, 251, 251, 1)',\n description: 'For use as a surface color on disabled interactive elements such as option list items and action list items when in a disabled state.'\n },\n 'surface-hovered': {\n value: 'rgba(246, 246, 247, 1)',\n description: 'For use as a surface color on interactive elements such as resource list items and action list items when in a hovered state.'\n },\n 'surface-hovered-dark': {\n value: 'rgba(47, 49, 51, 1)',\n description: 'For use as a dark surface color on interactive elements such as resource list items and action list items when in a hovered state.'\n },\n 'surface-pressed': {\n value: 'rgba(241, 242, 243, 1)',\n description: 'For use as a surface color on interactive elements such as resource list items and action list items when in a pressed state.'\n },\n 'surface-pressed-dark': {\n value: 'rgba(62, 64, 67, 1)',\n description: 'For use as a dark surface color on interactive elements such as resource list items and action list items when in a pressed state.'\n },\n 'surface-depressed': {\n value: 'rgba(237, 238, 239, 1)',\n description: 'For use as a surface color on interactive elements such as resource list items and action list items when in a depressed state.'\n },\n 'surface-search-field': {\n value: 'rgba(241, 242, 243, 1)',\n description: 'For use as a background color, in components on surface elements such as SearchField'\n },\n 'surface-search-field-dark': {\n value: 'rgba(47, 49, 51, 1)',\n description: 'For use as a dark background color, in components on surface elements such as SearchField'\n },\n backdrop: {\n value: 'rgba(0, 0, 0, 0.5)',\n description: 'For use as the background color of the backdrop component for navigation and modal. This color has an alpha of `0.5`.'\n },\n overlay: {\n value: 'rgba(255, 255, 255, 0.5)',\n description: 'For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of `0.5`.'\n },\n 'shadow-color-picker': {\n value: 'rgba(0, 0, 0, 0.5)'\n },\n 'shadow-color-picker-dragger': {\n value: 'rgba(33, 43, 54, 0.32)'\n },\n 'hint-from-direct-light': {\n value: 'rgba(0, 0, 0, 0.15)',\n description: 'For use in building shadows scrollables.'\n },\n border: {\n value: 'rgba(140, 145, 150, 1)',\n description: 'For use as the default border on elements.'\n },\n 'border-on-dark': {\n value: 'rgba(80, 83, 86, 1)',\n description: 'For use as the default border on dark elements.'\n },\n 'border-neutral-subdued': {\n value: 'rgba(186, 191, 195, 1)',\n description: 'For use as the border on banners.'\n },\n 'border-hovered': {\n value: 'rgba(153, 158, 164, 1)',\n description: 'Used for borders on hovered interactive elements'\n },\n 'border-disabled': {\n value: 'rgba(210, 213, 216, 1)',\n description: 'Used for disabled borders on interactive elements'\n },\n 'border-subdued': {\n value: 'rgba(201, 204, 207, 1)',\n description: 'For use as a subdued border on elements.'\n },\n 'border-depressed': {\n value: 'rgba(87, 89, 89, 1)',\n description: 'For use as a border on depressed elements.'\n },\n 'border-shadow': {\n value: 'rgba(174, 180, 185, 1)',\n description: 'For use as an additional bottom border on elements.'\n },\n 'border-shadow-subdued': {\n value: 'rgba(186, 191, 196, 1)',\n description: 'For use as an additional, subdued bottom border on elements.'\n },\n divider: {\n value: 'rgba(225, 227, 229, 1)',\n description: 'For use as a divider between elements.'\n },\n 'divider-dark': {\n value: 'rgba(69, 71, 73, 1)',\n description: 'For use as a dark divider between elements.'\n },\n icon: {\n value: 'rgba(92, 95, 98, 1)',\n description: 'For use as the fill color of icons.'\n },\n 'icon-on-dark': {\n value: 'rgba(166, 172, 178, 1)',\n description: 'For use as the fill color of dark icons.'\n },\n 'icon-hovered': {\n value: 'rgba(26, 28, 29, 1)',\n description: 'For use as the fill color of hovered icons.'\n },\n 'icon-pressed': {\n value: 'rgba(68, 71, 74, 1)',\n description: 'For use as the fill color of pressed icons.'\n },\n 'icon-disabled': {\n value: 'rgba(186, 190, 195, 1)',\n description: 'For use as the fill color of disabled icons.'\n },\n 'icon-subdued': {\n value: 'rgba(140, 145, 150, 1)',\n description: 'For use as the fill color of subdued icons.'\n },\n text: {\n value: 'rgba(32, 34, 35, 1)',\n description: 'For use as a text color.'\n },\n 'text-on-dark': {\n value: 'rgba(227, 229, 231, 1)',\n description: 'For use as a text color on dark elements.'\n },\n 'text-disabled': {\n value: 'rgba(140, 145, 150, 1)',\n description: 'For use as a disabled text color and as a placeholder text color.'\n },\n 'text-subdued': {\n value: 'rgba(109, 113, 117, 1)',\n description: 'For use as a subdued text color.'\n },\n 'text-subdued-on-dark': {\n value: 'rgba(153, 159, 164, 1)',\n description: 'For use as a subdued text color on dark elements.'\n },\n interactive: {\n value: 'rgba(44, 110, 203, 1)',\n description: 'Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons.'\n },\n 'interactive-on-dark': {\n value: 'rgba(54, 163, 255, 1)',\n description: 'Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons when on a dark element.'\n },\n 'interactive-disabled': {\n value: 'rgba(189, 193, 204, 1)',\n description: 'Used for disabled links and plain buttons.'\n },\n 'interactive-hovered': {\n value: 'rgba(31, 81, 153, 1)',\n description: 'Used for hovered links and plain buttons.'\n },\n 'interactive-pressed': {\n value: 'rgba(16, 50, 98, 1)',\n description: 'Used for pressed links and plain buttons.'\n },\n 'interactive-pressed-on-dark': {\n value: 'rgba(136, 188, 255, 1)',\n description: 'Used for pressed links and plain buttons on dark elements.'\n },\n focused: {\n value: 'rgba(69, 143, 255, 1)',\n description: 'For use in the focus ring on interactive elements.'\n },\n 'surface-selected': {\n value: 'rgba(242, 247, 254, 1)',\n description: 'For use as a surface color in selected interactive elements, in components such as action list and resource list.'\n },\n 'surface-selected-hovered': {\n value: 'rgba(237, 244, 254, 1)',\n description: 'For use as a surface color in selected interactive elements that are hovered, in components such as action list and resource list.'\n },\n 'surface-selected-pressed': {\n value: 'rgba(229, 239, 253, 1)',\n description: 'For use as a surface color in selected interactive elements that are pressed, in components such as action list and resource list.'\n },\n 'icon-on-interactive': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'For use as a fill color for icons on interactive elements.'\n },\n 'text-on-interactive': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'For use as a text color on interactive elements.'\n },\n 'action-secondary': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'Used for secondary buttons and tertiary buttons, as well as in form elements as a background color and pontentially other secondary surfaces.'\n },\n 'action-secondary-disabled': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'Used as a disabled state for secondary buttons'\n },\n 'action-secondary-hovered': {\n value: 'rgba(246, 246, 247, 1)',\n description: 'Used as a hovered state for secondary buttons'\n },\n 'action-secondary-hovered-dark': {\n value: 'rgba(84, 87, 91, 1)',\n description: 'Used as a dark hovered state for secondary buttons'\n },\n 'action-secondary-pressed': {\n value: 'rgba(241, 242, 243, 1)',\n description: 'Used as a pressed state for secondary buttons'\n },\n 'action-secondary-pressed-dark': {\n value: 'rgba(96, 100, 103, 1)',\n description: 'Used as a dark pressed state for secondary buttons'\n },\n 'action-secondary-depressed': {\n value: 'rgba(109, 113, 117, 1)',\n description: 'Used as a depressed state for secondary buttons'\n },\n 'action-primary': {\n value: 'rgba(0, 128, 96, 1)',\n description: 'Used as the background color for primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.'\n },\n 'action-primary-disabled': {\n value: 'rgba(241, 241, 241, 1)',\n description: 'Used as the background color for disabled primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.'\n },\n 'action-primary-hovered': {\n value: 'rgba(0, 110, 82, 1)',\n description: 'Used as the background color for hovered primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.'\n },\n 'action-primary-pressed': {\n value: 'rgba(0, 94, 70, 1)',\n description: 'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.'\n },\n 'action-primary-depressed': {\n value: 'rgba(0, 61, 44, 1)',\n description: 'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.'\n },\n 'icon-on-primary': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'For use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs.'\n },\n 'text-on-primary': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'For use as a text color on primary actions. Not for use in text on navigation and tabs.'\n },\n 'text-primary': {\n value: 'rgba(0, 123, 92, 1)',\n description: 'For use as primary text color on background. For use in text in components such as Navigation.'\n },\n 'text-primary-hovered': {\n value: 'rgba(0, 108, 80, 1)',\n description: 'For use as primary hovered text color on background. For use in text in components such as Navigation.'\n },\n 'text-primary-pressed': {\n value: 'rgba(0, 92, 68, 1)',\n description: 'For use as primary pressed text color on background. For use in text in components such as Navigation.'\n },\n 'surface-primary-selected': {\n value: 'rgba(241, 248, 245, 1)',\n description: 'Used as a surface color to indicate selected interactive states in navigation and tabs.'\n },\n 'surface-primary-selected-hovered': {\n value: 'rgba(179, 208, 195, 1)',\n description: 'Used as a surface color to indicate selected interactive states that are hovered in navigation and tabs.'\n },\n 'surface-primary-selected-pressed': {\n value: 'rgba(162, 188, 176, 1)',\n description: 'Used as a surface color to indicate selected interactive states that are pressed in navigation and tabs.'\n },\n 'border-critical': {\n value: 'rgba(253, 87, 73, 1)',\n description: 'For use as a border on critical components such as an outline on interactive elements in an error state.'\n },\n 'border-critical-subdued': {\n value: 'rgba(224, 179, 178, 1)',\n description: 'For use as a border on critical components such as banners.'\n },\n 'border-critical-disabled': {\n value: 'rgba(255, 167, 163, 1)',\n description: 'For use as a disabled border on critical components such as banners, and as an outline on interactive elements in an error state.'\n },\n 'icon-critical': {\n value: 'rgba(215, 44, 13, 1)',\n description: 'For use as an icon fill color on top of critical elements.'\n },\n 'surface-critical': {\n value: 'rgba(254, 211, 209, 1)',\n description: 'For use as a surface color on critical elements including badges.'\n },\n 'surface-critical-subdued': {\n value: 'rgba(255, 244, 244, 1)',\n description: 'For use as a subdued surface color on critical elements including banners.'\n },\n 'surface-critical-subdued-hovered': {\n value: 'rgba(255, 240, 240, 1)',\n description: 'For use as a surface color on critical interactive elements including action list items in a hovered state.'\n },\n 'surface-critical-subdued-pressed': {\n value: 'rgba(255, 233, 232, 1)',\n description: 'For use as a surface color on critical interactive elements including action list items in a pressed state.'\n },\n 'surface-critical-subdued-depressed': {\n value: 'rgba(254, 188, 185, 1)',\n description: 'For use as a surface color on critical interactive elements including action list items in a depressed state.'\n },\n 'text-critical': {\n value: 'rgba(215, 44, 13, 1)',\n description: 'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.'\n },\n 'action-critical': {\n value: 'rgba(216, 44, 13, 1)',\n description: 'For use as the background color for destructive buttons, and as the background color for error toast messages.'\n },\n 'action-critical-disabled': {\n value: 'rgba(241, 241, 241, 1)',\n description: 'For use as the background color for disabled destructive buttons, and as the background color for error toast messages.'\n },\n 'action-critical-hovered': {\n value: 'rgba(188, 34, 0, 1)',\n description: 'For use as the background color for hovered destructive buttons, and as the background color for error toast messages.'\n },\n 'action-critical-pressed': {\n value: 'rgba(162, 27, 0, 1)',\n description: 'For use as the background color for pressed destructive buttons, and as the background color for error toast messages.'\n },\n 'action-critical-depressed': {\n value: 'rgba(108, 15, 0, 1)',\n description: 'For use as the background color for depressed destructive buttons, and as the background color for error toast messages.'\n },\n 'icon-on-critical': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'For use as a fill color for icons on critical actions.'\n },\n 'text-on-critical': {\n value: 'rgba(255, 255, 255, 1)',\n description: 'For use as a text color on critical actions.'\n },\n 'interactive-critical': {\n value: 'rgba(216, 44, 13, 1)',\n description: 'For use as the text color for destructive interactive elements: links, plain buttons, error state of selected checkboxes and radio buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.'\n },\n 'interactive-critical-disabled': {\n value: 'rgba(253, 147, 141, 1)',\n description: 'For use as a text color in disabled destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.'\n },\n 'interactive-critical-hovered': {\n value: 'rgba(205, 41, 12, 1)',\n description: 'For use as a text color in hovered destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.'\n },\n 'interactive-critical-pressed': {\n value: 'rgba(103, 15, 3, 1)',\n description: 'For use as a text color in pressed destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.'\n },\n 'border-warning': {\n value: 'rgba(185, 137, 0, 1)',\n description: 'For use as a border on warning components such as...'\n },\n 'border-warning-subdued': {\n value: 'rgba(225, 184, 120, 1)',\n description: 'For use as a border on warning components such as banners.'\n },\n 'icon-warning': {\n value: 'rgba(185, 137, 0, 1)',\n description: 'For use as an icon fill color on top of warning elements.'\n },\n 'surface-warning': {\n value: 'rgba(255, 215, 157, 1)',\n description: 'For use as a surface color on warning elements including badges.'\n },\n 'surface-warning-subdued': {\n value: 'rgba(255, 245, 234, 1)',\n description: 'For use as a subdued surface color on warning elements including banners.'\n },\n 'surface-warning-subdued-hovered': {\n value: 'rgba(255, 242, 226, 1)',\n description: 'For use as a subdued surface color on warning elements including banners.'\n },\n 'surface-warning-subdued-pressed': {\n value: 'rgba(255, 235, 211, 1)',\n description: 'For use as a subdued surface color on warning elements including banners.'\n },\n 'text-warning': {\n value: 'rgba(145, 106, 0, 1)',\n description: 'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.'\n },\n 'border-highlight': {\n value: 'rgba(68, 157, 167, 1)',\n description: 'For use as a border on informational components such as...'\n },\n 'border-highlight-subdued': {\n value: 'rgba(152, 198, 205, 1)',\n description: 'For use as a border on informational components such as banners.'\n },\n 'icon-highlight': {\n value: 'rgba(0, 160, 172, 1)',\n description: 'For use as an icon fill color on top of informational elements.'\n },\n 'surface-highlight': {\n value: 'rgba(164, 232, 242, 1)',\n description: 'For use as a surface color on information elements including badges.'\n },\n 'surface-highlight-subdued': {\n value: 'rgba(235, 249, 252, 1)',\n description: 'For use as a surface color on information elements including banners.'\n },\n 'surface-highlight-subdued-hovered': {\n value: 'rgba(228, 247, 250, 1)',\n description: 'For use as a surface color on information elements including banners.'\n },\n 'surface-highlight-subdued-pressed': {\n value: 'rgba(213, 243, 248, 1)',\n description: 'For use as a surface color on information elements including banners.'\n },\n 'text-highlight': {\n value: 'rgba(52, 124, 132, 1)',\n description: 'For use as a text color in inert informational elements. Not for use as a text color on banners and badges.'\n },\n 'border-success': {\n value: 'rgba(0, 164, 124, 1)',\n description: 'For use as a border on success components such as text inputs.'\n },\n 'border-success-subdued': {\n value: 'rgba(149, 201, 180, 1)',\n description: 'For use as a border on success components such as banners.'\n },\n 'icon-success': {\n value: 'rgba(0, 127, 95, 1)',\n description: 'For use as an icon fill color on top of success elements.'\n },\n 'surface-success': {\n value: 'rgba(174, 233, 209, 1)',\n description: 'For use as a surface color on success elements including badges.'\n },\n 'surface-success-subdued': {\n value: 'rgba(241, 248, 245, 1)',\n description: 'For use as a surface color on information elements including banners.'\n },\n 'surface-success-subdued-hovered': {\n value: 'rgba(236, 246, 241, 1)',\n description: 'For use as a surface color on information elements including banners.'\n },\n 'surface-success-subdued-pressed': {\n value: 'rgba(226, 241, 234, 1)',\n description: 'For use as a surface color on information elements including banners.'\n },\n 'text-success': {\n value: 'rgba(0, 128, 96, 1)',\n description: 'For use as a text color in inert success elements. Not for use as a text color on banners and badges.'\n },\n 'icon-attention': {\n value: 'rgba(138, 97, 22, 1)'\n },\n 'surface-attention': {\n value: 'rgba(255, 234, 138, 1)'\n },\n 'decorative-one-icon': {\n value: 'rgba(126, 87, 0, 1)',\n description: 'For use as a decorative icon color that is applied on a decorative surface.'\n },\n 'decorative-one-surface': {\n value: 'rgba(255, 201, 107, 1)',\n description: 'For use as a decorative surface color.'\n },\n 'decorative-one-text': {\n value: 'rgba(61, 40, 0, 1)',\n description: 'For use as a decorative text color that is applied on a decorative surface.'\n },\n 'decorative-two-icon': {\n value: 'rgba(175, 41, 78, 1)',\n description: 'For use as a decorative icon color that is applied on a decorative surface.'\n },\n 'decorative-two-surface': {\n value: 'rgba(255, 196, 176, 1)',\n description: 'For use as a decorative surface color.'\n },\n 'decorative-two-text': {\n value: 'rgba(73, 11, 28, 1)',\n description: 'For use as a decorative text color that is applied on a decorative surface.'\n },\n 'decorative-three-icon': {\n value: 'rgba(0, 109, 65, 1)',\n description: 'For use as a decorative icon color that is applied on a decorative surface.'\n },\n 'decorative-three-surface': {\n value: 'rgba(146, 230, 181, 1)',\n description: 'For use as a decorative surface color.'\n },\n 'decorative-three-text': {\n value: 'rgba(0, 47, 25, 1)',\n description: 'For use as a decorative text color that is applied on a decorative surface.'\n },\n 'decorative-four-icon': {\n value: 'rgba(0, 106, 104, 1)',\n description: 'For use as a decorative icon color that is applied on a decorative surface.'\n },\n 'decorative-four-surface': {\n value: 'rgba(145, 224, 214, 1)',\n description: 'For use as a decorative surface color.'\n },\n 'decorative-four-text': {\n value: 'rgba(0, 45, 45, 1)',\n description: 'For use as a decorative text color that is applied on a decorative surface.'\n },\n 'decorative-five-icon': {\n value: 'rgba(174, 43, 76, 1)',\n description: 'For use as a decorative icon color that is applied on a decorative surface.'\n },\n 'decorative-five-surface': {\n value: 'rgba(253, 201, 208, 1)',\n description: 'For use as a decorative surface color.'\n },\n 'decorative-five-text': {\n value: 'rgba(79, 14, 31, 1)',\n description: 'For use as a decorative text color that is applied on a decorative surface.'\n }\n};\n\nexport { colors };\n","var colors = {\n background: {\n value: 'rgba(11, 12, 13, 1)'\n },\n 'background-hovered': {\n value: 'rgba(11, 12, 13, 1)'\n },\n 'background-pressed': {\n value: 'rgba(11, 12, 13, 1)'\n },\n 'background-selected': {\n value: 'rgba(11, 12, 13, 1)'\n },\n surface: {\n value: 'rgba(32, 33, 35, 1)'\n },\n 'surface-neutral': {\n value: 'rgba(49, 51, 53, 1)'\n },\n 'surface-neutral-hovered': {\n value: 'rgba(49, 51, 53, 1)'\n },\n 'surface-neutral-pressed': {\n value: 'rgba(49, 51, 53, 1)'\n },\n 'surface-neutral-disabled': {\n value: 'rgba(49, 51, 53, 1)'\n },\n 'surface-neutral-subdued': {\n value: 'rgba(68, 71, 74, 1)'\n },\n 'surface-subdued': {\n value: 'rgba(26, 28, 29, 1)'\n },\n 'surface-disabled': {\n value: 'rgba(26, 28, 29, 1)'\n },\n 'surface-hovered': {\n value: 'rgba(47, 49, 51, 1)'\n },\n 'surface-pressed': {\n value: 'rgba(62, 64, 67, 1)'\n },\n 'surface-depressed': {\n value: 'rgba(80, 83, 86, 1)'\n },\n 'surface-search-field': {\n value: 'rgba(47, 49, 51, 1)'\n },\n backdrop: {\n value: 'rgba(0, 0, 0, 0.5)'\n },\n overlay: {\n value: 'rgba(33, 33, 33, 0.5)'\n },\n 'shadow-color-picker': {\n value: 'rgba(0, 0, 0, 0)'\n },\n 'shadow-color-picker-dragger': {\n value: 'rgba(0, 0, 0, 0)'\n },\n 'hint-from-direct-light': {\n value: 'rgba(185, 185, 185, 0.2)'\n },\n border: {\n value: 'rgba(80, 83, 86, 1)'\n },\n 'border-neutral-subdued': {\n value: 'rgba(130, 135, 139, 1)'\n },\n 'border-hovered': {\n value: 'rgba(80, 83, 86, 1)'\n },\n 'border-disabled': {\n value: 'rgba(103, 107, 111, 1)'\n },\n 'border-subdued': {\n value: 'rgba(130, 135, 139, 1)'\n },\n 'border-depressed': {\n value: 'rgba(142, 145, 145, 1)'\n },\n 'border-shadow': {\n value: 'rgba(91, 95, 98, 1)'\n },\n 'border-shadow-subdued': {\n value: 'rgba(130, 135, 139, 1)'\n },\n divider: {\n value: 'rgba(69, 71, 73, 1)'\n },\n icon: {\n value: 'rgba(166, 172, 178, 1)'\n },\n 'icon-hovered': {\n value: 'rgba(225, 227, 229, 1)'\n },\n 'icon-pressed': {\n value: 'rgba(166, 172, 178, 1)'\n },\n 'icon-disabled': {\n value: 'rgba(84, 87, 90, 1)'\n },\n 'icon-subdued': {\n value: 'rgba(120, 125, 129, 1)'\n },\n text: {\n value: 'rgba(227, 229, 231, 1)'\n },\n 'text-disabled': {\n value: 'rgba(111, 115, 119, 1)'\n },\n 'text-subdued': {\n value: 'rgba(153, 159, 164, 1)'\n },\n interactive: {\n value: 'rgba(54, 163, 255, 1)'\n },\n 'interactive-disabled': {\n value: 'rgba(38, 98, 182, 1)'\n },\n 'interactive-hovered': {\n value: 'rgba(103, 175, 255, 1)'\n },\n 'interactive-pressed': {\n value: 'rgba(136, 188, 255, 1)'\n },\n focused: {\n value: 'rgba(38, 98, 182, 1)'\n },\n 'surface-selected': {\n value: 'rgba(2, 14, 35, 1)'\n },\n 'surface-selected-hovered': {\n value: 'rgba(7, 29, 61, 1)'\n },\n 'surface-selected-pressed': {\n value: 'rgba(13, 43, 86, 1)'\n },\n 'icon-on-interactive': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'text-on-interactive': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'action-secondary': {\n value: 'rgba(77, 80, 83, 1)'\n },\n 'action-secondary-disabled': {\n value: 'rgba(32, 34, 35, 1)'\n },\n 'action-secondary-hovered': {\n value: 'rgba(84, 87, 91, 1)'\n },\n 'action-secondary-pressed': {\n value: 'rgba(96, 100, 103, 1)'\n },\n 'action-secondary-depressed': {\n value: 'rgba(123, 127, 132, 1)'\n },\n 'action-primary': {\n value: 'rgba(0, 128, 96, 1)'\n },\n 'action-primary-disabled': {\n value: 'rgba(0, 86, 64, 1)'\n },\n 'action-primary-hovered': {\n value: 'rgba(0, 150, 113, 1)'\n },\n 'action-primary-pressed': {\n value: 'rgba(0, 164, 124, 1)'\n },\n 'action-primary-depressed': {\n value: 'rgba(0, 179, 136, 1)'\n },\n 'icon-on-primary': {\n value: 'rgba(230, 255, 244, 1)'\n },\n 'text-on-primary': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'text-primary': {\n value: 'rgba(0, 141, 106, 1)'\n },\n 'text-primary-hovered': {\n value: 'rgba(0, 158, 120, 1)'\n },\n 'text-primary-pressed': {\n value: 'rgba(0, 176, 133, 1)'\n },\n 'surface-primary-selected': {\n value: 'rgba(12, 18, 16, 1)'\n },\n 'surface-primary-selected-hovered': {\n value: 'rgba(40, 48, 44, 1)'\n },\n 'surface-primary-selected-pressed': {\n value: 'rgba(54, 64, 59, 1)'\n },\n 'border-critical': {\n value: 'rgba(227, 47, 14, 1)'\n },\n 'border-critical-subdued': {\n value: 'rgba(227, 47, 14, 1)'\n },\n 'border-critical-disabled': {\n value: 'rgba(131, 23, 4, 1)'\n },\n 'icon-critical': {\n value: 'rgba(218, 45, 13, 1)'\n },\n 'surface-critical': {\n value: 'rgba(69, 7, 1, 1)'\n },\n 'surface-critical-subdued': {\n value: 'rgba(69, 7, 1, 1)'\n },\n 'surface-critical-subdued-hovered': {\n value: 'rgba(68, 23, 20, 1)'\n },\n 'surface-critical-subdued-pressed': {\n value: 'rgba(107, 16, 3, 1)'\n },\n 'surface-critical-subdued-depressed': {\n value: 'rgba(135, 24, 5, 1)'\n },\n 'text-critical': {\n value: 'rgba(233, 128, 122, 1)'\n },\n 'action-critical': {\n value: 'rgba(205, 41, 12, 1)'\n },\n 'action-critical-disabled': {\n value: 'rgba(187, 37, 10, 1)'\n },\n 'action-critical-hovered': {\n value: 'rgba(227, 47, 14, 1)'\n },\n 'action-critical-pressed': {\n value: 'rgba(250, 53, 17, 1)'\n },\n 'action-critical-depressed': {\n value: 'rgba(253, 87, 73, 1)'\n },\n 'icon-on-critical': {\n value: 'rgba(255, 248, 247, 1)'\n },\n 'text-on-critical': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'interactive-critical': {\n value: 'rgba(253, 114, 106, 1)'\n },\n 'interactive-critical-disabled': {\n value: 'rgba(254, 172, 168, 1)'\n },\n 'interactive-critical-hovered': {\n value: 'rgba(253, 138, 132, 1)'\n },\n 'interactive-critical-pressed': {\n value: 'rgba(253, 159, 155, 1)'\n },\n 'border-warning': {\n value: 'rgba(153, 112, 0, 1)'\n },\n 'border-warning-subdued': {\n value: 'rgba(153, 112, 0, 1)'\n },\n 'icon-warning': {\n value: 'rgba(104, 75, 0, 1)'\n },\n 'surface-warning': {\n value: 'rgba(153, 112, 0, 1)'\n },\n 'surface-warning-subdued': {\n value: 'rgba(77, 59, 29, 1)'\n },\n 'surface-warning-subdued-hovered': {\n value: 'rgba(82, 63, 32, 1)'\n },\n 'surface-warning-subdued-pressed': {\n value: 'rgba(87, 67, 34, 1)'\n },\n 'text-warning': {\n value: 'rgba(202, 149, 0, 1)'\n },\n 'border-highlight': {\n value: 'rgba(68, 157, 167, 1)'\n },\n 'border-highlight-subdued': {\n value: 'rgba(68, 157, 167, 1)'\n },\n 'icon-highlight': {\n value: 'rgba(44, 108, 115, 1)'\n },\n 'surface-highlight': {\n value: 'rgba(0, 105, 113, 1)'\n },\n 'surface-highlight-subdued': {\n value: 'rgba(18, 53, 57, 1)'\n },\n 'surface-highlight-subdued-hovered': {\n value: 'rgba(20, 58, 62, 1)'\n },\n 'surface-highlight-subdued-pressed': {\n value: 'rgba(24, 65, 70, 1)'\n },\n 'text-highlight': {\n value: 'rgba(162, 239, 250, 1)'\n },\n 'border-success': {\n value: 'rgba(0, 135, 102, 1)'\n },\n 'border-success-subdued': {\n value: 'rgba(0, 135, 102, 1)'\n },\n 'icon-success': {\n value: 'rgba(0, 94, 70, 1)'\n },\n 'surface-success': {\n value: 'rgba(0, 94, 70, 1)'\n },\n 'surface-success-subdued': {\n value: 'rgba(28, 53, 44, 1)'\n },\n 'surface-success-subdued-hovered': {\n value: 'rgba(31, 58, 48, 1)'\n },\n 'surface-success-subdued-pressed': {\n value: 'rgba(35, 65, 54, 1)'\n },\n 'text-success': {\n value: 'rgba(88, 173, 142, 1)'\n },\n 'icon-attention': {\n value: 'rgba(138, 97, 22, 1)'\n },\n 'surface-attention': {\n value: 'rgba(255, 234, 138, 1)'\n },\n 'decorative-one-icon': {\n value: 'rgba(255, 186, 67, 1)'\n },\n 'decorative-one-surface': {\n value: 'rgba(142, 102, 9, 1)'\n },\n 'decorative-one-text': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'decorative-two-icon': {\n value: 'rgba(245, 182, 192, 1)'\n },\n 'decorative-two-surface': {\n value: 'rgba(206, 88, 20, 1)'\n },\n 'decorative-two-text': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'decorative-three-icon': {\n value: 'rgba(0, 227, 141, 1)'\n },\n 'decorative-three-surface': {\n value: 'rgba(0, 124, 90, 1)'\n },\n 'decorative-three-text': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'decorative-four-icon': {\n value: 'rgba(0, 221, 218, 1)'\n },\n 'decorative-four-surface': {\n value: 'rgba(22, 124, 121, 1)'\n },\n 'decorative-four-text': {\n value: 'rgba(255, 255, 255, 1)'\n },\n 'decorative-five-icon': {\n value: 'rgba(244, 183, 191, 1)'\n },\n 'decorative-five-surface': {\n value: 'rgba(194, 51, 86, 1)'\n },\n 'decorative-five-text': {\n value: 'rgba(255, 255, 255, 1)'\n }\n};\n\nexport { colors };\n","var breakpoints = {\n 'breakpoints-xs': {\n value: '0px'\n },\n 'breakpoints-sm': {\n value: '490px'\n },\n 'breakpoints-md': {\n value: '768px'\n },\n 'breakpoints-lg': {\n value: '1040px'\n },\n 'breakpoints-xl': {\n value: '1440px'\n }\n};\n\nexport { breakpoints };\n","var depth = {\n 'shadow-transparent': {\n value: '0 0 0 0 transparent'\n },\n 'shadow-faint': {\n value: '0 1px 0 0 rgba(22, 29, 37, 0.05)'\n },\n 'shadow-base': {\n value: '0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)'\n },\n 'shadow-deep': {\n value: '0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)'\n },\n 'shadow-button': {\n value: '0 1px 0 rgba(0, 0, 0, 0.05)'\n },\n 'shadow-top-bar': {\n value: '0 2px 2px -1px rgba(0, 0, 0, 0.15)'\n },\n 'shadow-card': {\n value: '0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)'\n },\n 'shadow-popover': {\n value: '0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12)'\n },\n 'shadow-layer': {\n value: '0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)'\n },\n 'shadow-modal': {\n value: '0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)'\n },\n 'shadows-inset-button': {\n value: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)'\n },\n 'shadows-inset-button-pressed': {\n value: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)'\n }\n};\n\nexport { depth };\n","var legacy = {\n 'override-loading-z-index': {\n value: '514'\n },\n 'choice-size': {\n value: '20px'\n },\n 'icon-size-small': {\n value: '8px'\n },\n 'icon-size-medium': {\n value: '20px'\n },\n 'choice-margin': {\n value: '1px'\n },\n 'control-border-width': {\n value: '2px'\n },\n 'banner-border-default': {\n value: 'inset 0 1px 0 0 var(--p-border-neutral-subdued), inset 0 0 0 1px var(--p-border-neutral-subdued)'\n },\n 'banner-border-success': {\n value: 'inset 0 1px 0 0 var(--p-border-success-subdued), inset 0 0 0 1px var(--p-border-success-subdued)'\n },\n 'banner-border-highlight': {\n value: 'inset 0 1px 0 0 var(--p-border-highlight-subdued), inset 0 0 0 1px var(--p-border-highlight-subdued)'\n },\n 'banner-border-warning': {\n value: 'inset 0 1px 0 0 var(--p-border-warning-subdued), inset 0 0 0 1px var(--p-border-warning-subdued)'\n },\n 'banner-border-critical': {\n value: 'inset 0 1px 0 0 var(--p-border-critical-subdued), inset 0 0 0 1px var(--p-border-critical-subdued)'\n },\n 'thin-border-subdued': {\n value: '1px solid var(--p-border-subdued)'\n },\n 'text-field-spinner-offset': {\n value: '2px'\n },\n 'text-field-focus-ring-offset': {\n value: '-4px'\n },\n 'button-group-item-spacing': {\n value: '-1px'\n },\n 'range-slider-thumb-size-base': {\n value: '16px'\n },\n 'range-slider-thumb-size-active': {\n value: '24px'\n },\n 'frame-offset': {\n value: '0px'\n }\n};\n\nexport { legacy };\n","var motion = {\n 'duration-0': {\n value: '0ms'\n },\n 'duration-50': {\n value: '50ms'\n },\n 'duration-100': {\n value: '100ms'\n },\n 'duration-150': {\n value: '150ms'\n },\n 'duration-200': {\n value: '200ms'\n },\n 'duration-250': {\n value: '250ms'\n },\n 'duration-300': {\n value: '300ms'\n },\n 'duration-350': {\n value: '350ms'\n },\n 'duration-400': {\n value: '400ms'\n },\n 'duration-450': {\n value: '450ms'\n },\n 'duration-500': {\n value: '500ms'\n },\n 'duration-5000': {\n value: '5000ms'\n },\n ease: {\n value: 'cubic-bezier(0.25, 0.1, 0.25, 1)'\n },\n 'ease-in': {\n value: 'cubic-bezier(0.42, 0, 1, 1)'\n },\n 'ease-out': {\n value: 'cubic-bezier(0, 0, 0.58, 1)'\n },\n 'ease-in-out': {\n value: 'cubic-bezier(0.42, 0, 0.58, 1)'\n },\n linear: {\n value: 'cubic-bezier(0, 0, 1, 1)'\n },\n 'keyframes-bounce': {\n value: '{ from, 65%, 85% { transform: scale(1) } 75% { transform: scale(0.85) } 82.5% { transform: scale(1.05) } }'\n },\n 'keyframes-fade-in': {\n value: '{ to { opacity: 1 } }'\n },\n 'keyframes-pulse': {\n value: '{ from, 75% { transform: scale(0.85); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }'\n },\n 'keyframes-spin': {\n value: '{ to { transform: rotate(1turn) } }'\n }\n};\n\nexport { motion };\n","var shape = {\n 'border-radius-05': {\n value: '2px'\n },\n 'border-radius-1': {\n value: '4px'\n },\n 'border-radius-2': {\n value: '8px'\n },\n 'border-radius-3': {\n value: '12px'\n },\n 'border-radius-4': {\n value: '16px'\n },\n 'border-radius-5': {\n value: '20px'\n },\n 'border-radius-6': {\n value: '30px'\n },\n 'border-radius-base': {\n value: '3px'\n },\n 'border-radius-large': {\n value: '6px'\n },\n 'border-radius-half': {\n value: '50%'\n },\n 'border-width-1': {\n value: '1px'\n },\n 'border-width-2': {\n value: '2px'\n },\n 'border-width-3': {\n value: '3px'\n },\n 'border-width-4': {\n value: '4px'\n },\n 'border-width-5': {\n value: '5px'\n },\n 'border-base': {\n value: 'var(--p-border-width-1) solid var(--p-border-subdued)'\n },\n 'border-dark': {\n value: 'var(--p-border-width-1) solid var(--p-border)'\n },\n 'border-transparent': {\n value: 'var(--p-border-width-1) solid transparent'\n },\n 'border-divider': {\n value: 'var(--p-border-width-1) solid var(--p-divider)'\n },\n 'border-divider-on-dark': {\n value: 'var(--p-border-width-1) solid var(--p-divider-dark)'\n }\n};\n\nexport { shape };\n","var spacing = {\n 'space-0': {\n value: '0'\n },\n 'space-025': {\n value: '1px'\n },\n 'space-05': {\n value: '2px'\n },\n 'space-1': {\n value: '4px'\n },\n 'space-2': {\n value: '8px'\n },\n 'space-3': {\n value: '12px'\n },\n 'space-4': {\n value: '16px'\n },\n 'space-5': {\n value: '20px'\n },\n 'space-6': {\n value: '24px'\n },\n 'space-8': {\n value: '32px'\n },\n 'space-10': {\n value: '40px'\n },\n 'space-12': {\n value: '48px'\n },\n 'space-16': {\n value: '64px'\n },\n 'space-20': {\n value: '80px'\n },\n 'space-24': {\n value: '96px'\n },\n 'space-28': {\n value: '112px'\n },\n 'space-32': {\n value: '128px'\n }\n};\n\nexport { spacing };\n","var typography = {\n 'font-family-sans': {\n value: \"-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif\"\n },\n 'font-family-mono': {\n value: \"ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace\"\n },\n 'font-size-1': {\n value: '12px'\n },\n 'font-size-2': {\n value: '13px'\n },\n 'font-size-3': {\n value: '14px'\n },\n 'font-size-4': {\n value: '15px'\n },\n 'font-size-5': {\n value: '16px'\n },\n 'font-size-6': {\n value: '17px'\n },\n 'font-size-7': {\n value: '20px'\n },\n 'font-size-8': {\n value: '21px'\n },\n 'font-size-9': {\n value: '24px'\n },\n 'font-size-10': {\n value: '26px'\n },\n 'font-size-11': {\n value: '27px'\n },\n 'font-size-12': {\n value: '28px'\n },\n 'font-size-13': {\n value: '42px'\n },\n 'font-weight-regular': {\n value: '400'\n },\n 'font-weight-medium': {\n value: '500'\n },\n 'font-weight-semibold': {\n value: '600'\n },\n 'font-weight-bold': {\n value: '700'\n },\n 'line-height-1': {\n value: '16px'\n },\n 'line-height-2': {\n value: '20px'\n },\n 'line-height-3': {\n value: '24px'\n },\n 'line-height-4': {\n value: '28px'\n },\n 'line-height-5': {\n value: '32px'\n },\n 'line-height-6': {\n value: '36px'\n },\n 'line-height-7': {\n value: '44px'\n }\n};\n\nexport { typography };\n","var zIndex = {\n 'z-1': {\n value: '100'\n },\n 'z-2': {\n value: '400'\n },\n 'z-3': {\n value: '510'\n },\n 'z-4': {\n value: '512'\n },\n 'z-5': {\n value: '513'\n },\n 'z-6': {\n value: '514'\n },\n 'z-7': {\n value: '515'\n },\n 'z-8': {\n value: '516'\n },\n 'z-9': {\n value: '517'\n },\n 'z-10': {\n value: '518'\n },\n 'z-11': {\n value: '519'\n },\n 'z-12': {\n value: '520'\n }\n};\n\nexport { zIndex };\n","import React from 'react';\n\nvar SvgCancelSmallMinor = function SvgCancelSmallMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.707 5.293a1 1 0 0 0-1.414 1.414l3.293 3.293-3.293 3.293a1 1 0 1 0 1.414 1.414l3.293-3.293 3.293 3.293a1 1 0 0 0 1.414-1.414l-3.293-3.293 3.293-3.293a1 1 0 0 0-1.414-1.414l-3.293 3.293-3.293-3.293Z\"\n }));\n};\n\nexport { SvgCancelSmallMinor as S };\n","import React from 'react';\n\nvar SvgCaretDownMinor = function SvgCaretDownMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.098 8h-6.196c-.751 0-1.172.754-.708 1.268l3.098 3.432c.36.399 1.055.399 1.416 0l3.098-3.433c.464-.513.043-1.267-.708-1.267Z\"\n }));\n};\n\nexport { SvgCaretDownMinor as S };\n","import React from 'react';\n\nvar SvgCaretUpMinor = function SvgCaretUpMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.902 12h6.196c.751 0 1.172-.754.708-1.268l-3.098-3.432c-.36-.399-1.055-.399-1.416 0l-3.098 3.433c-.464.513-.043 1.267.708 1.267Z\"\n }));\n};\n\nexport { SvgCaretUpMinor as S };\n","import React from 'react';\n\nvar SvgChevronLeftMinor = function SvgChevronLeftMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414l-4.293 4.293 4.293 4.293a.999.999 0 0 1-.707 1.707z\"\n }));\n};\n\nexport { SvgChevronLeftMinor as S };\n","import React from 'react';\n\nvar SvgChevronRightMinor = function SvgChevronRightMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8 16a.999.999 0 0 1-.707-1.707l4.293-4.293-4.293-4.293a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5a.997.997 0 0 1-.707.293z\"\n }));\n};\n\nexport { SvgChevronRightMinor as S };\n","import React from 'react';\n\nvar SvgCircleCancelMinor = function SvgCircleCancelMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-2.293 4.293a1 1 0 0 0-1.414 1.414l2.293 2.293-2.293 2.293a1 1 0 1 0 1.414 1.414l2.293-2.293 2.293 2.293a1 1 0 1 0 1.414-1.414l-2.293-2.293 2.293-2.293a1 1 0 0 0-1.414-1.414l-2.293 2.293-2.293-2.293z\"\n }));\n};\n\nexport { SvgCircleCancelMinor as S };\n","import React from 'react';\n\nvar SvgHorizontalDotsMinor = function SvgHorizontalDotsMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6 10a2 2 0 1 1-4.001-.001 2 2 0 0 1 4.001.001zm6 0a2 2 0 1 1-4.001-.001 2 2 0 0 1 4.001.001zm6 0a2 2 0 1 1-4.001-.001 2 2 0 0 1 4.001.001z\"\n }));\n};\n\nexport { SvgHorizontalDotsMinor as S };\n","import React from 'react';\n\nvar SvgMobileCancelMajor = function SvgMobileCancelMajor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414l-6.293 6.293-6.293-6.293a1 1 0 0 0-1.414 1.414l6.293 6.293-6.293 6.293a1 1 0 1 0 1.414 1.414l6.293-6.293 6.293 6.293a.998.998 0 0 0 1.707-.707.999.999 0 0 0-.293-.707l-6.293-6.293z\"\n }));\n};\n\nexport { SvgMobileCancelMajor as S };\n","import React from 'react';\n\nvar SvgSearchMinor = function SvgSearchMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82a5.968 5.968 0 0 0 1.113-3.473 6 6 0 0 0-12 0 6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z\"\n }));\n};\n\nexport { SvgSearchMinor as S };\n","import React from 'react';\n\nvar SvgSelectMinor = function SvgSelectMinor(props) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n viewBox: \"0 0 20 20\"\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.676 9h4.648c.563 0 .879-.603.53-1.014l-2.323-2.746a.708.708 0 0 0-1.062 0l-2.324 2.746c-.347.411-.032 1.014.531 1.014Zm4.648 2h-4.648c-.563 0-.878.603-.53 1.014l2.323 2.746c.27.32.792.32 1.062 0l2.323-2.746c.349-.411.033-1.014-.53-1.014Z\"\n }));\n};\n\nexport { SvgSelectMinor as S };\n"],"names":["styles","Item","id","badge","content","accessibilityLabel","helpText","url","onAction","icon","image","prefix","suffix","disabled","external","destructive","ellipsis","active","role","className","prefixMarkup","Prefix","Icon","I","source","style","backgroundImage","contentText","contentMarkup","ContentBlock","ContentBlockInner","TextStyle","variation","badgeMarkup","Suffix","Badge","status","suffixMarkup","textMarkup","Text","contentElement","Content","scrollMarkup","Scrollable","ScrollTo","control","UnstyledLink","onClick","type","onMouseUp","Section","section","hasMultipleSections","actionRole","onActionAnyItem","actionMarkup","items","map","item","index","key","undefined","Object","assign","itemOnAction","title","titleMarkup","Title","sectionRole","sectionMarkup","Actions","tabIndex","ActionList","sections","finalSections","actionListRef","useRef","length","Element","elementRole","elementTabIndex","listeners","KeypressListener","keyEvent","keyCode","DownArrow","handler","evt","preventDefault","current","target","contains","UpArrow","ref","SCROLL_LOCKING_ATTRIBUTE","SCROLL_LOCKING_WRAPPER_ATTRIBUTE","scrollPosition","ScrollLockManager","constructor","this","scrollLocks","locked","registerScrollLock","handleScrollLocking","unregisterScrollLock","body","document","wrapper","firstElementChild","removeAttribute","window","scroll","pageYOffset","setAttribute","scrollTop","resetScrollPosition","OBJECT_NOTATION_MATCHER","get","obj","keypath","defaultValue","keys","Array","isArray","str","path","result","exec","first","second","push","getKeypath","acc","i","val","mergeRecursively","inputObjA","objB","objA","prototype","hasOwnProperty","call","isMergeableValue","value","REPLACE_REGEX","I18n","translation","objs","final","merge","slice","reverse","translate","replacements","text","replace","match","replacement","substring","replacementData","JSON","stringify","Error","translationKeyExists","Boolean","MediaQueryProvider","children","isNavigationCollapsed","setIsNavigationCollapsed","useState","matches","handleResize","useCallback","debounce","trailing","leading","maxWait","useEffect","context","useMemo","Provider","EventListener","event","PortalsContainerComponent","_props","PortalsContainer","forwardRef","PortalsManager","container","portalContainerElement","setPortalContainerElement","currentContainer","contextValue","FocusManager","trapFocusList","setTrapFocusList","add","list","remove","removed","clone","indexOf","splice","AppProvider","Component","props","super","stickyManager","scrollLockManager","uniqueIdFactory","setBodyStyles","colorScheme","backgroundColor","color","i18n","linkComponent","state","link","intl","componentDidMount","setContainer","componentDidUpdate","prevColorScheme","prevI18n","prevLinkComponent","setState","render","features","CustomProperties","Status","STYLE_CLASSES","Avatar","name","onError","initials","customer","size","shape","isAfterInitialMount","setStatus","Pending","handleError","Errored","handleLoad","Loaded","hasImage","nameString","label","splitInitials","split","join","charCodeAt","styleClass","imageHasLoaded","imageClassName","Image","hidden","imageMarkUp","alt","onLoad","avatarBody","fill","d","x","y","dy","fontSize","fontWeight","textAnchor","svgMarkup","Initials","Svg","viewBox","Backdrop","onTouchStart","belowNavigation","transparent","ScrollLock","StatusValue","ProgressValue","getDefaultAccessibilityLabel","progress","progressLabel","statusLabel","Incomplete","PartiallyComplete","Complete","Info","Success","Warning","Critical","Attention","New","Pip","accessibilityLabelOverride","VisuallyHidden","DEFAULT_SIZE","statusAndProgressLabelOverride","withinFilter","useContext","accessibilityMarkup","PipContainer","SvgCircleTickMajor","fillRule","SvgCircleInformationMajor","SvgCircleAlertMajor","SvgDiamondAlertMajor","Banner","action","secondaryAction","onDismiss","stopAnnouncements","bannerRef","withinContentContainer","wrapperRef","handleKeyUp","handleBlur","handleMouseUp","shouldShowFocus","setShouldShowFocus","useImperativeHandle","focus","_wrapperRef$current","currentTarget","blur","useBannerFocus","defaultIcon","iconColor","ariaRoleType","useBannerAttributes","iconName","hasDismiss","keyFocused","withinPage","headingID","headingMarkup","Heading","element","spinnerMarkup","loading","Button","Spinner","primaryActionMarkup","PrimaryAction","overrides","UnstyledButton","unstyledButtonFrom","secondaryActionMarkup","SecondaryActionFrom","ButtonGroup","contentID","dismissButton","Dismiss","plain","onKeyUp","onBlur","Ribbon","ContentWrapper","SecondaryAction","button","focused","setTrue","forceTrueFocused","setFalse","forceFalseFocused","onFocus","spacing","segmented","fullWidth","connectedTop","contents","child","download","submit","pressed","ariaControls","ariaExpanded","ariaDescribedBy","ariaChecked","onKeyDown","onKeyPress","onMouseEnter","onPointerDown","primary","outline","disclosure","monochrome","removeUnderline","textAlign","connectedDisclosure","dataPrimaryLink","isDisabled","iconOnly","disclosureMarkup","DisclosureIcon","getDisclosureIconSource","iconSource","iconMarkup","childMarkup","spinnerSVGMarkup","disclosureActive","setDisclosureActive","toggleDisclosureActive","handleClick","connectedDisclosureMarkup","connectedDisclosureClassName","ConnectedDisclosure","defaultLabel","disclosureLabel","connectedDisclosureActivator","Popover","onClose","activator","preferredAlignment","actions","commonProps","linkProps","actionProps","buttonMarkup","ConnectedDisclosureWrapper","S","buttonsFrom","buttonFrom","Header","isValidElement","Stack","alignment","Subheading","ariaLabel","subdued","flush","hideOnPrint","titleAreaMarkup","Card","sectioned","primaryFooterAction","secondaryFooterActions","secondaryFooterActionsDisclosureText","footerActionAlignment","secondaryActionsPopoverOpen","toggle","toggleSecondaryActionsPopoverOpen","headerMarkup","primaryFooterActionMarkup","secondaryFooterActionsMarkup","footerMarkup","Subsection","SvgMinusMinor","SvgTickSmallMinor","WithinListboxContext","createContext","Checkbox","ariaDescribedByProp","labelHidden","checked","idProp","error","onChange","inputNode","mouseOver","handleMouseOver","handleMouseOut","setKeyFocused","isWithinListbox","describedBy","wrapperClassName","backdropClassName","isIndeterminate","isChecked","indeterminateAttributes","indeterminate","inputClassName","Choice","onMouseOver","onMouseOut","noop","Space","Tab","stopPropagation","RadioButton","nameProp","Input","hover","ChoiceList","titleHidden","allowMultiple","choices","selected","ControlComponent","finalName","choicesMarkup","choice","choiceDisabled","describedByError","isSelected","choiceIsSelected","renderedChildren","renderChildren","ChoiceChildren","ChoiceItem","filter","selectedChoice","updateSelectedChoices","errorMarkup","ChoiceError","InlineError","message","fieldID","Choices","includes","labelMarkup","htmlFor","Control","Label","helpTextMarkup","HelpText","helpTextID","descriptionMarkup","Descriptions","Collapsible","expandOnPrint","open","transition","preventMeasuringOnChildrenUpdate","height","setHeight","isOpen","setIsOpen","animationState","setAnimationState","collapsibleContainer","isFullyOpen","isFullyClosed","collapsibleStyles","transitionDuration","duration","transitionTimingFunction","timingFunction","maxHeight","overflow","handleCompleteAnimation","scrollHeight","onTransitionEnd","ContextualSaveBar","memo","saveAction","discardAction","alignContentFlush","contextControl","secondaryMenu","setContextualSaveBar","removeContextualSaveBar","DEFAULT_COLOR_SCHEME","as","isEdgeVisible","position","start","end","edgeType","getPrevAndCurrentColumns","tableData","columnData","firstVisibleColumnIndex","previousColumn","Math","max","currentColumn","SvgSortDescendingMajor","fillOpacity","SvgSortAscendingMajor","Cell","contentType","firstColumn","truncate","header","total","totalInFooter","sorted","sortable","sortDirection","inFixedFirstColumn","verticalAlign","defaultSortDirection","onSort","colSpan","setRef","stickyHeadingCell","stickyCellWidth","hovered","handleFocus","hasFixedFirstColumn","fixedCellVisible","firstColumnMinWidth","numeric","StickyHeaderCell","separate","FixedFirstColumn","headerClassName","iconClassName","direction","oppositeDirection","sortAccessibilityLabel","focusable","columnHeadingContent","colSpanProp","stickyHeading","minWidth","scope","TruncatedText","TooltipContent","cellMarkup","textRef","scrollWidth","offsetWidth","Tooltip","innerText","AfterInitialMount","fallback","Navigation","columnVisibilityData","isScrolledFarthestLeft","isScrolledFarthestRight","navigateTableLeft","navigateTableRight","fixedFirstColumn","pipMarkup","column","isVisible","leftA11yLabel","rightA11yLabel","getRowClientHeights","rows","heights","forEach","row","clientHeight","DataTableInner","PureComponent","args","condensed","rowHovered","dataTable","createRef","scrollContainer","table","stickyTable","stickyNav","headerNav","tableHeadings","stickyHeadings","tableHeadingWidths","stickyHeaderActive","scrollStopTimer","clientWidth","calculateColumnVisibilityData","setCellRef","inStickyHeader","querySelector","addEventListener","handleHeaderButtonFocus","getBoundingClientRect","width","changeHeadingFocus","stickyFocusedItemIndex","findIndex","_document$activeEleme","activeElement","parentElement","tableFocusedItemIndex","_document$activeEleme2","arrowsInStickyNav","querySelectorAll","arrowsInHeaderNav","stickyFocusedNavIndex","headerFocusedNavIndex","visibility","removeProperty","headerCells","selector","firstColumnWidth","tableLeftVisibleEdge","scrollLeft","tableRightVisibleEdge","tableStart","tableEnd","leftEdge","offsetLeft","rightEdge","isVisibleLeft","isVisibleRight","min","measureColumn","lastColumn","_this$state$columnVis","currentCell","parentNode","tableScrollLeft","tableViewableWidth","tableRightEdge","currentColumnLeftEdge","currentColumnRightEdge","stickyHeaderScrolling","scrollListener","_this$scrollContainer","clearTimeout","setTimeout","prevState","stickyHeader","handleHover","_this$state$columnVis2","desiredScrollLeft","navigateTable","_this$state$columnVis3","prevWidths","newScrollLeft","requestAnimationFrame","renderHeading","heading","headingIndex","columnContentTypes","initialSortColumnIndex","sortedColumnIndex","sortableHeadingProps","isSortable","isSorted","defaultOnSort","cellProps","totalsRowHeading","totals","totalsName","totalsLabel","singular","plural","renderTotals","showTotalsInFooter","getColSpan","rowLength","headingsLength","contentTypesLength","cellIndex","rowLen","colLen","floor","defaultRenderRow","rowHeights","hoverable","headings","TableRow","onMouseLeave","newSortDirection","prevProps","componentWillUnmount","cancel","_this$table$current","_this$table$current2","_columnVisibilityData","footerContent","hideScrollIndicator","increasedTableDensity","hasZebraStripingOnData","rowCountIsEven","DataTable","ShowTotals","ShowTotalsInFooter","ZebraStripingOnData","RowCountIsEven","TableWrapper","IncreasedTableDensity","StickyHeaderEnabled","totalsMarkup","firstHeading","firstTotal","tableHeaderRows","childNodes","tableBodyRows","headerRowHeights","bodyRowHeights","fixedFirstColumnMarkup","maxWidth","bodyMarkup","Footer","headerTotalsMarkup","footerTotalsMarkup","navigationMarkup","location","stickyHeaderMarkup","StickyHeaderWrapper","Sticky","boundingElement","onStickyChange","isSticky","stickyHeaderInnerClassNames","StickyHeaderInner","stickyHeaderTableClassNames","StickyHeaderTable","StickyTableHeadingsRow","ScrollContainer","capture","passive","Table","DisplayText","EmptyState","largeImage","imageContained","imageMarkup","sourceSet","descriptor","sizes","footerContentMarkup","FooterContent","TextContainer","T","headingSize","childrenMarkup","textContentMarkup","actionsMarkup","distribution","detailsMarkup","DetailsContainer","Details","ImageContainer","attachListener","detachProps","detachListener","removeEventListener","SvgChevronUpMinor","SvgChevronDownMinor","ConnectedFilterControl","availableWidth","proxyButtonsWidth","proxyButtonContainer","moreFiltersButtonContainer","measureProxyButtons","measureAvailableWidth","rightPopoverableActions","rightAction","auxiliary","forceShowMorefiltersButton","queryFieldHidden","actionsToRender","getActionsToRender","shouldRenderMoreFiltersButton","RightContainerClassName","rightMarkup","popoverFrom","moreFiltersButtonContainerClassname","rightActionMarkup","proxyButtonMarkup","activatorButtonFrom","proxy","auxMarkup","tolerance","from","buttonWidth","buttonKey","HTMLElement","dataset","containerWidth","moreFiltersButtonWidth","filtersActionWidth","remainingWidth","actionsToReturn","actionWidth","options","popoverOpen","popoverContent","TagsWrapper","Tag","onRemove","tagTitle","removeButton","tagContent","href","BOTTOM_CLASS_NAMES","enter","enterActive","exit","exitActive","RIGHT_CLASS_NAMES","Sheet","onEntered","onExit","activatorRef","handleClose","activatorElement","isRef","activatorMarkup","Portal","idPrefix","CSSTransition","nodeRef","classNames","timeout","parseInt","motion","in","mountOnEnter","unmountOnExit","TrapFocus","trapping","Escape","FiltersInner","readyForFocus","moreFiltersDoneButtonContainer","focusNode","closeFilters","toggleFilters","openFilters","setReadyForFocus","newState","handleClearAll","onClearAll","filters","queryValue","onQueryBlur","onQueryChange","onQueryFocus","appliedFilters","onQueryClear","queryPlaceholder","hideTags","hideQueryField","disableQueryField","mediaQuery","resourceName","backdropMarkup","filtersContentMarkup","filterIsOpen","Filter","FilterTriggerContainer","last","appliedFilterContent","getAppliedFilterContent","appliedFilterBadgeMarkup","AppliedFilterBadgeContainer","collapsibleID","buttonClassName","FilterTrigger","toggleFilter","FilterTriggerLabelContainer","FilterTriggerTitle","FilterTriggerIcon","FilterNodeContainer","Focus","root","generateFilterMarkup","appliedFiltersCount","moreFiltersLabel","count","filterResourceName","transformedFilters","transformFilters","filtersControlMarkup","TextField","placeholder","SearchIcon","clearButton","onClearButtonClick","autoComplete","filtersContainerHeaderClassname","FiltersContainerHeader","filtersDesktopHeaderMarkup","filtersMobileHeaderMarkup","filtersDesktopFooterClassname","FiltersContainerFooter","filtersDesktopFooterMarkup","hasAppliedFilters","filtersMobileFooterMarkup","FiltersMobileContainerFooter","EmptyFooterState","shouldHideTagsContainer","tagsMarkup","TagsContainer","filtersMobileContainerContentClassName","FiltersMobileContainerContent","filtersDesktopContainerContentClassName","FiltersDesktopContainerContent","filtersContainerMarkup","shadow","FiltersContainer","Filters","filtersApplied","queryApplied","find","getAppliedFilterRemoveHandler","openFilter","closeFilter","openFilterShortcut","Shortcut","closeFilterShortcut","toggleFilterShortcut","transformedActions","shortcut","getShortcutFilters","removeCallback","removeHandler","clearButtonMarkup","hideClearButton","filterName","vertical","contextType","node","FooterHelp","Group","grouped","titleID","helpTextElement","titleElement","itemsMarkup","Children","Items","FormLayout","wrapChildren","setRootProperty","documentElement","setProperty","Loading","isMountedRef","isMounted","useIsMountedRef","setProgress","animating","setAnimating","step","customStyles","transform","TransitionStatus","CSSAnimation","inProp","transitionStatus","setTransitionStatus","Entering","Exited","changeTransitionStatus","Entered","Exiting","DiscardConfirmationModal","onDiscard","onCancel","Modal","primaryAction","secondaryActions","logo","discardConfirmationModalVisible","toggleDiscardConfirmationModal","closeDiscardConfirmationModal","handleDiscardAction","discardActionContent","discardActionHandler","discardConfirmationModal","discardConfirmationModalMarkup","discardActionMarkup","saveActionContent","saveActionMarkup","contextualSaveBarSource","logoMarkup","contextControlMarkup","contentsClassName","wrap","Toast","timeoutDuration","console","log","timer","dismissMarkup","ToastManager","toastMessages","toastNodes","updateToasts","callback","targetInPos","_","currentToast","dependencies","u","customCompare","toastsMarkup","toast","toastNode","toastClasses","TransitionGroup","component","enterDone","APP_FRAME_MAIN","FrameInner","skipFocused","globalRibbonHeight","loadingStack","showContextualSaveBar","contextualSaveBar","globalRibbonContainer","navigationNode","setGlobalRibbonHeight","offsetHeight","setGlobalRibbonRootProperty","setOffset","offset","showToast","hideToast","toastId","forceUpdate","startLoading","stopLoading","globalRibbon","skipToContentTarget","handleNavigationDismiss","onNavigationDismiss","setGlobalRibbonContainer","handleNavKeydown","showMobileNavigation","navigation","topBar","navClassName","mobileNavHidden","mobileNavShowing","mobileNavAttributes","appear","navTransitionClasses","loadingMarkup","contextualSaveBarMarkup","topBarMarkup","globalRibbonMarkup","skipClassName","skipTarget","skipMarkup","navigationAttributes","frameClassName","navigationOverlayMarkup","Frame","Grid","gap","areas","columns","xs","sm","md","lg","xl","formatAreas","area","gridArea","columnSpan","COLORS_WITH_BACKDROPS","backdrop","sourceType","applyColor","hasBackdrop","SourceComponent","function","Placeholder","Img","src","crossOrigin","rest","finalSourceSet","subSource","srcSet","Indicator","pulse","pulseIndicator","SvgAlertMinor","errorTextID","useIsomorphicLayoutEffect","useLayoutEffect","useCapture","tracked","handleKeyEvent","labelID","requiredIndicator","RequiredIndicator","Labelled","Action","LabelWrapper","Link","Consumer","BannerContext","shouldBeMonochrome","List","ListElement","MediaCard","description","popoverActions","portrait","popoverActive","togglePopoverActive","headerContent","popoverActivator","popoverActionsMarkup","preferredPosition","actionClassName","ActionContainer","mediaCardClassName","mediaContainerClassName","MediaContainer","sizeSmall","infoContainerClassName","InfoContainer","Description","Dialog","instant","labelledBy","onExited","large","small","limitHeight","fullScreen","containerNode","classes","TransitionChild","Transition","FadeUp","fadeUpClasses","appearActive","CloseButton","primaryActionButton","secondaryActionButtons","iFrameName","footer","onScrolledToBottom","onIFrameLoad","noScroll","iframeHeight","setIframeHeight","headerId","iframeTitle","dialog","handleEntered","handleExited","handleIFrameLoad","iframe","contentWindow","_error","scrollContainerMarkup","animated","NavigationContext","Secondary","expanded","uid","MatchState","subNavigationItems","selectedOverride","new","isNew","exactMatch","matchPaths","excludePaths","onToggleExpandedState","shouldResizeIcon","secondaryNavigationId","indicatorMarkup","subNavigationItem","wrappedBadgeMarkup","itemContentMarkup","ListItem","getClickHandler","secondaryActionLinkMarkup","tooltip","matchState","matchStateForItem","matchingSubNavigationItems","subMatchState","MatchForced","MatchUrl","MatchPaths","childIsActive","showExpanded","canBeActive","itemClassName","subNavigationActive","secondaryNavigationMarkup","longestMatch","sort","firstUrl","secondUrl","SecondaryNavigationClassName","SecondaryNavigation","isExpanded","ItemWrapper","controlId","hasSubMenu","normalizeAriaAttributes","getAttribute","normalizePathname","pathname","barePathname","endsWith","safeStartsWith","startsWith","NoMatch","some","Excluded","safeEqual","ariaLabelledBy","logoSuffix","LogoContainer","hasLogoSuffix","LogoLink","topBarSource","Logo","mediaMarkup","ContextControl","PrimaryNavigation","rollup","separator","toggleExpanded","setExpandedFalse","animationFrame","expandedIndex","setExpandedIndex","hasSubNavItems","cancelAnimationFrame","sectionHeadingMarkup","SectionHeading","toggleClassName","RollupToggle","hide","view","toggleRollup","after","activeItemIndex","activePath","itemUrl","sectionItems","additionalItems","additionalItemsId","activeItemsMarkup","RollupSection","isInterface","isReactElement","SvgArrowLeftMinor","Breadcrumbs","breadcrumbs","breadcrumb","breadcrumbMarkup","Breadcrumb","subtitle","titleMetadata","compactTitle","TitleWithSubtitle","titleMetadataMarkup","TitleMetadata","wrappedTitleMarkup","TitleWithMetadataWrapper","subtitleMarkup","SubTitle","SubtitleCompact","RollupActions","rollupOpen","toggleRollupOpen","RollupActivator","getOffsetWidth","secondaryActionsRef","_secondaryActionsRef$","MenuGroup","details","onOpen","handleOpen","handleOffsetWidth","ACTION_SPACING","groups","onActionRollup","actionsLayoutRef","menuGroupWidthRef","availableWidthRef","actionsAndGroupsLengthRef","timesMeasured","actionWidthsRef","rollupActiveRef","activeMenuGroup","setActiveMenuGroup","measuredActions","setMeasuredActions","showable","rolledUp","defaultRollupGroup","lastMenuGroup","pop","lastMenuGroupWidth","handleActionsOffsetWidth","handleMenuGroupToggle","group","handleMenuGroupClose","updateActions","actionsAndGroups","measureActions","currentAvailableWidth","newShowableActions","newRolledUpActions","isRollupActive","rollUppableActionsMarkup","groupsMarkup","rolledUpGroup","isMenuGroup","groupActions","isDefaultGroup","isLastMenuGroup","finalRolledUpActions","finalRolledUpSectionGroups","reduce","sectionAction","groupedActionsMarkup","ActionsLayout","actionOrMenuGroup","ActionMenu","rollupActionsLabel","actionMenuClassNames","rollupSections","convertGroupToSection","SHORT_TITLE","REALLY_SHORT_TITLE","LONG_TITLE","additionalMetadata","pagination","additionalNavigation","actionGroups","isSingleRow","BreadcrumbWrapper","paginationMarkup","PaginationWrapper","Pagination","additionalNavigationMarkup","AdditionalNavigationWrapper","pageTitleMarkup","TitleWrapper","PrimaryActionMarkup","actionMenuMarkup","hasGroupsWithActions","additionalMetadataMarkup","AdditionalMetaData","headerClassNames","hasNavigation","hasActionMenu","mobileView","noBreadcrumbs","mediumTitle","longTitle","slot1","slot2","slot3","slot4","slot5","slot6","layouts","mobileCompact","slots","condition","mobileDefault","desktopCompact","desktopDefault","values","layout","determineLayout","notNull","Row","RightAlign","every","LeftAlign","isPrimary","isMobile","shouldShowIconOnly","PrimaryActionWrapper","Page","narrowWidth","divider","pageClassName","hasHeaderContent","contentClassName","EditableTarget","hasNext","hasPrevious","nextURL","previousURL","onNext","onPrevious","nextTooltip","previousTooltip","nextKeys","previousKeys","accessibilityLabels","navLabel","previousLabel","previous","nextLabel","next","prev","constructedPrevious","activatorWrapper","constructedNext","previousHandler","previousButtonEvents","handleCallback","clickPaginationLink","nextHandler","nextButtonEvents","labelTextMarkup","click","fn","tagName","Textarea","Select","hasAttribute","ContentEditable","isInputFocused","Pane","fixed","minHeight","PopoverCloseSource","PopoverOverlay","contentNode","enteringTimer","exitingTimer","overlayRef","renderPopover","overlayDetails","measuring","desiredHeight","positioning","fullHeight","fluidContent","autofocusTarget","positionedAbove","contentStyles","contentClassNames","childrenArray","toArray","renderPopoverContent","handleEscape","FocusTracker","handleFocusFirstItem","Wrapper","handleFocusLastItem","isDescendant","nodeContainsDescendant","isActivatorDescendant","Click","handleScrollOut","ScrollOut","EscapeKeypress","FocusOut","forceUpdatePosition","_this$overlayRef$curr","cb","focusContent","oldProps","clearTransitionTimeout","preferInputActivator","zIndexOverride","PositionedOverlay","bind","onScrollOut","focusableChild","preventScroll","rootNode","descendant","parent","PopoverComponent","preventFocusOnClose","ariaHaspopup","activatorNode","setActivatorNode","activatorContainer","WrapperComponent","_overlayRef$current","setAccessibilityAttributes","focusableActivator","activatorDisabled","String","setActivatorAttributes","portal","isInPortal","only","onPortalCreated","portalsManager","usePortalsManager","uniqueId","portalId","createPortal","rectIsOutsideOfRect","inner","outer","center","top","intersectionWithViewport","rect","viewport","windowRect","left","bottom","right","scrollY","scrollX","innerHeight","OBSERVER_CONFIG","childList","subtree","characterData","activatorRect","zIndex","outsideScrollableContainer","lockPosition","overlay","scrollableContainer","observer","setOverlay","handleMeasurement","disconnect","preferredActivator","currentOverlayRect","scrollableElement","scrollableContainerRect","overlayRect","topBarOffset","topBarElement","overlayMargins","firstChild","nodeStyles","getComputedStyle","parseFloat","marginTop","marginBottom","horizontal","marginLeft","getMarginsForNode","containerRect","zIndexForLayer","layerNode","closest","isNaN","getZIndexForLayerFromNode","verticalPosition","activatorTop","activatorBottom","spaceAbove","spaceBelow","verticalMargins","minimumSpaceToScroll","distanceToTopScroll","distanceToBottomScroll","enoughSpaceFromTopScroll","enoughSpaceFromBottomScroll","heightIfBelow","heightIfAbove","containerRectTop","positionIfAbove","positionIfBelow","calculateVerticalPosition","horizontalPosition","maximum","activatorRight","calculateHorizontalPosition","observe","MutationObserver","forNode","preventInteraction","propClassNames","sharedStyles","DualThumb","sanitizeValue","trackWidth","trackLeft","track","trackWrapper","thumbLower","thumbUpper","setTrackPosition","thumbSize","adjustedTrackWidth","adjustedTrackLeft","range","minValuePosition","handleMouseDownThumbLower","registerMouseMoveHandler","handleMouseMoveThumbLower","valueUpper","setValue","actualXPosition","clientX","Upper","handleTouchStartThumbLower","registerTouchMoveHandler","handleTouchMoveThumbLower","touches","handleMouseDownThumbUpper","handleMouseMoveThumbUpper","valueLower","Lower","handleTouchStartThumbUpper","handleTouchMoveThumbUpper","handleKeypressLower","incrementValueLower","decrementValueLower","RightArrow","LeftArrow","handleKeypressUpper","incrementValueUpper","decrementValueUpper","dispatchValue","dirtyValue","sanitizedValue","isTupleEqual","handleMouseDownTrack","clickXPosition","abs","handleTouchStartTrack","dirtyXPosition","getDerivedStateFromProps","prevValue","output","labelAction","idLower","idUpper","trackWrapperClassName","TrackWrapper","thumbLowerClassName","Thumbs","ThumbLower","thumbUpperClassName","ThumbUpper","leftPositionThumbLower","leftPositionThumbUpper","outputLowerClassName","Output","OutputLower","outputMarkupLower","OutputBubble","OutputText","outputUpperClassName","OutputUpper","outputMarkupUpper","cssVars","RangeSlider","onMouseDown","Track","once","upperValue","lowerMin","inBoundsUpper","roundedToStep","lowerValue","upperMax","inBoundsLower","maxLowerValue","minUpperValue","round","a","b","SingleThumb","clampedValue","clamp","sliderProgress","number","sign","outputMarkup","InputWrapper","sharedProps","isDualThumb","getUniqueCheckboxID","getUniqueOverlayID","BaseResourceItem","actionsMenuVisible","focusedInner","selectedItems","checkboxId","overlayId","buttonOverlay","setNode","relatedTarget","handleLargerSelectionArea","handleSelection","nativeEvent","shiftKey","sortOrder","onSelectionChange","selectMode","ctrlKey","metaKey","anchor","handleActionsClick","handleCloseRequest","nextProps","shouldComponentUpdate","nextState","nextChildren","nextSelectedItems","restNextContext","restNextProps","restContext","restProps","nextSelectMode","media","shortcutActions","persistActions","selectable","verticalAlignment","dataHref","ownedMarkup","handleMarkup","Media","checkboxAccessibilityLabel","Handle","CheckboxWrapper","Owned","OwnedNoMedia","ResourceItem","listItemClassName","disclosureAccessibilityLabel","Disclosure","containerClassName","Container","containerMarkup","itemName","accessibleMarkup","SvgEnableSelectionMinor","UNIQUE_IDENTIFIER","Symbol","BulkActionButton","indicator","bulkActionButton","BulkActionMenu","isNewBadgeInBadgeActions","toggleMenuVisibility","CheckableButton","onToggleAll","smallScreen","checkBoxRef","registerCheckableButtons","currentKey","slideClasses","Slide","BulkActionsInner","smallScreenPopoverVisible","largeScreenPopoverVisible","largeScreenButtonsNode","moreActionsNode","checkableWrapperNode","largeScreenGroupNode","smallScreenGroupNode","promotedActionsWidths","bulkActionsWidth","addedMoreActionsWidthForMeasuring","setLargeScreenButtonsNode","setContainerNode","setMoreActionsNode","setSelectMode","onSelectModeToggle","toggleSmallScreenPopover","onMoreActionPopoverToggle","toggleLargeScreenPopover","numberOfPromotedActionsToRender","promotedActions","sufficientSpace","counter","totalWidth","hasActions","actionSections","validList","instanceOfBulkActionListSectionArray","instanceOfBulkActionArray","rolledInPromotedActions","instanceOfMenuGroupDescriptor","paginatedSelectAllText","paginatedSelectAllAction","paginatedSelectAllActionMarkup","paginatedSelectAllTextMarkup","paginatedSelectAllMarkup","PaginatedSelectAll","cancelButton","allActionsPopover","promotedActionsMarkup","activatorLabel","combinedActions","actionsPopover","checkableButtonProps","smallScreenGroup","smallScreenGroupClassName","ButtonGroupWrapper","CheckableContainer","largeGroupContent","largeScreenGroup","largeScreenGroupClassName","_item$badge","BulkActions","EmptySearchResult","withIllustration","altText","illustrationMarkup","draggable","getAllItemsOnPage","idForItem","isSmallScreen","innerWidth","defaultIdForItem","toString","ResourceList","filterControl","emptyState","emptySearchState","resourceNameProp","promotedBulkActions","bulkActions","isFiltered","hasMoreItems","showHeader","totalItemsCount","sortValue","sortOptions","alternateTool","onSortChange","renderItem","resolveItemId","loadingPosition","setLoadingPositionState","lastSelected","setLastSelected","setSmallScreen","useReducer","checkableButtons","setCheckableButtons","Map","defaultResourceName","initialValue","lazyRef","useLazyRef","listRef","handleSelectMode","newSmallScreen","isSelectable","headerTitle","itemsCount","resource","bulkActionsAccessibilityLabel","selectedItemsCount","allSelected","resourceNameSingular","itemsLength","resourceNamePlural","emptySearchResultText","handleSelectAllItemsInStore","newlySelectedItems","setLoadingPosition","viewportHeight","spinnerHeight","spinnerPosition","itemsExist","handleToggleAll","checkbox","bulkActionsMarkup","BulkActionsWrapper","bulkActionsLabel","selectState","bulkSelectState","filterControlMarkup","FiltersWrapper","sortingSelectMarkup","SortWrapper","labelInline","alternateToolMarkup","AlternateToolWrapper","headerTitleMarkup","HeaderTitleWrapper","selectButtonMarkup","SelectButtonWrapper","checkableButtonMarkup","CheckableButtonWrapper","needsHeader","headerWrapperOverlay","showEmptyState","showEmptySearchState","HeaderOuterWrapper","HeaderWrapper","HeaderContentWrapper","emptySearchStateMarkup","EmptySearchResultWrapper","emptyStateMarkup","spinnerStyle","paddingTop","spinnerSize","loadingOverlay","SpinnerContainer","LoadingOverlay","loadingWithoutItemsMarkup","resourceListClassName","disabledPointerEvents","disableTextSelection","listMarkup","selectedIds","currentSelected","handleMultiSelectionChange","Set","selectedId","set","ResourceListWrapper","useScrollLockManager","ScrollableContext","EVENTS_TO_LOCK","PREFERS_REDUCED_MOTION","matchMedia","err","prefersReducedMotion","topShadow","bottomShadow","canScroll","scrollArea","handleScroll","setScrollArea","shouldBottomShadow","shouldTopShadow","scrollHint","scrollDistance","toggleLock","scrollStep","delta","scrollToPosition","closestElement","hint","removeScrollListener","finalClassName","shouldLock","eventName","prevent","anchorNode","offsetTop","PLACEHOLDER_VALUE","optionsProp","labelHiddenProp","handleChange","normalizedOptions","normalizeOption","inlineLabelMarkup","InlineLabel","selectedOption","flatOptions","optionOrGroup","isGroup","concat","flattenOptions","option","getSelectedOption","SelectedOption","optionsMarkup","renderOption","isString","normalizeStringOption","renderSingleOption","_prefix","SettingAction","Setting","getUniqueSettingToggleId","SettingToggle","enabled","SkeletonBodyText","lines","bodyTextLines","SkeletonDisplayText","hasFocusableParent","xmlns","spanAttributes","accessibilityLabelMarkup","noWrap","itemMarkup","StickyInner","placeHolderNode","stickyNode","setPlaceHolderNode","setStickyNode","handlePositioning","stick","adjustPlaceHolderNode","toggleAttribute","paddingBottom","disableWhenStacked","registerStickyItem","unregisterStickyItem","childrenContent","useStickyManager","getVisibleAndHiddenTabIndices","tabs","disclosureWidth","tabWidths","sumTabWidths","sum","arrayOfTabIndices","visibleTabs","hiddenTabs","tabListWidth","currentTabIndex","currentTabWidth","Panel","tabID","siblingTabHasFocus","panelID","wasSelected","panelFocused","focusPanelID","tabContainerClassNames","TabContainer","Underline","markup","panel","getElementById","TabMeasurer","tabToFocus","handleMeasurementProp","hiddenTabNodes","hiddenTabWidths","ceil","tabsMarkup","tab","classname","Tabs","focusedNode","setFocusedNode","focusIndex","disclosureTabs","tabProps","handleKeyDown","TabsInner","Infinity","showDisclosure","handleKeyPress","tabsArrayInOrder","newFocus","renderTabMarkup","tabPanelID","handleTabClick","classList","DisclosureActivator","handleDisclosureActivatorClick","measurements","onSelect","aTab","fitted","disclosureText","panelMarkup","_tab","tabA","tabB","disclosureActivatorVisible","hasCustomDisclosure","fillSpace","disclosureTabClassName","DisclosureTab","disclosureButtonClassName","disclosureButtonContentWrapperClassName","titleWithIcon","disclosureButtonContent","disclosureButton","handleStep","handleMouseDown","Segment","SpinnerIcon","Connected","leftConnectionMarkup","rightConnectionMarkup","Resizer","currentHeight","currentHeightProp","minimumLines","onHeightChange","minimumLinesNode","minimumLinesMarkup","DummyInput","dangerouslySetInnerHTML","__html","getContentsForMinimumLines","handleHeightCheck","newHeight","getFinalContents","ENTITIES_TO_REPLACE","RegExp","replaceEntity","entity","line","verticalContent","readOnly","autoFocus","multiline","connectedRight","connectedLeft","maxLength","minLength","pattern","inputMode","spellCheck","ariaOwns","ariaActiveDescendant","ariaAutocomplete","showCharacterCount","align","monospaced","selectTextOnFocus","suggestion","setFocus","isAfterInitial","inputRef","textAreaRef","prefixRef","suffixRef","verticalContentRef","buttonPressTimer","spinnerRef","input","setSelectionRange","normalizedValue","normalizedStep","normalizedMax","normalizedMin","hasValue","inputType","characterCountMarkup","characterCount","characterCountLabel","limit","characterCountClassName","CharacterCount","AlignFieldBottom","characterCountText","handleClickChild","ClearButton","handleNumberChange","steps","dpl","num","numericValue","decimalPlaces","newValue","Number","toFixed","handleButtonRelease","handleButtonPress","interval","onChangeInterval","handleExpandingResize","resizer","unshift","createElement","getRows","normalizeAriaMultiline","select","which","Enter","test","onInput","inputWithVerticalContentMarkup","VerticalContent","inputMarkup","_inputRef$current","isPrefixOrSuffix","isVerticalContent","isInput","isSpinner","VariationValue","Code","code","variationElement","Thumbnail","TooltipOverlay","dismissOnMouseOut","originalActive","mouseEntered","accessibilityNode","activatorContainerRef","SvgMobileHamburgerMajor","SearchDismissOverlay","visible","handleDismiss","Search","overlayVisible","overlayMarkup","MessageIndicator","MessageIndicatorWrapper","Message","to","linkContent","actionContent","Menu","activatorContent","badgeProps","messageMarkup","isFullHeight","ActivatorWrapper","Activator","TopBar","showNavigationToggle","userMenu","searchResults","searchField","searchResultsVisible","searchResultsOverlayVisible","onNavigationToggle","onSearchResultsDismiss","navigationButtonMarkup","contextMarkup","searchMarkup","SearchField","showFocusBorder","forceActive","setForceActive","searchId","handleClear","clearMarkup","autoCapitalize","autoCorrect","UserMenu","detail","avatar","onToggle","showIndicator","activatorContentMarkup","canSafelyFocus","focusManager","addFocusItem","removeFocusItem","useFocusManager","focusTrapWrapper","disableFocus","setDisableFocus","disable","containerContentsHaveFocus","firstFocusableNode","lastFocusableNode","interactiveProps","_ref","LinkComponent","rel","MINUTE","HOUR","ensureTwoDigits","secondsToTimeComponents","seconds","hours","minutes","secondsToDurationTranslationKey","numSeconds","durationKey","PlayIcon","VideoThumbnail","thumbnailUrl","videoLength","videoProgress","showVideoProgress","onBeforeStartPlaying","buttonLabel","hourCount","minuteCount","secondCount","timeStampMarkup","Timestamp","withProgress","hasHours","secondsToTimestamp","progressMarkup","progressValue","calculateProgress","progressValuePercents","Progress","ProgressBar","PlayButton","scrollable","layer","unstyled","dataPolarisTopBar","headerCell","Key","Breakpoints","navigationBarCollapsed","stackedContent","noWindowMatches","addListener","removeListener","onchange","dispatchEvent","breakpoints","entries","breakpointsToken","mediaConditions","mediaCondition","charAt","toUpperCase","flat","wrapWithComponent","isElementOfType","isComponent","AComponent","AnotherComponent","_element$props","defaultType","__type__","elementChildren","predicate","ConditionalWrapper","ConditionalRender","variationName","func","waitArg","lastArgs","lastThis","timerId","lastCallTime","lastInvokeTime","maxing","useRAF","TypeError","wait","invokeFunc","time","thisArg","apply","startTimer","pendingFunc","shouldInvoke","timeSinceLastCall","timerExpired","Date","now","trailingEdge","timeSinceLastInvoke","timeWaiting","remainingWait","debounced","isInvoking","leadingEdge","cancelTimer","pending","MissingAppProviderError","FeaturesContext","FocusManagerContext","isElementInViewport","FOCUSABLE_SELECTOR","KEYBOARD_FOCUSABLE_SELECTORS","MENUITEM_FOCUSABLE_SELECTORS","handleMouseUpByBlurring","findFirstFocusableNode","onlyDescendants","findFirstFocusableNodeIncludingDisabled","focusableSelector","focusFirstFocusableNode","_findFirstFocusableNo","focusNextFocusableNode","nextFocusable","allFocusableElements","sliceLocation","focusableElementsAfterNode","focusableElement","nextFocusableNode","findFirstKeyboardFocusableNode","focusFirstKeyboardFocusableNode","firstFocusable","findLastKeyboardFocusableNode","allFocusable","focusLastKeyboardFocusableNode","lastFocusable","wrapFocusPreviousFocusableMenuItem","currentFocusedElement","allFocusableChildren","getMenuFocusableDescendants","currentItemIdx","getCurrentFocusedElementIndex","wrapFocusNextFocusableMenuItem","ownerDocument","FrameContext","useFrame","frame","Rect","zero","getRectForNode","isObject","pluckDeep","currKey","plucked","getWidth","defaultWidth","I18nContext","useI18n","LinkContext","MediaQueryContext","useMediaQuery","PortalsManagerContext","ResourceListContext","SELECT_ALL_ITEMS","ScrollLockManagerContext","StickyManagerContext","SIXTY_FPS","StickyManager","stickyItems","stuckItems","manageStickyItems","stickyItem","nodeToRemove","nodeIndex","el","isDocument","setTopBarOffset","containerTop","sticky","evaluateStickyItem","updateStuckItems","stickyOffset","getOffset","placeHolderNodeCurrentTop","_stickyNode$firstElem","stickyItemHeight","stickyItemBottomPosition","isNodeStuck","addStuckItem","removeStuckItem","stuckNodesLength","nodeRect","stuckNode","horizontallyOverlaps","topbarElement","rect1","rect2","rect1Left","rect1Right","rect2Left","isServer","UniqueIdFactoryContext","useUniqueId","overrideId","idFactory","uniqueIdRef","nextId","UniqueIdFactory","idGeneratorFactory","idGenerators","globalIdGeneratorFactory","useComponentDidMount","hasInvokedLifeCycle","useDeepCompareRef","comparator","dependencyList","useDeepEffect","useDisableClick","handleClickWrapper","useIsAfterInitialMount","setIsAfterInitialMount","useToggle","initialState","WithinContentContext","WithinFilterContext","SvgAppExtensionIcon","displayName","SvgArrowRightIcon","SvgCashDollarIcon","SvgChevronDownIcon","SvgChevronUpIcon","SvgConnectIcon","SvgDiscountCodeIcon","SvgDomainIcon","SvgDragHandleIcon","SvgEditIcon","SvgHomeIcon","SvgInfoIcon","SvgLayoutColumn1Icon","SvgLayoutColumns2Icon","SvgLayoutColumns3Icon","SvgLinkIcon","SvgMenuIcon","SvgPersonIcon","SvgPersonLockIcon","SvgPlusCircleIcon","SvgRefreshIcon","SvgSearchIcon","SvgTextTitleIcon","SvgThumbsUpIcon","SvgUploadIcon","SvgViewIcon","SvgXCircleIcon","SvgXIcon","ownKeys","object","enumerableOnly","getOwnPropertySymbols","symbols","sym","getOwnPropertyDescriptor","enumerable","_objectSpread2","arguments","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","configurable","writable","arr","_arrayWithHoles","_i","iterator","_s","_e","_arr","_n","_d","done","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","len","arr2","_templateObject","strings","raw","BASE_FONT_SIZE","UNIT_PX","UNIT_EM","UNIT_REM","DIGIT_REGEX","freeze","UNIT_REGEX","getUnit","unit","toEm","rem","px","_toRem","toRem","tokensToRems","tokenGroup","fromEntries","_ref2","token","properties","getMediaConditions","breakpointEntries","lastBreakpointIndex","entry","_ref6","breakpointsTokenName","breakpoint","upMediaCondition","getUpMediaCondition","up","down","getDownMediaCondition","_toPx","offsetBreakpoint","toPx","colorSchemes","light","background","surface","border","interactive","dark","tokens","depth","legacyTokens","ease","linear","typography","SvgCancelSmallMinor","SvgCaretDownMinor","SvgCaretUpMinor","SvgChevronLeftMinor","SvgChevronRightMinor","SvgCircleCancelMinor","SvgHorizontalDotsMinor","SvgMobileCancelMajor","SvgSearchMinor","SvgSelectMinor"],"sourceRoot":""}