@persona/design-system 0.1.7 → 0.1.8

package/dist/components/StatusIndicator/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Color","paragraphMixins","Spacing","BorderRadius","CircleNullIcon"],"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 { CircleNullIcon } from '@persona/icons/12px';\nimport { paragraphMixins } from 'design-system/mixins/text';\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\nexport interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * The semantic status type to display\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): Shows the default 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   * 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 Label = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  ${paragraphMixins.sm}\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 8px;\n  white-space: nowrap;\n  text-transform: capitalize;\n  /* Slight optical centering adjustment */\n  transform: translateY(0.5px);\n  color: ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return colors[$type].text;\n  }};\n`;\n\nconst IconContainer = styled.span<{ $iconColor: string }>`\n  line-height: 0;\n  color: ${({ $iconColor }) => $iconColor};\n`;\n\nconst LabelContainer = styled.div<{ $hasIcon: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  padding: ${({ $hasIcon }) =>\n    $hasIcon ? `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${Spacing[1]}` : `6px ${Spacing[2]}`};\n  position: relative;\n  flex-shrink: 0;\n`;\n\nconst StyledStatusIndicator = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  display: inline-flex;\n  align-items: center;\n  border-radius: ${BorderRadius.Xl};\n  width: fit-content;\n\n  ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return css`\n      background-color: ${colors[$type].background};\n    `;\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 type=\"success\" background=\"filled\">Approved</StatusIndicator>\n * <StatusIndicator type=\"critical\" background=\"none\">Failed</StatusIndicator>\n * ```\n */\nexport const StatusIndicator = ({\n  type = 'neutral',\n  background = 'filled',\n  showIcon = true,\n  leadingIcon,\n  children,\n  ...props\n}: StatusIndicatorProps) => {\n  const colors = background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n\n  // Determine which icon to show:\n  // - showIcon=false with background='filled': label-only variant (no icon)\n  // - leadingIcon=null: explicitly hide icon\n  // - leadingIcon=undefined: show default icon\n  // - leadingIcon=<ReactNode>: show custom icon (auto-colored via CSS color inheritance)\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 {\n    iconToRender = <CircleNullIcon />;\n  }\n  const hasIcon = iconToRender != null;\n\n  return (\n    <StyledStatusIndicator $type={type} $background={background} {...props}>\n      <LabelContainer $hasIcon={hasIcon}>\n        {hasIcon && <IconContainer $iconColor={colors[type].icon}>{iconToRender}</IconContainer>}\n        <Label $type={type} $background={background}>\n          {children}\n        </Label>\n      </LabelContainer>\n    </StyledStatusIndicator>\n  );\n};\n\nexport default StatusIndicator;\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["CircleNullIcon","CircleHalfIcon","CircleFillIcon","CircleCheckFillIcon","CircleSlashIcon","WarningFillIcon","Color","paragraphMixins","Spacing","BorderRadius","TruncatedText"],"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  CircleNullIcon,\n  CircleSlashIcon,\n  WarningFillIcon,\n} from '@persona/icons/12px';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\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: <CircleFillIcon /> },\n  active: { type: 'success', icon: <CircleCheckFillIcon /> },\n  failed: { type: 'critical', icon: <CircleSlashIcon /> },\n  needs_review: { type: 'warning', icon: <WarningFillIcon /> },\n  canceled: { type: 'attention', icon: <CircleSlashIcon /> },\n  archived: { type: 'informational', icon: <CircleSlashIcon /> },\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 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: ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return colors[$type].text;\n  }};\n`;\n\nconst IconContainer = styled.span<{ $iconColor: string }>`\n  line-height: 0;\n  color: ${({ $iconColor }) => $iconColor};\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  ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return css`\n      background-color: ${colors[$type].background};\n    `;\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  const colors = background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\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 $iconColor={colors[resolvedType].icon}>{iconToRender}</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":"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"}

package/dist/components/StatusIndicator/index.d.cts

@@ -1,2 +1,2 @@
-import { BackgroundType, StatusIndicator, StatusIndicatorProps, StatusType } from "../../StatusIndicator.cjs";
-export { type BackgroundType, StatusIndicator, StatusIndicator as default, type StatusIndicatorProps, type StatusType };
+import { BackgroundType, STATUSES, Status, StatusIndicator, StatusIndicatorProps, StatusType } from "../../StatusIndicator.cjs";
+export { type BackgroundType, STATUSES, type Status, StatusIndicator, StatusIndicator as default, type StatusIndicatorProps, type StatusType };

