@persona/design-system 0.7.1 → 0.8.0

package/dist/components/StatusIndicator/index.mjs

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

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

@@ -1,2 +1,2 @@
-import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-Bf9rhSkv.mjs";
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-BmyKaxwx.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/components/Sticker/index.mjs

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

package/dist/components/TabBar/index.mjs

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

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

@@ -1,9 +1,9 @@
-import { t as Table } from "../../Table-BefytM6w.mjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-C_7X8QAT.mjs";
-import { t as TableRow } from "../../TableRow-Dr61XJNw.mjs";
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "../../TableCell-DorRxyke.mjs";
-import { t as TableHead } from "../../TableHead-B0Fdldgw.mjs";
-import { t as TableBody } from "../../TableBody-BZ34-_wV.mjs";
-import { t as TableTH } from "../../index-DalP_w0c.mjs";
-import { t as TableLayout } from "../../TableLayout-CXVVzq0e.mjs";
+import { t as Table } from "../../Table-DhdHUQ8V.mjs";
+import { t as TableHeaderCell } from "../../TableHeaderCell-C7gp9j1X.mjs";
+import { t as TableRow } from "../../TableRow-BJZM8I8i.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "../../TableCell-CGPQRc5g.mjs";
+import { t as TableHead } from "../../TableHead-36j-_oyn.mjs";
+import { t as TableBody } from "../../TableBody-qoSvQDds.mjs";
+import { t as TableTH } from "../../index-BXSe73Xn.mjs";
+import { t as TableLayout } from "../../TableLayout-CQqIV0vj.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellProps, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

package/dist/components/Table/index.mjs

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

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

@@ -1,3 +1,3 @@
-import { t as DragDirection } from "../../useTableBoxDragAndDrop-CbbH3pMK.mjs";
-import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-CHGw9HVj.mjs";
+import { t as DragDirection } from "../../useTableBoxDragAndDrop-Da4TiYBT.mjs";
+import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-DzYMx4Ju.mjs";
 export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };

package/dist/components/TableBox/index.mjs

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

package/dist/components/TechnicalSticker/index.mjs

@@ -1,2 +1,2 @@
-import { t as TechnicalSticker } from "../../TechnicalSticker-_LtE-PRY.mjs";
+import { t as TechnicalSticker } from "../../TechnicalSticker-CL0zkOAj.mjs";
 export { TechnicalSticker, TechnicalSticker as default };

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

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

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

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

package/dist/components/TextArea/index.mjs

@@ -1,2 +1,2 @@
-import { t as TextAreaWithStyle } from "../../TextArea-8TuVvmvj.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-CfZr5Sk4.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default };

package/dist/components/Tile/index.mjs

@@ -2,8 +2,8 @@ import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
 import { i as Paragraph, n as Heading } from "../../Text-BdluS7Fy.mjs";
 import { t as TextUnderlineTooltip } from "../../Tooltip-C0FuZS1C.mjs";
-import { n as Stack, t as HStack } from "../../Stack-ChsImaEY.mjs";
-import { n as Sticker } from "../../Sticker-C3Eb13OQ.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bkn0TUDe.mjs";
+import { n as Sticker } from "../../Sticker-BLbgJxcH.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "@persona/icons/12px";

package/dist/components/Toast/index.mjs

@@ -6,7 +6,7 @@ import { withAlpha } from "../../lib/color.mjs";
 import "../../lib/message.mjs";
 import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
 import "../../variables/effect.mjs";
