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

package/dist/components/Table/index.mjs

@@ -1,379 +1,2 @@
-import { isFocusedVisible, isHovered } from "../../lib/pseudoClass.mjs";
-import "../../variables/transitions.mjs";
-import { paragraphMixins } from "../../mixins/text.mjs";
-import "../../variables/spacing.mjs";
-import { i as Paragraph } from "../../Text-DOTYjIt0.mjs";
-import { fadeIn } from "../../variables/keyframes.mjs";
-import { r as HelperTooltip } from "../../Tooltip-T7RQpy_a.mjs";
-import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as Spinner } from "../../Spinner-C05An_fn.mjs";
-import "../Spinner/index.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css, keyframes } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { CaretDownIcon, CaretUpIcon } from "@persona/icons";
-//#region components/Table/Table.tsx
-const slideKeyframes$1 = keyframes`
-  0% {
-    transform: translateX(-50%) scaleX(0);
-  }
-  50% {
-    transform: translateX(0) scaleX(1);
-  }
-  100% {
-    transform: translateX(50%) scaleX(0);
-  }
-`;
-const Table = styled.table.attrs({ role: "table" })`
-  display: table;
-  width: 100%;
-  border-spacing: 0;
-  ${paragraphMixins.md};
-
-  ${({ size }) => size === "sm" && css`
-      td,
-      th {
-        padding: ${Spacing[2]};
-      }
-    `}
-
-  ${({ isLoading }) => isLoading && css`
-      thead {
-        &:after {
-          content: '';
-          display: block;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
-          animation: ${slideKeyframes$1} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
-        }
-      }
-    `}
-`;
-//#endregion
-//#region components/Table/TableHeaderCell.tsx
-const StyledTableHeaderCell = styled.th`
-  display: table-cell;
-
-  background-color: ${({ theme }) => theme.color.background.secondary};
-  padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
-  text-align: left;
-  white-space: nowrap;
-  ${({ size }) => size === "sm" ? paragraphMixins.sm : paragraphMixins.md};
-  line-height: 1;
-  width: ${({ width }) => {
-	switch (width) {
-		case "min": return "1px";
-		case "max": return "100%";
-		default: if (width) return width;
-		else return "auto";
-	}
-}};
-
-  &:first-child {
-    border-radius: ${({ theme }) => `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};
-  }
-
-  &:last-child {
-    border-radius: ${({ theme }) => `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};
-  }
-
-  ${({ sortable }) => sortable && css`
-      cursor: pointer;
-
-      &:hover ${TableIconContainer} {
-        display: inline;
-        visibility: visible;
-      }
-    `};
-
-  ${({ isSticky }) => isSticky ? css`
-          position: sticky;
-          top: 0;
-          z-index: 1;
-        ` : css`
-          position: relative;
-        `}
-`;
-const VerticalAlign = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${Spacing[1]};
-`;
-const TableIconContainer = styled("div")`
-  display: inline-block;
-
-  ${({ sortDirection }) => {
-	if (sortDirection) return css`
-        display: inline;
-      `;
-	else return css`
-        display: inline;
-        visibility: hidden;
-        color: ${({ theme }) => theme.color.text.disabled};
-      `;
-}};
-`;
-const TableHeaderCell = forwardRef(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {
-	let ariaSort = "none";
-	if (sortable && sortDirection) ariaSort = sortDirection === "asc" ? "ascending" : "descending";
-	return /* @__PURE__ */ jsx(StyledTableHeaderCell, {
-		sortable,
-		"aria-sort": ariaSort,
-		role: "columnheader",
-		...elemProps,
-		ref,
-		children: /* @__PURE__ */ jsxs(VerticalAlign, {
-			css: { flexDirection: align === "right" ? "row-reverse" : "row" },
-			children: [children, sortable && /* @__PURE__ */ jsx(TableIconContainer, {
-				sortDirection,
-				children: sortDirection === "asc" ? /* @__PURE__ */ jsx(CaretUpIcon, {}) : /* @__PURE__ */ jsx(CaretDownIcon, {})
-			})]
-		})
-	});
-});
-//#endregion
-//#region components/Table/TableRow.tsx
-const TableRow = styled.tr.attrs({ role: "row" })`
-  display: table-row;
-
-  ${({ onClick }) => onClick != null && css`
-      cursor: pointer;
-    `}
-
-  ${({ disableHoverBackground, theme }) => !disableHoverBackground && css`
-      &${isHovered} {
-        background-color: ${theme.color.background.highlight};
-        transition-duration: ${"200ms"};
-      }
-    `}
-
-  ${isFocusedVisible}
-`;
-//#endregion
-//#region components/Table/TableTH.tsx
-const TableTH = forwardRef(function TableTH({ children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props }, ref) {
-	return /* @__PURE__ */ jsxs(TableHeaderCell, {
-		sortable: canSort,
-		sortDirection: canSort && isSorted ? isDescending ? "desc" : "asc" : false,
-		ref,
-		isSticky,
-		align,
-		size,
-		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "th__text",
-			children
-		}), helpText && /* @__PURE__ */ jsx(HelperTooltip, {
-			size: "sm",
-			css: {
-				height: 14,
-				marginLeft: Spacing[1]
-			},
-			children: helpText
-		})]
-	});
-});
-//#endregion
-//#region components/Table/TableCell.tsx
-const TableCell = styled.td.attrs({ role: "cell" })`
-  display: table-cell;
-  vertical-align: middle;
-
-  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
-  text-align: left;
-  padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
-  color: ${({ theme }) => theme.color.text.primary};
-  white-space: nowrap;
-  ${paragraphMixins.md};
-  line-height: 1;
-  ${({ breakWord }) => breakWord ? `white-space: normal;
-         overflow-wrap: break-word;` : ""}
-`;
-const CellTitleContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-const CellTitle = styled(Paragraph).attrs({ color: "primary" })`
-  display: flex;
-  align-items: center;
-  gap: ${Spacing[2]};
-`;
-const TableCellTitle = ({ children, subtitle, ...elemProps }) => {
-	return /* @__PURE__ */ jsxs(CellTitleContainer, {
-		...elemProps,
-		children: [/* @__PURE__ */ jsx(CellTitle, { children }), subtitle && /* @__PURE__ */ jsx(Paragraph, { children: subtitle })]
-	});
-};
-const TableTD = styled(TableCell)`
-  white-space: normal;
-  overflow-wrap: break-word;
-  ${(props) => props.unclickable && css`
-      cursor: default;
-    `}
-`;
-const TableIconTD = styled(TableTD)`
-  text-align: right;
-  line-height: 0; /* To center icon; cannot use flex here */
-  padding: 0;
-  padding-left: ${Spacing[4]};
-  width: 36px;
-`;
-const TableActionTD = styled(TableTD)`
-  text-align: right;
-  padding: 0;
-  padding-right: ${Spacing[4]};
-  width: 48px;
-`;
-const StickyTD = styled(TableTD)`
-  position: sticky;
-  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
-  background-color: ${({ theme }) => theme.color.background.primary};
-
-  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}
-  z-index: 2;
-`;
-const StickyTH = styled(TableTH)`
-  position: sticky;
-  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
-  z-index: 2;
-  max-width: 10%;
-  background-color: ${({ theme }) => theme.color.background.secondary};
-  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}
-`;
-const TableTR = styled(TableRow)`
-  ${({ disableHoverBackground }) => disableHoverBackground && css`
-      &:hover {
-        background-color: transparent !important;
-      }
-    `}
-
-  ${({ $isActive }) => $isActive && css`
-      background-color: ${({ theme }) => theme.color.background.highlight};
-      &:hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
-      }
-    `}
-
-  ${({ onClick, disableHoverBackground, $isActive }) => onClick != null && !disableHoverBackground && !$isActive && css`
-      cursor: pointer;
-      :hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
-      }
-      transition-duration: ${"200ms"};
-    `}
-`;
-//#endregion
-//#region components/Table/TableHead.tsx
-const TableHead = styled.thead.attrs({ role: "rowgroup" })`
-  display: table-header-group;
-  ${({ sticky }) => sticky && css`
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    `}
-`;
-//#endregion
-//#region components/Table/TableBody.tsx
-const TableBody = styled.tbody.attrs({ role: "rowgroup" })`
-  display: table-row-group;
-`;
-//#endregion
-//#region components/Table/TableLayout.tsx
-const Container = styled.div`
-    position: relative;
-    z-index: 0;
-    overflow-x: auto;
-    ${({ maxHeight }) => {
-	if (maxHeight != null) return `max-height: ${maxHeight}px;`;
-}}
-  `;
-const slideKeyframes = keyframes`
-    0% {
-      transform: translateX(-50%) scaleX(0);
-    }
-    50% {
-      transform: translateX(0) scaleX(1);
-    }
-    100% {
-      transform: translateX(50%) scaleX(0);
-    }
-  `;
-const Loader = styled.div`
-    position: absolute;
-    z-index: ${Z_INDICES.loadingOverlays};
-    border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
-    width: 100%;
-  
-    animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
-  `;
-const Overlay = styled.div`
-    position: absolute;
-    z-index: ${Z_INDICES.loadingOverlays};
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: ${({ theme }) => theme.color.primary.white};
-    opacity: 50%;
-  `;
-const SpinnerWrapper = styled.div`
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: ${Spacing[5]} 0;
-    animation: ${fadeIn} 1s;
-    animation-delay: 0.5s;
-    animation-fill-mode: backwards;
-  `;
-const TableSpinner = styled(Spinner)`
-    svg {
-      width: 120px;
-      height: 120px;
-    }
-  
-    path {
-      stroke: ${Color.CorePurple500};
-      stroke-width: 0.46;
-    }
-  `;
-const TableLayout = ({ children, className, containerMaxHeight, dataTest, headerTR, isEmpty, isLoading, nullState, showHeader, size = "md", stickyHeader = false }) => {
-	if (isEmpty && !showHeader) if (isLoading) return /* @__PURE__ */ jsx(SpinnerWrapper, {
-		role: "status",
-		"aria-live": "polite",
-		"aria-busy": "true",
-		"aria-label": "Loading...",
-		"data-loading-indicator": "true",
-		children: /* @__PURE__ */ jsx(TableSpinner, { size: "md" })
-	});
-	else return /* @__PURE__ */ jsx(Container, {
-		"data-test": dataTest,
-		children: nullState
-	});
-	return /* @__PURE__ */ jsxs(Container, {
-		"data-test": dataTest,
-		maxHeight: containerMaxHeight,
-		className,
-		children: [
-			isLoading && /* @__PURE__ */ jsx(Loader, { "data-test": "table-layout__loader" }),
-			isLoading && /* @__PURE__ */ jsx(Overlay, {}),
-			/* @__PURE__ */ jsxs(Table, {
-				size,
-				"aria-busy": isLoading || void 0,
-				children: [/* @__PURE__ */ jsx(TableHead, {
-					sticky: stickyHeader,
-					children: /* @__PURE__ */ jsx(TableRow, { children: headerTR })
-				}), !isEmpty && children]
-			}),
-			isEmpty && nullState
-		]
-	});
-};
-//#endregion
+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-CNs8p8hL.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };
-
-//# sourceMappingURL=index.mjs.map

package/dist/components/TableBox/index.cjs

@@ -0,0 +1,7 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_TableBox = require("../../TableBox-DO-yToJk.cjs");
+exports.TableBoxContext = require_TableBox.TableBoxContext;
+exports.default = require_TableBox.TableBox;

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

@@ -0,0 +1,3 @@
+import { t as DragDirection } from "../../useTableBoxDragAndDrop--QBq2FQh.cjs";
+import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-DOQ8PnAT.cjs";
+export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };

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

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

package/dist/components/TableBox/index.mjs

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

package/dist/components/TechnicalSticker/index.cjs

@@ -0,0 +1,239 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
+const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
+const require_MiddleTruncatedText = require("../../MiddleTruncatedText-BIzKECv9.cjs");
+const require_useToggle = require("../../useToggle-CSkZWXtQ.cjs");
+const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
+const require_lib_copyTextToClipboard = require("../../lib/copyTextToClipboard.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _persona_icons_12px = require("@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 = `${_persona_design_tokens.Typography.TextMono.fontWeight} ${_persona_design_tokens.Typography.TextExtraSmall.fontSize} ${_persona_design_tokens.Typography.TextMono.fontFamily}`;
+const technicalStickerBackgrounds = {
+	grey: _persona_design_tokens.Color.BackgroundLabelGrey,
+	white: _persona_design_tokens.Color.BackgroundLabelWhite
+};
+const technicalStickerHoverBackgrounds = {
+	grey: _persona_design_tokens.Color.BackgroundLabelGreyHover,
+	white: _persona_design_tokens.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_components.default.div`
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+
+  border-radius: ${_persona_design_tokens.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 ${_persona_design_tokens.Color.BorderInputDefault};
+
+  ${({ variant, disabled }) => !disabled && styled_components.css`
+      &:hover {
+        background: ${technicalStickerHoverBackgrounds[variant]};
+      }
+    `}
+`;
+const labelContainerStyles = styled_components.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+`;
+const LabelContainer = styled_components.default.div`
+  ${labelContainerStyles}
+`;
+const LabelLink = styled_components.default.a`
+  ${labelContainerStyles}
+  color: inherit;
+  text-decoration: none;
+`;
+const TechnicalText = (0, styled_components.default)(require_MiddleTruncatedText.MiddleTruncatedText)`
+  ${_persona_design_tokens.Typography.TextMono};
+  font-size: ${_persona_design_tokens.Typography.TextExtraSmall.fontSize};
+  line-height: ${_persona_design_tokens.Typography.TextExtraSmall.lineHeight};
+  text-align: center;
+
+  ${({ $isLinkEnabled, $isTruncated }) => $isTruncated && styled_components.css`
+      cursor: ${$isLinkEnabled ? "pointer" : "default"};
+      user-select: none;
+
+      & > span {
+        user-select: none;
+      }
+    `}
+`;
+const CopyActions = styled_components.default.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_components.default.div`
+  width: 8px;
+  height: 16px;
+  background: linear-gradient(to left, ${({ $background }) => $background}, transparent);
+`;
+const CopyButton = styled_components.default.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: ${_persona_design_tokens.Color.BorderIconPrimary};
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &${require_lib_pseudoClass.isHovered}:not(:disabled) {
+    color: ${_persona_design_tokens.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] = (0, react.useState)(false);
+	const [isCopyButtonFocused, setIsCopyButtonFocused] = (0, react.useState)(false);
+	const [isTruncated, setIsTruncated] = (0, react.useState)(false);
+	const [isCopyTooltipOpen, setIsCopyTooltipOpen] = (0, react.useState)(false);
+	const [copyConfirmationOpen, { enable: showCopyConfirmation, disable: hideCopyConfirmation }] = require_useToggle.useToggle(false);
+	const copyConfirmationTimerRef = (0, react.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 = (0, react.useCallback)((open) => {
+		if (copyConfirmationOpen) return;
+		setIsCopyTooltipOpen(open);
+	}, [copyConfirmationOpen]);
+	const handleCopy = (0, react.useCallback)(async (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (disabled) return;
+		if (!await require_lib_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
+	]);
+	(0, react.useEffect)(() => () => {
+		if (copyConfirmationTimerRef.current) clearTimeout(copyConfirmationTimerRef.current);
+	}, []);
+	const technicalText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TechnicalText, {
+		value: children,
+		maxWidth: width ?? maxWidth,
+		font: TECHNICAL_TEXT_FONT,
+		onTruncatedChange: setIsTruncated,
+		titleBehavior: "never",
+		$isLinkEnabled: isLinkEnabled,
+		$isTruncated: isTruncated
+	});
+	const labelContent = isLinkEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelLink, {
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: technicalText
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelContainer, { children: technicalText });
+	const labelWithTooltip = showStickerTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		trigger: labelContent,
+		interactive: true,
+		side: "top",
+		maxWidth: "400px",
+		children: tooltipLabel
+	}) : labelContent;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TechnicalStickerShell, {
+		...stickerProps,
+		variant,
+		disabled,
+		$width: width,
+		onMouseEnter: (event) => {
+			onMouseEnter?.(event);
+			setIsHoveredState(true);
+		},
+		onMouseLeave: (event) => {
+			onMouseLeave?.(event);
+			setIsHoveredState(false);
+		},
+		children: [labelWithTooltip, copyable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopyActions, {
+			$visible: showCopyActions,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyGradient, { $background: copyActionBackground }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+				open: isCopyTooltipVisible,
+				onOpenChange: handleCopyTooltipOpenChange,
+				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
+					type: "button",
+					"aria-label": "Copy",
+					disabled,
+					$background: copyActionBackground,
+					onClick: handleCopy,
+					onBlur: () => setIsCopyButtonFocused(false),
+					onFocus: () => setIsCopyButtonFocused(true),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CopyIcon, {})
+				}),
+				interactive: false,
+				side: "top",
+				children: copyConfirmationOpen ? COPY_CONFIRMATION_TEXT : copyTooltipLabel
+			})]
+		})]
+	});
+};
+//#endregion
+exports.TechnicalSticker = TechnicalSticker;
+exports.default = TechnicalSticker;
+
+//# sourceMappingURL=index.cjs.map

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

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

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

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

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

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