@razorpay/blade 11.3.1 → 11.4.0

package/build/lib/web/development/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/development/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/development/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/development/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/development/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/development/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/development/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/development/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/development/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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"}

package/build/lib/web/development/components/Tooltip/Tooltip.web.js

@@ -3,7 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFloating, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
 import React__default from 'react';
 import { TooltipContent } from './TooltipContent.js';
-import { tooltipZIndex, ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
+import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
 import { TooltipContext } from './TooltipContext.js';
 import '../BladeProvider/index.js';
 import '../Box/BaseBox/index.js';
@@ -14,6 +14,7 @@ import '../../utils/makeAccessible/index.js';
 import { mergeProps } from '../../utils/mergeProps.js';
 import '../PopupArrow/index.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';
@@ -33,7 +34,7 @@ var Tooltip = function Tooltip(_ref) {
     placement = _ref$placement === void 0 ? 'top' : _ref$placement,
     _onOpenChange = _ref.onOpenChange,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? tooltipZIndex : _ref$zIndex;
+    zIndex = _ref$zIndex === void 0 ? componentZIndices.tooltip : _ref$zIndex;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var id = useId();

package/build/lib/web/development/components/Tooltip/Tooltip.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.web.js","sources":["../../../../../../src/components/Tooltip/Tooltip.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useDelayGroup,\n  useDelayGroupContext,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { TooltipProps } from './types';\nimport { TooltipContent } from './TooltipContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH, tooltipZIndex } from './constants';\nimport { TooltipContext } from './TooltipContext';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useId } from '~utils/useId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\n\nconst Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = tooltipZIndex,\n}: TooltipProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const id = useId();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\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 { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    strategy: 'fixed',\n    onOpenChange: (open) => {\n      setIsOpen(open);\n      onOpenChange?.({ isOpen: open });\n    },\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? 0 : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\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${isHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  useDelayGroup(context, { id });\n  const { delay } = useDelayGroupContext();\n  const hover = useHover(context, {\n    delay,\n    move: false,\n  });\n  const focus = useFocus(context);\n  const role = useRole(context, { role: 'tooltip' });\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, hover, focus]);\n\n  return (\n    <TooltipContext.Provider value={true}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ref: refs.setReference,\n        ...makeAccessible({ label: content }),\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <BaseBox\n            ref={refs.setFloating}\n            style={floatingStyles}\n            pointerEvents=\"none\"\n            // TODO: Tokenize zIndex values\n            zIndex={zIndex}\n            {...getFloatingProps()}\n            {...metaAttribute({ name: MetaConstants.Tooltip })}\n          >\n            <TooltipContent\n              title={title}\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.intense}\n                  strokeColor={theme.colors.popup.border.intense}\n                />\n              }\n            >\n              {content}\n            </TooltipContent>\n          </BaseBox>\n        </FloatingPortal>\n      )}\n    </TooltipContext.Provider>\n  );\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","tooltipZIndex","_useTheme","useTheme","theme","id","useId","_React$useState","React","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","arrowRef","useRef","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","side","isHorizontal","isOppositeAxis","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","useDelayGroup","_useDelayGroupContext","useDelayGroupContext","delay","hover","useHover","move","focus","useFocus","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","_jsxs","TooltipContext","Provider","value","cloneElement","_objectSpread","ref","setReference","makeAccessible","label","mergeProps","props","_jsx","FloatingPortal","BaseBox","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","TooltipContent","PopupArrow","width","height","fillColor","colors","popup","background","intense","strokeColor","border"],"mappings":"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"}
+{"version":3,"file":"Tooltip.web.js","sources":["../../../../../../src/components/Tooltip/Tooltip.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useDelayGroup,\n  useDelayGroupContext,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { TooltipProps } from './types';\nimport { TooltipContent } from './TooltipContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from './constants';\nimport { TooltipContext } from './TooltipContext';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useId } from '~utils/useId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.tooltip,\n}: TooltipProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const id = useId();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\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 { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    strategy: 'fixed',\n    onOpenChange: (open) => {\n      setIsOpen(open);\n      onOpenChange?.({ isOpen: open });\n    },\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? 0 : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\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${isHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  useDelayGroup(context, { id });\n  const { delay } = useDelayGroupContext();\n  const hover = useHover(context, {\n    delay,\n    move: false,\n  });\n  const focus = useFocus(context);\n  const role = useRole(context, { role: 'tooltip' });\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, hover, focus]);\n\n  return (\n    <TooltipContext.Provider value={true}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ref: refs.setReference,\n        ...makeAccessible({ label: content }),\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <BaseBox\n            ref={refs.setFloating}\n            style={floatingStyles}\n            pointerEvents=\"none\"\n            // TODO: Tokenize zIndex values\n            zIndex={zIndex}\n            {...getFloatingProps()}\n            {...metaAttribute({ name: MetaConstants.Tooltip })}\n          >\n            <TooltipContent\n              title={title}\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.intense}\n                  strokeColor={theme.colors.popup.border.intense}\n                />\n              }\n            >\n              {content}\n            </TooltipContent>\n          </BaseBox>\n        </FloatingPortal>\n      )}\n    </TooltipContext.Provider>\n  );\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","tooltip","_useTheme","useTheme","theme","id","useId","_React$useState","React","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","arrowRef","useRef","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","side","isHorizontal","isOppositeAxis","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","useDelayGroup","_useDelayGroupContext","useDelayGroupContext","delay","hover","useHover","move","focus","useFocus","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","_jsxs","TooltipContext","Provider","value","cloneElement","_objectSpread","ref","setReference","makeAccessible","label","mergeProps","props","_jsx","FloatingPortal","BaseBox","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","TooltipContent","PopupArrow","width","height","fillColor","colors","popup","background","intense","strokeColor","border"],"mappings":"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"}

