@razorpay/blade 11.38.1 → 12.0.0

package/build/lib/web/production/components/Toast/ToastContainer.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.web.js","sources":["../../../../../../src/components/Toast/ToastContainer.web.tsx"],"sourcesContent":["import type { ToastPosition, ToasterProps, Toast } from 'react-hot-toast';\nimport { resolveValue, useToaster } from 'react-hot-toast';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  PEEKS,\n  MAX_TOASTS,\n  SCALE_FACTOR,\n  GUTTER,\n  PEEK_GUTTER,\n  TOAST_MAX_WIDTH,\n  TOAST_Z_INDEX,\n  MIN_TOAST_MOBILE,\n  MIN_TOAST_DESKTOP,\n  CONTAINER_GUTTER_MOBILE,\n  CONTAINER_GUTTER_DESKTOP,\n} from './constants';\nimport { makeMotionTime, makeSize, useTheme } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { Theme } from '~components/BladeProvider';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CalculateYPositionProps = {\n  toast: Toast;\n  index: number;\n  isExpanded: boolean;\n  reverseOrder?: boolean;\n};\n\nconst StyledToastWrapper = styled(BaseBox)<{\n  isVisible: boolean;\n  index: number;\n  isExpanded: boolean;\n  isPromotional: boolean;\n}>(({ isVisible, index, isExpanded, isPromotional }) => {\n  let opacity = isVisible ? 1 : 0;\n  // Only make the PEEKING and MAX_TOASTS toasts visible,\n  // Every other toasts should be hidden\n  if (index < PEEKS + MAX_TOASTS) {\n    opacity = 1;\n  } else if (isPromotional || isExpanded) {\n    opacity = 1;\n  } else {\n    opacity = 0;\n  }\n\n  return {\n    '& > *': {\n      pointerEvents: opacity === 1 ? 'auto' : 'none',\n    },\n    opacity,\n  };\n});\n\nconst getPositionStyle = (\n  position: ToastPosition,\n  offset: number,\n  scale: number,\n  theme: Theme,\n): React.CSSProperties => {\n  const top = position.includes('top');\n  const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };\n  const horizontalStyle: React.CSSProperties = position.includes('center')\n    ? {\n        justifyContent: 'center',\n      }\n    : position.includes('right')\n    ? {\n        justifyContent: 'flex-end',\n      }\n    : {};\n\n  return {\n    left: 0,\n    right: 0,\n    display: 'flex',\n    position: 'absolute',\n    transformOrigin: 'center',\n    transition: `${makeMotionTime(theme.motion.duration.gentle)} ${\n      theme.motion.easing.standard.effective\n    }`,\n    transitionProperty: 'transform, opacity, height',\n    transform: `translateY(${offset * (top ? 1 : -1)}px) scale(${scale})`,\n    ...verticalStyle,\n    ...horizontalStyle,\n  };\n};\n\nfunction isPromotionalToast(toast: Toast): boolean {\n  // @ts-expect-error\n  return toast.type == 'promotional';\n}\n\nconst Toaster: React.FC<ToasterProps> = ({\n  reverseOrder,\n  position = 'top-center',\n  toastOptions,\n  containerClassName,\n  ...rest\n}) => {\n  const { toasts, handlers } = useToaster(toastOptions);\n  const { theme } = useTheme();\n  const [frontToastHeight, setFrontToastHeight] = React.useState(0);\n  const [hasManuallyExpanded, setHasManuallyExpanded] = React.useState(false);\n  const isMobile = useIsMobile();\n  const minToasts = isMobile ? MIN_TOAST_MOBILE : MIN_TOAST_DESKTOP;\n  const containerGutter = isMobile ? CONTAINER_GUTTER_MOBILE : CONTAINER_GUTTER_DESKTOP;\n\n  const infoToasts = React.useMemo(() => toasts.filter((toast) => !isPromotionalToast(toast)), [\n    toasts,\n  ]);\n  const promoToasts = React.useMemo(() => toasts.filter((toast) => isPromotionalToast(toast)), [\n    toasts,\n  ]);\n\n  // always keep promo toasts at the bottom of the stack\n  const recomputedToasts = React.useMemo(() => [...infoToasts, ...promoToasts], [\n    infoToasts,\n    promoToasts,\n  ]);\n\n  const hasPromoToast = promoToasts.length > 0 && promoToasts[0]?.visible;\n  const promoToastHeight = promoToasts[0]?.height ?? 0;\n  const isExpanded = hasManuallyExpanded || recomputedToasts.length <= minToasts;\n\n  React.useLayoutEffect(() => {\n    // find the first toast which is visible\n    const firstToast = infoToasts.find((t, index) => t.visible && index === 0);\n    if (firstToast) {\n      setFrontToastHeight(firstToast.height ?? 0);\n    }\n  }, [infoToasts]);\n\n  // calculate total height of all toasts\n  const totalHeight = React.useMemo(() => {\n    return (\n      recomputedToasts\n        // only consider visible recomputedToasts\n        .filter((toast) => toast.visible)\n        .reduce((prevHeight, toast) => prevHeight + (toast.height ?? 0), 0) +\n      recomputedToasts.length * GUTTER\n    );\n  }, [recomputedToasts]);\n\n  // Stacking logic explained in detail:\n  // https://www.loom.com/share/522d9a445e2f41e1886cce4decb9ab9d?sid=4287acf6-8d44-431b-93e1-c1a0d40a0aba\n  //\n  // 1. 3 toasts can be stacked on top of each other\n  // 2. After 3 toasts, the toasts will be scaled down and peek from behind\n  // 3. There can be maximum of 3 toasts peeking from behind\n  // 4. After 3 peeking toasts, the toasts will be hidden\n  // 5. If there is a promo toast, all toasts will be lifted up\n  // 6. Promo toasts will always be on the bottom\n  const calculateYPosition = React.useCallback(\n    ({ toast, index }: CalculateYPositionProps) => {\n      // find the current toast index\n      const toastIndex = infoToasts.findIndex((t) => t.id === toast.id);\n      // number of toasts before this toast\n      const toastsBefore = infoToasts.filter((toast, i) => i < toastIndex && toast.visible).length;\n\n      let scale = Math.max(0.7, 1 - toastsBefore * SCALE_FACTOR);\n      // first toast should always have a scale of 1\n      if (index < MAX_TOASTS) {\n        scale = 1;\n      }\n\n      // y position of toast,\n      let offset = infoToasts\n        .filter((toast) => toast.visible)\n        .slice(0, toastsBefore)\n        .reduce((y, toast) => {\n          // if the toast is expanded, add the height of the toast + gutter\n          if (isExpanded) {\n            return y + (toast.height ?? 0) + GUTTER;\n          }\n          // if the toast is not expanded, add only the peek gutter\n          return y + PEEK_GUTTER;\n        }, 0);\n\n      // lift all info toasts up if there is a promo toast\n      if (hasPromoToast) {\n        offset += GUTTER + promoToastHeight;\n      }\n\n      // if this is a promo toast, then put it at the bottom and force the scale to 1\n      if (isPromotionalToast(toast)) {\n        offset = 0;\n        scale = 1;\n      }\n\n      return { offset, scale: isExpanded ? 1 : scale };\n    },\n    [hasPromoToast, infoToasts, isExpanded, promoToastHeight],\n  );\n\n  const handleMouseEnter = (): void => {\n    if (isMobile) return;\n    setHasManuallyExpanded(true);\n    handlers.startPause();\n  };\n\n  const handleMouseLeave = (): void => {\n    if (isMobile) return;\n    setHasManuallyExpanded(false);\n    handlers.endPause();\n  };\n\n  const handleToastClick = (): void => {\n    if (!isMobile) return;\n    setHasManuallyExpanded((prev) => {\n      const next = !prev;\n      if (next) {\n        handlers.startPause();\n      } else {\n        handlers.endPause();\n      }\n      return next;\n    });\n  };\n\n  return (\n    <BaseBox\n      position=\"fixed\"\n      zIndex={TOAST_Z_INDEX}\n      top={makeSize(containerGutter)}\n      left={makeSize(containerGutter)}\n      right={makeSize(containerGutter)}\n      bottom={makeSize(containerGutter)}\n      width={`calc(100% - ${containerGutter * 2}px)`}\n      maxWidth={makeSize(TOAST_MAX_WIDTH)}\n      pointerEvents=\"none\"\n      className={containerClassName}\n      {...metaAttribute({ name: MetaConstants.ToastContainer })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {/*\n       * Mouseover container,\n       * fills in the gap between toasts so that mouseleave doesn't trigger in the gaps\n       */}\n      <BaseBox\n        position=\"absolute\"\n        bottom={`${promoToastHeight}px`}\n        left=\"0px\"\n        width=\"100%\"\n        pointerEvents={isExpanded ? 'all' : 'none'}\n        height={makeSize(isExpanded ? totalHeight - promoToastHeight : frontToastHeight)}\n        zIndex={-100}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onClick={handleToastClick}\n        {...metaAttribute({ testID: 'toast-mouseover-container' })}\n      />\n      {recomputedToasts.map((toast, index) => {\n        const toastPosition = toast.position ?? position;\n        const isPromotional = isPromotionalToast(toast);\n        const { offset, scale } = calculateYPosition({\n          toast,\n          isExpanded,\n          reverseOrder,\n          index,\n        });\n        const positionStyle = getPositionStyle(toastPosition, offset, scale, theme);\n        // recalculate height of toast\n        const ref = (el: HTMLDivElement): void => {\n          if (el && typeof toast.height !== 'number') {\n            const height = el.getBoundingClientRect().height;\n            handlers.updateHeight(toast.id, height);\n          }\n        };\n\n        let toastHeight = toast.height;\n        if (index > MAX_TOASTS - 1 && !isPromotional) {\n          toastHeight = frontToastHeight;\n        }\n        if (isExpanded) {\n          toastHeight = toast.height;\n        }\n\n        return (\n          <StyledToastWrapper\n            key={toast.id}\n            index={index}\n            ref={ref}\n            isExpanded={isExpanded}\n            isVisible={toast.visible}\n            isPromotional={isPromotional}\n            style={{\n              ...positionStyle,\n              zIndex: -1 * index,\n              height: toastHeight,\n              overflow: 'hidden',\n            }}\n            onMouseEnter={() => {\n              if (isPromotional) return;\n              handleMouseEnter();\n            }}\n            onMouseLeave={() => {\n              if (isPromotional) return;\n              handleMouseLeave();\n            }}\n            onClick={() => {\n              if (isPromotional) return;\n              handleToastClick();\n            }}\n          >\n            <BaseBox height=\"fit-content\" width=\"100%\">\n              {resolveValue(toast.message, { ...toast, index })}\n            </BaseBox>\n          </StyledToastWrapper>\n        );\n      })}\n    </BaseBox>\n  );\n};\n\nconst ToastContainer = (): React.ReactElement => {\n  return <Toaster position=\"bottom-left\" />;\n};\n\nexport { ToastContainer };\n"],"names":["StyledToastWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","index","isExpanded","isPromotional","opacity","PEEKS","MAX_TOASTS","pointerEvents","getPositionStyle","position","offset","scale","theme","top","includes","verticalStyle","bottom","horizontalStyle","justifyContent","_objectSpread","left","right","display","transformOrigin","transition","concat","makeMotionTime","motion","duration","gentle","easing","standard","effective","transitionProperty","transform","isPromotionalToast","toast","type","Toaster","_ref2","_promoToasts$","_promoToasts$0$height","_promoToasts$2","reverseOrder","_ref2$position","toastOptions","containerClassName","rest","_objectWithoutProperties","_excluded","_useToaster","useToaster","toasts","handlers","_useTheme","useTheme","_React$useState","React","useState","_React$useState2","_slicedToArray","frontToastHeight","setFrontToastHeight","_React$useState3","_React$useState4","hasManuallyExpanded","setHasManuallyExpanded","isMobile","useIsMobile","minToasts","MIN_TOAST_MOBILE","MIN_TOAST_DESKTOP","containerGutter","CONTAINER_GUTTER_MOBILE","CONTAINER_GUTTER_DESKTOP","infoToasts","useMemo","filter","promoToasts","recomputedToasts","_toConsumableArray","hasPromoToast","length","visible","promoToastHeight","height","useLayoutEffect","firstToast","find","t","_firstToast$height","totalHeight","reduce","prevHeight","_toast$height","GUTTER","calculateYPosition","useCallback","_ref3","toastIndex","findIndex","id","toastsBefore","i","Math","max","SCALE_FACTOR","slice","y","_toast$height2","PEEK_GUTTER","handleMouseEnter","startPause","handleMouseLeave","endPause","handleToastClick","prev","next","_jsxs","zIndex","TOAST_Z_INDEX","makeSize","width","maxWidth","TOAST_MAX_WIDTH","className","metaAttribute","name","MetaConstants","ToastContainer","makeAnalyticsAttribute","children","_jsx","onMouseEnter","onMouseLeave","onClick","testID","map","_toast$position","toastPosition","_calculateYPosition","positionStyle","ref","el","getBoundingClientRect","updateHeight","toastHeight","style","overflow","resolveValue","message"],"mappings":"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"}
+{"version":3,"file":"ToastContainer.web.js","sources":["../../../../../../src/components/Toast/ToastContainer.web.tsx"],"sourcesContent":["import type { ToastPosition, ToasterProps, Toast } from 'react-hot-toast';\nimport { resolveValue, useToaster } from 'react-hot-toast';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  PEEKS,\n  MAX_TOASTS,\n  SCALE_FACTOR,\n  GUTTER,\n  PEEK_GUTTER,\n  TOAST_MAX_WIDTH,\n  TOAST_Z_INDEX,\n  MIN_TOAST_MOBILE,\n  MIN_TOAST_DESKTOP,\n  CONTAINER_GUTTER_MOBILE,\n  CONTAINER_GUTTER_DESKTOP,\n} from './constants';\nimport { makeMotionTime, makeSize, useTheme } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { Theme } from '~components/BladeProvider';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CalculateYPositionProps = {\n  toast: Toast;\n  index: number;\n  isExpanded: boolean;\n  reverseOrder?: boolean;\n};\n\nconst StyledToastWrapper = styled(BaseBox)<{\n  isVisible: boolean;\n  index: number;\n  isExpanded: boolean;\n  isPromotional: boolean;\n}>(({ isVisible, index, isExpanded, isPromotional }) => {\n  let opacity = isVisible ? 1 : 0;\n  // Only make the PEEKING and MAX_TOASTS toasts visible,\n  // Every other toasts should be hidden\n  if (index < PEEKS + MAX_TOASTS) {\n    opacity = 1;\n  } else if (isPromotional || isExpanded) {\n    opacity = 1;\n  } else {\n    opacity = 0;\n  }\n\n  return {\n    '& > *': {\n      pointerEvents: opacity === 1 ? 'auto' : 'none',\n    },\n    opacity,\n  };\n});\n\nconst getPositionStyle = (\n  position: ToastPosition,\n  offset: number,\n  scale: number,\n  theme: Theme,\n): React.CSSProperties => {\n  const top = position.includes('top');\n  const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };\n  const horizontalStyle: React.CSSProperties = position.includes('center')\n    ? {\n        justifyContent: 'center',\n      }\n    : position.includes('right')\n    ? {\n        justifyContent: 'flex-end',\n      }\n    : {};\n\n  return {\n    left: 0,\n    right: 0,\n    display: 'flex',\n    position: 'absolute',\n    transformOrigin: 'center',\n    transition: `${makeMotionTime(theme.motion.duration.gentle)} ${theme.motion.easing.standard}`,\n    transitionProperty: 'transform, opacity, height',\n    transform: `translateY(${offset * (top ? 1 : -1)}px) scale(${scale})`,\n    ...verticalStyle,\n    ...horizontalStyle,\n  };\n};\n\nfunction isPromotionalToast(toast: Toast): boolean {\n  // @ts-expect-error\n  return toast.type == 'promotional';\n}\n\nconst Toaster: React.FC<ToasterProps> = ({\n  reverseOrder,\n  position = 'top-center',\n  toastOptions,\n  containerClassName,\n  ...rest\n}) => {\n  const { toasts, handlers } = useToaster(toastOptions);\n  const { theme } = useTheme();\n  const [frontToastHeight, setFrontToastHeight] = React.useState(0);\n  const [hasManuallyExpanded, setHasManuallyExpanded] = React.useState(false);\n  const isMobile = useIsMobile();\n  const minToasts = isMobile ? MIN_TOAST_MOBILE : MIN_TOAST_DESKTOP;\n  const containerGutter = isMobile ? CONTAINER_GUTTER_MOBILE : CONTAINER_GUTTER_DESKTOP;\n\n  const infoToasts = React.useMemo(() => toasts.filter((toast) => !isPromotionalToast(toast)), [\n    toasts,\n  ]);\n  const promoToasts = React.useMemo(() => toasts.filter((toast) => isPromotionalToast(toast)), [\n    toasts,\n  ]);\n\n  // always keep promo toasts at the bottom of the stack\n  const recomputedToasts = React.useMemo(() => [...infoToasts, ...promoToasts], [\n    infoToasts,\n    promoToasts,\n  ]);\n\n  const hasPromoToast = promoToasts.length > 0 && promoToasts[0]?.visible;\n  const promoToastHeight = promoToasts[0]?.height ?? 0;\n  const isExpanded = hasManuallyExpanded || recomputedToasts.length <= minToasts;\n\n  React.useLayoutEffect(() => {\n    // find the first toast which is visible\n    const firstToast = infoToasts.find((t, index) => t.visible && index === 0);\n    if (firstToast) {\n      setFrontToastHeight(firstToast.height ?? 0);\n    }\n  }, [infoToasts]);\n\n  // calculate total height of all toasts\n  const totalHeight = React.useMemo(() => {\n    return (\n      recomputedToasts\n        // only consider visible recomputedToasts\n        .filter((toast) => toast.visible)\n        .reduce((prevHeight, toast) => prevHeight + (toast.height ?? 0), 0) +\n      recomputedToasts.length * GUTTER\n    );\n  }, [recomputedToasts]);\n\n  // Stacking logic explained in detail:\n  // https://www.loom.com/share/522d9a445e2f41e1886cce4decb9ab9d?sid=4287acf6-8d44-431b-93e1-c1a0d40a0aba\n  //\n  // 1. 3 toasts can be stacked on top of each other\n  // 2. After 3 toasts, the toasts will be scaled down and peek from behind\n  // 3. There can be maximum of 3 toasts peeking from behind\n  // 4. After 3 peeking toasts, the toasts will be hidden\n  // 5. If there is a promo toast, all toasts will be lifted up\n  // 6. Promo toasts will always be on the bottom\n  const calculateYPosition = React.useCallback(\n    ({ toast, index }: CalculateYPositionProps) => {\n      // find the current toast index\n      const toastIndex = infoToasts.findIndex((t) => t.id === toast.id);\n      // number of toasts before this toast\n      const toastsBefore = infoToasts.filter((toast, i) => i < toastIndex && toast.visible).length;\n\n      let scale = Math.max(0.7, 1 - toastsBefore * SCALE_FACTOR);\n      // first toast should always have a scale of 1\n      if (index < MAX_TOASTS) {\n        scale = 1;\n      }\n\n      // y position of toast,\n      let offset = infoToasts\n        .filter((toast) => toast.visible)\n        .slice(0, toastsBefore)\n        .reduce((y, toast) => {\n          // if the toast is expanded, add the height of the toast + gutter\n          if (isExpanded) {\n            return y + (toast.height ?? 0) + GUTTER;\n          }\n          // if the toast is not expanded, add only the peek gutter\n          return y + PEEK_GUTTER;\n        }, 0);\n\n      // lift all info toasts up if there is a promo toast\n      if (hasPromoToast) {\n        offset += GUTTER + promoToastHeight;\n      }\n\n      // if this is a promo toast, then put it at the bottom and force the scale to 1\n      if (isPromotionalToast(toast)) {\n        offset = 0;\n        scale = 1;\n      }\n\n      return { offset, scale: isExpanded ? 1 : scale };\n    },\n    [hasPromoToast, infoToasts, isExpanded, promoToastHeight],\n  );\n\n  const handleMouseEnter = (): void => {\n    if (isMobile) return;\n    setHasManuallyExpanded(true);\n    handlers.startPause();\n  };\n\n  const handleMouseLeave = (): void => {\n    if (isMobile) return;\n    setHasManuallyExpanded(false);\n    handlers.endPause();\n  };\n\n  const handleToastClick = (): void => {\n    if (!isMobile) return;\n    setHasManuallyExpanded((prev) => {\n      const next = !prev;\n      if (next) {\n        handlers.startPause();\n      } else {\n        handlers.endPause();\n      }\n      return next;\n    });\n  };\n\n  return (\n    <BaseBox\n      position=\"fixed\"\n      zIndex={TOAST_Z_INDEX}\n      top={makeSize(containerGutter)}\n      left={makeSize(containerGutter)}\n      right={makeSize(containerGutter)}\n      bottom={makeSize(containerGutter)}\n      width={`calc(100% - ${containerGutter * 2}px)`}\n      maxWidth={makeSize(TOAST_MAX_WIDTH)}\n      pointerEvents=\"none\"\n      className={containerClassName}\n      {...metaAttribute({ name: MetaConstants.ToastContainer })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {/*\n       * Mouseover container,\n       * fills in the gap between toasts so that mouseleave doesn't trigger in the gaps\n       */}\n      <BaseBox\n        position=\"absolute\"\n        bottom={`${promoToastHeight}px`}\n        left=\"0px\"\n        width=\"100%\"\n        pointerEvents={isExpanded ? 'all' : 'none'}\n        height={makeSize(isExpanded ? totalHeight - promoToastHeight : frontToastHeight)}\n        zIndex={-100}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onClick={handleToastClick}\n        {...metaAttribute({ testID: 'toast-mouseover-container' })}\n      />\n      {recomputedToasts.map((toast, index) => {\n        const toastPosition = toast.position ?? position;\n        const isPromotional = isPromotionalToast(toast);\n        const { offset, scale } = calculateYPosition({\n          toast,\n          isExpanded,\n          reverseOrder,\n          index,\n        });\n        const positionStyle = getPositionStyle(toastPosition, offset, scale, theme);\n        // recalculate height of toast\n        const ref = (el: HTMLDivElement): void => {\n          if (el && typeof toast.height !== 'number') {\n            const height = el.getBoundingClientRect().height;\n            handlers.updateHeight(toast.id, height);\n          }\n        };\n\n        let toastHeight = toast.height;\n        if (index > MAX_TOASTS - 1 && !isPromotional) {\n          toastHeight = frontToastHeight;\n        }\n        if (isExpanded) {\n          toastHeight = toast.height;\n        }\n\n        return (\n          <StyledToastWrapper\n            key={toast.id}\n            index={index}\n            ref={ref}\n            isExpanded={isExpanded}\n            isVisible={toast.visible}\n            isPromotional={isPromotional}\n            style={{\n              ...positionStyle,\n              zIndex: -1 * index,\n              height: toastHeight,\n              overflow: 'hidden',\n            }}\n            onMouseEnter={() => {\n              if (isPromotional) return;\n              handleMouseEnter();\n            }}\n            onMouseLeave={() => {\n              if (isPromotional) return;\n              handleMouseLeave();\n            }}\n            onClick={() => {\n              if (isPromotional) return;\n              handleToastClick();\n            }}\n          >\n            <BaseBox height=\"fit-content\" width=\"100%\">\n              {resolveValue(toast.message, { ...toast, index })}\n            </BaseBox>\n          </StyledToastWrapper>\n        );\n      })}\n    </BaseBox>\n  );\n};\n\nconst ToastContainer = (): React.ReactElement => {\n  return <Toaster position=\"bottom-left\" />;\n};\n\nexport { ToastContainer };\n"],"names":["StyledToastWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","index","isExpanded","isPromotional","opacity","PEEKS","MAX_TOASTS","pointerEvents","getPositionStyle","position","offset","scale","theme","top","includes","verticalStyle","bottom","horizontalStyle","justifyContent","_objectSpread","left","right","display","transformOrigin","transition","concat","makeMotionTime","motion","duration","gentle","easing","standard","transitionProperty","transform","isPromotionalToast","toast","type","Toaster","_ref2","_promoToasts$","_promoToasts$0$height","_promoToasts$2","reverseOrder","_ref2$position","toastOptions","containerClassName","rest","_objectWithoutProperties","_excluded","_useToaster","useToaster","toasts","handlers","_useTheme","useTheme","_React$useState","React","useState","_React$useState2","_slicedToArray","frontToastHeight","setFrontToastHeight","_React$useState3","_React$useState4","hasManuallyExpanded","setHasManuallyExpanded","isMobile","useIsMobile","minToasts","MIN_TOAST_MOBILE","MIN_TOAST_DESKTOP","containerGutter","CONTAINER_GUTTER_MOBILE","CONTAINER_GUTTER_DESKTOP","infoToasts","useMemo","filter","promoToasts","recomputedToasts","_toConsumableArray","hasPromoToast","length","visible","promoToastHeight","height","useLayoutEffect","firstToast","find","t","_firstToast$height","totalHeight","reduce","prevHeight","_toast$height","GUTTER","calculateYPosition","useCallback","_ref3","toastIndex","findIndex","id","toastsBefore","i","Math","max","SCALE_FACTOR","slice","y","_toast$height2","PEEK_GUTTER","handleMouseEnter","startPause","handleMouseLeave","endPause","handleToastClick","prev","next","_jsxs","zIndex","TOAST_Z_INDEX","makeSize","width","maxWidth","TOAST_MAX_WIDTH","className","metaAttribute","name","MetaConstants","ToastContainer","makeAnalyticsAttribute","children","_jsx","onMouseEnter","onMouseLeave","onClick","testID","map","_toast$position","toastPosition","_calculateYPosition","positionStyle","ref","el","getBoundingClientRect","updateHeight","toastHeight","style","overflow","resolveValue","message"],"mappings":"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"}

package/build/lib/web/production/components/TopNav/TabNav/TabNavItem.web.js

@@ -89,7 +89,7 @@ var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     borderBottomWidth: 0,
     borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
     borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
-    transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard.effective),
+    transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard),
     transitionProperty: 'background'
   }, isActive ? {
     ':before, :after': dividerHiderStyle,
@@ -119,7 +119,7 @@ var SelectedBar = /*#__PURE__*/styled(BaseBox).withConfig({
     pointerEvents: 'none',
     // Animation
     opacity: isActive ? 1 : 0,
-    transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard.effective),
+    transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard),
     transitionProperty: 'opacity'
   };
 });

