@razorpay/blade 11.39.0 → 12.0.1

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

@@ -107,7 +107,7 @@ var TabIndicator = function TabIndicator(_ref2) {
   var transitionProps = {
     transitionProperty: 'transform, width, background-color',
     transitionDuration: hasMeasured ? castWebType(makeMotionTime(theme.motion.duration.gentle)) : '0ms',
-    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective)
+    transitionTimingFunction: castWebType(theme.motion.easing.standard)
   };
   if (variant === 'filled') {
     return /*#__PURE__*/jsx(StyledTabIndicator, _objectSpread({

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

@@ -1 +1 @@
-{"version":3,"file":"TabIndicator.web.js","sources":["../../../../../../src/components/Tabs/TabIndicator.web.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { useTheme } from '~components/BladeProvider';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst StyledTabIndicator = styled(BaseBox)(({ theme }) => {\n  return {\n    cursor: 'pointer',\n    '&:hover': {\n      backgroundColor: theme.colors.interactive.background.primary.fadedHighlighted,\n    },\n  };\n});\n\nconst TabIndicator = ({\n  tabListContainerRef,\n}: {\n  tabListContainerRef: React.RefObject<HTMLElement | null>;\n}): React.ReactElement => {\n  const { theme } = useTheme();\n  const { selectedValue, baseId, variant } = useTabsContext();\n  const [hasMeasured, setHasMeasured] = React.useState(false);\n  const [activeElementDimensions, setActiveElementDimensions] = React.useState({\n    width: 0,\n    height: 0,\n    x: 0,\n    y: 0,\n  });\n\n  // Update the dimensions of the active element\n  const updateDimensions = React.useCallback(() => {\n    const tabItemId = `${baseId}-${selectedValue}-tabitem`;\n    const activeTabItem = document.getElementById(tabItemId);\n    if (!activeTabItem) return;\n\n    setActiveElementDimensions({\n      width: activeTabItem.offsetWidth,\n      height: activeTabItem.offsetHeight,\n      x: activeTabItem.offsetLeft,\n      y:\n        variant === 'filled'\n          ? // on filled variant the indicator is positioned on top of the tab item\n            // so no need to add offsetHeight\n            activeTabItem.offsetTop\n          : activeTabItem.offsetTop + activeTabItem.offsetHeight - 1.5,\n    });\n  }, [baseId, selectedValue, tabListContainerRef, variant]);\n\n  // Update the dimensions when the selected value changes\n  useIsomorphicLayoutEffect(() => {\n    if (!selectedValue) return;\n\n    updateDimensions();\n\n    const id = requestAnimationFrame(() => {\n      setHasMeasured(true);\n    });\n\n    return () => {\n      if (id) {\n        cancelAnimationFrame(id);\n      }\n    };\n  }, [baseId, selectedValue]);\n\n  // Update the dimensions when the window resizes or when the font loads\n  React.useEffect(() => {\n    if (!tabListContainerRef.current) return;\n\n    // check for FontFace API support\n    // FontFaceAPI is widely supported but better to be safe than sorry\n    if ('fonts' in document) {\n      try {\n        // wait for fonts to be loaded and then recalculate the dimensions\n        void document.fonts.ready.then(() => {\n          updateDimensions();\n        });\n      } catch (err: unknown) {\n        /* empty */\n      }\n    }\n\n    window.addEventListener('resize', updateDimensions);\n\n    return () => {\n      if (!tabListContainerRef.current) return;\n      window.removeEventListener('resize', updateDimensions);\n    };\n  }, [tabListContainerRef, updateDimensions]);\n\n  const transitionProps = {\n    transitionProperty: 'transform, width, background-color',\n    transitionDuration: hasMeasured\n      ? castWebType(makeMotionTime(theme.motion.duration.gentle))\n      : '0ms',\n    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),\n  };\n\n  if (variant === 'filled') {\n    return (\n      <StyledTabIndicator\n        pointerEvents=\"none\"\n        position=\"absolute\"\n        left=\"0px\"\n        top=\"0px\"\n        borderRadius=\"small\"\n        backgroundColor=\"interactive.background.primary.faded\"\n        style={{\n          ...transitionProps,\n          width: `${activeElementDimensions.width}px`,\n          height: `${activeElementDimensions.height}px`,\n          transform: `translate(${activeElementDimensions.x}px, ${activeElementDimensions.y}px)`,\n        }}\n        {...metaAttribute({ name: MetaConstants.TabIndicator })}\n      />\n    );\n  }\n\n  return (\n    <StyledTabIndicator\n      pointerEvents=\"none\"\n      position=\"absolute\"\n      left=\"0%\"\n      top=\"-0.5px\"\n      height=\"2px\"\n      backgroundColor=\"interactive.background.primary.default\"\n      style={{\n        ...transitionProps,\n        width: `${activeElementDimensions.width}px`,\n        transform: `translate(${activeElementDimensions.x}px, ${activeElementDimensions.y}px)`,\n      }}\n      {...metaAttribute({ name: MetaConstants.TabIndicator })}\n    />\n  );\n};\n\nexport { TabIndicator };\n"],"names":["StyledTabIndicator","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","cursor","backgroundColor","colors","interactive","background","primary","fadedHighlighted","TabIndicator","_ref2","tabListContainerRef","_useTheme","useTheme","_useTabsContext","useTabsContext","selectedValue","baseId","variant","_React$useState","React","useState","_React$useState2","_slicedToArray","hasMeasured","setHasMeasured","_React$useState3","width","height","x","y","_React$useState4","activeElementDimensions","setActiveElementDimensions","updateDimensions","useCallback","tabItemId","concat","activeTabItem","document","getElementById","offsetWidth","offsetHeight","offsetLeft","offsetTop","useIsomorphicLayoutEffect","id","requestAnimationFrame","cancelAnimationFrame","useEffect","current","fonts","ready","then","err","window","addEventListener","removeEventListener","transitionProps","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","gentle","transitionTimingFunction","easing","standard","effective","_jsx","_objectSpread","pointerEvents","position","left","top","borderRadius","style","transform","metaAttribute","name","MetaConstants"],"mappings":"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"}
+{"version":3,"file":"TabIndicator.web.js","sources":["../../../../../../src/components/Tabs/TabIndicator.web.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useTabsContext } from './TabsContext';\nimport { useTheme } from '~components/BladeProvider';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst StyledTabIndicator = styled(BaseBox)(({ theme }) => {\n  return {\n    cursor: 'pointer',\n    '&:hover': {\n      backgroundColor: theme.colors.interactive.background.primary.fadedHighlighted,\n    },\n  };\n});\n\nconst TabIndicator = ({\n  tabListContainerRef,\n}: {\n  tabListContainerRef: React.RefObject<HTMLElement | null>;\n}): React.ReactElement => {\n  const { theme } = useTheme();\n  const { selectedValue, baseId, variant } = useTabsContext();\n  const [hasMeasured, setHasMeasured] = React.useState(false);\n  const [activeElementDimensions, setActiveElementDimensions] = React.useState({\n    width: 0,\n    height: 0,\n    x: 0,\n    y: 0,\n  });\n\n  // Update the dimensions of the active element\n  const updateDimensions = React.useCallback(() => {\n    const tabItemId = `${baseId}-${selectedValue}-tabitem`;\n    const activeTabItem = document.getElementById(tabItemId);\n    if (!activeTabItem) return;\n\n    setActiveElementDimensions({\n      width: activeTabItem.offsetWidth,\n      height: activeTabItem.offsetHeight,\n      x: activeTabItem.offsetLeft,\n      y:\n        variant === 'filled'\n          ? // on filled variant the indicator is positioned on top of the tab item\n            // so no need to add offsetHeight\n            activeTabItem.offsetTop\n          : activeTabItem.offsetTop + activeTabItem.offsetHeight - 1.5,\n    });\n  }, [baseId, selectedValue, tabListContainerRef, variant]);\n\n  // Update the dimensions when the selected value changes\n  useIsomorphicLayoutEffect(() => {\n    if (!selectedValue) return;\n\n    updateDimensions();\n\n    const id = requestAnimationFrame(() => {\n      setHasMeasured(true);\n    });\n\n    return () => {\n      if (id) {\n        cancelAnimationFrame(id);\n      }\n    };\n  }, [baseId, selectedValue]);\n\n  // Update the dimensions when the window resizes or when the font loads\n  React.useEffect(() => {\n    if (!tabListContainerRef.current) return;\n\n    // check for FontFace API support\n    // FontFaceAPI is widely supported but better to be safe than sorry\n    if ('fonts' in document) {\n      try {\n        // wait for fonts to be loaded and then recalculate the dimensions\n        void document.fonts.ready.then(() => {\n          updateDimensions();\n        });\n      } catch (err: unknown) {\n        /* empty */\n      }\n    }\n\n    window.addEventListener('resize', updateDimensions);\n\n    return () => {\n      if (!tabListContainerRef.current) return;\n      window.removeEventListener('resize', updateDimensions);\n    };\n  }, [tabListContainerRef, updateDimensions]);\n\n  const transitionProps = {\n    transitionProperty: 'transform, width, background-color',\n    transitionDuration: hasMeasured\n      ? castWebType(makeMotionTime(theme.motion.duration.gentle))\n      : '0ms',\n    transitionTimingFunction: castWebType(theme.motion.easing.standard),\n  };\n\n  if (variant === 'filled') {\n    return (\n      <StyledTabIndicator\n        pointerEvents=\"none\"\n        position=\"absolute\"\n        left=\"0px\"\n        top=\"0px\"\n        borderRadius=\"small\"\n        backgroundColor=\"interactive.background.primary.faded\"\n        style={{\n          ...transitionProps,\n          width: `${activeElementDimensions.width}px`,\n          height: `${activeElementDimensions.height}px`,\n          transform: `translate(${activeElementDimensions.x}px, ${activeElementDimensions.y}px)`,\n        }}\n        {...metaAttribute({ name: MetaConstants.TabIndicator })}\n      />\n    );\n  }\n\n  return (\n    <StyledTabIndicator\n      pointerEvents=\"none\"\n      position=\"absolute\"\n      left=\"0%\"\n      top=\"-0.5px\"\n      height=\"2px\"\n      backgroundColor=\"interactive.background.primary.default\"\n      style={{\n        ...transitionProps,\n        width: `${activeElementDimensions.width}px`,\n        transform: `translate(${activeElementDimensions.x}px, ${activeElementDimensions.y}px)`,\n      }}\n      {...metaAttribute({ name: MetaConstants.TabIndicator })}\n    />\n  );\n};\n\nexport { TabIndicator };\n"],"names":["StyledTabIndicator","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","cursor","backgroundColor","colors","interactive","background","primary","fadedHighlighted","TabIndicator","_ref2","tabListContainerRef","_useTheme","useTheme","_useTabsContext","useTabsContext","selectedValue","baseId","variant","_React$useState","React","useState","_React$useState2","_slicedToArray","hasMeasured","setHasMeasured","_React$useState3","width","height","x","y","_React$useState4","activeElementDimensions","setActiveElementDimensions","updateDimensions","useCallback","tabItemId","concat","activeTabItem","document","getElementById","offsetWidth","offsetHeight","offsetLeft","offsetTop","useIsomorphicLayoutEffect","id","requestAnimationFrame","cancelAnimationFrame","useEffect","current","fonts","ready","then","err","window","addEventListener","removeEventListener","transitionProps","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","gentle","transitionTimingFunction","easing","standard","_jsx","_objectSpread","pointerEvents","position","left","top","borderRadius","style","transform","metaAttribute","name","MetaConstants"],"mappings":"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"}

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

@@ -82,9 +82,9 @@ var StyledTabButton = /*#__PURE__*/styled.button.withConfig({
     borderRadius: makeSpace(theme.border.radius.medium),
     boxShadow: "0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted),
     backgroundColor: getIn(theme, background.highlighted)
-  }), "transitionProperty", 'all'), _defineProperty(_defineProperty(_defineProperty(_ref2, "transitionTimingFunction", castWebType(theme.motion.easing.standard.effective)), "transitionDuration", castWebType(makeMotionTime(theme.motion.duration.gentle))), '*', {
+  }), "transitionProperty", 'all'), _defineProperty(_defineProperty(_defineProperty(_ref2, "transitionTimingFunction", castWebType(theme.motion.easing.standard)), "transitionDuration", castWebType(makeMotionTime(theme.motion.duration.gentle))), '*', {
     transitionProperty: 'color, fill',
-    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
+    transitionTimingFunction: castWebType(theme.motion.easing.standard),
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick))
   });
 });

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/no-unnecessary-type-assertion */\n/* 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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  ...rest\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          type=\"button\"\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          {...makeAnalyticsAttribute(rest)}\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","_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","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","selectedValue","setSelectedValue","baseId","_useInteraction","useInteraction","currentInteraction","interactionProps","_excluded2","validatedTrailingComponent","useTabsItemPropRestriction","panelId","tabItemId","interactionMap","hover","focus","interaction","_jsx","CompositeItem","render","_jsxs","_objectSpread","type","as","id","e","makeAccessible","role","selected","controls","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","iconSizeMap","color","iconColor","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/no-unnecessary-type-assertion */\n/* 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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),\n    transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),\n    '*': {\n      transitionProperty: 'color, fill',\n      transitionTimingFunction: castWebType(theme.motion.easing.standard),\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  ...rest\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          type=\"button\"\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          {...makeAnalyticsAttribute(rest)}\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","_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","makeMotionTime","duration","gentle","transitionProperty","transitionTimingFunction","transitionDuration","xquick","TabItem","_ref3","children","value","Leading","leading","trailing","_ref3$isDisabled","isDisabled","href","onClick","rest","_objectWithoutProperties","_excluded","_useTabsContext","useTabsContext","selectedValue","setSelectedValue","baseId","_useInteraction","useInteraction","currentInteraction","interactionProps","_excluded2","validatedTrailingComponent","useTabsItemPropRestriction","panelId","tabItemId","interactionMap","hover","focus","interaction","_jsx","CompositeItem","render","_jsxs","_objectSpread","type","as","id","e","makeAccessible","role","selected","controls","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","iconSizeMap","color","iconColor","Text","textColor","weight"],"mappings":"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"}

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

@@ -17,7 +17,7 @@ import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeA
 var _excluded = ["children", "defaultValue", "value", "onChange", "orientation", "size", "variant", "isFullWidthTabItem", "isLazy"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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 Tabs = function Tabs(_ref) {
+var _Tabs = function _Tabs(_ref, ref) {
   var children = _ref.children,
     defaultValue = _ref.defaultValue,
     value = _ref.value,
@@ -60,6 +60,7 @@ var Tabs = function Tabs(_ref) {
   return /*#__PURE__*/jsx(TabsContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+      ref: ref,
       display: "flex",
       flexDirection: isVertical ? 'row' : 'column'
     }, metaAttribute({
@@ -70,5 +71,37 @@ var Tabs = function Tabs(_ref) {
   });
 };
 