package/build/lib/web/development/components/Tooltip/constants.js

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

package/build/lib/web/development/components/Tooltip/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Tooltip/constants.ts"],"sourcesContent":["export const ARROW_WIDTH = 14;\nexport const ARROW_HEIGHT = 7;\nexport const tooltipZIndex = 1100;\n"],"names":["ARROW_WIDTH","ARROW_HEIGHT","tooltipZIndex"],"mappings":"AAAO,IAAMA,WAAW,GAAG,GAAE;AACtB,IAAMC,YAAY,GAAG,EAAC;AACtB,IAAMC,aAAa,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Tooltip/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/development/components/index.js

@@ -15,6 +15,7 @@ import './Chip/index.js';
 import './Collapsible/index.js';
 import './Counter/index.js';
 import './Divider/index.js';
+import './Drawer/index.js';
 import './Dropdown/index.js';
 import './Icons/index.js';
 import './Indicator/index.js';
@@ -75,6 +76,8 @@ export { CollapsibleButton } from './Collapsible/CollapsibleButton.js';
 export { CollapsibleBody } from './Collapsible/CollapsibleBody.js';
 export { Counter } from './Counter/Counter.js';
 export { Divider } from './Divider/Divider.js';
+export { Drawer } from './Drawer/Drawer.web.js';
+export { DrawerBody, DrawerHeader } from './Drawer/DrawerSubcomponents.web.js';
 export { Dropdown } from './Dropdown/Dropdown.js';
 export { DropdownOverlay } from './Dropdown/DropdownOverlay.web.js';
 export { DropdownButton } from './Dropdown/DropdownButton.js';

package/build/lib/web/development/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/development/utils/componentZIndices.js

@@ -0,0 +1,13 @@
+// TODO: Move these properly to tokens at some point
+var componentZIndices = {
+  bottomSheet: 100,
+  modal: 1000,
+  drawer: 1001,
+  dropdownOverlay: 1002,
+  tourMask: 1100,
+  popover: 1100,
+  tooltip: 1100
+};
+
+export { componentZIndices };
+//# sourceMappingURL=componentZIndices.js.map

package/build/lib/web/development/utils/componentZIndices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentZIndices.js","sources":["../../../../../src/utils/componentZIndices.ts"],"sourcesContent":["// TODO: Move these properly to tokens at some point\nexport const componentZIndices = {\n  bottomSheet: 100,\n  modal: 1000,\n  drawer: 1001,\n  dropdownOverlay: 1002,\n  tourMask: 1100,\n  popover: 1100,\n  tooltip: 1100,\n};\n"],"names":["componentZIndices","bottomSheet","modal","drawer","dropdownOverlay","tourMask","popover","tooltip"],"mappings":"AAAA;AACO,IAAMA,iBAAiB,GAAG;AAC/BC,EAAAA,WAAW,EAAE,GAAG;AAChBC,EAAAA,KAAK,EAAE,IAAI;AACXC,EAAAA,MAAM,EAAE,IAAI;AACZC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,QAAQ,EAAE,IAAI;AACdC,EAAAA,OAAO,EAAE,IAAI;AACbC,EAAAA,OAAO,EAAE,IAAA;AACX;;;;"}