package/build/lib/web/production/components/TopNav/TabNav/TabNavItem.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNavItem.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { TabNavItemProps } from './types';\nimport { useTabNavContext } from './TabNavContext';\nimport { MIXED_BG_COLOR } from './utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeBorderSize, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\nconst StyledTabNavItem = styled.a<{ $isActive?: boolean }>(({ theme, $isActive }) => {\n  return {\n    ...getTextStyles({\n      theme,\n      size: 'medium',\n      weight: 'medium',\n      color: $isActive ? 'interactive.text.gray.normal' : 'interactive.text.gray.subtle',\n    }),\n    flex: 1,\n    display: 'flex',\n    gap: makeSpace(theme.spacing[2]),\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    textDecoration: 'none',\n    whiteSpace: 'nowrap',\n    paddingTop: makeSpace(theme.spacing[3]),\n    paddingBottom: makeSpace(theme.spacing[3]),\n    paddingLeft: makeSpace(theme.spacing[4]),\n    paddingRight: makeSpace(theme.spacing[4]),\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    // reset button styles\n    border: 'none',\n    background: 'none',\n    '&[aria-expanded=\"true\"]': $isActive\n      ? {}\n      : {\n          backgroundColor: theme.colors.interactive.background.gray.default,\n        },\n    '&:hover': $isActive\n      ? {}\n      : {\n          backgroundColor: theme.colors.interactive.background.gray.default,\n        },\n  };\n});\n\nconst StyledTabNavItemWrapper = styled(BaseBox)<{\n  isActive?: boolean;\n}>(({ theme, isActive }) => {\n  const dividerHiderStyle = {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: makeSize(size[1]),\n    height: makeSize(size[16]),\n    backgroundColor: MIXED_BG_COLOR,\n  } as const;\n\n  return {\n    position: 'relative',\n    flexShrink: 0,\n    padding: `${makeSpace(theme.spacing[2])} ${makeSpace(theme.spacing[1])}`,\n    backgroundColor: isActive ? theme.colors.surface.background.gray.intense : 'transparent',\n    borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',\n    borderStyle: 'solid',\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderBottomWidth: 0,\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${\n      theme.motion.easing.standard.effective\n    }`,\n    transitionProperty: 'background',\n\n    // Hide the left and right divider by overlaying them with a pseudo element as same color as the background\n    ...(isActive\n      ? {\n          ':before, :after': dividerHiderStyle,\n          ':before': {\n            left: -2,\n          },\n          ':after': {\n            right: -2,\n          },\n        }\n      : {}),\n  };\n});\n\nconst SelectedBar = styled(BaseBox)<{ isActive?: boolean }>(({ theme, isActive }) => {\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height: makeSpace(theme.spacing[1]),\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    backgroundColor: theme.colors.interactive.icon.gray.normal,\n    pointerEvents: 'none',\n    // Animation\n    opacity: isActive ? 1 : 0,\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${\n      theme.motion.easing.standard.effective\n    }`,\n    transitionProperty: 'opacity',\n  };\n});\n\nconst _TabNavItem: React.ForwardRefRenderFunction<HTMLAnchorElement, TabNavItemProps> = (\n  {\n    as,\n    title,\n    isActive,\n    icon: Icon,\n    trailing,\n    accessibilityLabel,\n    href,\n    target,\n    // @ts-expect-error - This prop is only used internally\n    __isInsideTabNavItems,\n    // @ts-expect-error - This prop is only used internally\n    __index,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { setControlledItems } = useTabNavContext();\n  const bodyRef = React.useRef<HTMLDivElement>(null);\n\n  // Update the controlledItems with the tabWidth and offsetX\n  useIsomorphicLayoutEffect(() => {\n    if (!bodyRef.current) return;\n    if (!__isInsideTabNavItems) return;\n    setControlledItems((prev) => {\n      return prev.map((item, index) => {\n        if (index !== __index) return item;\n        const bounds = bodyRef?.current?.getBoundingClientRect()!;\n        const tabWidth = bounds.width;\n        const offsetX = bounds.right;\n        return {\n          ...item,\n          tabWidth,\n          offsetX,\n        };\n      });\n    });\n  }, [__isInsideTabNavItems, __index, setControlledItems]);\n\n  return (\n    <StyledTabNavItemWrapper\n      ref={bodyRef}\n      isActive={isActive}\n      {...metaAttribute({ name: MetaConstants.TabNavItem })}\n    >\n      <SelectedBar isActive={isActive} />\n      <StyledTabNavItem\n        ref={ref}\n        as={as ?? (href ? 'a' : 'button')}\n        to={href}\n        href={as ? undefined : href}\n        target={target}\n        $isActive={isActive}\n        {...props}\n        {...makeAccessible({ label: accessibilityLabel, current: isActive })}\n      >\n        {Icon ? (\n          <Icon\n            size=\"large\"\n            color={isActive ? 'interactive.icon.gray.normal' : 'surface.icon.gray.subtle'}\n          />\n        ) : null}\n        {title}\n        {trailing ? trailing : null}\n      </StyledTabNavItem>\n    </StyledTabNavItemWrapper>\n  );\n};\n\nconst TabNavItem = assignWithoutSideEffects(React.forwardRef(_TabNavItem), {\n  displayName: 'TabNavItem',\n});\n\nexport { TabNavItem };\n"],"names":["StyledTabNavItem","styled","a","withConfig","displayName","componentId","_ref","theme","$isActive","_objectSpread","getTextStyles","size","weight","color","flex","display","gap","makeSpace","spacing","alignItems","justifyContent","height","textDecoration","whiteSpace","paddingTop","paddingBottom","paddingLeft","paddingRight","borderRadius","makeBorderSize","border","radius","medium","background","backgroundColor","colors","interactive","gray","StyledTabNavItemWrapper","BaseBox","_ref2","isActive","dividerHiderStyle","content","position","top","transform","width","makeSize","MIXED_BG_COLOR","flexShrink","padding","concat","surface","intense","borderColor","muted","borderStyle","borderWidth","thin","borderBottomWidth","borderTopLeftRadius","borderTopRightRadius","transition","makeMotionTime","motion","duration","moderate","easing","standard","effective","transitionProperty","left","right","SelectedBar","_ref3","icon","normal","pointerEvents","opacity","_TabNavItem","_ref4","ref","as","title","Icon","trailing","accessibilityLabel","href","target","__isInsideTabNavItems","__index","props","_objectWithoutProperties","_excluded","_useTabNavContext","useTabNavContext","setControlledItems","bodyRef","React","useRef","useIsomorphicLayoutEffect","current","prev","map","item","index","_bodyRef$current","bounds","getBoundingClientRect","tabWidth","offsetX","_jsxs","metaAttribute","name","MetaConstants","TabNavItem","children","_jsx","to","undefined","makeAccessible","label","assignWithoutSideEffects","forwardRef"],"mappings":"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"}
+{"version":3,"file":"TabNavItem.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { TabNavItemProps } from './types';\nimport { useTabNavContext } from './TabNavContext';\nimport { MIXED_BG_COLOR } from './utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeBorderSize, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\nconst StyledTabNavItem = styled.a<{ $isActive?: boolean }>(({ theme, $isActive }) => {\n  return {\n    ...getTextStyles({\n      theme,\n      size: 'medium',\n      weight: 'medium',\n      color: $isActive ? 'interactive.text.gray.normal' : 'interactive.text.gray.subtle',\n    }),\n    flex: 1,\n    display: 'flex',\n    gap: makeSpace(theme.spacing[2]),\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    textDecoration: 'none',\n    whiteSpace: 'nowrap',\n    paddingTop: makeSpace(theme.spacing[3]),\n    paddingBottom: makeSpace(theme.spacing[3]),\n    paddingLeft: makeSpace(theme.spacing[4]),\n    paddingRight: makeSpace(theme.spacing[4]),\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    // reset button styles\n    border: 'none',\n    background: 'none',\n    '&[aria-expanded=\"true\"]': $isActive\n      ? {}\n      : {\n          backgroundColor: theme.colors.interactive.background.gray.default,\n        },\n    '&:hover': $isActive\n      ? {}\n      : {\n          backgroundColor: theme.colors.interactive.background.gray.default,\n        },\n  };\n});\n\nconst StyledTabNavItemWrapper = styled(BaseBox)<{\n  isActive?: boolean;\n}>(({ theme, isActive }) => {\n  const dividerHiderStyle = {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: makeSize(size[1]),\n    height: makeSize(size[16]),\n    backgroundColor: MIXED_BG_COLOR,\n  } as const;\n\n  return {\n    position: 'relative',\n    flexShrink: 0,\n    padding: `${makeSpace(theme.spacing[2])} ${makeSpace(theme.spacing[1])}`,\n    backgroundColor: isActive ? theme.colors.surface.background.gray.intense : 'transparent',\n    borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',\n    borderStyle: 'solid',\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderBottomWidth: 0,\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${theme.motion.easing.standard}`,\n    transitionProperty: 'background',\n\n    // Hide the left and right divider by overlaying them with a pseudo element as same color as the background\n    ...(isActive\n      ? {\n          ':before, :after': dividerHiderStyle,\n          ':before': {\n            left: -2,\n          },\n          ':after': {\n            right: -2,\n          },\n        }\n      : {}),\n  };\n});\n\nconst SelectedBar = styled(BaseBox)<{ isActive?: boolean }>(({ theme, isActive }) => {\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height: makeSpace(theme.spacing[1]),\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    backgroundColor: theme.colors.interactive.icon.gray.normal,\n    pointerEvents: 'none',\n    // Animation\n    opacity: isActive ? 1 : 0,\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${theme.motion.easing.standard}`,\n    transitionProperty: 'opacity',\n  };\n});\n\nconst _TabNavItem: React.ForwardRefRenderFunction<HTMLAnchorElement, TabNavItemProps> = (\n  {\n    as,\n    title,\n    isActive,\n    icon: Icon,\n    trailing,\n    accessibilityLabel,\n    href,\n    target,\n    // @ts-expect-error - This prop is only used internally\n    __isInsideTabNavItems,\n    // @ts-expect-error - This prop is only used internally\n    __index,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { setControlledItems } = useTabNavContext();\n  const bodyRef = React.useRef<HTMLDivElement>(null);\n\n  // Update the controlledItems with the tabWidth and offsetX\n  useIsomorphicLayoutEffect(() => {\n    if (!bodyRef.current) return;\n    if (!__isInsideTabNavItems) return;\n    setControlledItems((prev) => {\n      return prev.map((item, index) => {\n        if (index !== __index) return item;\n        const bounds = bodyRef?.current?.getBoundingClientRect()!;\n        const tabWidth = bounds.width;\n        const offsetX = bounds.right;\n        return {\n          ...item,\n          tabWidth,\n          offsetX,\n        };\n      });\n    });\n  }, [__isInsideTabNavItems, __index, setControlledItems]);\n\n  return (\n    <StyledTabNavItemWrapper\n      ref={bodyRef}\n      isActive={isActive}\n      {...metaAttribute({ name: MetaConstants.TabNavItem })}\n    >\n      <SelectedBar isActive={isActive} />\n      <StyledTabNavItem\n        ref={ref}\n        as={as ?? (href ? 'a' : 'button')}\n        to={href}\n        href={as ? undefined : href}\n        target={target}\n        $isActive={isActive}\n        {...props}\n        {...makeAccessible({ label: accessibilityLabel, current: isActive })}\n      >\n        {Icon ? (\n          <Icon\n            size=\"large\"\n            color={isActive ? 'interactive.icon.gray.normal' : 'surface.icon.gray.subtle'}\n          />\n        ) : null}\n        {title}\n        {trailing ? trailing : null}\n      </StyledTabNavItem>\n    </StyledTabNavItemWrapper>\n  );\n};\n\nconst TabNavItem = assignWithoutSideEffects(React.forwardRef(_TabNavItem), {\n  displayName: 'TabNavItem',\n});\n\nexport { TabNavItem };\n"],"names":["StyledTabNavItem","styled","a","withConfig","displayName","componentId","_ref","theme","$isActive","_objectSpread","getTextStyles","size","weight","color","flex","display","gap","makeSpace","spacing","alignItems","justifyContent","height","textDecoration","whiteSpace","paddingTop","paddingBottom","paddingLeft","paddingRight","borderRadius","makeBorderSize","border","radius","medium","background","backgroundColor","colors","interactive","gray","StyledTabNavItemWrapper","BaseBox","_ref2","isActive","dividerHiderStyle","content","position","top","transform","width","makeSize","MIXED_BG_COLOR","flexShrink","padding","concat","surface","intense","borderColor","muted","borderStyle","borderWidth","thin","borderBottomWidth","borderTopLeftRadius","borderTopRightRadius","transition","makeMotionTime","motion","duration","moderate","easing","standard","transitionProperty","left","right","SelectedBar","_ref3","icon","normal","pointerEvents","opacity","_TabNavItem","_ref4","ref","as","title","Icon","trailing","accessibilityLabel","href","target","__isInsideTabNavItems","__index","props","_objectWithoutProperties","_excluded","_useTabNavContext","useTabNavContext","setControlledItems","bodyRef","React","useRef","useIsomorphicLayoutEffect","current","prev","map","item","index","_bodyRef$current","bounds","getBoundingClientRect","tabWidth","offsetX","_jsxs","metaAttribute","name","MetaConstants","TabNavItem","children","_jsx","to","undefined","makeAccessible","label","assignWithoutSideEffects","forwardRef"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import 'react';
+import React__default from 'react';
 import '../Box/index.js';
 import '../Box/BaseBox/index.js';
 import { SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL } from '../SideNav/tokens.js';
@@ -23,10 +23,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TOP_NAV_HEIGHT = size[56];
 var CONTENT_RIGHT_GAP = size[80];
-var TopNav = function TopNav(_ref) {
+var _TopNav = function _TopNav(_ref, ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
     display: "grid",
     gridTemplateColumns: "auto minmax(0, 1fr) auto",
     alignItems: "center",
@@ -50,6 +51,7 @@ var TopNav = function TopNav(_ref) {
     children: children
   }));
 };