+/**
+ * ### Tabs
+ *
+ * Check out the [Tab Stories & Examples](https://blade.razorpay.com/?path=/docs/components-tabs--default)
+ *
+ * ----
+ * ### Basic Usage
+ *
+ * ```jsx
+ * import { Tabs, TabList, TabItem, TabPanel } from '@razorpay/blade/components';
+ *
+ * <Tabs variant="bordered" orientation="horizontal">
+ *   <TabList>
+ *     <TabItem value="subscriptions">Subscription</TabItem>
+ *     <TabItem value="plans">Plans</TabItem>
+ *     <TabItem value="settings">Settings</TabItem>
+ *   </TabList>
+ *
+ *   <TabPanel value="subscriptions">
+ *     <Text>Subscriptions Panel</Text>
+ *   </TabPanel>
+ *   <TabPanel value="plans">
+ *     <Text>Plans Panel</Text>
+ *   </TabPanel>
+ *   <TabPanel value="settings">
+ *     <Text>Settings Panel</Text>
+ *   </TabPanel>
+ * </Tabs>
+ * ```
+ */
+var Tabs = /*#__PURE__*/React__default.forwardRef(_Tabs);
+
 export { Tabs };
 //# sourceMappingURL=Tabs.web.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.web.js","sources":["../../../../../../src/components/Tabs/Tabs.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { TabsProps } from './types';\nimport { TabsContext } from './TabsContext';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\n/**\n * ### Tabs\n *\n * Check out the [Tab Stories & Examples](https://blade.razorpay.com/?path=/docs/components-tabs--default)\n *\n * ----\n * ### Basic Usage\n *\n * ```jsx\n * import { Tabs, TabList, TabItem, TabPanel } from '@razorpay/blade/components';\n *\n * <Tabs variant=\"bordered\" orientation=\"horizontal\">\n *   <TabList>\n *     <TabItem value=\"subscriptions\">Subscription</TabItem>\n *     <TabItem value=\"plans\">Plans</TabItem>\n *     <TabItem value=\"settings\">Settings</TabItem>\n *   </TabList>\n *\n *   <TabPanel value=\"subscriptions\">\n *     <Text>Subscriptions Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"plans\">\n *     <Text>Plans Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"settings\">\n *     <Text>Settings Panel</Text>\n *   </TabPanel>\n * </Tabs>\n * ```\n */\nconst Tabs = ({\n  children,\n  defaultValue,\n  value,\n  onChange,\n  orientation = 'horizontal',\n  size = 'medium',\n  variant = 'bordered',\n  isFullWidthTabItem = false,\n  isLazy = false,\n  ...rest\n}: TabsProps): React.ReactElement => {\n  const baseId = useId('tabs');\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange: (value) => {\n      onChange?.(value);\n    },\n  });\n\n  const isVertical = orientation === 'vertical';\n  const contextValue = React.useMemo(\n    () => ({\n      baseId,\n      selectedValue,\n      isVertical,\n      size,\n      variant,\n      isFullWidthTabItem,\n      setSelectedValue,\n      isLazy,\n    }),\n    [\n      isFullWidthTabItem,\n      baseId,\n      isVertical,\n      selectedValue,\n      setSelectedValue,\n      size,\n      variant,\n      isLazy,\n    ],\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isVertical ? 'row' : 'column'}\n        {...metaAttribute({ name: MetaConstants.Tabs })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {children}\n      </BaseBox>\n    </TabsContext.Provider>\n  );\n};\n\nexport { Tabs };\n"],"names":["Tabs","_ref","children","defaultValue","value","onChange","_ref$orientation","orientation","_ref$size","size","_ref$variant","variant","_ref$isFullWidthTabIt","isFullWidthTabItem","_ref$isLazy","isLazy","rest","_objectWithoutProperties","_excluded","baseId","useId","_useControllableState","useControllableState","_useControllableState2","_slicedToArray","selectedValue","setSelectedValue","isVertical","contextValue","React","useMemo","_jsx","TabsContext","Provider","BaseBox","_objectSpread","display","flexDirection","metaAttribute","name","MetaConstants","makeAnalyticsAttribute"],"mappings":"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"}
