@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/components/TechnicalSticker/index.mjs

@@ -0,0 +1,232 @@
+import { isHovered } from "../../lib/pseudoClass.mjs";
+import { t as MiddleTruncatedText } from "../../MiddleTruncatedText-Bzpg3zAU.mjs";
+import { t as useToggle } from "../../useToggle-3k3EkV8V.mjs";
+import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
+import copyTextToClipboard from "../../lib/copyTextToClipboard.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyIcon } from "@persona/icons/12px";
+//#region components/TechnicalSticker/TechnicalSticker.tsx
+const COPY_CONFIRMATION_TEXT = "Copied!";
+const COPY_CONFIRMATION_DURATION_MS = 1200;
+const DEFAULT_COPY_TOOLTIP_LABEL = "Copy ID";
+const HREF_VALIDATION_BASE_URL = "https://withpersona.com";
+const TECHNICAL_TEXT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;
+const technicalStickerBackgrounds = {
+	grey: Color.BackgroundLabelGrey,
+	white: Color.BackgroundLabelWhite
+};
+const technicalStickerHoverBackgrounds = {
+	grey: Color.BackgroundLabelGreyHover,
+	white: Color.BackgroundButtonInverseHover
+};
+const isSafeTechnicalStickerHref = (href) => {
+	try {
+		const url = new URL(href, HREF_VALIDATION_BASE_URL);
+		return url.protocol === "http:" || url.protocol === "https:";
+	} catch {
+		return false;
+	}
+};
+const TechnicalStickerShell = styled.div`
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+
+  border-radius: ${BorderRadius.Sm};
+  height: 1rem;
+  width: ${({ $width }) => typeof $width === "number" ? `${$width}px` : $width ?? "auto"};
+  max-width: 100%;
+  box-sizing: border-box;
+
+  color: ${({ theme, disabled }) => disabled ? theme.color.text.disabled : theme.color.text.primary};
+  background: ${({ variant }) => technicalStickerBackgrounds[variant]};
+
+  position: relative;
+  overflow: hidden;
+  border: 1px solid ${Color.BorderInputDefault};
+
+  ${({ variant, disabled }) => !disabled && css`
+      &:hover {
+        background: ${technicalStickerHoverBackgrounds[variant]};
+      }
+    `}
+`;
+const labelContainerStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 ${Spacing[1]};
+`;
+const LabelContainer = styled.div`
+  ${labelContainerStyles}
+`;
+const LabelLink = styled.a`
+  ${labelContainerStyles}
+  color: inherit;
+  text-decoration: none;
+`;
+const TechnicalText = styled(MiddleTruncatedText)`
+  ${Typography.TextMono};
+  font-size: ${Typography.TextExtraSmall.fontSize};
+  line-height: ${Typography.TextExtraSmall.lineHeight};
+  text-align: center;
+
+  ${({ $isLinkEnabled, $isTruncated }) => $isTruncated && css`
+      cursor: ${$isLinkEnabled ? "pointer" : "default"};
+      user-select: none;
+
+      & > span {
+        user-select: none;
+      }
+    `}
+`;
+const CopyActions = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: 16px;
+  opacity: ${({ $visible }) => $visible ? 1 : 0};
+  pointer-events: ${({ $visible }) => $visible ? "auto" : "none"};
+  transition: opacity 120ms ease-in-out;
+
+  &:focus-within {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+const CopyGradient = styled.div`
+  width: 8px;
+  height: 16px;
+  background: linear-gradient(to left, ${({ $background }) => $background}, transparent);
+`;
+const CopyButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0 2px 0 0;
+  border: none;
+  background: ${({ $background }) => $background};
+  color: ${Color.BorderIconPrimary};
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &${isHovered}:not(:disabled) {
+    color: ${Color.TextPrimary};
+  }
+`;
+const TechnicalSticker = ({ variant = "grey", href, tooltipLabel: tooltipLabelProp, copyTooltipLabel = DEFAULT_COPY_TOOLTIP_LABEL, copyable = true, copyValue, width, maxWidth = "96px", children, disabled, onMouseEnter, onMouseLeave, ...stickerProps }) => {
+	const [isHoveredState, setIsHoveredState] = useState(false);
+	const [isCopyButtonFocused, setIsCopyButtonFocused] = useState(false);
+	const [isTruncated, setIsTruncated] = useState(false);
+	const [isCopyTooltipOpen, setIsCopyTooltipOpen] = useState(false);
+	const [copyConfirmationOpen, { enable: showCopyConfirmation, disable: hideCopyConfirmation }] = useToggle(false);
+	const copyConfirmationTimerRef = useRef(null);
+	const tooltipLabel = tooltipLabelProp ?? children;
+	const hasCustomTooltipLabel = tooltipLabelProp != null;
+	const hoverBackground = technicalStickerHoverBackgrounds[variant];
+	const copyActionBackground = isHoveredState ? hoverBackground : technicalStickerBackgrounds[variant];
+	const showCopyActions = copyable && !disabled && (isHoveredState || isCopyButtonFocused || copyConfirmationOpen);
+	const showStickerTooltip = tooltipLabel.length > 0 && (isTruncated || hasCustomTooltipLabel);
+	const isCopyTooltipVisible = isCopyTooltipOpen || copyConfirmationOpen;
+	const isLinkEnabled = href != null && !disabled && isSafeTechnicalStickerHref(href);
+	const handleCopyTooltipOpenChange = useCallback((open) => {
+		if (copyConfirmationOpen) return;
+		setIsCopyTooltipOpen(open);
+	}, [copyConfirmationOpen]);
+	const handleCopy = useCallback(async (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (disabled) return;
+		if (!await copyTextToClipboard(copyValue ?? children)) return;
+		setIsCopyTooltipOpen(true);
+		showCopyConfirmation();
+		if (copyConfirmationTimerRef.current) clearTimeout(copyConfirmationTimerRef.current);
+		copyConfirmationTimerRef.current = setTimeout(() => {
+			setIsCopyTooltipOpen(false);
+			hideCopyConfirmation();
+			copyConfirmationTimerRef.current = null;
+		}, COPY_CONFIRMATION_DURATION_MS);
+	}, [
+		children,
+		copyValue,
+		disabled,
+		hideCopyConfirmation,
+		showCopyConfirmation
+	]);
+	useEffect(() => () => {
+		if (copyConfirmationTimerRef.current) clearTimeout(copyConfirmationTimerRef.current);
+	}, []);
+	const technicalText = /* @__PURE__ */ jsx(TechnicalText, {
+		value: children,
+		maxWidth: width ?? maxWidth,
+		font: TECHNICAL_TEXT_FONT,
+		onTruncatedChange: setIsTruncated,
+		titleBehavior: "never",
+		$isLinkEnabled: isLinkEnabled,
+		$isTruncated: isTruncated
+	});
+	const labelContent = isLinkEnabled ? /* @__PURE__ */ jsx(LabelLink, {
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: technicalText
+	}) : /* @__PURE__ */ jsx(LabelContainer, { children: technicalText });
+	const labelWithTooltip = showStickerTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		trigger: labelContent,
+		interactive: true,
+		side: "top",
+		maxWidth: "400px",
+		children: tooltipLabel
+	}) : labelContent;
+	return /* @__PURE__ */ jsxs(TechnicalStickerShell, {
+		...stickerProps,
+		variant,
+		disabled,
+		$width: width,
+		onMouseEnter: (event) => {
+			onMouseEnter?.(event);
+			setIsHoveredState(true);
+		},
+		onMouseLeave: (event) => {
+			onMouseLeave?.(event);
+			setIsHoveredState(false);
+		},
+		children: [labelWithTooltip, copyable && /* @__PURE__ */ jsxs(CopyActions, {
+			$visible: showCopyActions,
+			children: [/* @__PURE__ */ jsx(CopyGradient, { $background: copyActionBackground }), /* @__PURE__ */ jsx(Tooltip, {
+				open: isCopyTooltipVisible,
+				onOpenChange: handleCopyTooltipOpenChange,
+				trigger: /* @__PURE__ */ jsx(CopyButton, {
+					type: "button",
+					"aria-label": "Copy",
+					disabled,
+					$background: copyActionBackground,
+					onClick: handleCopy,
+					onBlur: () => setIsCopyButtonFocused(false),
+					onFocus: () => setIsCopyButtonFocused(true),
+					children: /* @__PURE__ */ jsx(CopyIcon, {})
+				}),
+				interactive: false,
+				side: "top",
+				children: copyConfirmationOpen ? COPY_CONFIRMATION_TEXT : copyTooltipLabel
+			})]
+		})]
+	});
+};
+//#endregion
+export { TechnicalSticker, TechnicalSticker as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/TechnicalSticker/TechnicalSticker.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons/12px';\nimport Tooltip from 'design-system/components/Tooltip';\nimport copyTextToClipboard from 'design-system/lib/copyTextToClipboard';\nimport MiddleTruncatedText from 'design-system/lib/MiddleTruncatedText';\nimport { isHovered } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\n\nexport type TechnicalStickerVariant = 'grey' | 'white';\n\nconst COPY_CONFIRMATION_TEXT = 'Copied!';\nconst COPY_CONFIRMATION_DURATION_MS = 1200;\nconst DEFAULT_COPY_TOOLTIP_LABEL = 'Copy ID';\nconst HREF_VALIDATION_BASE_URL = 'https://withpersona.com';\nconst TECHNICAL_TEXT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\n\nconst technicalStickerBackgrounds: Record<TechnicalStickerVariant, string> = {\n  grey: Color.BackgroundLabelGrey,\n  white: Color.BackgroundLabelWhite,\n};\n\nconst technicalStickerHoverBackgrounds: Record<TechnicalStickerVariant, string> = {\n  grey: Color.BackgroundLabelGreyHover,\n  white: Color.BackgroundButtonInverseHover,\n};\n\nconst isSafeTechnicalStickerHref = (href: string) => {\n  try {\n    const url = new URL(href, HREF_VALIDATION_BASE_URL);\n    return url.protocol === 'http:' || url.protocol === 'https:';\n  } catch {\n    return false;\n  }\n};\n\nconst TechnicalStickerShell = styled.div<{\n  variant: TechnicalStickerVariant;\n  disabled?: boolean;\n  $width?: number | string;\n}>`\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  width: ${({ $width }) => (typeof $width === 'number' ? `${$width}px` : ($width ?? 'auto'))};\n  max-width: 100%;\n  box-sizing: border-box;\n\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.color.text.disabled : theme.color.text.primary};\n  background: ${({ variant }) => technicalStickerBackgrounds[variant]};\n\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${Color.BorderInputDefault};\n\n  ${({ variant, disabled }) =>\n    !disabled &&\n    css`\n      &:hover {\n        background: ${technicalStickerHoverBackgrounds[variant]};\n      }\n    `}\n`;\n\nconst labelContainerStyles = css`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 ${Spacing[1]};\n`;\n\nconst LabelContainer = styled.div`\n  ${labelContainerStyles}\n`;\n\nconst LabelLink = styled.a`\n  ${labelContainerStyles}\n  color: inherit;\n  text-decoration: none;\n`;\n\nconst TechnicalText = styled(MiddleTruncatedText)<{\n  $isLinkEnabled: boolean;\n  $isTruncated: boolean;\n}>`\n  ${Typography.TextMono};\n  font-size: ${Typography.TextExtraSmall.fontSize};\n  line-height: ${Typography.TextExtraSmall.lineHeight};\n  text-align: center;\n\n  ${({ $isLinkEnabled, $isTruncated }) =>\n    $isTruncated &&\n    css`\n      cursor: ${$isLinkEnabled ? 'pointer' : 'default'};\n      user-select: none;\n\n      & > span {\n        user-select: none;\n      }\n    `}\n`;\n\nconst CopyActions = styled.div<{ $visible: boolean }>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  height: 16px;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};\n  transition: opacity 120ms ease-in-out;\n\n  &:focus-within {\n    opacity: 1;\n    pointer-events: auto;\n  }\n`;\n\nconst CopyGradient = styled.div<{ $background: string }>`\n  width: 8px;\n  height: 16px;\n  background: linear-gradient(to left, ${({ $background }) => $background}, transparent);\n`;\n\nconst CopyButton = styled.button<{ $background: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0 2px 0 0;\n  border: none;\n  background: ${({ $background }) => $background};\n  color: ${Color.BorderIconPrimary};\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &${isHovered}:not(:disabled) {\n    color: ${Color.TextPrimary};\n  }\n`;\n\nexport interface TechnicalStickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Full untruncated technical value displayed in the sticker. */\n  children: string;\n  /** Visual style for the technical sticker. Default: `grey`. */\n  variant?: TechnicalStickerVariant;\n  /** Renders disabled style and disables copy/link interaction. */\n  disabled?: boolean;\n  /** Opens in a new tab when the sticker body is clicked. */\n  href?: string;\n  /**\n   * Hover tooltip for the sticker body. Shown when text is truncated or when set explicitly.\n   * Defaults to the untruncated `children` string when shown.\n   */\n  tooltipLabel?: string;\n  /**\n   * Hover tooltip for the copy icon.\n   * Defaults to `Copy ID`.\n   */\n  copyTooltipLabel?: string;\n  /** Whether to show the hover copy action. Default: true. */\n  copyable?: boolean;\n  /** Value copied to the clipboard. Defaults to `children`. */\n  copyValue?: string;\n  /** Width of the sticker. Numbers are interpreted as pixels. */\n  width?: number | string;\n  /** Max width for middle truncation. Default: '96px'. */\n  maxWidth?: number | string;\n}\n\nexport const TechnicalSticker = ({\n  variant = 'grey',\n  href,\n  tooltipLabel: tooltipLabelProp,\n  copyTooltipLabel = DEFAULT_COPY_TOOLTIP_LABEL,\n  copyable = true,\n  copyValue,\n  width,\n  maxWidth = '96px',\n  children,\n  disabled,\n  onMouseEnter,\n  onMouseLeave,\n  ...stickerProps\n}: TechnicalStickerProps) => {\n  const [isHoveredState, setIsHoveredState] = useState(false);\n  const [isCopyButtonFocused, setIsCopyButtonFocused] = useState(false);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [isCopyTooltipOpen, setIsCopyTooltipOpen] = useState(false);\n  const [copyConfirmationOpen, { enable: showCopyConfirmation, disable: hideCopyConfirmation }] =\n    useToggle(false);\n  const copyConfirmationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const tooltipLabel = tooltipLabelProp ?? children;\n  const hasCustomTooltipLabel = tooltipLabelProp != null;\n\n  const hoverBackground = technicalStickerHoverBackgrounds[variant];\n  const copyActionBackground = isHoveredState\n    ? hoverBackground\n    : technicalStickerBackgrounds[variant];\n  const showCopyActions =\n    copyable && !disabled && (isHoveredState || isCopyButtonFocused || copyConfirmationOpen);\n  const showStickerTooltip = tooltipLabel.length > 0 && (isTruncated || hasCustomTooltipLabel);\n  const isCopyTooltipVisible = isCopyTooltipOpen || copyConfirmationOpen;\n  const isLinkEnabled = href != null && !disabled && isSafeTechnicalStickerHref(href);\n\n  const handleCopyTooltipOpenChange = useCallback(\n    (open: boolean) => {\n      if (copyConfirmationOpen) {\n        return;\n      }\n\n      setIsCopyTooltipOpen(open);\n    },\n    [copyConfirmationOpen],\n  );\n\n  const handleCopy = useCallback(\n    async (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        return;\n      }\n\n      const copyWasSuccessful = await copyTextToClipboard(copyValue ?? children);\n      if (!copyWasSuccessful) {\n        return;\n      }\n\n      setIsCopyTooltipOpen(true);\n      showCopyConfirmation();\n      if (copyConfirmationTimerRef.current) {\n        clearTimeout(copyConfirmationTimerRef.current);\n      }\n      copyConfirmationTimerRef.current = setTimeout(() => {\n        setIsCopyTooltipOpen(false);\n        hideCopyConfirmation();\n        copyConfirmationTimerRef.current = null;\n      }, COPY_CONFIRMATION_DURATION_MS);\n    },\n    [children, copyValue, disabled, hideCopyConfirmation, showCopyConfirmation],\n  );\n\n  useEffect(\n    () => () => {\n      if (copyConfirmationTimerRef.current) {\n        clearTimeout(copyConfirmationTimerRef.current);\n      }\n    },\n    [],\n  );\n\n  const technicalText = (\n    <TechnicalText\n      value={children}\n      maxWidth={width ?? maxWidth}\n      font={TECHNICAL_TEXT_FONT}\n      onTruncatedChange={setIsTruncated}\n      titleBehavior='never'\n      $isLinkEnabled={isLinkEnabled}\n      $isTruncated={isTruncated}\n    />\n  );\n\n  const labelContent = isLinkEnabled ? (\n    <LabelLink href={href} target='_blank' rel='noopener noreferrer'>\n      {technicalText}\n    </LabelLink>\n  ) : (\n    <LabelContainer>{technicalText}</LabelContainer>\n  );\n\n  const labelWithTooltip = showStickerTooltip ? (\n    <Tooltip trigger={labelContent} interactive side='top' maxWidth='400px'>\n      {tooltipLabel}\n    </Tooltip>\n  ) : (\n    labelContent\n  );\n\n  return (\n    <TechnicalStickerShell\n      {...stickerProps}\n      variant={variant}\n      disabled={disabled}\n      $width={width}\n      onMouseEnter={(event) => {\n        onMouseEnter?.(event);\n        setIsHoveredState(true);\n      }}\n      onMouseLeave={(event) => {\n        onMouseLeave?.(event);\n        setIsHoveredState(false);\n      }}\n    >\n      {labelWithTooltip}\n      {copyable && (\n        <CopyActions $visible={showCopyActions}>\n          <CopyGradient $background={copyActionBackground} />\n          <Tooltip\n            open={isCopyTooltipVisible}\n            onOpenChange={handleCopyTooltipOpenChange}\n            trigger={\n              <CopyButton\n                type='button'\n                aria-label='Copy'\n                disabled={disabled}\n                $background={copyActionBackground}\n                onClick={handleCopy}\n                onBlur={() => setIsCopyButtonFocused(false)}\n                onFocus={() => setIsCopyButtonFocused(true)}\n              >\n                <CopyIcon />\n              </CopyButton>\n            }\n            interactive={false}\n            side='top'\n          >\n            {copyConfirmationOpen ? COPY_CONFIRMATION_TEXT : copyTooltipLabel}\n          </Tooltip>\n        </CopyActions>\n      )}\n    </TechnicalStickerShell>\n  );\n};\n\nexport default TechnicalSticker;\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,yBAAyB;AAC/B,MAAM,gCAAgC;AACtC,MAAM,6BAA6B;AACnC,MAAM,2BAA2B;AACjC,MAAM,sBAAsB,GAAG,WAAW,SAAS,WAAW,GAAG,WAAW,eAAe,SAAS,GAAG,WAAW,SAAS;AAE3H,MAAM,8BAAuE;CAC3E,MAAM,MAAM;CACZ,OAAO,MAAM;CACd;AAED,MAAM,mCAA4E;CAChF,MAAM,MAAM;CACZ,OAAO,MAAM;CACd;AAED,MAAM,8BAA8B,SAAiB;AACnD,KAAI;EACF,MAAM,MAAM,IAAI,IAAI,MAAM,yBAAyB;AACnD,SAAO,IAAI,aAAa,WAAW,IAAI,aAAa;SAC9C;AACN,SAAO;;;AAIX,MAAM,wBAAwB,OAAO,GAInC;;;;;mBAKiB,aAAa,GAAG;;YAEvB,EAAE,aAAc,OAAO,WAAW,WAAW,GAAG,OAAO,MAAO,UAAU,OAAS;;;;YAIjF,EAAE,OAAO,eACjB,WAAW,MAAM,MAAM,KAAK,WAAW,MAAM,MAAM,KAAK,QAAQ;iBACnD,EAAE,cAAc,4BAA4B,SAAS;;;;sBAIhD,MAAM,mBAAmB;;KAE1C,EAAE,SAAS,eACZ,CAAC,YACD,GAAG;;sBAEe,iCAAiC,SAAS;;MAE1D;;AAGN,MAAM,uBAAuB,GAAG;;;;;;eAMjB,QAAQ,GAAG;;AAG1B,MAAM,iBAAiB,OAAO,GAAG;IAC7B,qBAAqB;;AAGzB,MAAM,YAAY,OAAO,CAAC;IACtB,qBAAqB;;;;AAKzB,MAAM,gBAAgB,OAAO,oBAAoB;IAI7C,WAAW,SAAS;eACT,WAAW,eAAe,SAAS;iBACjC,WAAW,eAAe,WAAW;;;KAGjD,EAAE,gBAAgB,mBACnB,gBACA,GAAG;gBACS,iBAAiB,YAAY,UAAU;;;;;;MAMjD;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;;;;cAQvC,EAAE,eAAgB,WAAW,IAAI,EAAG;qBAC7B,EAAE,eAAgB,WAAW,SAAS,OAAQ;;;;;;;;AASnE,MAAM,eAAe,OAAO,GAA4B;;;0CAGd,EAAE,kBAAkB,YAAY;;AAG1E,MAAM,aAAa,OAAO,MAA+B;;;;;;;;iBAQxC,EAAE,kBAAkB,YAAY;WACtC,MAAM,kBAAkB;;;;;;;KAO9B,UAAU;aACF,MAAM,YAAY;;;AAiC/B,MAAa,oBAAoB,EAC/B,UAAU,QACV,MACA,cAAc,kBACd,mBAAmB,4BACnB,WAAW,MACX,WACA,OACA,WAAW,QACX,UACA,UACA,cACA,cACA,GAAG,mBACwB;CAC3B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,CAAC,sBAAsB,EAAE,QAAQ,sBAAsB,SAAS,0BACpE,UAAU,MAAM;CAClB,MAAM,2BAA2B,OAA6C,KAAK;CAEnF,MAAM,eAAe,oBAAoB;CACzC,MAAM,wBAAwB,oBAAoB;CAElD,MAAM,kBAAkB,iCAAiC;CACzD,MAAM,uBAAuB,iBACzB,kBACA,4BAA4B;CAChC,MAAM,kBACJ,YAAY,CAAC,aAAa,kBAAkB,uBAAuB;CACrE,MAAM,qBAAqB,aAAa,SAAS,MAAM,eAAe;CACtE,MAAM,uBAAuB,qBAAqB;CAClD,MAAM,gBAAgB,QAAQ,QAAQ,CAAC,YAAY,2BAA2B,KAAK;CAEnF,MAAM,8BAA8B,aACjC,SAAkB;AACjB,MAAI,qBACF;AAGF,uBAAqB,KAAK;IAE5B,CAAC,qBAAqB,CACvB;CAED,MAAM,aAAa,YACjB,OAAO,UAAyC;AAC9C,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AAEvB,MAAI,SACF;AAIF,MAAI,CAAC,MAD2B,oBAAoB,aAAa,SAAS,CAExE;AAGF,uBAAqB,KAAK;AAC1B,wBAAsB;AACtB,MAAI,yBAAyB,QAC3B,cAAa,yBAAyB,QAAQ;AAEhD,2BAAyB,UAAU,iBAAiB;AAClD,wBAAqB,MAAM;AAC3B,yBAAsB;AACtB,4BAAyB,UAAU;KAClC,8BAA8B;IAEnC;EAAC;EAAU;EAAW;EAAU;EAAsB;EAAqB,CAC5E;AAED,uBACc;AACV,MAAI,yBAAyB,QAC3B,cAAa,yBAAyB,QAAQ;IAGlD,EAAE,CACH;CAED,MAAM,gBACJ,oBAAC,eAAD;EACE,OAAO;EACP,UAAU,SAAS;EACnB,MAAM;EACN,mBAAmB;EACnB,eAAc;EACd,gBAAgB;EAChB,cAAc;EACd,CAAA;CAGJ,MAAM,eAAe,gBACnB,oBAAC,WAAD;EAAiB;EAAM,QAAO;EAAS,KAAI;YACxC;EACS,CAAA,GAEZ,oBAAC,gBAAD,EAAA,UAAiB,eAA+B,CAAA;CAGlD,MAAM,mBAAmB,qBACvB,oBAAC,SAAD;EAAS,SAAS;EAAc,aAAA;EAAY,MAAK;EAAM,UAAS;YAC7D;EACO,CAAA,GAEV;AAGF,QACE,qBAAC,uBAAD;EACE,GAAI;EACK;EACC;EACV,QAAQ;EACR,eAAe,UAAU;AACvB,kBAAe,MAAM;AACrB,qBAAkB,KAAK;;EAEzB,eAAe,UAAU;AACvB,kBAAe,MAAM;AACrB,qBAAkB,MAAM;;YAX5B,CAcG,kBACA,YACC,qBAAC,aAAD;GAAa,UAAU;aAAvB,CACE,oBAAC,cAAD,EAAc,aAAa,sBAAwB,CAAA,EACnD,oBAAC,SAAD;IACE,MAAM;IACN,cAAc;IACd,SACE,oBAAC,YAAD;KACE,MAAK;KACL,cAAW;KACD;KACV,aAAa;KACb,SAAS;KACT,cAAc,uBAAuB,MAAM;KAC3C,eAAe,uBAAuB,KAAK;eAE3C,oBAAC,UAAD,EAAY,CAAA;KACD,CAAA;IAEf,aAAa;IACb,MAAK;cAEJ,uBAAuB,yBAAyB;IACzC,CAAA,CACE;KAEM"}

package/dist/components/Text/index.cjs

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

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

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

package/dist/components/Text/index.mjs

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

package/dist/components/TextArea/index.cjs

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

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

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

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

@@ -1,2 +1,2 @@
-import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-1bHvaq9p.mjs";
+import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-weASn4Hq.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-B1kitxCl.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-DIPeBLkr.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default };