+var TopNav = /*#__PURE__*/React__default.forwardRef(_TopNav);
 var TopNavBrand = function TopNavBrand(_ref2) {
   var children = _ref2.children;
   return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({

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

@@ -1 +1 @@
-{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport {\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n} from '~components/SideNav/tokens';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst TOP_NAV_HEIGHT = size[56];\nconst CONTENT_RIGHT_GAP = size[80];\n\ntype TopNavProps = {\n  children: React.ReactNode;\n} & Pick<\n  BoxProps,\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingX'\n  | 'paddingY'\n  | 'backgroundColor'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'width'\n  | 'zIndex'\n  | keyof DataAnalyticsAttribute\n> &\n  TestID &\n  StyledPropsBlade;\n\nconst TopNav = ({ children, ...rest }: TopNavProps): React.ReactElement => {\n  return (\n    <Box\n      display=\"grid\"\n      gridTemplateColumns=\"auto minmax(0, 1fr) auto\"\n      alignItems=\"center\"\n      position=\"sticky\"\n      top=\"0px\"\n      width=\"100%\"\n      paddingY={{ base: 'spacing.3', m: 'spacing.0' }}\n      paddingX={{ base: 'spacing.4', m: 'spacing.3' }}\n      height={makeSize(TOP_NAV_HEIGHT)}\n      zIndex={componentZIndices.topnav}\n      {...rest}\n      {...metaAttribute({ name: MetaConstants.TopNav, testID: rest.testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </Box>\n  );\n};\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <Box\n      flexDirection=\"row\"\n      marginTop=\"spacing.4\"\n      width={{\n        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n      }}\n      {...metaAttribute({ name: MetaConstants.TopNavBrand })}\n    >\n      <BaseBox width=\"100%\" textAlign=\"center\">\n        {children}\n      </BaseBox>\n    </Box>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      alignSelf=\"end\"\n      paddingRight={{ base: 'spacing.0', m: makeSize(CONTENT_RIGHT_GAP) }}\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      alignSelf=\"end\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      padding=\"spacing.3\"\n      backgroundColor=\"surface.background.gray.intense\"\n      borderTopLeftRadius=\"medium\"\n      borderTopRightRadius=\"medium\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps };\n"],"names":["TOP_NAV_HEIGHT","size","CONTENT_RIGHT_GAP","TopNav","_ref","children","rest","_objectWithoutProperties","_excluded","_jsx","Box","_objectSpread","display","gridTemplateColumns","alignItems","position","top","width","paddingY","base","m","paddingX","height","makeSize","zIndex","componentZIndices","topnav","metaAttribute","name","MetaConstants","testID","makeAnalyticsAttribute","TopNavBrand","_ref2","flexDirection","marginTop","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","BaseBox","textAlign","TopNavContent","_ref3","alignSelf","paddingRight","TopNavActions","_ref4","gap","padding","backgroundColor","borderTopLeftRadius","borderTopRightRadius"],"mappings":"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"}
+{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport {\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n} from '~components/SideNav/tokens';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst TOP_NAV_HEIGHT = size[56];\nconst CONTENT_RIGHT_GAP = size[80];\n\ntype TopNavProps = {\n  children: React.ReactNode;\n} & Pick<\n  BoxProps,\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingX'\n  | 'paddingY'\n  | 'backgroundColor'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'width'\n  | 'zIndex'\n  | keyof DataAnalyticsAttribute\n> &\n  TestID &\n  StyledPropsBlade;\n\nconst _TopNav = (\n  { children, ...rest }: TopNavProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  return (\n    <Box\n      ref={ref as never}\n      display=\"grid\"\n      gridTemplateColumns=\"auto minmax(0, 1fr) auto\"\n      alignItems=\"center\"\n      position=\"sticky\"\n      top=\"0px\"\n      width=\"100%\"\n      paddingY={{ base: 'spacing.3', m: 'spacing.0' }}\n      paddingX={{ base: 'spacing.4', m: 'spacing.3' }}\n      height={makeSize(TOP_NAV_HEIGHT)}\n      zIndex={componentZIndices.topnav}\n      {...rest}\n      {...metaAttribute({ name: MetaConstants.TopNav, testID: rest.testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </Box>\n  );\n};\n\nconst TopNav = React.forwardRef(_TopNav);\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <Box\n      flexDirection=\"row\"\n      marginTop=\"spacing.4\"\n      width={{\n        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n      }}\n      {...metaAttribute({ name: MetaConstants.TopNavBrand })}\n    >\n      <BaseBox width=\"100%\" textAlign=\"center\">\n        {children}\n      </BaseBox>\n    </Box>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      alignSelf=\"end\"\n      paddingRight={{ base: 'spacing.0', m: makeSize(CONTENT_RIGHT_GAP) }}\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      alignSelf=\"end\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      padding=\"spacing.3\"\n      backgroundColor=\"surface.background.gray.intense\"\n      borderTopLeftRadius=\"medium\"\n      borderTopRightRadius=\"medium\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps };\n"],"names":["TOP_NAV_HEIGHT","size","CONTENT_RIGHT_GAP","_TopNav","_ref","ref","children","rest","_objectWithoutProperties","_excluded","_jsx","Box","_objectSpread","display","gridTemplateColumns","alignItems","position","top","width","paddingY","base","m","paddingX","height","makeSize","zIndex","componentZIndices","topnav","metaAttribute","name","MetaConstants","TopNav","testID","makeAnalyticsAttribute","React","forwardRef","TopNavBrand","_ref2","flexDirection","marginTop","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","BaseBox","textAlign","TopNavContent","_ref3","alignSelf","paddingRight","TopNavActions","_ref4","gap","padding","backgroundColor","borderTopLeftRadius","borderTopRightRadius"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAMA,cAAc,GAAGC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/B,IAAMC,iBAAiB,GAAGD,IAAI,CAAC,EAAE,CAAC,CAAA;AA0BlC,IAAME,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAEXC,GAA+B,EACR;AAAA,EAAA,IAFrBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAGnB,oBACEC,GAAA,CAACC,GAAG,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACFP,IAAAA,GAAG,EAAEA,GAAa;AAClBQ,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,mBAAmB,EAAC,0BAA0B;AAC9CC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,QAAQ,EAAC,QAAQ;AACjBC,IAAAA,GAAG,EAAC,KAAK;AACTC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,QAAQ,EAAE;AAAEC,MAAAA,IAAI,EAAE,WAAW;AAAEC,MAAAA,CAAC,EAAE,WAAA;KAAc;AAChDC,IAAAA,QAAQ,EAAE;AAAEF,MAAAA,IAAI,EAAE,WAAW;AAAEC,MAAAA,CAAC,EAAE,WAAA;KAAc;AAChDE,IAAAA,MAAM,EAAEC,QAAQ,CAACxB,cAAc,CAAE;IACjCyB,MAAM,EAAEC,iBAAiB,CAACC,MAAAA;GACtBpB,EAAAA,IAAI,CACJqB,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,MAAM;IAAEC,MAAM,EAAEzB,IAAI,CAACyB,MAAAA;AAAO,GAAC,CAAC,CAAA,EAClEC,sBAAsB,CAAC1B,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EAE/BA,QAAAA;AAAQ,GAAA,CACN,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMyB,MAAM,gBAAGG,cAAK,CAACC,UAAU,CAAChC,OAAO,EAAC;AAExC,IAAMiC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAwE;AAAA,EAAA,IAAlE/B,QAAQ,GAAA+B,KAAA,CAAR/B,QAAQ,CAAA;AAC7B,EAAA,oBACEI,GAAA,CAACC,GAAG,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACF0B,IAAAA,aAAa,EAAC,KAAK;AACnBC,IAAAA,SAAS,EAAC,WAAW;AACrBrB,IAAAA,KAAK,EAAE;AACLE,MAAAA,IAAI,EAAEI,QAAQ,CAACgB,+BAA+B,CAAC;MAC/CC,EAAE,EAAEjB,QAAQ,CAACkB,6BAA6B,CAAA;AAC5C,KAAA;AAAE,GAAA,EACEd,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACM,WAAAA;AAAY,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAA9B,QAAA,eAEtDI,GAAA,CAACiC,OAAO,EAAA;AAACzB,MAAAA,KAAK,EAAC,MAAM;AAAC0B,MAAAA,SAAS,EAAC,QAAQ;AAAAtC,MAAAA,QAAA,EACrCA,QAAAA;KACM,CAAA;AAAC,GAAA,CACP,CAAC,CAAA;AAEV,EAAC;AAED,IAAMuC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,KAAA,EAAwE;AAAA,EAAA,IAAlExC,QAAQ,GAAAwC,KAAA,CAARxC,QAAQ,CAAA;AAC/B,EAAA,oBACEI,GAAA,CAACiC,OAAO,EAAA/B,aAAA,CAAAA,aAAA,CAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdE,IAAAA,UAAU,EAAC,QAAQ;AACnBgC,IAAAA,SAAS,EAAC,KAAK;AACfC,IAAAA,YAAY,EAAE;AAAE5B,MAAAA,IAAI,EAAE,WAAW;MAAEC,CAAC,EAAEG,QAAQ,CAACtB,iBAAiB,CAAA;AAAE,KAAA;AAAE,GAAA,EAChE0B,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACe,aAAAA;AAAc,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAvC,IAAAA,QAAA,EAEvDA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,EAAC;AAED,IAAM2C,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,KAAA,EAAwE;AAAA,EAAA,IAAlE5C,QAAQ,GAAA4C,KAAA,CAAR5C,QAAQ,CAAA;AAC/B,EAAA,oBACEI,GAAA,CAACiC,OAAO,EAAA/B,aAAA,CAAAA,aAAA,CAAA;AACNmC,IAAAA,SAAS,EAAC,KAAK;AACflC,IAAAA,OAAO,EAAC,MAAM;AACdsC,IAAAA,GAAG,EAAC,WAAW;AACfpC,IAAAA,UAAU,EAAC,QAAQ;AACnBwB,IAAAA,SAAS,EAAC,WAAW;AACrBa,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,eAAe,EAAC,iCAAiC;AACjDC,IAAAA,mBAAmB,EAAC,QAAQ;AAC5BC,IAAAA,oBAAoB,EAAC,QAAA;AAAQ,GAAA,EACzB3B,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACmB,aAAAA;AAAc,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAA3C,IAAAA,QAAA,EAEvDA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/production/components/Typography/Code/Code.js

@@ -82,33 +82,7 @@ var getCodeColor = function getCodeColor(_ref) {
   }
   return 'surface.text.gray.normal';
 };
-/**
- * Code component can be used for displaying token, variable names, or inlined code snippets.
- *
- * ## Usage
- *
- * ### In Web
- * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
- *
- * ```tsx
- * <Text>
- *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
- * </Text>
- * ```
- *
- * ### In React Native
- *
- * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
- *
- * ```tsx
- *  <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
- *   <Text>Lorem ipsum </Text>
- *   <Code>SENTRY_TOKEN</Code>
- *   <Text> normal text</Text>
- * </Box>
- * ```
- */
-var Code = function Code(_ref2) {
+var _Code = function _Code(_ref2, ref) {
   var children = _ref2.children,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'small' : _ref2$size,
@@ -129,6 +103,7 @@ var Code = function Code(_ref2) {
     });
   }, [isHighlighted, color]);
   return /*#__PURE__*/jsx(CodeContainer, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
     size: size,
     isHighlighted: isHighlighted,
     as: isPlatformWeb ? 'span' : undefined
@@ -148,5 +123,33 @@ var Code = function Code(_ref2) {
   }));
 };
 
+/**
+ * Code component can be used for displaying token, variable names, or inlined code snippets.
+ *
+ * ## Usage
+ *
+ * ### In Web
+ * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
+ *
+ * ```tsx
+ * <Text>
+ *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
+ * </Text>
+ * ```
+ *
+ * ### In React Native
+ *
+ * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
+ *
+ * ```tsx
+ *  <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
+ *   <Text>Lorem ipsum </Text>
+ *   <Code>SENTRY_TOKEN</Code>
+ *   <Text> normal text</Text>
+ * </Box>
+ * ```
+ */
+var Code = /*#__PURE__*/React__default.forwardRef(_Code);
+
 export { Code };
 //# sourceMappingURL=Code.js.map

package/build/lib/web/production/components/Typography/Code/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../../../../../../../src/components/Typography/Code/Code.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FontSize, Typography } from '~tokens/global';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { throwBladeError } from '~utils/logger';\n\ntype CodeCommonProps = {\n  /**\n   * Sets the color of the Heading component.\n   */\n  children: StringChildrenType;\n  /**\n   * Decides the fontSize and padding of Code\n   *\n   * @default small\n   */\n  size?: Extract<BaseTextSizes, 'small' | 'medium'>;\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'bold'>;\n  isHighlighted?: boolean;\n  color?: BaseTextProps['color'];\n} & TestID &\n  StyledPropsBlade;\n\ntype CodeHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted?: true;\n  /**\n   * color prop can only be added when `isHighlighted` is set to `false`\n   */\n  color?: undefined;\n};\n\ntype CodeNonHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted: false;\n  /**\n   * color prop to set color of text when `isHighlighted` is set to false\n   */\n  color?: BaseTextProps['color'];\n};\n\nexport type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;\n\ntype CodeContainerProps = {\n  size: CodeProps['size'];\n  isHighlighted: CodeProps['isHighlighted'];\n};\n\nconst platformType = getPlatformType();\nconst isPlatformWeb = platformType === 'browser' || platformType === 'node';\n\nconst getCodeFontSizeAndLineHeight = (\n  size: CodeProps['size'],\n): { fontSize: keyof FontSize; lineHeight: keyof Typography['lineHeights'] } | undefined => {\n  switch (size) {\n    case 'medium':\n      return { fontSize: 75, lineHeight: 75 };\n    case 'small':\n      return { fontSize: 25, lineHeight: 25 };\n    default:\n      if (__DEV__) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: `Unexpected size: ${size}`,\n        });\n      }\n      return undefined;\n  }\n};\n\nconst CodeContainer = styled(BaseBox)<CodeContainerProps>((props) => {\n  const padding = `${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;\n  return {\n    padding,\n    backgroundColor: props.isHighlighted\n      ? props.theme.colors.feedback.background.neutral.subtle\n      : undefined,\n    borderRadius: props.theme.border.radius.medium,\n    display: isPlatformWeb ? 'inline-block' : 'flex',\n    alignSelf: isPlatformWeb ? undefined : 'center',\n    verticalAlign: 'middle',\n    lineHeight: makeTypographySize(props.theme.typography.lineHeights[0]),\n  };\n});\n\nconst getCodeColor = ({\n  isHighlighted,\n  color,\n}: Pick<CodeProps, 'isHighlighted' | 'color'>): CodeProps['color'] => {\n  if (isHighlighted) {\n    if (__DEV__) {\n      if (color) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: '`color` prop cannot be used without `isHighlighted={false}`',\n        });\n      }\n    }\n\n    return 'surface.text.gray.subtle';\n  }\n\n  if (color) {\n    return color;\n  }\n\n  return 'surface.text.gray.normal';\n};\n/**\n * Code component can be used for displaying token, variable names, or inlined code snippets.\n *\n * ## Usage\n *\n * ### In Web\n * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`\n *\n * ```tsx\n * <Text>\n *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text\n * </Text>\n * ```\n *\n * ### In React Native\n *\n * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned\n *\n * ```tsx\n *  <Box flexWrap=\"wrap\" flexDirection=\"row\" alignItems=\"flex-start\">\n *   <Text>Lorem ipsum </Text>\n *   <Code>SENTRY_TOKEN</Code>\n *   <Text> normal text</Text>\n * </Box>\n * ```\n */\nconst Code = ({\n  children,\n  size = 'small',\n  weight = 'regular',\n  isHighlighted = true,\n  color,\n  testID,\n  ...styledProps\n}: CodeProps): React.ReactElement => {\n  const { fontSize, lineHeight } = getCodeFontSizeAndLineHeight(size)!;\n  const codeTextColor = React.useMemo<CodeProps['color']>(\n    () => getCodeColor({ isHighlighted, color }),\n    [isHighlighted, color],\n  );\n\n  return (\n    <CodeContainer\n      size={size}\n      isHighlighted={isHighlighted}\n      as={isPlatformWeb ? 'span' : undefined}\n      {...metaAttribute({ name: MetaConstants.Code, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseText\n        color={codeTextColor}\n        fontFamily=\"code\"\n        fontSize={fontSize}\n        fontWeight={weight}\n        as={isPlatformWeb ? 'code' : undefined}\n        lineHeight={lineHeight}\n      >\n        {children}\n      </BaseText>\n    </CodeContainer>\n  );\n};\n\nexport { Code };\n"],"names":["platformType","getPlatformType","isPlatformWeb","getCodeFontSizeAndLineHeight","size","fontSize","lineHeight","throwBladeError","moduleName","message","concat","undefined","CodeContainer","styled","BaseBox","withConfig","displayName","componentId","props","padding","makeSpace","theme","spacing","backgroundColor","isHighlighted","colors","feedback","background","neutral","subtle","borderRadius","border","radius","medium","display","alignSelf","verticalAlign","makeTypographySize","typography","lineHeights","getCodeColor","_ref","color","Code","_ref2","children","_ref2$size","_ref2$weight","weight","_ref2$isHighlighted","testID","styledProps","_objectWithoutProperties","_excluded","_ref3","codeTextColor","React","useMemo","_jsx","_objectSpread","as","metaAttribute","name","MetaConstants","getStyledProps","BaseText","fontFamily","fontWeight"],"mappings":"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"}
+{"version":3,"file":"Code.js","sources":["../../../../../../../src/components/Typography/Code/Code.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FontSize, Typography } from '~tokens/global';\nimport type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { throwBladeError } from '~utils/logger';\n\ntype CodeCommonProps = {\n  /**\n   * Sets the color of the Heading component.\n   */\n  children: StringChildrenType;\n  /**\n   * Decides the fontSize and padding of Code\n   *\n   * @default small\n   */\n  size?: Extract<BaseTextSizes, 'small' | 'medium'>;\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'bold'>;\n  isHighlighted?: boolean;\n  color?: BaseTextProps['color'];\n} & TestID &\n  StyledPropsBlade;\n\ntype CodeHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted?: true;\n  /**\n   * color prop can only be added when `isHighlighted` is set to `false`\n   */\n  color?: undefined;\n};\n\ntype CodeNonHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted: false;\n  /**\n   * color prop to set color of text when `isHighlighted` is set to false\n   */\n  color?: BaseTextProps['color'];\n};\n\nexport type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;\n\ntype CodeContainerProps = {\n  size: CodeProps['size'];\n  isHighlighted: CodeProps['isHighlighted'];\n};\n\nconst platformType = getPlatformType();\nconst isPlatformWeb = platformType === 'browser' || platformType === 'node';\n\nconst getCodeFontSizeAndLineHeight = (\n  size: CodeProps['size'],\n): { fontSize: keyof FontSize; lineHeight: keyof Typography['lineHeights'] } | undefined => {\n  switch (size) {\n    case 'medium':\n      return { fontSize: 75, lineHeight: 75 };\n    case 'small':\n      return { fontSize: 25, lineHeight: 25 };\n    default:\n      if (__DEV__) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: `Unexpected size: ${size}`,\n        });\n      }\n      return undefined;\n  }\n};\n\nconst CodeContainer = styled(BaseBox)<CodeContainerProps>((props) => {\n  const padding = `${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;\n  return {\n    padding,\n    backgroundColor: props.isHighlighted\n      ? props.theme.colors.feedback.background.neutral.subtle\n      : undefined,\n    borderRadius: props.theme.border.radius.medium,\n    display: isPlatformWeb ? 'inline-block' : 'flex',\n    alignSelf: isPlatformWeb ? undefined : 'center',\n    verticalAlign: 'middle',\n    lineHeight: makeTypographySize(props.theme.typography.lineHeights[0]),\n  };\n});\n\nconst getCodeColor = ({\n  isHighlighted,\n  color,\n}: Pick<CodeProps, 'isHighlighted' | 'color'>): CodeProps['color'] => {\n  if (isHighlighted) {\n    if (__DEV__) {\n      if (color) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: '`color` prop cannot be used without `isHighlighted={false}`',\n        });\n      }\n    }\n\n    return 'surface.text.gray.subtle';\n  }\n\n  if (color) {\n    return color;\n  }\n\n  return 'surface.text.gray.normal';\n};\n\nconst _Code = (\n  {\n    children,\n    size = 'small',\n    weight = 'regular',\n    isHighlighted = true,\n    color,\n    testID,\n    ...styledProps\n  }: CodeProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { fontSize, lineHeight } = getCodeFontSizeAndLineHeight(size)!;\n  const codeTextColor = React.useMemo<CodeProps['color']>(\n    () => getCodeColor({ isHighlighted, color }),\n    [isHighlighted, color],\n  );\n\n  return (\n    <CodeContainer\n      ref={ref as never}\n      size={size}\n      isHighlighted={isHighlighted}\n      as={isPlatformWeb ? 'span' : undefined}\n      {...metaAttribute({ name: MetaConstants.Code, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseText\n        color={codeTextColor}\n        fontFamily=\"code\"\n        fontSize={fontSize}\n        fontWeight={weight}\n        as={isPlatformWeb ? 'code' : undefined}\n        lineHeight={lineHeight}\n      >\n        {children}\n      </BaseText>\n    </CodeContainer>\n  );\n};\n\n/**\n * Code component can be used for displaying token, variable names, or inlined code snippets.\n *\n * ## Usage\n *\n * ### In Web\n * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`\n *\n * ```tsx\n * <Text>\n *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text\n * </Text>\n * ```\n *\n * ### In React Native\n *\n * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned\n *\n * ```tsx\n *  <Box flexWrap=\"wrap\" flexDirection=\"row\" alignItems=\"flex-start\">\n *   <Text>Lorem ipsum </Text>\n *   <Code>SENTRY_TOKEN</Code>\n *   <Text> normal text</Text>\n * </Box>\n * ```\n */\nconst Code = React.forwardRef(_Code);\n\nexport { Code };\n"],"names":["platformType","getPlatformType","isPlatformWeb","getCodeFontSizeAndLineHeight","size","fontSize","lineHeight","throwBladeError","moduleName","message","concat","undefined","CodeContainer","styled","BaseBox","withConfig","displayName","componentId","props","padding","makeSpace","theme","spacing","backgroundColor","isHighlighted","colors","feedback","background","neutral","subtle","borderRadius","border","radius","medium","display","alignSelf","verticalAlign","makeTypographySize","typography","lineHeights","getCodeColor","_ref","color","_Code","_ref2","ref","children","_ref2$size","_ref2$weight","weight","_ref2$isHighlighted","testID","styledProps","_objectWithoutProperties","_excluded","_ref3","codeTextColor","React","useMemo","_jsx","_objectSpread","as","metaAttribute","name","MetaConstants","Code","getStyledProps","BaseText","fontFamily","fontWeight","forwardRef"],"mappings":"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"}

package/build/lib/web/production/components/Typography/Display/Display.js

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
 import '../BaseText/index.js';
 import { useValidateAsProp } from '../utils.js';
 import '../../Box/styledProps/index.js';
@@ -53,7 +54,7 @@ var getProps = function getProps(_ref) {
   props.as = as || props.as;
   return props;
 };
-var Display = function Display(_ref2) {
+var _Display = function _Display(_ref2, ref) {
   var as = _ref2.as,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'small' : _ref2$size,
@@ -78,13 +79,16 @@ var Display = function Display(_ref2) {
     weight: weight,
     testID: testID
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     textAlign: textAlign,
     textDecorationLine: textDecorationLine
   }, getStyledProps(styledProps)), {}, {
     children: children
   }));
 };
