@persona/design-system 0.1.6 → 0.1.8

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

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-1QD2zH3l.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-DrjdUOU9.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlProps };

package/dist/components/SegmentedControl/index.mjs

@@ -1,2 +1,2 @@
-import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-pRkMcMXe.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-CgDQIVll.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem };

package/dist/components/Select/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Select = require("../../Select-CowngLd7.cjs");
+const require_Select = require("../../Select-BurtT6bN.cjs");
 exports.Option = require_Select.Option;
 exports.Select = require_Select.Select;
 exports.SelectHeader = require_Select.SelectHeader;

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

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-XN23Ui_j.cjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-BH3hXMxp.cjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

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

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-BysJW9mH.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-2KbtKawr.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/components/Select/index.mjs

@@ -1,2 +1,2 @@
-import { n as Select, r as SelectHeader, t as Option } from "../../Select-Fg2z5J-p.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-cPEORy70.mjs";
 export { Option, Select, Select as default, SelectHeader };

package/dist/components/Slider/index.cjs

@@ -5,13 +5,13 @@ Object.defineProperties(exports, {
 const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_mixins_focus = require("../../mixins/focus.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
-const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
+const require_Tooltip = require("../../Tooltip-olP3rdUO.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 let styled_components$1 = require_chunk.__toESM(styled_components, 1);
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let lodash = require("lodash");
 let _react_aria_utils = require("@react-aria/utils");
 let _react_aria_i18n = require("@react-aria/i18n");

package/dist/components/Slider/index.mjs

@@ -1,10 +1,10 @@
 import { focusStyle } from "../../mixins/focus.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { i as FloatingTooltip } from "../../Tooltip-CDvOu1UN.mjs";
+import { i as FloatingTooltip } from "../../Tooltip-C6AR1xT-.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { debounce } from "lodash";
 import { mergeProps } from "@react-aria/utils";
 import { useNumberFormatter } from "@react-aria/i18n";

package/dist/components/Spacer/index.cjs

@@ -1,2 +1,2 @@
-const require_Spacer = require("../../Spacer-GYHbk-dS.cjs");
+const require_Spacer = require("../../Spacer-B2CerL6e.cjs");
 module.exports = require_Spacer.Spacer_default;

package/dist/components/Spacer/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spacer_default } from "../../Spacer-Ln3KChb5.mjs";
+import { t as Spacer_default } from "../../Spacer-CJp0lwkL.mjs";
 export { Spacer_default as default };

package/dist/components/Spinner/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Spinner = require("../../Spinner-DaSlM4kU.cjs");
+const require_Spinner = require("../../Spinner-B6bx70yR.cjs");
 exports.Spinner = require_Spinner.Spinner;
 exports.default = require_Spinner.Spinner;

package/dist/components/Spinner/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../Spinner-D9-u_5zS.mjs";
+import { t as Spinner } from "../../Spinner-BEPF42RW.mjs";
 export { Spinner, Spinner as default };

package/dist/components/Stack/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Stack = require("../../Stack-BF-9YjA1.cjs");
+const require_Stack = require("../../Stack-UeifHn3c.cjs");
 exports.HStack = require_Stack.HStack;
 exports.Stack = require_Stack.Stack;
 exports.default = require_Stack.Stack;

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

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-B5VYkPBe.cjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-BzVkf3cz.cjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

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

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-Du7tLSPC.mjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-CkV7k7TE.mjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/components/Stack/index.mjs

@@ -1,2 +1,2 @@
-import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
 export { HStack, Stack, Stack as default };

package/dist/components/StatusIndicator/index.cjs

@@ -4,12 +4,49 @@ Object.defineProperties(exports, {
 });
 const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
+const require_lib_TruncatedText = require("../../lib/TruncatedText.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _persona_icons_12px = require("@persona/icons/12px");
 //#region components/StatusIndicator/StatusIndicator.tsx
+const STATUS_CONFIG = {
+	open: {
+		type: "neutral",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleNullIcon, {})
+	},
+	pending: {
+		type: "neutral",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleHalfIcon, {})
+	},
+	completed: {
+		type: "success",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleFillIcon, {})
+	},
+	active: {
+		type: "success",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleCheckFillIcon, {})
+	},
+	failed: {
+		type: "critical",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleSlashIcon, {})
+	},
+	needs_review: {
+		type: "warning",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.WarningFillIcon, {})
+	},
+	canceled: {
+		type: "attention",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleSlashIcon, {})
+	},
+	archived: {
+		type: "informational",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleSlashIcon, {})
+	}
+};
+/** All supported `status` preset keys, derived from the config map. */
+const STATUSES = Object.keys(STATUS_CONFIG);
 const FILLED_STATUS_COLORS = {
 	neutral: {
 		background: _persona_design_tokens.Color.BackgroundStatusIndicatorDefault,
@@ -99,10 +136,13 @@ const Label = styled_components.default.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 }) => {
@@ -117,15 +157,17 @@ const LabelContainer = styled_components.default.div`
   display: flex;
   align-items: center;
   gap: ${_persona_design_tokens.Spacing[1]};
-  padding: ${({ $hasIcon }) => $hasIcon ? `${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[1]}` : `6px ${_persona_design_tokens.Spacing[2]}`};
+  padding: ${({ $hasIcon }) => `${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[1]} ${$hasIcon ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]}`};
   position: relative;
-  flex-shrink: 0;
+  flex-shrink: ${({ $truncate }) => $truncate ? 1 : 0};
+  min-width: ${({ $truncate }) => $truncate ? "0" : "auto"};
 `;
 const StyledStatusIndicator = styled_components.default.div`
   display: inline-flex;
   align-items: center;
   border-radius: ${_persona_design_tokens.BorderRadius.Xl};
   width: fit-content;
+  max-width: ${({ $truncate }) => $truncate ? "100%" : "none"};
 
   ${({ $type, $background }) => {
 	return styled_components.css`