+{"version":3,"file":"Tabs.web.js","sources":["../../../../../../src/components/Tabs/Tabs.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { TabsProps } from './types';\nimport { TabsContext } from './TabsContext';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _Tabs = (\n  {\n    children,\n    defaultValue,\n    value,\n    onChange,\n    orientation = 'horizontal',\n    size = 'medium',\n    variant = 'bordered',\n    isFullWidthTabItem = false,\n    isLazy = false,\n    ...rest\n  }: TabsProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const baseId = useId('tabs');\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange: (value) => {\n      onChange?.(value);\n    },\n  });\n\n  const isVertical = orientation === 'vertical';\n  const contextValue = React.useMemo(\n    () => ({\n      baseId,\n      selectedValue,\n      isVertical,\n      size,\n      variant,\n      isFullWidthTabItem,\n      setSelectedValue,\n      isLazy,\n    }),\n    [\n      isFullWidthTabItem,\n      baseId,\n      isVertical,\n      selectedValue,\n      setSelectedValue,\n      size,\n      variant,\n      isLazy,\n    ],\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <BaseBox\n        ref={ref as never}\n        display=\"flex\"\n        flexDirection={isVertical ? 'row' : 'column'}\n        {...metaAttribute({ name: MetaConstants.Tabs })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {children}\n      </BaseBox>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * ### Tabs\n *\n * Check out the [Tab Stories & Examples](https://blade.razorpay.com/?path=/docs/components-tabs--default)\n *\n * ----\n * ### Basic Usage\n *\n * ```jsx\n * import { Tabs, TabList, TabItem, TabPanel } from '@razorpay/blade/components';\n *\n * <Tabs variant=\"bordered\" orientation=\"horizontal\">\n *   <TabList>\n *     <TabItem value=\"subscriptions\">Subscription</TabItem>\n *     <TabItem value=\"plans\">Plans</TabItem>\n *     <TabItem value=\"settings\">Settings</TabItem>\n *   </TabList>\n *\n *   <TabPanel value=\"subscriptions\">\n *     <Text>Subscriptions Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"plans\">\n *     <Text>Plans Panel</Text>\n *   </TabPanel>\n *   <TabPanel value=\"settings\">\n *     <Text>Settings Panel</Text>\n *   </TabPanel>\n * </Tabs>\n * ```\n */\nconst Tabs = React.forwardRef(_Tabs);\n\nexport { Tabs };\n"],"names":["_Tabs","_ref","ref","children","defaultValue","value","onChange","_ref$orientation","orientation","_ref$size","size","_ref$variant","variant","_ref$isFullWidthTabIt","isFullWidthTabItem","_ref$isLazy","isLazy","rest","_objectWithoutProperties","_excluded","baseId","useId","_useControllableState","useControllableState","_useControllableState2","_slicedToArray","selectedValue","setSelectedValue","isVertical","contextValue","React","useMemo","_jsx","TabsContext","Provider","BaseBox","_objectSpread","display","flexDirection","metaAttribute","name","MetaConstants","Tabs","makeAnalyticsAttribute","forwardRef"],"mappings":"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"}

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

