@persona/design-system 0.5.0 → 0.5.1

package/dist/variables/semantic.mjs

@@ -0,0 +1,241 @@
+import { Color } from "@persona/design-tokens";
+//#region variables/semantic.ts
+const CoreSlate1150 = "#262626";
+const CoreSlate1200 = "#1F1F1F";
+const CoreSlate1300 = "#181818";
+const semanticLight = {
+	ActionAccent: Color.CorePurple100,
+	ActionDanger: Color.CoreRed700,
+	ActionDangerActive: Color.CoreRed900,
+	ActionDangerDisabled: Color.CoreRed400,
+	ActionDangerHover: Color.CoreRed800,
+	ActionInverse: Color.PrimaryWhite,
+	ActionInverseActive: Color.CoreSlate300,
+	ActionInverseHover: Color.CoreSlate100,
+	ActionNeutral: Color.CoreSlate100,
+	ActionNeutralActive: Color.CoreSlate400,
+	ActionNeutralHover: Color.CoreSlate200,
+	ActionOutlineActive: Color.CoreSlate300,
+	ActionOutlineHover: Color.CoreSlate100,
+	ActionPrimary: Color.CorePurple600,
+	ActionPrimaryActive: Color.CorePurple900,
+	ActionPrimaryHover: Color.CorePurple800,
+	BorderAccent: Color.CorePurple600,
+	BorderDanger: Color.CoreRed600,
+	BorderDefault: Color.CoreSlate300,
+	BorderDivider: Color.CoreSlate100,
+	BorderFocus: Color.CoreBlue600,
+	BorderHover: Color.CoreSlate1000,
+	BorderSubtle: Color.CoreSlate200,
+	BorderWarning: Color.CoreOrange700,
+	FeedbackAccent1: Color.CorePurple200,
+	FeedbackAccent1Static: Color.CorePurple200,
+	FeedbackAccent2: Color.CorePurple400,
+	FeedbackAccent3: Color.CorePurple600,
+	FeedbackDanger1: Color.CoreRed100,
+	FeedbackDanger2: Color.CoreRed400,
+	FeedbackDanger3: Color.CoreRed600,
+	FeedbackDanger4: Color.CoreRed800,
+	FeedbackHighlight1: Color.CoreYellow500,
+	FeedbackHighlight2: Color.CoreYellow800,
+	FeedbackInfo1: Color.CoreBlue100,
+	FeedbackInfo2: Color.CoreBlue400,
+	FeedbackInfo3: Color.CoreBlue600,
+	FeedbackMisc1: Color.CoreTeal500,
+	FeedbackMisc2: Color.CoreTeal800,
+	FeedbackNeutral1: Color.CoreSlate100,
+	FeedbackNeutral2: Color.CoreSlate200,
+	FeedbackNeutral2Static: Color.CoreSlate200,
+	FeedbackNeutral3: Color.CoreSlate300,
+	FeedbackNeutral4: Color.CoreSlate700,
+	FeedbackNeutral5: Color.CoreSlate800,
+	FeedbackNeutralInverse: Color.PrimaryWhite,
+	FeedbackSuccess1: Color.CoreGreen100,
+	FeedbackSuccess2: Color.CoreGreen500,
+	FeedbackSuccess3: Color.CoreGreen700,
+	FeedbackWarning1: Color.CoreOrange100,
+	FeedbackWarning2: Color.CoreOrange500,
+	FeedbackWarning3: Color.CoreOrange700,
+	FgAccent: Color.CorePurple700,
+	FgAccentActive: Color.CorePurple900,
+	FgAccentHover: Color.CorePurple800,
+	FgAccentStatic: Color.CorePurple600,
+	FgDanger1: Color.CoreRed800,
+	FgDanger2: Color.CoreRed1000,
+	FgDisabled: Color.CoreSlate500,
+	FgFeature: Color.CorePurple1000,
+	FgHighlight: Color.CoreYellow1000,
+	FgInfo: Color.CoreBlue1000,
+	FgInverse: Color.PrimaryWhite,
+	FgInverseStatic: Color.PrimaryWhite,
+	FgMisc: Color.CoreTeal1000,
+	FgPrimary: Color.CoreSlate1100,
+	FgPrimaryStatic: Color.CoreSlate1100,
+	FgSecondary: Color.CoreSlate800,
+	FgSecondaryStatic: Color.CoreSlate800,
+	FgSuccess: Color.CoreGreen1000,
+	FgTertiary: Color.CoreSlate700,
+	FgWarning1: Color.CoreOrange900,
+	FgWarning2: Color.CoreOrange1000,
+	InputBorderAccent: Color.CoreBlue700,
+	InputBorderDefault: Color.CoreSlate300,
+	InputBorderDisabled: Color.CoreSlate300,
+	InputBorderHover: Color.CoreSlate500,
+	InputBorderHoverStrong: Color.CoreSlate1000,
+	InputBorderStrong: Color.CoreSlate800,
+	InputSurfaceAccent: Color.CoreBlue700,
+	InputSurfaceAccentDisabled: Color.CoreBlue300,
+	InputSurfaceAccentHover: Color.CoreBlue800,
+	InputSurfaceDefault: Color.PrimaryWhite,
+	InputSurfaceDisabled: Color.CoreSlate100,
+	InputSurfaceHover: Color.PrimaryWhite,
+	InputSurfaceInverseStatic: Color.PrimaryWhite,
+	Opacity15: "100%",
+	Opacity25: "100%",
+	Opacity65: "65%",
+	StatusDanger1Static: Color.CoreRed100,
+	StatusDanger2: Color.CoreRed200,
+	StatusDanger3: Color.CoreRed300,
+	StatusDanger4: Color.CoreRed600,
+	StatusFeature: Color.CorePurple300,
+	StatusHighlight: Color.CoreYellow400,
+	StatusInfo1: Color.CoreBlue200,
+	StatusInfo2: Color.CoreBlue300,
+	StatusInfo3: Color.CoreBlue700,
+	StatusMisc: Color.CoreTeal300,
+	StatusNeutral: Color.CoreSlate200,
+	StatusSuccess1: Color.CoreGreen200,
+	StatusSuccess2: Color.CoreGreen300,
+	StatusSuccess3: Color.CoreGreen800,
+	StatusWarning: Color.CoreOrange300,
+	SurfaceAccent: Color.CorePurple100,
+	SurfaceAccentStatic: Color.CorePurple100,
+	SurfaceElevated: Color.PrimaryWhite,
+	SurfaceHover: Color.CoreSlate50,
+	SurfaceInset: Color.CoreSlate300,
+	SurfacePage: Color.CoreSlate50,
+	SurfacePrimary: Color.PrimaryWhite,
+	SurfaceSecondary: Color.CoreSlate50,
+	SurfaceSubtle: Color.CoreSlate50,
+	SurfaceTertiary: Color.CoreSlate100
+};
+const semanticDark = {
+	ActionAccent: Color.CorePurple500,
+	ActionDanger: Color.CoreRed400,
+	ActionDangerActive: Color.CoreRed200,
+	ActionDangerDisabled: Color.CoreRed400,
+	ActionDangerHover: Color.CoreRed300,
+	ActionInverse: Color.CoreSlate700,
+	ActionInverseActive: Color.CoreSlate500,
+	ActionInverseHover: Color.CoreSlate600,
+	ActionNeutral: Color.CoreSlate1100,
+	ActionNeutralActive: Color.CoreSlate900,
+	ActionNeutralHover: Color.CoreSlate1000,
+	ActionOutlineActive: Color.CoreSlate1100,
+	ActionOutlineHover: CoreSlate1200,
+	ActionPrimary: Color.CorePurple400,
+	ActionPrimaryActive: Color.CorePurple200,
+	ActionPrimaryHover: Color.CorePurple300,
+	BorderAccent: Color.CorePurple500,
+	BorderDanger: Color.CoreRed500,
+	BorderDefault: Color.CoreSlate1000,
+	BorderDivider: Color.CoreSlate1100,
+	BorderFocus: Color.CoreBlue400,
+	BorderHover: Color.CoreSlate600,
+	BorderSubtle: Color.CoreSlate1100,
+	BorderWarning: Color.CoreOrange400,
+	FeedbackAccent1: Color.CorePurple400,
+	FeedbackAccent1Static: Color.CorePurple200,
+	FeedbackAccent2: Color.CorePurple400,
+	FeedbackAccent3: Color.CorePurple600,
+	FeedbackDanger1: Color.CoreRed600,
+	FeedbackDanger2: Color.CoreRed350,
+	FeedbackDanger3: Color.CoreRed500,
+	FeedbackDanger4: Color.CoreRed800,
+	FeedbackHighlight1: Color.CoreYellow400,
+	FeedbackHighlight2: Color.CoreYellow700,
+	FeedbackInfo1: Color.CoreBlue600,
+	FeedbackInfo2: Color.CoreBlue400,
+	FeedbackInfo3: Color.CoreBlue600,
+	FeedbackMisc1: Color.CoreTeal400,
+	FeedbackMisc2: Color.CoreTeal600,
+	FeedbackNeutral1: Color.CoreSlate1100,
+	FeedbackNeutral2: Color.CoreSlate1000,
+	FeedbackNeutral2Static: Color.CoreSlate200,
+	FeedbackNeutral3: CoreSlate1150,
+	FeedbackNeutral4: Color.CoreSlate1000,
+	FeedbackNeutral5: CoreSlate1200,
+	FeedbackNeutralInverse: CoreSlate1200,
+	FeedbackSuccess1: Color.CoreGreen700,
+	FeedbackSuccess2: Color.CoreGreen400,
+	FeedbackSuccess3: Color.CoreGreen600,
+	FeedbackWarning1: Color.CoreOrange600,
+	FeedbackWarning2: Color.CoreOrange400,
+	FeedbackWarning3: Color.CoreOrange600,
+	FgAccent: Color.CorePurple400,
+	FgAccentActive: Color.CorePurple200,
+	FgAccentHover: Color.CorePurple300,
+	FgAccentStatic: Color.CorePurple600,
+	FgDanger1: Color.CoreRed300,
+	FgDanger2: Color.CoreRed300,
+	FgDisabled: Color.CoreSlate900,
+	FgFeature: Color.CorePurple400,
+	FgHighlight: Color.CoreYellow300,
+	FgInfo: Color.CoreBlue350,
+	FgInverse: Color.CoreSlate1100,
+	FgInverseStatic: Color.PrimaryWhite,
+	FgMisc: Color.CoreTeal200,
+	FgPrimary: Color.CoreSlate400,
+	FgPrimaryStatic: Color.CoreSlate1100,
+	FgSecondary: Color.CoreSlate700,
+	FgSecondaryStatic: Color.CoreSlate800,
+	FgSuccess: Color.CoreGreen400,
+	FgTertiary: Color.CoreSlate500,
+	FgWarning1: Color.CoreOrange400,
+	FgWarning2: Color.CoreOrange400,
+	InputBorderAccent: Color.CoreBlue500,
+	InputBorderDefault: Color.CoreSlate1000,
+	InputBorderDisabled: Color.CoreSlate800,
+	InputBorderHover: Color.CoreSlate900,
+	InputBorderHoverStrong: Color.CoreSlate600,
+	InputBorderStrong: Color.CoreSlate800,
+	InputSurfaceAccent: Color.CoreBlue500,
+	InputSurfaceAccentDisabled: Color.CoreBlue500,
+	InputSurfaceAccentHover: Color.CoreBlue400,
+	InputSurfaceDefault: CoreSlate1200,
+	InputSurfaceDisabled: CoreSlate1200,
+	InputSurfaceHover: CoreSlate1200,
+	InputSurfaceInverseStatic: Color.PrimaryWhite,
+	Opacity15: "15%",
+	Opacity25: "25%",
+	Opacity65: "65%",
+	StatusDanger1Static: Color.CoreRed100,
+	StatusDanger2: Color.CoreRed300,
+	StatusDanger3: Color.CoreRed600,
+	StatusDanger4: Color.CoreRed300,
+	StatusFeature: Color.CorePurple500,
+	StatusHighlight: Color.CoreYellow400,
+	StatusInfo1: Color.CoreBlue350,
+	StatusInfo2: Color.CoreBlue600,
+	StatusInfo3: Color.CoreBlue400,
+	StatusMisc: Color.CoreTeal600,
+	StatusNeutral: Color.CoreSlate1100,
+	StatusSuccess1: Color.CoreGreen300,
+	StatusSuccess2: Color.CoreGreen600,
+	StatusSuccess3: Color.CoreGreen300,
+	StatusWarning: Color.CoreOrange600,
+	SurfaceAccent: Color.CorePurple500,
+	SurfaceAccentStatic: Color.CorePurple100,
+	SurfaceElevated: CoreSlate1150,
+	SurfaceHover: Color.CoreSlate1100,
+	SurfaceInset: Color.CoreSlate1000,
+	SurfacePage: CoreSlate1300,
+	SurfacePrimary: CoreSlate1200,
+	SurfaceSecondary: CoreSlate1150,
+	SurfaceSubtle: Color.CoreSlate1100,
+	SurfaceTertiary: Color.CoreSlate900
+};
+//#endregion
+export { semanticDark, semanticLight };
+
+//# sourceMappingURL=semantic.mjs.map