package/dist/components/Tile/index.cjs

@@ -2,12 +2,11 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
-const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
-require("../Stack/index.cjs");
-const require_Text = require("../../Text-DVz8erdF.cjs");
-const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
-const require_Sticker = require("../../Sticker-D_dutvp_.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
+const require_Text = require("../../Text-CzN0DOXV.cjs");
+const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
+const require_Stack = require("../../Stack-BF-9YjA1.cjs");
+const require_Sticker = require("../../Sticker-D0jIU2Dt.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Spacing","Stack","Color","TextUnderlineTooltip","Paragraph","HStack","Heading","ArrowRightIcon12","ArrowRightIcon16","Sticker"],"sources":["../../../components/Tile/Tile.tsx"],"sourcesContent":["import Stack, { HStack } from '@persona/design-system/components/Stack';\nimport Sticker, { type StickerProps } from '@persona/design-system/components/Sticker';\nimport { Heading, Paragraph } from '@persona/design-system/components/Text';\nimport { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowRightIcon as ArrowRightIcon12 } from '@persona/icons/12px';\nimport { ArrowRightIcon as ArrowRightIcon16 } from '@persona/icons/16px';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type TileSize = 'sm' | 'md';\n\nexport interface TileStickerProps extends Omit<\n  StickerProps,\n  'children' | 'onDismiss' | 'dismissButtonProps'\n> {\n  /**\n   * Text content of the sticker. The Tile owns rendering so callers cannot\n   * inject arbitrary JSX.\n   */\n  text: string;\n}\n\nexport interface TileProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Size of the tile. Controls value typography and padding.\n   *\n   * @defaultValue 'md'\n   */\n  size?: TileSize;\n\n  /**\n   * Label rendered above the value.\n   */\n  label: string;\n\n  /**\n   * Tooltip content shown when hovering the label. When provided, the label\n   * is rendered with a dashed-underline trigger.\n   */\n  labelTooltip?: ReactNode;\n\n  /**\n   * Main value displayed prominently. Pass a `[before, after]` tuple to render\n   * a transition between two values with a right-pointing arrow between them.\n   */\n  value: string | [string, string];\n\n  /**\n   * Optional sticker rendered to the right of the value. The Tile renders the\n   * `<Sticker>` itself; callers configure it via these props (text + any\n   * non-children sticker props such as `variant` or `icon`).\n   */\n  sticker?: TileStickerProps;\n\n  /**\n   * Optional metadata text rendered beneath the value.\n   */\n  metadata?: string;\n\n  /**\n   * Tooltip content shown when hovering the metadata. When provided, the\n   * metadata is rendered with a dashed-underline trigger.\n   */\n  metadataTooltip?: ReactNode;\n}\n\nconst PADDING_BY_SIZE: Record<TileSize, string> = {\n  sm: Spacing[3],\n  md: Spacing[4],\n};\n\nconst TILE_MAX_WIDTH_PX = '220px';\n\nconst TileContainer = styled(Stack)<{ $size: TileSize }>`\n  background-color: ${({ theme }) => theme.color.background.primary};\n  box-sizing: border-box;\n  width: 100%;\n  max-width: ${TILE_MAX_WIDTH_PX};\n  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};\n  border: 1px solid ${({ theme }) => theme.color.border.primary};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst TransitionArrow = styled.span`\n  display: inline-flex;\n  align-items: center;\n  color: ${Color.BorderIconSecondary};\n  line-height: 0;\n`;\n\nexport const Tile = ({\n  size = 'md',\n  label,\n  labelTooltip,\n  value,\n  sticker,\n  metadata,\n  metadataTooltip,\n  ...props\n}: TileProps) => {\n  const labelNode = labelTooltip ? (\n    <TextUnderlineTooltip tooltip={labelTooltip} side='top'>\n      {label}\n    </TextUnderlineTooltip>\n  ) : (\n    label\n  );\n\n  const metadataNode =\n    metadata != null && metadataTooltip ? (\n      <TextUnderlineTooltip tooltip={metadataTooltip}>{metadata}</TextUnderlineTooltip>\n    ) : (\n      metadata\n    );\n\n  const { text: stickerText, ...stickerRest } = sticker ?? { text: '' };\n\n  return (\n    <TileContainer $size={size} spacing={Spacing[1]} {...props}>\n      <Paragraph size={size} color='secondary' as='div'>\n        {labelNode}\n      </Paragraph>\n      <HStack spacing={Spacing[2]} align='center'>\n        {Array.isArray(value) ? (\n          <>\n            <Heading size={size} color='primary' as='p'>\n              {value[0]}\n            </Heading>\n            <TransitionArrow data-test='tile-transition-arrow' aria-hidden='true'>\n              {size === 'sm' ? <ArrowRightIcon12 /> : <ArrowRightIcon16 />}\n            </TransitionArrow>\n            <Heading size={size} color='primary' as='p'>\n              {value[1]}\n            </Heading>\n          </>\n        ) : (\n          <Heading size={size} color='primary' as='p'>\n            {value}\n          </Heading>\n        )}\n        {sticker != null && <Sticker {...stickerRest}>{stickerText}</Sticker>}\n      </HStack>\n      {metadata != null && (\n        <Paragraph size='sm' color='secondary' as='div'>\n          {metadataNode}\n        </Paragraph>\n      )}\n    </TileContainer>\n  );\n};\n\nexport default Tile;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmEA,MAAM,kBAA4C;CAChD,IAAIA,uBAAAA,QAAQ;CACZ,IAAIA,uBAAAA,QAAQ;CACb;AAID,MAAM,gBAAgB,CAAA,GAAA,kBAAA,SAAOC,cAAAA,MAAM;uBACZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;eAGrD,QAAkB;cACnB,EAAE,YAAY,gBAAgB,OAAO;uBAC5B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;oBAC5C,EAAE,YAAY,MAAM,KAAK,aAAa;;AAG1D,MAAM,kBAAkB,kBAAA,QAAO,IAAI;;;WAGxBC,uBAAAA,MAAM,oBAAoB;;;AAIrC,MAAa,QAAQ,EACnB,OAAO,MACP,OACA,cACA,OACA,SACA,UACA,iBACA,GAAG,YACY;CACf,MAAM,YAAY,eAChB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,sBAAD;EAAsB,SAAS;EAAc,MAAK;YAC/C;EACoB,CAAA,GAEvB;CAGF,MAAM,eACJ,YAAY,QAAQ,kBAClB,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,sBAAD;EAAsB,SAAS;YAAkB;EAAgC,CAAA,GAEjF;CAGJ,MAAM,EAAE,MAAM,aAAa,GAAG,gBAAgB,WAAW,EAAE,MAAM,IAAI;AAErE,QACE,iBAAA,GAAA,kBAAA,MAAC,eAAD;EAAe,OAAO;EAAM,SAASH,uBAAAA,QAAQ;EAAI,GAAI;YAArD;GACE,iBAAA,GAAA,kBAAA,KAACI,aAAAA,WAAD;IAAiB;IAAM,OAAM;IAAY,IAAG;cACzC;IACS,CAAA;GACZ,iBAAA,GAAA,kBAAA,MAACC,cAAAA,QAAD;IAAQ,SAASL,uBAAAA,QAAQ;IAAI,OAAM;cAAnC,CACG,MAAM,QAAQ,MAAM,GACnB,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACE,iBAAA,GAAA,kBAAA,KAACM,aAAAA,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACV,iBAAA,GAAA,kBAAA,KAAC,iBAAD;MAAiB,aAAU;MAAwB,eAAY;gBAC5D,SAAS,OAAO,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,gBAAD,EAAoB,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,gBAAD,EAAoB,CAAA;MAC5C,CAAA;KAClB,iBAAA,GAAA,kBAAA,KAACF,aAAAA,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACT,EAAA,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAACA,aAAAA,SAAD;KAAe;KAAM,OAAM;KAAU,IAAG;eACrC;KACO,CAAA,EAEX,WAAW,QAAQ,iBAAA,GAAA,kBAAA,KAACG,gBAAAA,SAAD;KAAS,GAAI;eAAc;KAAsB,CAAA,CAC9D;;GACR,YAAY,QACX,iBAAA,GAAA,kBAAA,KAACL,aAAAA,WAAD;IAAW,MAAK;IAAK,OAAM;IAAY,IAAG;cACvC;IACS,CAAA;GAEA"}
+{"version":3,"file":"index.cjs","names":["Spacing","Stack","Color","TextUnderlineTooltip","Paragraph","HStack","Heading","ArrowRightIcon12","ArrowRightIcon16","Sticker"],"sources":["../../../components/Tile/Tile.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport Sticker, { type StickerProps } from '@persona/design-system/components/Sticker';\nimport { Heading, Paragraph } from '@persona/design-system/components/Text';\nimport { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowRightIcon as ArrowRightIcon12 } from '@persona/icons/12px';\nimport { ArrowRightIcon as ArrowRightIcon16 } from '@persona/icons/16px';\n\nexport type TileSize = 'sm' | 'md';\n\nexport interface TileStickerProps extends Omit<\n  StickerProps,\n  'children' | 'onDismiss' | 'dismissButtonProps'\n> {\n  /**\n   * Text content of the sticker. The Tile owns rendering so callers cannot\n   * inject arbitrary JSX.\n   */\n  text: string;\n}\n\nexport interface TileProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Size of the tile. Controls value typography and padding.\n   *\n   * @defaultValue 'md'\n   */\n  size?: TileSize;\n\n  /**\n   * Label rendered above the value.\n   */\n  label: string;\n\n  /**\n   * Tooltip content shown when hovering the label. When provided, the label\n   * is rendered with a dashed-underline trigger.\n   */\n  labelTooltip?: ReactNode;\n\n  /**\n   * Main value displayed prominently. Pass a `[before, after]` tuple to render\n   * a transition between two values with a right-pointing arrow between them.\n   */\n  value: string | [string, string];\n\n  /**\n   * Optional sticker rendered to the right of the value. The Tile renders the\n   * `<Sticker>` itself; callers configure it via these props (text + any\n   * non-children sticker props such as `variant` or `icon`).\n   */\n  sticker?: TileStickerProps;\n\n  /**\n   * Optional metadata text rendered beneath the value.\n   */\n  metadata?: string;\n\n  /**\n   * Tooltip content shown when hovering the metadata. When provided, the\n   * metadata is rendered with a dashed-underline trigger.\n   */\n  metadataTooltip?: ReactNode;\n}\n\nconst PADDING_BY_SIZE: Record<TileSize, string> = {\n  sm: Spacing[3],\n  md: Spacing[4],\n};\n\nconst TILE_MAX_WIDTH_PX = '220px';\n\nconst TileContainer = styled(Stack)<{ $size: TileSize }>`\n  background-color: ${({ theme }) => theme.color.background.primary};\n  box-sizing: border-box;\n  width: 100%;\n  max-width: ${TILE_MAX_WIDTH_PX};\n  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};\n  border: 1px solid ${({ theme }) => theme.color.border.primary};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst TransitionArrow = styled.span`\n  display: inline-flex;\n  align-items: center;\n  color: ${Color.BorderIconSecondary};\n  line-height: 0;\n`;\n\nexport const Tile = ({\n  size = 'md',\n  label,\n  labelTooltip,\n  value,\n  sticker,\n  metadata,\n  metadataTooltip,\n  ...props\n}: TileProps) => {\n  const labelNode = labelTooltip ? (\n    <TextUnderlineTooltip tooltip={labelTooltip} side='top'>\n      {label}\n    </TextUnderlineTooltip>\n  ) : (\n    label\n  );\n\n  const metadataNode =\n    metadata != null && metadataTooltip ? (\n      <TextUnderlineTooltip tooltip={metadataTooltip}>{metadata}</TextUnderlineTooltip>\n    ) : (\n      metadata\n    );\n\n  const { text: stickerText, ...stickerRest } = sticker ?? { text: '' };\n\n  return (\n    <TileContainer $size={size} spacing={Spacing[1]} {...props}>\n      <Paragraph size={size} color='secondary' as='div'>\n        {labelNode}\n      </Paragraph>\n      <HStack spacing={Spacing[2]} align='center'>\n        {Array.isArray(value) ? (\n          <>\n            <Heading size={size} color='primary' as='p'>\n              {value[0]}\n            </Heading>\n            <TransitionArrow data-test='tile-transition-arrow' aria-hidden='true'>\n              {size === 'sm' ? <ArrowRightIcon12 /> : <ArrowRightIcon16 />}\n            </TransitionArrow>\n            <Heading size={size} color='primary' as='p'>\n              {value[1]}\n            </Heading>\n          </>\n        ) : (\n          <Heading size={size} color='primary' as='p'>\n            {value}\n          </Heading>\n        )}\n        {sticker != null && <Sticker {...stickerRest}>{stickerText}</Sticker>}\n      </HStack>\n      {metadata != null && (\n        <Paragraph size='sm' color='secondary' as='div'>\n          {metadataNode}\n        </Paragraph>\n      )}\n    </TileContainer>\n  );\n};\n\nexport default Tile;\n"],"mappings":";;;;;;;;;;;;;;;;AAoEA,MAAM,kBAA4C;CAChD,IAAIA,uBAAAA,QAAQ;CACZ,IAAIA,uBAAAA,QAAQ;CACb;AAID,MAAM,gBAAgB,CAAA,GAAA,kBAAA,SAAOC,cAAAA,MAAM;uBACZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;eAGrD,QAAkB;cACnB,EAAE,YAAY,gBAAgB,OAAO;uBAC5B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;oBAC5C,EAAE,YAAY,MAAM,KAAK,aAAa;;AAG1D,MAAM,kBAAkB,kBAAA,QAAO,IAAI;;;WAGxBC,uBAAAA,MAAM,oBAAoB;;;AAIrC,MAAa,QAAQ,EACnB,OAAO,MACP,OACA,cACA,OACA,SACA,UACA,iBACA,GAAG,YACY;CACf,MAAM,YAAY,eAChB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,sBAAD;EAAsB,SAAS;EAAc,MAAK;YAC/C;EACoB,CAAA,GAEvB;CAGF,MAAM,eACJ,YAAY,QAAQ,kBAClB,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,sBAAD;EAAsB,SAAS;YAAkB;EAAgC,CAAA,GAEjF;CAGJ,MAAM,EAAE,MAAM,aAAa,GAAG,gBAAgB,WAAW,EAAE,MAAM,IAAI;AAErE,QACE,iBAAA,GAAA,kBAAA,MAAC,eAAD;EAAe,OAAO;EAAM,SAASH,uBAAAA,QAAQ;EAAI,GAAI;YAArD;GACE,iBAAA,GAAA,kBAAA,KAACI,aAAAA,WAAD;IAAiB;IAAM,OAAM;IAAY,IAAG;cACzC;IACS,CAAA;GACZ,iBAAA,GAAA,kBAAA,MAACC,cAAAA,QAAD;IAAQ,SAASL,uBAAAA,QAAQ;IAAI,OAAM;cAAnC,CACG,MAAM,QAAQ,MAAM,GACnB,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACE,iBAAA,GAAA,kBAAA,KAACM,aAAAA,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACV,iBAAA,GAAA,kBAAA,KAAC,iBAAD;MAAiB,aAAU;MAAwB,eAAY;gBAC5D,SAAS,OAAO,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,gBAAD,EAAoB,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,gBAAD,EAAoB,CAAA;MAC5C,CAAA;KAClB,iBAAA,GAAA,kBAAA,KAACF,aAAAA,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACT,EAAA,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAACA,aAAAA,SAAD;KAAe;KAAM,OAAM;KAAU,IAAG;eACrC;KACO,CAAA,EAEX,WAAW,QAAQ,iBAAA,GAAA,kBAAA,KAACG,gBAAAA,SAAD;KAAS,GAAI;eAAc;KAAsB,CAAA,CAC9D;;GACR,YAAY,QACX,iBAAA,GAAA,kBAAA,KAACL,aAAAA,WAAD;IAAW,MAAK;IAAK,OAAM;IAAY,IAAG;cACvC;IACS,CAAA;GAEA"}

package/dist/components/Tile/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["ArrowRightIcon12","ArrowRightIcon16"],"sources":["../../../components/Tile/Tile.tsx"],"sourcesContent":["import Stack, { HStack } from '@persona/design-system/components/Stack';\nimport Sticker, { type StickerProps } from '@persona/design-system/components/Sticker';\nimport { Heading, Paragraph } from '@persona/design-system/components/Text';\nimport { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowRightIcon as ArrowRightIcon12 } from '@persona/icons/12px';\nimport { ArrowRightIcon as ArrowRightIcon16 } from '@persona/icons/16px';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type TileSize = 'sm' | 'md';\n\nexport interface TileStickerProps extends Omit<\n  StickerProps,\n  'children' | 'onDismiss' | 'dismissButtonProps'\n> {\n  /**\n   * Text content of the sticker. The Tile owns rendering so callers cannot\n   * inject arbitrary JSX.\n   */\n  text: string;\n}\n\nexport interface TileProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Size of the tile. Controls value typography and padding.\n   *\n   * @defaultValue 'md'\n   */\n  size?: TileSize;\n\n  /**\n   * Label rendered above the value.\n   */\n  label: string;\n\n  /**\n   * Tooltip content shown when hovering the label. When provided, the label\n   * is rendered with a dashed-underline trigger.\n   */\n  labelTooltip?: ReactNode;\n\n  /**\n   * Main value displayed prominently. Pass a `[before, after]` tuple to render\n   * a transition between two values with a right-pointing arrow between them.\n   */\n  value: string | [string, string];\n\n  /**\n   * Optional sticker rendered to the right of the value. The Tile renders the\n   * `<Sticker>` itself; callers configure it via these props (text + any\n   * non-children sticker props such as `variant` or `icon`).\n   */\n  sticker?: TileStickerProps;\n\n  /**\n   * Optional metadata text rendered beneath the value.\n   */\n  metadata?: string;\n\n  /**\n   * Tooltip content shown when hovering the metadata. When provided, the\n   * metadata is rendered with a dashed-underline trigger.\n   */\n  metadataTooltip?: ReactNode;\n}\n\nconst PADDING_BY_SIZE: Record<TileSize, string> = {\n  sm: Spacing[3],\n  md: Spacing[4],\n};\n\nconst TILE_MAX_WIDTH_PX = '220px';\n\nconst TileContainer = styled(Stack)<{ $size: TileSize }>`\n  background-color: ${({ theme }) => theme.color.background.primary};\n  box-sizing: border-box;\n  width: 100%;\n  max-width: ${TILE_MAX_WIDTH_PX};\n  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};\n  border: 1px solid ${({ theme }) => theme.color.border.primary};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst TransitionArrow = styled.span`\n  display: inline-flex;\n  align-items: center;\n  color: ${Color.BorderIconSecondary};\n  line-height: 0;\n`;\n\nexport const Tile = ({\n  size = 'md',\n  label,\n  labelTooltip,\n  value,\n  sticker,\n  metadata,\n  metadataTooltip,\n  ...props\n}: TileProps) => {\n  const labelNode = labelTooltip ? (\n    <TextUnderlineTooltip tooltip={labelTooltip} side='top'>\n      {label}\n    </TextUnderlineTooltip>\n  ) : (\n    label\n  );\n\n  const metadataNode =\n    metadata != null && metadataTooltip ? (\n      <TextUnderlineTooltip tooltip={metadataTooltip}>{metadata}</TextUnderlineTooltip>\n    ) : (\n      metadata\n    );\n\n  const { text: stickerText, ...stickerRest } = sticker ?? { text: '' };\n\n  return (\n    <TileContainer $size={size} spacing={Spacing[1]} {...props}>\n      <Paragraph size={size} color='secondary' as='div'>\n        {labelNode}\n      </Paragraph>\n      <HStack spacing={Spacing[2]} align='center'>\n        {Array.isArray(value) ? (\n          <>\n            <Heading size={size} color='primary' as='p'>\n              {value[0]}\n            </Heading>\n            <TransitionArrow data-test='tile-transition-arrow' aria-hidden='true'>\n              {size === 'sm' ? <ArrowRightIcon12 /> : <ArrowRightIcon16 />}\n            </TransitionArrow>\n            <Heading size={size} color='primary' as='p'>\n              {value[1]}\n            </Heading>\n          </>\n        ) : (\n          <Heading size={size} color='primary' as='p'>\n            {value}\n          </Heading>\n        )}\n        {sticker != null && <Sticker {...stickerRest}>{stickerText}</Sticker>}\n      </HStack>\n      {metadata != null && (\n        <Paragraph size='sm' color='secondary' as='div'>\n          {metadataNode}\n        </Paragraph>\n      )}\n    </TileContainer>\n  );\n};\n\nexport default Tile;\n"],"mappings":";;;;;;;;;;;AAmEA,MAAM,kBAA4C;CAChD,IAAI,QAAQ;CACZ,IAAI,QAAQ;CACb;AAID,MAAM,gBAAgB,OAAO,MAAM;uBACZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;eAGrD,QAAkB;cACnB,EAAE,YAAY,gBAAgB,OAAO;uBAC5B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;oBAC5C,EAAE,YAAY,MAAM,KAAK,aAAa;;AAG1D,MAAM,kBAAkB,OAAO,IAAI;;;WAGxB,MAAM,oBAAoB;;;AAIrC,MAAa,QAAQ,EACnB,OAAO,MACP,OACA,cACA,OACA,SACA,UACA,iBACA,GAAG,YACY;CACf,MAAM,YAAY,eAChB,oBAAC,sBAAD;EAAsB,SAAS;EAAc,MAAK;YAC/C;EACoB,CAAA,GAEvB;CAGF,MAAM,eACJ,YAAY,QAAQ,kBAClB,oBAAC,sBAAD;EAAsB,SAAS;YAAkB;EAAgC,CAAA,GAEjF;CAGJ,MAAM,EAAE,MAAM,aAAa,GAAG,gBAAgB,WAAW,EAAE,MAAM,IAAI;AAErE,QACE,qBAAC,eAAD;EAAe,OAAO;EAAM,SAAS,QAAQ;EAAI,GAAI;YAArD;GACE,oBAAC,WAAD;IAAiB;IAAM,OAAM;IAAY,IAAG;cACzC;IACS,CAAA;GACZ,qBAAC,QAAD;IAAQ,SAAS,QAAQ;IAAI,OAAM;cAAnC,CACG,MAAM,QAAQ,MAAM,GACnB,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACV,oBAAC,iBAAD;MAAiB,aAAU;MAAwB,eAAY;gBAC5D,SAAS,OAAO,oBAACA,gBAAD,EAAoB,CAAA,GAAG,oBAACC,kBAAD,EAAoB,CAAA;MAC5C,CAAA;KAClB,oBAAC,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACT,EAAA,CAAA,GAEH,oBAAC,SAAD;KAAe;KAAM,OAAM;KAAU,IAAG;eACrC;KACO,CAAA,EAEX,WAAW,QAAQ,oBAAC,SAAD;KAAS,GAAI;eAAc;KAAsB,CAAA,CAC9D;;GACR,YAAY,QACX,oBAAC,WAAD;IAAW,MAAK;IAAK,OAAM;IAAY,IAAG;cACvC;IACS,CAAA;GAEA"}
+{"version":3,"file":"index.mjs","names":["ArrowRightIcon12","ArrowRightIcon16"],"sources":["../../../components/Tile/Tile.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport Sticker, { type StickerProps } from '@persona/design-system/components/Sticker';\nimport { Heading, Paragraph } from '@persona/design-system/components/Text';\nimport { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowRightIcon as ArrowRightIcon12 } from '@persona/icons/12px';\nimport { ArrowRightIcon as ArrowRightIcon16 } from '@persona/icons/16px';\n\nexport type TileSize = 'sm' | 'md';\n\nexport interface TileStickerProps extends Omit<\n  StickerProps,\n  'children' | 'onDismiss' | 'dismissButtonProps'\n> {\n  /**\n   * Text content of the sticker. The Tile owns rendering so callers cannot\n   * inject arbitrary JSX.\n   */\n  text: string;\n}\n\nexport interface TileProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Size of the tile. Controls value typography and padding.\n   *\n   * @defaultValue 'md'\n   */\n  size?: TileSize;\n\n  /**\n   * Label rendered above the value.\n   */\n  label: string;\n\n  /**\n   * Tooltip content shown when hovering the label. When provided, the label\n   * is rendered with a dashed-underline trigger.\n   */\n  labelTooltip?: ReactNode;\n\n  /**\n   * Main value displayed prominently. Pass a `[before, after]` tuple to render\n   * a transition between two values with a right-pointing arrow between them.\n   */\n  value: string | [string, string];\n\n  /**\n   * Optional sticker rendered to the right of the value. The Tile renders the\n   * `<Sticker>` itself; callers configure it via these props (text + any\n   * non-children sticker props such as `variant` or `icon`).\n   */\n  sticker?: TileStickerProps;\n\n  /**\n   * Optional metadata text rendered beneath the value.\n   */\n  metadata?: string;\n\n  /**\n   * Tooltip content shown when hovering the metadata. When provided, the\n   * metadata is rendered with a dashed-underline trigger.\n   */\n  metadataTooltip?: ReactNode;\n}\n\nconst PADDING_BY_SIZE: Record<TileSize, string> = {\n  sm: Spacing[3],\n  md: Spacing[4],\n};\n\nconst TILE_MAX_WIDTH_PX = '220px';\n\nconst TileContainer = styled(Stack)<{ $size: TileSize }>`\n  background-color: ${({ theme }) => theme.color.background.primary};\n  box-sizing: border-box;\n  width: 100%;\n  max-width: ${TILE_MAX_WIDTH_PX};\n  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};\n  border: 1px solid ${({ theme }) => theme.color.border.primary};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst TransitionArrow = styled.span`\n  display: inline-flex;\n  align-items: center;\n  color: ${Color.BorderIconSecondary};\n  line-height: 0;\n`;\n\nexport const Tile = ({\n  size = 'md',\n  label,\n  labelTooltip,\n  value,\n  sticker,\n  metadata,\n  metadataTooltip,\n  ...props\n}: TileProps) => {\n  const labelNode = labelTooltip ? (\n    <TextUnderlineTooltip tooltip={labelTooltip} side='top'>\n      {label}\n    </TextUnderlineTooltip>\n  ) : (\n    label\n  );\n\n  const metadataNode =\n    metadata != null && metadataTooltip ? (\n      <TextUnderlineTooltip tooltip={metadataTooltip}>{metadata}</TextUnderlineTooltip>\n    ) : (\n      metadata\n    );\n\n  const { text: stickerText, ...stickerRest } = sticker ?? { text: '' };\n\n  return (\n    <TileContainer $size={size} spacing={Spacing[1]} {...props}>\n      <Paragraph size={size} color='secondary' as='div'>\n        {labelNode}\n      </Paragraph>\n      <HStack spacing={Spacing[2]} align='center'>\n        {Array.isArray(value) ? (\n          <>\n            <Heading size={size} color='primary' as='p'>\n              {value[0]}\n            </Heading>\n            <TransitionArrow data-test='tile-transition-arrow' aria-hidden='true'>\n              {size === 'sm' ? <ArrowRightIcon12 /> : <ArrowRightIcon16 />}\n            </TransitionArrow>\n            <Heading size={size} color='primary' as='p'>\n              {value[1]}\n            </Heading>\n          </>\n        ) : (\n          <Heading size={size} color='primary' as='p'>\n            {value}\n          </Heading>\n        )}\n        {sticker != null && <Sticker {...stickerRest}>{stickerText}</Sticker>}\n      </HStack>\n      {metadata != null && (\n        <Paragraph size='sm' color='secondary' as='div'>\n          {metadataNode}\n        </Paragraph>\n      )}\n    </TileContainer>\n  );\n};\n\nexport default Tile;\n"],"mappings":";;;;;;;;;;AAoEA,MAAM,kBAA4C;CAChD,IAAI,QAAQ;CACZ,IAAI,QAAQ;CACb;AAID,MAAM,gBAAgB,OAAO,MAAM;uBACZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;eAGrD,QAAkB;cACnB,EAAE,YAAY,gBAAgB,OAAO;uBAC5B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;oBAC5C,EAAE,YAAY,MAAM,KAAK,aAAa;;AAG1D,MAAM,kBAAkB,OAAO,IAAI;;;WAGxB,MAAM,oBAAoB;;;AAIrC,MAAa,QAAQ,EACnB,OAAO,MACP,OACA,cACA,OACA,SACA,UACA,iBACA,GAAG,YACY;CACf,MAAM,YAAY,eAChB,oBAAC,sBAAD;EAAsB,SAAS;EAAc,MAAK;YAC/C;EACoB,CAAA,GAEvB;CAGF,MAAM,eACJ,YAAY,QAAQ,kBAClB,oBAAC,sBAAD;EAAsB,SAAS;YAAkB;EAAgC,CAAA,GAEjF;CAGJ,MAAM,EAAE,MAAM,aAAa,GAAG,gBAAgB,WAAW,EAAE,MAAM,IAAI;AAErE,QACE,qBAAC,eAAD;EAAe,OAAO;EAAM,SAAS,QAAQ;EAAI,GAAI;YAArD;GACE,oBAAC,WAAD;IAAiB;IAAM,OAAM;IAAY,IAAG;cACzC;IACS,CAAA;GACZ,qBAAC,QAAD;IAAQ,SAAS,QAAQ;IAAI,OAAM;cAAnC,CACG,MAAM,QAAQ,MAAM,GACnB,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACV,oBAAC,iBAAD;MAAiB,aAAU;MAAwB,eAAY;gBAC5D,SAAS,OAAO,oBAACA,gBAAD,EAAoB,CAAA,GAAG,oBAACC,kBAAD,EAAoB,CAAA;MAC5C,CAAA;KAClB,oBAAC,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACT,EAAA,CAAA,GAEH,oBAAC,SAAD;KAAe;KAAM,OAAM;KAAU,IAAG;eACrC;KACO,CAAA,EAEX,WAAW,QAAQ,oBAAC,SAAD;KAAS,GAAI;eAAc;KAAsB,CAAA,CAC9D;;GACR,YAAY,QACX,oBAAC,WAAD;IAAW,MAAK;IAAK,OAAM;IAAY,IAAG;cACvC;IACS,CAAA;GAEA"}