@@ -33,8 +33,8 @@ var AnimatedTag = function AnimatedTag(_ref) {
     setIsTagVisible = _React$useState2[1];
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var hideTagTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagDissappearKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.exit.effective));
-  var showTagTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagShowKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.entrance.effective));
+  var hideTagTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagDissappearKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.exit));
+  var showTagTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagShowKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.entrance));
   return /*#__PURE__*/jsx(AnimatedTagContainer, {
     isVisible: isTagVisible,
     onAnimationEnd: function onAnimationEnd() {

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${TAG_MAX_WIDTH_START}\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${TAG_MAX_WIDTH_END};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n  size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n        size={size}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}
+{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${TAG_MAX_WIDTH_START}\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${TAG_MAX_WIDTH_END};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n  size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n        size={size}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":";;;;;;;;;;;;;AAeA,IAAMA,qBAAqB,gBAAGC,SAAS,CAExBC,CAAAA,aAAAA,EAAAA,aAAAA,EAAAA,gBAAAA,EAAAA,aAAAA,EAAAA,IAAAA,CAAAA,EAAAA,iBAAiB,EACfC,mBAAmB,EAIrBC,eAAe,EACbC,iBAAiB,CAEjC,CAAA;AAED,IAAMC,eAAe,gBAAGL,SAAS,2CAElBG,eAAe,EAIfF,iBAAiB,CAE/B,CAAA;AAED,IAAMK,oBAAoB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAI1C,UAACC,KAAK,EAAA;EAAA,OAAKC,GAAG,2EACVD,KAAK,CAACE,UAAU,EAEPF,KAAK,CAACG,SAAS,GAAGd,iBAAiB,GAAGE,eAAe,EACnDS,KAAK,CAACG,SAAS,GAAGb,mBAAmB,GAAGE,iBAAiB,CAAA,CAAA;AAAA,CAEvE,CACF,CAAA;AAED,IAAMY,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IAN1CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAAC,SAAA,GAAAN,IAAA,CACTO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAEf,EAAA,IAAAE,eAAA,GAAwCC,cAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAArDK,IAAAA,YAAY,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACpC,EAAA,IAAAI,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EAEb,IAAMC,iBAAiB,gBAAGtB,GAAG,CACdd,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAAA,qBAAqB,EAAIqC,cAAc,CAACF,KAAK,CAACG,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EAC9EC,MAAM,CAACN,KAAK,CAACG,MAAM,CAACI,MAAM,CAACC,IAAI,CAAC,CACrC,CAAA;EAED,IAAMC,iBAAiB,gBAAG9B,GAAG,CACdR,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAAA,eAAe,EAAI+B,cAAc,CAACF,KAAK,CAACG,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EACxEC,MAAM,CAACN,KAAK,CAACG,MAAM,CAACI,MAAM,CAACG,QAAQ,CAAC,CACzC,CAAA;EAED,oBACEC,GAAA,CAACvC,oBAAoB,EAAA;AACnBS,IAAAA,SAAS,EAAEe,YAAa;IACxBgB,cAAc,EAAE,SAAAA,cAAAA,GAAM;MACpB,IAAI,CAAChB,YAAY,EAAE;AACjBR,QAAAA,SAAS,CAAC;AAAEyB,UAAAA,QAAQ,EAAE5B,eAAe;AAAE6B,UAAAA,OAAO,EAAE9B,QAAAA;AAAS,SAAC,CAAC,CAAA;AAC7D,OAAA;KACA;AACFJ,IAAAA,UAAU,EAAEgB,YAAY,GAAGa,iBAAiB,GAAGR,iBAAkB;IAAAjB,QAAA,eAEjE2B,GAAA,CAACI,GAAG,EAAA;MACFC,mBAAmB,EAAE/B,eAAe,KAAKE,cAAe;AACxD8B,MAAAA,iBAAiB,EAAE,IAAK;MACxB7B,SAAS,EAAE,SAAAA,SAAAA,GAAM;QACfS,eAAe,CAAC,KAAK,CAAC,CAAA;OACtB;AACFqB,MAAAA,WAAW,EAAC,WAAW;AACvBC,MAAAA,OAAO,EAAC,WAAW;AACnBjC,MAAAA,UAAU,EAAEA,UAAW;AACvBI,MAAAA,IAAI,EAAEA,IAAK;AAAAN,MAAAA,QAAA,EAEVA,QAAAA;KACE,CAAA;AAAC,GACc,CAAC,CAAA;AAE3B;;;;"}

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

@@ -42,35 +42,7 @@ var FocussableTag = /*#__PURE__*/styled(BaseBox).withConfig({
   }
   return {};
 });
-
-/**
- * ## Tags
- *
- * Tag component can be used to display selected items on UI.
- *
- * ### Usage
- *
- * ***Note:*** _Make sure to handle state when using Tag_
- *
- * ```jsx
- * const [showTag, setShowTag] = React.useState(true);
- *
- * // ...
- *
- * {showTag && (
- *  <Tag
- *    icon={CheckIcon}
- *    onDismiss={() => setShowTag(false)}
- *  >
- *    Transactions
- *  </Tag>
- * )}
- * ```
- *
- * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.
- *
- */
-var Tag = function Tag(_ref) {
+var _Tag = function _Tag(_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     Icon = _ref.icon,
@@ -100,6 +72,7 @@ var Tag = function Tag(_ref) {
     return 'small';
   }, [isMobile, size]);
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
     display: isReactNative() ? 'flex' : 'inline-flex'
   }, getStyledProps(rest)), metaAttribute({
     name: MetaConstants.Tag,
@@ -159,5 +132,34 @@ var Tag = function Tag(_ref) {
   }));
 };
 
