@persona/design-system 0.7.2 → 0.8.1

package/dist/StatusIndicator-bEnMWV_S.mjs

@@ -0,0 +1,315 @@
+import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { TruncatedText } from "./lib/TruncatedText.mjs";
+import { semanticTokens } from "./lib/semanticColor.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { withAlpha } from "./lib/color.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheckFillIcon, CircleFillIcon, CircleHalfIcon, CircleMinusFillIcon, CircleNullIcon, CircleSlashIcon, WarningFillIcon } from "@persona/icons/12px";
+//#region components/StatusIndicator/StatusIndicator.tsx
+const STATUS_CONFIG = {
+	open: {
+		type: "neutral",
+		icon: /* @__PURE__ */ jsx(CircleNullIcon, {})
+	},
+	pending: {
+		type: "neutral",
+		icon: /* @__PURE__ */ jsx(CircleHalfIcon, {})
+	},
+	completed: {
+		type: "success",
+		icon: /* @__PURE__ */ jsx(CircleCheckFillIcon, {})
+	},
+	active: {
+		type: "success",
+		icon: /* @__PURE__ */ jsx(CircleFillIcon, {})
+	},
+	failed: {
+		type: "critical",
+		icon: /* @__PURE__ */ jsx(CircleSlashIcon, {})
+	},
+	needs_review: {
+		type: "warning",
+		icon: /* @__PURE__ */ jsx(WarningFillIcon, {})
+	},
+	canceled: {
+		type: "attention",
+		icon: /* @__PURE__ */ jsx(CircleSlashIcon, {})
+	},
+	archived: {
+		type: "neutral",
+		icon: /* @__PURE__ */ jsx(CircleMinusFillIcon, {})
+	}
+};
+/** All supported `status` preset keys, derived from the config map. */
+const STATUSES = Object.keys(STATUS_CONFIG);
+const FILLED_STATUS_COLORS = {
+	neutral: {
+		background: Color.BackgroundStatusIndicatorDefault,
+		text: Color.TextStatusIndicatorDefault,
+		icon: Color.BorderIconLabelGrey
+	},
+	attention: {
+		background: Color.BackgroundStatusIndicatorAttention,
+		text: Color.TextStatusIndicatorAttention,
+		icon: Color.BorderIconLabelYellow
+	},
+	warning: {
+		background: Color.BackgroundStatusIndicatorWarning,
+		text: Color.TextStatusIndicatorWarning,
+		icon: Color.BorderIconLabelOrange
+	},
+	critical: {
+		background: Color.BackgroundStatusIndicatorCritical,
+		text: Color.TextStatusIndicatorCritical,
+		icon: Color.BorderIconLabelRed
+	},
+	success: {
+		background: Color.BackgroundStatusIndicatorSuccess,
+		text: Color.TextStatusIndicatorSuccess,
+		icon: Color.BorderIconLabelGreen
+	},
+	feature: {
+		background: Color.BackgroundStatusIndicatorFeature,
+		text: Color.TextStatusIndicatorFeature,
+		icon: Color.BorderIconLabelPurple
+	},
+	informational: {
+		background: Color.BackgroundStatusIndicatorInformational,
+		text: Color.TextStatusIndicatorInformational,
+		icon: Color.BorderIconLabelBlue
+	},
+	miscellaneous: {
+		background: Color.BackgroundStatusIndicatorMiscellaneous,
+		text: Color.TextStatusIndicatorMiscellaneous,
+		icon: Color.BorderIconLabelTeal
+	}
+};
+const TRANSPARENT_STATUS_COLORS = {
+	neutral: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconSecondary
+	},
+	attention: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconWarning
+	},
+	warning: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconWarning
+	},
+	critical: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconDanger
+	},
+	success: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconSuccess
+	},
+	feature: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconActive
+	},
+	informational: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconLabelBlue
+	},
+	miscellaneous: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconLabelTeal
+	}
+};
+const semanticFilledStatusColors = (t) => ({
+	neutral: {
+		background: t.StatusNeutral,
+		text: t.FgPrimary,
+		icon: t.FgPrimary
+	},
+	attention: {
+		background: withAlpha(t.StatusHighlight, t.Opacity15),
+		text: t.FgHighlight,
+		icon: t.FgHighlight
+	},
+	warning: {
+		background: withAlpha(t.StatusWarning, t.Opacity15),
+		text: t.FgWarning2,
+		icon: t.FgWarning2
+	},
+	critical: {
+		background: withAlpha(t.StatusDanger3, t.Opacity15),
+		text: t.FgDanger2,
+		icon: t.FgDanger2
+	},
+	success: {
+		background: withAlpha(t.StatusSuccess2, t.Opacity15),
+		text: t.FgSuccess,
+		icon: t.FgSuccess
+	},
+	feature: {
+		background: withAlpha(t.StatusFeature, t.Opacity25),
+		text: t.FgFeature,
+		icon: t.FgFeature
+	},
+	informational: {
+		background: withAlpha(t.StatusInfo2, t.Opacity25),
+		text: t.FgInfo,
+		icon: t.FgInfo
+	},
+	miscellaneous: {
+		background: withAlpha(t.StatusMisc, t.Opacity15),
+		text: t.FgMisc,
+		icon: t.FgMisc
+	}
+});
+const semanticTransparentStatusColors = (t) => ({
+	neutral: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FgSecondary
+	},
+	attention: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FeedbackHighlight1
+	},
+	warning: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FgWarning1
+	},
+	critical: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FgDanger1
+	},
+	success: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FgSuccess
+	},
+	feature: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FgAccent
+	},
+	informational: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FgInfo
+	},
+	miscellaneous: {
+		background: "transparent",
+		text: t.FgPrimary,
+		icon: t.FgMisc
+	}
+});
+const semanticStatusColorCache = /* @__PURE__ */ new WeakMap();
+const semanticStatusColors = (tokens) => {
+	let colors = semanticStatusColorCache.get(tokens);
+	if (!colors) {
+		colors = {
+			filled: semanticFilledStatusColors(tokens),
+			none: semanticTransparentStatusColors(tokens)
+		};
+		semanticStatusColorCache.set(tokens, colors);
+	}
+	return colors;
+};
+const statusColors = (theme, background) => {
+	const tokens = semanticTokens(theme);
+	if (tokens) return semanticStatusColors(tokens)[background];
+	return background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;
+};
+const Label = styled.div`
+  ${paragraphMixins.sm}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: ${({ $truncate }) => $truncate ? 1 : 0};
+  min-width: ${({ $truncate }) => $truncate ? "0" : "auto"};
+  /* Line box hugs the font so pill height is driven by padding alone, and clipping an overflowing
+     label can't cut into descenders. Matches Sticker. */
+  line-height: 1;
+  white-space: nowrap;
+  text-transform: ${({ $preserveCase }) => $preserveCase ? "none" : "capitalize"};
+  /* Slight optical centering adjustment */
+  transform: translateY(0.5px);
+  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].text};
+`;
+const IconContainer = styled.span`
+  line-height: 0;
+  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].icon};
+`;
+const LabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+  padding: ${({ $hasIcon }) => `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${$hasIcon ? Spacing[1] : Spacing[2]}`};
+  position: relative;
+  flex-shrink: ${({ $truncate }) => $truncate ? 1 : 0};
+  min-width: ${({ $truncate }) => $truncate ? "0" : "auto"};
+`;
+const StyledStatusIndicator = styled.div`
+  display: inline-flex;
+  align-items: center;
+  border-radius: ${BorderRadius.Xl};
+  width: fit-content;
+  max-width: ${({ $truncate }) => $truncate ? "100%" : "none"};
+
+  ${({ theme, $type, $background }) => css`
+    background-color: ${statusColors(theme, $background)[$type].background};
+  `}
+`;
+/**
+* StatusIndicator displays semantic status information with a colored icon and label.
+* Supports both filled backgrounds and transparent styles.
+*
+* @example
+* ```tsx
+* <StatusIndicator status="active">Active</StatusIndicator>
+* <StatusIndicator type="success" background="filled">Approved</StatusIndicator>
+* <StatusIndicator type="critical" background="none">Failed</StatusIndicator>
+* ```
+*/
+const StatusIndicator = ({ status, type, background = "filled", showIcon = true, leadingIcon, truncate = false, preserveCase = false, children, ...props }) => {
+	const resolvedType = type ?? (status != null ? STATUS_CONFIG[status].type : "neutral");
+	let iconToRender;
+	if (!showIcon && background === "filled") iconToRender = null;
+	else if (typeof leadingIcon !== "undefined") iconToRender = leadingIcon;
+	else if (status != null) iconToRender = STATUS_CONFIG[status].icon;
+	else iconToRender = /* @__PURE__ */ jsx(CircleNullIcon, {});
+	const hasIcon = iconToRender != null;
+	return /* @__PURE__ */ jsx(StyledStatusIndicator, {
+		$type: resolvedType,
+		$background: background,
+		$truncate: truncate,
+		...props,
+		children: /* @__PURE__ */ jsxs(LabelContainer, {
+			$hasIcon: hasIcon,
+			$truncate: truncate,
+			children: [hasIcon && /* @__PURE__ */ jsx(IconContainer, {
+				$type: resolvedType,
+				$background: background,
+				children: iconToRender
+			}), /* @__PURE__ */ jsx(Label, {
+				$type: resolvedType,
+				$background: background,
+				$truncate: truncate,
+				$preserveCase: preserveCase,
+				children: truncate ? /* @__PURE__ */ jsx(TruncatedText, { children }) : children
+			})]
+		})
+	});
+};
+//#endregion
+export { StatusIndicator as n, STATUSES as t };
+
+//# sourceMappingURL=StatusIndicator-bEnMWV_S.mjs.map

package/dist/StatusIndicator-bEnMWV_S.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator-bEnMWV_S.mjs","names":[],"sources":["../components/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleHalfIcon,\n  CircleMinusFillIcon,\n  CircleNullIcon,\n  CircleSlashIcon,\n  WarningFillIcon,\n} from '@persona/icons/12px';\nimport { withAlpha } from 'design-system/lib/color';\nimport { type MaybeSemanticTheme, semanticTokens } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nexport type StatusType =\n  | 'neutral'\n  | 'attention'\n  | 'warning'\n  | 'critical'\n  | 'success'\n  | 'feature'\n  | 'informational'\n  | 'miscellaneous';\nexport type BackgroundType = 'filled' | 'none';\n\n/**\n * Narrow set of status presets — one value per type+icon combination.\n * Override color with `type` or icon with `leadingIcon` when needed.\n */\nexport type Status =\n  | 'open'\n  | 'pending'\n  | 'completed'\n  | 'active'\n  | 'failed'\n  | 'needs_review'\n  | 'canceled'\n  | 'archived';\n\nconst STATUS_CONFIG: Record<Status, { type: StatusType; icon: ReactNode }> = {\n  open: { type: 'neutral', icon: <CircleNullIcon /> },\n  pending: { type: 'neutral', icon: <CircleHalfIcon /> },\n  completed: { type: 'success', icon: <CircleCheckFillIcon /> },\n  active: { type: 'success', icon: <CircleFillIcon /> },\n  failed: { type: 'critical', icon: <CircleSlashIcon /> },\n  needs_review: { type: 'warning', icon: <WarningFillIcon /> },\n  canceled: { type: 'attention', icon: <CircleSlashIcon /> },\n  archived: { type: 'neutral', icon: <CircleMinusFillIcon /> },\n};\n\n/** All supported `status` preset keys, derived from the config map. */\nexport const STATUSES = Object.keys(STATUS_CONFIG) as Status[];\n\nexport interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Preset that sets a default semantic type and icon.\n   * Explicit `type` and `leadingIcon` override the preset.\n   */\n  status?: Status;\n\n  /**\n   * The semantic status type to display. Overrides `status` when both are set.\n   */\n  type?: StatusType;\n\n  /**\n   * Whether to show filled background or transparent\n   */\n  background?: BackgroundType;\n\n  /**\n   * Whether to show the icon. When false, displays label-only variant\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Optional custom icon to replace the default icon indicator (12px recommended)\n   * - undefined (default): Uses `status` icon when set, otherwise CircleNullIcon\n   * - null: Hides the icon completely\n   * - ReactNode: Shows the provided custom icon\n   * Note: showIcon must be true for this to take effect\n   */\n  leadingIcon?: ReactNode | null;\n\n  /**\n   * Truncate the label with an ellipsis instead of letting it overflow its container. Adds a\n   * title tooltip with the full text when it doesn't fit.\n   * @default false\n   */\n  truncate?: boolean;\n\n  /**\n   * Render the label exactly as given instead of capitalizing each word. Use for labels that are\n   * authored outside the product, where the casing is not ours to change.\n   * @default false\n   */\n  preserveCase?: boolean;\n\n  /**\n   * The text label to display\n   */\n  children?: ReactNode;\n}\n\ninterface StatusColors {\n  background: string;\n  text: string;\n  icon: string;\n}\n\nconst FILLED_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: Color.BackgroundStatusIndicatorDefault,\n    text: Color.TextStatusIndicatorDefault,\n    icon: Color.BorderIconLabelGrey,\n  },\n  attention: {\n    background: Color.BackgroundStatusIndicatorAttention,\n    text: Color.TextStatusIndicatorAttention,\n    icon: Color.BorderIconLabelYellow,\n  },\n  warning: {\n    background: Color.BackgroundStatusIndicatorWarning,\n    text: Color.TextStatusIndicatorWarning,\n    icon: Color.BorderIconLabelOrange,\n  },\n  critical: {\n    background: Color.BackgroundStatusIndicatorCritical,\n    text: Color.TextStatusIndicatorCritical,\n    icon: Color.BorderIconLabelRed,\n  },\n  success: {\n    background: Color.BackgroundStatusIndicatorSuccess,\n    text: Color.TextStatusIndicatorSuccess,\n    icon: Color.BorderIconLabelGreen,\n  },\n  feature: {\n    background: Color.BackgroundStatusIndicatorFeature,\n    text: Color.TextStatusIndicatorFeature,\n    icon: Color.BorderIconLabelPurple,\n  },\n  informational: {\n    background: Color.BackgroundStatusIndicatorInformational,\n    text: Color.TextStatusIndicatorInformational,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: Color.BackgroundStatusIndicatorMiscellaneous,\n    text: Color.TextStatusIndicatorMiscellaneous,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst TRANSPARENT_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSecondary,\n  },\n  attention: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  warning: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  critical: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconDanger,\n  },\n  success: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSuccess,\n  },\n  feature: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconActive,\n  },\n  informational: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst semanticFilledStatusColors = (t: SemanticTokens): Record<StatusType, StatusColors> => ({\n  neutral: { background: t.StatusNeutral, text: t.FgPrimary, icon: t.FgPrimary },\n  attention: {\n    background: withAlpha(t.StatusHighlight, t.Opacity15),\n    text: t.FgHighlight,\n    icon: t.FgHighlight,\n  },\n  warning: {\n    background: withAlpha(t.StatusWarning, t.Opacity15),\n    text: t.FgWarning2,\n    icon: t.FgWarning2,\n  },\n  critical: {\n    background: withAlpha(t.StatusDanger3, t.Opacity15),\n    text: t.FgDanger2,\n    icon: t.FgDanger2,\n  },\n  success: {\n    background: withAlpha(t.StatusSuccess2, t.Opacity15),\n    text: t.FgSuccess,\n    icon: t.FgSuccess,\n  },\n  feature: {\n    background: withAlpha(t.StatusFeature, t.Opacity25),\n    text: t.FgFeature,\n    icon: t.FgFeature,\n  },\n  informational: {\n    background: withAlpha(t.StatusInfo2, t.Opacity25),\n    text: t.FgInfo,\n    icon: t.FgInfo,\n  },\n  miscellaneous: {\n    background: withAlpha(t.StatusMisc, t.Opacity15),\n    text: t.FgMisc,\n    icon: t.FgMisc,\n  },\n});\n\nconst semanticTransparentStatusColors = (t: SemanticTokens): Record<StatusType, StatusColors> => ({\n  neutral: { background: 'transparent', text: t.FgPrimary, icon: t.FgSecondary },\n  attention: { background: 'transparent', text: t.FgPrimary, icon: t.FeedbackHighlight1 },\n  warning: { background: 'transparent', text: t.FgPrimary, icon: t.FgWarning1 },\n  critical: { background: 'transparent', text: t.FgPrimary, icon: t.FgDanger1 },\n  success: { background: 'transparent', text: t.FgPrimary, icon: t.FgSuccess },\n  feature: { background: 'transparent', text: t.FgPrimary, icon: t.FgAccent },\n  informational: { background: 'transparent', text: t.FgPrimary, icon: t.FgInfo },\n  miscellaneous: { background: 'transparent', text: t.FgPrimary, icon: t.FgMisc },\n});\n\nconst semanticStatusColorCache = new WeakMap<\n  SemanticTokens,\n  Record<BackgroundType, Record<StatusType, StatusColors>>\n>();\n\nconst semanticStatusColors = (tokens: SemanticTokens) => {\n  let colors = semanticStatusColorCache.get(tokens);\n  if (!colors) {\n    colors = {\n      filled: semanticFilledStatusColors(tokens),\n      none: semanticTransparentStatusColors(tokens),\n    };\n    semanticStatusColorCache.set(tokens, colors);\n  }\n  return colors;\n};\n\nconst statusColors = (theme: MaybeSemanticTheme, background: BackgroundType) => {\n  const tokens = semanticTokens(theme);\n  if (tokens) {\n    return semanticStatusColors(tokens)[background];\n  }\n  return background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n};\n\nconst Label = styled.div<{\n  $type: StatusType;\n  $background: BackgroundType;\n  $truncate: boolean;\n  $preserveCase: boolean;\n}>`\n  ${paragraphMixins.sm}\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-shrink: ${({ $truncate }) => ($truncate ? 1 : 0)};\n  min-width: ${({ $truncate }) => ($truncate ? '0' : 'auto')};\n  /* Line box hugs the font so pill height is driven by padding alone, and clipping an overflowing\n     label can't cut into descenders. Matches Sticker. */\n  line-height: 1;\n  white-space: nowrap;\n  text-transform: ${({ $preserveCase }) => ($preserveCase ? 'none' : 'capitalize')};\n  /* Slight optical centering adjustment */\n  transform: translateY(0.5px);\n  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].text};\n`;\n\nconst IconContainer = styled.span<{ $type: StatusType; $background: BackgroundType }>`\n  line-height: 0;\n  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].icon};\n`;\n\nconst LabelContainer = styled.div<{ $hasIcon: boolean; $truncate: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  padding: ${({ $hasIcon }) =>\n    `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${$hasIcon ? Spacing[1] : Spacing[2]}`};\n  position: relative;\n  flex-shrink: ${({ $truncate }) => ($truncate ? 1 : 0)};\n  min-width: ${({ $truncate }) => ($truncate ? '0' : 'auto')};\n`;\n\nconst StyledStatusIndicator = styled.div<{\n  $type: StatusType;\n  $background: BackgroundType;\n  $truncate: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  border-radius: ${BorderRadius.Xl};\n  width: fit-content;\n  max-width: ${({ $truncate }) => ($truncate ? '100%' : 'none')};\n\n  ${({ theme, $type, $background }) => css`\n    background-color: ${statusColors(theme, $background)[$type].background};\n  `}\n`;\n\n/**\n * StatusIndicator displays semantic status information with a colored icon and label.\n * Supports both filled backgrounds and transparent styles.\n *\n * @example\n * ```tsx\n * <StatusIndicator status=\"active\">Active</StatusIndicator>\n * <StatusIndicator type=\"success\" background=\"filled\">Approved</StatusIndicator>\n * <StatusIndicator type=\"critical\" background=\"none\">Failed</StatusIndicator>\n * ```\n */\nexport const StatusIndicator = ({\n  status,\n  type,\n  background = 'filled',\n  showIcon = true,\n  leadingIcon,\n  truncate = false,\n  preserveCase = false,\n  children,\n  ...props\n}: StatusIndicatorProps) => {\n  const resolvedType = type ?? (status != null ? STATUS_CONFIG[status].type : 'neutral');\n\n  // Determine which icon to show:\n  // - showIcon=false with background='filled': label-only variant (no icon)\n  // - leadingIcon set (including null): explicit override\n  // - status set: use preset icon\n  // - otherwise: default CircleNullIcon\n  // - background='none' always shows icon (showIcon is ignored for none background)\n  let iconToRender;\n  if (!showIcon && background === 'filled') {\n    iconToRender = null;\n  } else if (typeof leadingIcon !== 'undefined') {\n    iconToRender = leadingIcon;\n  } else if (status != null) {\n    iconToRender = STATUS_CONFIG[status].icon;\n  } else {\n    iconToRender = <CircleNullIcon />;\n  }\n  const hasIcon = iconToRender != null;\n\n  return (\n    <StyledStatusIndicator\n      $type={resolvedType}\n      $background={background}\n      $truncate={truncate}\n      {...props}\n    >\n      <LabelContainer $hasIcon={hasIcon} $truncate={truncate}>\n        {hasIcon && (\n          <IconContainer $type={resolvedType} $background={background}>\n            {iconToRender}\n          </IconContainer>\n        )}\n        <Label\n          $type={resolvedType}\n          $background={background}\n          $truncate={truncate}\n          $preserveCase={preserveCase}\n        >\n          {truncate ? <TruncatedText>{children}</TruncatedText> : children}\n        </Label>\n      </LabelContainer>\n    </StyledStatusIndicator>\n  );\n};\n\nexport default StatusIndicator;\n"],"mappings":";;;;;;;;;AA4CA,MAAM,gBAAuE;CAC3E,MAAM;EAAE,MAAM;EAAW,MAAM,oBAAC,gBAAD,EAAkB,CAAA;EAAE;CACnD,SAAS;EAAE,MAAM;EAAW,MAAM,oBAAC,gBAAD,EAAkB,CAAA;EAAE;CACtD,WAAW;EAAE,MAAM;EAAW,MAAM,oBAAC,qBAAD,EAAuB,CAAA;EAAE;CAC7D,QAAQ;EAAE,MAAM;EAAW,MAAM,oBAAC,gBAAD,EAAkB,CAAA;EAAE;CACrD,QAAQ;EAAE,MAAM;EAAY,MAAM,oBAAC,iBAAD,EAAmB,CAAA;EAAE;CACvD,cAAc;EAAE,MAAM;EAAW,MAAM,oBAAC,iBAAD,EAAmB,CAAA;EAAE;CAC5D,UAAU;EAAE,MAAM;EAAa,MAAM,oBAAC,iBAAD,EAAmB,CAAA;EAAE;CAC1D,UAAU;EAAE,MAAM;EAAW,MAAM,oBAAC,qBAAD,EAAuB,CAAA;EAAE;CAC7D;;AAGD,MAAa,WAAW,OAAO,KAAK,cAAc;AA4DlD,MAAM,uBAAyD;CAC7D,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,WAAW;EACT,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,UAAU;EACR,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACF;AAED,MAAM,4BAA8D;CAClE,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,WAAW;EACT,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,UAAU;EACR,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACF;AAED,MAAM,8BAA8B,OAAyD;CAC3F,SAAS;EAAE,YAAY,EAAE;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAW;CAC9E,WAAW;EACT,YAAY,UAAU,EAAE,iBAAiB,EAAE,UAAU;EACrD,MAAM,EAAE;EACR,MAAM,EAAE;EACT;CACD,SAAS;EACP,YAAY,UAAU,EAAE,eAAe,EAAE,UAAU;EACnD,MAAM,EAAE;EACR,MAAM,EAAE;EACT;CACD,UAAU;EACR,YAAY,UAAU,EAAE,eAAe,EAAE,UAAU;EACnD,MAAM,EAAE;EACR,MAAM,EAAE;EACT;CACD,SAAS;EACP,YAAY,UAAU,EAAE,gBAAgB,EAAE,UAAU;EACpD,MAAM,EAAE;EACR,MAAM,EAAE;EACT;CACD,SAAS;EACP,YAAY,UAAU,EAAE,eAAe,EAAE,UAAU;EACnD,MAAM,EAAE;EACR,MAAM,EAAE;EACT;CACD,eAAe;EACb,YAAY,UAAU,EAAE,aAAa,EAAE,UAAU;EACjD,MAAM,EAAE;EACR,MAAM,EAAE;EACT;CACD,eAAe;EACb,YAAY,UAAU,EAAE,YAAY,EAAE,UAAU;EAChD,MAAM,EAAE;EACR,MAAM,EAAE;EACT;CACF;AAED,MAAM,mCAAmC,OAAyD;CAChG,SAAS;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAa;CAC9E,WAAW;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAoB;CACvF,SAAS;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAY;CAC7E,UAAU;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAW;CAC7E,SAAS;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAW;CAC5E,SAAS;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAU;CAC3E,eAAe;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAQ;CAC/E,eAAe;EAAE,YAAY;EAAe,MAAM,EAAE;EAAW,MAAM,EAAE;EAAQ;CAChF;AAED,MAAM,2CAA2B,IAAI,SAGlC;AAEH,MAAM,wBAAwB,WAA2B;CACvD,IAAI,SAAS,yBAAyB,IAAI,OAAO;AACjD,KAAI,CAAC,QAAQ;AACX,WAAS;GACP,QAAQ,2BAA2B,OAAO;GAC1C,MAAM,gCAAgC,OAAO;GAC9C;AACD,2BAAyB,IAAI,QAAQ,OAAO;;AAE9C,QAAO;;AAGT,MAAM,gBAAgB,OAA2B,eAA+B;CAC9E,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,OACF,QAAO,qBAAqB,OAAO,CAAC;AAEtC,QAAO,eAAe,WAAW,uBAAuB;;AAG1D,MAAM,QAAQ,OAAO,GAKnB;IACE,gBAAgB,GAAG;;;;kBAIL,EAAE,gBAAiB,YAAY,IAAI,EAAG;gBACxC,EAAE,gBAAiB,YAAY,MAAM,OAAQ;;;;;qBAKxC,EAAE,oBAAqB,gBAAgB,SAAS,aAAc;;;YAGvE,EAAE,OAAO,OAAO,kBAAkB,aAAa,OAAO,YAAY,CAAC,OAAO,KAAK;;AAG3F,MAAM,gBAAgB,OAAO,IAAwD;;YAEzE,EAAE,OAAO,OAAO,kBAAkB,aAAa,OAAO,YAAY,CAAC,OAAO,KAAK;;AAG3F,MAAM,iBAAiB,OAAO,GAA8C;;;SAGnE,QAAQ,GAAG;cACN,EAAE,eACZ,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,WAAW,QAAQ,KAAK,QAAQ,KAAK;;kBAEpE,EAAE,gBAAiB,YAAY,IAAI,EAAG;gBACxC,EAAE,gBAAiB,YAAY,MAAM,OAAQ;;AAG7D,MAAM,wBAAwB,OAAO,GAInC;;;mBAGiB,aAAa,GAAG;;gBAEnB,EAAE,gBAAiB,YAAY,SAAS,OAAQ;;KAE3D,EAAE,OAAO,OAAO,kBAAkB,GAAG;wBAClB,aAAa,OAAO,YAAY,CAAC,OAAO,WAAW;IACvE;;;;;;;;;;;;;AAcJ,MAAa,mBAAmB,EAC9B,QACA,MACA,aAAa,UACb,WAAW,MACX,aACA,WAAW,OACX,eAAe,OACf,UACA,GAAG,YACuB;CAC1B,MAAM,eAAe,SAAS,UAAU,OAAO,cAAc,QAAQ,OAAO;CAQ5E,IAAI;AACJ,KAAI,CAAC,YAAY,eAAe,SAC9B,gBAAe;UACN,OAAO,gBAAgB,YAChC,gBAAe;UACN,UAAU,KACnB,gBAAe,cAAc,QAAQ;KAErC,gBAAe,oBAAC,gBAAD,EAAkB,CAAA;CAEnC,MAAM,UAAU,gBAAgB;AAEhC,QACE,oBAAC,uBAAD;EACE,OAAO;EACP,aAAa;EACb,WAAW;EACX,GAAI;YAEJ,qBAAC,gBAAD;GAAgB,UAAU;GAAS,WAAW;aAA9C,CACG,WACC,oBAAC,eAAD;IAAe,OAAO;IAAc,aAAa;cAC9C;IACa,CAAA,EAElB,oBAAC,OAAD;IACE,OAAO;IACP,aAAa;IACb,WAAW;IACX,eAAe;cAEd,WAAW,oBAAC,eAAD,EAAgB,UAAyB,CAAA,GAAG;IAClD,CAAA,CACO;;EACK,CAAA"}

