@persona/design-system 0.1.8 → 0.2.0

package/dist/components/StatusIndicator/index.cjs

@@ -1,224 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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,
-		text: _persona_design_tokens.Color.TextStatusIndicatorDefault,
-		icon: _persona_design_tokens.Color.BorderIconLabelGrey
-	},
-	attention: {
-		background: _persona_design_tokens.Color.BackgroundStatusIndicatorAttention,
-		text: _persona_design_tokens.Color.TextStatusIndicatorAttention,
-		icon: _persona_design_tokens.Color.BorderIconLabelYellow
-	},
-	warning: {
-		background: _persona_design_tokens.Color.BackgroundStatusIndicatorWarning,
-		text: _persona_design_tokens.Color.TextStatusIndicatorWarning,
-		icon: _persona_design_tokens.Color.BorderIconLabelOrange
-	},
-	critical: {
-		background: _persona_design_tokens.Color.BackgroundStatusIndicatorCritical,
-		text: _persona_design_tokens.Color.TextStatusIndicatorCritical,
-		icon: _persona_design_tokens.Color.BorderIconLabelRed
-	},
-	success: {
-		background: _persona_design_tokens.Color.BackgroundStatusIndicatorSuccess,
-		text: _persona_design_tokens.Color.TextStatusIndicatorSuccess,
-		icon: _persona_design_tokens.Color.BorderIconLabelGreen
-	},
-	feature: {
-		background: _persona_design_tokens.Color.BackgroundStatusIndicatorFeature,
-		text: _persona_design_tokens.Color.TextStatusIndicatorFeature,
-		icon: _persona_design_tokens.Color.BorderIconLabelPurple
-	},
-	informational: {
-		background: _persona_design_tokens.Color.BackgroundStatusIndicatorInformational,
-		text: _persona_design_tokens.Color.TextStatusIndicatorInformational,
-		icon: _persona_design_tokens.Color.BorderIconLabelBlue
-	},
-	miscellaneous: {
-		background: _persona_design_tokens.Color.BackgroundStatusIndicatorMiscellaneous,
-		text: _persona_design_tokens.Color.TextStatusIndicatorMiscellaneous,
-		icon: _persona_design_tokens.Color.BorderIconLabelTeal
-	}
-};
-const TRANSPARENT_STATUS_COLORS = {
-	neutral: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconSecondary
-	},
-	attention: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconWarning
-	},
-	warning: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconWarning
-	},
-	critical: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconDanger
-	},
-	success: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconSuccess
-	},
-	feature: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconActive
-	},
-	informational: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconLabelBlue
-	},
-	miscellaneous: {
-		background: "transparent",
-		text: _persona_design_tokens.Color.TextPrimary,
-		icon: _persona_design_tokens.Color.BorderIconLabelTeal
-	}
-};
-const Label = styled_components.default.div`
-  ${require_mixins_text.paragraphMixins.sm}
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex-shrink: ${({ $truncate }) => $truncate ? 1 : 0};
-  min-width: ${({ $truncate }) => $truncate ? "0" : "auto"};
-  /* Line box hugs the font so pill height is driven by padding alone, and clipping an overflowing
-     label can't cut into descenders. Matches Sticker. */
-  line-height: 1;
-  white-space: nowrap;
-  text-transform: ${({ $preserveCase }) => $preserveCase ? "none" : "capitalize"};
-  /* Slight optical centering adjustment */
-  transform: translateY(0.5px);
-  color: ${({ $type, $background }) => {
-	return ($background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS)[$type].text;
-}};
-`;
-const IconContainer = styled_components.default.span`
-  line-height: 0;
-  color: ${({ $iconColor }) => $iconColor};
-`;
-const LabelContainer = styled_components.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[1]};
-  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: ${({ $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`
-      background-color: ${($background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS)[$type].background};
-    `;
-}}
-`;
-/**
-* StatusIndicator displays semantic status information with a colored icon and label.
-* Supports both filled backgrounds and transparent styles.
-*
-* @example
-* ```tsx
-* <StatusIndicator status="active">Active</StatusIndicator>
-* <StatusIndicator type="success" background="filled">Approved</StatusIndicator>
-* <StatusIndicator type="critical" background="none">Failed</StatusIndicator>
-* ```
-*/
-const StatusIndicator = ({ status, type, background = "filled", showIcon = true, leadingIcon, truncate = false, preserveCase = false, children, ...props }) => {
-	const resolvedType = type ?? (status != null ? STATUS_CONFIG[status].type : "neutral");
-	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: 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[resolvedType].icon,
-				children: iconToRender
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-				$type: resolvedType,
-				$background: background,
-				$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;
-
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"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 +0,0 @@
-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/Sticker/index.cjs

@@ -1,11 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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;
-exports.StickerContentContainer = require_Sticker.StickerContentContainer;
-exports.StyledTruncatedText = require_Sticker.StyledTruncatedText;
-exports.default = require_Sticker.Sticker;

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

@@ -1,2 +0,0 @@
-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/SwatchPicker/index.cjs

@@ -1,63 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_chunk = require("../../chunk-CKQMccvm.cjs");
-require("../../variables/effect.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");
-//#region components/SwatchPicker/SwatchPicker.tsx
-const SwatchGrid = styled_components.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: ${_persona_design_tokens.Spacing[1]};
-`;
-const SwatchPicker = ({ value, onChange, colors, ...restProps }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwatchGrid, {
-		...restProps,
-		children: colors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, {
-			color,
-			selected: color === value,
-			onSelect: onChange
-		}, color))
-	});
-};
-const ColorSwatch = styled_components.default.button`
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  background-color: ${({ $color }) => $color ?? "transparent"};
-  border-radius: ${_persona_design_tokens.BorderRadius.Circle};
-  border: 2px solid ${_persona_design_tokens.Color.PrimaryWhite};
-  transition: all 100ms ease-out;
-  cursor: pointer;
-  ${({ selected }) => selected ? `outline: 2px solid ${_persona_design_tokens.Color.BorderIconActive}` : ""};
-
-  &:hover {
-    box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
-  }
-`;
-const WhiteSwatch = (0, styled_components.default)(ColorSwatch)`
-  border-color: ${_persona_design_tokens.Color.BorderHairline};
-`;
-const Swatch = ({ color, selected, onSelect }) => {
-	return color.toUpperCase() === "#FFFFFF" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WhiteSwatch, {
-		selected,
-		title: "#FFFFFF",
-		onClick: () => onSelect(color)
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSwatch, {
-		$color: color,
-		selected,
-		title: color,
-		onClick: () => onSelect(color)
-	});
-};
-//#endregion
-exports.SwatchPicker = SwatchPicker;
-exports.default = SwatchPicker;
-
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["Spacing","BorderRadius","Color"],"sources":["../../../components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { Elevation } from 'design-system/variables/effect';\n\nconst SwatchGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: ${Spacing[1]};\n`;\n\nexport interface SwatchPickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {\n  value: string;\n  onChange: (color: string) => void;\n  colors: string[];\n}\n\nexport const SwatchPicker = ({ value, onChange, colors, ...restProps }: SwatchPickerProps) => {\n  return (\n    <SwatchGrid {...restProps}>\n      {colors.map((color) => (\n        <Swatch key={color} color={color} selected={color === value} onSelect={onChange} />\n      ))}\n    </SwatchGrid>\n  );\n};\n\nconst ColorSwatch = styled.button<{ selected: boolean; $color?: string }>`\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background-color: ${({ $color }) => $color ?? 'transparent'};\n  border-radius: ${BorderRadius.Circle};\n  border: 2px solid ${Color.PrimaryWhite};\n  transition: all 100ms ease-out;\n  cursor: pointer;\n  ${({ selected }) => (selected ? `outline: 2px solid ${Color.BorderIconActive}` : '')};\n\n  &:hover {\n    box-shadow: ${Elevation.Low};\n  }\n`;\n\nconst WhiteSwatch = styled(ColorSwatch)`\n  border-color: ${Color.BorderHairline};\n`;\n\ninterface SwatchProps {\n  color: string;\n  selected: boolean;\n  onSelect: (color: string) => void;\n}\n\nconst Swatch = ({ color, selected, onSelect }: SwatchProps) => {\n  // NOTE: This is a hack to get the white color to show up. In theory we may want to do this\n  // for all colors close to white, but this gets the job done for now.\n  return color.toUpperCase() === '#FFFFFF' ? (\n    <WhiteSwatch selected={selected} title='#FFFFFF' onClick={() => onSelect(color)} />\n  ) : (\n    <ColorSwatch $color={color} selected={selected} title={color} onClick={() => onSelect(color)} />\n  );\n};\n\nexport default SwatchPicker;\n"],"mappings":";;;;;;;;;;;AAMA,MAAM,aAAa,kBAAA,QAAO,GAAG;;;;SAIpBA,uBAAAA,QAAQ,GAAG;;AASpB,MAAa,gBAAgB,EAAE,OAAO,UAAU,QAAQ,GAAG,gBAAmC;AAC5F,QACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EAAY,GAAI;YACb,OAAO,KAAK,UACX,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAA2B;GAAO,UAAU,UAAU;GAAO,UAAU;GAAY,EAAtE,MAAsE,CACnF;EACS,CAAA;;AAIjB,MAAM,cAAc,kBAAA,QAAO,MAA8C;;;;;uBAKlD,EAAE,aAAa,UAAU,cAAc;mBAC3CC,uBAAAA,aAAa,OAAO;sBACjBC,uBAAAA,MAAM,aAAa;;;KAGpC,EAAE,eAAgB,WAAW,sBAAsBA,uBAAAA,MAAM,qBAAqB,GAAI;;;oIAGvD;;;AAIhC,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAO,YAAY;kBACrBA,uBAAAA,MAAM,eAAe;;AASvC,MAAM,UAAU,EAAE,OAAO,UAAU,eAA4B;AAG7D,QAAO,MAAM,aAAa,KAAK,YAC7B,iBAAA,GAAA,kBAAA,KAAC,aAAD;EAAuB;EAAU,OAAM;EAAU,eAAe,SAAS,MAAM;EAAI,CAAA,GAEnF,iBAAA,GAAA,kBAAA,KAAC,aAAD;EAAa,QAAQ;EAAiB;EAAU,OAAO;EAAO,eAAe,SAAS,MAAM;EAAI,CAAA"}

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