package/dist/components/Toast/index.cjs

@@ -1,27 +1,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
 require("../../variables/effect.cjs");
 require("../../variables/transitions.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
-const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
-require("../Button/index.cjs");
-const require_motion = require("../../motion-QW6imSxE.cjs");
+require("../../lib/message.cjs");
+const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _persona_icons = require("@persona/icons");
 let _persona_icons_12px = require("@persona/icons/12px");
+let framer_motion = require("framer-motion");
 //#region components/Toast/Toast.tsx
-let MessageType = /* @__PURE__ */ function(MessageType) {
-	MessageType["Success"] = "success";
-	MessageType["Failure"] = "failure";
-	MessageType["Notice"] = "notice";
-	return MessageType;
-}({});
 const TOAST_WIDTH = "324px";
-const BaseToast = (0, styled_components.default)(require_motion.motion.div)`
+const BaseToast = (0, styled_components.default)(framer_motion.motion.div)`
   border-radius: ${_persona_design_tokens.BorderRadius.Md};
   box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
   color: ${({ theme }) => theme.color.text.primary};
@@ -134,7 +128,6 @@ const Toast = ({ message, messageType, onDismiss, shouldClipOverflow, ...elemPro
 	});
 };
 //#endregion
-exports.MessageType = MessageType;
 exports.TOAST_WIDTH = TOAST_WIDTH;
 exports.Toast = Toast;
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["motion","BorderRadius","paragraphMixins","Spacing","Color","IconButton","isActive","isNotDisabled","isHovered","isFocused","CircleCheckIcon","CircleAlertIcon","CircleInfoIcon","XIcon"],"sources":["../../../components/Toast/Toast.tsx"],"sourcesContent":["import { 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 { type HTMLMotionProps, motion } from 'framer-motion';\nimport type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport enum MessageType {\n  Success = 'success',\n  Failure = 'failure',\n  Notice = 'notice',\n}\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 }) => 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: ${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: ${Color.BorderIconPrimary};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: rgba(0, 0, 0, 0.05);\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: ${Color.CorePurple200};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${Color.CoreGreen200};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${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":";;;;;;;;;;;;;;;;AAiBA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,aAAA;AACA,aAAA,aAAA;AACA,aAAA,YAAA;;KACD;AAWD,MAAa,cAAc;AAE3B,MAAM,YAAY,CAAA,GAAA,kBAAA,SAAOA,eAAAA,OAAO,IAAI;mBACjBC,uBAAAA,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;IAC/CC,oBAAAA,gBAAgB,GAAG;;;SAGdC,uBAAAA,QAAQ,GAAG;;aAEPA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;;;AAItC,MAAM,YAAY,kBAAA,QAAO,GAAG;;;;WAIjBC,uBAAAA,MAAM,kBAAkB;;AAGnC,MAAM,eAAe,kBAAA,QAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,kBAAA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAOC,mBAAAA,WAAW;;;WAG3BD,uBAAAA,MAAM,kBAAkB;;KAE9BE,wBAAAA,WAAWC,wBAAAA,cAAc,KAAKC,wBAAAA,YAAYD,wBAAAA,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,kBAAA,GAAG;SACEC,wBAAAA,YAAYC,wBAAAA,YAAYF,wBAAAA,cAAc;;;SAGtCE,wBAAAA,YAAYF,wBAAAA,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACrBH,uBAAAA,MAAM,cAAc;;AAGpC,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACtBA,uBAAAA,MAAM,aAAa;;AAGnC,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACtBA,uBAAAA,MAAM,WAAW;;AAGjC,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,iBAAA,GAAA,kBAAA,KAACM,eAAAA,iBAAD,EAAmB,CAAA;EAC5B,KAAA,UACE,QAAO,iBAAA,GAAA,kBAAA,KAACC,eAAAA,iBAAD,EAAmB,CAAA;EAE5B,QACE,QAAO,iBAAA,GAAA,kBAAA,KAACC,eAAAA,gBAAD,EAAkB,CAAA;;;AAI/B,MAAa,SAAS,EACpB,SACA,aACA,WACA,oBACA,GAAG,gBACa;AAGhB,QACE,iBAAA,GAAA,kBAAA,MAHkB,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,iBAAA,GAAA,kBAAA,KAAC,WAAD,EAAA,UAAY,QAAQ,YAAY,EAAa,CAAA;GAC7C,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,OAAO;cAAqB;IAAuB,CAAA;GAChE,aACC,iBAAA,GAAA,kBAAA,KAAC,aAAD;IAAa,MAAK;IAAK,cAAW;IAAQ,OAAM;IAAQ,SAAS;cAC/D,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAS,CAAA;IACG,CAAA;GAEJ"}
+{"version":3,"file":"index.cjs","names":["motion","BorderRadius","paragraphMixins","Spacing","Color","IconButton","isActive","isNotDisabled","isHovered","isFocused","CircleCheckIcon","CircleAlertIcon","CircleInfoIcon","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 { MessageType } from 'design-system/lib/message';\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 }) => 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: ${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: ${Color.BorderIconPrimary};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: rgba(0, 0, 0, 0.05);\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: ${Color.CorePurple200};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${Color.CoreGreen200};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${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":";;;;;;;;;;;;;;;;AA4BA,MAAa,cAAc;AAE3B,MAAM,YAAY,CAAA,GAAA,kBAAA,SAAOA,cAAAA,OAAO,IAAI;mBACjBC,uBAAAA,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;IAC/CC,oBAAAA,gBAAgB,GAAG;;;SAGdC,uBAAAA,QAAQ,GAAG;;aAEPA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;;;AAItC,MAAM,YAAY,kBAAA,QAAO,GAAG;;;;WAIjBC,uBAAAA,MAAM,kBAAkB;;AAGnC,MAAM,eAAe,kBAAA,QAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,kBAAA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAOC,mBAAAA,WAAW;;;WAG3BD,uBAAAA,MAAM,kBAAkB;;KAE9BE,wBAAAA,WAAWC,wBAAAA,cAAc,KAAKC,wBAAAA,YAAYD,wBAAAA,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,kBAAA,GAAG;SACEC,wBAAAA,YAAYC,wBAAAA,YAAYF,wBAAAA,cAAc;;;SAGtCE,wBAAAA,YAAYF,wBAAAA,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACrBH,uBAAAA,MAAM,cAAc;;AAGpC,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACtBA,uBAAAA,MAAM,aAAa;;AAGnC,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACtBA,uBAAAA,MAAM,WAAW;;AAGjC,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,iBAAA,GAAA,kBAAA,KAACM,eAAAA,iBAAD,EAAmB,CAAA;EAC5B,KAAA,UACE,QAAO,iBAAA,GAAA,kBAAA,KAACC,eAAAA,iBAAD,EAAmB,CAAA;EAE5B,QACE,QAAO,iBAAA,GAAA,kBAAA,KAACC,eAAAA,gBAAD,EAAkB,CAAA;;;AAI/B,MAAa,SAAS,EACpB,SACA,aACA,WACA,oBACA,GAAG,gBACa;AAGhB,QACE,iBAAA,GAAA,kBAAA,MAHkB,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,iBAAA,GAAA,kBAAA,KAAC,WAAD,EAAA,UAAY,QAAQ,YAAY,EAAa,CAAA;GAC7C,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,OAAO;cAAqB;IAAuB,CAAA;GAChE,aACC,iBAAA,GAAA,kBAAA,KAAC,aAAD;IAAa,MAAK;IAAK,cAAW;IAAQ,OAAM;IAAQ,SAAS;cAC/D,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAS,CAAA;IACG,CAAA;GAEJ"}

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

@@ -1,2 +1,2 @@
-import { MessageType, TOAST_WIDTH, Toast, ToastProps } from "../../Toast.cjs";
-export { MessageType, TOAST_WIDTH, Toast, ToastProps };
+import { TOAST_WIDTH, Toast, ToastProps } from "../../Toast.cjs";
+export { TOAST_WIDTH, Toast, ToastProps };

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

@@ -1,2 +1,2 @@
-import { MessageType, TOAST_WIDTH, Toast, ToastProps } from "../../Toast.mjs";
-export { MessageType, TOAST_WIDTH, Toast, ToastProps };
+import { TOAST_WIDTH, Toast, ToastProps } from "../../Toast.mjs";
+export { TOAST_WIDTH, Toast, ToastProps };

package/dist/components/Toast/index.mjs

@@ -2,21 +2,15 @@ import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoC
 import "../../variables/effect.mjs";
 import "../../variables/transitions.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { t as IconButton } from "../../IconButton-C28qxOdi.mjs";
-import "../Button/index.mjs";
-import { t as motion } from "../../motion-DoikasqZ.mjs";
+import "../../lib/message.mjs";
+import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from "@persona/icons";
 import { XIcon as XIcon$1 } from "@persona/icons/12px";
+import { motion } from "framer-motion";
 //#region components/Toast/Toast.tsx
-let MessageType = /* @__PURE__ */ function(MessageType) {
-	MessageType["Success"] = "success";
-	MessageType["Failure"] = "failure";
-	MessageType["Notice"] = "notice";
-	return MessageType;
-}({});
 const TOAST_WIDTH = "324px";
 const BaseToast = styled(motion.div)`
   border-radius: ${BorderRadius.Md};
@@ -131,6 +125,6 @@ const Toast = ({ message, messageType, onDismiss, shouldClipOverflow, ...elemPro
 	});
 };
 //#endregion
-export { MessageType, TOAST_WIDTH, Toast };
+export { TOAST_WIDTH, Toast };
 
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["XIcon"],"sources":["../../../components/Toast/Toast.tsx"],"sourcesContent":["import { 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 { type HTMLMotionProps, motion } from 'framer-motion';\nimport type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport enum MessageType {\n  Success = 'success',\n  Failure = 'failure',\n  Notice = 'notice',\n}\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 }) => 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: ${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: ${Color.BorderIconPrimary};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: rgba(0, 0, 0, 0.05);\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: ${Color.CorePurple200};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${Color.CoreGreen200};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${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":";;;;;;;;;;;;;AAiBA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,aAAA;AACA,aAAA,aAAA;AACA,aAAA,YAAA;;KACD;AAWD,MAAa,cAAc;AAE3B,MAAM,YAAY,OAAO,OAAO,IAAI;mBACjB,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;IAC/C,gBAAgB,GAAG;;;SAGd,QAAQ,GAAG;;aAEP,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;AAItC,MAAM,YAAY,OAAO,GAAG;;;;WAIjB,MAAM,kBAAkB;;AAGnC,MAAM,eAAe,OAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,OAAO,WAAW;;;WAG3B,MAAM,kBAAkB;;KAE9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,OAAO,UAAU;gBACrB,MAAM,cAAc;;AAGpC,MAAM,eAAe,OAAO,UAAU;gBACtB,MAAM,aAAa;;AAGnC,MAAM,eAAe,OAAO,UAAU;gBACtB,MAAM,WAAW;;AAGjC,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 { MessageType } from 'design-system/lib/message';\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 }) => 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: ${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: ${Color.BorderIconPrimary};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: rgba(0, 0, 0, 0.05);\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: ${Color.CorePurple200};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${Color.CoreGreen200};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${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":";;;;;;;;;;;;;AA4BA,MAAa,cAAc;AAE3B,MAAM,YAAY,OAAO,OAAO,IAAI;mBACjB,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;IAC/C,gBAAgB,GAAG;;;SAGd,QAAQ,GAAG;;aAEP,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;AAItC,MAAM,YAAY,OAAO,GAAG;;;;WAIjB,MAAM,kBAAkB;;AAGnC,MAAM,eAAe,OAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,OAAO,WAAW;;;WAG3B,MAAM,kBAAkB;;KAE9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,OAAO,UAAU;gBACrB,MAAM,cAAc;;AAGpC,MAAM,eAAe,OAAO,UAAU;gBACtB,MAAM,aAAa;;AAGnC,MAAM,eAAe,OAAO,UAAU;gBACtB,MAAM,WAAW;;AAGjC,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.cjs

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

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

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

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

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

package/dist/components/Toggle/index.mjs

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

package/dist/components/Tooltip/index.cjs

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

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

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