+/**
+ * ## Tags
+ *
+ * Tag component can be used to display selected items on UI.
+ *
+ * ### Usage
+ *
+ * ***Note:*** _Make sure to handle state when using Tag_
+ *
+ * ```jsx
+ * const [showTag, setShowTag] = React.useState(true);
+ *
+ * // ...
+ *
+ * {showTag && (
+ *  <Tag
+ *    icon={CheckIcon}
+ *    onDismiss={() => setShowTag(false)}
+ *  >
+ *    Transactions
+ *  </Tag>
+ * )}
+ * ```
+ *
+ * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.
+ *
+ */
+var Tag = /*#__PURE__*/React__default.forwardRef(_Tag);
+
 export { Tag };
 //# sourceMappingURL=Tag.js.map

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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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  ...rest\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(rest)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\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","rest","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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\nconst _Tag = (\n  {\n    size = 'medium',\n    icon: Icon,\n    onDismiss,\n    children,\n    isDisabled,\n    testID,\n    _isVirtuallyFocused,\n    _isTagInsideInput,\n    ...rest\n  }: TagProps,\n  ref: React.Ref<BladeElementRef>,\n): 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      ref={ref as never}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(rest)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\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\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 = React.forwardRef(_Tag);\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","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","rest","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","_objectSpread","display","getStyledProps","metaAttribute","name","MetaConstants","Tag","makeAnalyticsAttribute","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation","forwardRef"],"mappings":"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"}

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