package/dist/variables/semantic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.mjs","names":[],"sources":["../../variables/semantic.ts"],"sourcesContent":["// Generated by design-system/scripts/generate-semantic-tokens.mjs from\n//   design-system/tokens/semantic/light.json\n//   design-system/tokens/semantic/dark.json\n// Do not edit by hand — edit the token source and regenerate.\n// This module is where semantic aliases map onto core primitives.\n/* oxlint-disable persona-web/no-core-color-tokens */\nimport { Color } from '@persona/design-tokens';\n\n/** A CSS percentage. Opacity tokens are percentages, not colours. */\nexport type CssPercentage = `${number}%`;\n\n/**\n * Semantic tokens. Names match the Figma Semantic collection 1:1\n * (`action/primary` -> `ActionPrimary`).\n */\nexport interface SemanticTokens {\n  ActionAccent: Color;\n  ActionDanger: Color;\n  ActionDangerActive: Color;\n  ActionDangerDisabled: Color;\n  ActionDangerHover: Color;\n  ActionInverse: Color;\n  ActionInverseActive: Color;\n  ActionInverseHover: Color;\n  ActionNeutral: Color;\n  ActionNeutralActive: Color;\n  ActionNeutralHover: Color;\n  ActionOutlineActive: Color;\n  ActionOutlineHover: Color;\n  ActionPrimary: Color;\n  ActionPrimaryActive: Color;\n  ActionPrimaryHover: Color;\n  BorderAccent: Color;\n  BorderDanger: Color;\n  BorderDefault: Color;\n  BorderDivider: Color;\n  BorderFocus: Color;\n  BorderHover: Color;\n  BorderSubtle: Color;\n  BorderWarning: Color;\n  FeedbackAccent1: Color;\n  FeedbackAccent1Static: Color;\n  FeedbackAccent2: Color;\n  FeedbackAccent3: Color;\n  FeedbackDanger1: Color;\n  FeedbackDanger2: Color;\n  FeedbackDanger3: Color;\n  FeedbackDanger4: Color;\n  FeedbackHighlight1: Color;\n  FeedbackHighlight2: Color;\n  FeedbackInfo1: Color;\n  FeedbackInfo2: Color;\n  FeedbackInfo3: Color;\n  FeedbackMisc1: Color;\n  FeedbackMisc2: Color;\n  FeedbackNeutral1: Color;\n  FeedbackNeutral2: Color;\n  FeedbackNeutral2Static: Color;\n  FeedbackNeutral3: Color;\n  FeedbackNeutral4: Color;\n  FeedbackNeutral5: Color;\n  FeedbackNeutralInverse: Color;\n  FeedbackSuccess1: Color;\n  FeedbackSuccess2: Color;\n  FeedbackSuccess3: Color;\n  FeedbackWarning1: Color;\n  FeedbackWarning2: Color;\n  FeedbackWarning3: Color;\n  FgAccent: Color;\n  FgAccentActive: Color;\n  FgAccentHover: Color;\n  FgAccentStatic: Color;\n  FgDanger1: Color;\n  FgDanger2: Color;\n  FgDisabled: Color;\n  FgFeature: Color;\n  /** Yellow foreground for filled highlight/attention treatments; transparent StatusIndicator attention intentionally uses FgWarning1. */\n  FgHighlight: Color;\n  FgInfo: Color;\n  FgInverse: Color;\n  FgInverseStatic: Color;\n  FgMisc: Color;\n  FgPrimary: Color;\n  FgPrimaryStatic: Color;\n  FgSecondary: Color;\n  FgSecondaryStatic: Color;\n  FgSuccess: Color;\n  FgTertiary: Color;\n  FgWarning1: Color;\n  FgWarning2: Color;\n  InputBorderAccent: Color;\n  InputBorderDefault: Color;\n  InputBorderDisabled: Color;\n  InputBorderHover: Color;\n  InputBorderHoverStrong: Color;\n  InputBorderStrong: Color;\n  InputSurfaceAccent: Color;\n  InputSurfaceAccentDisabled: Color;\n  InputSurfaceAccentHover: Color;\n  InputSurfaceDefault: Color;\n  InputSurfaceDisabled: Color;\n  InputSurfaceHover: Color;\n  InputSurfaceInverseStatic: Color;\n  /** 100% in light, 15% in dark; PX-1838 tracks whether the light value is deliberate. */\n  Opacity15: CssPercentage;\n  /** 100% in light, 25% in dark; PX-1838 tracks whether the light value is deliberate. */\n  Opacity25: CssPercentage;\n  Opacity65: CssPercentage;\n  StatusDanger1Static: Color;\n  StatusDanger2: Color;\n  StatusDanger3: Color;\n  StatusDanger4: Color;\n  StatusFeature: Color;\n  StatusHighlight: Color;\n  StatusInfo1: Color;\n  StatusInfo2: Color;\n  StatusInfo3: Color;\n  StatusMisc: Color;\n  StatusNeutral: Color;\n  StatusSuccess1: Color;\n  StatusSuccess2: Color;\n  StatusSuccess3: Color;\n  StatusWarning: Color;\n  SurfaceAccent: Color;\n  SurfaceAccentStatic: Color;\n  SurfaceElevated: Color;\n  SurfaceHover: Color;\n  SurfaceInset: Color;\n  SurfacePage: Color;\n  SurfacePrimary: Color;\n  SurfaceSecondary: Color;\n  SurfaceSubtle: Color;\n  SurfaceTertiary: Color;\n}\n\n// Core primitives @persona/design-tokens does not publish yet (scripts/lib/unpublishedPrimitives.mjs).\nconst CoreSlate1150 = '#262626' as Color;\nconst CoreSlate1200 = '#1F1F1F' as Color;\nconst CoreSlate1300 = '#181818' as Color;\n\nexport const semanticLight: SemanticTokens = {\n  ActionAccent: Color.CorePurple100,\n  ActionDanger: Color.CoreRed700,\n  ActionDangerActive: Color.CoreRed900,\n  ActionDangerDisabled: Color.CoreRed400,\n  ActionDangerHover: Color.CoreRed800,\n  ActionInverse: Color.PrimaryWhite,\n  ActionInverseActive: Color.CoreSlate300,\n  ActionInverseHover: Color.CoreSlate100,\n  ActionNeutral: Color.CoreSlate100,\n  ActionNeutralActive: Color.CoreSlate400,\n  ActionNeutralHover: Color.CoreSlate200,\n  ActionOutlineActive: Color.CoreSlate300,\n  ActionOutlineHover: Color.CoreSlate100,\n  ActionPrimary: Color.CorePurple600,\n  ActionPrimaryActive: Color.CorePurple900,\n  ActionPrimaryHover: Color.CorePurple800,\n  BorderAccent: Color.CorePurple600,\n  BorderDanger: Color.CoreRed600,\n  BorderDefault: Color.CoreSlate300,\n  BorderDivider: Color.CoreSlate100,\n  BorderFocus: Color.CoreBlue600,\n  BorderHover: Color.CoreSlate1000,\n  BorderSubtle: Color.CoreSlate200,\n  BorderWarning: Color.CoreOrange700,\n  FeedbackAccent1: Color.CorePurple200,\n  FeedbackAccent1Static: Color.CorePurple200,\n  FeedbackAccent2: Color.CorePurple400,\n  FeedbackAccent3: Color.CorePurple600,\n  FeedbackDanger1: Color.CoreRed100,\n  FeedbackDanger2: Color.CoreRed400,\n  FeedbackDanger3: Color.CoreRed600,\n  FeedbackDanger4: Color.CoreRed800,\n  FeedbackHighlight1: Color.CoreYellow500,\n  FeedbackHighlight2: Color.CoreYellow800,\n  FeedbackInfo1: Color.CoreBlue100,\n  FeedbackInfo2: Color.CoreBlue400,\n  FeedbackInfo3: Color.CoreBlue600,\n  FeedbackMisc1: Color.CoreTeal500,\n  FeedbackMisc2: Color.CoreTeal800,\n  FeedbackNeutral1: Color.CoreSlate100,\n  FeedbackNeutral2: Color.CoreSlate200,\n  FeedbackNeutral2Static: Color.CoreSlate200,\n  FeedbackNeutral3: Color.CoreSlate300,\n  FeedbackNeutral4: Color.CoreSlate700,\n  FeedbackNeutral5: Color.CoreSlate800,\n  FeedbackNeutralInverse: Color.PrimaryWhite,\n  FeedbackSuccess1: Color.CoreGreen100,\n  FeedbackSuccess2: Color.CoreGreen500,\n  FeedbackSuccess3: Color.CoreGreen700,\n  FeedbackWarning1: Color.CoreOrange100,\n  FeedbackWarning2: Color.CoreOrange500,\n  FeedbackWarning3: Color.CoreOrange700,\n  FgAccent: Color.CorePurple700,\n  FgAccentActive: Color.CorePurple900,\n  FgAccentHover: Color.CorePurple800,\n  FgAccentStatic: Color.CorePurple600,\n  FgDanger1: Color.CoreRed800,\n  FgDanger2: Color.CoreRed1000,\n  FgDisabled: Color.CoreSlate500,\n  FgFeature: Color.CorePurple1000,\n  FgHighlight: Color.CoreYellow1000,\n  FgInfo: Color.CoreBlue1000,\n  FgInverse: Color.PrimaryWhite,\n  FgInverseStatic: Color.PrimaryWhite,\n  FgMisc: Color.CoreTeal1000,\n  FgPrimary: Color.CoreSlate1100,\n  FgPrimaryStatic: Color.CoreSlate1100,\n  FgSecondary: Color.CoreSlate800,\n  FgSecondaryStatic: Color.CoreSlate800,\n  FgSuccess: Color.CoreGreen1000,\n  FgTertiary: Color.CoreSlate700,\n  FgWarning1: Color.CoreOrange900,\n  FgWarning2: Color.CoreOrange1000,\n  InputBorderAccent: Color.CoreBlue700,\n  InputBorderDefault: Color.CoreSlate300,\n  InputBorderDisabled: Color.CoreSlate300,\n  InputBorderHover: Color.CoreSlate500,\n  InputBorderHoverStrong: Color.CoreSlate1000,\n  InputBorderStrong: Color.CoreSlate800,\n  InputSurfaceAccent: Color.CoreBlue700,\n  InputSurfaceAccentDisabled: Color.CoreBlue300,\n  InputSurfaceAccentHover: Color.CoreBlue800,\n  InputSurfaceDefault: Color.PrimaryWhite,\n  InputSurfaceDisabled: Color.CoreSlate100,\n  InputSurfaceHover: Color.PrimaryWhite,\n  InputSurfaceInverseStatic: Color.PrimaryWhite,\n  Opacity15: '100%',\n  Opacity25: '100%',\n  Opacity65: '65%',\n  StatusDanger1Static: Color.CoreRed100,\n  StatusDanger2: Color.CoreRed200,\n  StatusDanger3: Color.CoreRed300,\n  StatusDanger4: Color.CoreRed600,\n  StatusFeature: Color.CorePurple300,\n  StatusHighlight: Color.CoreYellow400,\n  StatusInfo1: Color.CoreBlue200,\n  StatusInfo2: Color.CoreBlue300,\n  StatusInfo3: Color.CoreBlue700,\n  StatusMisc: Color.CoreTeal300,\n  StatusNeutral: Color.CoreSlate200,\n  StatusSuccess1: Color.CoreGreen200,\n  StatusSuccess2: Color.CoreGreen300,\n  StatusSuccess3: Color.CoreGreen800,\n  StatusWarning: Color.CoreOrange300,\n  SurfaceAccent: Color.CorePurple100,\n  SurfaceAccentStatic: Color.CorePurple100,\n  SurfaceElevated: Color.PrimaryWhite,\n  SurfaceHover: Color.CoreSlate50,\n  SurfaceInset: Color.CoreSlate300,\n  SurfacePage: Color.CoreSlate50,\n  SurfacePrimary: Color.PrimaryWhite,\n  SurfaceSecondary: Color.CoreSlate50,\n  SurfaceSubtle: Color.CoreSlate50,\n  SurfaceTertiary: Color.CoreSlate100,\n};\n\nexport const semanticDark: SemanticTokens = {\n  ActionAccent: Color.CorePurple500,\n  ActionDanger: Color.CoreRed400,\n  ActionDangerActive: Color.CoreRed200,\n  ActionDangerDisabled: Color.CoreRed400,\n  ActionDangerHover: Color.CoreRed300,\n  ActionInverse: Color.CoreSlate700,\n  ActionInverseActive: Color.CoreSlate500,\n  ActionInverseHover: Color.CoreSlate600,\n  ActionNeutral: Color.CoreSlate1100,\n  ActionNeutralActive: Color.CoreSlate900,\n  ActionNeutralHover: Color.CoreSlate1000,\n  ActionOutlineActive: Color.CoreSlate1100,\n  ActionOutlineHover: CoreSlate1200,\n  ActionPrimary: Color.CorePurple400,\n  ActionPrimaryActive: Color.CorePurple200,\n  ActionPrimaryHover: Color.CorePurple300,\n  BorderAccent: Color.CorePurple500,\n  BorderDanger: Color.CoreRed500,\n  BorderDefault: Color.CoreSlate1000,\n  BorderDivider: Color.CoreSlate1100,\n  BorderFocus: Color.CoreBlue400,\n  BorderHover: Color.CoreSlate600,\n  BorderSubtle: Color.CoreSlate1100,\n  BorderWarning: Color.CoreOrange400,\n  FeedbackAccent1: Color.CorePurple400,\n  FeedbackAccent1Static: Color.CorePurple200,\n  FeedbackAccent2: Color.CorePurple400,\n  FeedbackAccent3: Color.CorePurple600,\n  FeedbackDanger1: Color.CoreRed600,\n  FeedbackDanger2: Color.CoreRed350,\n  FeedbackDanger3: Color.CoreRed500,\n  FeedbackDanger4: Color.CoreRed800,\n  FeedbackHighlight1: Color.CoreYellow400,\n  FeedbackHighlight2: Color.CoreYellow700,\n  FeedbackInfo1: Color.CoreBlue600,\n  FeedbackInfo2: Color.CoreBlue400,\n  FeedbackInfo3: Color.CoreBlue600,\n  FeedbackMisc1: Color.CoreTeal400,\n  FeedbackMisc2: Color.CoreTeal600,\n  FeedbackNeutral1: Color.CoreSlate1100,\n  FeedbackNeutral2: Color.CoreSlate1000,\n  FeedbackNeutral2Static: Color.CoreSlate200,\n  FeedbackNeutral3: CoreSlate1150,\n  FeedbackNeutral4: Color.CoreSlate1000,\n  FeedbackNeutral5: CoreSlate1200,\n  FeedbackNeutralInverse: CoreSlate1200,\n  FeedbackSuccess1: Color.CoreGreen700,\n  FeedbackSuccess2: Color.CoreGreen400,\n  FeedbackSuccess3: Color.CoreGreen600,\n  FeedbackWarning1: Color.CoreOrange600,\n  FeedbackWarning2: Color.CoreOrange400,\n  FeedbackWarning3: Color.CoreOrange600,\n  FgAccent: Color.CorePurple400,\n  FgAccentActive: Color.CorePurple200,\n  FgAccentHover: Color.CorePurple300,\n  FgAccentStatic: Color.CorePurple600,\n  FgDanger1: Color.CoreRed300,\n  FgDanger2: Color.CoreRed300,\n  FgDisabled: Color.CoreSlate900,\n  FgFeature: Color.CorePurple400,\n  FgHighlight: Color.CoreYellow300,\n  FgInfo: Color.CoreBlue350,\n  FgInverse: Color.CoreSlate1100,\n  FgInverseStatic: Color.PrimaryWhite,\n  FgMisc: Color.CoreTeal200,\n  FgPrimary: Color.CoreSlate400,\n  FgPrimaryStatic: Color.CoreSlate1100,\n  FgSecondary: Color.CoreSlate700,\n  FgSecondaryStatic: Color.CoreSlate800,\n  FgSuccess: Color.CoreGreen400,\n  FgTertiary: Color.CoreSlate500,\n  FgWarning1: Color.CoreOrange400,\n  FgWarning2: Color.CoreOrange400,\n  InputBorderAccent: Color.CoreBlue500,\n  InputBorderDefault: Color.CoreSlate1000,\n  InputBorderDisabled: Color.CoreSlate800,\n  InputBorderHover: Color.CoreSlate900,\n  InputBorderHoverStrong: Color.CoreSlate600,\n  InputBorderStrong: Color.CoreSlate800,\n  InputSurfaceAccent: Color.CoreBlue500,\n  InputSurfaceAccentDisabled: Color.CoreBlue500,\n  InputSurfaceAccentHover: Color.CoreBlue400,\n  InputSurfaceDefault: CoreSlate1200,\n  InputSurfaceDisabled: CoreSlate1200,\n  InputSurfaceHover: CoreSlate1200,\n  InputSurfaceInverseStatic: Color.PrimaryWhite,\n  Opacity15: '15%',\n  Opacity25: '25%',\n  Opacity65: '65%',\n  StatusDanger1Static: Color.CoreRed100,\n  StatusDanger2: Color.CoreRed300,\n  StatusDanger3: Color.CoreRed600,\n  StatusDanger4: Color.CoreRed300,\n  StatusFeature: Color.CorePurple500,\n  StatusHighlight: Color.CoreYellow400,\n  StatusInfo1: Color.CoreBlue350,\n  StatusInfo2: Color.CoreBlue600,\n  StatusInfo3: Color.CoreBlue400,\n  StatusMisc: Color.CoreTeal600,\n  StatusNeutral: Color.CoreSlate1100,\n  StatusSuccess1: Color.CoreGreen300,\n  StatusSuccess2: Color.CoreGreen600,\n  StatusSuccess3: Color.CoreGreen300,\n  StatusWarning: Color.CoreOrange600,\n  SurfaceAccent: Color.CorePurple500,\n  SurfaceAccentStatic: Color.CorePurple100,\n  SurfaceElevated: CoreSlate1150,\n  SurfaceHover: Color.CoreSlate1100,\n  SurfaceInset: Color.CoreSlate1000,\n  SurfacePage: CoreSlate1300,\n  SurfacePrimary: CoreSlate1200,\n  SurfaceSecondary: CoreSlate1150,\n  SurfaceSubtle: Color.CoreSlate1100,\n  SurfaceTertiary: Color.CoreSlate900,\n};\n"],"mappings":";;AAwIA,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,MAAa,gBAAgC;CAC3C,cAAc,MAAM;CACpB,cAAc,MAAM;CACpB,oBAAoB,MAAM;CAC1B,sBAAsB,MAAM;CAC5B,mBAAmB,MAAM;CACzB,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,oBAAoB,MAAM;CAC1B,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,oBAAoB,MAAM;CAC1B,qBAAqB,MAAM;CAC3B,oBAAoB,MAAM;CAC1B,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,oBAAoB,MAAM;CAC1B,cAAc,MAAM;CACpB,cAAc,MAAM;CACpB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,aAAa,MAAM;CACnB,aAAa,MAAM;CACnB,cAAc,MAAM;CACpB,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACvB,uBAAuB,MAAM;CAC7B,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,oBAAoB,MAAM;CAC1B,oBAAoB,MAAM;CAC1B,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,wBAAwB,MAAM;CAC9B,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,wBAAwB,MAAM;CAC9B,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,UAAU,MAAM;CAChB,gBAAgB,MAAM;CACtB,eAAe,MAAM;CACrB,gBAAgB,MAAM;CACtB,WAAW,MAAM;CACjB,WAAW,MAAM;CACjB,YAAY,MAAM;CAClB,WAAW,MAAM;CACjB,aAAa,MAAM;CACnB,QAAQ,MAAM;CACd,WAAW,MAAM;CACjB,iBAAiB,MAAM;CACvB,QAAQ,MAAM;CACd,WAAW,MAAM;CACjB,iBAAiB,MAAM;CACvB,aAAa,MAAM;CACnB,mBAAmB,MAAM;CACzB,WAAW,MAAM;CACjB,YAAY,MAAM;CAClB,YAAY,MAAM;CAClB,YAAY,MAAM;CAClB,mBAAmB,MAAM;CACzB,oBAAoB,MAAM;CAC1B,qBAAqB,MAAM;CAC3B,kBAAkB,MAAM;CACxB,wBAAwB,MAAM;CAC9B,mBAAmB,MAAM;CACzB,oBAAoB,MAAM;CAC1B,4BAA4B,MAAM;CAClC,yBAAyB,MAAM;CAC/B,qBAAqB,MAAM;CAC3B,sBAAsB,MAAM;CAC5B,mBAAmB,MAAM;CACzB,2BAA2B,MAAM;CACjC,WAAW;CACX,WAAW;CACX,WAAW;CACX,qBAAqB,MAAM;CAC3B,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACvB,aAAa,MAAM;CACnB,aAAa,MAAM;CACnB,aAAa,MAAM;CACnB,YAAY,MAAM;CAClB,eAAe,MAAM;CACrB,gBAAgB,MAAM;CACtB,gBAAgB,MAAM;CACtB,gBAAgB,MAAM;CACtB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,iBAAiB,MAAM;CACvB,cAAc,MAAM;CACpB,cAAc,MAAM;CACpB,aAAa,MAAM;CACnB,gBAAgB,MAAM;CACtB,kBAAkB,MAAM;CACxB,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACxB;AAED,MAAa,eAA+B;CAC1C,cAAc,MAAM;CACpB,cAAc,MAAM;CACpB,oBAAoB,MAAM;CAC1B,sBAAsB,MAAM;CAC5B,mBAAmB,MAAM;CACzB,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,oBAAoB,MAAM;CAC1B,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,oBAAoB,MAAM;CAC1B,qBAAqB,MAAM;CAC3B,oBAAoB;CACpB,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,oBAAoB,MAAM;CAC1B,cAAc,MAAM;CACpB,cAAc,MAAM;CACpB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,aAAa,MAAM;CACnB,aAAa,MAAM;CACnB,cAAc,MAAM;CACpB,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACvB,uBAAuB,MAAM;CAC7B,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,iBAAiB,MAAM;CACvB,oBAAoB,MAAM;CAC1B,oBAAoB,MAAM;CAC1B,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,wBAAwB,MAAM;CAC9B,kBAAkB;CAClB,kBAAkB,MAAM;CACxB,kBAAkB;CAClB,wBAAwB;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,kBAAkB,MAAM;CACxB,UAAU,MAAM;CAChB,gBAAgB,MAAM;CACtB,eAAe,MAAM;CACrB,gBAAgB,MAAM;CACtB,WAAW,MAAM;CACjB,WAAW,MAAM;CACjB,YAAY,MAAM;CAClB,WAAW,MAAM;CACjB,aAAa,MAAM;CACnB,QAAQ,MAAM;CACd,WAAW,MAAM;CACjB,iBAAiB,MAAM;CACvB,QAAQ,MAAM;CACd,WAAW,MAAM;CACjB,iBAAiB,MAAM;CACvB,aAAa,MAAM;CACnB,mBAAmB,MAAM;CACzB,WAAW,MAAM;CACjB,YAAY,MAAM;CAClB,YAAY,MAAM;CAClB,YAAY,MAAM;CAClB,mBAAmB,MAAM;CACzB,oBAAoB,MAAM;CAC1B,qBAAqB,MAAM;CAC3B,kBAAkB,MAAM;CACxB,wBAAwB,MAAM;CAC9B,mBAAmB,MAAM;CACzB,oBAAoB,MAAM;CAC1B,4BAA4B,MAAM;CAClC,yBAAyB,MAAM;CAC/B,qBAAqB;CACrB,sBAAsB;CACtB,mBAAmB;CACnB,2BAA2B,MAAM;CACjC,WAAW;CACX,WAAW;CACX,WAAW;CACX,qBAAqB,MAAM;CAC3B,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACvB,aAAa,MAAM;CACnB,aAAa,MAAM;CACnB,aAAa,MAAM;CACnB,YAAY,MAAM;CAClB,eAAe,MAAM;CACrB,gBAAgB,MAAM;CACtB,gBAAgB,MAAM;CACtB,gBAAgB,MAAM;CACtB,eAAe,MAAM;CACrB,eAAe,MAAM;CACrB,qBAAqB,MAAM;CAC3B,iBAAiB;CACjB,cAAc,MAAM;CACpB,cAAc,MAAM;CACpB,aAAa;CACb,gBAAgB;CAChB,kBAAkB;CAClB,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACxB"}

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@persona/design-system",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
   ],
   "license": "SEE LICENSE",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/CodeHighlight/PrismWithLanguages.*"
