@razorpay/blade 12.68.0 → 12.89.1

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

@@ -2,17 +2,17 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import 'react';
 import toast from 'react-hot-toast';
 import styled, { keyframes, css } from 'styled-components';
-import '../Box/index.js';
-import '../Button/index.js';
-import '../Button/IconButton/index.js';
-import '../Icons/index.js';
-import '../Box/BaseBox/index.js';
-import '../Typography/index.js';
 import '../../utils/index.js';
 import getIn from '../../utils/lodashButBetter/get.js';
 import '../../utils/makeAccessible/index.js';
 import { MAKE_ANALYTICS_CONSTANTS } from '../../utils/makeAnalyticsAttribute/makeAnalyticsConstants.js';
 import '../../utils/metaAttribute/index.js';
+import '../Button/index.js';
+import '../Box/index.js';
+import '../Button/IconButton/index.js';
+import '../Icons/index.js';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import CheckCircleIcon from '../Icons/CheckCircleIcon/CheckCircleIcon.js';
 import AlertOctagonIcon from '../Icons/AlertOctagonIcon/AlertOctagonIcon.js';
@@ -41,11 +41,11 @@ var iconMap = {
   notice: AlertTriangleIcon
 };
 var borderColorMap = {
-  positive: 'feedback.border.positive.intense',
-  negative: 'feedback.border.negative.intense',
-  notice: 'feedback.border.notice.intense',
-  information: 'feedback.border.information.intense',
-  neutral: 'feedback.border.neutral.intense'
+  positive: 'popup.border.positive.moderate',
+  negative: 'popup.border.negative.moderate',
+  notice: 'popup.border.notice.moderate',
+  information: 'popup.border.information.moderate',
+  neutral: 'popup.border.neutral.moderate'
 };
 var slideIn = /*#__PURE__*/keyframes(["from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}"]);
 var slideOut = /*#__PURE__*/keyframes(["from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(100%);}"]);