+var Display = /*#__PURE__*/React__default.forwardRef(_Display);
 
 export { Display };
 //# sourceMappingURL=Display.js.map

package/build/lib/web/production/components/Typography/Display/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../../../../../../../src/components/Typography/Display/Display.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { TestID } from '~utils/types';\nimport { getPlatformType } from '~utils';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type DisplayProps = {\n  as?: typeof validAsValues[number];\n  /**\n   * Overrides the color of the Display component.\n   *\n   * **Note** This takes priority over `type` and `contrast` prop to decide color of title\n   */\n  color?: BaseTextProps['color'];\n  size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge'>;\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;\n  children: React.ReactNode;\n  textAlign?: BaseTextProps['textAlign'];\n  textDecorationLine?: BaseTextProps['textDecorationLine'];\n} & TestID &\n  StyledPropsBlade;\n\nconst getProps = ({\n  as,\n  size,\n  weight,\n  color,\n  testID,\n}: Pick<DisplayProps, 'as' | 'size' | 'color' | 'weight' | 'testID'>): Omit<\n  BaseTextProps,\n  'children'\n> => {\n  const isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';\n  const letterSpacing = weight === 'medium' || weight === 'regular' ? 50 : 100;\n  const props: Omit<BaseTextProps, 'children'> = {\n    color,\n    fontSize: 800,\n    fontWeight: weight,\n    fontStyle: 'normal',\n    lineHeight: 800,\n    fontFamily: 'heading',\n    accessibilityProps: isPlatformWeb ? {} : { role: 'heading' },\n    componentName: 'display',\n    testID,\n    letterSpacing,\n  };\n\n  if (size === 'small') {\n    props.fontSize = 800;\n    props.lineHeight = 800;\n  } else if (size === 'medium') {\n    props.fontSize = 900;\n    props.lineHeight = 900;\n  } else if (size === 'large') {\n    props.fontSize = 1000;\n    props.lineHeight = 1000;\n  } else if (size === 'xlarge') {\n    props.fontSize = 1100;\n    props.lineHeight = 1100;\n  }\n\n  props.as = isPlatformWeb ? 'h1' : undefined;\n  // override the computed `as` prop if user passed an `as` prop\n  props.as = as || props.as;\n  return props;\n};\n\nexport const Display = ({\n  as,\n  size = 'small',\n  weight = 'semibold',\n  color = 'surface.text.gray.normal',\n  children,\n  testID,\n  textAlign,\n  textDecorationLine,\n  ...styledProps\n}: DisplayProps): ReactElement => {\n  useValidateAsProp({ componentName: 'Display', as, validAsValues });\n\n  const props = getProps({ as, size, color, weight, testID });\n\n  return (\n    <BaseText\n      {...props}\n      textAlign={textAlign}\n      textDecorationLine={textDecorationLine}\n      {...getStyledProps(styledProps)}\n    >\n      {children}\n    </BaseText>\n  );\n};\n"],"names":["validAsValues","getProps","_ref","as","size","weight","color","testID","isPlatformWeb","getPlatformType","letterSpacing","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","role","componentName","undefined","Display","_ref2","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps"],"mappings":"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"}
+{"version":3,"file":"Display.js","sources":["../../../../../../../src/components/Typography/Display/Display.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { BladeElementRef, TestID } from '~utils/types';\nimport { getPlatformType } from '~utils';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type DisplayProps = {\n  as?: typeof validAsValues[number];\n  /**\n   * Overrides the color of the Display component.\n   *\n   * **Note** This takes priority over `type` and `contrast` prop to decide color of title\n   */\n  color?: BaseTextProps['color'];\n  size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge'>;\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;\n  children: React.ReactNode;\n  textAlign?: BaseTextProps['textAlign'];\n  textDecorationLine?: BaseTextProps['textDecorationLine'];\n} & TestID &\n  StyledPropsBlade;\n\nconst getProps = ({\n  as,\n  size,\n  weight,\n  color,\n  testID,\n}: Pick<DisplayProps, 'as' | 'size' | 'color' | 'weight' | 'testID'>): Omit<\n  BaseTextProps,\n  'children'\n> => {\n  const isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';\n  const letterSpacing = weight === 'medium' || weight === 'regular' ? 50 : 100;\n  const props: Omit<BaseTextProps, 'children'> = {\n    color,\n    fontSize: 800,\n    fontWeight: weight,\n    fontStyle: 'normal',\n    lineHeight: 800,\n    fontFamily: 'heading',\n    accessibilityProps: isPlatformWeb ? {} : { role: 'heading' },\n    componentName: 'display',\n    testID,\n    letterSpacing,\n  };\n\n  if (size === 'small') {\n    props.fontSize = 800;\n    props.lineHeight = 800;\n  } else if (size === 'medium') {\n    props.fontSize = 900;\n    props.lineHeight = 900;\n  } else if (size === 'large') {\n    props.fontSize = 1000;\n    props.lineHeight = 1000;\n  } else if (size === 'xlarge') {\n    props.fontSize = 1100;\n    props.lineHeight = 1100;\n  }\n\n  props.as = isPlatformWeb ? 'h1' : undefined;\n  // override the computed `as` prop if user passed an `as` prop\n  props.as = as || props.as;\n  return props;\n};\n\nconst _Display = (\n  {\n    as,\n    size = 'small',\n    weight = 'semibold',\n    color = 'surface.text.gray.normal',\n    children,\n    testID,\n    textAlign,\n    textDecorationLine,\n    ...styledProps\n  }: DisplayProps,\n  ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n  useValidateAsProp({ componentName: 'Display', as, validAsValues });\n\n  const props = getProps({ as, size, color, weight, testID });\n\n  return (\n    <BaseText\n      ref={ref}\n      {...props}\n      textAlign={textAlign}\n      textDecorationLine={textDecorationLine}\n      {...getStyledProps(styledProps)}\n    >\n      {children}\n    </BaseText>\n  );\n};\n\nconst Display = React.forwardRef(_Display);\nexport { Display };\n"],"names":["validAsValues","getProps","_ref","as","size","weight","color","testID","isPlatformWeb","getPlatformType","letterSpacing","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","role","componentName","undefined","_Display","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps","Display","React","forwardRef"],"mappings":"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"}

package/build/lib/web/production/components/Typography/Heading/Heading.js

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
 import '../BaseText/index.js';
 import { useValidateAsProp } from '../utils.js';
 import '../../Box/styledProps/index.js';
@@ -58,7 +59,7 @@ var getHeadingProps = function getHeadingProps(_ref) {
   props.as = as || props.as;
   return props;
 };
-var Heading = function Heading(_ref2) {
+var _Heading = function _Heading(_ref2, ref) {
   var as = _ref2.as,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'small' : _ref2$size,
@@ -84,12 +85,14 @@ var Heading = function Heading(_ref2) {
     testID: testID
   });
   return /*#__PURE__*/jsx(BaseText, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     textAlign: textAlign,
     textDecorationLine: textDecorationLine
   }, getStyledProps(styledProps)), {}, {
     children: children
   }));
 };