+  ],
   "files": [
     "dist",
     "skills",
@@ -26,6 +28,8 @@
     "./components/Card": "./dist/components/Card/index.mjs",
     "./components/CardV2": "./dist/components/CardV2/index.mjs",
     "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
+    "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
+    "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
     "./components/Combobox": "./dist/components/Combobox/index.mjs",
     "./components/ConfigFormGroup": "./dist/components/ConfigFormGroup/index.mjs",
     "./components/DataTable": "./dist/components/DataTable/index.mjs",
@@ -60,6 +64,11 @@
     "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
     "./components/Select": "./dist/components/Select/index.mjs",
     "./components/Slider": "./dist/components/Slider/index.mjs",
+    "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
+    "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+    "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
+    "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+    "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
     "./components/Spacer": "./dist/components/Spacer/index.mjs",
     "./components/Spinner": "./dist/components/Spinner/index.mjs",
     "./components/Stack": "./dist/components/Stack/index.mjs",
@@ -76,6 +85,7 @@
     "./components/Toast": "./dist/components/Toast/index.mjs",
     "./components/Toggle": "./dist/components/Toggle/index.mjs",
     "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
+    "./lib/color": "./dist/lib/color.mjs",
     "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
     "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
     "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
@@ -83,14 +93,22 @@
     "./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
     "./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
     "./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
+    "./lib/errorReporter": "./dist/lib/errorReporter.mjs",
+    "./lib/fieldSchemaTypes": "./dist/lib/fieldSchemaTypes.mjs",
     "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
     "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
+    "./lib/jsonSchema": "./dist/lib/jsonSchema.mjs",
     "./lib/message": "./dist/lib/message.mjs",
+    "./lib/methodChain": "./dist/lib/methodChain.mjs",
+    "./lib/methodChainNormalize": "./dist/lib/methodChainNormalize.mjs",
+    "./lib/methodChainTypes": "./dist/lib/methodChainTypes.mjs",
     "./lib/MiddleTruncatedText": "./dist/lib/MiddleTruncatedText.mjs",
+    "./lib/objectSchemaTypes": "./dist/lib/objectSchemaTypes.mjs",
     "./lib/PDSProvider": "./dist/lib/PDSProvider.mjs",
     "./lib/pseudoClass": "./dist/lib/pseudoClass.mjs",
     "./lib/reorderItems": "./dist/lib/reorderItems.mjs",
     "./lib/selectHelper": "./dist/lib/selectHelper.mjs",
+    "./lib/semanticColor": "./dist/lib/semanticColor.mjs",
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
     "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
@@ -115,16 +133,18 @@
     "./variables/color": "./dist/variables/color.mjs",
     "./variables/effect": "./dist/variables/effect.mjs",
     "./variables/keyframes": "./dist/variables/keyframes.mjs",
+    "./variables/semantic": "./dist/variables/semantic.mjs",
     "./variables/spacing": "./dist/variables/spacing.mjs",
     "./variables/text": "./dist/variables/text.mjs",
     "./variables/transitions": "./dist/variables/transitions.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs",
+    "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs && node scripts/assert-parser-declarations.mjs",
     "release": "scripts/release.sh --dry-run",
-    "release:tag": "scripts/tag.sh",
     "skills:validate": "intent validate skills",
+    "tokens:generate": "node scripts/generate-semantic-tokens.mjs",
+    "tokens:check": "node scripts/generate-semantic-tokens.mjs --check",
     "skills:stale": "intent stale"
   },
   "dependencies": {
@@ -160,6 +180,7 @@
     "fuse.js": "^7.1.0",
     "lodash-es": "^4.18.1",
     "luxon": "^3.4.4",
+    "prism-react-renderer": "^2.4.1",
     "react-aria": "^3.37.0",
     "react-aria-components": "^1.13.0",
     "react-error-boundary": "^4.0.13",
@@ -170,22 +191,45 @@
     "uuid": "^14.0.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
-    "@persona/design-tokens": "^0.4.5",
-    "@persona/icons": "^0.1.0",
+    "@persona/design-tokens": "0.4.15",
+    "@persona/icons": "0.1.4",
+    "@storybook/react": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@tanstack/intent": "^0.3.6",
     "@testing-library/dom": "^8.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/jscodeshift": "^0.11.6",
     "@types/lodash-es": "^4.17.12",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.26",
     "@typescript/native": "npm:typescript@^7.0.2",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "chromatic": "^16.2.0",
     "csstype": "^3.1.2",
+    "date-fns": "^4.1.0",
+    "dedent": "^1.5.1",
+    "hygen": "^6.2.11",
+    "jest-styled-components": "^7.2.0",
+    "jscodeshift": "^17.1.1",
+    "jsdom": "^27.4.0",
+    "lodash": "^4.18.1",
+    "msw": "^2.12.14",
+    "playwright": "1.60.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.30.5",
+    "recharts": "^2.13.3",
+    "storybook": "^10.4.6",
     "styled-components": "^5.3.5",
     "tsdown": "^0.21.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2"
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "@persona/design-tokens": ">=0.4.5",
@@ -216,6 +260,8 @@
       "./components/Card": "./dist/components/Card/index.mjs",
       "./components/CardV2": "./dist/components/CardV2/index.mjs",
       "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
+      "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
+      "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
       "./components/Combobox": "./dist/components/Combobox/index.mjs",
       "./components/ConfigFormGroup": "./dist/components/ConfigFormGroup/index.mjs",
       "./components/DataTable": "./dist/components/DataTable/index.mjs",
@@ -250,6 +296,11 @@
       "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
       "./components/Select": "./dist/components/Select/index.mjs",
       "./components/Slider": "./dist/components/Slider/index.mjs",
+      "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
+      "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+      "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
+      "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+      "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
       "./components/Spacer": "./dist/components/Spacer/index.mjs",
       "./components/Spinner": "./dist/components/Spinner/index.mjs",
       "./components/Stack": "./dist/components/Stack/index.mjs",
@@ -266,6 +317,7 @@
       "./components/Toast": "./dist/components/Toast/index.mjs",
       "./components/Toggle": "./dist/components/Toggle/index.mjs",
       "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
+      "./lib/color": "./dist/lib/color.mjs",
       "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
       "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
       "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
@@ -273,14 +325,22 @@
       "./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
       "./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
       "./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
+      "./lib/errorReporter": "./dist/lib/errorReporter.mjs",
+      "./lib/fieldSchemaTypes": "./dist/lib/fieldSchemaTypes.mjs",
       "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
       "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
+      "./lib/jsonSchema": "./dist/lib/jsonSchema.mjs",
       "./lib/message": "./dist/lib/message.mjs",
+      "./lib/methodChain": "./dist/lib/methodChain.mjs",
+      "./lib/methodChainNormalize": "./dist/lib/methodChainNormalize.mjs",
+      "./lib/methodChainTypes": "./dist/lib/methodChainTypes.mjs",
       "./lib/MiddleTruncatedText": "./dist/lib/MiddleTruncatedText.mjs",
+      "./lib/objectSchemaTypes": "./dist/lib/objectSchemaTypes.mjs",
       "./lib/PDSProvider": "./dist/lib/PDSProvider.mjs",
       "./lib/pseudoClass": "./dist/lib/pseudoClass.mjs",
       "./lib/reorderItems": "./dist/lib/reorderItems.mjs",
       "./lib/selectHelper": "./dist/lib/selectHelper.mjs",
+      "./lib/semanticColor": "./dist/lib/semanticColor.mjs",
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
       "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
@@ -305,6 +365,7 @@
       "./variables/color": "./dist/variables/color.mjs",
       "./variables/effect": "./dist/variables/effect.mjs",
       "./variables/keyframes": "./dist/variables/keyframes.mjs",
+      "./variables/semantic": "./dist/variables/semantic.mjs",
       "./variables/spacing": "./dist/variables/spacing.mjs",
       "./variables/text": "./dist/variables/text.mjs",
       "./variables/transitions": "./dist/variables/transitions.mjs",

package/skills/ui-authoring/COMPONENTS.md

@@ -1,7 +1,7 @@
 # Components
 
 Which PDS component to use, and for what. For usage guidance and additional code examples, see
-that component's `.mdx` beside its source under `front-end/design-system/components/` when one
+that component's `.mdx` beside its source under `packages/design-system/components/` when one
 exists. If there is no `.mdx`, use the published type declarations
 (`dist/components/<Name>/index.d.mts`).
 

package/skills/ui-authoring/TOKENS.md

@@ -14,7 +14,7 @@ others), plus a `Core*` palette and a `Primary*` brand set.
 Use according to this priority:
 
 1. Purpose-named `Color.*` (`Text*`, `Background*`, `Border*`, …)