package/dist/{Sticker-C3Eb13OQ.mjs → Sticker-B-fU8lgu.mjs}

@@ -1,11 +1,11 @@
-import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
+import { semanticColor, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import { withAlpha } from "./lib/color.mjs";
 import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { n as Stack } from "./Stack-ChsImaEY.mjs";
-import { t as IconButton } from "./IconButton-CqTPMhjV.mjs";
+import { n as Stack } from "./Stack-CEPzs4Pb.mjs";
+import { t as IconButton } from "./IconButton-BHFCjvzs.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons/12px";
@@ -218,9 +218,6 @@ const DismissButton = styled(IconButton)`
   &${isHovered}${isNotDisabled} {
     cursor: pointer;
 
-    ${({ theme, variant }) => semanticOnly((tokens) => css`
-        color: ${semanticStickerTone(tokens, variant).colorHover};
-      `)({ theme })}
     background: ${({ theme, variant }) => {
 	const tokens = semanticTokens(theme);
 	if (tokens) return semanticStickerTone(tokens, variant).backgroundHover;
@@ -355,4 +352,4 @@ const Sticker = ({ variant, icon, children, onDismiss, disabled, dismissButtonPr
 //#endregion
 export { StyledTruncatedText as a, StickerContentContainer as i, Sticker as n, StickerContainer as r, STICKER_COLOR_CONFIG as t };
 
-//# sourceMappingURL=Sticker-C3Eb13OQ.mjs.map
+//# sourceMappingURL=Sticker-B-fU8lgu.mjs.map

package/dist/Sticker-B-fU8lgu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticker-B-fU8lgu.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":";;;;;;;;;;;;AAcA,MAAM,4BACJ,GACA,SACA,0BACgB;AAChB,SAAQ,SAAR;EACE,KAAK,QACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK,OACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK,OACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK;EACL,KAAK,UACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK;EACL,KAAK,UACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK,SACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK;EACL,KAAK,SACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK,MACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,UAAU,EAAE,iBAAiB,EAAE,UAAU;GACzD;EACH,KAAK;EACL,KAAK,UACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;EACH,KAAK,WACH,QAAO;GACL,YAAY,EAAE;GACd,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,UAAU,EAAE,iBAAiB,EAAE,UAAU;GACzD;EACH,QACE,QAAO;GACL,YAAY,wBAAwB,EAAE,yBAAyB,EAAE;GACjE,iBAAiB,EAAE;GACnB,OAAO,EAAE;GACT,YAAY,EAAE;GACd,eAAe,EAAE;GAClB;;;AAIP,MAAM,2CAA2B,IAAI,SAAmD;AAExF,MAAa,uBACX,GACA,SACA,wBAAwB,UACR;CAChB,IAAI,QAAQ,yBAAyB,IAAI,EAAE;AAC3C,KAAI,CAAC,OAAO;AACV,0BAAQ,IAAI,KAAK;AACjB,2BAAyB,IAAI,GAAG,MAAM;;CAGxC,MAAM,MAAM,GAAG,WAAW,GAAG,GAAG,wBAAwB,cAAc;CACtE,IAAI,OAAO,MAAM,IAAI,IAAI;AACzB,KAAI,CAAC,MAAM;AACT,SAAO,yBAAyB,GAAG,SAAS,sBAAsB;AAClE,QAAM,IAAI,KAAK,KAAK;;AAEtB,QAAO;;;;ACjHT,MAAa,uBAAuB;CAClC,OAAO;CACP,MAAM;CACN,MAAM;CACN,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,KAAK;CACL,QAAQ;CACR,UAAU;CACV,MAAM;CACP;AAwCD,MAAM,cAAc,OAAO,MAAM;YACrB,EAAE,OAAO,SAAS,eAAe;CACzC,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,QAAQ;EACV,MAAM,OAAO,oBAAoB,QAAQ,QAAQ;AACjD,SAAO,WAAW,KAAK,gBAAgB,KAAK;;AAE9C,SAAQ,SAAR;EACE,KAAK;EACL,KAAK,MACH,QAAO,MAAM,MAAM,KAAK;EAC1B,QACE,QAAO;;EAEX;;;;;;;AAQJ,MAAM,mBAAmB,OAAO,IAAgD;YACpE,EAAE,OAAO,SAAS,eAAe;CACzC,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,YAAY,SACf,oBAAoB,QAAQ,QAAQ,CAAC,gBACrC,cAAc,OAAO,aAAa,MAAM,WAAW;EACvD;;;;AAKJ,MAAa,mBAAmB,OAAO,MAAM;iBAC5B,QAAQ,GAAG;;;;;AAM5B,MAAa,0BAA0B,OAAO,iBAAiB;IAC3D,gBAAgB,GAAG;;;AAIvB,MAAa,sBAAsB,OAAO,cAAc;IACpD,gBAAgB,GAAG;;;;;;AAOvB,MAAM,gBAAgB,OAAO,WAAW;;wCAEA,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,aAAa,CAAC;;;;eAIlG,QAAQ,GAAG;mBACP,aAAa,GAAG;;;;;;;;;;;;YAYvB,EAAE,OAAO,SAAS,eAAe;CACzC,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,QAAQ;EACV,MAAM,OAAO,oBAAoB,QAAQ,QAAQ;AACjD,SAAO,WAAW,KAAK,gBAAgB,KAAK;;AAE9C,KAAI,YAAY,SAAS,YAAY,WACnC,QAAO,MAAM,MAAM,KAAK;AAE1B,QAAO,WAAW,YAAY,MAAM;EACpC;;KAEC,WAAW;;cAEF,EAAE,OAAO,cAAc;CAC/B,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SAAS,oBAAoB,QAAQ,QAAQ,CAAC,gBAAgB;EACrE;;;;;;;;KAQD,mBAAmB,cAAc;;;;KAIjC,YAAY,cAAc;;;mBAGZ,EAAE,OAAO,cAAc;CACpC,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,OACF,QAAO,oBAAoB,QAAQ,QAAQ,CAAC;AAE9C,KAAI,YAAY,UAAU,YAAY,QACpC,QAAO,MAAM;UACJ,YAAY,WACrB,QAAO,MAAM;UACJ,YAAY,SACrB,QAAO,MAAM;UACJ,YAAY,SAAS,YAAY,SAC1C,QAAO,MAAM;UACJ,YAAY,SACrB,QAAO,MAAM;UACJ,YAAY,YAAY,YAAY,UAC7C,QAAO,MAAM;UACJ,YAAY,WAAW,YAAY,UAC5C,QAAO,MAAM;UACJ,YAAY,OACrB,QAAO,MAAM;UACJ,YAAY,OACrB,QAAO,MAAM;UACJ,YAAY,OACrB,QAAO,MAAM;UACJ,YAAY,QACrB,QAAO,MAAM;KAEb,QAAO;EAET;;;AAIN,MAAM,gBAAgB,OAAO,MAAM;;;;mBAMhB,aAAa,GAAG;;;;YAIvB,EAAE,OAAO,SAAS,UAAU,6BAA6B;CACjE,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,QAAQ;EACV,MAAM,OAAO,oBAAoB,QAAQ,SAAS,uBAAuB;AACzE,SAAO,WAAW,KAAK,gBAAgB,KAAK;;AAE9C,KAAI,SACF,QAAO,YAAY,SAAS,YAAY,aACpC,MAAM,MAAM,KAAK,UACjB,MAAM,MAAM,KAAK;AAEvB,SAAQ,SAAR;EACE,KAAK;EACL,KAAK,MACH,QAAO,MAAM,MAAM,KAAK;EAC1B,QACE,QAAO,MAAM,MAAM,KAAK;;EAE5B;iBACa,EAAE,OAAO,SAAS,UAAU,6BAA6B;CACtE,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,QAAQ;EACV,MAAM,aAAa,oBAAoB,QAAQ,SAAS,uBAAuB,CAAC;AAChF,SAAO,WAAW,UAAU,YAAY,OAAO,UAAU,GAAG;;AAE9D,KAAI,SACF,SAAQ,SAAR;EACE,KAAK,QACH,QAAO,MAAM;EACf,KAAK,OACH,QAAO,MAAM;EACf,KAAK,OACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,UACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,UACH,QAAO,MAAM;EACf,KAAK,SACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,SACH,QAAO,MAAM;EACf,KAAK,MACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,UACH,QAAO,MAAM;EACf,KAAK,WACH,QAAO,MAAM;EAGf;AACE,OAAI,uBACF,QAAO,MAAM;AAEf,UAAO,MAAM;;AAGnB,SAAQ,SAAR;EACE,KAAK,QACH,QAAO,MAAM;EACf,KAAK,OACH,QAAO,MAAM;EACf,KAAK,OACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,UACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,UACH,QAAO,MAAM;EACf,KAAK,SACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,SACH,QAAO,MAAM;EACf,KAAK,MACH,QAAO,MAAM;EACf,KAAK;EACL,KAAK,UACH,QAAO,MAAM;EACf,KAAK,WACH,QAAO,MAAM;EAEf;AACE,OAAI,uBACF,QAAO,MAAM;AAEf,UAAO,MAAM;;EAEjB;;AAGJ,MAAa,WAAW,EACtB,SACA,MACA,UACA,WACA,UACA,oBACA,YACA,uBACA,GAAG,YACe;CAClB,MAAM,aAAa,YAAY;AAE/B,KAAI,CAAC,YAAY;EACf,MAAM,UAAU,QAAQ;AACxB,MAAI,CAAC,SAAS;AACZ,WAAQ,KAAK,8DAA8D;AAC3E,UAAO;;AAGT,MAAI,WAAW,CAAC,MAAM,cACpB,SAAQ,KAAK,uEAAuE;;AAIxF,QACE,qBAAC,eAAD;EACE,wBAAwB;EACf;EACC;EACV,UAAU,CAAC,CAAC,QAAQ,CAAC;EACrB,GAAI;YALN,CAOE,qBAAC,kBAAD;GAAkB,WAAU;GAAa,OAAM;GAAS,SAAS,QAAQ;aAAzE,CACE,qBAAC,yBAAD;IAAyB,WAAU;IAAa,OAAM;IAAS,SAAS,QAAQ;cAAhF,CACG,QACC,oBAAC,aAAD;KAAsB;KAAmB;eACtC;KACW,CAAA,EAEf,cAAc,oBAAC,qBAAD,EAAsB,UAA+B,CAAA,CAC5C;OACzB,cACC,oBAAC,kBAAD;IAA2B;IAAmB;cAAU;IAErC,CAAA,CAEJ;MAElB,aACC,oBAAC,eAAD;GACW;GACC;GACV,IAAG;GACH,MAAK;GACL,SAAS;GACT,cAAW;GACX,GAAI;aAEJ,oBAAC,OAAD,EAAS,CAAA;GACK,CAAA,CAEJ"}

package/dist/{Sticker-BVX38LKi.d.mts → Sticker-DGfNuxUK.d.mts}

@@ -1,6 +1,6 @@
-import { o as Variant } from "./theme-CW6qlONZ.mjs";
-import { i as StackProps } from "./Stack-RVptVTVi.mjs";
-import { r as TruncatedTextProps } from "./TruncatedText-BE8FuEQm.mjs";
+import { o as Variant } from "./theme-BB1B6Wkz.mjs";
+import { i as StackProps } from "./Stack-XzBzPvSV.mjs";
+import { r as TruncatedTextProps } from "./TruncatedText-CbTpX_R1.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-BVX38LKi.d.mts.map
+//# sourceMappingURL=Sticker-DGfNuxUK.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-BVX38LKi.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-DGfNuxUK.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-3iEDsymE.mjs";
+import { t as ValueControlProps } from "./types-B0ilOIfE.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-Dhiund3f.mjs";
+import { t as Button } from "./Button-CnswHEJ2.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-BSl5v5aa.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-BHFCjvzs.mjs";
+import { t as Badge } from "./Badge-D-5tbZDw.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-BSl5v5aa.mjs.map

package/dist/{TabBar-BepWbJHz.mjs.map → TabBar-BSl5v5aa.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-BSl5v5aa.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-DFiSWroB.d.mts → Table-B2V5tlfA.d.mts}

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