package/build/lib/web/development/utils/lodashButBetter/get.js

@@ -6,7 +6,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 /**
  * @template TokenType token type generic
- * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`
+ * @description Tokenises objects to dot notation strings, eg: `surface.text.gray.normal`
  */
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

package/build/lib/web/development/utils/lodashButBetter/get.js.map

@@ -1 +1 @@
-{"version":3,"file":"get.js","sources":["../../../../../../src/utils/lodashButBetter/get.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */\nimport type { ElevationStyles } from '~tokens/global/elevation';\nimport type { EasingType } from '~tokens/global/motion';\n\n/**\n * @template TokenType token type generic\n * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`\n */\nexport type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = {\n  [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles\n    ? `${Extract<K, number | string>}`\n    : `${Extract<K, number | string>}.${TokenType[K] extends Record<\n        string,\n        string | number | boolean | EasingType<string>\n      >\n        ? Extract<keyof TokenType[K], number | string>\n        : DotNotationToken<TokenType[K]>}`;\n}[keyof TokenType];\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nfunction getIn<\n  T extends Record<string, any>,\n  K extends DotNotationToken<T>,\n  Default extends any = any\n>(obj: T, path: K, defaultValue?: Default): any {\n  if (!path) {\n    return defaultValue;\n  }\n\n  const keys = path.split('.');\n  let result = obj;\n\n  for (const key of keys) {\n    result = result?.[key];\n    if (result === undefined) {\n      return defaultValue;\n    }\n  }\n\n  return result !== undefined ? result : defaultValue;\n}\n\nexport default getIn;\n"],"names":["getIn","obj","path","defaultValue","keys","split","result","_iterator","_createForOfIteratorHelper","_step","s","n","done","_result","key","value","undefined","err","e","f"],"mappings":";;;AAAA;AACA;;AAIA;AACA;AACA;AACA;;AAYA;AACA,SAASA,KAAKA,CAIZC,GAAM,EAAEC,IAAO,EAAEC,YAAsB,EAAO;EAC9C,IAAI,CAACD,IAAI,EAAE;AACT,IAAA,OAAOC,YAAY,CAAA;AACrB,GAAA;AAEA,EAAA,IAAMC,IAAI,GAAGF,IAAI,CAACG,KAAK,CAAC,GAAG,CAAC,CAAA;EAC5B,IAAIC,MAAM,GAAGL,GAAG,CAAA;AAAC,EAAA,IAAAM,SAAA,GAAAC,0BAAA,CAECJ,IAAI,CAAA;IAAAK,KAAA,CAAA;AAAA,EAAA,IAAA;IAAtB,KAAAF,SAAA,CAAAG,CAAA,EAAAD,EAAAA,CAAAA,CAAAA,KAAA,GAAAF,SAAA,CAAAI,CAAA,EAAAC,EAAAA,IAAA,GAAwB;AAAA,MAAA,IAAAC,OAAA,CAAA;AAAA,MAAA,IAAbC,GAAG,GAAAL,KAAA,CAAAM,KAAA,CAAA;MACZT,MAAM,GAAA,CAAAO,OAAA,GAAGP,MAAM,MAAA,IAAA,IAAAO,OAAA,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAA,CAASC,GAAG,CAAC,CAAA;MACtB,IAAIR,MAAM,KAAKU,SAAS,EAAE;AACxB,QAAA,OAAOb,YAAY,CAAA;AACrB,OAAA;AACF,KAAA;AAAC,GAAA,CAAA,OAAAc,GAAA,EAAA;IAAAV,SAAA,CAAAW,CAAA,CAAAD,GAAA,CAAA,CAAA;AAAA,GAAA,SAAA;AAAAV,IAAAA,SAAA,CAAAY,CAAA,EAAA,CAAA;AAAA,GAAA;AAED,EAAA,OAAOb,MAAM,KAAKU,SAAS,GAAGV,MAAM,GAAGH,YAAY,CAAA;AACrD;;;;"}
+{"version":3,"file":"get.js","sources":["../../../../../../src/utils/lodashButBetter/get.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */\nimport type { ElevationStyles } from '~tokens/global/elevation';\nimport type { EasingType } from '~tokens/global/motion';\n\n/**\n * @template TokenType token type generic\n * @description Tokenises objects to dot notation strings, eg: `surface.text.gray.normal`\n */\nexport type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = {\n  [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles\n    ? `${Extract<K, number | string>}`\n    : `${Extract<K, number | string>}.${TokenType[K] extends Record<\n        string,\n        string | number | boolean | EasingType<string>\n      >\n        ? Extract<keyof TokenType[K], number | string>\n        : DotNotationToken<TokenType[K]>}`;\n}[keyof TokenType];\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nfunction getIn<\n  T extends Record<string, any>,\n  K extends DotNotationToken<T>,\n  Default extends any = any\n>(obj: T, path: K, defaultValue?: Default): any {\n  if (!path) {\n    return defaultValue;\n  }\n\n  const keys = path.split('.');\n  let result = obj;\n\n  for (const key of keys) {\n    result = result?.[key];\n    if (result === undefined) {\n      return defaultValue;\n    }\n  }\n\n  return result !== undefined ? result : defaultValue;\n}\n\nexport default getIn;\n"],"names":["getIn","obj","path","defaultValue","keys","split","result","_iterator","_createForOfIteratorHelper","_step","s","n","done","_result","key","value","undefined","err","e","f"],"mappings":";;;AAAA;AACA;;AAIA;AACA;AACA;AACA;;AAYA;AACA,SAASA,KAAKA,CAIZC,GAAM,EAAEC,IAAO,EAAEC,YAAsB,EAAO;EAC9C,IAAI,CAACD,IAAI,EAAE;AACT,IAAA,OAAOC,YAAY,CAAA;AACrB,GAAA;AAEA,EAAA,IAAMC,IAAI,GAAGF,IAAI,CAACG,KAAK,CAAC,GAAG,CAAC,CAAA;EAC5B,IAAIC,MAAM,GAAGL,GAAG,CAAA;AAAC,EAAA,IAAAM,SAAA,GAAAC,0BAAA,CAECJ,IAAI,CAAA;IAAAK,KAAA,CAAA;AAAA,EAAA,IAAA;IAAtB,KAAAF,SAAA,CAAAG,CAAA,EAAAD,EAAAA,CAAAA,CAAAA,KAAA,GAAAF,SAAA,CAAAI,CAAA,EAAAC,EAAAA,IAAA,GAAwB;AAAA,MAAA,IAAAC,OAAA,CAAA;AAAA,MAAA,IAAbC,GAAG,GAAAL,KAAA,CAAAM,KAAA,CAAA;MACZT,MAAM,GAAA,CAAAO,OAAA,GAAGP,MAAM,MAAA,IAAA,IAAAO,OAAA,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAA,CAASC,GAAG,CAAC,CAAA;MACtB,IAAIR,MAAM,KAAKU,SAAS,EAAE;AACxB,QAAA,OAAOb,YAAY,CAAA;AACrB,OAAA;AACF,KAAA;AAAC,GAAA,CAAA,OAAAc,GAAA,EAAA;IAAAV,SAAA,CAAAW,CAAA,CAAAD,GAAA,CAAA,CAAA;AAAA,GAAA,SAAA;AAAAV,IAAAA,SAAA,CAAAY,CAAA,EAAA,CAAA;AAAA,GAAA;AAED,EAAA,OAAOb,MAAM,KAAKU,SAAS,GAAGV,MAAM,GAAGH,YAAY,CAAA;AACrD;;;;"}

