@razorpay/blade 10.23.5 → 11.0.0

package/build/lib/web/development/components/Tabs/TabItem.web.js

@@ -4,15 +4,15 @@ import styled from 'styled-components';
 import 'react';
 import { CompositeItem } from '@floating-ui/react';
 import { useTabsContext } from './TabsContext.js';
-import { backgroundColor, paddingY, paddingX, textColor } from './tabTokens.js';
+import { backgroundColor, paddingY, paddingX, iconColor, textColor } from './tabTokens.js';
 import { useTabsItemPropRestriction, iconSizeMap } from './utils.js';
-import getIn from '../../utils/lodashButBetter/get.js';
 import '../Typography/index.js';
 import '../../utils/index.js';
 import useInteraction from '../../utils/useInteraction.js';
 import '../../utils/makeAccessible/index.js';
 import '../../tokens/global/index.js';
 import '../../utils/metaAttribute/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { getMediaQuery } from '../../utils/getMediaQuery/getMediaQuery.js';
@@ -45,10 +45,6 @@ var StyledTabButton = /*#__PURE__*/styled.button.withConfig({
   var selectedState = isSelected ? 'selected' : 'unselected';
   var _variant = variant === 'borderless' ? 'bordered' : variant;
   var background = backgroundColor[selectedState][_variant];
-  var getColor = function getColor(value) {
-    if (value === 'transparent') return 'transparent';
-    return getIn(theme, value);
-  };
   return _ref2 = {
     appearance: 'none',
     textDecoration: 'none',
@@ -73,16 +69,16 @@ var StyledTabButton = /*#__PURE__*/styled.button.withConfig({
     paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size])),
     paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size])),
     paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size]))