@@ -1,2 +0,0 @@
-import { SwatchPicker } from "../../SwatchPicker.cjs";
-export { SwatchPicker, SwatchPicker as default };

package/dist/components/TabBar/index.cjs

@@ -1,11 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_TabBar = require("../../TabBar-PFaDNRw0.cjs");
-exports.StyledTab = require_TabBar.StyledTab;
-exports.Tab = require_TabBar.Tab;
-exports.TabBar = require_TabBar.TabBar;
-exports.TabBarIconButton = require_TabBar.TabBarIconButton_default;
-exports.TabContainer = require_TabBar.TabContainer;
-exports.default = require_TabBar.TabBar;

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

@@ -1,4 +0,0 @@
-import Tab, { StyledTab } from "../../Tab.cjs";
-import { TabBar, TabBarProps, TabContainer } from "../../TabBar.cjs";
-import _default from "../../TabBarIconButton.cjs";
-export { StyledTab, Tab, TabBar, TabBar as default, _default as TabBarIconButton, TabBarProps, TabContainer };

package/dist/components/Table/index.cjs

@@ -1,21 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_Table = require("../../Table-DxLvJYWK.cjs");
-exports.StickyTD = require_Table.StickyTD;
-exports.StickyTH = require_Table.StickyTH;
-exports.Table = require_Table.Table;
-exports.TableActionTD = require_Table.TableActionTD;
-exports.TableBody = require_Table.TableBody;
-exports.TableCell = require_Table.TableCell;
-exports.TableCellTitle = require_Table.TableCellTitle;
-exports.TableHead = require_Table.TableHead;
-exports.TableHeaderCell = require_Table.TableHeaderCell;
-exports.TableIconTD = require_Table.TableIconTD;
-exports.TableLayout = require_Table.TableLayout;
-exports.TableRow = require_Table.TableRow;
-exports.TableTD = require_Table.TableTD;
-exports.TableTH = require_Table.TableTH;
-exports.TableTR = require_Table.TableTR;
-exports.default = require_Table.Table;

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