@@ -87,8 +87,8 @@ var Toast = function Toast(_ref2) {
       children: action === null || action === void 0 ? void 0 : action.text
     })
   }) : null;
-  var enter = /*#__PURE__*/css(["opacity:0;animation:", " ", " ", " forwards;"], slideIn, makeMotionTime(theme.motion.duration.gentle), castWebType(theme.motion.easing.entrance.effective));
-  var exit = /*#__PURE__*/css(["opacity:1;animation:", " ", " ", " forwards;"], slideOut, makeMotionTime(theme.motion.duration.moderate), castWebType(theme.motion.easing.exit.effective));
+  var enter = /*#__PURE__*/css(["opacity:0;animation:", " ", " ", " forwards;"], slideIn, makeMotionTime(theme.motion.duration.gentle), castWebType(theme.motion.easing.entrance));
+  var exit = /*#__PURE__*/css(["opacity:1;animation:", " ", " ", " forwards;"], slideOut, makeMotionTime(theme.motion.duration.moderate), castWebType(theme.motion.easing.exit));
   return /*#__PURE__*/jsxs(AnimatedFade, _objectSpread(_objectSpread(_objectSpread({}, makeAccessible({
     role: 'status',
     liveRegion: 'polite'

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 { 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 Icon = leading || iconMap[color];\n  const isPromotional = type === 'promotional';\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      >\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.effective)} forwards;\n  `;\n\n  const exit = css`\n    opacity: 1;\n    animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n      ${castWebType(theme.motion.easing.exit.effective)} 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        >\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","Icon","isPromotional","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","effective","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","colors","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","concat","flexShrink","alignSelf","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 { 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 { 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 Icon = leading || iconMap[color];\n  const isPromotional = type === 'promotional';\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      >\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        >\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","Icon","isPromotional","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","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","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":"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"}

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

@@ -66,7 +66,7 @@ var getPositionStyle = function getPositionStyle(position, offset, scale, theme)
     display: 'flex',
     position: 'absolute',
     transformOrigin: 'center',
-    transition: "".concat(makeMotionTime(theme.motion.duration.gentle), " ").concat(theme.motion.easing.standard.effective),
+    transition: "".concat(makeMotionTime(theme.motion.duration.gentle), " ").concat(theme.motion.easing.standard),
     transitionProperty: 'transform, opacity, height',
     transform: "translateY(".concat(offset * (top ? 1 : -1), "px) scale(").concat(scale, ")")
   }, verticalStyle), horizontalStyle);