-  }), _defineProperty(_ref2, "backgroundColor", isSelected && isFilled && !isVertical ? 'transparent' : getColor(background["default"])), _defineProperty(_ref2, "borderRadius", isFilled && !isVertical ? theme.border.radius.small : 0), _defineProperty(_ref2, "".concat(border, "Style"), 'solid'), _defineProperty(_ref2, "".concat(border, "Width"), isFilled ? 0 : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin)), _defineProperty(_ref2, "".concat(border, "Color"), isVertical && isSelected ? theme.colors.brand.primary[500] : 'transparent'), _defineProperty(_ref2, '&:hover', (_hover = {}, _defineProperty(_hover, "".concat(border, "Color"), isVertical && isSelected ? theme.colors.brand.primary[500] : theme.colors.surface.border.normal.lowContrast), _defineProperty(_hover, "backgroundColor",
+  }), _defineProperty(_ref2, "backgroundColor", isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background["default"])), _defineProperty(_ref2, "borderRadius", isFilled && !isVertical ? theme.border.radius.small : 0), _defineProperty(_ref2, "".concat(border, "Style"), 'solid'), _defineProperty(_ref2, "".concat(border, "Width"), isFilled ? 0 : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin)), _defineProperty(_ref2, "".concat(border, "Color"), isVertical && isSelected ? theme.colors.interactive.border.primary["default"] : 'transparent'), _defineProperty(_ref2, '&:hover', (_hover = {}, _defineProperty(_hover, "".concat(border, "Color"), isVertical && isSelected ? theme.colors.interactive.border.primary["default"] : theme.colors.interactive.border.gray.highlighted), _defineProperty(_hover, "backgroundColor",
   // Don't want to show hover state on filled tabs when vertical because
   // The hover color needs to be on the TabIndicator instead.
-  isSelected && isFilled && !isVertical ? 'transparent' : getColor(background.hover)), _hover)), _defineProperty(_ref2, '&:disabled', {
+  isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background.highlighted)), _hover)), _defineProperty(_ref2, '&:disabled', {
     cursor: 'not-allowed',
-    backgroundColor: getColor(background.disabled)
+    backgroundColor: getIn(theme, background.disabled)
   }), _defineProperty(_ref2, '&:focus-visible', {
     borderRadius: makeSpace(theme.border.radius.medium),
-    boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
-    backgroundColor: getColor(background.focus)
+    boxShadow: "0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted),
+    backgroundColor: getIn(theme, background.highlighted)
   }), _defineProperty(_ref2, "transitionProperty", 'all'), _defineProperty(_ref2, "transitionTimingFunction", castWebType(theme.motion.easing.standard.effective)), _defineProperty(_ref2, "transitionDuration", castWebType(makeMotionTime(theme.motion.duration.gentle))), _defineProperty(_ref2, '*', {
     transitionProperty: 'color, fill',
     transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
@@ -115,6 +111,13 @@ var TabItem = function TabItem(_ref3) {
   var panelId = "".concat(baseId, "-").concat(value, "-tabpanel");
   var tabItemId = "".concat(baseId, "-").concat(value, "-tabitem");
   var isFilled = variant === 'filled';
+  var interactionMap = {
+    "default": 'default',
+    hover: 'highlighted',
+    focus: 'highlighted',
+    disabled: 'disabled'
+  };
+  var interaction = isDisabled ? 'disabled' : interactionMap[currentInteraction];
   return /*#__PURE__*/jsx(CompositeItem, {
     render: /*#__PURE__*/jsxs(StyledTabButton, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       as: href ? 'a' : 'button',
@@ -142,11 +145,11 @@ var TabItem = function TabItem(_ref3) {
     })), {}, {
       children: [Leading ? /*#__PURE__*/jsx(Leading, {
         size: iconSizeMap[size],
-        color: isSelected ? "brand.primary.500" : "surface.action.icon.".concat(currentInteraction, ".lowContrast")
+        color: iconColor[selectedState][interaction]
       }) : null, /*#__PURE__*/jsx(Text, {
-        color: textColor[selectedState][isDisabled ? 'disabled' : currentInteraction],
+        color: textColor[selectedState][interaction],
         size: size === 'medium' ? 'medium' : 'large',
-        weight: "bold",
+        weight: "semibold",
         children: children
       }), validatedTrailingComponent]
     }))

package/build/lib/web/development/components/Tabs/TabItem.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.web.js","sources":["../../../../../../src/components/Tabs/TabItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport styled from 'styled-components';\nimport React from 'react';\nimport { CompositeItem } from '@floating-ui/react';\nimport type { TabItemProps, TabsProps } from './types';\nimport { useTabsContext } from './TabsContext';\nimport { backgroundColor, paddingY, paddingX, textColor } from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport get from '~utils/lodashButBetter/get';\nimport { Text } from '~components/Typography';\nimport { castWebType, getMediaQuery, makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport useInteraction from '~utils/useInteraction';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { breakpoints } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst StyledTabButton = styled.button<{\n  size: TabsProps['size'];\n  isFullWidthTabItem?: TabsProps['isFullWidthTabItem'];\n  variant: NonNullable<TabsProps['variant']>;\n  isVertical: boolean;\n  isSelected: boolean;\n}>(({ theme, isSelected, size, variant, isFullWidthTabItem, isVertical }) => {\n  const isFilled = variant === 'filled';\n  const orientation = isVertical ? 'vertical' : 'horizontal';\n  const border = isVertical ? 'borderLeft' : 'borderBottom';\n  const selectedState = isSelected ? 'selected' : 'unselected';\n  const _variant = variant === 'borderless' ? 'bordered' : variant;\n  const background = backgroundColor[selectedState][_variant];\n\n  const getColor = (value: string): string => {\n    if (value === 'transparent') return 'transparent';\n    return get(theme, value);\n  };\n\n  return {\n    appearance: 'none',\n    textDecoration: 'none',\n    border: 'none',\n    outline: 'none',\n    cursor: 'pointer',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: isVertical ? 'left' : 'center',\n    gap: makeSpace(theme.spacing[3]),\n    width: isFullWidthTabItem ? '100%' : undefined,\n\n    // Padding\n    paddingTop: makeSpace(get(theme, paddingY[_variant][orientation].desktop[size!])),\n    paddingBottom: makeSpace(get(theme, paddingY[_variant][orientation].desktop[size!])),\n    paddingLeft: makeSpace(get(theme, paddingX[_variant][orientation].desktop[size!])),\n    paddingRight: makeSpace(get(theme, paddingX[_variant][orientation].desktop[size!])),\n\n    [`@media ${getMediaQuery({ min: breakpoints.base, max: breakpoints.m })}`]: {\n      paddingTop: makeSpace(get(theme, paddingY[_variant][orientation].mobile[size!])),\n      paddingBottom: makeSpace(get(theme, paddingY[_variant][orientation].mobile[size!])),\n      paddingLeft: makeSpace(get(theme, paddingX[_variant][orientation].mobile[size!])),\n      paddingRight: makeSpace(get(theme, paddingX[_variant][orientation].mobile[size!])),\n    },\n\n    // colors\n    backgroundColor:\n      isSelected && isFilled && !isVertical ? 'transparent' : getColor(background.default),\n    borderRadius: isFilled && !isVertical ? theme.border.radius.small : 0,\n    [`${border}Style`]: 'solid',\n    [`${border}Width`]: isFilled\n      ? 0\n      : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin),\n    [`${border}Color`]: isVertical && isSelected ? theme.colors.brand.primary[500] : 'transparent',\n\n    // states\n    '&:hover': {\n      [`${border}Color`]:\n        isVertical && isSelected\n          ? theme.colors.brand.primary[500]\n          : theme.colors.surface.border.normal.lowContrast,\n      backgroundColor:\n        // Don't want to show hover state on filled tabs when vertical because\n        // The hover color needs to be on the TabIndicator instead.\n        isSelected && isFilled && !isVertical ? 'transparent' : getColor(background.hover),\n    },\n    '&:disabled': {\n      cursor: 'not-allowed',\n      backgroundColor: getColor(background.disabled),\n    },\n    '&:focus-visible': {\n      borderRadius: makeSpace(theme.border.radius.medium),\n      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,\n      backgroundColor: getColor(background.focus),\n    },\n\n    transitionProperty: 'all',\n    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),\n    transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),\n    '*': {\n      transitionProperty: 'color, fill',\n      transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n    },\n  };\n});\n\nconst TabItem = ({\n  children,\n  value,\n  leading: Leading,\n  trailing,\n  isDisabled = false,\n  href,\n  onClick,\n}: TabItemProps): React.ReactElement => {\n  const {\n    size,\n    isFullWidthTabItem,\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    variant,\n    isVertical,\n  } = useTabsContext();\n  const { currentInteraction, ...interactionProps } = useInteraction();\n  const validatedTrailingComponent = useTabsItemPropRestriction(trailing, size!);\n  const isSelected = selectedValue === value;\n  const selectedState = isSelected ? 'selected' : 'unselected';\n  const panelId = `${baseId}-${value}-tabpanel`;\n  const tabItemId = `${baseId}-${value}-tabitem`;\n  const isFilled = variant === 'filled';\n\n  return (\n    <CompositeItem\n      render={\n        <StyledTabButton\n          as={href ? 'a' : 'button'}\n          href={href}\n          isVertical={isVertical}\n          isSelected={isSelected}\n          variant={variant!}\n          isFullWidthTabItem={isFullWidthTabItem || isFilled}\n          id={tabItemId}\n          size={size}\n          disabled={isDisabled}\n          {...interactionProps}\n          onClick={(e: React.MouseEvent) => {\n            setSelectedValue?.(() => value);\n            onClick?.(e);\n          }}\n          {...makeAccessible({\n            role: 'tab',\n            selected: isSelected,\n            controls: panelId,\n          })}\n          {...metaAttribute({ name: MetaConstants.TabItem })}\n        >\n          {Leading ? (\n            <Leading\n              size={iconSizeMap[size!]}\n              color={\n                isSelected\n                  ? `brand.primary.500`\n                  : `surface.action.icon.${currentInteraction}.lowContrast`\n              }\n            />\n          ) : null}\n          <Text\n            color={textColor[selectedState][isDisabled ? 'disabled' : currentInteraction]}\n            size={size === 'medium' ? 'medium' : 'large'}\n            weight=\"bold\"\n          >\n            {children}\n          </Text>\n          {validatedTrailingComponent}\n        </StyledTabButton>\n      }\n    />\n  );\n};\n\nexport { TabItem };\n"],"names":["StyledTabButton","styled","button","withConfig","displayName","componentId","_ref","_hover","_ref2","theme","isSelected","size","variant","isFullWidthTabItem","isVertical","isFilled","orientation","border","selectedState","_variant","background","backgroundColor","getColor","value","get","appearance","textDecoration","outline","cursor","display","alignItems","justifyContent","gap","makeSpace","spacing","width","undefined","paddingTop","paddingY","desktop","paddingBottom","paddingLeft","paddingX","paddingRight","_defineProperty","concat","getMediaQuery","min","breakpoints","base","max","m","mobile","radius","small","makeBorderSize","thick","thin","colors","brand","primary","surface","normal","lowContrast","hover","disabled","borderRadius","medium","boxShadow","focus","castWebType","motion","easing","standard","effective","makeMotionTime","duration","gentle","transitionProperty","transitionTimingFunction","transitionDuration","xquick","TabItem","_ref3","children","Leading","leading","trailing","_ref3$isDisabled","isDisabled","href","onClick","_useTabsContext","useTabsContext","selectedValue","setSelectedValue","baseId","_useInteraction","useInteraction","currentInteraction","interactionProps","_objectWithoutProperties","_excluded","validatedTrailingComponent","useTabsItemPropRestriction","panelId","tabItemId","_jsx","CompositeItem","render","_jsxs","_objectSpread","as","id","e","makeAccessible","role","selected","controls","metaAttribute","name","MetaConstants","iconSizeMap","color","Text","textColor","weight"],"mappings":"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"}
+{"version":3,"file":"TabItem.web.js","sources":["../../../../../../src/components/Tabs/TabItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport styled from 'styled-components';\nimport React from 'react';\nimport { CompositeItem } from '@floating-ui/react';\nimport type { TabItemProps, TabsProps } from './types';\nimport { useTabsContext } from './TabsContext';\nimport { backgroundColor, paddingY, paddingX, textColor, iconColor } from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport { Text } from '~components/Typography';\nimport { castWebType, getMediaQuery, makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport useInteraction from '~utils/useInteraction';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { breakpoints } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst StyledTabButton = styled.button<{\n  size: TabsProps['size'];\n  isFullWidthTabItem?: TabsProps['isFullWidthTabItem'];\n  variant: NonNullable<TabsProps['variant']>;\n  isVertical: boolean;\n  isSelected: boolean;\n}>(({ theme, isSelected, size, variant, isFullWidthTabItem, isVertical }) => {\n  const isFilled = variant === 'filled';\n  const orientation = isVertical ? 'vertical' : 'horizontal';\n  const border = isVertical ? 'borderLeft' : 'borderBottom';\n  const selectedState: 'selected' | 'unselected' = isSelected ? 'selected' : 'unselected';\n  const _variant = variant === 'borderless' ? 'bordered' : variant;\n  const background = backgroundColor[selectedState][_variant];\n\n  return {\n    appearance: 'none',\n    textDecoration: 'none',\n    border: 'none',\n    outline: 'none',\n    cursor: 'pointer',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: isVertical ? 'left' : 'center',\n    gap: makeSpace(theme.spacing[3]),\n    width: isFullWidthTabItem ? '100%' : undefined,\n\n    // Padding\n    paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),\n    paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),\n    paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),\n    paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),\n\n    [`@media ${getMediaQuery({ min: breakpoints.base, max: breakpoints.m })}`]: {\n      paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),\n      paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),\n      paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),\n      paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),\n    },\n\n    // colors\n    backgroundColor:\n      isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background.default),\n    borderRadius: isFilled && !isVertical ? theme.border.radius.small : 0,\n    [`${border}Style`]: 'solid',\n    [`${border}Width`]: isFilled\n      ? 0\n      : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin),\n    [`${border}Color`]:\n      isVertical && isSelected ? theme.colors.interactive.border.primary.default : 'transparent',\n\n    // states\n    '&:hover': {\n      [`${border}Color`]:\n        isVertical && isSelected\n          ? theme.colors.interactive.border.primary.default\n          : theme.colors.interactive.border.gray.highlighted,\n      backgroundColor:\n        // Don't want to show hover state on filled tabs when vertical because\n        // The hover color needs to be on the TabIndicator instead.\n        isSelected && isFilled && !isVertical\n          ? 'transparent'\n          : getIn(theme, background.highlighted),\n    },\n    '&:disabled': {\n      cursor: 'not-allowed',\n      backgroundColor: getIn(theme, background.disabled),\n    },\n    '&:focus-visible': {\n      borderRadius: makeSpace(theme.border.radius.medium),\n      boxShadow: `0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`,\n      backgroundColor: getIn(theme, background.highlighted),\n    },\n\n    transitionProperty: 'all',\n    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),\n    transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),\n    '*': {\n      transitionProperty: 'color, fill',\n      transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n    },\n  };\n});\n\nconst TabItem = ({\n  children,\n  value,\n  leading: Leading,\n  trailing,\n  isDisabled = false,\n  href,\n  onClick,\n}: TabItemProps): React.ReactElement => {\n  const {\n    size,\n    isFullWidthTabItem,\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    variant,\n    isVertical,\n  } = useTabsContext();\n  const { currentInteraction, ...interactionProps } = useInteraction();\n  const validatedTrailingComponent = useTabsItemPropRestriction(trailing, size!);\n  const isSelected = selectedValue === value;\n  const selectedState = isSelected ? 'selected' : 'unselected';\n  const panelId = `${baseId}-${value}-tabpanel`;\n  const tabItemId = `${baseId}-${value}-tabitem`;\n  const isFilled = variant === 'filled';\n\n  const interactionMap = {\n    default: 'default',\n    hover: 'highlighted',\n    focus: 'highlighted',\n    disabled: 'disabled',\n  } as const;\n  const interaction = isDisabled ? 'disabled' : interactionMap[currentInteraction];\n\n  return (\n    <CompositeItem\n      render={\n        <StyledTabButton\n          as={href ? 'a' : 'button'}\n          href={href}\n          isVertical={isVertical}\n          isSelected={isSelected}\n          variant={variant!}\n          isFullWidthTabItem={isFullWidthTabItem || isFilled}\n          id={tabItemId}\n          size={size}\n          disabled={isDisabled}\n          {...interactionProps}\n          onClick={(e: React.MouseEvent) => {\n            setSelectedValue?.(() => value);\n            onClick?.(e);\n          }}\n          {...makeAccessible({\n            role: 'tab',\n            selected: isSelected,\n            controls: panelId,\n          })}\n          {...metaAttribute({ name: MetaConstants.TabItem })}\n        >\n          {Leading ? (\n            <Leading size={iconSizeMap[size!]} color={iconColor[selectedState][interaction]} />\n          ) : null}\n          <Text\n            color={textColor[selectedState][interaction]}\n            size={size === 'medium' ? 'medium' : 'large'}\n            weight=\"semibold\"\n          >\n            {children}\n          </Text>\n          {validatedTrailingComponent}\n        </StyledTabButton>\n      }\n    />\n  );\n};\n\nexport { TabItem };\n"],"names":["StyledTabButton","styled","button","withConfig","displayName","componentId","_ref","_hover","_ref2","theme","isSelected","size","variant","isFullWidthTabItem","isVertical","isFilled","orientation","border","selectedState","_variant","background","backgroundColor","appearance","textDecoration","outline","cursor","display","alignItems","justifyContent","gap","makeSpace","spacing","width","undefined","paddingTop","getIn","paddingY","desktop","paddingBottom","paddingLeft","paddingX","paddingRight","_defineProperty","concat","getMediaQuery","min","breakpoints","base","max","m","mobile","radius","small","makeBorderSize","thick","thin","colors","interactive","primary","gray","highlighted","disabled","borderRadius","medium","boxShadow","surface","muted","castWebType","motion","easing","standard","effective","makeMotionTime","duration","gentle","transitionProperty","transitionTimingFunction","transitionDuration","xquick","TabItem","_ref3","children","value","Leading","leading","trailing","_ref3$isDisabled","isDisabled","href","onClick","_useTabsContext","useTabsContext","selectedValue","setSelectedValue","baseId","_useInteraction","useInteraction","currentInteraction","interactionProps","_objectWithoutProperties","_excluded","validatedTrailingComponent","useTabsItemPropRestriction","panelId","tabItemId","interactionMap","hover","focus","interaction","_jsx","CompositeItem","render","_jsxs","_objectSpread","as","id","e","makeAccessible","role","selected","controls","metaAttribute","name","MetaConstants","iconSizeMap","color","iconColor","Text","textColor","weight"],"mappings":"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"}

package/build/lib/web/development/components/Tabs/TabList.web.js

@@ -5,6 +5,7 @@ import { Composite } from '@floating-ui/react';
 import styled from 'styled-components';
 import { useTabsContext } from './TabsContext.js';
 import { TabIndicator } from './TabIndicator.web.js';
+import { trackColor } from './tabTokens.js';
 import '../Box/BaseBox/index.js';
 import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
 import '../Divider/index.js';
@@ -73,11 +74,12 @@ var TabList = function TabList(_ref) {
             flexDirection: "row",
             display: "flex",
             children: [isVertical && isBordered ? /*#__PURE__*/jsx(BaseBox, {
-              width: "1.5px",
+              width: "0px",
               height: "auto",
               flexGrow: 1,
               flexShrink: 0,
-              backgroundColor: "surface.border.normal.lowContrast",
+              borderColor: trackColor,
+              borderWidth: "thin",
               style: {
                 transform: 'translateX(1.5px)'
               }
@@ -93,10 +95,10 @@ var TabList = function TabList(_ref) {
             }, isFilled ? {
               borderRadius: 'small',
               borderWidth: 'thin',
-              borderColor: 'surface.border.normal.lowContrast',
+              borderColor: 'interactive.border.gray.faded',
               padding: 'spacing.2',
               gap: isVertical ? 'spacing.0' : 'spacing.1',
-              backgroundColor: 'surface.background.level2.lowContrast'
+              backgroundColor: 'surface.background.gray.intense'
             } : {
               padding: 'spacing.0',
               gap: isVertical ? 'spacing.0' : {
@@ -124,7 +126,7 @@ var TabList = function TabList(_ref) {
       style: {
         transform: 'translateY(-1px)'
       },
-      borderBottomColor: "surface.border.normal.lowContrast",
+      borderBottomColor: trackColor,
       borderBottomWidth: "thin"
     }) : null]
   }));

package/build/lib/web/development/components/Tabs/TabList.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.web.js","sources":["../../../../../../src/components/Tabs/TabList.web.tsx"],"sourcesContent":["import React from 'react';\nimport { Composite } from '@floating-ui/react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { TabIndicator } from './TabIndicator';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { Divider } from '~components/Divider';\nimport { Box } from '~components/Box';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst ScrollableArea = styled(BaseBox)(() => {\n  return {\n    '&::-webkit-scrollbar': { display: 'none' },\n  };\n});\n\nconst TabList = ({\n  children,\n  ...props\n}: { children: React.ReactNode } & StyledPropsBlade): React.ReactElement => {\n  const { setSelectedValue, selectedValue, variant, isVertical } = useTabsContext();\n  const tabListContainerRef = React.useRef<HTMLDivElement>(null);\n  const isBordered = variant === 'bordered';\n  const isFilled = variant === 'filled';\n\n  // Set the first child as the selected value\n  useIsomorphicLayoutEffect(() => {\n    if (selectedValue) return;\n    const first = React.Children.toArray(children)[0];\n    if (React.isValidElement(first)) {\n      // We need to skip calling onChange on the first render when we set the initial value\n      setSelectedValue?.(() => first.props.value, true);\n    }\n  }, [children, selectedValue, setSelectedValue]);\n\n  return (\n    <Box\n      {...getStyledProps(props)}\n      {...metaAttribute({ name: MetaConstants.TabList })}\n      display={isVertical ? 'flex' : 'block'}\n      flexShrink={0}\n      overflow=\"hidden\"\n    >\n      <ScrollableArea\n        position=\"relative\"\n        whiteSpace=\"nowrap\"\n        flex=\"1 1 auto\"\n        width=\"100%\"\n        overflow=\"auto hidden\"\n      >\n        <Composite\n          render={(htmlProps) => {\n            return (\n              <BaseBox flexDirection=\"row\" display=\"flex\">\n                {isVertical && isBordered ? (\n                  <BaseBox\n                    width=\"1.5px\"\n                    height=\"auto\"\n                    flexGrow={1}\n                    flexShrink={0}\n                    backgroundColor=\"surface.border.normal.lowContrast\"\n                    style={{ transform: 'translateX(1.5px)' }}\n                  />\n                ) : null}\n                {/* @ts-expect-error spreading composite props */}\n                <BaseBox\n                  {...htmlProps}\n                  flexGrow={1}\n                  ref={tabListContainerRef}\n                  role=\"tablist\"\n                  width=\"100%\"\n                  display=\"flex\"\n                  flexDirection={isVertical ? 'column' : 'row'}\n                  alignItems={isVertical ? 'start' : 'center'}\n                  overflow={isVertical ? 'hidden' : undefined}\n                  {...(isFilled\n                    ? {\n                        borderRadius: 'small',\n                        borderWidth: 'thin',\n                        borderColor: 'surface.border.normal.lowContrast',\n                        padding: 'spacing.2',\n                        gap: isVertical ? 'spacing.0' : 'spacing.1',\n                        backgroundColor: 'surface.background.level2.lowContrast',\n                      }\n                    : {\n                        padding: 'spacing.0',\n                        gap: isVertical ? 'spacing.0' : { base: 'spacing.7', m: 'spacing.8' },\n                      })}\n                >\n                  {variant === 'filled' && !isVertical\n                    ? React.Children.map(children, (child, index) => {\n                        return (\n                          <>\n                            {index > 0 ? (\n                              <Divider\n                                margin=\"auto\"\n                                height=\"20px\"\n                                variant=\"subtle\"\n                                orientation=\"vertical\"\n                              />\n                            ) : null}\n                            {child}\n                          </>\n                        );\n                      })\n                    : children}\n                </BaseBox>\n              </BaseBox>\n            );\n          }}\n        />\n        {!isVertical ? <TabIndicator tabListContainerRef={tabListContainerRef} /> : null}\n      </ScrollableArea>\n      {/*\n        Adding border bottom with an div element, we can't put it on the outer Box of tablist because \n        it's not possible to offset or translate a border \n      */}\n      {!isVertical && isBordered ? (\n        <BaseBox\n          style={{ transform: 'translateY(-1px)' }}\n          borderBottomColor=\"surface.border.normal.lowContrast\"\n          borderBottomWidth=\"thin\"\n        />\n      ) : null}\n    </Box>\n  );\n};\n\nexport { TabList };\n"],"names":["ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","TabList","_ref","children","props","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","setSelectedValue","selectedValue","variant","isVertical","tabListContainerRef","React","useRef","isBordered","isFilled","useIsomorphicLayoutEffect","first","Children","toArray","isValidElement","value","_jsxs","Box","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","flexShrink","overflow","position","whiteSpace","flex","width","_jsx","Composite","render","htmlProps","flexDirection","height","flexGrow","backgroundColor","style","transform","ref","role","alignItems","undefined","borderRadius","borderWidth","borderColor","padding","gap","base","m","map","child","index","_Fragment","Divider","margin","orientation","TabIndicator","borderBottomColor","borderBottomWidth"],"mappings":"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"}
+{"version":3,"file":"TabList.web.js","sources":["../../../../../../src/components/Tabs/TabList.web.tsx"],"sourcesContent":["import React from 'react';\nimport { Composite } from '@floating-ui/react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { TabIndicator } from './TabIndicator';\nimport { trackColor } from './tabTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { Divider } from '~components/Divider';\nimport { Box } from '~components/Box';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst ScrollableArea = styled(BaseBox)(() => {\n  return {\n    '&::-webkit-scrollbar': { display: 'none' },\n  };\n});\n\nconst TabList = ({\n  children,\n  ...props\n}: { children: React.ReactNode } & StyledPropsBlade): React.ReactElement => {\n  const { setSelectedValue, selectedValue, variant, isVertical } = useTabsContext();\n  const tabListContainerRef = React.useRef<HTMLDivElement>(null);\n  const isBordered = variant === 'bordered';\n  const isFilled = variant === 'filled';\n\n  // Set the first child as the selected value\n  useIsomorphicLayoutEffect(() => {\n    if (selectedValue) return;\n    const first = React.Children.toArray(children)[0];\n    if (React.isValidElement(first)) {\n      // We need to skip calling onChange on the first render when we set the initial value\n      setSelectedValue?.(() => first.props.value, true);\n    }\n  }, [children, selectedValue, setSelectedValue]);\n\n  return (\n    <Box\n      {...getStyledProps(props)}\n      {...metaAttribute({ name: MetaConstants.TabList })}\n      display={isVertical ? 'flex' : 'block'}\n      flexShrink={0}\n      overflow=\"hidden\"\n    >\n      <ScrollableArea\n        position=\"relative\"\n        whiteSpace=\"nowrap\"\n        flex=\"1 1 auto\"\n        width=\"100%\"\n        overflow=\"auto hidden\"\n      >\n        <Composite\n          render={(htmlProps) => {\n            return (\n              <BaseBox flexDirection=\"row\" display=\"flex\">\n                {isVertical && isBordered ? (\n                  <BaseBox\n                    width=\"0px\"\n                    height=\"auto\"\n                    flexGrow={1}\n                    flexShrink={0}\n                    borderColor={trackColor}\n                    borderWidth=\"thin\"\n                    style={{ transform: 'translateX(1.5px)' }}\n                  />\n                ) : null}\n                {/* @ts-expect-error spreading composite props */}\n                <BaseBox\n                  {...htmlProps}\n                  flexGrow={1}\n                  ref={tabListContainerRef}\n                  role=\"tablist\"\n                  width=\"100%\"\n                  display=\"flex\"\n                  flexDirection={isVertical ? 'column' : 'row'}\n                  alignItems={isVertical ? 'start' : 'center'}\n                  overflow={isVertical ? 'hidden' : undefined}\n                  {...(isFilled\n                    ? {\n                        borderRadius: 'small',\n                        borderWidth: 'thin',\n                        borderColor: 'interactive.border.gray.faded',\n                        padding: 'spacing.2',\n                        gap: isVertical ? 'spacing.0' : 'spacing.1',\n                        backgroundColor: 'surface.background.gray.intense',\n                      }\n                    : {\n                        padding: 'spacing.0',\n                        gap: isVertical ? 'spacing.0' : { base: 'spacing.7', m: 'spacing.8' },\n                      })}\n                >\n                  {variant === 'filled' && !isVertical\n                    ? React.Children.map(children, (child, index) => {\n                        return (\n                          <>\n                            {index > 0 ? (\n                              <Divider\n                                margin=\"auto\"\n                                height=\"20px\"\n                                variant=\"subtle\"\n                                orientation=\"vertical\"\n                              />\n                            ) : null}\n                            {child}\n                          </>\n                        );\n                      })\n                    : children}\n                </BaseBox>\n              </BaseBox>\n            );\n          }}\n        />\n        {!isVertical ? <TabIndicator tabListContainerRef={tabListContainerRef} /> : null}\n      </ScrollableArea>\n      {/*\n        Adding border bottom with an div element, we can't put it on the outer Box of tablist because \n        it's not possible to offset or translate a border \n      */}\n      {!isVertical && isBordered ? (\n        <BaseBox\n          style={{ transform: 'translateY(-1px)' }}\n          borderBottomColor={trackColor}\n          borderBottomWidth=\"thin\"\n        />\n      ) : null}\n    </Box>\n  );\n};\n\nexport { TabList };\n"],"names":["ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","TabList","_ref","children","props","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","setSelectedValue","selectedValue","variant","isVertical","tabListContainerRef","React","useRef","isBordered","isFilled","useIsomorphicLayoutEffect","first","Children","toArray","isValidElement","value","_jsxs","Box","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","flexShrink","overflow","position","whiteSpace","flex","width","_jsx","Composite","render","htmlProps","flexDirection","height","flexGrow","borderColor","trackColor","borderWidth","style","transform","ref","role","alignItems","undefined","borderRadius","padding","gap","backgroundColor","base","m","map","child","index","_Fragment","Divider","margin","orientation","TabIndicator","borderBottomColor","borderBottomWidth"],"mappings":"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"}

package/build/lib/web/development/components/Tabs/tabTokens.js

@@ -90,70 +90,67 @@ var paddingX = {
     }
   }
 };
+var trackColor = 'surface.border.gray.muted';
 var textColor = {
   selected: {
-    "default": 'brand.primary.500',
-    hover: 'brand.primary.600',
-    focus: 'brand.primary.600',
-    active: 'brand.primary.600',
-    disabled: 'surface.text.placeholder.lowContrast'
+    "default": 'interactive.text.primary.subtle',
+    highlighted: 'interactive.text.primary.normal',
+    disabled: 'interactive.text.primary.normal'
   },
   unselected: {
-    "default": 'surface.text.muted.lowContrast',
-    hover: 'surface.text.subdued.lowContrast',
-    focus: 'surface.text.subdued.lowContrast',
-    active: 'surface.text.subdued.lowContrast',
-    disabled: 'surface.text.placeholder.lowContrast'
+    "default": 'interactive.text.gray.muted',
+    highlighted: 'interactive.text.gray.subtle',
+    disabled: 'interactive.text.gray.disabled'
   }
 };
 var backgroundColor = {
   unselected: {
     bordered: {
-      "default": 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent'
+      "default": 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent'
     },
     borderless: {
-      "default": 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent'
+      "default": 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent'
     },
     filled: {
-      "default": 'transparent',
-      hover: 'colors.brand.gray.a50.lowContrast',
-      focus: 'colors.brand.gray.a50.lowContrast',
-      active: 'colors.brand.gray.a50.lowContrast',
-      disabled: 'transparent'
+      "default": 'colors.transparent',
+      highlighted: 'colors.interactive.background.gray.default',
+      disabled: 'colors.transparent'
     }
   },
   selected: {
     bordered: {
-      "default": 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent'
+      "default": 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent'
     },
     borderless: {
-      "default": 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent'
+      "default": 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent'
     },
     filled: {
-      "default": 'colors.brand.primary.300',
-      hover: 'colors.brand.primary.400',
-      focus: 'colors.brand.primary.400',
-      active: 'colors.brand.primary.400',
-      disabled: 'transparent'
+      "default": 'colors.interactive.background.primary.faded',
+      highlighted: 'colors.interactive.background.primary.faded',
+      disabled: 'colors.transparent'
     }
   }
 };
+var iconColor = {
+  unselected: {
+    "default": 'interactive.icon.gray.muted',
+    highlighted: 'interactive.icon.gray.subtle',
+    disabled: 'interactive.icon.gray.disabled'
+  },
+  selected: {
+    "default": 'interactive.icon.primary.subtle',
+    highlighted: 'interactive.icon.primary.normal',
+    disabled: 'interactive.icon.primary.disabled'
+  }
+};
 
-export { backgroundColor, paddingX, paddingY, textColor };
+export { backgroundColor, iconColor, paddingX, paddingY, textColor, trackColor };
 //# sourceMappingURL=tabTokens.js.map

package/build/lib/web/development/components/Tabs/tabTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabTokens.js","sources":["../../../../../../src/components/Tabs/tabTokens.ts"],"sourcesContent":["import type { TabsProps } from './types';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\nimport type { DeviceType } from '~utils';\n\ntype TabSizes = NonNullable<TabsProps['size']>;\ntype TabVariants = Exclude<NonNullable<TabsProps['variant']>, 'borderless'>;\ntype TabOrientation = 'horizontal' | 'vertical';\n\ntype TabItemPadding = Record<\n  TabVariants,\n  Record<TabOrientation, Record<DeviceType, Record<TabSizes, DotNotationSpacingStringToken>>>\n>;\n\nconst paddingY: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.5',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst paddingX: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n      mobile: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst textColor = {\n  selected: {\n    default: 'brand.primary.500',\n    hover: 'brand.primary.600',\n    focus: 'brand.primary.600',\n    active: 'brand.primary.600',\n    disabled: 'surface.text.placeholder.lowContrast',\n  },\n  unselected: {\n    default: 'surface.text.muted.lowContrast',\n    hover: 'surface.text.subdued.lowContrast',\n    focus: 'surface.text.subdued.lowContrast',\n    active: 'surface.text.subdued.lowContrast',\n    disabled: 'surface.text.placeholder.lowContrast',\n  },\n} as const;\n\nconst backgroundColor = {\n  unselected: {\n    bordered: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    borderless: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    filled: {\n      default: 'transparent',\n      hover: 'colors.brand.gray.a50.lowContrast',\n      focus: 'colors.brand.gray.a50.lowContrast',\n      active: 'colors.brand.gray.a50.lowContrast',\n      disabled: 'transparent',\n    },\n  },\n  selected: {\n    bordered: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    borderless: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    filled: {\n      default: 'colors.brand.primary.300',\n      hover: 'colors.brand.primary.400',\n      focus: 'colors.brand.primary.400',\n      active: 'colors.brand.primary.400',\n      disabled: 'transparent',\n    },\n  },\n} as const;\n\nexport { backgroundColor, textColor, paddingY, paddingX };\n"],"names":["paddingY","bordered","horizontal","desktop","medium","large","mobile","vertical","filled","paddingX","textColor","selected","hover","focus","active","disabled","unselected","backgroundColor","borderless"],"mappings":"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"}
+{"version":3,"file":"tabTokens.js","sources":["../../../../../../src/components/Tabs/tabTokens.ts"],"sourcesContent":["import type { TabsProps } from './types';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\nimport type { DeviceType } from '~utils';\n\ntype TabSizes = NonNullable<TabsProps['size']>;\ntype TabVariants = Exclude<NonNullable<TabsProps['variant']>, 'borderless'>;\ntype TabOrientation = 'horizontal' | 'vertical';\n\ntype TabItemPadding = Record<\n  TabVariants,\n  Record<TabOrientation, Record<DeviceType, Record<TabSizes, DotNotationSpacingStringToken>>>\n>;\n\nconst paddingY: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.5',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst paddingX: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n      mobile: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst trackColor = 'surface.border.gray.muted';\nconst textColor = {\n  selected: {\n    default: 'interactive.text.primary.subtle',\n    highlighted: 'interactive.text.primary.normal',\n    disabled: 'interactive.text.primary.normal',\n  },\n  unselected: {\n    default: 'interactive.text.gray.muted',\n    highlighted: 'interactive.text.gray.subtle',\n    disabled: 'interactive.text.gray.disabled',\n  },\n} as const;\n\nconst backgroundColor = {\n  unselected: {\n    bordered: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    borderless: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    filled: {\n      default: 'colors.transparent',\n      highlighted: 'colors.interactive.background.gray.default',\n      disabled: 'colors.transparent',\n    },\n  },\n  selected: {\n    bordered: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    borderless: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    filled: {\n      default: 'colors.interactive.background.primary.faded',\n      highlighted: 'colors.interactive.background.primary.faded',\n      disabled: 'colors.transparent',\n    },\n  },\n} as const;\n\nconst iconColor = {\n  unselected: {\n    default: 'interactive.icon.gray.muted',\n    highlighted: 'interactive.icon.gray.subtle',\n    disabled: 'interactive.icon.gray.disabled',\n  },\n  selected: {\n    default: 'interactive.icon.primary.subtle',\n    highlighted: 'interactive.icon.primary.normal',\n    disabled: 'interactive.icon.primary.disabled',\n  },\n} as const;\n\nexport { backgroundColor, textColor, iconColor, trackColor, paddingY, paddingX };\n"],"names":["paddingY","bordered","horizontal","desktop","medium","large","mobile","vertical","filled","paddingX","trackColor","textColor","selected","highlighted","disabled","unselected","backgroundColor","borderless","iconColor"],"mappings":"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"}

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

@@ -34,8 +34,8 @@ var FocussableTag = /*#__PURE__*/styled(BaseBox).withConfig({
 })(function (props) {
   if (props._isVirtuallyFocused && !isReactNative()) {
     return {
-      outline: "".concat(makeSize(size['1']), " solid ").concat(props.theme.colors.surface.background.level1.lowContrast),
-      boxShadow: "0px 0px 0px 4px ".concat(props.theme.colors.brand.primary[400])
+      outline: "".concat(makeSize(size['1']), " solid ").concat(props.theme.colors.surface.background.gray.subtle),
+      boxShadow: "0px 0px 0px 4px ".concat(props.theme.colors.interactive.background.primary.faded)
     };
   }
   return {};
@@ -80,7 +80,9 @@ var Tag = function Tag(_ref) {
     _isTagInsideInput = _ref._isTagInsideInput,
     styledProps = _objectWithoutProperties(_ref, _excluded);
   var isMobile = useIsMobile();
-  var textColor = isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast';
+  var textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';
+  var iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';
+  var backgroundColor = isDisabled ? 'interactive.background.gray.disabled' : 'interactive.background.gray.default';
   var mediumPadding = {
     base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],
     m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3']
@@ -106,7 +108,7 @@ var Tag = function Tag(_ref) {
       alignSelf: isReactNative() ? 'center' : undefined,
       flexDirection: "row",
       flexWrap: "nowrap",
-      backgroundColor: "brand.gray.a100.lowContrast",
+      backgroundColor: backgroundColor,
       borderRadius: "max",
       padding: size$1 === 'medium' ? mediumPadding : largePadding,
       _isVirtuallyFocused: _isVirtuallyFocused,
@@ -115,7 +117,7 @@ var Tag = function Tag(_ref) {
         flexDirection: "row",
         alignItems: "center",
         children: /*#__PURE__*/jsx(Icon, {
-          color: textColor,
+          color: iconColor,
           size: assetSize,
           marginRight: "spacing.2"
         })

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.level1.lowContrast\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.brand.primary[400]}`,\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\n    ? 'surface.text.placeholder.lowContrast'\n    : 'surface.text.subtle.lowContrast';\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=\"brand.gray.a100.lowContrast\"\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={textColor} 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","level1","lowContrast","boxShadow","brand","primary","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","backgroundColor","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        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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"}

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

@@ -130,8 +130,8 @@ var Tooltip = function Tooltip(_ref) {
             context: context,
             width: ARROW_WIDTH,
             height: ARROW_HEIGHT,
-            fillColor: theme.colors.brand.gray[200].highContrast,
-            strokeColor: theme.colors.brand.gray[300].highContrast
+            fillColor: theme.colors.popup.background.intense,
+            strokeColor: theme.colors.popup.border.intense
           }),
           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, 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      if (open) {\n        setIsOpen(true);\n        onOpenChange?.({ isOpen: open });\n      } else {\n        setIsOpen(false);\n        onOpenChange?.({ isOpen: open });\n      }\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.brand.gray[200].highContrast}\n                  strokeColor={theme.colors.brand.gray[300].highContrast}\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","brand","gray","highContrast","strokeColor"],"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, 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      if (open) {\n        setIsOpen(true);\n        onOpenChange?.({ isOpen: open });\n      } else {\n        setIsOpen(false);\n        onOpenChange?.({ isOpen: open });\n      }\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAMA,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IANtCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IACPC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,cAAA,GAAAJ,IAAA,CACRK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,cAAA;IACjBE,aAAY,GAAAN,IAAA,CAAZM,YAAY;IAAAC,WAAA,GAAAP,IAAA,CACZQ,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,aAAa,GAAAF,WAAA,CAAA;AAEtB,EAAA,IAAAG,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,EAAE,GAAGC,KAAK,EAAE,CAAA;AAClB,EAAA,IAAAC,eAAA,GAA4BC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAA1CK,IAAAA,MAAM,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,SAAS,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACxB,EAAA,IAAMI,QAAQ,GAAGN,cAAK,CAACO,MAAM,CAAgB,IAAI,CAAC,CAAA;AAElD,EAAA,IAAMC,GAAG,GAAGZ,KAAK,CAACa,OAAO,CAAC,CAAC,CAAC,CAAA;AAC5B,EAAA,IAAAC,qBAAA,GAAeC,yBAAyB,CAACtB,SAAS,CAAC;IAAAuB,sBAAA,GAAAT,cAAA,CAAAO,qBAAA,EAAA,CAAA,CAAA;AAA5CG,IAAAA,IAAI,GAAAD,sBAAA,CAAA,CAAA,CAAA,CAAA;EACX,IAAME,YAAY,GAAGD,IAAI,KAAK,MAAM,IAAIA,IAAI,KAAK,OAAO,CAAA;EACxD,IAAME,cAAc,GAAGF,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,QAAQ,CAAA;EAE5D,IAAAG,YAAA,GAA0CC,WAAW,CAAC;AACpD5B,MAAAA,SAAS,EAATA,SAAS;AACT6B,MAAAA,IAAI,EAAEd,MAAM;AACZe,MAAAA,QAAQ,EAAE,OAAO;AACjB7B,MAAAA,YAAY,EAAE,SAAAA,YAAC4B,CAAAA,IAAI,EAAK;AACtB,QAAA,IAAIA,IAAI,EAAE;UACRb,SAAS,CAAC,IAAI,CAAC,CAAA;AACff,UAAAA,aAAY,KAAZA,IAAAA,IAAAA,aAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAY,CAAG;AAAEc,YAAAA,MAAM,EAAEc,IAAAA;AAAK,WAAC,CAAC,CAAA;AAClC,SAAC,MAAM;UACLb,SAAS,CAAC,KAAK,CAAC,CAAA;AAChBf,UAAAA,aAAY,KAAZA,IAAAA,IAAAA,aAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAY,CAAG;AAAEc,YAAAA,MAAM,EAAEc,IAAAA;AAAK,WAAC,CAAC,CAAA;AAClC,SAAA;OACD;MACDE,UAAU,EAAE,CACVC,KAAK,CAAC;AAAEC,QAAAA,SAAS,EAAE,KAAK;AAAEC,QAAAA,OAAO,EAAEf,GAAAA;OAAK,CAAC,EACzCgB,IAAI,CAAC;AAAED,QAAAA,OAAO,EAAEf,GAAAA;OAAK,CAAC,EACtBiB,MAAM,CAACjB,GAAG,GAAGkB,YAAY,CAAC,EAC1BC,KAAK,CAAC;AACJC,QAAAA,OAAO,EAAEtB,QAAQ;AACjBiB,QAAAA,OAAO,EAAET,YAAY,GAAG,CAAC,GAAGe,WAAAA;AAC9B,OAAC,CAAC,CACH;AACDC,MAAAA,oBAAoB,EAAEC,UAAAA;AACxB,KAAC,CAAC;IAvBMC,IAAI,GAAAhB,YAAA,CAAJgB,IAAI;IAAEC,cAAc,GAAAjB,YAAA,CAAdiB,cAAc;IAAEC,OAAO,GAAAlB,YAAA,CAAPkB,OAAO,CAAA;AAyBrC,EAAA,IAAMC,eAAe,GAAGpB,cAAc,GAAG,CAACqB,IAAI,CAAC,CAAC,CAAC,GAAGA,IAAI,CAAC,CAAC,CAAC,CAAA;AAC3D,EAAA,IAAAC,oBAAA,GAA8BC,mBAAmB,CAACJ,OAAO,EAAE;AACzDK,MAAAA,QAAQ,EAAE3C,KAAK,CAAC4C,MAAM,CAACD,QAAQ,CAACE,KAAK;AACrCC,MAAAA,OAAO,EAAE;AACPC,QAAAA,OAAO,EAAE,CAAC;QACVC,SAAS,EAAA,WAAA,CAAAC,MAAA,CAAc/B,YAAY,GAAG,GAAG,GAAG,GAAG,EAAA,GAAA,CAAA,CAAA+B,MAAA,CAAIV,eAAe,EAAA,KAAA,CAAA;AACpE,OAAA;AACF,KAAC,CAAC;IANMW,SAAS,GAAAT,oBAAA,CAATS,SAAS;IAAEC,MAAM,GAAAV,oBAAA,CAANU,MAAM,CAAA;EAQzBC,aAAa,CAACd,OAAO,EAAE;AAAErC,IAAAA,EAAE,EAAFA,EAAAA;AAAG,GAAC,CAAC,CAAA;AAC9B,EAAA,IAAAoD,qBAAA,GAAkBC,oBAAoB,EAAE;IAAhCC,KAAK,GAAAF,qBAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,KAAK,GAAGC,QAAQ,CAACnB,OAAO,EAAE;AAC9BiB,IAAAA,KAAK,EAALA,KAAK;AACLG,IAAAA,IAAI,EAAE,KAAA;AACR,GAAC,CAAC,CAAA;AACF,EAAA,IAAMC,KAAK,GAAGC,QAAQ,CAACtB,OAAO,CAAC,CAAA;AAC/B,EAAA,IAAMuB,IAAI,GAAGC,OAAO,CAACxB,OAAO,EAAE;AAAEuB,IAAAA,IAAI,EAAE,SAAA;AAAU,GAAC,CAAC,CAAA;EAClD,IAAAE,gBAAA,GAAgDC,eAAe,CAAC,CAACH,IAAI,EAAEL,KAAK,EAAEG,KAAK,CAAC,CAAC;IAA7EM,iBAAiB,GAAAF,gBAAA,CAAjBE,iBAAiB;IAAEC,gBAAgB,GAAAH,gBAAA,CAAhBG,gBAAgB,CAAA;AAE3C,EAAA,oBACEC,IAAA,CAACC,cAAc,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE,IAAK;IAAA/E,QAAA,EAAA,cAElCa,cAAK,CAACmE,YAAY,CAAChF,QAAQ,EAAAiF,aAAA,CAAAA,aAAA,CAAA;MAC1BC,GAAG,EAAErC,IAAI,CAACsC,YAAAA;AAAY,KAAA,EACnBC,cAAc,CAAC;AAAEC,MAAAA,KAAK,EAAEtF,OAAAA;AAAQ,KAAC,CAAC,CAClCuF,EAAAA,UAAU,CAACtF,QAAQ,CAACuF,KAAK,EAAEb,iBAAiB,EAAE,CAAC,CACnD,CAAC,EACDf,SAAS,iBACR6B,GAAA,CAACC,cAAc,EAAA;MAAAzF,QAAA,eACbwF,GAAA,CAACE,OAAO,EAAAT,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;QACNC,GAAG,EAAErC,IAAI,CAAC8C,WAAY;AACtBC,QAAAA,KAAK,EAAE9C,cAAe;AACtB+C,QAAAA,aAAa,EAAC,MAAA;AACd;AAAA;AACAxF,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAAA,EACXsE,gBAAgB,EAAE,CAAA,EAClBmB,aAAa,CAAC;QAAEC,IAAI,EAAEC,aAAa,CAACpG,OAAAA;AAAQ,OAAC,CAAC,CAAA,EAAA,EAAA,EAAA;QAAAI,QAAA,eAElDwF,GAAA,CAACS,cAAc,EAAA;AACbnG,UAAAA,KAAK,EAAEA,KAAM;AACb8F,UAAAA,KAAK,EAAEhC,MAAO;UACdpB,KAAK,eACHgD,GAAA,CAACU,UAAU,EAAA;AACThB,YAAAA,GAAG,EAAE/D,QAAS;AACd4B,YAAAA,OAAO,EAAEA,OAAQ;AACjBoD,YAAAA,KAAK,EAAEzD,WAAY;AACnB0D,YAAAA,MAAM,EAAE7D,YAAa;YACrB8D,SAAS,EAAE5F,KAAK,CAAC6F,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,OAAQ;YACjDC,WAAW,EAAEjG,KAAK,CAAC6F,MAAM,CAACC,KAAK,CAACI,MAAM,CAACF,OAAAA;AAAQ,WAChD,CACF;AAAAzG,UAAAA,QAAA,EAEAD,OAAAA;SACa,CAAA;OACT,CAAA,CAAA;AAAC,KACI,CACjB,CAAA;AAAA,GACsB,CAAC,CAAA;AAE9B;;;;"}