@@ -1,8 +0,0 @@
-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/TableBox/index.cjs

@@ -1,7 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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 +0,0 @@
-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/TechnicalSticker/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["Typography","Color","BorderRadius","Spacing","MiddleTruncatedText","isHovered","useToggle","copyTextToClipboard","Tooltip","CopyIcon"],"sources":["../../../components/TechnicalSticker/TechnicalSticker.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons/12px';\nimport Tooltip from 'design-system/components/Tooltip';\nimport copyTextToClipboard from 'design-system/lib/copyTextToClipboard';\nimport MiddleTruncatedText from 'design-system/lib/MiddleTruncatedText';\nimport { isHovered } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\n\nexport type TechnicalStickerVariant = 'grey' | 'white';\n\nconst COPY_CONFIRMATION_TEXT = 'Copied!';\nconst COPY_CONFIRMATION_DURATION_MS = 1200;\nconst DEFAULT_COPY_TOOLTIP_LABEL = 'Copy ID';\nconst HREF_VALIDATION_BASE_URL = 'https://withpersona.com';\nconst TECHNICAL_TEXT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\n\nconst technicalStickerBackgrounds: Record<TechnicalStickerVariant, string> = {\n  grey: Color.BackgroundLabelGrey,\n  white: Color.BackgroundLabelWhite,\n};\n\nconst technicalStickerHoverBackgrounds: Record<TechnicalStickerVariant, string> = {\n  grey: Color.BackgroundLabelGreyHover,\n  white: Color.BackgroundButtonInverseHover,\n};\n\nconst isSafeTechnicalStickerHref = (href: string) => {\n  try {\n    const url = new URL(href, HREF_VALIDATION_BASE_URL);\n    return url.protocol === 'http:' || url.protocol === 'https:';\n  } catch {\n    return false;\n  }\n};\n\nconst TechnicalStickerShell = styled.div<{\n  variant: TechnicalStickerVariant;\n  disabled?: boolean;\n  $width?: number | string;\n}>`\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  width: ${({ $width }) => (typeof $width === 'number' ? `${$width}px` : ($width ?? 'auto'))};\n  max-width: 100%;\n  box-sizing: border-box;\n\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.color.text.disabled : theme.color.text.primary};\n  background: ${({ variant }) => technicalStickerBackgrounds[variant]};\n\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${Color.BorderInputDefault};\n\n  ${({ variant, disabled }) =>\n    !disabled &&\n    css`\n      &:hover {\n        background: ${technicalStickerHoverBackgrounds[variant]};\n      }\n    `}\n`;\n\nconst labelContainerStyles = css`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 ${Spacing[1]};\n`;\n\nconst LabelContainer = styled.div`\n  ${labelContainerStyles}\n`;\n\nconst LabelLink = styled.a`\n  ${labelContainerStyles}\n  color: inherit;\n  text-decoration: none;\n`;\n\nconst TechnicalText = styled(MiddleTruncatedText)<{\n  $isLinkEnabled: boolean;\n  $isTruncated: boolean;\n}>`\n  ${Typography.TextMono};\n  font-size: ${Typography.TextExtraSmall.fontSize};\n  line-height: ${Typography.TextExtraSmall.lineHeight};\n  text-align: center;\n\n  ${({ $isLinkEnabled, $isTruncated }) =>\n    $isTruncated &&\n    css`\n      cursor: ${$isLinkEnabled ? 'pointer' : 'default'};\n      user-select: none;\n\n      & > span {\n        user-select: none;\n      }\n    `}\n`;\n\nconst CopyActions = styled.div<{ $visible: boolean }>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  height: 16px;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};\n  transition: opacity 120ms ease-in-out;\n\n  &:focus-within {\n    opacity: 1;\n    pointer-events: auto;\n  }\n`;\n\nconst CopyGradient = styled.div<{ $background: string }>`\n  width: 8px;\n  height: 16px;\n  background: linear-gradient(to left, ${({ $background }) => $background}, transparent);\n`;\n\nconst CopyButton = styled.button<{ $background: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0 2px 0 0;\n  border: none;\n  background: ${({ $background }) => $background};\n  color: ${Color.BorderIconPrimary};\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &${isHovered}:not(:disabled) {\n    color: ${Color.TextPrimary};\n  }\n`;\n\nexport interface TechnicalStickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Full untruncated technical value displayed in the sticker. */\n  children: string;\n  /** Visual style for the technical sticker. Default: `grey`. */\n  variant?: TechnicalStickerVariant;\n  /** Renders disabled style and disables copy/link interaction. */\n  disabled?: boolean;\n  /** Opens in a new tab when the sticker body is clicked. */\n  href?: string;\n  /**\n   * Hover tooltip for the sticker body. Shown when text is truncated or when set explicitly.\n   * Defaults to the untruncated `children` string when shown.\n   */\n  tooltipLabel?: string;\n  /**\n   * Hover tooltip for the copy icon.\n   * Defaults to `Copy ID`.\n   */\n  copyTooltipLabel?: string;\n  /** Whether to show the hover copy action. Default: true. */\n  copyable?: boolean;\n  /** Value copied to the clipboard. Defaults to `children`. */\n  copyValue?: string;\n  /** Width of the sticker. Numbers are interpreted as pixels. */\n  width?: number | string;\n  /** Max width for middle truncation. Default: '96px'. */\n  maxWidth?: number | string;\n}\n\nexport const TechnicalSticker = ({\n  variant = 'grey',\n  href,\n  tooltipLabel: tooltipLabelProp,\n  copyTooltipLabel = DEFAULT_COPY_TOOLTIP_LABEL,\n  copyable = true,\n  copyValue,\n  width,\n  maxWidth = '96px',\n  children,\n  disabled,\n  onMouseEnter,\n  onMouseLeave,\n  ...stickerProps\n}: TechnicalStickerProps) => {\n  const [isHoveredState, setIsHoveredState] = useState(false);\n  const [isCopyButtonFocused, setIsCopyButtonFocused] = useState(false);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [isCopyTooltipOpen, setIsCopyTooltipOpen] = useState(false);\n  const [copyConfirmationOpen, { enable: showCopyConfirmation, disable: hideCopyConfirmation }] =\n    useToggle(false);\n  const copyConfirmationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const tooltipLabel = tooltipLabelProp ?? children;\n  const hasCustomTooltipLabel = tooltipLabelProp != null;\n\n  const hoverBackground = technicalStickerHoverBackgrounds[variant];\n  const copyActionBackground = isHoveredState\n    ? hoverBackground\n    : technicalStickerBackgrounds[variant];\n  const showCopyActions =\n    copyable && !disabled && (isHoveredState || isCopyButtonFocused || copyConfirmationOpen);\n  const showStickerTooltip = tooltipLabel.length > 0 && (isTruncated || hasCustomTooltipLabel);\n  const isCopyTooltipVisible = isCopyTooltipOpen || copyConfirmationOpen;\n  const isLinkEnabled = href != null && !disabled && isSafeTechnicalStickerHref(href);\n\n  const handleCopyTooltipOpenChange = useCallback(\n    (open: boolean) => {\n      if (copyConfirmationOpen) {\n        return;\n      }\n\n      setIsCopyTooltipOpen(open);\n    },\n    [copyConfirmationOpen],\n  );\n\n  const handleCopy = useCallback(\n    async (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        return;\n      }\n\n      const copyWasSuccessful = await copyTextToClipboard(copyValue ?? children);\n      if (!copyWasSuccessful) {\n        return;\n      }\n\n      setIsCopyTooltipOpen(true);\n      showCopyConfirmation();\n      if (copyConfirmationTimerRef.current) {\n        clearTimeout(copyConfirmationTimerRef.current);\n      }\n      copyConfirmationTimerRef.current = setTimeout(() => {\n        setIsCopyTooltipOpen(false);\n        hideCopyConfirmation();\n        copyConfirmationTimerRef.current = null;\n      }, COPY_CONFIRMATION_DURATION_MS);\n    },\n    [children, copyValue, disabled, hideCopyConfirmation, showCopyConfirmation],\n  );\n\n  useEffect(\n    () => () => {\n      if (copyConfirmationTimerRef.current) {\n        clearTimeout(copyConfirmationTimerRef.current);\n      }\n    },\n    [],\n  );\n\n  const technicalText = (\n    <TechnicalText\n      value={children}\n      maxWidth={width ?? maxWidth}\n      font={TECHNICAL_TEXT_FONT}\n      onTruncatedChange={setIsTruncated}\n      titleBehavior='never'\n      $isLinkEnabled={isLinkEnabled}\n      $isTruncated={isTruncated}\n    />\n  );\n\n  const labelContent = isLinkEnabled ? (\n    <LabelLink href={href} target='_blank' rel='noopener noreferrer'>\n      {technicalText}\n    </LabelLink>\n  ) : (\n    <LabelContainer>{technicalText}</LabelContainer>\n  );\n\n  const labelWithTooltip = showStickerTooltip ? (\n    <Tooltip trigger={labelContent} interactive side='top' maxWidth='400px'>\n      {tooltipLabel}\n    </Tooltip>\n  ) : (\n    labelContent\n  );\n\n  return (\n    <TechnicalStickerShell\n      {...stickerProps}\n      variant={variant}\n      disabled={disabled}\n      $width={width}\n      onMouseEnter={(event) => {\n        onMouseEnter?.(event);\n        setIsHoveredState(true);\n      }}\n      onMouseLeave={(event) => {\n        onMouseLeave?.(event);\n        setIsHoveredState(false);\n      }}\n    >\n      {labelWithTooltip}\n      {copyable && (\n        <CopyActions $visible={showCopyActions}>\n          <CopyGradient $background={copyActionBackground} />\n          <Tooltip\n            open={isCopyTooltipVisible}\n            onOpenChange={handleCopyTooltipOpenChange}\n            trigger={\n              <CopyButton\n                type='button'\n                aria-label='Copy'\n                disabled={disabled}\n                $background={copyActionBackground}\n                onClick={handleCopy}\n                onBlur={() => setIsCopyButtonFocused(false)}\n                onFocus={() => setIsCopyButtonFocused(true)}\n              >\n                <CopyIcon />\n              </CopyButton>\n            }\n            interactive={false}\n            side='top'\n          >\n            {copyConfirmationOpen ? COPY_CONFIRMATION_TEXT : copyTooltipLabel}\n          </Tooltip>\n        </CopyActions>\n      )}\n    </TechnicalStickerShell>\n  );\n};\n\nexport default TechnicalSticker;\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import { TechnicalSticker, TechnicalStickerProps, TechnicalStickerVariant } from "../../TechnicalSticker.cjs";
-export { TechnicalSticker, TechnicalSticker as default, type TechnicalStickerProps, type TechnicalStickerVariant };

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/TechnicalSticker/TechnicalSticker.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons/12px';\nimport Tooltip from 'design-system/components/Tooltip';\nimport copyTextToClipboard from 'design-system/lib/copyTextToClipboard';\nimport MiddleTruncatedText from 'design-system/lib/MiddleTruncatedText';\nimport { isHovered } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\n\nexport type TechnicalStickerVariant = 'grey' | 'white';\n\nconst COPY_CONFIRMATION_TEXT = 'Copied!';\nconst COPY_CONFIRMATION_DURATION_MS = 1200;\nconst DEFAULT_COPY_TOOLTIP_LABEL = 'Copy ID';\nconst HREF_VALIDATION_BASE_URL = 'https://withpersona.com';\nconst TECHNICAL_TEXT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\n\nconst technicalStickerBackgrounds: Record<TechnicalStickerVariant, string> = {\n  grey: Color.BackgroundLabelGrey,\n  white: Color.BackgroundLabelWhite,\n};\n\nconst technicalStickerHoverBackgrounds: Record<TechnicalStickerVariant, string> = {\n  grey: Color.BackgroundLabelGreyHover,\n  white: Color.BackgroundButtonInverseHover,\n};\n\nconst isSafeTechnicalStickerHref = (href: string) => {\n  try {\n    const url = new URL(href, HREF_VALIDATION_BASE_URL);\n    return url.protocol === 'http:' || url.protocol === 'https:';\n  } catch {\n    return false;\n  }\n};\n\nconst TechnicalStickerShell = styled.div<{\n  variant: TechnicalStickerVariant;\n  disabled?: boolean;\n  $width?: number | string;\n}>`\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  width: ${({ $width }) => (typeof $width === 'number' ? `${$width}px` : ($width ?? 'auto'))};\n  max-width: 100%;\n  box-sizing: border-box;\n\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.color.text.disabled : theme.color.text.primary};\n  background: ${({ variant }) => technicalStickerBackgrounds[variant]};\n\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${Color.BorderInputDefault};\n\n  ${({ variant, disabled }) =>\n    !disabled &&\n    css`\n      &:hover {\n        background: ${technicalStickerHoverBackgrounds[variant]};\n      }\n    `}\n`;\n\nconst labelContainerStyles = css`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 ${Spacing[1]};\n`;\n\nconst LabelContainer = styled.div`\n  ${labelContainerStyles}\n`;\n\nconst LabelLink = styled.a`\n  ${labelContainerStyles}\n  color: inherit;\n  text-decoration: none;\n`;\n\nconst TechnicalText = styled(MiddleTruncatedText)<{\n  $isLinkEnabled: boolean;\n  $isTruncated: boolean;\n}>`\n  ${Typography.TextMono};\n  font-size: ${Typography.TextExtraSmall.fontSize};\n  line-height: ${Typography.TextExtraSmall.lineHeight};\n  text-align: center;\n\n  ${({ $isLinkEnabled, $isTruncated }) =>\n    $isTruncated &&\n    css`\n      cursor: ${$isLinkEnabled ? 'pointer' : 'default'};\n      user-select: none;\n\n      & > span {\n        user-select: none;\n      }\n    `}\n`;\n\nconst CopyActions = styled.div<{ $visible: boolean }>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  height: 16px;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};\n  transition: opacity 120ms ease-in-out;\n\n  &:focus-within {\n    opacity: 1;\n    pointer-events: auto;\n  }\n`;\n\nconst CopyGradient = styled.div<{ $background: string }>`\n  width: 8px;\n  height: 16px;\n  background: linear-gradient(to left, ${({ $background }) => $background}, transparent);\n`;\n\nconst CopyButton = styled.button<{ $background: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0 2px 0 0;\n  border: none;\n  background: ${({ $background }) => $background};\n  color: ${Color.BorderIconPrimary};\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &${isHovered}:not(:disabled) {\n    color: ${Color.TextPrimary};\n  }\n`;\n\nexport interface TechnicalStickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Full untruncated technical value displayed in the sticker. */\n  children: string;\n  /** Visual style for the technical sticker. Default: `grey`. */\n  variant?: TechnicalStickerVariant;\n  /** Renders disabled style and disables copy/link interaction. */\n  disabled?: boolean;\n  /** Opens in a new tab when the sticker body is clicked. */\n  href?: string;\n  /**\n   * Hover tooltip for the sticker body. Shown when text is truncated or when set explicitly.\n   * Defaults to the untruncated `children` string when shown.\n   */\n  tooltipLabel?: string;\n  /**\n   * Hover tooltip for the copy icon.\n   * Defaults to `Copy ID`.\n   */\n  copyTooltipLabel?: string;\n  /** Whether to show the hover copy action. Default: true. */\n  copyable?: boolean;\n  /** Value copied to the clipboard. Defaults to `children`. */\n  copyValue?: string;\n  /** Width of the sticker. Numbers are interpreted as pixels. */\n  width?: number | string;\n  /** Max width for middle truncation. Default: '96px'. */\n  maxWidth?: number | string;\n}\n\nexport const TechnicalSticker = ({\n  variant = 'grey',\n  href,\n  tooltipLabel: tooltipLabelProp,\n  copyTooltipLabel = DEFAULT_COPY_TOOLTIP_LABEL,\n  copyable = true,\n  copyValue,\n  width,\n  maxWidth = '96px',\n  children,\n  disabled,\n  onMouseEnter,\n  onMouseLeave,\n  ...stickerProps\n}: TechnicalStickerProps) => {\n  const [isHoveredState, setIsHoveredState] = useState(false);\n  const [isCopyButtonFocused, setIsCopyButtonFocused] = useState(false);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [isCopyTooltipOpen, setIsCopyTooltipOpen] = useState(false);\n  const [copyConfirmationOpen, { enable: showCopyConfirmation, disable: hideCopyConfirmation }] =\n    useToggle(false);\n  const copyConfirmationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const tooltipLabel = tooltipLabelProp ?? children;\n  const hasCustomTooltipLabel = tooltipLabelProp != null;\n\n  const hoverBackground = technicalStickerHoverBackgrounds[variant];\n  const copyActionBackground = isHoveredState\n    ? hoverBackground\n    : technicalStickerBackgrounds[variant];\n  const showCopyActions =\n    copyable && !disabled && (isHoveredState || isCopyButtonFocused || copyConfirmationOpen);\n  const showStickerTooltip = tooltipLabel.length > 0 && (isTruncated || hasCustomTooltipLabel);\n  const isCopyTooltipVisible = isCopyTooltipOpen || copyConfirmationOpen;\n  const isLinkEnabled = href != null && !disabled && isSafeTechnicalStickerHref(href);\n\n  const handleCopyTooltipOpenChange = useCallback(\n    (open: boolean) => {\n      if (copyConfirmationOpen) {\n        return;\n      }\n\n      setIsCopyTooltipOpen(open);\n    },\n    [copyConfirmationOpen],\n  );\n\n  const handleCopy = useCallback(\n    async (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        return;\n      }\n\n      const copyWasSuccessful = await copyTextToClipboard(copyValue ?? children);\n      if (!copyWasSuccessful) {\n        return;\n      }\n\n      setIsCopyTooltipOpen(true);\n      showCopyConfirmation();\n      if (copyConfirmationTimerRef.current) {\n        clearTimeout(copyConfirmationTimerRef.current);\n      }\n      copyConfirmationTimerRef.current = setTimeout(() => {\n        setIsCopyTooltipOpen(false);\n        hideCopyConfirmation();\n        copyConfirmationTimerRef.current = null;\n      }, COPY_CONFIRMATION_DURATION_MS);\n    },\n    [children, copyValue, disabled, hideCopyConfirmation, showCopyConfirmation],\n  );\n\n  useEffect(\n    () => () => {\n      if (copyConfirmationTimerRef.current) {\n        clearTimeout(copyConfirmationTimerRef.current);\n      }\n    },\n    [],\n  );\n\n  const technicalText = (\n    <TechnicalText\n      value={children}\n      maxWidth={width ?? maxWidth}\n      font={TECHNICAL_TEXT_FONT}\n      onTruncatedChange={setIsTruncated}\n      titleBehavior='never'\n      $isLinkEnabled={isLinkEnabled}\n      $isTruncated={isTruncated}\n    />\n  );\n\n  const labelContent = isLinkEnabled ? (\n    <LabelLink href={href} target='_blank' rel='noopener noreferrer'>\n      {technicalText}\n    </LabelLink>\n  ) : (\n    <LabelContainer>{technicalText}</LabelContainer>\n  );\n\n  const labelWithTooltip = showStickerTooltip ? (\n    <Tooltip trigger={labelContent} interactive side='top' maxWidth='400px'>\n      {tooltipLabel}\n    </Tooltip>\n  ) : (\n    labelContent\n  );\n\n  return (\n    <TechnicalStickerShell\n      {...stickerProps}\n      variant={variant}\n      disabled={disabled}\n      $width={width}\n      onMouseEnter={(event) => {\n        onMouseEnter?.(event);\n        setIsHoveredState(true);\n      }}\n      onMouseLeave={(event) => {\n        onMouseLeave?.(event);\n        setIsHoveredState(false);\n      }}\n    >\n      {labelWithTooltip}\n      {copyable && (\n        <CopyActions $visible={showCopyActions}>\n          <CopyGradient $background={copyActionBackground} />\n          <Tooltip\n            open={isCopyTooltipVisible}\n            onOpenChange={handleCopyTooltipOpenChange}\n            trigger={\n              <CopyButton\n                type='button'\n                aria-label='Copy'\n                disabled={disabled}\n                $background={copyActionBackground}\n                onClick={handleCopy}\n                onBlur={() => setIsCopyButtonFocused(false)}\n                onFocus={() => setIsCopyButtonFocused(true)}\n              >\n                <CopyIcon />\n              </CopyButton>\n            }\n            interactive={false}\n            side='top'\n          >\n            {copyConfirmationOpen ? COPY_CONFIRMATION_TEXT : copyTooltipLabel}\n          </Tooltip>\n        </CopyActions>\n      )}\n    </TechnicalStickerShell>\n  );\n};\n\nexport default TechnicalSticker;\n"],"mappings":"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"}

package/dist/components/Text/index.cjs

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

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

@@ -1,2 +0,0 @@
-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-CrGiWG2E.cjs";
-export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/components/TextArea/index.cjs

@@ -1,7 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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 +0,0 @@
-import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-CHW9FKM4.cjs";
-export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/components/Tile/index.cjs

@@ -1,102 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_chunk = require("../../chunk-CKQMccvm.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);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_icons_12px = require("@persona/icons/12px");
-let _persona_icons_16px = require("@persona/icons/16px");
-//#region components/Tile/Tile.tsx
-const PADDING_BY_SIZE = {
-	sm: _persona_design_tokens.Spacing[3],
-	md: _persona_design_tokens.Spacing[4]
-};
-const TileContainer = (0, styled_components.default)(require_Stack.Stack)`
-  background-color: ${({ theme }) => theme.color.background.primary};
-  box-sizing: border-box;
-  width: 100%;
-  max-width: ${"220px"};
-  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};
-  border: 1px solid ${({ theme }) => theme.color.border.primary};
-  border-radius: ${({ theme }) => theme.card.borderRadius};
-`;
-const TransitionArrow = styled_components.default.span`
-  display: inline-flex;
-  align-items: center;
-  color: ${_persona_design_tokens.Color.BorderIconSecondary};
-  line-height: 0;
-`;
-const Tile = ({ size = "md", label, labelTooltip, value, sticker, metadata, metadataTooltip, ...props }) => {
-	const labelNode = labelTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextUnderlineTooltip, {
-		tooltip: labelTooltip,
-		side: "top",
-		children: label
-	}) : label;
-	const metadataNode = metadata != null && metadataTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextUnderlineTooltip, {
-		tooltip: metadataTooltip,
-		children: metadata
-	}) : metadata;
-	const { text: stickerText, ...stickerRest } = sticker ?? { text: "" };
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TileContainer, {
-		$size: size,
-		spacing: _persona_design_tokens.Spacing[1],
-		...props,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
-				size,
-				color: "secondary",
-				as: "div",
-				children: labelNode
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
-				spacing: _persona_design_tokens.Spacing[2],
-				align: "center",
-				children: [Array.isArray(value) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
-						size,
-						color: "primary",
-						as: "p",
-						children: value[0]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransitionArrow, {
-						"data-test": "tile-transition-arrow",
-						"aria-hidden": "true",
-						children: size === "sm" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.ArrowRightIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_16px.ArrowRightIcon, {})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
-						size,
-						color: "primary",
-						as: "p",
-						children: value[1]
-					})
-				] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
-					size,
-					color: "primary",
-					as: "p",
-					children: value
-				}), sticker != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-					...stickerRest,
-					children: stickerText
-				})]
-			}),
-			metadata != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
-				size: "sm",
-				color: "secondary",
-				as: "div",
-				children: metadataNode
-			})
-		]
-	});
-};
-//#endregion
-exports.Tile = Tile;
-exports.default = Tile;
-
-//# sourceMappingURL=index.cjs.map