@persona/design-system 0.7.1 → 0.8.0

package/dist/Sticker-BLbgJxcH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticker-BLbgJxcH.mjs","names":[],"sources":["../components/Sticker/tone.ts","../components/Sticker/Sticker.tsx"],"sourcesContent":["import type { Color } from '@persona/design-tokens';\nimport { type PdsColor, withAlpha } from 'design-system/lib/color';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nimport type { StickerProps } from './Sticker';\n\nexport interface StickerTone {\n  background: Color;\n  backgroundHover: Color;\n  color: Color;\n  colorHover: Color;\n  colorDisabled: PdsColor;\n}\n\nconst buildSemanticStickerTone = (\n  t: SemanticTokens,\n  variant: StickerProps['variant'],\n  onSecondaryBackground: boolean,\n): StickerTone => {\n  switch (variant) {\n    case 'white':\n      return {\n        background: t.FeedbackNeutralInverse,\n        backgroundHover: t.FeedbackNeutral1,\n        color: t.FgPrimary,\n        colorHover: t.FgPrimary,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'blue':\n      return {\n        background: t.FeedbackInfo2,\n        backgroundHover: t.FeedbackInfo3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'teal':\n      return {\n        background: t.FeedbackMisc1,\n        backgroundHover: t.FeedbackMisc2,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'green':\n    case 'success':\n      return {\n        background: t.FeedbackSuccess2,\n        backgroundHover: t.FeedbackSuccess3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'yellow':\n    case 'caution':\n      return {\n        background: t.FeedbackHighlight1,\n        backgroundHover: t.FeedbackHighlight2,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'orange':\n      return {\n        background: t.FeedbackWarning2,\n        backgroundHover: t.FeedbackWarning3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'pink':\n    case 'danger':\n      return {\n        background: t.FeedbackDanger2,\n        backgroundHover: t.FeedbackDanger3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'red':\n      return {\n        background: t.FeedbackDanger3,\n        backgroundHover: t.FeedbackDanger4,\n        color: t.FgInverse,\n        colorHover: t.FgInverseStatic,\n        colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65),\n      };\n    case 'purple':\n    case 'primary':\n      return {\n        background: t.FeedbackAccent2,\n        backgroundHover: t.FeedbackAccent3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgInverseStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'darkGrey':\n      return {\n        background: t.FeedbackNeutral4,\n        backgroundHover: t.FeedbackNeutral5,\n        color: t.FgInverseStatic,\n        colorHover: t.FgInverseStatic,\n        colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65),\n      };\n    default:\n      return {\n        background: onSecondaryBackground ? t.FeedbackNeutral2Static : t.FeedbackNeutral1,\n        backgroundHover: t.FeedbackNeutral3,\n        color: t.FgPrimary,\n        colorHover: t.FgPrimary,\n        colorDisabled: t.FgDisabled,\n      };\n  }\n};\n\nconst semanticStickerToneCache = new WeakMap<SemanticTokens, Map<string, StickerTone>>();\n\nexport const semanticStickerTone = (\n  t: SemanticTokens,\n  variant: StickerProps['variant'],\n  onSecondaryBackground = false,\n): StickerTone => {\n  let tones = semanticStickerToneCache.get(t);\n  if (!tones) {\n    tones = new Map();\n    semanticStickerToneCache.set(t, tones);\n  }\n\n  const key = `${variant ?? ''}:${onSecondaryBackground ? 'secondary' : 'default'}`;\n  let tone = tones.get(key);\n  if (!tone) {\n    tone = buildSemanticStickerTone(t, variant, onSecondaryBackground);\n    tones.set(key, tone);\n  }\n  return tone;\n};\n","import type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons/12px';\nimport { IconButton } from 'design-system/components/Button';\nimport Stack from 'design-system/components/Stack';\nimport { withAlpha } from 'design-system/lib/color';\nimport {\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticTokens } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n\nimport { semanticStickerTone } from './tone';\n// Define the options with labels\nexport const STICKER_COLOR_CONFIG = {\n  white: 'White',\n  blue: 'Blue',\n  teal: 'Teal',\n  green: 'Green',\n  yellow: 'Yellow',\n  orange: 'Orange',\n  pink: 'Pink',\n  red: 'Red',\n  purple: 'Purple',\n  darkGrey: 'Dark Grey',\n  grey: 'Grey',\n} as const;\n\n// Derive the type from the object keys\nexport type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;\n\nexport interface StickerProps extends ComponentPropsWithoutRef<'div'> {\n  variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;\n\n  /**\n   * Icon to render to the left of the Sticker. 12px icons recommended.\n   */\n  icon?: ReactNode;\n\n  /**\n   * Callback to call upon clicking \"x\" button. Non-null will render the button.\n   */\n  onDismiss?: MouseEventHandler;\n\n  /**\n   * Additional props to pass to the dismiss \"x\" button.\n   */\n  dismissButtonProps?: ComponentPropsWithoutRef<'button'>;\n\n  /**\n   * Renders disabled style for the entire Sticker and disables \"x\" button.\n   */\n  disabled?: boolean;\n\n  /**\n   * Shows a required asterisk (*) that won't be cut off when text is truncated.\n   */\n  isRequired?: boolean;\n\n  /**\n   * In some cases we render a sticker/badge on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst StickerIcon = styled('div')<Pick<StickerProps, 'variant' | 'disabled'>>`\n  color: ${({ theme, variant, disabled }) => {\n    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const tone = semanticStickerTone(tokens, variant);\n      return disabled ? tone.colorDisabled : tone.color;\n    }\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return 'inherit';\n    }\n  }};\n  line-height: 0;\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n`;\n\nconst RequiredAsterisk = styled.span<Pick<StickerProps, 'variant' | 'disabled'>>`\n  color: ${({ theme, variant, disabled }) => {\n    const tokens = semanticTokens(theme);\n    return disabled && tokens\n      ? semanticStickerTone(tokens, variant).colorDisabled\n      : semanticColor(theme, 'FgDanger1', Color.TextDanger);\n  }};\n  /* Ensure asterisk never gets hidden and takes minimal space */\n  flex-shrink: 0;\n`;\n\nexport const StickerContainer = styled(Stack)`\n  padding: 2px ${Spacing[1]};\n  /* Ensure container can shrink for text truncation */\n  min-width: 0;\n  flex: 1;\n`;\n\nexport const StickerContentContainer = styled(StickerContainer)`\n  ${paragraphMixins.sm}\n  padding: 0;\n`;\n\nexport const StyledTruncatedText = styled(TruncatedText)`\n  ${paragraphMixins.sm}\n  flex: 1;\n  min-width: 0;\n  line-height: 1;\n  transform: translateY(0.5px);\n`;\n\nconst DismissButton = styled(IconButton)<Pick<StickerProps, 'variant' | 'disabled'>>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-sticker: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)};\n\n  border: none;\n\n  padding: 0 ${Spacing[1]};\n  border-radius: ${BorderRadius.Sm};\n  width: 1rem;\n\n  height: 100%;\n\n  display: inline-flex;\n  align-items: center;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  color: ${({ theme, variant, disabled }) => {\n    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const tone = semanticStickerTone(tokens, variant);\n      return disabled ? tone.colorDisabled : tone.color;\n    }\n    if (variant === 'red' || variant === 'darkGrey') {\n      return theme.color.text.inverse;\n    }\n    return disabled ? 'inherit' : Color.BorderIconPrimary;\n  }};\n\n  &${isDisabled} {\n    background-color: inherit !important;\n    color: ${({ theme, variant }) => {\n      const tokens = semanticTokens(theme);\n      return tokens ? semanticStickerTone(tokens, variant).colorDisabled : 'inherit';\n    }} !important;\n\n    svg,\n    svg path {\n      color: inherit !important;\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} {\n    box-shadow: 0 0 0 1px var(--background-color-behind-sticker);\n  }\n\n  &${isHovered}${isNotDisabled} {\n    cursor: pointer;\n\n    background: ${({ theme, variant }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return semanticStickerTone(tokens, variant).backgroundHover;\n      }\n      if (variant === 'grey' || variant === 'basic') {\n        return Color.BackgroundLabelGreyHover;\n      } else if (variant === 'darkGrey') {\n        return Color.BackgroundLabelDarkGreyHover;\n      } else if (variant === 'purple') {\n        return Color.BackgroundLabelPurpleHover;\n      } else if (variant === 'red' || variant === 'danger') {\n        return Color.BackgroundLabelDarkRedHover;\n      } else if (variant === 'orange') {\n        return Color.BackgroundLabelOrangeHover;\n      } else if (variant === 'yellow' || variant === 'caution') {\n        return Color.BackgroundLabelYellowHover;\n      } else if (variant === 'green' || variant === 'success') {\n        return Color.BackgroundLabelGreenHover;\n      } else if (variant === 'teal') {\n        return Color.BackgroundLabelTealHover;\n      } else if (variant === 'blue') {\n        return Color.BackgroundLabelBlueHover;\n      } else if (variant === 'pink') {\n        return Color.BackgroundLabelRedHover;\n      } else if (variant === 'white') {\n        return Color.BackgroundLabelWhiteHover;\n      } else {\n        return 'inherit';\n      }\n    }};\n  }\n`;\n\nconst StyledSticker = styled('div')<\n  StickerProps & { sizeIcon?: boolean; $onSecondaryBackground?: boolean }\n>`\n  display: inline-flex;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  max-width: 100%;\n\n  color: ${({ theme, variant, disabled, $onSecondaryBackground }) => {\n    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const tone = semanticStickerTone(tokens, variant, $onSecondaryBackground);\n      return disabled ? tone.colorDisabled : tone.color;\n    }\n    if (disabled) {\n      return variant === 'red' || variant === 'darkGrey'\n        ? theme.color.text.inverse\n        : theme.color.text.disabled;\n    }\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return theme.color.text.primary;\n    }\n  }};\n  background: ${({ theme, variant, disabled, $onSecondaryBackground }) => {\n    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const background = semanticStickerTone(tokens, variant, $onSecondaryBackground).background;\n      return disabled ? withAlpha(background, tokens.Opacity65) : background;\n    }\n    if (disabled) {\n      switch (variant) {\n        case 'white':\n          return Color.BackgroundLabelWhite;\n        case 'blue':\n          return Color.BackgroundLabelBlueDisabled;\n        case 'teal':\n          return Color.BackgroundLabelTealDisabled;\n        case 'green':\n        case 'success':\n          return Color.BackgroundLabelGreenDisabled;\n        case 'yellow':\n        case 'caution':\n          return Color.BackgroundLabelYellowDisabled;\n        case 'orange':\n          return Color.BackgroundLabelOrangeDisabled;\n        case 'pink':\n        case 'danger':\n          return Color.BackgroundLabelRedDisabled;\n        case 'red':\n          return Color.BackgroundLabelDarkRedDisabled;\n        case 'purple':\n        case 'primary':\n          return Color.BackgroundLabelPurpleDisabled;\n        case 'darkGrey':\n          return Color.BackgroundLabelDarkGreyDisabled;\n        case 'basic':\n        case 'grey':\n        default:\n          if ($onSecondaryBackground) {\n            return Color.CoreSlate100;\n          }\n          return Color.BackgroundLabelGreyDisabled;\n      }\n    }\n    switch (variant) {\n      case 'white':\n        return Color.BackgroundLabelWhiteDisabled;\n      case 'blue':\n        return Color.BackgroundLabelBlue;\n      case 'teal':\n        return Color.BackgroundLabelTeal;\n      case 'green':\n      case 'success':\n        return Color.BackgroundLabelGreen;\n      case 'yellow':\n      case 'caution':\n        return Color.BackgroundLabelYellow;\n      case 'orange':\n        return Color.BackgroundLabelOrange;\n      case 'pink':\n      case 'danger':\n        return Color.BackgroundLabelRed;\n      case 'red':\n        return Color.BackgroundLabelDarkRed;\n      case 'purple':\n      case 'primary':\n        return Color.BackgroundLabelPurple;\n      case 'darkGrey':\n        return Color.BackgroundLabelDarkGrey;\n      case 'basic':\n      default:\n        if ($onSecondaryBackground) {\n          return Color.CoreSlate200;\n        }\n        return Color.BackgroundLabelGrey;\n    }\n  }};\n`;\n\nexport const Sticker = ({\n  variant,\n  icon,\n  children,\n  onDismiss,\n  disabled,\n  dismissButtonProps,\n  isRequired,\n  onSecondaryBackground,\n  ...props\n}: StickerProps) => {\n  const hasContent = children != null;\n\n  if (!hasContent) {\n    const hasIcon = icon != null;\n    if (!hasIcon) {\n      console.warn('Sticker component requires content and/or an icon to render');\n      return null;\n    }\n\n    if (hasIcon && !props['aria-label']) {\n      console.warn('Sticker component requires an aria-label when only rendering an icon');\n    }\n  }\n\n  return (\n    <StyledSticker\n      $onSecondaryBackground={onSecondaryBackground}\n      variant={variant}\n      disabled={disabled}\n      sizeIcon={!!icon && !hasContent}\n      {...props}\n    >\n      <StickerContainer direction='horizontal' align='center' spacing={Spacing[0]}>\n        <StickerContentContainer direction='horizontal' align='center' spacing={Spacing[1]}>\n          {icon && (\n            <StickerIcon variant={variant} disabled={disabled}>\n              {icon}\n            </StickerIcon>\n          )}\n          {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n        </StickerContentContainer>\n        {isRequired && (\n          <RequiredAsterisk variant={variant} disabled={disabled}>\n            *\n          </RequiredAsterisk>\n        )}\n      </StickerContainer>\n\n      {onDismiss && (\n        <DismissButton\n          variant={variant}\n          disabled={disabled}\n          id='sticker__dismiss-button'\n          size='sm'\n          onClick={onDismiss}\n          aria-label='Remove'\n          {...dismissButtonProps}\n        >\n          <XIcon />\n        </DismissButton>\n      )}\n    </StyledSticker>\n  );\n};\n\nexport default Sticker;\n"],"mappings":"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"}

package/dist/{Sticker-Bf9rhSkv.d.mts → Sticker-BmyKaxwx.d.mts}

@@ -1,6 +1,6 @@
-import { o as Variant } from "./theme-DKiszVRN.mjs";
-import { i as StackProps } from "./Stack-8KGPQp0u.mjs";
-import { r as TruncatedTextProps } from "./TruncatedText-g2T5HlqX.mjs";
+import { o as Variant } from "./theme-BcaR-Au5.mjs";
+import { i as StackProps } from "./Stack-CYqjBXe8.mjs";
+import { r as TruncatedTextProps } from "./TruncatedText-O7hE3w0O.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -65,4 +65,4 @@ declare const Sticker: ({
 }: StickerProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { StickerContentContainer as a, StickerContainer as i, STICKER_COLOR_CONFIG as n, StickerProps as o, Sticker as r, StyledTruncatedText as s, LabelBackgrounds as t };
-//# sourceMappingURL=Sticker-Bf9rhSkv.d.mts.map
+//# sourceMappingURL=Sticker-BmyKaxwx.d.mts.map

package/dist/Sticker.d.mts

@@ -1,2 +1,2 @@
-import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "./Sticker-Bf9rhSkv.mjs";
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "./Sticker-BmyKaxwx.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/StringValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-gnF3MPfk2.mjs";
+import { t as ValueControlProps } from "./types-CoVZwrMW.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/StringValueControl/StringValueControl.d.ts

package/dist/Tab.d.mts

@@ -1,4 +1,4 @@
-import { t as Button } from "./Button-HodDf_bB.mjs";
+import { t as Button } from "./Button-xZ6DC5XC.mjs";
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/{TabBar-BepWbJHz.mjs → TabBar-Bj84q1Mr.mjs}

@@ -3,8 +3,8 @@ import { semanticColor } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import "./variables/transitions.mjs";
 import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { n as Button, t as IconButton } from "./IconButton-CqTPMhjV.mjs";
-import { t as Badge } from "./Badge-BD0Ut46g.mjs";
+import { n as Button, t as IconButton } from "./IconButton-CCLMYWVN.mjs";
+import { t as Badge } from "./Badge-COqUjFQu.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { cloneElement, createContext, forwardRef, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -223,10 +223,7 @@ const Tab = ({ selected, disabled, children, badge, sticker, as, size, ...elemPr
 		...elemProps,
 		children: [
 			displayChildren,
-			badge && /* @__PURE__ */ jsx(AdornmentContainer, { children: badge.type === Badge ? cloneElement(badge, {
-				variant: selected ? "active" : "basic",
-				onSecondaryBackground: true
-			}) : badge }),
+			badge && /* @__PURE__ */ jsx(AdornmentContainer, { children: badge.type === Badge ? cloneElement(badge, { variant: selected ? "active" : "basic" }) : badge }),
 			sticker && /* @__PURE__ */ jsx(AdornmentContainer, { children: sticker })
 		]
 	});
@@ -271,4 +268,4 @@ var TabBarIconButton_default = styled(IconButton).attrs({ size: "sm" })`
 //#endregion
 export { TabContainer as a, TabBar as i, StyledTab as n, Tab as r, TabBarIconButton_default as t };
 
-//# sourceMappingURL=TabBar-BepWbJHz.mjs.map
+//# sourceMappingURL=TabBar-Bj84q1Mr.mjs.map

package/dist/{TabBar-BepWbJHz.mjs.map → TabBar-Bj84q1Mr.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TabBar-BepWbJHz.mjs","names":["TabBarContext","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { mergeRefs } from '@react-aria/utils';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n  display: flex;\n  height: ${Spacing[6]};\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  justify-content: space-between;\n  gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n  align-self: center;\n`;\n\nconst TitleTab = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n  display: flex;\n  gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n  margin-bottom: -2px;\n  padding-bottom: 2px;\n  overflow: hidden;\n  flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n  { children, maxTabChars, size, ...props },\n  forwardedRef,\n) {\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const getIndexOfCurrentTab = (list: Element[]) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return getIndex(list, document.activeElement);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const list = getTabList(tabListRef.current.children);\n\n    if (document.activeElement && !list.includes(document.activeElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // Go to previous tab\n        const curIndex = getIndexOfCurrentTab(list);\n        const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n        (list[nextIndex] as HTMLElement).focus();\n        break;\n      }\n      case 'ArrowRight': {\n        // Go to next tab\n        const curIndex = getIndexOfCurrentTab(list);\n        (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n        break;\n      }\n      case 'Home': {\n        // Go to first tab\n        (list[0] as HTMLElement).focus();\n        break;\n      }\n      case 'End': {\n        // Go to last tab\n        (list[list.length - 1] as HTMLElement).focus();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <TabBarContext.Provider value={{ maxTabChars, size }}>\n      <StyledTabContainer\n        role='tablist'\n        ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n        onKeyDown={handleKeyDown}\n        $size={size}\n        {...props}\n      >\n        {children}\n      </StyledTabContainer>\n    </TabBarContext.Provider>\n  );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n  return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  return Array.from(list).filter((e: HTMLElement) => {\n    return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n  });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n  actions?: ReactNode;\n  title?: string;\n  'data-tour-target'?: string;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n  {\n    children,\n    actions,\n    title,\n    'data-tour-target': dataTourTarget,\n    maxTabChars,\n    size,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...elemProps\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <TabBarContainer {...elemProps}>\n      <TabContainer\n        ref={forwardedRef}\n        maxTabChars={maxTabChars}\n        size={size}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n        {children}\n      </TabContainer>\n      {actions && <RightActions>{actions}</RightActions>}\n    </TabBarContainer>\n  );\n});\n\nexport default TabBar;\n","import {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactElement,\n  useContext,\n} from 'react';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/** A tab carries either a count or a label beside its text, never both. */\ntype TabAdornment =\n  | { badge?: ReactElement; sticker?: never }\n  | { badge?: never; sticker?: ReactElement };\n\ninterface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n  typeof Button\n> {\n  selected?: boolean;\n  as?: T;\n  size?: 'md' | 'sm';\n}\n\ntype TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;\n\nconst AdornmentContainer = styled.span`\n  display: inline-flex;\n  vertical-align: middle;\n  /* Align the atomic badge with the label's cap midpoint, not its x-height midpoint. */\n  transform: translateY(calc((1ex - 1cap) / 2));\n  padding: 0;\n  margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n  NonNullable<TabBaseProps['size']>,\n  FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n  md: css`\n    ${paragraphMixins.md}\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n  `,\n};\n\nconst tabSelectedStyle = css`\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.primary.brand)};\n  border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n  }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabBaseProps>({\n  width: 'auto',\n  variant: 'basic',\n})<TabBaseProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  background-color: transparent;\n  color: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'FgDisabled', theme.color.variants.basic.textDisabled)\n      : semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n  transition: color ${TransitionDuration.Fast} ease-out;\n  height: 32px;\n  margin: 0;\n  padding: 0;\n  ${({ size }) => sizeStyles[size || 'md']};\n  outline: none;\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  a {\n    color: currentColor;\n  }\n\n  /* remove default button focused/hovered box shadow */\n  &${isActive}${isNotDisabled} {\n    background-color: unset;\n  }\n  &${isHovered}${isNotDisabled} {\n    background-color: unset;\n    ${({ selected, theme }) =>\n      !selected &&\n      css`\n        color: ${semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n      `}\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n    background-color: unset;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    background-color: unset;\n  }\n  &:disabled {\n    background-color: unset;\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n    content: '';\n  }\n\n  &.selected,\n  &.active {\n    ${tabSelectedStyle}\n  }\n\n  ${({ selected }) => selected && tabSelectedStyle}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n    `}\n\n  a& {\n    text-decoration: none;\n  }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n  if (text.length <= maxCharacters) {\n    return text;\n  }\n  return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n  selected,\n  disabled,\n  children,\n  badge,\n  sticker,\n  as,\n  size,\n  ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n  const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n  const finalSize = size || contextSize || 'md';\n\n  // Truncate text if maxTabChars is provided and children is a string\n  const hasTruncation = maxTabChars && typeof children === 'string';\n  const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n  return (\n    <StyledTab\n      role='tab'\n      selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      as={as as ElementType}\n      size={finalSize}\n      title={hasTruncation ? children : undefined}\n      {...elemProps}\n    >\n      {displayChildren}\n      {badge && (\n        <AdornmentContainer>\n          {badge.type === Badge\n            ? cloneElement(badge, {\n                variant: selected ? 'active' : 'basic',\n                onSecondaryBackground: true,\n              })\n            : badge}\n        </AdornmentContainer>\n      )}\n      {sticker && <AdornmentContainer>{sticker}</AdornmentContainer>}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n","import styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport default styled(IconButton).attrs({\n  size: 'sm',\n})`\n  padding-left: ${Spacing[2]};\n  padding-right: ${Spacing[2]};\n  border-radius: ${BorderRadius.Sm};\n\n  // remove default button focused/hovered box shadow\n  &${isActive}${isNotDisabled} {\n    background-color: transparent;\n  }\n  &${isHovered}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &:disabled {\n    background-color: transparent;\n  }\n  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n    box-shadow: 0 0 0 3px ${({ theme }) => semanticColor(theme, 'ActionNeutralActive', theme.color.variants.basic.highlight)};\n  }\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.CoreSlate800)};\n  }\n\n  &:hover {\n    svg {\n      color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.CoreSlate900)};\n    }\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TabBar-Bj84q1Mr.mjs","names":["TabBarContext","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { mergeRefs } from '@react-aria/utils';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n  display: flex;\n  height: ${Spacing[6]};\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  justify-content: space-between;\n  gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n  align-self: center;\n`;\n\nconst TitleTab = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n  display: flex;\n  gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n  margin-bottom: -2px;\n  padding-bottom: 2px;\n  overflow: hidden;\n  flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n  { children, maxTabChars, size, ...props },\n  forwardedRef,\n) {\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const getIndexOfCurrentTab = (list: Element[]) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return getIndex(list, document.activeElement);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const list = getTabList(tabListRef.current.children);\n\n    if (document.activeElement && !list.includes(document.activeElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // Go to previous tab\n        const curIndex = getIndexOfCurrentTab(list);\n        const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n        (list[nextIndex] as HTMLElement).focus();\n        break;\n      }\n      case 'ArrowRight': {\n        // Go to next tab\n        const curIndex = getIndexOfCurrentTab(list);\n        (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n        break;\n      }\n      case 'Home': {\n        // Go to first tab\n        (list[0] as HTMLElement).focus();\n        break;\n      }\n      case 'End': {\n        // Go to last tab\n        (list[list.length - 1] as HTMLElement).focus();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <TabBarContext.Provider value={{ maxTabChars, size }}>\n      <StyledTabContainer\n        role='tablist'\n        ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n        onKeyDown={handleKeyDown}\n        $size={size}\n        {...props}\n      >\n        {children}\n      </StyledTabContainer>\n    </TabBarContext.Provider>\n  );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n  return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  return Array.from(list).filter((e: HTMLElement) => {\n    return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n  });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n  actions?: ReactNode;\n  title?: string;\n  'data-tour-target'?: string;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n  {\n    children,\n    actions,\n    title,\n    'data-tour-target': dataTourTarget,\n    maxTabChars,\n    size,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...elemProps\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <TabBarContainer {...elemProps}>\n      <TabContainer\n        ref={forwardedRef}\n        maxTabChars={maxTabChars}\n        size={size}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n        {children}\n      </TabContainer>\n      {actions && <RightActions>{actions}</RightActions>}\n    </TabBarContainer>\n  );\n});\n\nexport default TabBar;\n","import {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactElement,\n  useContext,\n} from 'react';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/** A tab carries either a count or a label beside its text, never both. */\ntype TabAdornment =\n  | { badge?: ReactElement; sticker?: never }\n  | { badge?: never; sticker?: ReactElement };\n\ninterface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n  typeof Button\n> {\n  selected?: boolean;\n  as?: T;\n  size?: 'md' | 'sm';\n}\n\ntype TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;\n\nconst AdornmentContainer = styled.span`\n  display: inline-flex;\n  vertical-align: middle;\n  /* Align the atomic badge with the label's cap midpoint, not its x-height midpoint. */\n  transform: translateY(calc((1ex - 1cap) / 2));\n  padding: 0;\n  margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n  NonNullable<TabBaseProps['size']>,\n  FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n  md: css`\n    ${paragraphMixins.md}\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n  `,\n};\n\nconst tabSelectedStyle = css`\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.primary.brand)};\n  border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n  }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabBaseProps>({\n  width: 'auto',\n  variant: 'basic',\n})<TabBaseProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  background-color: transparent;\n  color: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'FgDisabled', theme.color.variants.basic.textDisabled)\n      : semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n  transition: color ${TransitionDuration.Fast} ease-out;\n  height: 32px;\n  margin: 0;\n  padding: 0;\n  ${({ size }) => sizeStyles[size || 'md']};\n  outline: none;\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  a {\n    color: currentColor;\n  }\n\n  /* remove default button focused/hovered box shadow */\n  &${isActive}${isNotDisabled} {\n    background-color: unset;\n  }\n  &${isHovered}${isNotDisabled} {\n    background-color: unset;\n    ${({ selected, theme }) =>\n      !selected &&\n      css`\n        color: ${semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n      `}\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n    background-color: unset;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    background-color: unset;\n  }\n  &:disabled {\n    background-color: unset;\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n    content: '';\n  }\n\n  &.selected,\n  &.active {\n    ${tabSelectedStyle}\n  }\n\n  ${({ selected }) => selected && tabSelectedStyle}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n    `}\n\n  a& {\n    text-decoration: none;\n  }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n  if (text.length <= maxCharacters) {\n    return text;\n  }\n  return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n  selected,\n  disabled,\n  children,\n  badge,\n  sticker,\n  as,\n  size,\n  ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n  const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n  const finalSize = size || contextSize || 'md';\n\n  // Truncate text if maxTabChars is provided and children is a string\n  const hasTruncation = maxTabChars && typeof children === 'string';\n  const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n  return (\n    <StyledTab\n      role='tab'\n      selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      as={as as ElementType}\n      size={finalSize}\n      title={hasTruncation ? children : undefined}\n      {...elemProps}\n    >\n      {displayChildren}\n      {badge && (\n        <AdornmentContainer>\n          {badge.type === Badge\n            ? cloneElement(badge, {\n                variant: selected ? 'active' : 'basic',\n              })\n            : badge}\n        </AdornmentContainer>\n      )}\n      {sticker && <AdornmentContainer>{sticker}</AdornmentContainer>}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n","import styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport default styled(IconButton).attrs({\n  size: 'sm',\n})`\n  padding-left: ${Spacing[2]};\n  padding-right: ${Spacing[2]};\n  border-radius: ${BorderRadius.Sm};\n\n  // remove default button focused/hovered box shadow\n  &${isActive}${isNotDisabled} {\n    background-color: transparent;\n  }\n  &${isHovered}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &:disabled {\n    background-color: transparent;\n  }\n  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n    box-shadow: 0 0 0 3px ${({ theme }) => semanticColor(theme, 'ActionNeutralActive', theme.color.variants.basic.highlight)};\n  }\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.CoreSlate800)};\n  }\n\n  &:hover {\n    svg {\n      color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.CoreSlate900)};\n    }\n  }\n`;\n"],"mappings":"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"}

package/dist/{Table-BefytM6w.d.mts → Table-DhdHUQ8V.d.mts}

@@ -10,4 +10,4 @@ declare const Table: _$styled_components0.StyledComponent<"table", any, {
 } & TableProps, "role">;
 //#endregion
 export { Table as t };
-//# sourceMappingURL=Table-BefytM6w.d.mts.map
+//# sourceMappingURL=Table-DhdHUQ8V.d.mts.map

package/dist/{Table-B1gRr2XT.mjs → Table-WqNfjasd.mjs}

@@ -10,7 +10,8 @@ import { withAlpha } from "./lib/color.mjs";
 import { isFocusedVisible, isHovered } from "./lib/pseudoClass.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline } from "./mixins/focus.mjs";
-import { t as Spinner } from "./Spinner-DplDSBqf.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import { t as Spinner } from "./Spinner-BlAg8_OX.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -255,6 +256,7 @@ const hoverHighlight = (theme) => {
 	const tokens = semanticTokens(theme);
 	return tokens ? withAlpha(tokens.ActionAccent, tokens.Opacity25) : theme.color.background.highlight;
 };
+const pinnedBodyBackground = (theme) => semanticColor(theme, theme.color.text.primary === Color.TextInverse ? "SurfacePage" : "SurfacePrimary", theme.color.background.primary);
 const TableCellTitle = ({ children, subtitle, ...elemProps }) => {
 	return /* @__PURE__ */ jsxs(CellTitleContainer, {
 		...elemProps,
@@ -284,7 +286,7 @@ const TableActionTD = styled(TableTD)`
 const StickyTD = styled(TableTD)`
   position: sticky;
   left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
-  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
+  background-color: ${({ theme }) => pinnedBodyBackground(theme)};
 
   ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${semanticColor(theme, "BorderDivider", theme.color.border.primary)};`}
   z-index: 2;
@@ -307,9 +309,25 @@ const TableTR = styled(TableRow)`
   ${({ $isActive }) => $isActive && css`
       background-color: ${({ theme }) => activeHighlight(theme)};
       ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
+      ${StickyTD} {
+        background-color: ${({ theme }) => activeHighlight(theme)};
+      }
       &:hover {
         background-color: ${({ theme }) => activeHighlight(theme)};
       }
+      &:hover ${StickyTD} {
+        background-color: ${({ theme }) => activeHighlight(theme)};
+        background-image: none;
+      }
+    `}
+
+  ${({ disableHoverBackground, $isActive }) => !disableHoverBackground && !$isActive && css`
+      &${isHovered} ${StickyTD} {
+        background-image: linear-gradient(
+          ${({ theme }) => hoverHighlight(theme)},
+          ${({ theme }) => hoverHighlight(theme)}
+        );
+      }
     `}
 
   ${({ onClick, disableHoverBackground, $isActive }) => onClick != null && !disableHoverBackground && !$isActive && css`
@@ -342,6 +360,7 @@ const Container = styled.div`
     position: relative;
     z-index: 0;
     overflow-x: ${({ $scrollsHorizontally }) => $scrollsHorizontally ? "auto" : "visible"};
+    ${semanticScrollbar}
     ${({ maxHeight }) => {
 	if (maxHeight != null) return `max-height: ${maxHeight}px;`;
 }}
@@ -433,4 +452,4 @@ const TableLayout = ({ children, className, containerMaxHeight, containerScrolls
 //#endregion
 export { StickyTH as a, TableCellTitle as c, TableTR as d, TableTH as f, Table as h, StickyTD as i, TableIconTD as l, TableHeaderCell as m, TableBody as n, TableActionTD as o, TableRow as p, TableHead as r, TableCell as s, TableLayout as t, TableTD as u };
 
-//# sourceMappingURL=Table-B1gRr2XT.mjs.map
+//# sourceMappingURL=Table-WqNfjasd.mjs.map

package/dist/Table-WqNfjasd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table-WqNfjasd.mjs","names":["slideKeyframes"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n  size?: 'sm' | 'md';\n  isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n  0% {\n    transform: translateX(-50%) scaleX(0);\n  }\n  50% {\n    transform: translateX(0) scaleX(1);\n  }\n  100% {\n    transform: translateX(50%) scaleX(0);\n  }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n  display: table;\n  width: 100%;\n  border-spacing: 0;\n  ${paragraphMixins.md};\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      td,\n      th {\n        padding: ${Spacing[2]};\n      }\n    `}\n\n  ${({ isLoading }) =>\n    isLoading &&\n    css`\n      thead {\n        &:after {\n          content: '';\n          display: block;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', theme.color.primary.brand)};\n          animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n        }\n      }\n    `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n  size?: 'sm' | 'md';\n  sortable?: boolean;\n  width?: 'auto' | 'min' | 'max' | string;\n  isSticky?: boolean;\n  align?: 'left' | 'right';\n  trailing?: ReactNode;\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n  display: table-cell;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so header padding + border are included in the\n     declared width/height. */\n  box-sizing: border-box;\n\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  text-align: left;\n  white-space: nowrap;\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  line-height: 1;\n  width: ${({ width }) => {\n    switch (width) {\n      case 'min':\n        return '1px';\n      case 'max':\n        return '100%';\n      default:\n        if (width) {\n          return width;\n        } else {\n          return 'auto';\n        }\n    }\n  }};\n\n  &:first-child {\n    border-radius: ${({ theme }) =>\n      `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n  }\n\n  &:last-child {\n    border-radius: ${({ theme }) =>\n      `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n  }\n\n  ${({ sortable }) =>\n    sortable &&\n    css`\n      cursor: pointer;\n\n      &:hover ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n\n      ${SortButton}:focus-visible ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n    `};\n\n  ${({ isSticky }) =>\n    isSticky\n      ? css`\n          position: sticky;\n          top: 0;\n          z-index: 1;\n        `\n      : css`\n          position: relative;\n        `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\nconst SortButton = styled.button`\n  background: none;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  min-width: 0;\n  ${focusOutline}\n`;\n\ninterface TableIconContainerProps {\n  sortDirection?: 'asc' | 'desc' | false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n  display: inline-block;\n\n  ${({ sortDirection }) => {\n    if (sortDirection) {\n      return css`\n        display: inline;\n      `;\n    } else {\n      return css`\n        display: inline;\n        visibility: hidden;\n        color: ${({ theme }) => semanticColor(theme, 'FgTertiary', theme.color.text.disabled)};\n      `;\n    }\n  }};\n`;\n\nconst TableHeaderCell = forwardRef<\n  HTMLTableCellElement,\n  ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell(\n  { sortable, sortDirection, children, align, trailing, onClick, ...elemProps },\n  ref,\n) {\n  let ariaSort: 'none' | 'ascending' | 'descending' | undefined;\n\n  if (sortable && sortDirection) {\n    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n  } else if (sortable) {\n    ariaSort = 'none';\n  }\n\n  return (\n    <StyledTableHeaderCell\n      sortable={sortable}\n      aria-sort={ariaSort}\n      onClick={sortable ? undefined : onClick}\n      {...elemProps}\n      ref={ref}\n    >\n      <VerticalAlign $align={align}>\n        {sortable ? (\n          <SortButton type='button' onClick={onClick}>\n            {children}\n            <TableIconContainer aria-hidden='true' sortDirection={sortDirection}>\n              {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n            </TableIconContainer>\n          </SortButton>\n        ) : (\n          children\n        )}\n        {trailing}\n      </VerticalAlign>\n    </StyledTableHeaderCell>\n  );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { withAlpha } from 'design-system/lib/color';\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n  disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n  role: 'row',\n})<TableRowProps>`\n  display: table-row;\n\n  ${({ onClick }) =>\n    onClick != null &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ disableHoverBackground, theme }) => {\n    if (disableHoverBackground) {\n      return null;\n    }\n    const tokens = semanticTokens(theme);\n    return css`\n      &${isHovered} {\n        background-color: ${\n          tokens\n            ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n            : theme.color.background.highlight\n        };\n        ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n        transition-duration: ${TransitionDuration.Fast};\n      }\n    `;\n  }}\n\n  ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n  height: 14px;\n  margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n  canSort?: boolean;\n  isSorted?: boolean;\n  isDescending?: boolean;\n  isSticky?: boolean;\n  /**\n   * Display help icon and tooltip for column header\n   */\n  helpText?: ReactNode;\n  align?: 'left' | 'right';\n  size?: 'sm' | 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n  { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n  ref,\n) {\n  return (\n    <TableHeaderCell\n      sortable={canSort}\n      sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n      ref={ref}\n      isSticky={isSticky}\n      align={align}\n      size={size}\n      trailing={helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n      {...props}\n    >\n      {/* We have to wrap the children to make it easier to use tooltips */}\n      <span className='th__text'>{children}</span>\n    </TableHeaderCell>\n  );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { withAlpha } from 'design-system/lib/color';\nimport { isHovered } from 'design-system/lib/pseudoClass';\nimport {\n  type MaybeSemanticTheme,\n  semanticColor,\n  semanticOnly,\n  semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n  breakWord?: boolean;\n  size?: 'sm' | 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n  display: table-cell;\n  vertical-align: middle;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so a fixed cell height includes its padding + border\n     and rows stay compact. */\n  box-sizing: border-box;\n\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  text-align: left;\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  white-space: nowrap;\n  ${paragraphMixins.md};\n  line-height: 1;\n  ${({ breakWord }) =>\n    breakWord\n      ? `white-space: normal;\n         overflow-wrap: break-word;`\n      : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n  ${semanticOnly(() => 'color: inherit;')}\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst CellSubtitle = styled(Paragraph)`\n  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst activeHighlight = (theme: PersonaTheme & MaybeSemanticTheme) =>\n  semanticColor(theme, 'ActionAccent', theme.color.background.highlight);\n\nconst hoverHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n  const tokens = semanticTokens(theme);\n  return tokens\n    ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n    : theme.color.background.highlight;\n};\n\n// Same page color unpinned cells show through, painted opaquely so scrolled text stays covered.\nconst pinnedBodyBackground = (theme: PersonaTheme & MaybeSemanticTheme) =>\n  semanticColor(\n    theme,\n    theme.color.text.primary === Color.TextInverse ? 'SurfacePage' : 'SurfacePrimary',\n    theme.color.background.primary,\n  );\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n  subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n  return (\n    <CellTitleContainer {...elemProps}>\n      <CellTitle>{children}</CellTitle>\n      {subtitle && <CellSubtitle>{subtitle}</CellSubtitle>}\n    </CellTitleContainer>\n  );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n  white-space: normal;\n  overflow-wrap: break-word;\n  ${(props) =>\n    props.unclickable &&\n    css`\n      cursor: default;\n    `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n  text-align: right;\n  line-height: 0; /* To center icon; cannot use flex here */\n  padding: 0;\n  padding-left: ${Spacing[4]};\n  width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n  text-align: right;\n  padding: 0;\n  padding-right: ${Spacing[4]};\n  width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n  left?: number;\n  hasRightBorder?: boolean;\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  background-color: ${({ theme }) => pinnedBodyBackground(theme)};\n\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n  z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n  left?: number;\n  hasRightBorder?: boolean;\n  size?: 'sm' | 'md';\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  z-index: 2;\n  max-width: 10%;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n  ${({ disableHoverBackground }) =>\n    disableHoverBackground &&\n    css`\n      &:hover {\n        background-color: transparent !important;\n      }\n    `}\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      background-color: ${({ theme }) => activeHighlight(theme)};\n      ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      ${StickyTD} {\n        background-color: ${({ theme }) => activeHighlight(theme)};\n      }\n      &:hover {\n        background-color: ${({ theme }) => activeHighlight(theme)};\n      }\n      &:hover ${StickyTD} {\n        background-color: ${({ theme }) => activeHighlight(theme)};\n        background-image: none;\n      }\n    `}\n\n  ${({ disableHoverBackground, $isActive }) =>\n    !disableHoverBackground &&\n    !$isActive &&\n    css`\n      &${isHovered} ${StickyTD} {\n        background-image: linear-gradient(\n          ${({ theme }) => hoverHighlight(theme)},\n          ${({ theme }) => hoverHighlight(theme)}\n        );\n      }\n    `}\n\n  ${({ onClick, disableHoverBackground, $isActive }) =>\n    onClick != null &&\n    !disableHoverBackground &&\n    !$isActive &&\n    css`\n      cursor: pointer;\n      :hover {\n        background-color: ${({ theme }) => hoverHighlight(theme)};\n        ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      }\n      transition-duration: ${TransitionDuration.Fast};\n    `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n  sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n  display: table-header-group;\n  ${({ sticky }) =>\n    sticky &&\n    css`\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n  display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableBody, TableHead, TableRow } from 'design-system/components/Table';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\n// `visible` rather than a narrower opt-out because CSS blockifies the other axis: any\n// `overflow-x` other than `visible`/`clip` forces `overflow-y` to compute to `auto` too, which\n// makes this element the scrollport that descendant sticky offsets resolve against.\nconst Container = styled.div<{ maxHeight?: number; $scrollsHorizontally: boolean }>`\n    position: relative;\n    z-index: 0;\n    overflow-x: ${({ $scrollsHorizontally }) => ($scrollsHorizontally ? 'auto' : 'visible')};\n    ${semanticScrollbar}\n    ${({ maxHeight }) => {\n      if (maxHeight != null) {\n        return `max-height: ${maxHeight}px;`;\n      }\n    }}\n  `;\n\nconst slideKeyframes = keyframes`\n    0% {\n      transform: translateX(-50%) scaleX(0);\n    }\n    50% {\n      transform: translateX(0) scaleX(1);\n    }\n    100% {\n      transform: translateX(50%) scaleX(0);\n    }\n  `;\n\nconst Loader = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n    width: 100%;\n  \n    animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n  `;\n\nconst Overlay = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.primary.white)};\n    opacity: 50%;\n  `;\n\nconst SpinnerWrapper = styled.div`\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[5]} 0;\n    animation: ${fadeIn} 1s;\n    animation-delay: 0.5s;\n    animation-fill-mode: backwards;\n  `;\n\nconst TableSpinner = styled(Spinner)`\n    svg {\n      width: 120px;\n      height: 120px;\n    }\n  \n    path {\n      stroke: ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', Color.CorePurple500)};\n      stroke-width: 0.46;\n    }\n  `;\n\ninterface TableLayoutProps {\n  className?: string;\n  containerMaxHeight?: number;\n  /**\n   * When false, the container does not scroll horizontally and an ancestor is expected to.\n   * Sticky offsets inside the table then resolve against that ancestor's scrollport rather\n   * than against the container.\n   */\n  containerScrollsHorizontally?: boolean;\n  dataTest?: string;\n  headerTR: JSX.Element;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  nullState: ReactNode;\n  showHeader?: boolean;\n  size?: 'sm' | 'md';\n  stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n  children,\n  className,\n  containerMaxHeight,\n  containerScrollsHorizontally = true,\n  dataTest,\n  headerTR,\n  isEmpty,\n  isLoading,\n  nullState,\n  showHeader,\n  size = 'md',\n  stickyHeader = false,\n}) => {\n  if (isEmpty && !showHeader) {\n    if (isLoading) {\n      return (\n        <SpinnerWrapper\n          role='status'\n          aria-live='polite'\n          aria-busy='true'\n          aria-label='Loading...'\n          data-loading-indicator='true'\n        >\n          <TableSpinner size='md' />\n        </SpinnerWrapper>\n      );\n    } else {\n      return (\n        <Container data-test={dataTest} $scrollsHorizontally={containerScrollsHorizontally}>\n          {nullState}\n        </Container>\n      );\n    }\n  }\n\n  return (\n    <Container\n      data-test={dataTest}\n      maxHeight={containerMaxHeight}\n      className={className}\n      $scrollsHorizontally={containerScrollsHorizontally}\n    >\n      {isLoading && <Loader data-test='table-layout__loader' />}\n      {isLoading && <Overlay />}\n\n      <Table size={size} aria-busy={isLoading || undefined}>\n        <TableHead sticky={stickyHeader}>\n          <TableRow>{headerTR}</TableRow>\n        </TableHead>\n        {!isEmpty && <TableBody>{children}</TableBody>}\n      </Table>\n\n      {isEmpty && nullState}\n    </Container>\n  );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}

package/dist/Table.d.mts

@@ -1,2 +1,2 @@
-import { t as Table } from "./Table-BefytM6w.mjs";
+import { t as Table } from "./Table-DhdHUQ8V.mjs";
 export { Table, Table as default };

package/dist/{TableBody-BZ34-_wV.d.mts → TableBody-qoSvQDds.d.mts}

@@ -6,4 +6,4 @@ declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
 }, "role">;
 //#endregion
 export { TableBody as t };
-//# sourceMappingURL=TableBody-BZ34-_wV.d.mts.map
+//# sourceMappingURL=TableBody-qoSvQDds.d.mts.map

package/dist/TableBody.d.mts

@@ -1,2 +1,2 @@
-import { t as TableBody } from "./TableBody-BZ34-_wV.mjs";
+import { t as TableBody } from "./TableBody-qoSvQDds.mjs";
 export { TableBody as default };

package/dist/{TableBox-NP6bhtKb.mjs → TableBox-obl64W5Y.mjs}

@@ -3,20 +3,21 @@ import { semanticColor, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import "./variables/transitions.mjs";
 import { a as Tooltip, t as TextUnderlineTooltip } from "./Tooltip-C0FuZS1C.mjs";
-import { withAlpha } from "./lib/color.mjs";
+import { opaqueOver, withAlpha } from "./lib/color.mjs";
 import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline } from "./mixins/focus.mjs";
 import "./variables/effect.mjs";
-import { n as Stack, t as HStack } from "./Stack-ChsImaEY.mjs";
-import { t as IconButton } from "./IconButton-CqTPMhjV.mjs";
-import { t as FormGroupContext } from "./useFormGroup-CH3kiXoa.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-CuKSNxc9.mjs";
-import { n as CaretButton, t as Combobox } from "./Combobox-1M6EwVmq.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-B1gRr2XT.mjs";
-import { s as Popover_default } from "./Popover-opVa9Xhc.mjs";
-import { t as Container } from "./FormControl-BEk4F1EV.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import { n as Stack, t as HStack } from "./Stack-Bkn0TUDe.mjs";
+import { t as IconButton } from "./IconButton-CCLMYWVN.mjs";
+import { t as FormGroupContext } from "./useFormGroup-C7Cax8zO.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-rm9Nnxn7.mjs";
+import { n as CaretButton, t as Combobox } from "./Combobox-C_kCY3P3.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-WqNfjasd.mjs";
+import { s as Popover_default } from "./Popover-ZAj03lws.mjs";
+import { t as Container } from "./FormControl-DXrxoJLl.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -591,7 +592,7 @@ const TableBoxCell = ({ children, itemId = "", value = "", columnKey, errorText,
 //#region components/TableBox/TableBoxRow.tsx
 const selectedHighlight = (theme) => {
 	const tokens = semanticTokens(theme);
-	return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : theme.color.background.highlight;
+	return tokens ? opaqueOver(tokens.SurfaceAccent, tokens.Opacity25, tokens.SurfacePrimary) : theme.color.background.highlight;
 };
 const StyledRow = styled(TableRow)`
   cursor: ${({ $isSelectable }) => $isSelectable ? "pointer" : "default"};
@@ -649,6 +650,13 @@ const StyledRow = styled(TableRow)`
   &[aria-selected='true'] {
     background: ${({ theme }) => selectedHighlight(theme)};
     color: ${({ theme }) => semanticColor(theme, "FgAccent", theme.color.text.brand)};
+
+    /* Solid, not transparent: PinnedActionsCell is transparent, so this is what
+       covers cell text scrolling underneath. selectedHighlight is opaque, so it
+       matches the row with no visible seam. */
+    ${RowActionsContainer} {
+      background: ${({ theme }) => selectedHighlight(theme)};
+    }
   }
 
   /* Hover and edit feedback is scoped to rows that respond to a pointer.
@@ -662,7 +670,7 @@ const StyledRow = styled(TableRow)`
 
       ${RowActionsContainer} {
         opacity: 1;
-        background: ${({ theme }) => `linear-gradient(to right, transparent, ${semanticColor(theme, "SurfaceSecondary", Color.BackgroundSecondary)} 12px)`};
+        background: ${({ theme }) => semanticColor(theme, "SurfaceSecondary", Color.BackgroundSecondary)};
       }
 
       ${CaretButton} {
@@ -683,11 +691,7 @@ const StyledRow = styled(TableRow)`
 
       ${RowActionsContainer} {
         opacity: 1;
-        background: linear-gradient(
-          to right,
-          transparent,
-          ${({ theme }) => selectedHighlight(theme)} ${parseInt(Spacing[3])}px
-        );
+        background: ${({ theme }) => selectedHighlight(theme)};
       }
 
       ${CaretButton} {
@@ -1119,6 +1123,7 @@ const TableScrollContainer = styled.div`
   border-radius: ${BorderRadius.Md};
   overflow-x: ${({ $fixedLayout, $hasHorizontalOverflow }) => $fixedLayout ? "visible" : $hasHorizontalOverflow ? "auto" : "visible"};
   overflow-y: ${({ $maxHeight }) => $maxHeight != null ? "auto" : "visible"};
+  ${semanticScrollbar}
   overscroll-behavior-x: none;
   ${({ $maxHeight }) => $maxHeight != null && css`
       max-height: ${typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
@@ -1430,4 +1435,4 @@ TableBox.Cell = TableBoxCell;
 //#endregion
 export { TableBoxContext as n, TableBox as t };
 
-//# sourceMappingURL=TableBox-NP6bhtKb.mjs.map
+//# sourceMappingURL=TableBox-obl64W5Y.mjs.map