@@ -139,35 +181,43 @@ const StyledStatusIndicator = styled_components.default.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__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleNullIcon, {});
 	const hasIcon = iconToRender != null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledStatusIndicator, {
-		$type: type,
+		$type: resolvedType,
 		$background: background,
+		$truncate: truncate,
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabelContainer, {
 			$hasIcon: hasIcon,
+			$truncate: truncate,
 			children: [hasIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconContainer, {
-				$iconColor: colors[type].icon,
+				$iconColor: colors[resolvedType].icon,
 				children: iconToRender
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-				$type: type,
+				$type: resolvedType,
 				$background: background,
-				children
+				$truncate: truncate,
+				$preserveCase: preserveCase,
+				children: truncate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_TruncatedText.TruncatedText, { children }) : children
 			})]
 		})
 	});
 };
 //#endregion
+exports.STATUSES = STATUSES;
 exports.StatusIndicator = StatusIndicator;
 exports.default = StatusIndicator;
 

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-D9HjFQ6e.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-XfyoDEod.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-D8WCGYd5.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-CAv10XAF.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-B3FJsvXP.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-D4SMuVIR.cjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-BTGuqVXy.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-Bp3vEph6.cjs";
-import { t as TableRow } from "../../TableRow-BfGJSGZH.cjs";
-import { t as TableHead } from "../../TableHead-roexW17v.cjs";
-import { t as TableBody } from "../../TableBody-BLmn5h3y.cjs";
-import { t as TableLayout } from "../../TableLayout-BvVsuUVb.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-C8D4lpSa.mjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-Cflho9R2.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-BwWgmaXZ.mjs";
-import { t as TableRow } from "../../TableRow-CjQmDmfx.mjs";
-import { t as TableHead } from "../../TableHead-CuHNOeCj.mjs";
-import { t as TableBody } from "../../TableBody-0cd50RuX.mjs";
-import { t as TableLayout } from "../../TableLayout-D9BGrjRs.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-CGtyWI6V.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 };