-2. `Color.Core*` / `Color.Primary*` with a comment explaining the choice. For `Core*`, that comment is an `oxlint-disable-next-line persona-web/no-core-color-tokens`.
+2. `Color.Core*` / `Color.Primary*` with a comment explaining the choice. For `Core*`, that comment is an `oxlint-disable-next-line rulesdir/no-core-color-tokens`.
 3. Hardcoded hex (only if absolutely necessary) with a comment explaining the choice.
 
 ```tsx

package/dist/Breadcrumbs-BEYQlGbW.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumbs-BEYQlGbW.mjs","names":["Input"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon, EditIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport Input from 'design-system/components/Input';\nimport { HStack } from 'design-system/components/Stack';\nimport TechnicalSticker from 'design-system/components/TechnicalSticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type BreadcrumbSize = 'md' | 'lg';\n\nexport type BreadcrumbHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nconst COPY_TOOLTIP_LABEL = 'Copy ID';\nconst COPIED_TOOLTIP_LABEL = 'Copied!';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\nconst COPY_TOOLTIP_STICKER_MAX_WIDTH = '96px';\nconst COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH = '250px';\n\nexport type BreadcrumbProps = {\n  label: string;\n  size?: BreadcrumbSize;\n  current?: boolean;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  showCopyAction?: boolean;\n  copyValue?: string;\n  copyTooltipLabel?: string;\n  /** Copy tooltip text shown after a successful copy. Defaults to `Copied!`. */\n  copiedTooltipLabel?: string;\n  /**\n   * Appends `copyValue` to both copy tooltip texts as a `TechnicalSticker`, so the tooltip shows\n   * which token is being copied.\n   */\n  showCopyValueInTooltip?: boolean;\n  /** Internal dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. */\n  href?: string;\n  /**\n   * Activates a non-current crumb without a route change, for trails that navigate in-place (e.g.\n   * a control panel drilling into a sub-panel). Ignored when `href` is set.\n   */\n  onClick?: () => void;\n  onEdit?: (newLabel: string) => void;\n  editMaxLength?: number;\n  onCopy?: () => void;\n};\n\nconst LABEL_ACTION_GAP = Spacing[2];\nconst ACTION_BUTTON_GAP = Spacing[1];\n\nconst CrumbRow = styled(HStack)`\n  align-items: center;\n  min-width: 0;\n`;\n\nconst crumbLayoutStyles = (size: BreadcrumbSize) => css`\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  min-height: ${({ theme }) => theme.element.height.xs};\n  ${\n    size === 'lg'\n      ? css`\n        font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};\n        line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};\n      `\n      : css``\n  };\n`;\n\nconst editInputTextStyles = (size: BreadcrumbSize, current: boolean) => {\n  if (current) {\n    return size === 'lg' ? paragraphMixins.lgBold : paragraphMixins.mdBold;\n  }\n  return size === 'lg' ? paragraphMixins.lg : paragraphMixins.md;\n};\n\nconst ancestorCrumbStyles = css<{ $size: BreadcrumbSize }>`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => theme.color.text.secondary};\n  text-decoration: none;\n  transition: color ${TransitionDuration.ExtraFast} ease-out;\n  ${focusOutline}\n  ${({ $size }) => crumbLayoutStyles($size)}\n\n  &:hover {\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n`;\n\nconst AncestorNavLink = styled(Link)<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n`;\n\nconst AncestorNavButton = styled.button<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n`;\n\nconst InlineEditInput = styled(Input)<{\n  $size: BreadcrumbSize;\n  $current: boolean;\n  $editMinWidth?: number;\n}>`\n  margin: 0;\n  padding: 2px 10px;\n  width: auto;\n  max-width: 100%;\n  min-width: ${({ $editMinWidth }) => ($editMinWidth != null ? `${$editMinWidth}px` : '0')};\n  field-sizing: content;\n  display: inline-block;\n  ${({ $size, $current }) => editInputTextStyles($size, $current)};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n\n  &:not(:focus) {\n    border-color: transparent;\n  }\n\n  &:hover:not(:disabled) {\n    border-style: solid;\n  }\n`;\n\nconst CurrentLabel = styled(Paragraph)<{ $size: BreadcrumbSize }>`\n  margin: 0;\n  ${({ $size }) => crumbLayoutStyles($size)}\n`;\n\nconst copyToClipboard = async (value: string): Promise<boolean> => {\n  try {\n    if (navigator.clipboard?.writeText == null) {\n      return false;\n    }\n\n    await navigator.clipboard.writeText(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nconst BreadcrumbCopyButton = ({\n  copyValue,\n  copyTooltipLabel = COPY_TOOLTIP_LABEL,\n  copiedTooltipLabel = COPIED_TOOLTIP_LABEL,\n  showCopyValueInTooltip = false,\n  onCopy,\n}: {\n  copyValue: string;\n  copyTooltipLabel?: string;\n  copiedTooltipLabel?: string;\n  showCopyValueInTooltip?: boolean;\n  onCopy?: () => void;\n}) => {\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    const success = await copyToClipboard(copyValue);\n    if (!success) {\n      return;\n    }\n\n    setCopied(true);\n    setTooltipOpen(true);\n    onCopy?.();\n\n    window.setTimeout(() => {\n      setTooltipOpen(false);\n      window.setTimeout(() => setCopied(false), 200);\n    }, 1000);\n  };\n\n  const handleMouseEnter = () => {\n    if (!copied) {\n      setTooltipOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    if (!copied) {\n      setTooltipOpen(false);\n    }\n  };\n\n  const trigger = (\n    <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <IconButton\n        type='button'\n        size='sm'\n        aria-label={`Copy ${copyValue}`}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          void handleCopy();\n        }}\n      >\n        <CopyIcon />\n      </IconButton>\n    </span>\n  );\n\n  const tooltipLabel = copied ? copiedTooltipLabel : copyTooltipLabel;\n\n  return (\n    <Tooltip\n      trigger={trigger}\n      open={tooltipOpen}\n      side='top'\n      sideOffset={4}\n      size='sm'\n      contentAlignment='center'\n      interactive={false}\n      hideArrow\n      portal={false}\n      maxWidth={showCopyValueInTooltip ? COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH : undefined}\n    >\n      {showCopyValueInTooltip ? (\n        <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n          <span>{tooltipLabel}</span>\n          <TechnicalSticker copyable={false} maxWidth={COPY_TOOLTIP_STICKER_MAX_WIDTH}>\n            {copyValue}\n          </TechnicalSticker>\n        </HStack>\n      ) : (\n        tooltipLabel\n      )}\n    </Tooltip>\n  );\n};\n\nconst Breadcrumb = ({\n  label,\n  size = 'md',\n  current = false,\n  headingAs = 'h1',\n  showCopyAction = false,\n  copyValue,\n  copyTooltipLabel,\n  copiedTooltipLabel,\n  showCopyValueInTooltip,\n  href,\n  onClick,\n  onEdit,\n  editMaxLength = DEFAULT_EDIT_MAX_LENGTH,\n  onCopy,\n}: BreadcrumbProps) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState(label);\n  const [editMinWidth, setEditMinWidth] = useState<number | undefined>();\n  const editInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditValue(label);\n    }\n  }, [isEditing, label]);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditMinWidth(undefined);\n      return;\n    }\n\n    const input = editInputRef.current;\n    if (input == null) {\n      return;\n    }\n\n    setEditMinWidth(input.offsetWidth);\n    input.focus();\n    input.select();\n  }, [isEditing]);\n\n  const commitEdit = () => {\n    if (!isEditing) {\n      return;\n    }\n\n    setIsEditing(false);\n    if (editValue !== label) {\n      onEdit?.(editValue);\n    }\n  };\n\n  const inlineActions = !isEditing && (showCopyAction || onEdit) && (\n    <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n      {onEdit && (\n        <IconButton\n          type='button'\n          size='sm'\n          aria-label={`Edit ${label}`}\n          onClick={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            setIsEditing(true);\n          }}\n        >\n          <EditIcon />\n        </IconButton>\n      )}\n      {showCopyAction && copyValue != null && (\n        <BreadcrumbCopyButton\n          copyValue={copyValue}\n          copyTooltipLabel={copyTooltipLabel}\n          copiedTooltipLabel={copiedTooltipLabel}\n          showCopyValueInTooltip={showCopyValueInTooltip}\n          onCopy={onCopy}\n        />\n      )}\n    </HStack>\n  );\n\n  if (isEditing) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <InlineEditInput\n          ref={editInputRef}\n          $size={size}\n          $current={current}\n          $editMinWidth={editMinWidth}\n          size='md'\n          aria-label={`Edit ${label}`}\n          maxLength={editMaxLength}\n          value={editValue}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => setEditValue(event.target.value)}\n          onBlur={commitEdit}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              commitEdit();\n            }\n            if (event.key === 'Escape') {\n              setEditValue(label);\n              setIsEditing(false);\n            }\n          }}\n        />\n      </CrumbRow>\n    );\n  }\n\n  if (current) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <CurrentLabel\n          $size={size}\n          size={size === 'lg' ? 'lg' : 'md'}\n          weight='bold'\n          color='primary'\n          as={headingAs}\n        >\n          {label}\n        </CurrentLabel>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  if (href == null && onClick != null) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <AncestorNavButton type='button' onClick={onClick} $size={size}>\n          {label}\n        </AncestorNavButton>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  return (\n    <CrumbRow spacing={LABEL_ACTION_GAP}>\n      <AncestorNavLink to={href ?? ''} $size={size}>\n        {label}\n      </AncestorNavLink>\n      {inlineActions}\n    </CrumbRow>\n  );\n};\n\nexport default Breadcrumb;\n","import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nimport Breadcrumb, {\n  type BreadcrumbHeadingAs,\n  type BreadcrumbProps,\n  type BreadcrumbSize,\n} from './Breadcrumb';\n\nexport type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' | 'current' | 'headingAs'>;\n\nexport type BreadcrumbsProps = {\n  items: BreadcrumbsItemProps[];\n  size?: BreadcrumbSize;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  'aria-label'?: string;\n  className?: string;\n};\n\nconst BreadcrumbList = styled.ol`\n  max-width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n`;\n\nconst BreadcrumbListItem = styled.li`\n  display: flex;\n  align-items: center;\n  min-width: 0;\n`;\n\nconst Separator = styled.span<{ $size: BreadcrumbSize }>`\n  padding: 0 ${Spacing[2]};\n  color: ${({ theme }) => theme.color.text.tertiary};\n  user-select: none;\n  ${({ $size }) => ($size === 'lg' ? paragraphMixins.lg : paragraphMixins.md)};\n`;\n\nexport const Breadcrumbs = ({\n  items,\n  size = 'md',\n  headingAs = 'h1',\n  'aria-label': ariaLabel = 'Breadcrumbs',\n  className,\n}: BreadcrumbsProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const crumbNodes = items.map((item, index) => {\n    const isCurrent = index === items.length - 1;\n\n    return (\n      <BreadcrumbListItem\n        key={`${item.label}-${index}`}\n        aria-current={isCurrent ? 'page' : undefined}\n      >\n        <Breadcrumb {...item} size={size} current={isCurrent} headingAs={headingAs} />\n      </BreadcrumbListItem>\n    );\n  });\n\n  const listItems = intersperse(crumbNodes, (separatorIndex: number) => (\n    <BreadcrumbListItem key={`separator-${separatorIndex}`} aria-hidden='true'>\n      <Separator $size={size}>/</Separator>\n    </BreadcrumbListItem>\n  ));\n\n  return (\n    <nav aria-label={ariaLabel} className={className}>\n      <BreadcrumbList>{listItems}</BreadcrumbList>\n    </nav>\n  );\n};\n\nexport default Breadcrumbs;\n"],"mappings":"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"}

package/dist/Card-BoGV5tY2.d.mts

@@ -1,52 +0,0 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-BzzUdBdc.mjs";
-import { i as HeaderProps } from "./Header-BKk3qESS.mjs";
-import { Spacing } from "@persona/design-tokens";
-import * as _$styled_components0 from "styled-components";
-import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as _$hoist_non_react_statics0 from "hoist-non-react-statics";
-
-//#region components/Card/Card.d.ts
-interface CardProps {
-  elevated?: boolean;
-  $matchCardV2?: boolean;
-}
-interface TitleBaseProps {
-  icon?: ReactElement;
-}
-interface TitleProps extends TitleBaseProps, Pick<HeaderProps, 'actions' | 'subtitle'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {
-  $matchCardV2?: boolean;
-}
-interface SectionProps extends Pick<HeaderProps, 'subtitle' | 'actions'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}
-/**
- * Wrapper for a full-width image to be used at the top of a card.
- */
-interface ImageProps {
-  height: number;
-  children: ReactNode;
-}
-interface CollapsibleSectionProps {
-  id?: string;
-  defaultExpanded?: boolean;
-  title: ReactNode;
-}
-declare const _default: string & _$styled_components0.StyledComponentBase<"div", any, CardProps, never> & _$hoist_non_react_statics0.NonReactStatics<never, {}> & {
-  Title: FC<TitleProps>;
-  SectionHeader: ({
-    children,
-    ...elemProps
-  }: SectionProps) => _$react_jsx_runtime0.JSX.Element;
-  Subtitle: _$styled_components0.StyledComponent<FC<PropsWithChildren<SpanProps>>, any, ParagraphProps & {
-    size: string;
-  }, "size">;
-  Body: _$styled_components0.StyledComponent<"section", any, {
-    gap?: number;
-    padding?: Spacing;
-    $matchCardV2?: boolean;
-  }, never>;
-  Image: FC<ImageProps>;
-  CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>>;
-};
-//#endregion
-export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-BoGV5tY2.d.mts.map

package/dist/Card-CKrJtn1f.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-CKrJtn1f.mjs","names":["Title","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n  children: ReactNode;\n  subtitle?: ReactNode;\n  variant?: 'title' | 'section';\n  actions?: ReactNode;\n  $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  &:not(:only-child) {\n    margin: 0px 0px ${Spacing[4]} 0px;\n    ${({ $matchCardV2 }) =>\n      $matchCardV2 &&\n      css`\n        margin-bottom: ${Spacing[1]};\n      `}\n  }\n  ${({ variant }) =>\n    variant === 'section' &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n    `}\n`;\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  gap: ${Spacing[2]};\n  ${({ variant }) => {\n    switch (variant) {\n      case 'section':\n        return paragraphMixins.lgBold;\n      case 'title':\n      default:\n        return headingMixins.sm;\n    }\n  }}\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      ${headingMixins.xsm};\n    `}\n`;\n\nexport const ActionsContainer = styled.div`\n  color: ${({ theme }) => theme.color.text.secondary};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n\n  /* Use negative margin to bleed the divider out of the grid. */\n  margin-left: -${Spacing[5]};\n  margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n  children,\n  variant,\n  actions,\n  subtitle,\n  $matchCardV2,\n  ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <>\n      <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n        <TitleContainer>\n          <Title variant={variant} $matchCardV2={$matchCardV2}>\n            {children}\n          </Title>\n          {subtitle}\n        </TitleContainer>\n        <ActionsContainer>{actions}</ActionsContainer>\n      </HeaderContainer>\n      {$matchCardV2 && <FullDivider />}\n    </>\n  );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n  elevated?: boolean;\n  $matchCardV2?: boolean;\n}\n\n/**\n * @deprecated Use CardV2 instead\n */\nconst Card = styled('div')<CardProps>`\n  border-radius: ${({ theme }) => {\n    return theme.card.borderRadius;\n  }};\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ${Spacing[4]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  ${({ elevated }) =>\n    elevated &&\n    css`\n      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n    `}\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      margin-bottom: 0;\n    `}\n`;\n\n/**\n * To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n */\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n  margin: 0;\n  padding: ${({ padding }) => padding ?? Spacing[5]};\n  display: grid;\n  grid-auto-flow: row;\n  grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n  /**\n    * Prevent grid blowout\n    * https://css-tricks.com/preventing-a-grid-blowout/\n    */\n  grid-template-columns: minmax(0, 1fr);\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n      grid-gap: ${Spacing[3]};\n    `}\n`;\n\nconst IconContainer = styled('div')`\n  margin-right: ${Spacing[3]};\n  display: flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n  width: 100%;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n    0px 0px;\n\n  ${({ height }) => {\n    return css`\n      height: ${height}px;\n    `;\n  }};\n\n  > img,\n  svg {\n    width: 100%;\n    border-radius: ${({ theme }) => theme.card.borderRadius}\n      ${({ theme }) => theme.card.borderRadius} 0px 0px;\n  }\n`;\n\ninterface TitleBaseProps {\n  icon?: ReactElement;\n}\n\ninterface TitleProps\n  extends\n    TitleBaseProps,\n    Pick<HeaderProps, 'actions' | 'subtitle'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {\n  $matchCardV2?: boolean;\n}\n\n/**\n * Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n */\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n  <Header variant='title' {...elemProps}>\n    {icon != null && <IconContainer>{icon}</IconContainer>}\n    {children}\n  </Header>\n);\n\n/**\n * Smaller label to be used within cards.\n */\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n  color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n  extends\n    Pick<HeaderProps, 'subtitle' | 'actions'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}\n\n/**\n * Header for section headers within a Card\n */\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n  <Header variant='section' {...elemProps}>\n    {children}\n  </Header>\n);\n\n/**\n * Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n  height: number;\n  children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n  <ImageWrapper {...elemProps} height={height}>\n    {children}\n  </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n  id?: string;\n  defaultExpanded?: boolean;\n  title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n  id,\n  defaultExpanded,\n  title,\n  children,\n}) => {\n  const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n  return (\n    <section>\n      <div id={id} onClick={toggle}>\n        <Header variant='section'>\n          <HeaderIcon>\n            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            <Spacer width={0.5} height={0} />\n          </HeaderIcon>\n          {title}\n        </Header>\n      </div>\n      <div>\n        {isOpen && (\n          <>\n            <Spacer height={1} />\n            {children}\n          </>\n        )}\n      </div>\n      <Spacer height={1} />\n    </section>\n  );\n};\n\nconst HeaderIcon = styled.div`\n  display: flex;\n`;\n\nexport default Object.assign(Card, {\n  Title,\n  SectionHeader,\n  Subtitle,\n  Body,\n  Image,\n  CollapsibleSection,\n});\n"],"mappings":";;;;;;;;;;AAcA,MAAa,kBAAkB,OAAO,GAAkD;IACpF,gBAAgB,GAAG;;;;;sBAKD,QAAQ,GAAG;OAC1B,EAAE,mBACH,gBACA,GAAG;yBACgB,QAAQ,GAAG;QAC5B;;KAEH,EAAE,cACH,YAAY,aACZ,GAAG;kCAC2B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;MACrE;;AAGN,MAAa,iBAAiB,OAAO,GAAG;;;SAG/B,QAAQ,GAAG;;AAGpB,MAAaA,UAAQ,OAAO,EAAiD;;;;SAIpE,QAAQ,GAAG;KACf,EAAE,cAAc;AACjB,SAAQ,SAAR;EACE,KAAK,UACH,QAAO,gBAAgB;EAEzB,QACE,QAAO,cAAc;;EAEzB;KACC,EAAE,mBACH,gBACA,GAAG;QACC,cAAc,IAAI;MACpB;;AAGN,MAAa,mBAAmB,OAAO,GAAG;YAC9B,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;SAG5C,QAAQ,GAAG;;AAGpB,MAAM,cAAc,OAAO,EAAE;0BACH,MAAM,cAAc;;;;kBAI5B,QAAQ,GAAG;mBACV,QAAQ,GAAG;;AAG9B,MAAM,UAAU,EACd,UACA,SACA,SACA,UACA,cACA,GAAG,gBACgD;AACnD,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,iBAAD;EAA0B;EAAS,GAAI;EAAyB;YAAhE,CACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAACA,SAAD;GAAgB;GAAuB;GACpC;GACK,CAAA,EACP,SACc,EAAA,CAAA,EACjB,oBAAC,kBAAD,EAAA,UAAmB,SAA2B,CAAA,CAC9B;KACjB,gBAAgB,oBAAC,aAAD,EAAe,CAAA,CAC/B,EAAA,CAAA;;AAIP,MAAa,OAAO;;;;;;AC5EpB,MAAM,OAAO,OAAO,MAAM;oBACN,EAAE,YAAY;AAC9B,QAAO,MAAM,KAAK;EAClB;;;mBAGe,QAAQ,GAAG;uBACP,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;kBAClD,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;KACtD,EAAE,eACH,YACA,GAAG;;MAED;;KAED,EAAE,mBACH,gBACA,GAAG;;MAED;;;;;;AAON,MAAM,OAAO,OAAO,UAAU;;cAEhB,EAAE,cAAc,WAAW,QAAQ,GAAG;;;eAGrC,EAAE,UAAW,OAAO,OAAO,MAAA,EAAY;;;;;;;KAOjD,EAAE,mBACH,gBACA,GAAG;iBACU,QAAQ,GAAG,GAAG,QAAQ,GAAG;kBACxB,QAAQ,GAAG;MACvB;;AAGN,MAAM,gBAAgB,OAAO,MAAM;kBACjB,QAAQ,GAAG;;;;;;;;;AAU7B,MAAM,eAAe,OAAO,MAAM;;;oBAGd,EAAE,YAAY,MAAM,KAAK,aAAa,IAAI,EAAE,YAAY,MAAM,KAAK,aAAa;;;KAG/F,EAAE,aAAa;AAChB,QAAO,GAAG;gBACE,OAAO;;EAEnB;;;;;sBAKkB,EAAE,YAAY,MAAM,KAAK,aAAa;SACnD,EAAE,YAAY,MAAM,KAAK,aAAa;;;;;;;AAoB/C,MAAM,SAAyB,EAAE,MAAM,UAAU,GAAG,gBAClD,qBAAC,QAAD;CAAQ,SAAQ;CAAQ,GAAI;WAA5B,CACG,QAAQ,QAAQ,oBAAC,eAAD,EAAA,UAAgB,MAAqB,CAAA,EACrD,SACM;;;;;AAMX,MAAM,WAAW,OAAO,UAAU,CAAC,aAAa,EAAE,MAAM,MAAM,EAAE;YACpD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;;;AAWpD,MAAM,iBAAiB,EAAE,UAAU,GAAG,gBACpC,oBAAC,QAAD;CAAQ,SAAQ;CAAU,GAAI;CAC3B;CACM,CAAA;AAYX,MAAM,SAAyB,EAAE,QAAQ,UAAU,GAAG,gBACpD,oBAAC,cAAD;CAAc,GAAI;CAAmB;CAClC;CACY,CAAA;AASjB,MAAM,sBAAsE,EAC1E,IACA,iBACA,OACA,eACI;CACJ,MAAM,CAAC,QAAQ,EAAE,YAAY,UAAU,gBAAgB;AAEvD,QACE,qBAAC,WAAD,EAAA,UAAA;EACE,oBAAC,OAAD;GAAS;GAAI,SAAS;aACpB,qBAAC,QAAD;IAAQ,SAAQ;cAAhB,CACE,qBAAC,YAAD,EAAA,UAAA,CACG,SAAS,oBAAC,eAAD,EAAiB,CAAA,GAAG,oBAAC,iBAAD,EAAmB,CAAA,EACjD,oBAACC,gBAAD;KAAQ,OAAO;KAAK,QAAQ;KAAK,CAAA,CACtB,EAAA,CAAA,EACZ,MACM;;GACL,CAAA;EACN,oBAAC,OAAD,EAAA,UACG,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAACA,gBAAD,EAAQ,QAAQ,GAAK,CAAA,EACpB,SACA,EAAA,CAAA,EAED,CAAA;EACN,oBAACA,gBAAD,EAAQ,QAAQ,GAAK,CAAA;EACb,EAAA,CAAA;;AAId,MAAM,aAAa,OAAO,GAAG;;;AAI7B,IAAA,eAAe,OAAO,OAAO,MAAM;CACjC;CACA;CACA;CACA;CACA;CACA;CACD,CAAC"}