@razorpay/blade 11.3.1 → 11.4.0

package/build/lib/web/production/components/Modal/Modal.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalHighestZIndex,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger, throwBladeError } from '~utils/logger';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = modalHighestZIndex,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  const validChildren = React.Children.map(children, (child) => {\n    if (\n      isValidAllowedChildren(child, MetaConstants.ModalHeader) ||\n      isValidAllowedChildren(child, MetaConstants.ModalBody) ||\n      isValidAllowedChildren(child, MetaConstants.ModalFooter)\n    ) {\n      return child;\n    } else if (__DEV__) {\n      throwBladeError({\n        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',\n        moduleName: 'Modal',\n      });\n    }\n    return null;\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.subtle\"\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {validChildren}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","modalHighestZIndex","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","validChildren","Children","map","child","isValidAllowedChildren","MetaConstants","ModalHeader","ModalBody","ModalFooter","throwBladeError","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","modal","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}
+{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger, throwBladeError } from '~utils/logger';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = componentZIndices.modal,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  const validChildren = React.Children.map(children, (child) => {\n    if (\n      isValidAllowedChildren(child, MetaConstants.ModalHeader) ||\n      isValidAllowedChildren(child, MetaConstants.ModalBody) ||\n      isValidAllowedChildren(child, MetaConstants.ModalFooter)\n    ) {\n      return child;\n    } else if (__DEV__) {\n      throwBladeError({\n        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',\n        moduleName: 'Modal',\n      });\n    }\n    return null;\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.subtle\"\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {validChildren}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","componentZIndices","modal","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","validChildren","Children","map","child","isValidAllowedChildren","MetaConstants","ModalHeader","ModalBody","ModalFooter","throwBladeError","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}

package/build/lib/web/production/components/Modal/ModalHeader.web.js

@@ -1,5 +1,4 @@
 import { useModalContext } from './ModalContext.js';
-import { modalHighestZIndex } from './modalTokens.js';
 import '../../utils/index.js';
 import { BaseHeader } from '../BaseHeaderFooter/BaseHeader.js';
 import '../Box/BaseBox/index.js';
@@ -8,6 +7,7 @@ import '../Button/IconButton/index.js';
 import '../Icons/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
 import { jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
@@ -40,7 +40,7 @@ var _ModalHeader = function _ModalHeader(_ref) {
     flexShrink: 0,
     backgroundColor: "popup.background.subtle",
     borderRadius: "max",
-    zIndex: modalHighestZIndex,
+    zIndex: componentZIndices.modal,
     children: /*#__PURE__*/jsx(IconButton, {
       ref: defaultInitialFocusRef,
       size: "large",

package/build/lib/web/production/components/Modal/ModalHeader.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport { modalHighestZIndex } from './modalTokens';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor=\"popup.background.subtle\"\n      borderRadius=\"max\"\n      zIndex={modalHighestZIndex}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: MetaConstants.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","borderRadius","zIndex","modalHighestZIndex","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAkBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;EAErC,IAAMC,aAAa,GAAG,EAAEP,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOK,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,YAAY,EAAC,KAAK;AAClBC,IAAAA,MAAM,EAAEC,kBAAmB;IAAAC,QAAA,eAE3BjB,GAAA,CAACkB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAErB,sBAAuB;AAC5BY,MAAAA,IAAI,EAAC,OAAO;AACZU,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAE1B,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVG,GAAA,CAACwB,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7CnC,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzBmC,IAAAA,cAAc,EAAE9B,sBAAuB;AACvC+B,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAEjC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAM8B,WAAW,gBAAGI,wBAAwB,CAAC3C,YAAY,EAAE;EACzD4C,WAAW,EAAEN,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor=\"popup.background.subtle\"\n      borderRadius=\"max\"\n      zIndex={componentZIndices.modal}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: MetaConstants.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","borderRadius","zIndex","componentZIndices","modal","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAkBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;EAErC,IAAMC,aAAa,GAAG,EAAEP,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOK,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,YAAY,EAAC,KAAK;IAClBC,MAAM,EAAEC,iBAAiB,CAACC,KAAM;IAAAC,QAAA,eAEhClB,GAAA,CAACmB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAEtB,sBAAuB;AAC5BY,MAAAA,IAAI,EAAC,OAAO;AACZW,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAE3B,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVG,GAAA,CAACyB,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7CpC,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzBoC,IAAAA,cAAc,EAAE/B,sBAAuB;AACvCgC,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAElC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAM+B,WAAW,gBAAGI,wBAAwB,CAAC5C,YAAY,EAAE;EACzD6C,WAAW,EAAEN,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}

package/build/lib/web/production/components/Modal/modalTokens.js

@@ -11,7 +11,6 @@ var modalMaxHeight = '80vh';
 var modalResponsiveScreenGap = size[48];
 var modalBorderRadius = 'large';
 var scrollOverlayHeight = size[56];
-var modalHighestZIndex = 1000;
 
-export { modalBorderRadius, modalHighestZIndex, modalMaxHeight, modalMaxWidth, modalMinWidth, modalResponsiveScreenGap, scrollOverlayHeight };
+export { modalBorderRadius, modalMaxHeight, modalMaxWidth, modalMinWidth, modalResponsiveScreenGap, scrollOverlayHeight };
 //# sourceMappingURL=modalTokens.js.map

package/build/lib/web/production/components/Modal/modalTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalTokens.js","sources":["../../../../../../src/components/Modal/modalTokens.ts"],"sourcesContent":["import type { ModalProps } from './Modal';\nimport { size } from '~tokens/global';\nimport type { Border, Size } from '~tokens/global';\n\nconst modalMaxWidth: Record<NonNullable<ModalProps['size']>, Size[keyof Size]> = {\n  small: size[400],\n  medium: size[760],\n  large: size[1024],\n};\n\nconst modalMinWidth = 320;\n\nconst modalMaxHeight = '80vh';\n\nconst modalResponsiveScreenGap: Size[keyof Size] = size[48];\n\nconst modalBorderRadius: keyof Border['radius'] = 'large';\n\nconst scrollOverlayHeight: Size[keyof Size] = size[56];\n\nconst modalHighestZIndex = 1000;\n\nexport {\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n  modalBorderRadius,\n  modalMaxHeight,\n  scrollOverlayHeight,\n  modalHighestZIndex,\n};\n"],"names":["modalMaxWidth","small","size","medium","large","modalMinWidth","modalMaxHeight","modalResponsiveScreenGap","modalBorderRadius","scrollOverlayHeight","modalHighestZIndex"],"mappings":";;;AAIA,IAAMA,aAAwE,GAAG;AAC/EC,EAAAA,KAAK,EAAEC,IAAI,CAAC,GAAG,CAAC;AAChBC,EAAAA,MAAM,EAAED,IAAI,CAAC,GAAG,CAAC;EACjBE,KAAK,EAAEF,IAAI,CAAC,IAAI,CAAA;AAClB,EAAC;AAEKG,IAAAA,aAAa,GAAG,IAAG;AAEnBC,IAAAA,cAAc,GAAG,OAAM;AAE7B,IAAMC,wBAA0C,GAAGL,IAAI,CAAC,EAAE,EAAC;AAErDM,IAAAA,iBAAyC,GAAG,QAAO;AAEzD,IAAMC,mBAAqC,GAAGP,IAAI,CAAC,EAAE,EAAC;AAEhDQ,IAAAA,kBAAkB,GAAG;;;;"}
+{"version":3,"file":"modalTokens.js","sources":["../../../../../../src/components/Modal/modalTokens.ts"],"sourcesContent":["import type { ModalProps } from './Modal';\nimport { size } from '~tokens/global';\nimport type { Border, Size } from '~tokens/global';\n\nconst modalMaxWidth: Record<NonNullable<ModalProps['size']>, Size[keyof Size]> = {\n  small: size[400],\n  medium: size[760],\n  large: size[1024],\n};\n\nconst modalMinWidth = 320;\n\nconst modalMaxHeight = '80vh';\n\nconst modalResponsiveScreenGap: Size[keyof Size] = size[48];\n\nconst modalBorderRadius: keyof Border['radius'] = 'large';\n\nconst scrollOverlayHeight: Size[keyof Size] = size[56];\n\nexport {\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n  modalBorderRadius,\n  modalMaxHeight,\n  scrollOverlayHeight,\n};\n"],"names":["modalMaxWidth","small","size","medium","large","modalMinWidth","modalMaxHeight","modalResponsiveScreenGap","modalBorderRadius","scrollOverlayHeight"],"mappings":";;;AAIA,IAAMA,aAAwE,GAAG;AAC/EC,EAAAA,KAAK,EAAEC,IAAI,CAAC,GAAG,CAAC;AAChBC,EAAAA,MAAM,EAAED,IAAI,CAAC,GAAG,CAAC;EACjBE,KAAK,EAAEF,IAAI,CAAC,IAAI,CAAA;AAClB,EAAC;AAEKG,IAAAA,aAAa,GAAG,IAAG;AAEnBC,IAAAA,cAAc,GAAG,OAAM;AAE7B,IAAMC,wBAA0C,GAAGL,IAAI,CAAC,EAAE,EAAC;AAErDM,IAAAA,iBAAyC,GAAG,QAAO;AAEzD,IAAMC,mBAAqC,GAAGP,IAAI,CAAC,EAAE;;;;"}

package/build/lib/web/production/components/Popover/Popover.web.js

@@ -3,7 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFloating, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useClick, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import React__default from 'react';
 import { PopoverContent } from './PopoverContent.js';
-import { popoverZIndex, ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
+import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
 import { PopoverContext } from './PopoverContext.js';
 import '../BladeProvider/index.js';
 import '../Box/BaseBox/index.js';
@@ -16,6 +16,7 @@ import { useMergeRefs } from '../../utils/useMergeRefs.js';
 import '../../utils/makeAccessible/index.js';
 import { useId } from '../../utils/useId.js';
 import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { size } from '../../tokens/global/size.js';
@@ -37,7 +38,7 @@ var Popover = function Popover(_ref) {
     placement = _ref$placement === void 0 ? 'top' : _ref$placement,
     onOpenChange = _ref.onOpenChange,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? popoverZIndex : _ref$zIndex,
+    zIndex = _ref$zIndex === void 0 ? componentZIndices.popover : _ref$zIndex,
     isOpen = _ref.isOpen,
     defaultIsOpen = _ref.defaultIsOpen,
     initialFocusRef = _ref.initialFocusRef;

package/build/lib/web/production/components/Popover/Popover.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.web.js","sources":["../../../../../../src/components/Popover/Popover.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useFloating,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n  useClick,\n  useDismiss,\n  FloatingFocusManager,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { PopoverProps } from './types';\nimport { PopoverContent } from './PopoverContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH, popoverZIndex } from './constants';\nimport { PopoverContext } from './PopoverContext';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useControllableState } from '~utils/useControllable';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useId } from '~utils/useId';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\n\nconst Popover = ({\n  content,\n  title,\n  titleLeading,\n  footer,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = popoverZIndex,\n  isOpen,\n  defaultIsOpen,\n  initialFocusRef,\n}: PopoverProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n  const titleId = useId('popover-title');\n\n  const GAP = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const [controllableIsOpen, controllableSetIsOpen] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (isOpen) => onOpenChange?.({ isOpen }),\n  });\n\n  const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({\n    open: controllableIsOpen,\n    onOpenChange: (isOpen) => controllableSetIsOpen(() => isOpen),\n    placement,\n    strategy: 'fixed',\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP, fallbackAxisSideDirection: 'end' }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? GAP + ARROW_HEIGHT : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const close = React.useCallback(() => {\n    controllableSetIsOpen(() => false);\n  }, [controllableSetIsOpen]);\n\n  // we need to animate from the offset of the computed placement\n  // because placement can change dynamically based on available space\n  const [computedSide] = getFloatingPlacementParts(computedPlacement);\n  const computedIsHorizontal = computedSide === 'left' || computedSide === 'right';\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: {\n      opacity: 0,\n      transform: `translate${computedIsHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  // remove click handler if popover is controlled\n  const isControlled = isOpen !== undefined;\n  const click = useClick(context, { enabled: !isControlled });\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergeRefs(refs.setReference, triggerRef);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      close,\n      defaultInitialFocusRef,\n      titleId,\n    };\n  }, [close, titleId]);\n\n  // Inject aria attributes to trigger\n  // Doing it this way instead of makeAccessible()\n  // because with makeAccessible we will need to make sure aria-controls, aria-expanded etc\n  // are exposed from the trigger component prop, which we cannot ensure\n  React.useLayoutEffect(() => {\n    if (!triggerRef.current) return;\n\n    const props = getReferenceProps() as Record<string, string>;\n    for (const key of Object.keys(props)) {\n      if (key.startsWith('aria-')) {\n        triggerRef.current.setAttribute(key, props[key]);\n      }\n    }\n  }, [getReferenceProps, triggerRef]);\n\n  return (\n    <PopoverContext.Provider value={contextValue}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ref: mergedRef,\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <FloatingFocusManager\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n            guards={true}\n          >\n            <BaseBox\n              ref={refs.setFloating}\n              style={floatingStyles}\n              // TODO: Tokenize zIndex values\n              zIndex={zIndex}\n              {...getFloatingProps()}\n              {...metaAttribute({ name: MetaConstants.Popover })}\n              {...makeAccessible({ labelledBy: titleId })}\n            >\n              <PopoverContent\n                title={title}\n                titleLeading={titleLeading}\n                footer={footer}\n                style={styles}\n                arrow={\n                  <PopupArrow\n                    ref={arrowRef}\n                    context={context}\n                    width={ARROW_WIDTH}\n                    height={ARROW_HEIGHT}\n                    fillColor={theme.colors.popup.background.subtle}\n                    strokeColor={theme.colors.popup.border.subtle}\n                  />\n                }\n              >\n                {content}\n              </PopoverContent>\n            </BaseBox>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </PopoverContext.Provider>\n  );\n};\n\nexport { Popover };\n"],"names":["Popover","_ref","content","title","titleLeading","footer","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","popoverZIndex","isOpen","defaultIsOpen","initialFocusRef","_useTheme","useTheme","theme","defaultInitialFocusRef","React","useRef","arrowRef","titleId","useId","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","_slicedToArray","side","isHorizontal","isOppositeAxis","_useControllableState","useControllableState","value","defaultValue","onChange","_useControllableState2","controllableIsOpen","controllableSetIsOpen","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","fallbackAxisSideDirection","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","computedPlacement","close","useCallback","_getFloatingPlacement3","_getFloatingPlacement4","computedSide","computedIsHorizontal","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","isControlled","undefined","click","useClick","enabled","dismiss","useDismiss","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","triggerRef","mergedRef","useMergeRefs","setReference","contextValue","useMemo","useLayoutEffect","current","props","_i","_Object$keys","Object","keys","length","key","startsWith","setAttribute","_jsxs","PopoverContext","Provider","cloneElement","_objectSpread","ref","mergeProps","_jsx","FloatingPortal","FloatingFocusManager","initialFocus","modal","guards","BaseBox","setFloating","style","metaAttribute","name","MetaConstants","makeAccessible","labelledBy","PopoverContent","PopupArrow","width","height","fillColor","colors","popup","background","subtle","strokeColor","border"],"mappings":"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"}
+{"version":3,"file":"Popover.web.js","sources":["../../../../../../src/components/Popover/Popover.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useFloating,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n  useClick,\n  useDismiss,\n  FloatingFocusManager,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { PopoverProps } from './types';\nimport { PopoverContent } from './PopoverContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from './constants';\nimport { PopoverContext } from './PopoverContext';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useControllableState } from '~utils/useControllable';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useId } from '~utils/useId';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst Popover = ({\n  content,\n  title,\n  titleLeading,\n  footer,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.popover,\n  isOpen,\n  defaultIsOpen,\n  initialFocusRef,\n}: PopoverProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n  const titleId = useId('popover-title');\n\n  const GAP = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const [controllableIsOpen, controllableSetIsOpen] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (isOpen) => onOpenChange?.({ isOpen }),\n  });\n\n  const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({\n    open: controllableIsOpen,\n    onOpenChange: (isOpen) => controllableSetIsOpen(() => isOpen),\n    placement,\n    strategy: 'fixed',\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP, fallbackAxisSideDirection: 'end' }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? GAP + ARROW_HEIGHT : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const close = React.useCallback(() => {\n    controllableSetIsOpen(() => false);\n  }, [controllableSetIsOpen]);\n\n  // we need to animate from the offset of the computed placement\n  // because placement can change dynamically based on available space\n  const [computedSide] = getFloatingPlacementParts(computedPlacement);\n  const computedIsHorizontal = computedSide === 'left' || computedSide === 'right';\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: {\n      opacity: 0,\n      transform: `translate${computedIsHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  // remove click handler if popover is controlled\n  const isControlled = isOpen !== undefined;\n  const click = useClick(context, { enabled: !isControlled });\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergeRefs(refs.setReference, triggerRef);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      close,\n      defaultInitialFocusRef,\n      titleId,\n    };\n  }, [close, titleId]);\n\n  // Inject aria attributes to trigger\n  // Doing it this way instead of makeAccessible()\n  // because with makeAccessible we will need to make sure aria-controls, aria-expanded etc\n  // are exposed from the trigger component prop, which we cannot ensure\n  React.useLayoutEffect(() => {\n    if (!triggerRef.current) return;\n\n    const props = getReferenceProps() as Record<string, string>;\n    for (const key of Object.keys(props)) {\n      if (key.startsWith('aria-')) {\n        triggerRef.current.setAttribute(key, props[key]);\n      }\n    }\n  }, [getReferenceProps, triggerRef]);\n\n  return (\n    <PopoverContext.Provider value={contextValue}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ref: mergedRef,\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <FloatingFocusManager\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n            guards={true}\n          >\n            <BaseBox\n              ref={refs.setFloating}\n              style={floatingStyles}\n              // TODO: Tokenize zIndex values\n              zIndex={zIndex}\n              {...getFloatingProps()}\n              {...metaAttribute({ name: MetaConstants.Popover })}\n              {...makeAccessible({ labelledBy: titleId })}\n            >\n              <PopoverContent\n                title={title}\n                titleLeading={titleLeading}\n                footer={footer}\n                style={styles}\n                arrow={\n                  <PopupArrow\n                    ref={arrowRef}\n                    context={context}\n                    width={ARROW_WIDTH}\n                    height={ARROW_HEIGHT}\n                    fillColor={theme.colors.popup.background.subtle}\n                    strokeColor={theme.colors.popup.border.subtle}\n                  />\n                }\n              >\n                {content}\n              </PopoverContent>\n            </BaseBox>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </PopoverContext.Provider>\n  );\n};\n\nexport { Popover };\n"],"names":["Popover","_ref","content","title","titleLeading","footer","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","popover","isOpen","defaultIsOpen","initialFocusRef","_useTheme","useTheme","theme","defaultInitialFocusRef","React","useRef","arrowRef","titleId","useId","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","_slicedToArray","side","isHorizontal","isOppositeAxis","_useControllableState","useControllableState","value","defaultValue","onChange","_useControllableState2","controllableIsOpen","controllableSetIsOpen","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","fallbackAxisSideDirection","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","computedPlacement","close","useCallback","_getFloatingPlacement3","_getFloatingPlacement4","computedSide","computedIsHorizontal","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","isControlled","undefined","click","useClick","enabled","dismiss","useDismiss","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","triggerRef","mergedRef","useMergeRefs","setReference","contextValue","useMemo","useLayoutEffect","current","props","_i","_Object$keys","Object","keys","length","key","startsWith","setAttribute","_jsxs","PopoverContext","Provider","cloneElement","_objectSpread","ref","mergeProps","_jsx","FloatingPortal","FloatingFocusManager","initialFocus","modal","guards","BaseBox","setFloating","style","metaAttribute","name","MetaConstants","makeAccessible","labelledBy","PopoverContent","PopupArrow","width","height","fillColor","colors","popup","background","subtle","strokeColor","border"],"mappings":"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"}

package/build/lib/web/production/components/Popover/constants.js

@@ -1,6 +1,5 @@
 var ARROW_WIDTH = 14;
 var ARROW_HEIGHT = 7;
-var popoverZIndex = 1100;
 
-export { ARROW_HEIGHT, ARROW_WIDTH, popoverZIndex };
+export { ARROW_HEIGHT, ARROW_WIDTH };
 //# sourceMappingURL=constants.js.map

package/build/lib/web/production/components/Popover/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Popover/constants.ts"],"sourcesContent":["export const ARROW_WIDTH = 14;\nexport const ARROW_HEIGHT = 7;\nexport const popoverZIndex = 1100;\n"],"names":["ARROW_WIDTH","ARROW_HEIGHT","popoverZIndex"],"mappings":"AAAO,IAAMA,WAAW,GAAG,GAAE;AACtB,IAAMC,YAAY,GAAG,EAAC;AACtB,IAAMC,aAAa,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Popover/constants.ts"],"sourcesContent":["export const ARROW_WIDTH = 14;\nexport const ARROW_HEIGHT = 7;\n"],"names":["ARROW_WIDTH","ARROW_HEIGHT"],"mappings":"AAAO,IAAMA,WAAW,GAAG,GAAE;AACtB,IAAMC,YAAY,GAAG;;;;"}

package/build/lib/web/production/components/SpotlightPopoverTour/TourMask.web.js

@@ -3,13 +3,13 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import usePresence from 'use-presence';
-import { tourMaskZIndex } from './tourTokens.js';
 import '../BladeProvider/index.js';
 import { useWindowSize } from '../../utils/useWindowSize.js';
 import '../../utils/index.js';
 import '../../utils/makeMotionTime/index.web.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
@@ -78,7 +78,7 @@ var absoluteFill = {
   left: 0,
   bottom: 0,
   right: 0,
-  zIndex: tourMaskZIndex
+  zIndex: componentZIndices.tourMask
 };
 var _SpotlightPopoverTourMask = function _SpotlightPopoverTourMask(_ref4) {
   var padding = _ref4.padding,

package/build/lib/web/production/components/SpotlightPopoverTour/TourMask.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourMask.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourMask.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\nimport React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport usePresence from 'use-presence';\nimport type { SpotlightPopoverTourMaskRect } from './types';\nimport { tourMaskZIndex } from './tourTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport { useWindowSize } from '~utils/useWindowSize';\nimport { makeSpace } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\nconst scaleIn = keyframes`\n  from {\n    fill-opacity: 0;\n  }\n  to {\n    fill-opacity: 1;\n  }\n`;\nconst fadeOut = keyframes`\n  from {\n    fill-opacity: 1;\n  }\n  to {\n    fill-opacity: 0;\n  }\n`;\n\nconst pulsingAnimation = keyframes`\n  0% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst AnimatedFade = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) =>\n    animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `,\n);\n\nconst StyledPlusing = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) => {\n    return animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `;\n  },\n);\n\ntype FadeRectProps = React.ComponentProps<'rect'> & {\n  show: boolean;\n};\nconst FadeRect = React.memo(\n  ({ show, children, ...rest }: FadeRectProps): React.ReactElement => {\n    const { theme } = useTheme();\n\n    const duration = theme.motion.duration.gentle;\n    const enter = css`\n      animation: ${scaleIn} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.entrance.effective as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const exit = css`\n      animation: ${fadeOut} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.exit.effective as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const { isVisible } = usePresence(Boolean(show), {\n      transitionDuration: duration,\n      initialEnter: false,\n    });\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <AnimatedFade animationType={isVisible ? enter : exit} {...rest}>\n        {children}\n      </AnimatedFade>\n    );\n  },\n);\n\nconst PulsingRect = React.memo(\n  (props: React.ComponentProps<'rect'>): React.ReactElement => {\n    const pulsing = css`\n      animation: ${pulsingAnimation} 2s;\n      animation-iteration-count: infinite;\n      animation-direction: alternate;\n    `;\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <StyledPlusing animationType={pulsing} {...props} />\n    );\n  },\n);\n\ntype SpotlightPopoverTourMaskProps = {\n  padding: number;\n  size: SpotlightPopoverTourMaskRect;\n  isTransitioning: boolean;\n};\n\nconst absoluteFill = {\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  zIndex: tourMaskZIndex,\n} as const;\n\nconst _SpotlightPopoverTourMask = ({\n  padding,\n  size,\n  isTransitioning,\n}: SpotlightPopoverTourMaskProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { width: windowWidth, height: windowHeight } = useWindowSize();\n\n  const width = size.width + padding;\n  const height = size.height + padding;\n  const x = size.x - (width - size.width) / 2;\n  const y = size.y - (height - size.height) / 2;\n\n  const borderWidth = theme.spacing[1];\n  const borderRadius = theme.spacing[2];\n\n  const isSizeZero = size.width === 0 || size.height === 0;\n\n  return (\n    <svg\n      style={absoluteFill}\n      viewBox={`0 0 ${windowWidth} ${windowHeight}`}\n      fill=\"none\"\n      stroke=\"none\"\n      {...metaAttribute({ name: MetaConstants.TourMask })}\n    >\n      <PulsingRect\n        x={x + borderWidth / 2}\n        y={y + borderWidth / 2}\n        width={width - borderWidth}\n        height={height - borderWidth}\n        stroke={theme.colors.surface.background.primary.intense}\n        strokeWidth={makeSpace(borderWidth)}\n        rx={borderRadius - 1}\n        ry={borderRadius - 1}\n        fill=\"transparent\"\n        opacity={isSizeZero ? 0 : 1}\n      />\n\n      <mask id=\"tour-mask\" x={0} y={0} height=\"100%\" width=\"100%\" stroke=\"none\">\n        <rect height=\"100%\" width=\"100%\" fill=\"#fff\" />\n        {!isSizeZero && (\n          <FadeRect\n            show={!isTransitioning}\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            rx={borderRadius}\n            ry={borderRadius}\n            fill=\"#000\"\n          />\n        )}\n      </mask>\n      <rect\n        height=\"100%\"\n        width=\"100%\"\n        mask=\"url(#tour-mask)\"\n        fill={theme.colors.overlay.background.subtle}\n      />\n    </svg>\n  );\n};\n\nconst SpotlightPopoverTourMask = assignWithoutSideEffects(React.memo(_SpotlightPopoverTourMask), {\n  displayName: 'TourMask',\n});\nexport { SpotlightPopoverTourMask };\n"],"names":["scaleIn","keyframes","fadeOut","pulsingAnimation","AnimatedFade","styled","rect","withConfig","displayName","componentId","_ref","animationType","css","StyledPlusing","_ref2","FadeRect","React","memo","_ref3","show","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","duration","motion","gentle","enter","makeMotionTime","easing","entrance","effective","exit","_usePresence","usePresence","Boolean","transitionDuration","initialEnter","isVisible","_jsx","_objectSpread","PulsingRect","props","pulsing","absoluteFill","position","top","left","bottom","right","zIndex","tourMaskZIndex","_SpotlightPopoverTourMask","_ref4","padding","size","isTransitioning","_useTheme2","_useWindowSize","useWindowSize","windowWidth","width","windowHeight","height","x","y","borderWidth","spacing","borderRadius","isSizeZero","_jsxs","style","viewBox","concat","fill","stroke","metaAttribute","name","MetaConstants","TourMask","colors","surface","background","primary","intense","strokeWidth","makeSpace","rx","ry","opacity","id","mask","overlay","subtle","SpotlightPopoverTourMask","assignWithoutSideEffects"],"mappings":"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"}
+{"version":3,"file":"TourMask.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourMask.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\nimport React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport usePresence from 'use-presence';\nimport type { SpotlightPopoverTourMaskRect } from './types';\nimport { useTheme } from '~components/BladeProvider';\nimport { useWindowSize } from '~utils/useWindowSize';\nimport { makeSpace } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst scaleIn = keyframes`\n  from {\n    fill-opacity: 0;\n  }\n  to {\n    fill-opacity: 1;\n  }\n`;\nconst fadeOut = keyframes`\n  from {\n    fill-opacity: 1;\n  }\n  to {\n    fill-opacity: 0;\n  }\n`;\n\nconst pulsingAnimation = keyframes`\n  0% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst AnimatedFade = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) =>\n    animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `,\n);\n\nconst StyledPlusing = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(\n  ({ animationType }) => {\n    return animationType === null\n      ? ''\n      : css`\n          ${animationType}\n        `;\n  },\n);\n\ntype FadeRectProps = React.ComponentProps<'rect'> & {\n  show: boolean;\n};\nconst FadeRect = React.memo(\n  ({ show, children, ...rest }: FadeRectProps): React.ReactElement => {\n    const { theme } = useTheme();\n\n    const duration = theme.motion.duration.gentle;\n    const enter = css`\n      animation: ${scaleIn} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.entrance.effective as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const exit = css`\n      animation: ${fadeOut} ${makeMotionTime(duration)}\n        ${(theme.motion.easing.exit.effective as unknown) as string};\n      animation-fill-mode: forwards;\n    `;\n\n    const { isVisible } = usePresence(Boolean(show), {\n      transitionDuration: duration,\n      initialEnter: false,\n    });\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <AnimatedFade animationType={isVisible ? enter : exit} {...rest}>\n        {children}\n      </AnimatedFade>\n    );\n  },\n);\n\nconst PulsingRect = React.memo(\n  (props: React.ComponentProps<'rect'>): React.ReactElement => {\n    const pulsing = css`\n      animation: ${pulsingAnimation} 2s;\n      animation-iteration-count: infinite;\n      animation-direction: alternate;\n    `;\n\n    return (\n      // @ts-expect-error styled compoennt types are different from react types\n      <StyledPlusing animationType={pulsing} {...props} />\n    );\n  },\n);\n\ntype SpotlightPopoverTourMaskProps = {\n  padding: number;\n  size: SpotlightPopoverTourMaskRect;\n  isTransitioning: boolean;\n};\n\nconst absoluteFill = {\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  zIndex: componentZIndices.tourMask,\n} as const;\n\nconst _SpotlightPopoverTourMask = ({\n  padding,\n  size,\n  isTransitioning,\n}: SpotlightPopoverTourMaskProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { width: windowWidth, height: windowHeight } = useWindowSize();\n\n  const width = size.width + padding;\n  const height = size.height + padding;\n  const x = size.x - (width - size.width) / 2;\n  const y = size.y - (height - size.height) / 2;\n\n  const borderWidth = theme.spacing[1];\n  const borderRadius = theme.spacing[2];\n\n  const isSizeZero = size.width === 0 || size.height === 0;\n\n  return (\n    <svg\n      style={absoluteFill}\n      viewBox={`0 0 ${windowWidth} ${windowHeight}`}\n      fill=\"none\"\n      stroke=\"none\"\n      {...metaAttribute({ name: MetaConstants.TourMask })}\n    >\n      <PulsingRect\n        x={x + borderWidth / 2}\n        y={y + borderWidth / 2}\n        width={width - borderWidth}\n        height={height - borderWidth}\n        stroke={theme.colors.surface.background.primary.intense}\n        strokeWidth={makeSpace(borderWidth)}\n        rx={borderRadius - 1}\n        ry={borderRadius - 1}\n        fill=\"transparent\"\n        opacity={isSizeZero ? 0 : 1}\n      />\n\n      <mask id=\"tour-mask\" x={0} y={0} height=\"100%\" width=\"100%\" stroke=\"none\">\n        <rect height=\"100%\" width=\"100%\" fill=\"#fff\" />\n        {!isSizeZero && (\n          <FadeRect\n            show={!isTransitioning}\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            rx={borderRadius}\n            ry={borderRadius}\n            fill=\"#000\"\n          />\n        )}\n      </mask>\n      <rect\n        height=\"100%\"\n        width=\"100%\"\n        mask=\"url(#tour-mask)\"\n        fill={theme.colors.overlay.background.subtle}\n      />\n    </svg>\n  );\n};\n\nconst SpotlightPopoverTourMask = assignWithoutSideEffects(React.memo(_SpotlightPopoverTourMask), {\n  displayName: 'TourMask',\n});\nexport { SpotlightPopoverTourMask };\n"],"names":["scaleIn","keyframes","fadeOut","pulsingAnimation","AnimatedFade","styled","rect","withConfig","displayName","componentId","_ref","animationType","css","StyledPlusing","_ref2","FadeRect","React","memo","_ref3","show","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","duration","motion","gentle","enter","makeMotionTime","easing","entrance","effective","exit","_usePresence","usePresence","Boolean","transitionDuration","initialEnter","isVisible","_jsx","_objectSpread","PulsingRect","props","pulsing","absoluteFill","position","top","left","bottom","right","zIndex","componentZIndices","tourMask","_SpotlightPopoverTourMask","_ref4","padding","size","isTransitioning","_useTheme2","_useWindowSize","useWindowSize","windowWidth","width","windowHeight","height","x","y","borderWidth","spacing","borderRadius","isSizeZero","_jsxs","style","viewBox","concat","fill","stroke","metaAttribute","name","MetaConstants","TourMask","colors","surface","background","primary","intense","strokeWidth","makeSpace","rx","ry","opacity","id","mask","overlay","subtle","SpotlightPopoverTourMask","assignWithoutSideEffects"],"mappings":"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"}

package/build/lib/web/production/components/SpotlightPopoverTour/TourPopover.web.js

@@ -3,7 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFloating, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useClick, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import React__default from 'react';
 import { PopoverContent } from '../Popover/PopoverContent.js';
-import { popoverZIndex, ARROW_HEIGHT, ARROW_WIDTH } from '../Popover/constants.js';
+import { ARROW_HEIGHT, ARROW_WIDTH } from '../Popover/constants.js';
 import { PopoverContext } from '../Popover/PopoverContext.js';
 import { transitionDelay } from './tourTokens.js';
 import '../BladeProvider/index.js';
@@ -15,6 +15,7 @@ import '../PopupArrow/index.js';
 import '../../utils/makeAccessible/index.js';
 import { useId } from '../../utils/useId.js';
 import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { size } from '../../tokens/global/size.js';
@@ -37,7 +38,7 @@ var TourPopover = function TourPopover(_ref) {
     placement = _ref$placement === void 0 ? 'top' : _ref$placement,
     onOpenChange = _ref.onOpenChange,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? popoverZIndex : _ref$zIndex,
+    zIndex = _ref$zIndex === void 0 ? componentZIndices.popover : _ref$zIndex,
     isOpen = _ref.isOpen,
     defaultIsOpen = _ref.defaultIsOpen,
     isTransitioning = _ref.isTransitioning;

package/build/lib/web/production/components/SpotlightPopoverTour/TourPopover.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourPopover.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourPopover.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\n/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useFloating,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n  useClick,\n  FloatingFocusManager,\n} from '@floating-ui/react';\nimport React from 'react';\nimport { PopoverContent } from '../Popover/PopoverContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH, popoverZIndex } from '../Popover/constants';\nimport { PopoverContext } from '../Popover/PopoverContext';\nimport { transitionDelay } from './tourTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useControllableState } from '~utils/useControllable';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useId } from '~utils/useId';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport type { PopoverProps } from '~components/Popover';\n\ntype TourPopoverProps = Omit<PopoverProps, 'children' | 'initialFocusRef'> & {\n  attachTo: React.RefObject<HTMLElement> | undefined;\n  isTransitioning: boolean;\n};\n\n// TODO: Refactor out Popover/FloatingUI logic to a reusable hook/component later on\nconst TourPopover = ({\n  attachTo,\n  content,\n  title,\n  titleLeading,\n  footer,\n  placement = 'top',\n  onOpenChange,\n  zIndex = popoverZIndex,\n  isOpen,\n  defaultIsOpen,\n  isTransitioning,\n}: TourPopoverProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n  const titleId = useId('popover-title');\n\n  const GAP = theme.spacing[4];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const [controllableIsOpen, controllableSetIsOpen] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (isOpen) => onOpenChange?.({ isOpen }),\n  });\n\n  const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({\n    open: controllableIsOpen,\n    onOpenChange: (isOpen) => controllableSetIsOpen(() => isOpen),\n    placement,\n    strategy: 'fixed',\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP, fallbackAxisSideDirection: 'end' }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? GAP + ARROW_HEIGHT : ARROW_WIDTH,\n      }),\n    ],\n    transform: true,\n    whileElementsMounted: autoUpdate,\n  });\n\n  const close = React.useCallback(() => {\n    controllableSetIsOpen(() => false);\n  }, [controllableSetIsOpen]);\n\n  // we need to animate from the offset of the computed placement\n  // because placement can change dynamically based on available space\n  const [computedSide] = getFloatingPlacementParts(computedPlacement);\n  const computedIsHorizontal = computedSide === 'left' || computedSide === 'right';\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: {\n      open: transitionDelay,\n      close: theme.motion.duration.xquick,\n    },\n    initial: {\n      opacity: 0,\n      transform: `translate${computedIsHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  // remove click handler if popover is controlled\n  const isControlled = isOpen !== undefined;\n  const click = useClick(context, { enabled: !isControlled });\n  const role = useRole(context);\n\n  const { getFloatingProps } = useInteractions([click, role]);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      close,\n      defaultInitialFocusRef,\n      titleId,\n    };\n  }, [close, titleId]);\n\n  // https://github.com/floating-ui/floating-ui/discussions/2352#discussioncomment-6044834\n  React.useLayoutEffect(() => {\n    window.setTimeout(() => {\n      if (!attachTo) return;\n      refs.setReference(attachTo.current);\n      refs.setPositionReference(attachTo.current);\n    });\n  }, [attachTo, refs, isOpen]);\n\n  return (\n    <PopoverContext.Provider value={contextValue}>\n      <FloatingPortal>\n        <FloatingFocusManager\n          // TODO: check if isTransitioning is enough since scrolling can take longer\n          disabled={isOpen === false || !isMounted || isTransitioning}\n          initialFocus={defaultInitialFocusRef}\n          context={context}\n          modal={true}\n          guards={true}\n        >\n          {isMounted ? (\n            <BaseBox\n              ref={refs.setFloating}\n              style={{ ...floatingStyles, pointerEvents: isMounted ? 'auto' : 'none' }}\n              // TODO: Tokenize zIndex values\n              zIndex={zIndex}\n              {...getFloatingProps()}\n              {...metaAttribute({ name: MetaConstants.TourPopover })}\n              {...makeAccessible({ labelledBy: titleId })}\n            >\n              <PopoverContent\n                title={title}\n                titleLeading={titleLeading}\n                footer={footer}\n                style={styles}\n                arrow={\n                  <PopupArrow\n                    ref={arrowRef}\n                    context={context}\n                    width={ARROW_WIDTH}\n                    height={ARROW_HEIGHT}\n                    fillColor={theme.colors.popup.background.subtle}\n                    strokeColor={theme.colors.popup.border.subtle}\n                  />\n                }\n              >\n                {content}\n              </PopoverContent>\n            </BaseBox>\n          ) : (\n            <></>\n          )}\n        </FloatingFocusManager>\n      </FloatingPortal>\n    </PopoverContext.Provider>\n  );\n};\n\nexport { TourPopover };\n"],"names":["TourPopover","_ref","attachTo","content","title","titleLeading","footer","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","popoverZIndex","isOpen","defaultIsOpen","isTransitioning","_useTheme","useTheme","theme","defaultInitialFocusRef","React","useRef","arrowRef","titleId","useId","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","_slicedToArray","side","isHorizontal","isOppositeAxis","_useControllableState","useControllableState","value","defaultValue","onChange","_useControllableState2","controllableIsOpen","controllableSetIsOpen","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","fallbackAxisSideDirection","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","transform","whileElementsMounted","autoUpdate","refs","floatingStyles","context","computedPlacement","close","useCallback","_getFloatingPlacement3","_getFloatingPlacement4","computedSide","computedIsHorizontal","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","transitionDelay","motion","xquick","initial","opacity","concat","isMounted","styles","isControlled","undefined","click","useClick","enabled","role","useRole","_useInteractions","useInteractions","getFloatingProps","contextValue","useMemo","useLayoutEffect","window","setTimeout","setReference","current","setPositionReference","_jsx","PopoverContext","Provider","children","FloatingPortal","FloatingFocusManager","disabled","initialFocus","modal","guards","BaseBox","_objectSpread","ref","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","makeAccessible","labelledBy","PopoverContent","PopupArrow","width","height","fillColor","colors","popup","background","subtle","strokeColor","border","_Fragment"],"mappings":"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"}
+{"version":3,"file":"TourPopover.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourPopover.web.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-useless-fragment */\n/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useFloating,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n  useClick,\n  FloatingFocusManager,\n} from '@floating-ui/react';\nimport React from 'react';\nimport { PopoverContent } from '../Popover/PopoverContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from '../Popover/constants';\nimport { PopoverContext } from '../Popover/PopoverContext';\nimport { transitionDelay } from './tourTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useControllableState } from '~utils/useControllable';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useId } from '~utils/useId';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport type { PopoverProps } from '~components/Popover';\nimport { componentZIndices } from '~utils/componentZIndices';\n\ntype TourPopoverProps = Omit<PopoverProps, 'children' | 'initialFocusRef'> & {\n  attachTo: React.RefObject<HTMLElement> | undefined;\n  isTransitioning: boolean;\n};\n\n// TODO: Refactor out Popover/FloatingUI logic to a reusable hook/component later on\nconst TourPopover = ({\n  attachTo,\n  content,\n  title,\n  titleLeading,\n  footer,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.popover,\n  isOpen,\n  defaultIsOpen,\n  isTransitioning,\n}: TourPopoverProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n  const titleId = useId('popover-title');\n\n  const GAP = theme.spacing[4];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const [controllableIsOpen, controllableSetIsOpen] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (isOpen) => onOpenChange?.({ isOpen }),\n  });\n\n  const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({\n    open: controllableIsOpen,\n    onOpenChange: (isOpen) => controllableSetIsOpen(() => isOpen),\n    placement,\n    strategy: 'fixed',\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP, fallbackAxisSideDirection: 'end' }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? GAP + ARROW_HEIGHT : ARROW_WIDTH,\n      }),\n    ],\n    transform: true,\n    whileElementsMounted: autoUpdate,\n  });\n\n  const close = React.useCallback(() => {\n    controllableSetIsOpen(() => false);\n  }, [controllableSetIsOpen]);\n\n  // we need to animate from the offset of the computed placement\n  // because placement can change dynamically based on available space\n  const [computedSide] = getFloatingPlacementParts(computedPlacement);\n  const computedIsHorizontal = computedSide === 'left' || computedSide === 'right';\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: {\n      open: transitionDelay,\n      close: theme.motion.duration.xquick,\n    },\n    initial: {\n      opacity: 0,\n      transform: `translate${computedIsHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  // remove click handler if popover is controlled\n  const isControlled = isOpen !== undefined;\n  const click = useClick(context, { enabled: !isControlled });\n  const role = useRole(context);\n\n  const { getFloatingProps } = useInteractions([click, role]);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      close,\n      defaultInitialFocusRef,\n      titleId,\n    };\n  }, [close, titleId]);\n\n  // https://github.com/floating-ui/floating-ui/discussions/2352#discussioncomment-6044834\n  React.useLayoutEffect(() => {\n    window.setTimeout(() => {\n      if (!attachTo) return;\n      refs.setReference(attachTo.current);\n      refs.setPositionReference(attachTo.current);\n    });\n  }, [attachTo, refs, isOpen]);\n\n  return (\n    <PopoverContext.Provider value={contextValue}>\n      <FloatingPortal>\n        <FloatingFocusManager\n          // TODO: check if isTransitioning is enough since scrolling can take longer\n          disabled={isOpen === false || !isMounted || isTransitioning}\n          initialFocus={defaultInitialFocusRef}\n          context={context}\n          modal={true}\n          guards={true}\n        >\n          {isMounted ? (\n            <BaseBox\n              ref={refs.setFloating}\n              style={{ ...floatingStyles, pointerEvents: isMounted ? 'auto' : 'none' }}\n              // TODO: Tokenize zIndex values\n              zIndex={zIndex}\n              {...getFloatingProps()}\n              {...metaAttribute({ name: MetaConstants.TourPopover })}\n              {...makeAccessible({ labelledBy: titleId })}\n            >\n              <PopoverContent\n                title={title}\n                titleLeading={titleLeading}\n                footer={footer}\n                style={styles}\n                arrow={\n                  <PopupArrow\n                    ref={arrowRef}\n                    context={context}\n                    width={ARROW_WIDTH}\n                    height={ARROW_HEIGHT}\n                    fillColor={theme.colors.popup.background.subtle}\n                    strokeColor={theme.colors.popup.border.subtle}\n                  />\n                }\n              >\n                {content}\n              </PopoverContent>\n            </BaseBox>\n          ) : (\n            <></>\n          )}\n        </FloatingFocusManager>\n      </FloatingPortal>\n    </PopoverContext.Provider>\n  );\n};\n\nexport { TourPopover };\n"],"names":["TourPopover","_ref","attachTo","content","title","titleLeading","footer","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","popover","isOpen","defaultIsOpen","isTransitioning","_useTheme","useTheme","theme","defaultInitialFocusRef","React","useRef","arrowRef","titleId","useId","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","_slicedToArray","side","isHorizontal","isOppositeAxis","_useControllableState","useControllableState","value","defaultValue","onChange","_useControllableState2","controllableIsOpen","controllableSetIsOpen","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","fallbackAxisSideDirection","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","transform","whileElementsMounted","autoUpdate","refs","floatingStyles","context","computedPlacement","close","useCallback","_getFloatingPlacement3","_getFloatingPlacement4","computedSide","computedIsHorizontal","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","transitionDelay","motion","xquick","initial","opacity","concat","isMounted","styles","isControlled","undefined","click","useClick","enabled","role","useRole","_useInteractions","useInteractions","getFloatingProps","contextValue","useMemo","useLayoutEffect","window","setTimeout","setReference","current","setPositionReference","_jsx","PopoverContext","Provider","children","FloatingPortal","FloatingFocusManager","disabled","initialFocus","modal","guards","BaseBox","_objectSpread","ref","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","makeAccessible","labelledBy","PopoverContent","PopupArrow","width","height","fillColor","colors","popup","background","subtle","strokeColor","border","_Fragment"],"mappings":"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"}

package/build/lib/web/production/components/SpotlightPopoverTour/tourTokens.js

@@ -1,10 +1,8 @@
-import { modalHighestZIndex } from '../Modal/modalTokens.js';
 import '../../tokens/global/index.js';
 import { motion } from '../../tokens/global/motion.js';
 
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 var transitionDelay = motion.duration.gentle;
-var tourMaskZIndex = modalHighestZIndex + 100;
 
-export { tourMaskZIndex, transitionDelay };
+export { transitionDelay };
 //# sourceMappingURL=tourTokens.js.map

package/build/lib/web/production/components/SpotlightPopoverTour/tourTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tourTokens.js","sources":["../../../../../../src/components/SpotlightPopoverTour/tourTokens.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { modalHighestZIndex } from '~components/Modal/modalTokens';\nimport { motion } from '~tokens/global';\n\nconst transitionDelay = motion.duration.gentle;\nconst tourMaskZIndex = modalHighestZIndex + 100;\n\nexport { transitionDelay, tourMaskZIndex };\n"],"names":["transitionDelay","motion","duration","gentle","tourMaskZIndex","modalHighestZIndex"],"mappings":";;;;AAAA;AAIA,IAAMA,eAAe,GAAGC,MAAM,CAACC,QAAQ,CAACC,OAAM;AAC9C,IAAMC,cAAc,GAAGC,kBAAkB,GAAG;;;;"}
+{"version":3,"file":"tourTokens.js","sources":["../../../../../../src/components/SpotlightPopoverTour/tourTokens.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { motion } from '~tokens/global';\n\nconst transitionDelay = motion.duration.gentle;\n\nexport { transitionDelay };\n"],"names":["transitionDelay","motion","duration","gentle"],"mappings":";;;AAAA;AAGA,IAAMA,eAAe,GAAGC,MAAM,CAACC,QAAQ,CAACC;;;;"}

package/build/lib/web/production/components/Tag/AnimatedTag.web.js

@@ -18,7 +18,7 @@ var AnimatedTagContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "AnimatedTagweb__AnimatedTagContainer",
   componentId: "sc-1ypkpkt-0"
 })(function (props) {
-  return css(["", ";display:inline-block;opacity:", ";max-width:", ";"], props.transition, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END));
+  return css(["", ";display:inline-block;opacity:", ";max-width:", ";flex-shrink:0;"], props.transition, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END));
 });
 var AnimatedTag = function AnimatedTag(_ref) {
   var children = _ref.children,

package/build/lib/web/production/components/Tag/AnimatedTag.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime, makeSize } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${makeSize(TAG_MAX_WIDTH_START)};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${makeSize(TAG_MAX_WIDTH_END)};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END)};\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","makeSize","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}
+{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime, makeSize } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${makeSize(TAG_MAX_WIDTH_START)};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${makeSize(TAG_MAX_WIDTH_END)};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END)};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","makeSize","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}

package/build/lib/web/production/components/Tag/Tag.js

@@ -108,6 +108,7 @@ var Tag = function Tag(_ref) {
       alignSelf: isReactNative() ? 'center' : undefined,
       flexDirection: "row",
       flexWrap: "nowrap",
+      flexShrink: 0,
       backgroundColor: backgroundColor,
       borderRadius: "max",
       padding: size$1 === 'medium' ? mediumPadding : largePadding,

package/build/lib/web/production/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box\n          display=\"flex\"\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          maxWidth={makeSize(globalSizeTokens['100'])}\n        >\n          <Text truncateAfterLines={1} marginRight=\"spacing.2\" color={textColor} size={assetSize}>\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","borderRadius","padding","Box","alignItems","color","marginRight","maxWidth","Text","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box\n          display=\"flex\"\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          maxWidth={makeSize(globalSizeTokens['100'])}\n        >\n          <Text truncateAfterLines={1} marginRight=\"spacing.2\" color={textColor} size={assetSize}>\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","withConfig","displayName","componentId","props","_isVirtuallyFocused","isReactNative","outline","concat","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","maxWidth","Text","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}