+var Heading = /*#__PURE__*/React__default.forwardRef(_Heading);
 
 export { Heading, getHeadingProps };
 //# sourceMappingURL=Heading.js.map

package/build/lib/web/production/components/Typography/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n  as?: typeof validAsValues[number];\n  /**\n   * Overrides the color of the Heading component.\n   *\n   * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n   */\n  color?: BaseTextProps['color'];\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;\n  children: React.ReactNode;\n  textAlign?: BaseTextProps['textAlign'];\n  textDecorationLine?: BaseTextProps['textDecorationLine'];\n  size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n} & TestID &\n  StyledPropsBlade;\n\nexport const getHeadingProps = ({\n  as,\n  size,\n  weight,\n  color,\n  testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n  BaseTextProps,\n  'children'\n> => {\n  const props: Omit<BaseTextProps, 'children'> = {\n    color,\n    fontSize: 300,\n    fontWeight: weight ?? 'semibold',\n    fontStyle: 'normal',\n    lineHeight: 300,\n    fontFamily: 'heading',\n    accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n    componentName: 'heading',\n    testID,\n  };\n\n  if (size === 'small') {\n    props.fontSize = 300;\n    props.lineHeight = 300;\n    props.as = 'h6';\n  } else if (size === 'medium') {\n    props.fontSize = 400;\n    props.lineHeight = 400;\n    props.as = 'h5';\n  } else if (size === 'large') {\n    props.fontSize = 500;\n    props.lineHeight = 500;\n    props.as = 'h4';\n  } else if (size === 'xlarge') {\n    props.fontSize = 600;\n    props.lineHeight = 600;\n    props.as = 'h3';\n  } else if (size === '2xlarge') {\n    props.fontSize = 700;\n    props.lineHeight = 700;\n    props.as = 'h2';\n  }\n\n  // override the computed `as` prop if user passed an `as` prop\n  props.as = as || props.as;\n  return props;\n};\n\nexport const Heading = ({\n  as,\n  size = 'small',\n  weight = 'semibold',\n  color = 'surface.text.gray.normal',\n  children,\n  testID,\n  textAlign,\n  textDecorationLine,\n  ...styledProps\n}: HeadingProps): ReactElement => {\n  useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n  const props = getHeadingProps({ as, size, weight, color, testID });\n\n  return (\n    <BaseText\n      {...props}\n      textAlign={textAlign}\n      textDecorationLine={textDecorationLine}\n      {...getStyledProps(styledProps)}\n    >\n      {children}\n    </BaseText>\n  );\n};\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","Heading","_ref2","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps"],"mappings":"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"}
+{"version":3,"file":"Heading.js","sources":["../../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef, TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n  as?: typeof validAsValues[number];\n  /**\n   * Overrides the color of the Heading component.\n   *\n   * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n   */\n  color?: BaseTextProps['color'];\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;\n  children: React.ReactNode;\n  textAlign?: BaseTextProps['textAlign'];\n  textDecorationLine?: BaseTextProps['textDecorationLine'];\n  size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n} & TestID &\n  StyledPropsBlade;\n\nexport const getHeadingProps = ({\n  as,\n  size,\n  weight,\n  color,\n  testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n  BaseTextProps,\n  'children'\n> => {\n  const props: Omit<BaseTextProps, 'children'> = {\n    color,\n    fontSize: 300,\n    fontWeight: weight ?? 'semibold',\n    fontStyle: 'normal',\n    lineHeight: 300,\n    fontFamily: 'heading',\n    accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n    componentName: 'heading',\n    testID,\n  };\n\n  if (size === 'small') {\n    props.fontSize = 300;\n    props.lineHeight = 300;\n    props.as = 'h6';\n  } else if (size === 'medium') {\n    props.fontSize = 400;\n    props.lineHeight = 400;\n    props.as = 'h5';\n  } else if (size === 'large') {\n    props.fontSize = 500;\n    props.lineHeight = 500;\n    props.as = 'h4';\n  } else if (size === 'xlarge') {\n    props.fontSize = 600;\n    props.lineHeight = 600;\n    props.as = 'h3';\n  } else if (size === '2xlarge') {\n    props.fontSize = 700;\n    props.lineHeight = 700;\n    props.as = 'h2';\n  }\n\n  // override the computed `as` prop if user passed an `as` prop\n  props.as = as || props.as;\n  return props;\n};\n\nconst _Heading = (\n  {\n    as,\n    size = 'small',\n    weight = 'semibold',\n    color = 'surface.text.gray.normal',\n    children,\n    testID,\n    textAlign,\n    textDecorationLine,\n    ...styledProps\n  }: HeadingProps,\n  ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n  useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n  const props = getHeadingProps({ as, size, weight, color, testID });\n\n  return (\n    <BaseText\n      {...props}\n      ref={ref}\n      textAlign={textAlign}\n      textDecorationLine={textDecorationLine}\n      {...getStyledProps(styledProps)}\n    >\n      {children}\n    </BaseText>\n  );\n};\n\nconst Heading = React.forwardRef(_Heading);\n\nexport { Heading };\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","_Heading","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps","Heading","React","forwardRef"],"mappings":"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"}