package/build/lib/web/development/utils/metaAttribute/metaConstants.js

@@ -25,6 +25,7 @@ var MetaConstants = {
   Counter: 'counter',
   Display: 'display',
   Divider: 'divider',
+  Drawer: 'drawer',
   Dropdown: 'dropdown',
   DropdownOverlay: 'dropdown-overlay',
   DropdownFooter: 'dropdown-footer',

package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"metaConstants.js","sources":["../../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  Toast: 'toast',\n  ToastContainer: 'toast-container',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}
+{"version":3,"file":"metaConstants.js","sources":["../../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Drawer: 'drawer',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  Toast: 'toast',\n  ToastContainer: 'toast-container',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Drawer","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"AAAO,IAAMA,aAAa,GAAG;AAC3BC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,cAAc,EAAE,kBAAkB;AAClCC,EAAAA,iBAAiB,EAAE,qBAAqB;AACxCC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,YAAY,EAAE,cAAc;AAC5BC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,OAAO,EAAE,UAAU;AACnBC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,SAAS,EAAE,YAAY;AACvBC,EAAAA,SAAS,EAAE,YAAY;AACvBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,SAAS,EAAE,iBAAiB;AAC5BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,cAAc,EAAE,iBAAiB;AACjCC,EAAAA,cAAc,EAAE,iBAAiB;AACjCC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,YAAY,EAAE,gBAAgB;AAC9BC,EAAAA,YAAY,EAAE,gBAAgB;AAC9BC,EAAAA,YAAY,EAAE,gBAAgB;AAC9BC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,cAAc,EAAE,iBAAiB;AACjCC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,yBAAyB,EAAE,6BAA6B;AACxDC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,OAAO,EAAE,UAAU;AACnBC,EAAAA,OAAO,EAAE,UAAU;AACnBC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,YAAY,EAAE,eAAe;AAC7BC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,SAAS,EAAE,YAAY;AACvBC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,SAAS,EAAE,YAAY;AACvBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,cAAc,EAAE,kBAAkB;AAClCC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,cAAc,EAAE,kBAAkB;AAClCC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,YAAY,EAAE,eAAe;AAC7BC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,yBAAyB,EAAE,6BAA6B;AACxDC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,iBAAiB,EAAE,qBAAqB;AACxCC,EAAAA,iBAAiB,EAAE,qBAAqB;AACxCC,EAAAA,qBAAqB,EAAE,yBAAyB;AAChDC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,WAAW,EAAE,aAAa;AAC1BC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,iBAAiB,EAAE,oBAAoB;AACvCC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,SAAS,EAAE,YAAY;AACvBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,kBAAkB,EAAE,sBAAsB;AAC1CC,EAAAA,cAAc,EAAE,iBAAiB;AACjCC,EAAAA,SAAS,EAAE,YAAY;AACvBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,QAAQ,EAAE,UAAA;AACZ;;;;"}

package/build/lib/web/development/utils/useVerifyAllowedChildren/index.js

@@ -0,0 +1,2 @@
+export { useVerifyAllowedChildren } from './useVerifyAllowedChildren.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/utils/useVerifyAllowedChildren/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/production/components/BaseHeaderFooter/BaseHeader.js

@@ -12,6 +12,7 @@ import '../../utils/isValidAllowedChildren/index.js';
 import '../../utils/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/logger/index.js';
+import '../../tokens/global/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { throwBladeError, logger } from '../../utils/logger/logger.js';
@@ -22,6 +23,8 @@ import { Box } from '../Box/Box.js';
 import { IconButton } from '../Button/IconButton/IconButton.js';
 import ChevronLeftIcon from '../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
 import { Text } from '../Typography/Text/Text.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { size } from '../../tokens/global/size.js';
 import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
 import { Divider } from '../Divider/Divider.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
@@ -112,6 +115,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
     onBackButtonClick = _ref.onBackButtonClick,
     onCloseButtonClick = _ref.onCloseButtonClick,
     closeButtonRef = _ref.closeButtonRef,
+    backButtonRef = _ref.backButtonRef,
     testID = _ref.testID,
     onClickCapture = _ref.onClickCapture,
     onKeyDown = _ref.onKeyDown,
@@ -159,6 +163,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
           marginRight: "spacing.5",
           children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
             children: /*#__PURE__*/jsx(IconButton, {
+              ref: backButtonRef,
               size: "large",
               icon: ChevronLeftIcon,
               onClick: function onClick() {
@@ -175,8 +180,6 @@ var _BaseHeader = function _BaseHeader(_ref) {
           flexDirection: "row",
           alignItems: "flex-start",
           children: [leading ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
-            width: "spacing.8",
-            height: "spacing.8",
             marginRight: "spacing.3"
           }, centerBoxProps), {}, {
             children: leading
@@ -193,6 +196,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
               flexDirection: "row",
               children: [title ? /*#__PURE__*/jsx(Text, {
                 size: "large",
+                marginTop: makeSize(size['1']),
                 weight: "semibold",
                 color: "surface.text.gray.normal",
                 children: title