-import { t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
+import { t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from "@persona/icons";
@@ -49,7 +49,7 @@ const CloseButton = styled(IconButton)`
   &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {
     background-color: ${({ theme }) => {
 	const tokens = semanticTokens(theme);
-	return tokens ? withAlpha(tokens.ActionNeutralHover, tokens.Opacity65) : "rgba(0, 0, 0, 0.05)";
+	return tokens ? withAlpha(tokens.ActionNeutralHover, tokens.Opacity25) : "rgba(0, 0, 0, 0.05)";
 }};
     ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["XIcon"],"sources":["../../../components/Toast/Toast.tsx"],"sourcesContent":["import { type HTMLMotionProps, motion } from 'framer-motion';\nimport type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport {\n  isActive,\n  isFocused,\n  isHovered,\n  isNotDisabled,\n} from '@persona/design-system/lib/pseudoClass';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Elevation } from '@persona/design-system/variables/effect';\nimport { TransitionDurationInSeconds } from '@persona/design-system/variables/transitions';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from '@persona/icons';\nimport { XIcon } from '@persona/icons/12px';\nimport { withAlpha } from 'design-system/lib/color';\nimport { MessageType } from 'design-system/lib/message';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\n\nexport interface ToastProps extends HTMLMotionProps<'div'> {\n  id: string;\n  message: React.ReactNode;\n  messageType: MessageType;\n  onDismiss?: () => void;\n  shouldClipOverflow?: boolean;\n}\n\n// This is exported and used by whatever container is rendering the Toasts\nexport const TOAST_WIDTH = '324px';\n\nconst BaseToast = styled(motion.div)`\n  border-radius: ${BorderRadius.Md};\n  box-shadow: ${Elevation.Low};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimaryStatic', theme.color.text.primary)};\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  box-sizing: border-box;\n  padding: ${Spacing[2]} ${Spacing[3]};\n  width: 100%;\n`;\n\nconst ToastIcon = styled.div`\n  flex-shrink: 0;\n  display: flex;\n  line-height: 0;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimaryStatic', Color.BorderIconPrimary)};\n`;\n\nconst ToastContent = styled.div<{ $clip?: boolean }>`\n  flex: 1;\n  min-width: 0; /* needed for text to wrap/truncate inside flex container */\n  ${({ $clip }) =>\n    $clip &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `}\n`;\n\nconst CloseButton = styled(IconButton)<{ isFocusVisible?: boolean }>`\n  flex-shrink: 0;\n  margin-left: auto;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimaryStatic', Color.BorderIconPrimary)};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.ActionNeutralHover, tokens.Opacity65)\n        : 'rgba(0, 0, 0, 0.05)';\n    }};\n    ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nconst NoticeToast = styled(BaseToast)`\n  background: ${({ theme }) => semanticColor(theme, 'StatusInfo1', Color.CorePurple200)};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${({ theme }) => semanticColor(theme, 'StatusSuccess1', Color.CoreGreen200)};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${({ theme }) => semanticColor(theme, 'StatusDanger2', Color.CoreRed200)};\n`;\n\nconst getStyledComponent = (variant: MessageType) => {\n  switch (variant) {\n    case MessageType.Success:\n      return SuccessToast;\n    case MessageType.Failure:\n      return FailureToast;\n    case MessageType.Notice:\n    default:\n      return NoticeToast;\n  }\n};\n\nconst getIcon = (variant: MessageType): ReactElement => {\n  switch (variant) {\n    case MessageType.Success:\n      return <CircleCheckIcon />;\n    case MessageType.Failure:\n      return <CircleAlertIcon />;\n    case MessageType.Notice:\n    default:\n      return <CircleInfoIcon />;\n  }\n};\n\nexport const Toast = ({\n  message,\n  messageType,\n  onDismiss,\n  shouldClipOverflow,\n  ...elemProps\n}: ToastProps) => {\n  const StyledToast = getStyledComponent(messageType);\n\n  return (\n    <StyledToast\n      initial={{ y: 64, opacity: 0, scale: 0.96 }}\n      animate={{ y: 0, opacity: 1, scale: 1 }}\n      exit={{\n        opacity: 0,\n        scale: 0.9,\n        transition: { duration: TransitionDurationInSeconds.MediumFast, ease: 'easeOut' },\n      }}\n      role='alert'\n      aria-live='polite'\n      transition={{ type: 'tween', duration: TransitionDurationInSeconds.Medium, ease: 'easeOut' }}\n      {...elemProps}\n    >\n      <ToastIcon>{getIcon(messageType)}</ToastIcon>\n      <ToastContent $clip={shouldClipOverflow}>{message}</ToastContent>\n      {onDismiss && (\n        <CloseButton size='sm' aria-label='Close' title='Close' onClick={onDismiss}>\n          <XIcon />\n        </CloseButton>\n      )}\n    </StyledToast>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,cAAc;AAE3B,MAAM,YAAY,OAAO,OAAO,IAAI;mBACjB,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,MAAM,KAAK,QAAQ,CAAC;IACxF,gBAAgB,GAAG;;;SAGd,QAAQ,GAAG;;aAEP,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;AAItC,MAAM,YAAY,OAAO,GAAG;;;;YAIhB,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;AAG3F,MAAM,eAAe,OAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,OAAO,WAAW;;;YAG1B,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;KAEtF,WAAW,cAAc,KAAK,YAAY,cAAc;yBACpC,EAAE,YAAY;CACjC,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,UAAU,OAAO,oBAAoB,OAAO,UAAU,GACtD;EACJ;MACA,cAAc,WAAW,UAAU,OAAO,gBAAgB,GAAG,CAAC;;;KAG/D,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,OAAO,UAAU;iBACpB,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,cAAc,CAAC;;AAGxF,MAAM,eAAe,OAAO,UAAU;iBACrB,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,aAAa,CAAC;;AAG1F,MAAM,eAAe,OAAO,UAAU;iBACrB,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,WAAW,CAAC;;AAGvF,MAAM,sBAAsB,YAAyB;AACnD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO;EACT,KAAA,UACE,QAAO;EAET,QACE,QAAO;;;AAIb,MAAM,WAAW,YAAuC;AACtD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO,oBAAC,iBAAD,EAAmB,CAAA;EAC5B,KAAA,UACE,QAAO,oBAAC,iBAAD,EAAmB,CAAA;EAE5B,QACE,QAAO,oBAAC,gBAAD,EAAkB,CAAA;;;AAI/B,MAAa,SAAS,EACpB,SACA,aACA,WACA,oBACA,GAAG,gBACa;AAGhB,QACE,qBAHkB,mBAAmB,YAGzB,EAAZ;EACE,SAAS;GAAE,GAAG;GAAI,SAAS;GAAG,OAAO;GAAM;EAC3C,SAAS;GAAE,GAAG;GAAG,SAAS;GAAG,OAAO;GAAG;EACvC,MAAM;GACJ,SAAS;GACT,OAAO;GACP,YAAY;IAAE,UAAA;IAAkD,MAAM;IAAW;GAClF;EACD,MAAK;EACL,aAAU;EACV,YAAY;GAAE,MAAM;GAAS,UAAA;GAA8C,MAAM;GAAW;EAC5F,GAAI;YAXN;GAaE,oBAAC,WAAD,EAAA,UAAY,QAAQ,YAAY,EAAa,CAAA;GAC7C,oBAAC,cAAD;IAAc,OAAO;cAAqB;IAAuB,CAAA;GAChE,aACC,oBAAC,aAAD;IAAa,MAAK;IAAK,cAAW;IAAQ,OAAM;IAAQ,SAAS;cAC/D,oBAACA,SAAD,EAAS,CAAA;IACG,CAAA;GAEJ"}
+{"version":3,"file":"index.mjs","names":["XIcon"],"sources":["../../../components/Toast/Toast.tsx"],"sourcesContent":["import { type HTMLMotionProps, motion } from 'framer-motion';\nimport type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport {\n  isActive,\n  isFocused,\n  isHovered,\n  isNotDisabled,\n} from '@persona/design-system/lib/pseudoClass';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Elevation } from '@persona/design-system/variables/effect';\nimport { TransitionDurationInSeconds } from '@persona/design-system/variables/transitions';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from '@persona/icons';\nimport { XIcon } from '@persona/icons/12px';\nimport { withAlpha } from 'design-system/lib/color';\nimport { MessageType } from 'design-system/lib/message';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\n\nexport interface ToastProps extends HTMLMotionProps<'div'> {\n  id: string;\n  message: React.ReactNode;\n  messageType: MessageType;\n  onDismiss?: () => void;\n  shouldClipOverflow?: boolean;\n}\n\n// This is exported and used by whatever container is rendering the Toasts\nexport const TOAST_WIDTH = '324px';\n\nconst BaseToast = styled(motion.div)`\n  border-radius: ${BorderRadius.Md};\n  box-shadow: ${Elevation.Low};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimaryStatic', theme.color.text.primary)};\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  box-sizing: border-box;\n  padding: ${Spacing[2]} ${Spacing[3]};\n  width: 100%;\n`;\n\nconst ToastIcon = styled.div`\n  flex-shrink: 0;\n  display: flex;\n  line-height: 0;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimaryStatic', Color.BorderIconPrimary)};\n`;\n\nconst ToastContent = styled.div<{ $clip?: boolean }>`\n  flex: 1;\n  min-width: 0; /* needed for text to wrap/truncate inside flex container */\n  ${({ $clip }) =>\n    $clip &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `}\n`;\n\nconst CloseButton = styled(IconButton)<{ isFocusVisible?: boolean }>`\n  flex-shrink: 0;\n  margin-left: auto;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimaryStatic', Color.BorderIconPrimary)};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.ActionNeutralHover, tokens.Opacity25)\n        : 'rgba(0, 0, 0, 0.05)';\n    }};\n    ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nconst NoticeToast = styled(BaseToast)`\n  background: ${({ theme }) => semanticColor(theme, 'StatusInfo1', Color.CorePurple200)};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${({ theme }) => semanticColor(theme, 'StatusSuccess1', Color.CoreGreen200)};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${({ theme }) => semanticColor(theme, 'StatusDanger2', Color.CoreRed200)};\n`;\n\nconst getStyledComponent = (variant: MessageType) => {\n  switch (variant) {\n    case MessageType.Success:\n      return SuccessToast;\n    case MessageType.Failure:\n      return FailureToast;\n    case MessageType.Notice:\n    default:\n      return NoticeToast;\n  }\n};\n\nconst getIcon = (variant: MessageType): ReactElement => {\n  switch (variant) {\n    case MessageType.Success:\n      return <CircleCheckIcon />;\n    case MessageType.Failure:\n      return <CircleAlertIcon />;\n    case MessageType.Notice:\n    default:\n      return <CircleInfoIcon />;\n  }\n};\n\nexport const Toast = ({\n  message,\n  messageType,\n  onDismiss,\n  shouldClipOverflow,\n  ...elemProps\n}: ToastProps) => {\n  const StyledToast = getStyledComponent(messageType);\n\n  return (\n    <StyledToast\n      initial={{ y: 64, opacity: 0, scale: 0.96 }}\n      animate={{ y: 0, opacity: 1, scale: 1 }}\n      exit={{\n        opacity: 0,\n        scale: 0.9,\n        transition: { duration: TransitionDurationInSeconds.MediumFast, ease: 'easeOut' },\n      }}\n      role='alert'\n      aria-live='polite'\n      transition={{ type: 'tween', duration: TransitionDurationInSeconds.Medium, ease: 'easeOut' }}\n      {...elemProps}\n    >\n      <ToastIcon>{getIcon(messageType)}</ToastIcon>\n      <ToastContent $clip={shouldClipOverflow}>{message}</ToastContent>\n      {onDismiss && (\n        <CloseButton size='sm' aria-label='Close' title='Close' onClick={onDismiss}>\n          <XIcon />\n        </CloseButton>\n      )}\n    </StyledToast>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,cAAc;AAE3B,MAAM,YAAY,OAAO,OAAO,IAAI;mBACjB,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,MAAM,KAAK,QAAQ,CAAC;IACxF,gBAAgB,GAAG;;;SAGd,QAAQ,GAAG;;aAEP,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;AAItC,MAAM,YAAY,OAAO,GAAG;;;;YAIhB,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;AAG3F,MAAM,eAAe,OAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,OAAO,WAAW;;;YAG1B,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;KAEtF,WAAW,cAAc,KAAK,YAAY,cAAc;yBACpC,EAAE,YAAY;CACjC,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,UAAU,OAAO,oBAAoB,OAAO,UAAU,GACtD;EACJ;MACA,cAAc,WAAW,UAAU,OAAO,gBAAgB,GAAG,CAAC;;;KAG/D,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,OAAO,UAAU;iBACpB,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,cAAc,CAAC;;AAGxF,MAAM,eAAe,OAAO,UAAU;iBACrB,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,aAAa,CAAC;;AAG1F,MAAM,eAAe,OAAO,UAAU;iBACrB,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,WAAW,CAAC;;AAGvF,MAAM,sBAAsB,YAAyB;AACnD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO;EACT,KAAA,UACE,QAAO;EAET,QACE,QAAO;;;AAIb,MAAM,WAAW,YAAuC;AACtD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO,oBAAC,iBAAD,EAAmB,CAAA;EAC5B,KAAA,UACE,QAAO,oBAAC,iBAAD,EAAmB,CAAA;EAE5B,QACE,QAAO,oBAAC,gBAAD,EAAkB,CAAA;;;AAI/B,MAAa,SAAS,EACpB,SACA,aACA,WACA,oBACA,GAAG,gBACa;AAGhB,QACE,qBAHkB,mBAAmB,YAGzB,EAAZ;EACE,SAAS;GAAE,GAAG;GAAI,SAAS;GAAG,OAAO;GAAM;EAC3C,SAAS;GAAE,GAAG;GAAG,SAAS;GAAG,OAAO;GAAG;EACvC,MAAM;GACJ,SAAS;GACT,OAAO;GACP,YAAY;IAAE,UAAA;IAAkD,MAAM;IAAW;GAClF;EACD,MAAK;EACL,aAAU;EACV,YAAY;GAAE,MAAM;GAAS,UAAA;GAA8C,MAAM;GAAW;EAC5F,GAAI;YAXN;GAaE,oBAAC,WAAD,EAAA,UAAY,QAAQ,YAAY,EAAa,CAAA;GAC7C,oBAAC,cAAD;IAAc,OAAO;cAAqB;IAAuB,CAAA;GAChE,aACC,oBAAC,aAAD;IAAa,MAAK;IAAK,cAAW;IAAQ,OAAM;IAAQ,SAAS;cAC/D,oBAACA,SAAD,EAAS,CAAA;IACG,CAAA;GAEJ"}

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

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

package/dist/components/Toggle/index.mjs

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

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

@@ -1,4 +1,4 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-Cnqf1-tx.mjs";
-import { t as HelperTooltip } from "../../HelperTooltip-CQpPO16Q.mjs";
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-BPLKU9wu.mjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-4pshzB_i.mjs";
+import { t as HelperTooltip } from "../../HelperTooltip-DcyrpEZI.mjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-BgLQuK38.mjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

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

@@ -0,0 +1,3 @@
+import { n as VersionHistoryItemProps, r as VersionHistoryStatus } from "../../VersionHistoryItem-CIcEgl0K.mjs";
+import { VersionHistory, VersionHistoryProps } from "../../VersionHistory.mjs";
+export { VersionHistory, VersionHistory as default, type VersionHistoryItemProps, type VersionHistoryProps, type VersionHistoryStatus };