@@ -54,8 +54,12 @@ var AnimatedFade = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "lbyqty-0"
 })(function (_ref) {
   var animationType = _ref.animationType,
-    toastBorderColor = _ref.toastBorderColor;
-  return css(["overflow:hidden;border:1px solid ", ";", ""], toastBorderColor, animationType);
+    toastBorderColor = _ref.toastBorderColor,
+    theme = _ref.theme;
+  var borderShadow = "inset 0 0 0 1px ".concat(toastBorderColor);
+  var highlightShadow = "inset 0px 1.5px 0px 0px ".concat(theme.colors.interactive.background.staticWhite.fadedHighlighted);
+  var backdropBlur = theme.backdropBlur.medium;
+  return css(["overflow:hidden;box-shadow:", ",", ";backdrop-filter:blur(", "px);", ""], borderShadow, highlightShadow, backdropBlur, animationType);
 });
 var Toast = function Toast(_ref2) {
   var type = _ref2.type,
@@ -97,7 +101,7 @@ var Toast = function Toast(_ref2) {
   })), metaAttribute({
     name: MetaConstants.Toast
   })), {}, {
-    toastBorderColor: getIn(theme.colors, isPromotional ? 'surface.border.gray.muted' : borderColorMap[color]),
+    toastBorderColor: getIn(theme.colors, isPromotional ? 'popup.border.gray.moderate' : borderColorMap[color]),
     animationType: isVisible ? enter : exit,
     width: "100%",
     display: "flex",
@@ -106,7 +110,7 @@ var Toast = function Toast(_ref2) {
     paddingY: isPromotional ? 'spacing.4' : 'spacing.3',
     borderRadius: "medium",
     alignItems: "center",
-    backgroundColor: isPromotional ? 'surface.background.gray.intense' : "feedback.background.".concat(color, ".intense"),
+    backgroundColor: isPromotional ? 'popup.background.gray.moderate' : "popup.background.".concat(color, ".moderate"),
     children: [Icon ? /*#__PURE__*/jsx(Box, {
       flexShrink: 0,
       display: "flex",
@@ -120,6 +124,7 @@ var Toast = function Toast(_ref2) {
       display: "flex",
       flexDirection: "column",
       gap: "spacing.3",
+      paddingY: isPromotional ? 'spacing.0' : 'spacing.2',
       children: [isPromotional ? content : /*#__PURE__*/jsx(Text, {
         as: "span",
         size: "small",
@@ -127,7 +132,7 @@ var Toast = function Toast(_ref2) {
         children: content
       }), isPromotional && actionButton]
     }), /*#__PURE__*/jsxs(Box, {
-      alignSelf: "start",
+      alignSelf: isPromotional ? 'start' : 'center',
       marginLeft: "auto",
       display: "flex",
       gap: "spacing.4",

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.web.js","sources":["../../../../../../src/components/Toast/Toast.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport toast from 'react-hot-toast';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { ToastProps } from './types';\nimport { Box } from '~components/Box';\nimport { Button } from '~components/Button';\nimport { IconButton } from '~components/Button/IconButton';\nimport {\n  AlertOctagonIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoIcon,\n} from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { MAKE_ANALYTICS_CONSTANTS } from '~utils/makeAnalyticsAttribute/makeAnalyticsConstants';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst iconMap = {\n  positive: CheckCircleIcon,\n  negative: AlertOctagonIcon,\n  information: InfoIcon,\n  neutral: InfoIcon,\n  notice: AlertTriangleIcon,\n};\n\nconst borderColorMap = {\n  positive: 'feedback.border.positive.intense',\n  negative: 'feedback.border.negative.intense',\n  notice: 'feedback.border.notice.intense',\n  information: 'feedback.border.information.intense',\n  neutral: 'feedback.border.neutral.intense',\n} as const;\n\nconst slideIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\nconst AnimatedFade = styled(BaseBox)<{\n  animationType: FlattenSimpleInterpolation | null;\n  toastBorderColor: string;\n}>(({ animationType, toastBorderColor }) => {\n  return css`\n    overflow: hidden;\n    border: 1px solid ${toastBorderColor};\n    ${animationType}\n  `;\n});\n\nconst Toast = ({\n  type,\n  color = 'neutral',\n  leading,\n  action,\n  content,\n  onDismissButtonClick,\n  isVisible,\n  id,\n}: ToastProps & {\n  isVisible?: boolean;\n}): React.ReactElement => {\n  const { theme } = useTheme();\n  const isPromotional = type === 'promotional';\n  const Icon = isPromotional ? leading : leading || iconMap[color];\n\n  const actionButton = action ? (\n    <Box>\n      <Button\n        size=\"xsmall\"\n        variant={isPromotional ? 'secondary' : 'tertiary'}\n        color={isPromotional ? 'primary' : 'white'}\n        onClick={(event) => {\n          event.stopPropagation();\n          action?.onClick?.({ event: event as never, toastId: id! });\n        }}\n        isLoading={action?.isLoading}\n        data-analytics-name={MAKE_ANALYTICS_CONSTANTS.TOAST.ACTION_BUTTON}\n      >\n        {action?.text}\n      </Button>\n    </Box>\n  ) : null;\n\n  const enter = css`\n    opacity: 0;\n    animation: ${slideIn} ${makeMotionTime(theme.motion.duration.gentle)}\n      ${castWebType(theme.motion.easing.entrance)} forwards;\n  `;\n\n  const exit = css`\n    opacity: 1;\n    animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n      ${castWebType(theme.motion.easing.exit)} forwards;\n  `;\n\n  return (\n    <AnimatedFade\n      {...makeAccessible({ role: 'status', liveRegion: 'polite' })}\n      {...metaAttribute({ name: MetaConstants.Toast })}\n      toastBorderColor={getIn(\n        theme.colors,\n        isPromotional ? 'surface.border.gray.muted' : borderColorMap[color],\n      )}\n      animationType={isVisible ? enter : exit}\n      width=\"100%\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      paddingX=\"spacing.4\"\n      paddingY={isPromotional ? 'spacing.4' : 'spacing.3'}\n      borderRadius=\"medium\"\n      alignItems=\"center\"\n      backgroundColor={\n        isPromotional ? 'surface.background.gray.intense' : `feedback.background.${color}.intense`\n      }\n    >\n      {Icon ? (\n        <Box\n          flexShrink={0}\n          display=\"flex\"\n          alignItems=\"center\"\n          alignSelf={isPromotional ? 'start' : 'center'}\n          marginTop={isPromotional ? 'spacing.1' : 'spacing.0'}\n        >\n          <Icon\n            color={isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'}\n          />\n        </Box>\n      ) : null}\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"spacing.3\">\n        {isPromotional ? (\n          content\n        ) : (\n          <Text as=\"span\" size=\"small\" color=\"surface.text.staticWhite.normal\">\n            {content}\n          </Text>\n        )}\n        {isPromotional && actionButton}\n      </Box>\n      <Box alignSelf=\"start\" marginLeft=\"auto\" display=\"flex\" gap=\"spacing.4\">\n        {!isPromotional && actionButton}\n        <IconButton\n          emphasis={isPromotional ? 'intense' : 'subtle'}\n          accessibilityLabel=\"Dismiss toast\"\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onDismissButtonClick?.({ event, toastId: id! });\n            toast.dismiss(id);\n          }}\n          icon={CloseIcon}\n        />\n      </Box>\n    </AnimatedFade>\n  );\n};\n\nexport { Toast };\n"],"names":["iconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","borderColorMap","slideIn","keyframes","slideOut","AnimatedFade","styled","BaseBox","withConfig","displayName","componentId","_ref","animationType","toastBorderColor","css","Toast","_ref2","type","_ref2$color","color","leading","action","content","onDismissButtonClick","isVisible","id","_useTheme","useTheme","theme","isPromotional","Icon","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","MAKE_ANALYTICS_CONSTANTS","TOAST","ACTION_BUTTON","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","colors","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","concat","flexShrink","alignSelf","marginTop","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"Toast.web.js","sources":["../../../../../../src/components/Toast/Toast.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport toast from 'react-hot-toast';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { ToastProps } from './types';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { MAKE_ANALYTICS_CONSTANTS } from '~utils/makeAnalyticsAttribute/makeAnalyticsConstants';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Button } from '~components/Button';\nimport { Box } from '~components/Box';\nimport { IconButton } from '~components/Button/IconButton';\nimport {\n  AlertOctagonIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoIcon,\n} from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\n\nconst iconMap = {\n  positive: CheckCircleIcon,\n  negative: AlertOctagonIcon,\n  information: InfoIcon,\n  neutral: InfoIcon,\n  notice: AlertTriangleIcon,\n};\n\nconst borderColorMap = {\n  positive: 'popup.border.positive.moderate',\n  negative: 'popup.border.negative.moderate',\n  notice: 'popup.border.notice.moderate',\n  information: 'popup.border.information.moderate',\n  neutral: 'popup.border.neutral.moderate',\n} as const;\n\nconst slideIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\nconst AnimatedFade = styled(BaseBox)<{\n  animationType: FlattenSimpleInterpolation | null;\n  toastBorderColor: string;\n}>(({ animationType, toastBorderColor, theme }) => {\n  const borderShadow = `inset 0 0 0 1px ${toastBorderColor}`;\n  const highlightShadow = `inset 0px 1.5px 0px 0px ${theme.colors.interactive.background.staticWhite.fadedHighlighted}`;\n  const backdropBlur = theme.backdropBlur.medium;\n\n  return css`\n    overflow: hidden;\n    box-shadow: ${borderShadow}, ${highlightShadow};\n    backdrop-filter: blur(${backdropBlur}px);\n    ${animationType}\n  `;\n});\n\nconst Toast = ({\n  type,\n  color = 'neutral',\n  leading,\n  action,\n  content,\n  onDismissButtonClick,\n  isVisible,\n  id,\n}: ToastProps & {\n  isVisible?: boolean;\n}): React.ReactElement => {\n  const { theme } = useTheme();\n  const isPromotional = type === 'promotional';\n  const Icon = isPromotional ? leading : leading || iconMap[color];\n\n  const actionButton = action ? (\n    <Box>\n      <Button\n        size=\"xsmall\"\n        variant={isPromotional ? 'secondary' : 'tertiary'}\n        color={isPromotional ? 'primary' : 'white'}\n        onClick={(event) => {\n          event.stopPropagation();\n          action?.onClick?.({ event: event as never, toastId: id! });\n        }}\n        isLoading={action?.isLoading}\n        data-analytics-name={MAKE_ANALYTICS_CONSTANTS.TOAST.ACTION_BUTTON}\n      >\n        {action?.text}\n      </Button>\n    </Box>\n  ) : null;\n\n  const enter = css`\n    opacity: 0;\n    animation: ${slideIn} ${makeMotionTime(theme.motion.duration.gentle)}\n      ${castWebType(theme.motion.easing.entrance)} forwards;\n  `;\n\n  const exit = css`\n    opacity: 1;\n    animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n      ${castWebType(theme.motion.easing.exit)} forwards;\n  `;\n\n  return (\n    <AnimatedFade\n      {...makeAccessible({ role: 'status', liveRegion: 'polite' })}\n      {...metaAttribute({ name: MetaConstants.Toast })}\n      toastBorderColor={getIn(\n        theme.colors,\n        isPromotional ? 'popup.border.gray.moderate' : borderColorMap[color],\n      )}\n      animationType={isVisible ? enter : exit}\n      width=\"100%\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      paddingX=\"spacing.4\"\n      paddingY={isPromotional ? 'spacing.4' : 'spacing.3'}\n      borderRadius=\"medium\"\n      alignItems=\"center\"\n      backgroundColor={\n        isPromotional ? 'popup.background.gray.moderate' : `popup.background.${color}.moderate`\n      }\n    >\n      {Icon ? (\n        <Box\n          flexShrink={0}\n          display=\"flex\"\n          alignItems=\"center\"\n          alignSelf={isPromotional ? 'start' : 'center'}\n          marginTop={isPromotional ? 'spacing.1' : 'spacing.0'}\n        >\n          <Icon\n            color={isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'}\n          />\n        </Box>\n      ) : null}\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        gap=\"spacing.3\"\n        paddingY={isPromotional ? 'spacing.0' : 'spacing.2'}\n      >\n        {isPromotional ? (\n          content\n        ) : (\n          <Text as=\"span\" size=\"small\" color=\"surface.text.staticWhite.normal\">\n            {content}\n          </Text>\n        )}\n        {isPromotional && actionButton}\n      </Box>\n      <Box\n        alignSelf={isPromotional ? 'start' : 'center'}\n        marginLeft=\"auto\"\n        display=\"flex\"\n        gap=\"spacing.4\"\n      >\n        {!isPromotional && actionButton}\n        <IconButton\n          emphasis={isPromotional ? 'intense' : 'subtle'}\n          accessibilityLabel=\"Dismiss toast\"\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onDismissButtonClick?.({ event, toastId: id! });\n            toast.dismiss(id);\n          }}\n          icon={CloseIcon}\n        />\n      </Box>\n    </AnimatedFade>\n  );\n};\n\nexport { Toast };\n"],"names":["iconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","borderColorMap","slideIn","keyframes","slideOut","AnimatedFade","styled","BaseBox","withConfig","displayName","componentId","_ref","animationType","toastBorderColor","theme","borderShadow","concat","highlightShadow","colors","interactive","background","staticWhite","fadedHighlighted","backdropBlur","medium","css","Toast","_ref2","type","_ref2$color","color","leading","action","content","onDismissButtonClick","isVisible","id","_useTheme","useTheme","isPromotional","Icon","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","MAKE_ANALYTICS_CONSTANTS","TOAST","ACTION_BUTTON","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","flexShrink","alignSelf","marginTop","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":"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"}

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

@@ -7,6 +7,7 @@ import { TooltipContent } from './TooltipContent.js';
 import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
 import { TooltipContext } from './TooltipContext.js';
 import { componentIds } from './componentIds.js';
+import { PopupArrow } from '../PopupArrow/PopupArrow.web.js';
 import '../BladeProvider/index.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
@@ -14,7 +15,6 @@ import '../../tokens/global/index.js';
 import { useId } from '../../utils/useId.js';
 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 '../../utils/makeAnalyticsAttribute/index.js';
@@ -28,7 +28,6 @@ import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { PopupArrow } from '../PopupArrow/PopupArrow.web.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 var _excluded = ["title", "content", "children", "placement", "onOpenChange", "zIndex"];
@@ -45,13 +44,15 @@ var _Tooltip = function _Tooltip(_ref) {
     zIndex = _ref$zIndex === void 0 ? componentZIndices.tooltip : _ref$zIndex,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = useTheme(),
-    theme = _useTheme.theme;
+    theme = _useTheme.theme,
+    colorScheme = _useTheme.colorScheme;
   var id = useId();
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
   var arrowRef = React__default.useRef(null);
+  var isDarkMode = colorScheme === 'dark';
   var GAP = theme.spacing[2];
   var _getFloatingPlacement = getFloatingPlacementParts(placement),
     _getFloatingPlacement2 = _slicedToArray(_getFloatingPlacement, 1),
@@ -127,13 +128,15 @@ var _Tooltip = function _Tooltip(_ref) {
         children: /*#__PURE__*/jsx(TooltipContent, {
           title: title,
           style: styles,
+          colorScheme: colorScheme,
           arrow: /*#__PURE__*/jsx(PopupArrow, {
             ref: arrowRef,
             context: context,
             width: ARROW_WIDTH,
             height: ARROW_HEIGHT,
-            fillColor: theme.colors.popup.background.intense,
-            strokeColor: theme.colors.popup.border.intense
+            fillColor: theme.colors.popup.background.gray.intense,
+            strokeColor: isDarkMode ? theme.colors.popup.border.gray.intense : undefined,
+            strokeWidth: isDarkMode ? 1 : 0
           }),
           children: content
         })

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 } from './constants';\nimport { TooltipContext } from './TooltipContext';\nimport { componentIds } from './componentIds';\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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useMergeRefs } from '~utils/useMergeRefs';\n\nconst _Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.tooltip,\n  ...rest\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      {React.cloneElement(children, {\n        // @ts-expect-error: ref does exist on children prop\n        ref: useMergeRefs(refs.setReference, children.ref),\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            zIndex={zIndex}\n            {...getFloatingProps()}\n            {...metaAttribute({ name: MetaConstants.Tooltip })}\n            {...makeAnalyticsAttribute(rest)}\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\nconst Tooltip = assignWithoutSideEffects(_Tooltip, {\n  componentId: componentIds.Tooltip,\n});\n\nexport { Tooltip };\n"],"names":["_Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","tooltip","rest","_objectWithoutProperties","_excluded","_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","useMergeRefs","setReference","makeAccessible","label","mergeProps","props","_jsx","FloatingPortal","BaseBox","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","Tooltip","makeAnalyticsAttribute","TooltipContent","PopupArrow","width","height","fillColor","colors","popup","background","intense","strokeColor","border","assignWithoutSideEffects","componentId","componentIds"],"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 { componentIds } from './componentIds';\nimport { PopupArrow } from '~components/PopupArrow/PopupArrow.web';\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 { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useMergeRefs } from '~utils/useMergeRefs';\n\nconst _Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.tooltip,\n  ...rest\n}: TooltipProps): React.ReactElement => {\n  const { theme, colorScheme } = useTheme();\n  const id = useId();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n  const isDarkMode = colorScheme === 'dark';\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      {React.cloneElement(children, {\n        // @ts-expect-error: ref does exist on children prop\n        ref: useMergeRefs(refs.setReference, children.ref),\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            zIndex={zIndex}\n            {...getFloatingProps()}\n            {...metaAttribute({ name: MetaConstants.Tooltip })}\n            {...makeAnalyticsAttribute(rest)}\n          >\n            <TooltipContent\n              title={title}\n              style={styles}\n              colorScheme={colorScheme}\n              arrow={\n                <PopupArrow\n                  ref={arrowRef}\n                  context={context}\n                  width={ARROW_WIDTH}\n                  height={ARROW_HEIGHT}\n                  fillColor={theme.colors.popup.background.gray.intense}\n                  strokeColor={isDarkMode ? theme.colors.popup.border.gray.intense : undefined}\n                  strokeWidth={isDarkMode ? 1 : 0}\n                />\n              }\n            >\n              {content}\n            </TooltipContent>\n          </BaseBox>\n        </FloatingPortal>\n      )}\n    </TooltipContext.Provider>\n  );\n};\n\nconst Tooltip = assignWithoutSideEffects(_Tooltip, {\n  componentId: componentIds.Tooltip,\n});\n\nexport { Tooltip };\n"],"names":["_Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","tooltip","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","colorScheme","id","useId","_React$useState","React","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","arrowRef","useRef","isDarkMode","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","useMergeRefs","setReference","makeAccessible","label","mergeProps","props","_jsx","FloatingPortal","BaseBox","setFloating","style","pointerEvents","metaAttribute","name","MetaConstants","Tooltip","makeAnalyticsAttribute","TooltipContent","PopupArrow","width","height","fillColor","colors","popup","background","gray","intense","strokeColor","border","undefined","strokeWidth","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}

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

@@ -15,18 +15,20 @@ var TooltipContent = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     arrow = _ref.arrow,
     side = _ref.side,
     style = _ref.style,
-    isVisible = _ref.isVisible;
+    isVisible = _ref.isVisible,
+    colorScheme = _ref.colorScheme;
   return /*#__PURE__*/jsxs(TooltipContentWrapper, {
     position: isReactNative() ? 'absolute' : 'relative',
-    paddingTop: "spacing.3",
-    paddingBottom: "spacing.3",
-    paddingLeft: "spacing.4",
-    paddingRight: "spacing.4",
+    padding: "spacing.4",
+    gap: "spacing.2",
+    display: "flex",
+    flexDirection: "column",
     maxWidth: makeSize(size[200]),
     ref: ref,
     styles: style,
     side: side,
     isVisible: isVisible,
+    colorScheme: colorScheme,
     children: [title ? /*#__PURE__*/jsx(Text, {
       weight: "semibold",
       size: "medium",

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.js","sources":["../../../../../../src/components/Tooltip/TooltipContent.tsx"],"sourcesContent":["import React from 'react';\nimport { TooltipContentWrapper } from './TooltipContentWrapper';\nimport type { TooltipContentProps } from './types';\nimport { Text } from '~components/Typography';\nimport { isReactNative, makeSize } from '~utils';\nimport { size } from '~tokens/global';\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ children, title, arrow, side, style, isVisible }, ref) => {\n    return (\n      <TooltipContentWrapper\n        position={isReactNative() ? 'absolute' : 'relative'}\n        paddingTop=\"spacing.3\"\n        paddingBottom=\"spacing.3\"\n        paddingLeft=\"spacing.4\"\n        paddingRight=\"spacing.4\"\n        maxWidth={makeSize(size[200])}\n        ref={ref as never}\n        styles={style}\n        side={side}\n        isVisible={isVisible}\n      >\n        {title ? (\n          <Text weight=\"semibold\" size=\"medium\" color=\"surface.text.staticWhite.normal\">\n            {title}\n          </Text>\n        ) : null}\n        <Text\n          variant=\"body\"\n          size=\"small\"\n          weight=\"regular\"\n          color=\"surface.text.staticWhite.subtle\"\n          wordBreak=\"break-word\"\n        >\n          {children}\n        </Text>\n        {arrow}\n      </TooltipContentWrapper>\n    );\n  },\n);\n\nexport { TooltipContent };\n"],"names":["TooltipContent","React","forwardRef","_ref","ref","children","title","arrow","side","style","isVisible","_jsxs","TooltipContentWrapper","position","isReactNative","paddingTop","paddingBottom","paddingLeft","paddingRight","maxWidth","makeSize","size","styles","_jsx","Text","weight","color","variant","wordBreak"],"mappings":";;;;;;;;;;;AAOMA,IAAAA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CACrC,UAAAC,IAAA,EAAqDC,GAAG,EAAK;AAAA,EAAA,IAA1DC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAEC,KAAK,GAAAN,IAAA,CAALM,KAAK;IAAEC,SAAS,GAAAP,IAAA,CAATO,SAAS,CAAA;EAC/C,oBACEC,IAAA,CAACC,qBAAqB,EAAA;AACpBC,IAAAA,QAAQ,EAAEC,aAAa,EAAE,GAAG,UAAU,GAAG,UAAW;AACpDC,IAAAA,UAAU,EAAC,WAAW;AACtBC,IAAAA,aAAa,EAAC,WAAW;AACzBC,IAAAA,WAAW,EAAC,WAAW;AACvBC,IAAAA,YAAY,EAAC,WAAW;AACxBC,IAAAA,QAAQ,EAAEC,QAAQ,CAACC,IAAI,CAAC,GAAG,CAAC,CAAE;AAC9BjB,IAAAA,GAAG,EAAEA,GAAa;AAClBkB,IAAAA,MAAM,EAAEb,KAAM;AACdD,IAAAA,IAAI,EAAEA,IAAK;AACXE,IAAAA,SAAS,EAAEA,SAAU;AAAAL,IAAAA,QAAA,EAEpBC,CAAAA,KAAK,gBACJiB,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,MAAM,EAAC,UAAU;AAACJ,MAAAA,IAAI,EAAC,QAAQ;AAACK,MAAAA,KAAK,EAAC,iCAAiC;AAAArB,MAAAA,QAAA,EAC1EC,KAAAA;AAAK,KACF,CAAC,GACL,IAAI,eACRiB,GAAA,CAACC,IAAI,EAAA;AACHG,MAAAA,OAAO,EAAC,MAAM;AACdN,MAAAA,IAAI,EAAC,OAAO;AACZI,MAAAA,MAAM,EAAC,SAAS;AAChBC,MAAAA,KAAK,EAAC,iCAAiC;AACvCE,MAAAA,SAAS,EAAC,YAAY;AAAAvB,MAAAA,QAAA,EAErBA,QAAAA;KACG,CAAC,EACNE,KAAK,CAAA;AAAA,GACe,CAAC,CAAA;AAE5B,CACF;;;;"}
+{"version":3,"file":"TooltipContent.js","sources":["../../../../../../src/components/Tooltip/TooltipContent.tsx"],"sourcesContent":["import React from 'react';\nimport { TooltipContentWrapper } from './TooltipContentWrapper';\nimport type { TooltipContentProps } from './types';\nimport { Text } from '~components/Typography';\nimport { isReactNative, makeSize } from '~utils';\nimport { size } from '~tokens/global';\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ children, title, arrow, side, style, isVisible, colorScheme }, ref) => {\n    return (\n      <TooltipContentWrapper\n        position={isReactNative() ? 'absolute' : 'relative'}\n        padding=\"spacing.4\"\n        gap=\"spacing.2\"\n        display=\"flex\"\n        flexDirection=\"column\"\n        maxWidth={makeSize(size[200])}\n        ref={ref as never}\n        styles={style}\n        side={side}\n        isVisible={isVisible}\n        colorScheme={colorScheme}\n      >\n        {title ? (\n          <Text weight=\"semibold\" size=\"medium\" color=\"surface.text.staticWhite.normal\">\n            {title}\n          </Text>\n        ) : null}\n        <Text\n          variant=\"body\"\n          size=\"small\"\n          weight=\"regular\"\n          color=\"surface.text.staticWhite.subtle\"\n          wordBreak=\"break-word\"\n        >\n          {children}\n        </Text>\n        {arrow}\n      </TooltipContentWrapper>\n    );\n  },\n);\n\nexport { TooltipContent };\n"],"names":["TooltipContent","React","forwardRef","_ref","ref","children","title","arrow","side","style","isVisible","colorScheme","_jsxs","TooltipContentWrapper","position","isReactNative","padding","gap","display","flexDirection","maxWidth","makeSize","size","styles","_jsx","Text","weight","color","variant","wordBreak"],"mappings":";;;;;;;;;;;AAOMA,IAAAA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CACrC,UAAAC,IAAA,EAAkEC,GAAG,EAAK;AAAA,EAAA,IAAvEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAEC,KAAK,GAAAN,IAAA,CAALM,KAAK;IAAEC,SAAS,GAAAP,IAAA,CAATO,SAAS;IAAEC,WAAW,GAAAR,IAAA,CAAXQ,WAAW,CAAA;EAC5D,oBACEC,IAAA,CAACC,qBAAqB,EAAA;AACpBC,IAAAA,QAAQ,EAAEC,aAAa,EAAE,GAAG,UAAU,GAAG,UAAW;AACpDC,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,QAAQ,EAAEC,QAAQ,CAACC,IAAI,CAAC,GAAG,CAAC,CAAE;AAC9BlB,IAAAA,GAAG,EAAEA,GAAa;AAClBmB,IAAAA,MAAM,EAAEd,KAAM;AACdD,IAAAA,IAAI,EAAEA,IAAK;AACXE,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,WAAW,EAAEA,WAAY;AAAAN,IAAAA,QAAA,EAExBC,CAAAA,KAAK,gBACJkB,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,MAAM,EAAC,UAAU;AAACJ,MAAAA,IAAI,EAAC,QAAQ;AAACK,MAAAA,KAAK,EAAC,iCAAiC;AAAAtB,MAAAA,QAAA,EAC1EC,KAAAA;AAAK,KACF,CAAC,GACL,IAAI,eACRkB,GAAA,CAACC,IAAI,EAAA;AACHG,MAAAA,OAAO,EAAC,MAAM;AACdN,MAAAA,IAAI,EAAC,OAAO;AACZI,MAAAA,MAAM,EAAC,SAAS;AAChBC,MAAAA,KAAK,EAAC,iCAAiC;AACvCE,MAAAA,SAAS,EAAC,YAAY;AAAAxB,MAAAA,QAAA,EAErBA,QAAAA;KACG,CAAC,EACNE,KAAK,CAAA;AAAA,GACe,CAAC,CAAA;AAE5B,CACF;;;;"}

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

@@ -8,10 +8,12 @@ var TooltipContentWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "sc-1f4wq7j-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    styles = _ref.styles;
+    styles = _ref.styles,
+    colorScheme = _ref.colorScheme;
   return getTooltipContentWrapperStyles({
     theme: theme,
-    styles: styles
+    styles: styles,
+    colorScheme: colorScheme
   });
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContentWrapper.web.js","sources":["../../../../../../src/components/Tooltip/TooltipContentWrapper.web.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport { getTooltipContentWrapperStyles } from './getTooltipContentWrapperStyles';\nimport type { TooltipContentWrapperProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst TooltipContentWrapper = styled(BaseBox)<\n  { styles: CSSProperties } & TooltipContentWrapperProps\n>(({ theme, styles }) => {\n  return getTooltipContentWrapperStyles({ theme, styles });\n});\n\nexport { TooltipContentWrapper };\n"],"names":["TooltipContentWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","styles","getTooltipContentWrapperStyles"],"mappings":";;;;;AAMA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAE3C,CAAA,CAAA,UAAAC,IAAA,EAAuB;AAAA,EAAA,IAApBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM,CAAA;AAChB,EAAA,OAAOC,8BAA8B,CAAC;AAAEF,IAAAA,KAAK,EAALA,KAAK;AAAEC,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA;AAC1D,CAAC;;;;"}
+{"version":3,"file":"TooltipContentWrapper.web.js","sources":["../../../../../../src/components/Tooltip/TooltipContentWrapper.web.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport { getTooltipContentWrapperStyles } from './getTooltipContentWrapperStyles';\nimport type { TooltipContentWrapperProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { ColorSchemeNames } from '~tokens/theme/theme';\n\nconst TooltipContentWrapper = styled(BaseBox)<\n  { styles: CSSProperties; colorScheme: ColorSchemeNames } & TooltipContentWrapperProps\n>(({ theme, styles, colorScheme }) => {\n  return getTooltipContentWrapperStyles({ theme, styles, colorScheme });\n});\n\nexport { TooltipContentWrapper };\n"],"names":["TooltipContentWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","styles","colorScheme","getTooltipContentWrapperStyles"],"mappings":";;;;;AAOA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAE3C,CAAA,CAAA,UAAAC,IAAA,EAAoC;AAAA,EAAA,IAAjCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,WAAW,GAAAH,IAAA,CAAXG,WAAW,CAAA;AAC7B,EAAA,OAAOC,8BAA8B,CAAC;AAAEH,IAAAA,KAAK,EAALA,KAAK;AAAEC,IAAAA,MAAM,EAANA,MAAM;AAAEC,IAAAA,WAAW,EAAXA,WAAAA;AAAY,GAAC,CAAC,CAAA;AACvE,CAAC;;;;"}

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

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

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

@@ -8,14 +8,19 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getTooltipContentWrapperStyles = function getTooltipContentWrapperStyles(_ref) {
   var theme = _ref.theme,
-    styles = _ref.styles;
-  return _objectSpread({
-    backgroundColor: theme.colors.popup.background.intense,
+    styles = _ref.styles,
+    colorScheme = _ref.colorScheme;
+  var isDarkMode = colorScheme === 'dark';
+  return _objectSpread(_objectSpread({
+    backgroundColor: theme.colors.popup.background.gray.intense,
+    borderRadius: makeBorderSize(theme.border.radius.medium)
+  }, isDarkMode && {
     borderWidth: makeBorderSize(theme.border.width.thin),
-    borderRadius: makeBorderSize(theme.border.radius.medium),
-    borderColor: theme.colors.popup.border.intense,
-    borderStyle: 'solid',
-    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.lowRaised)
+    borderColor: theme.colors.popup.border.gray.intense,
+    borderStyle: 'solid'
+  }), {}, {
+    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.lowRaised),
+    backdropFilter: isReactNative() ? undefined : "blur(".concat(theme.backdropBlur.high, "px)")
   }, styles);
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"getTooltipContentWrapperStyles.js","sources":["../../../../../../src/components/Tooltip/getTooltipContentWrapperStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeBorderSize, castWebType, isReactNative } from '~utils';\n\nconst getTooltipContentWrapperStyles = ({\n  theme,\n  styles,\n}: {\n  theme: Theme;\n  styles: React.CSSProperties;\n}): CSSObject => {\n  return {\n    backgroundColor: theme.colors.popup.background.intense,\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    borderColor: theme.colors.popup.border.intense,\n    borderStyle: 'solid',\n    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.lowRaised),\n    ...styles,\n  };\n};\n\nexport { getTooltipContentWrapperStyles };\n"],"names":["getTooltipContentWrapperStyles","_ref","theme","styles","_objectSpread","backgroundColor","colors","popup","background","intense","borderWidth","makeBorderSize","border","width","thin","borderRadius","radius","medium","borderColor","borderStyle","boxShadow","isReactNative","undefined","castWebType","elevation","lowRaised"],"mappings":";;;;;;;;AAKA,IAAMA,8BAA8B,GAAG,SAAjCA,8BAA8BA,CAAAC,IAAA,EAMnB;AAAA,EAAA,IALfC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,MAAM,GAAAF,IAAA,CAANE,MAAM,CAAA;AAKN,EAAA,OAAAC,aAAA,CAAA;IACEC,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,OAAO;IACtDC,WAAW,EAAEC,cAAc,CAACT,KAAK,CAACU,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC;IACpDC,YAAY,EAAEJ,cAAc,CAACT,KAAK,CAACU,MAAM,CAACI,MAAM,CAACC,MAAM,CAAC;IACxDC,WAAW,EAAEhB,KAAK,CAACI,MAAM,CAACC,KAAK,CAACK,MAAM,CAACH,OAAO;AAC9CU,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAEC,aAAa,EAAE,GAAGC,SAAS,GAAGC,WAAW,CAACrB,KAAK,CAACsB,SAAS,CAACC,SAAS,CAAA;AAAC,GAAA,EAC5EtB,MAAM,CAAA,CAAA;AAEb;;;;"}
+{"version":3,"file":"getTooltipContentWrapperStyles.js","sources":["../../../../../../src/components/Tooltip/getTooltipContentWrapperStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport { makeBorderSize, castWebType, isReactNative } from '~utils';\nimport type { ColorSchemeNames } from '~tokens/theme/theme';\nimport type { Theme } from '~components/BladeProvider';\n\nconst getTooltipContentWrapperStyles = ({\n  theme,\n  styles,\n  colorScheme,\n}: {\n  theme: Theme;\n  styles: React.CSSProperties;\n  colorScheme: ColorSchemeNames;\n}): CSSObject => {\n  const isDarkMode = colorScheme === 'dark';\n\n  return {\n    backgroundColor: theme.colors.popup.background.gray.intense,\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    ...(isDarkMode && {\n      borderWidth: makeBorderSize(theme.border.width.thin),\n      borderColor: theme.colors.popup.border.gray.intense,\n      borderStyle: 'solid',\n    }),\n    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.lowRaised),\n    backdropFilter: isReactNative() ? undefined : `blur(${theme.backdropBlur.high}px)`,\n    ...styles,\n  };\n};\n\nexport { getTooltipContentWrapperStyles };\n"],"names":["getTooltipContentWrapperStyles","_ref","theme","styles","colorScheme","isDarkMode","_objectSpread","backgroundColor","colors","popup","background","gray","intense","borderRadius","makeBorderSize","border","radius","medium","borderWidth","width","thin","borderColor","borderStyle","boxShadow","isReactNative","undefined","castWebType","elevation","lowRaised","backdropFilter","concat","backdropBlur","high"],"mappings":";;;;;;;;AAMA,IAAMA,8BAA8B,GAAG,SAAjCA,8BAA8BA,CAAAC,IAAA,EAQnB;AAAA,EAAA,IAPfC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW,CAAA;AAMX,EAAA,IAAMC,UAAU,GAAGD,WAAW,KAAK,MAAM,CAAA;EAEzC,OAAAE,aAAA,CAAAA,aAAA,CAAA;IACEC,eAAe,EAAEL,KAAK,CAACM,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,IAAI,CAACC,OAAO;IAC3DC,YAAY,EAAEC,cAAc,CAACZ,KAAK,CAACa,MAAM,CAACC,MAAM,CAACC,MAAM,CAAA;AAAC,GAAA,EACpDZ,UAAU,IAAI;IAChBa,WAAW,EAAEJ,cAAc,CAACZ,KAAK,CAACa,MAAM,CAACI,KAAK,CAACC,IAAI,CAAC;IACpDC,WAAW,EAAEnB,KAAK,CAACM,MAAM,CAACC,KAAK,CAACM,MAAM,CAACJ,IAAI,CAACC,OAAO;AACnDU,IAAAA,WAAW,EAAE,OAAA;GACd,CAAA,EAAA,EAAA,EAAA;AACDC,IAAAA,SAAS,EAAEC,aAAa,EAAE,GAAGC,SAAS,GAAGC,WAAW,CAACxB,KAAK,CAACyB,SAAS,CAACC,SAAS,CAAC;AAC/EC,IAAAA,cAAc,EAAEL,aAAa,EAAE,GAAGC,SAAS,GAAAK,OAAAA,CAAAA,MAAA,CAAW5B,KAAK,CAAC6B,YAAY,CAACC,IAAI,EAAA,KAAA,CAAA;AAAK,GAAA,EAC/E7B,MAAM,CAAA,CAAA;AAEb;;;;"}

package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js

@@ -4,22 +4,17 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default from 'react';
 import ReactDOM from 'react-dom';
 import { TabNavContext } from './TabNavContext.js';
-import { useResize } from './utils.js';
+import { TabNavIndicator } from './TabNavIndicator.web.js';
+import { useResize } from '../../../utils/useResize.js';
 import '../../Box/BaseBox/index.js';
 import '../../Box/styledProps/index.js';
-import '../../Divider/index.js';
-import '../../../utils/index.js';
-import '../../../tokens/global/index.js';
 import '../../../utils/metaAttribute/index.js';
 import '../../../utils/makeAnalyticsAttribute/index.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { Divider } from '../../Divider/Divider.js';
-import { makeSize } from '../../../utils/makeSize/makeSize.js';
-import { size } from '../../../tokens/global/size.js';
 import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
 
 var _excluded = ["children"],
@@ -29,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var TabNavItems = function TabNavItems(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
     display: "flex",
     width: "100%",
     gap: "spacing.0",
@@ -38,24 +33,12 @@ var TabNavItems = function TabNavItems(_ref) {
   }, metaAttribute({
     name: MetaConstants.TabNavItems
   })), makeAnalyticsAttribute(rest)), {}, {
-    children: [React__default.Children.map(children, function (child, index) {
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [index > 0 ? /*#__PURE__*/jsx(Divider, {
-          margin: "auto",
-          variant: "muted",
-          orientation: "vertical",
-          height: makeSize(size[16])
-        }) : null, /*#__PURE__*/React__default.cloneElement(child, {
-          __isInsideTabNavItems: true,
-          __index: index
-        })]
+    children: React__default.Children.map(children, function (child, index) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        __isInsideTabNavItems: true,
+        __index: index
       });
-    }), /*#__PURE__*/jsx(Divider, {
-      margin: "auto",
-      variant: "muted",
-      orientation: "vertical",
-      height: makeSize(size[16])
-    })]
+    })
   }));
 };
 var TabNav = function TabNav(_ref2) {
@@ -63,6 +46,7 @@ var TabNav = function TabNav(_ref2) {
     items = _ref2.items,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var ref = React__default.useRef(null);
+  var itemsRowRef = React__default.useRef(null);
   var _React$useState = React__default.useState(items),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     controlledItems = _React$useState2[0],
@@ -126,7 +110,7 @@ var TabNav = function TabNav(_ref2) {
       display: "flex",
       width: "100%",
       alignItems: "center",
-      alignSelf: "end",
+      alignSelf: "center",
       position: "relative"
     }, getStyledProps(rest)), makeAnalyticsAttribute(rest)), metaAttribute({
       name: MetaConstants.TabNav
@@ -136,14 +120,18 @@ var TabNav = function TabNav(_ref2) {
         display: "flex",
         width: "100%",
         position: "relative",
-        children: /*#__PURE__*/jsx(BaseBox, {
+        children: /*#__PURE__*/jsxs(BaseBox, {
+          ref: itemsRowRef,
           display: "flex",
           flexDirection: "row",
           width: "max-content",
-          children: children({
+          position: "relative",
+          children: [children({
             items: _items,
             overflowingItems: overflowingItems
-          })
+          }), /*#__PURE__*/jsx(TabNavIndicator, {
+            containerRef: itemsRowRef
+          })]
         })
       })
     }))

package/build/lib/web/development/components/TopNav/TabNav/TabNav.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNav.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNav.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TabNavContext } from './TabNavContext';\nimport { useResize } from './utils';\nimport type { TabNavItemData, TabNavProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { Divider } from '~components/Divider';\nimport { makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BoxProps } from '~components/Box';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { DataAnalyticsAttribute } from '~utils/types';\n\nconst TabNavItems = ({ children, ...rest }: BoxProps): React.ReactElement => {\n  return (\n    <BaseBox\n      {...rest}\n      display=\"flex\"\n      width=\"100%\"\n      gap=\"spacing.0\"\n      position=\"relative\"\n      left=\"-1px\"\n      {...metaAttribute({ name: MetaConstants.TabNavItems })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {React.Children.map(children, (child, index) => {\n        return (\n          <>\n            {index > 0 ? (\n              <Divider\n                margin=\"auto\"\n                variant=\"muted\"\n                orientation=\"vertical\"\n                height={makeSize(size[16])}\n              />\n            ) : null}\n            {React.cloneElement(child as React.ReactElement, {\n              __isInsideTabNavItems: true,\n              __index: index,\n            })}\n          </>\n        );\n      })}\n      <Divider margin=\"auto\" variant=\"muted\" orientation=\"vertical\" height={makeSize(size[16])} />\n    </BaseBox>\n  );\n};\n\nconst TabNav = ({\n  children,\n  items,\n  ...rest\n}: TabNavProps & StyledPropsBlade & DataAnalyticsAttribute): React.ReactElement => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [controlledItems, setControlledItems] = React.useState<TabNavItemData[]>(items);\n\n  const overflowingItems = controlledItems.filter(\n    (item) => item.isAlwaysOverflowing ?? item.isOverflowing,\n  );\n  const _items = controlledItems.filter((item) => !item.isAlwaysOverflowing && !item.isOverflowing);\n\n  // We need to memoize this callback otherwise it will cause infinite re-renders\n  // Because the ResizeObserver callback will be a new reference on every render\n  // and it will trigger a re-render\n  const resizeCallback = React.useCallback((resizeInfo: ResizeObserverEntry): void => {\n    const target = resizeInfo.target as HTMLElement;\n    const updateItems = (): void => {\n      setControlledItems((items) => {\n        return items.map((item, index) => {\n          // never overflow the first item\n          if (index === 0) return { ...item, isOverflowing: false };\n          // add padding to the offsetX to account the \"More\" menu's width changing due to the selection state (eg: More:ProdctName)\n          // Currently, hardcoding this to 150, we can make this dynamic too but that's causing layout thrashing\n          // because first we need to calculate the width of the \"More\" menu and then update the items\n          const padding = 150;\n          const offset = (item.offsetX! + padding)! - target.getBoundingClientRect().left;\n          if (offset > target.offsetWidth) {\n            return { ...item, isOverflowing: true };\n          } else {\n            return { ...item, isOverflowing: false };\n          }\n        });\n      });\n    };\n    // https://github.com/webpack/webpack/issues/14814\n    const flushSync = (ReactDOM as any)['flushSync'.toString()];\n    // Using flushSync to avoid layout thrashing,\n    // this will force React to flush all pending updates and only then update the DOM\n    if (flushSync !== undefined) {\n      flushSync(updateItems);\n    } else {\n      updateItems();\n    }\n  }, []);\n\n  useResize(ref, resizeCallback);\n\n  return (\n    <TabNavContext.Provider value={{ containerRef: ref, controlledItems, setControlledItems }}>\n      <BaseBox\n        as=\"nav\"\n        display=\"flex\"\n        width=\"100%\"\n        alignItems=\"center\"\n        alignSelf=\"end\"\n        position=\"relative\"\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ name: MetaConstants.TabNav })}\n        ref={ref}\n      >\n        <BaseBox display=\"flex\" width=\"100%\" position=\"relative\">\n          <BaseBox display=\"flex\" flexDirection=\"row\" width=\"max-content\">\n            {children({ items: _items, overflowingItems })}\n          </BaseBox>\n        </BaseBox>\n      </BaseBox>\n    </TabNavContext.Provider>\n  );\n};\n\nexport { TabNav, TabNavItems };\n"],"names":["TabNavItems","_ref","children","rest","_objectWithoutProperties","_excluded","_jsxs","BaseBox","_objectSpread","display","width","gap","position","left","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","React","Children","map","child","index","_Fragment","_jsx","Divider","margin","variant","orientation","height","makeSize","size","cloneElement","__isInsideTabNavItems","__index","TabNav","_ref2","items","_excluded2","ref","useRef","_React$useState","useState","_React$useState2","_slicedToArray","controlledItems","setControlledItems","overflowingItems","filter","item","_item$isAlwaysOverflo","isAlwaysOverflowing","isOverflowing","_items","resizeCallback","useCallback","resizeInfo","target","updateItems","padding","offset","offsetX","getBoundingClientRect","offsetWidth","flushSync","ReactDOM","toString","undefined","useResize","TabNavContext","Provider","value","containerRef","as","alignItems","alignSelf","getStyledProps","flexDirection"],"mappings":"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"}
+{"version":3,"file":"TabNav.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNav.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TabNavContext } from './TabNavContext';\nimport { TabNavIndicator } from './TabNavIndicator.web';\nimport type { TabNavItemData, TabNavProps } from './types';\nimport { useResize } from '~utils/useResize';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BoxProps } from '~components/Box';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { DataAnalyticsAttribute } from '~utils/types';\n\nconst TabNavItems = ({ children, ...rest }: BoxProps): React.ReactElement => {\n  return (\n    <BaseBox\n      {...rest}\n      display=\"flex\"\n      width=\"100%\"\n      gap=\"spacing.0\"\n      position=\"relative\"\n      left=\"-1px\"\n      {...metaAttribute({ name: MetaConstants.TabNavItems })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {React.Children.map(children, (child, index) => {\n        return React.cloneElement(child as React.ReactElement, {\n          __isInsideTabNavItems: true,\n          __index: index,\n        });\n      })}\n    </BaseBox>\n  );\n};\n\nconst TabNav = ({\n  children,\n  items,\n  ...rest\n}: TabNavProps & StyledPropsBlade & DataAnalyticsAttribute): React.ReactElement => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const itemsRowRef = React.useRef<HTMLDivElement>(null);\n  const [controlledItems, setControlledItems] = React.useState<TabNavItemData[]>(items);\n\n  const overflowingItems = controlledItems.filter(\n    (item) => item.isAlwaysOverflowing ?? item.isOverflowing,\n  );\n  const _items = controlledItems.filter((item) => !item.isAlwaysOverflowing && !item.isOverflowing);\n\n  // We need to memoize this callback otherwise it will cause infinite re-renders\n  // Because the ResizeObserver callback will be a new reference on every render\n  // and it will trigger a re-render\n  const resizeCallback = React.useCallback((resizeInfo: ResizeObserverEntry): void => {\n    const target = resizeInfo.target as HTMLElement;\n    const updateItems = (): void => {\n      setControlledItems((items) => {\n        return items.map((item, index) => {\n          // never overflow the first item\n          if (index === 0) return { ...item, isOverflowing: false };\n          // add padding to the offsetX to account the \"More\" menu's width changing due to the selection state (eg: More:ProdctName)\n          // Currently, hardcoding this to 150, we can make this dynamic too but that's causing layout thrashing\n          // because first we need to calculate the width of the \"More\" menu and then update the items\n          const padding = 150;\n          const offset = (item.offsetX! + padding)! - target.getBoundingClientRect().left;\n          if (offset > target.offsetWidth) {\n            return { ...item, isOverflowing: true };\n          } else {\n            return { ...item, isOverflowing: false };\n          }\n        });\n      });\n    };\n    // https://github.com/webpack/webpack/issues/14814\n    const flushSync = (ReactDOM as any)['flushSync'.toString()];\n    // Using flushSync to avoid layout thrashing,\n    // this will force React to flush all pending updates and only then update the DOM\n    if (flushSync !== undefined) {\n      flushSync(updateItems);\n    } else {\n      updateItems();\n    }\n  }, []);\n\n  useResize(ref, resizeCallback);\n\n  return (\n    <TabNavContext.Provider value={{ containerRef: ref, controlledItems, setControlledItems }}>\n      <BaseBox\n        as=\"nav\"\n        display=\"flex\"\n        width=\"100%\"\n        alignItems=\"center\"\n        alignSelf=\"center\"\n        position=\"relative\"\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ name: MetaConstants.TabNav })}\n        ref={ref}\n      >\n        <BaseBox display=\"flex\" width=\"100%\" position=\"relative\">\n          <BaseBox\n            ref={itemsRowRef}\n            display=\"flex\"\n            flexDirection=\"row\"\n            width=\"max-content\"\n            position=\"relative\"\n          >\n            {children({ items: _items, overflowingItems })}\n            <TabNavIndicator containerRef={itemsRowRef} />\n          </BaseBox>\n        </BaseBox>\n      </BaseBox>\n    </TabNavContext.Provider>\n  );\n};\n\nexport { TabNav, TabNavItems };\n"],"names":["TabNavItems","_ref","children","rest","_objectWithoutProperties","_excluded","_jsx","BaseBox","_objectSpread","display","width","gap","position","left","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","React","Children","map","child","index","cloneElement","__isInsideTabNavItems","__index","TabNav","_ref2","items","_excluded2","ref","useRef","itemsRowRef","_React$useState","useState","_React$useState2","_slicedToArray","controlledItems","setControlledItems","overflowingItems","filter","item","_item$isAlwaysOverflo","isAlwaysOverflowing","isOverflowing","_items","resizeCallback","useCallback","resizeInfo","target","updateItems","padding","offset","offsetX","getBoundingClientRect","offsetWidth","flushSync","ReactDOM","toString","undefined","useResize","TabNavContext","Provider","value","containerRef","as","alignItems","alignSelf","getStyledProps","_jsxs","flexDirection","TabNavIndicator"],"mappings":"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"}