package/dist/components/StatusIndicator/index.d.mts

@@ -1,2 +1,2 @@
-import { BackgroundType, StatusIndicator, StatusIndicatorProps, StatusType } from "../../StatusIndicator.mjs";
-export { type BackgroundType, StatusIndicator, StatusIndicator as default, type StatusIndicatorProps, type StatusType };
+import { BackgroundType, STATUSES, Status, StatusIndicator, StatusIndicatorProps, StatusType } from "../../StatusIndicator.mjs";
+export { type BackgroundType, STATUSES, type Status, StatusIndicator, StatusIndicator as default, type StatusIndicatorProps, type StatusType };

package/dist/components/StatusIndicator/index.mjs

@@ -1,9 +1,46 @@
 import { paragraphMixins } from "../../mixins/text.mjs";
+import { TruncatedText } from "../../lib/TruncatedText.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleNullIcon } from "@persona/icons/12px";
+import { CircleCheckFillIcon, CircleFillIcon, CircleHalfIcon, 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(CircleFillIcon, {})
+	},
+	active: {
+		type: "success",
+		icon: /* @__PURE__ */ jsx(CircleCheckFillIcon, {})
+	},
+	failed: {
+		type: "critical",
+		icon: /* @__PURE__ */ jsx(CircleSlashIcon, {})
+	},
+	needs_review: {
+		type: "warning",
+		icon: /* @__PURE__ */ jsx(WarningFillIcon, {})
+	},
+	canceled: {
+		type: "attention",
+		icon: /* @__PURE__ */ jsx(CircleSlashIcon, {})
+	},
+	archived: {
+		type: "informational",
+		icon: /* @__PURE__ */ jsx(CircleSlashIcon, {})
+	}
+};
+/** All supported `status` preset keys, derived from the config map. */
+const STATUSES = Object.keys(STATUS_CONFIG);
 const FILLED_STATUS_COLORS = {
 	neutral: {
 		background: Color.BackgroundStatusIndicatorDefault,
@@ -93,10 +130,13 @@ const Label = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  flex-shrink: 0;
-  line-height: 8px;
+  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: capitalize;
+  text-transform: ${({ $preserveCase }) => $preserveCase ? "none" : "capitalize"};
   /* Slight optical centering adjustment */
   transform: translateY(0.5px);
   color: ${({ $type, $background }) => {
@@ -111,15 +151,17 @@ const LabelContainer = styled.div`
   display: flex;
   align-items: center;
   gap: ${Spacing[1]};
-  padding: ${({ $hasIcon }) => $hasIcon ? `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${Spacing[1]}` : `6px ${Spacing[2]}`};
+  padding: ${({ $hasIcon }) => `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${$hasIcon ? Spacing[1] : Spacing[2]}`};
   position: relative;
-  flex-shrink: 0;
+  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"};
 
   ${({ $type, $background }) => {
 	return css`
@@ -133,35 +175,42 @@ const StyledStatusIndicator = styled.div`
 *
 * @example
 * ```tsx
+* <StatusIndicator status="active">Active</StatusIndicator>
 * <StatusIndicator type="success" background="filled">Approved</StatusIndicator>
 * <StatusIndicator type="critical" background="none">Failed</StatusIndicator>
 * ```
 */
-const StatusIndicator = ({ type = "neutral", background = "filled", showIcon = true, leadingIcon, children, ...props }) => {
+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");
 	const colors = background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;
 	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: type,
+		$type: resolvedType,
 		$background: background,
+		$truncate: truncate,
 		...props,
 		children: /* @__PURE__ */ jsxs(LabelContainer, {
 			$hasIcon: hasIcon,
+			$truncate: truncate,
 			children: [hasIcon && /* @__PURE__ */ jsx(IconContainer, {
-				$iconColor: colors[type].icon,
+				$iconColor: colors[resolvedType].icon,
 				children: iconToRender
 			}), /* @__PURE__ */ jsx(Label, {
-				$type: type,
+				$type: resolvedType,
 				$background: background,
-				children
+				$truncate: truncate,
+				$preserveCase: preserveCase,
+				children: truncate ? /* @__PURE__ */ jsx(TruncatedText, { children }) : children
 			})]
 		})
 	});
 };
 //#endregion
-export { StatusIndicator, StatusIndicator as default };
+export { STATUSES, StatusIndicator, StatusIndicator as default };
 
 //# sourceMappingURL=index.mjs.map

package/dist/components/StatusIndicator/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.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 { CircleNullIcon } from '@persona/icons/12px';\nimport { paragraphMixins } from 'design-system/mixins/text';\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\nexport interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * The semantic status type to display\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): Shows the default 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   * 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 Label = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  ${paragraphMixins.sm}\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 8px;\n  white-space: nowrap;\n  text-transform: capitalize;\n  /* Slight optical centering adjustment */\n  transform: translateY(0.5px);\n  color: ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return colors[$type].text;\n  }};\n`;\n\nconst IconContainer = styled.span<{ $iconColor: string }>`\n  line-height: 0;\n  color: ${({ $iconColor }) => $iconColor};\n`;\n\nconst LabelContainer = styled.div<{ $hasIcon: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  padding: ${({ $hasIcon }) =>\n    $hasIcon ? `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${Spacing[1]}` : `6px ${Spacing[2]}`};\n  position: relative;\n  flex-shrink: 0;\n`;\n\nconst StyledStatusIndicator = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  display: inline-flex;\n  align-items: center;\n  border-radius: ${BorderRadius.Xl};\n  width: fit-content;\n\n  ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return css`\n      background-color: ${colors[$type].background};\n    `;\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 type=\"success\" background=\"filled\">Approved</StatusIndicator>\n * <StatusIndicator type=\"critical\" background=\"none\">Failed</StatusIndicator>\n * ```\n */\nexport const StatusIndicator = ({\n  type = 'neutral',\n  background = 'filled',\n  showIcon = true,\n  leadingIcon,\n  children,\n  ...props\n}: StatusIndicatorProps) => {\n  const colors = background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n\n  // Determine which icon to show:\n  // - showIcon=false with background='filled': label-only variant (no icon)\n  // - leadingIcon=null: explicitly hide icon\n  // - leadingIcon=undefined: show default icon\n  // - leadingIcon=<ReactNode>: show custom icon (auto-colored via CSS color inheritance)\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 {\n    iconToRender = <CircleNullIcon />;\n  }\n  const hasIcon = iconToRender != null;\n\n  return (\n    <StyledStatusIndicator $type={type} $background={background} {...props}>\n      <LabelContainer $hasIcon={hasIcon}>\n        {hasIcon && <IconContainer $iconColor={colors[type].icon}>{iconToRender}</IconContainer>}\n        <Label $type={type} $background={background}>\n          {children}\n        </Label>\n      </LabelContainer>\n    </StyledStatusIndicator>\n  );\n};\n\nexport default StatusIndicator;\n"],"mappings":";;;;;;AAwDA,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,QAAQ,OAAO,GAAuD;IACxE,gBAAgB,GAAG;;;;;;;;;;YAUX,EAAE,OAAO,kBAAkB;AAEnC,SADe,gBAAgB,WAAW,uBAAuB,2BACnD,OAAO;EACrB;;AAGJ,MAAM,gBAAgB,OAAO,IAA4B;;YAE7C,EAAE,iBAAiB,WAAW;;AAG1C,MAAM,iBAAiB,OAAO,GAA0B;;;SAG/C,QAAQ,GAAG;cACN,EAAE,eACZ,WAAW,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,OAAO,OAAO,QAAQ,KAAK;;;;AAK/F,MAAM,wBAAwB,OAAO,GAAuD;;;mBAGzE,aAAa,GAAG;;;KAG9B,EAAE,OAAO,kBAAkB;AAE5B,QAAO,GAAG;2BADK,gBAAgB,WAAW,uBAAuB,2BAEpC,OAAO,WAAW;;EAE/C;;;;;;;;;;;;AAaJ,MAAa,mBAAmB,EAC9B,OAAO,WACP,aAAa,UACb,WAAW,MACX,aACA,UACA,GAAG,YACuB;CAC1B,MAAM,SAAS,eAAe,WAAW,uBAAuB;CAQhE,IAAI;AACJ,KAAI,CAAC,YAAY,eAAe,SAC9B,gBAAe;UACN,OAAO,gBAAgB,YAChC,gBAAe;KAEf,gBAAe,oBAAC,gBAAD,EAAkB,CAAA;CAEnC,MAAM,UAAU,gBAAgB;AAEhC,QACE,oBAAC,uBAAD;EAAuB,OAAO;EAAM,aAAa;EAAY,GAAI;YAC/D,qBAAC,gBAAD;GAAgB,UAAU;aAA1B,CACG,WAAW,oBAAC,eAAD;IAAe,YAAY,OAAO,MAAM;cAAO;IAA6B,CAAA,EACxF,oBAAC,OAAD;IAAO,OAAO;IAAM,aAAa;IAC9B;IACK,CAAA,CACO;;EACK,CAAA"}
+{"version":3,"file":"index.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  CircleNullIcon,\n  CircleSlashIcon,\n  WarningFillIcon,\n} from '@persona/icons/12px';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\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: <CircleFillIcon /> },\n  active: { type: 'success', icon: <CircleCheckFillIcon /> },\n  failed: { type: 'critical', icon: <CircleSlashIcon /> },\n  needs_review: { type: 'warning', icon: <WarningFillIcon /> },\n  canceled: { type: 'attention', icon: <CircleSlashIcon /> },\n  archived: { type: 'informational', icon: <CircleSlashIcon /> },\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 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: ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return colors[$type].text;\n  }};\n`;\n\nconst IconContainer = styled.span<{ $iconColor: string }>`\n  line-height: 0;\n  color: ${({ $iconColor }) => $iconColor};\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  ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return css`\n      background-color: ${colors[$type].background};\n    `;\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  const colors = background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\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 $iconColor={colors[resolvedType].icon}>{iconToRender}</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":"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"}

package/dist/components/Sticker/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Sticker = require("../../Sticker-D0jIU2Dt.cjs");
+const require_Sticker = require("../../Sticker-CIoseh9f.cjs");
 exports.STICKER_COLOR_CONFIG = require_Sticker.STICKER_COLOR_CONFIG;
 exports.Sticker = require_Sticker.Sticker;
 exports.StickerContainer = require_Sticker.StickerContainer;

package/dist/components/Sticker/index.d.cts

@@ -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-N8XZnv7M.cjs";
+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-CI-XxUmM.cjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/components/Sticker/index.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-DjF9VJQB.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-Bs25ISz7.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/components/Sticker/index.mjs

@@ -1,2 +1,2 @@
-import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer, t as STICKER_COLOR_CONFIG } from "../../Sticker-B0TbkV4o.mjs";
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer, t as STICKER_COLOR_CONFIG } from "../../Sticker-DbqKLe33.mjs";
 export { STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StyledTruncatedText };

package/dist/components/TabBar/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_TabBar = require("../../TabBar-BpHMYvNb.cjs");
+const require_TabBar = require("../../TabBar-PFaDNRw0.cjs");
 exports.StyledTab = require_TabBar.StyledTab;
 exports.Tab = require_TabBar.Tab;
 exports.TabBar = require_TabBar.TabBar;

package/dist/components/TabBar/index.mjs

@@ -1,2 +1,2 @@
-import { a as TabContainer, i as TabBar, n as StyledTab, r as Tab, t as TabBarIconButton_default } from "../../TabBar-ByusqAXF.mjs";
+import { a as TabContainer, i as TabBar, n as StyledTab, r as Tab, t as TabBarIconButton_default } from "../../TabBar-zSA8kyE6.mjs";
 export { StyledTab, Tab, TabBar, TabBar as default, TabBarIconButton_default as TabBarIconButton, TabContainer };

package/dist/components/Table/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Table = require("../../Table-C9rjUVpn.cjs");
+const require_Table = require("../../Table-DxLvJYWK.cjs");
 exports.StickyTD = require_Table.StickyTD;
 exports.StickyTH = require_Table.StickyTH;
 exports.Table = require_Table.Table;

package/dist/components/Table/index.d.cts

@@ -1,8 +1,8 @@
-import { t as Table } from "../../Table-DJZtluW3.cjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-UoY92mzR.cjs";
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-_tQRydn9.cjs";
-import { t as TableRow } from "../../TableRow-BVzduO4G.cjs";
-import { t as TableHead } from "../../TableHead-CTsZNRJm.cjs";
-import { t as TableBody } from "../../TableBody-BFPF07n4.cjs";
-import { t as TableLayout } from "../../TableLayout-GyRS-Awa.cjs";
+import { t as Table } from "../../Table-DXqyNohc.cjs";
+import { t as TableHeaderCell } from "../../TableHeaderCell-Crsa2R2g.cjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-Bw8QVu_o.cjs";
+import { t as TableRow } from "../../TableRow-DVTPqT4w.cjs";
+import { t as TableHead } from "../../TableHead-Ch4Ho3LW.cjs";
+import { t as TableBody } from "../../TableBody-CxwHmdNb.cjs";
+import { t as TableLayout } from "../../TableLayout-Ct0kepcA.cjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellProps, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

package/dist/components/Table/index.d.mts

@@ -1,8 +1,8 @@
-import { t as Table } from "../../Table-D3nyiZt0.mjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-B2yiOw4w.mjs";
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-BPnJP0jZ.mjs";
-import { t as TableRow } from "../../TableRow-C-faHbkL.mjs";
-import { t as TableHead } from "../../TableHead-wl78HqPT.mjs";
-import { t as TableBody } from "../../TableBody-DpRjZgzU.mjs";
-import { t as TableLayout } from "../../TableLayout-_TWUnffx.mjs";
+import { t as Table } from "../../Table-BNScLj9g.mjs";
+import { t as TableHeaderCell } from "../../TableHeaderCell-Br8ZE3Xe.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-DDbjWdk0.mjs";
+import { t as TableRow } from "../../TableRow-BvS4yjo6.mjs";
+import { t as TableHead } from "../../TableHead-LxvG0e9k.mjs";
+import { t as TableBody } from "../../TableBody-CrDNMyT8.mjs";
+import { t as TableLayout } from "../../TableLayout-nwy094C_.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellProps, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

package/dist/components/Table/index.mjs

@@ -1,2 +1,2 @@
-import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-CNs8p8hL.mjs";
+import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-D8IcpACv.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

package/dist/components/TableBox/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_TableBox = require("../../TableBox-DO-yToJk.cjs");
+const require_TableBox = require("../../TableBox-CiuXCXyv.cjs");
 exports.TableBoxContext = require_TableBox.TableBoxContext;
 exports.default = require_TableBox.TableBox;

package/dist/components/TableBox/index.d.cts

@@ -1,3 +1,3 @@
-import { t as DragDirection } from "../../useTableBoxDragAndDrop--QBq2FQh.cjs";
-import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-DOQ8PnAT.cjs";
+import { t as DragDirection } from "../../useTableBoxDragAndDrop-DnbUToce.cjs";
+import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-DIMenSwX.cjs";
 export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };

package/dist/components/TableBox/index.d.mts

@@ -1,3 +1,3 @@
-import { t as DragDirection } from "../../useTableBoxDragAndDrop-BTtv9PEt.mjs";
-import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-D1bjYv7b.mjs";
+import { t as DragDirection } from "../../useTableBoxDragAndDrop-BMo-iaUF.mjs";
+import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-By1xE6_Q.mjs";
 export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };

package/dist/components/TableBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as TableBoxContext, t as TableBox } from "../../TableBox-DIJffyts.mjs";
+import { n as TableBoxContext, t as TableBox } from "../../TableBox-luasMC73.mjs";
 export { TableBoxContext, TableBox as default };

package/dist/components/TechnicalSticker/index.cjs

@@ -4,15 +4,15 @@ Object.defineProperties(exports, {
 });
 const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
-const require_MiddleTruncatedText = require("../../MiddleTruncatedText-BIzKECv9.cjs");
-const require_useToggle = require("../../useToggle-CSkZWXtQ.cjs");
-const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
+const require_MiddleTruncatedText = require("../../MiddleTruncatedText-CO76xIqP.cjs");
+const require_useToggle = require("../../useToggle-DARO917w.cjs");
+const require_Tooltip = require("../../Tooltip-olP3rdUO.cjs");
 const require_lib_copyTextToClipboard = require("../../lib/copyTextToClipboard.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let _persona_icons_12px = require("@persona/icons/12px");
 //#region components/TechnicalSticker/TechnicalSticker.tsx
 const COPY_CONFIRMATION_TEXT = "Copied!";

package/dist/components/TechnicalSticker/index.mjs

@@ -1,12 +1,12 @@
 import { isHovered } from "../../lib/pseudoClass.mjs";
-import { t as MiddleTruncatedText } from "../../MiddleTruncatedText-Bzpg3zAU.mjs";
-import { t as useToggle } from "../../useToggle-3k3EkV8V.mjs";
-import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
+import { t as MiddleTruncatedText } from "../../MiddleTruncatedText-GXI-CPvs.mjs";
+import { t as useToggle } from "../../useToggle-Bo3yd14Y.mjs";
+import { a as Tooltip } from "../../Tooltip-C6AR1xT-.mjs";
 import copyTextToClipboard from "../../lib/copyTextToClipboard.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { CopyIcon } from "@persona/icons/12px";
 //#region components/TechnicalSticker/TechnicalSticker.tsx
 const COPY_CONFIRMATION_TEXT = "Copied!";

package/dist/components/Text/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Text = require("../../Text-CzN0DOXV.cjs");
+const require_Text = require("../../Text-G9QmYf0P.cjs");
 exports.Display = require_Text.Display;
 exports.Heading = require_Text.Heading;
 exports.Label = require_Text.Label;

package/dist/components/Text/index.d.mts

@@ -1,2 +1,2 @@
-import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-D3FXEnG6.mjs";
+import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-DNPbAuUG.mjs";
 export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/components/Text/index.mjs

@@ -1,2 +1,2 @@
-import { a as Span, i as Paragraph, n as Heading, o as TabularNumber, r as Label, t as Display } from "../../Text-hEoPeOc9.mjs";
+import { a as Span, i as Paragraph, n as Heading, o as TabularNumber, r as Label, t as Display } from "../../Text-RcEfNFLx.mjs";
 export { Display, Heading, Label, Paragraph, Span, TabularNumber };

package/dist/components/TextArea/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_TextArea = require("../../TextArea-DVHi0K7M.cjs");
+const require_TextArea = require("../../TextArea-BNiipQDb.cjs");
 exports.TextArea = require_TextArea.TextAreaWithStyle;
 exports.default = require_TextArea.TextAreaWithStyle;

package/dist/components/TextArea/index.d.cts

@@ -1,2 +1,2 @@
-import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-KpDoXg-5.cjs";
+import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-CHW9FKM4.cjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/components/TextArea/index.d.mts

@@ -1,2 +1,2 @@
-import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-weASn4Hq.mjs";
+import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-B89wtTsF.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/components/TextArea/index.mjs

@@ -1,2 +1,2 @@
-import { t as TextAreaWithStyle } from "../../TextArea-DIPeBLkr.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-NCLsW-03.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default };

package/dist/components/Tile/index.cjs

@@ -3,10 +3,10 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 const require_chunk = require("../../chunk-CKQMccvm.cjs");
-const require_Text = require("../../Text-CzN0DOXV.cjs");
-const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
-const require_Stack = require("../../Stack-BF-9YjA1.cjs");
-const require_Sticker = require("../../Sticker-D0jIU2Dt.cjs");
+const require_Stack = require("../../Stack-UeifHn3c.cjs");
+const require_Text = require("../../Text-G9QmYf0P.cjs");
+const require_Tooltip = require("../../Tooltip-olP3rdUO.cjs");
+const require_Sticker = require("../../Sticker-CIoseh9f.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);

package/dist/components/Tile/index.mjs

@@ -1,7 +1,7 @@
-import { i as Paragraph, n as Heading } from "../../Text-hEoPeOc9.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-CDvOu1UN.mjs";
-import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { n as Sticker } from "../../Sticker-B0TbkV4o.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
+import { i as Paragraph, n as Heading } from "../../Text-RcEfNFLx.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-C6AR1xT-.mjs";
+import { n as Sticker } from "../../Sticker-DbqKLe33.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Toast/index.cjs

@@ -5,7 +5,7 @@ require("../../variables/effect.cjs");
 require("../../variables/transitions.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
 require("../../lib/message.cjs");
-const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
+const require_IconButton = require("../../IconButton-nlgjJQCS.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);

package/dist/components/Toast/index.mjs

@@ -3,7 +3,7 @@ import "../../variables/effect.mjs";
 import "../../variables/transitions.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
 import "../../lib/message.mjs";
-import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
+import { t as IconButton } from "../../IconButton-CIWiEsS-.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Toggle/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Toggle = require("../../Toggle-CTtrhzsV.cjs");
+const require_Toggle = require("../../Toggle-Ce-rF8Xp.cjs");
 exports.Toggle = require_Toggle.Toggle;
 exports.default = require_Toggle.Toggle;

package/dist/components/Toggle/index.d.cts

@@ -1,2 +1,2 @@
-import { n as ToggleProps, t as Toggle } from "../../Toggle-CYQE1Nk_.cjs";
+import { n as ToggleProps, t as Toggle } from "../../Toggle-tbIebQWC.cjs";
 export { Toggle, Toggle as default, ToggleProps };

package/dist/components/Toggle/index.d.mts

@@ -1,2 +1,2 @@
-import { n as ToggleProps, t as Toggle } from "../../Toggle-BQCOJZjZ.mjs";
+import { n as ToggleProps, t as Toggle } from "../../Toggle-DzYLgxGk.mjs";
 export { Toggle, Toggle as default, ToggleProps };

package/dist/components/Toggle/index.mjs

@@ -1,2 +1,2 @@
-import { t as Toggle } from "../../Toggle-CfjUQlcK.mjs";
+import { t as Toggle } from "../../Toggle-Bie9zCem.mjs";
 export { Toggle, Toggle as default };

package/dist/components/Tooltip/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
+const require_Tooltip = require("../../Tooltip-olP3rdUO.cjs");
 exports.FloatingTooltip = require_Tooltip.FloatingTooltip;
 exports.HelperTooltip = require_Tooltip.HelperTooltip;
 exports.TextUnderlineTooltip = require_Tooltip.TextUnderlineTooltip;

package/dist/components/Tooltip/index.d.cts

@@ -1,4 +1,4 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-BhGRP9QA.cjs";
-import { t as HelperTooltip } from "../../HelperTooltip-C1CYMpJP.cjs";
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-cSMjZOuB.cjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip--eDrrk2r.cjs";
+import { t as HelperTooltip } from "../../HelperTooltip-T-sTGGLD.cjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-DMEyOu8C.cjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/components/Tooltip/index.d.mts

@@ -1,4 +1,4 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-DRgufW3i.mjs";
-import { t as HelperTooltip } from "../../HelperTooltip-CofPKyZh.mjs";
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-Cep5cgEQ.mjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-CUC-JuRL.mjs";
+import { t as HelperTooltip } from "../../HelperTooltip-B7Ysh8B3.mjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-5-0D8s4z.mjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/components/Tooltip/index.mjs

@@ -1,2 +1,2 @@
-import { a as Tooltip, i as FloatingTooltip, n as TextWithDashedUnderline, r as HelperTooltip, t as TextUnderlineTooltip } from "../../Tooltip-CDvOu1UN.mjs";
+import { a as Tooltip, i as FloatingTooltip, n as TextWithDashedUnderline, r as HelperTooltip, t as TextUnderlineTooltip } from "../../Tooltip-C6AR1xT-.mjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default };

package/dist/compound-expression.d.mts

@@ -0,0 +1,9 @@
+import { l as FilterRule, n as CompoundExpression } from "./types-D58IoRx6.mjs";
+
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/compound-expression.d.ts
+declare function addRuleToGroup(compound: CompoundExpression, groupIndex: number, rule: FilterRule): CompoundExpression;
+declare function setRuleInGroup(compound: CompoundExpression, groupIndex: number, ruleIndex: number, rule: FilterRule): CompoundExpression;
+declare function removeRuleFromGroup(compound: CompoundExpression, groupIndex: number, ruleIndex: number): CompoundExpression;
+//#endregion
+export { addRuleToGroup, removeRuleFromGroup, setRuleInGroup };
+//# sourceMappingURL=compound-expression.d.mts.map