@persona/design-system 0.1.8 → 0.2.0

package/dist/{TableControls-BehR7CKS.d.mts → TableControls-DscP6fyt.d.mts}

@@ -1,7 +1,7 @@
-import { n as ControlBarProps } from "./ControlBar-tOCQnbAl.mjs";
-import { t as AttributeColumn } from "./types-DEh_pXgS.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { n as ControlBarProps } from "./ControlBar-DYrjBDzu.mjs";
+import { t as AttributeColumn } from "./types-CjHuZoVJ.mjs";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/TableControls.d.ts
 interface TableControlsProps extends ControlBarProps {
@@ -67,4 +67,4 @@ declare const TableControls: ({
 }: TableControlsProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsProps as n, TableControls as t };
-//# sourceMappingURL=TableControls-BehR7CKS.d.mts.map
+//# sourceMappingURL=TableControls-DscP6fyt.d.mts.map

package/dist/TableControls.d.mts

@@ -1,2 +1,2 @@
-import { n as TableControlsProps, t as TableControls } from "./TableControls-BehR7CKS.mjs";
+import { n as TableControlsProps, t as TableControls } from "./TableControls-DscP6fyt.mjs";
 export { TableControlsProps, TableControls as default };

package/dist/{TableControlsContext-DAZx6Rrj.d.cts → TableControlsContext-BeJ7GHPN.d.mts}

@@ -1,4 +1,4 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-SYSKcZKW.cjs";
+import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-CjHuZoVJ.mjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
 
@@ -18,4 +18,4 @@ declare function TableControlsProvider<TFilter extends BaseFilterConfig = BaseFi
 }): _$react.FunctionComponentElement<_$react.ProviderProps<TableControlsContextProps<BaseFilterConfig, BaseActiveFilter<BaseFilterConfig>>>>;
 //#endregion
 export { useTableControls as i, TableControlsContextProps as n, TableControlsProvider as r, TableControlsContext as t };
-//# sourceMappingURL=TableControlsContext-DAZx6Rrj.d.cts.map
+//# sourceMappingURL=TableControlsContext-BeJ7GHPN.d.mts.map

package/dist/TableControlsContext.d.mts

@@ -1,2 +1,2 @@
-import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-D_SBFZN1.mjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-BeJ7GHPN.mjs";
 export { TableControlsContextProps, TableControlsProvider, TableControlsContext as default, useTableControls };

package/dist/{TableHead-Ch4Ho3LW.d.cts → TableHead-g3afLl5B.d.mts}

@@ -9,4 +9,4 @@ declare const TableHead: _$styled_components0.StyledComponent<"thead", any, {
 } & TableHeadProps, "role">;
 //#endregion
 export { TableHead as t };
-//# sourceMappingURL=TableHead-Ch4Ho3LW.d.cts.map
+//# sourceMappingURL=TableHead-g3afLl5B.d.mts.map

package/dist/TableHead.d.mts

@@ -1,2 +1,2 @@
-import { t as TableHead } from "./TableHead-LxvG0e9k.mjs";
+import { t as TableHead } from "./TableHead-g3afLl5B.mjs";
 export { TableHead as default };

package/dist/{TableHeaderCell-Crsa2R2g.d.cts → TableHeaderCell-CWTMf2Fe.d.mts}

@@ -14,4 +14,4 @@ interface TableIconContainerProps {
 declare const TableHeaderCell: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & TableHeaderCellProps & TableIconContainerProps & _$react.RefAttributes<HTMLTableCellElement>>;
 //#endregion
 export { TableHeaderCell as t };
-//# sourceMappingURL=TableHeaderCell-Crsa2R2g.d.cts.map
+//# sourceMappingURL=TableHeaderCell-CWTMf2Fe.d.mts.map

package/dist/TableHeaderCell.d.mts

@@ -1,2 +1,2 @@
-import { t as TableHeaderCell } from "./TableHeaderCell-Br8ZE3Xe.mjs";
+import { t as TableHeaderCell } from "./TableHeaderCell-CWTMf2Fe.mjs";
 export { TableHeaderCell as default };

package/dist/{TableLayout-nwy094C_.d.mts → TableLayout-hPlVO3dD.d.mts}

@@ -4,6 +4,12 @@ import { FC, PropsWithChildren, ReactNode } from "react";
 interface TableLayoutProps {
   className?: string;
   containerMaxHeight?: number;
+  /**
+   * When false, the container does not scroll horizontally and an ancestor is expected to.
+   * Sticky offsets inside the table then resolve against that ancestor's scrollport rather
+   * than against the container.
+   */
+  containerScrollsHorizontally?: boolean;
   dataTest?: string;
   headerTR: JSX.Element;
   isEmpty?: boolean;
@@ -16,4 +22,4 @@ interface TableLayoutProps {
 declare const TableLayout: FC<PropsWithChildren<TableLayoutProps>>;
 //#endregion
 export { TableLayout as t };
-//# sourceMappingURL=TableLayout-nwy094C_.d.mts.map
+//# sourceMappingURL=TableLayout-hPlVO3dD.d.mts.map

package/dist/TableLayout.d.mts

@@ -1,2 +1,2 @@
-import { t as TableLayout } from "./TableLayout-nwy094C_.mjs";
+import { t as TableLayout } from "./TableLayout-hPlVO3dD.mjs";
 export { TableLayout as default };

package/dist/{TableRow-BvS4yjo6.d.mts → TableRow-lvjbVccA.d.mts}

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-DLxPxo7T.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-CcSlKNev.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region components/Table/TableRow.d.ts
@@ -10,4 +10,4 @@ declare const TableRow: _$styled_components0.StyledComponent<"tr", any, {
 } & TableRowProps, "role">;
 //#endregion
 export { TableRowProps as n, TableRow as t };
-//# sourceMappingURL=TableRow-BvS4yjo6.d.mts.map
+//# sourceMappingURL=TableRow-lvjbVccA.d.mts.map

package/dist/TableRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableRowProps, t as TableRow } from "./TableRow-BvS4yjo6.mjs";
+import { n as TableRowProps, t as TableRow } from "./TableRow-lvjbVccA.mjs";
 export { TableRowProps, TableRow as default };

package/dist/TableTH.d.mts

@@ -1,2 +1,2 @@
-import { d as TableTHProps, u as TableTH } from "./index-DDbjWdk0.mjs";
+import { d as TableTHProps, u as TableTH } from "./index-Doptc4HI.mjs";
 export { TableTHProps, TableTH as default };

package/dist/{TableViewConfigurationDropdown-BYPh4dIP.d.mts → TableViewConfigurationDropdown-Ccxtk5dA.d.mts}

@@ -1,4 +1,4 @@
-import { t as AttributeColumn } from "./types-DEh_pXgS.mjs";
+import { t as AttributeColumn } from "./types-CjHuZoVJ.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/TableViewConfigurationDropdown.d.ts
@@ -29,4 +29,4 @@ declare const TableViewConfiguration: ({
 }: TableViewConfigurationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableViewConfigurationProps as i, TableViewConfigurationDropdown as n, TableViewConfigurationDropdownProps as r, TableViewConfiguration as t };
-//# sourceMappingURL=TableViewConfigurationDropdown-BYPh4dIP.d.mts.map
+//# sourceMappingURL=TableViewConfigurationDropdown-Ccxtk5dA.d.mts.map

package/dist/TableViewConfigurationDropdown.d.mts

@@ -1,2 +1,2 @@
-import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-BYPh4dIP.mjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-Ccxtk5dA.mjs";
 export { TableViewConfiguration, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TableViewConfigurationDropdown as default };

package/dist/{components/TechnicalSticker/index.cjs → TechnicalSticker-D7viw4H5.mjs}

@@ -1,32 +1,26 @@
-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-CO76xIqP.cjs");
-const require_useToggle = require("../../useToggle-DARO917w.cjs");
-const require_Tooltip = require("../../Tooltip-olP3rdUO.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_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-let _persona_icons_12px = require("@persona/icons/12px");
+import { t as MiddleTruncatedText } from "./MiddleTruncatedText-DjsUk8HM.mjs";
+import { t as useToggle } from "./useToggle-3k3EkV8V.mjs";
+import { a as Tooltip } from "./Tooltip-B-DDlRMw.mjs";
+import copyTextToClipboard from "./lib/copyTextToClipboard.mjs";
+import { isHovered } from "./lib/pseudoClass.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+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 = `${_persona_design_tokens.Typography.TextMono.fontWeight} ${_persona_design_tokens.Typography.TextExtraSmall.fontSize} ${_persona_design_tokens.Typography.TextMono.fontFamily}`;
+const TECHNICAL_TEXT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;
 const technicalStickerBackgrounds = {
-	grey: _persona_design_tokens.Color.BackgroundLabelGrey,
-	white: _persona_design_tokens.Color.BackgroundLabelWhite
+	grey: Color.BackgroundLabelGrey,
+	white: Color.BackgroundLabelWhite
 };
 const technicalStickerHoverBackgrounds = {
-	grey: _persona_design_tokens.Color.BackgroundLabelGreyHover,
-	white: _persona_design_tokens.Color.BackgroundButtonInverseHover
+	grey: Color.BackgroundLabelGreyHover,
+	white: Color.BackgroundButtonInverseHover
 };
 const isSafeTechnicalStickerHref = (href) => {
 	try {
@@ -36,12 +30,12 @@ const isSafeTechnicalStickerHref = (href) => {
 		return false;
 	}
 };
-const TechnicalStickerShell = styled_components.default.div`
+const TechnicalStickerShell = styled.div`
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
 
-  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
+  border-radius: ${BorderRadius.Sm};
   height: 1rem;
   width: ${({ $width }) => typeof $width === "number" ? `${$width}px` : $width ?? "auto"};
   max-width: 100%;
@@ -52,37 +46,37 @@ const TechnicalStickerShell = styled_components.default.div`
 
   position: relative;
   overflow: hidden;
-  border: 1px solid ${_persona_design_tokens.Color.BorderInputDefault};
+  border: 1px solid ${Color.BorderInputDefault};
 
-  ${({ variant, disabled }) => !disabled && styled_components.css`
+  ${({ variant, disabled }) => !disabled && css`
       &:hover {
         background: ${technicalStickerHoverBackgrounds[variant]};
       }
     `}
 `;
-const labelContainerStyles = styled_components.css`
+const labelContainerStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 ${_persona_design_tokens.Spacing[1]};
+  padding: 0 ${Spacing[1]};
 `;
-const LabelContainer = styled_components.default.div`
+const LabelContainer = styled.div`
   ${labelContainerStyles}
 `;
-const LabelLink = styled_components.default.a`
+const LabelLink = styled.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};
+const TechnicalText = styled(MiddleTruncatedText)`
+  ${Typography.TextMono};
+  font-size: ${Typography.TextExtraSmall.fontSize};
+  line-height: ${Typography.TextExtraSmall.lineHeight};
   text-align: center;
 
-  ${({ $isLinkEnabled, $isTruncated }) => $isTruncated && styled_components.css`
+  ${({ $isLinkEnabled, $isTruncated }) => $isTruncated && css`
       cursor: ${$isLinkEnabled ? "pointer" : "default"};
       user-select: none;
 
@@ -91,7 +85,7 @@ const TechnicalText = (0, styled_components.default)(require_MiddleTruncatedText
       }
     `}
 `;
-const CopyActions = styled_components.default.div`
+const CopyActions = styled.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -103,17 +97,20 @@ const CopyActions = styled_components.default.div`
   pointer-events: ${({ $visible }) => $visible ? "auto" : "none"};
   transition: opacity 120ms ease-in-out;
 
-  &:focus-within {
+  /* Keyboard focus keeps the actions reachable, but a click also focuses the
+     button — matching plain :focus-within would leave them visible after the
+     pointer moves away. */
+  &:has(:focus-visible) {
     opacity: 1;
     pointer-events: auto;
   }
 `;
-const CopyGradient = styled_components.default.div`
+const CopyGradient = styled.div`
   width: 8px;
   height: 16px;
   background: linear-gradient(to left, ${({ $background }) => $background}, transparent);
 `;
-const CopyButton = styled_components.default.button`
+const CopyButton = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -122,41 +119,54 @@ const CopyButton = styled_components.default.button`
   padding: 0 2px 0 0;
   border: none;
   background: ${({ $background }) => $background};
-  color: ${_persona_design_tokens.Color.BorderIconPrimary};
+  color: ${Color.BorderIconPrimary};
   cursor: pointer;
 
   &:disabled {
     cursor: not-allowed;
   }
 
-  &${require_lib_pseudoClass.isHovered}:not(:disabled) {
-    color: ${_persona_design_tokens.Color.TextPrimary};
+  &${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] = (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 TechnicalSticker = ({ variant = "grey", href, tooltipLabel: tooltipLabelProp, copyTooltipLabel = DEFAULT_COPY_TOOLTIP_LABEL, copyConfirmationLabel = COPY_CONFIRMATION_TEXT, copyable = true, copyValue, width, maxWidth = "96px", children, disabled, onMouseEnter, onMouseLeave, ...stickerProps }) => {
+	const [isHoveredState, setIsHoveredState] = useState(false);
+	const [isCopyButtonKeyboardFocused, setIsCopyButtonKeyboardFocused] = 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 copyButtonRef = useRef(null);
+	const isPointerFocusRef = useRef(false);
+	const copyRequestIdRef = useRef(0);
 	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 showCopyActions = copyable && !disabled && (isHoveredState || isCopyButtonKeyboardFocused || 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) => {
+	const handleCopyTooltipOpenChange = useCallback((open) => {
 		if (copyConfirmationOpen) return;
 		setIsCopyTooltipOpen(open);
 	}, [copyConfirmationOpen]);
-	const handleCopy = (0, react.useCallback)(async (event) => {
+	const dismissCopyConfirmation = useCallback(() => {
+		copyRequestIdRef.current += 1;
+		if (copyConfirmationTimerRef.current) {
+			clearTimeout(copyConfirmationTimerRef.current);
+			copyConfirmationTimerRef.current = null;
+		}
+		setIsCopyTooltipOpen(false);
+		hideCopyConfirmation();
+	}, [hideCopyConfirmation]);
+	const handleCopy = useCallback(async (event) => {
 		event.preventDefault();
 		event.stopPropagation();
 		if (disabled) return;
-		if (!await require_lib_copyTextToClipboard(copyValue ?? children)) return;
+		const requestId = ++copyRequestIdRef.current;
+		if (!await copyTextToClipboard(copyValue ?? children) || requestId !== copyRequestIdRef.current) return;
 		setIsCopyTooltipOpen(true);
 		showCopyConfirmation();
 		if (copyConfirmationTimerRef.current) clearTimeout(copyConfirmationTimerRef.current);
@@ -172,10 +182,22 @@ const TechnicalSticker = ({ variant = "grey", href, tooltipLabel: tooltipLabelPr
 		hideCopyConfirmation,
 		showCopyConfirmation
 	]);
-	(0, react.useEffect)(() => () => {
+	useEffect(() => () => {
 		if (copyConfirmationTimerRef.current) clearTimeout(copyConfirmationTimerRef.current);
 	}, []);
-	const technicalText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TechnicalText, {
+	const handleCopyButtonMouseDown = () => {
+		isPointerFocusRef.current = true;
+		setIsCopyButtonKeyboardFocused(false);
+	};
+	const handleCopyButtonFocus = () => {
+		setIsCopyButtonKeyboardFocused(!isPointerFocusRef.current);
+		isPointerFocusRef.current = false;
+	};
+	const handleCopyButtonBlur = () => {
+		isPointerFocusRef.current = false;
+		setIsCopyButtonKeyboardFocused(false);
+	};
+	const technicalText = /* @__PURE__ */ jsx(TechnicalText, {
 		value: children,
 		maxWidth: width ?? maxWidth,
 		font: TECHNICAL_TEXT_FONT,
@@ -184,20 +206,20 @@ const TechnicalSticker = ({ variant = "grey", href, tooltipLabel: tooltipLabelPr
 		$isLinkEnabled: isLinkEnabled,
 		$isTruncated: isTruncated
 	});
-	const labelContent = isLinkEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelLink, {
+	const labelContent = isLinkEnabled ? /* @__PURE__ */ 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, {
+	}) : /* @__PURE__ */ jsx(LabelContainer, { children: technicalText });
+	const labelWithTooltip = showStickerTooltip ? /* @__PURE__ */ jsx(Tooltip, {
 		trigger: labelContent,
 		interactive: true,
 		side: "top",
 		maxWidth: "400px",
 		children: tooltipLabel
 	}) : labelContent;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TechnicalStickerShell, {
+	return /* @__PURE__ */ jsxs(TechnicalStickerShell, {
 		...stickerProps,
 		variant,
 		disabled,
@@ -209,31 +231,36 @@ const TechnicalSticker = ({ variant = "grey", href, tooltipLabel: tooltipLabelPr
 		onMouseLeave: (event) => {
 			onMouseLeave?.(event);
 			setIsHoveredState(false);
+			if (!isCopyButtonKeyboardFocused) {
+				copyButtonRef.current?.blur();
+				dismissCopyConfirmation();
+			}
 		},
-		children: [labelWithTooltip, copyable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopyActions, {
+		children: [labelWithTooltip, copyable && /* @__PURE__ */ jsxs(CopyActions, {
 			$visible: showCopyActions,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyGradient, { $background: copyActionBackground }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+			children: [/* @__PURE__ */ jsx(CopyGradient, { $background: copyActionBackground }), /* @__PURE__ */ jsx(Tooltip, {
 				open: isCopyTooltipVisible,
 				onOpenChange: handleCopyTooltipOpenChange,
-				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
+				trigger: /* @__PURE__ */ jsx(CopyButton, {
+					ref: copyButtonRef,
 					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, {})
+					onMouseDown: handleCopyButtonMouseDown,
+					onBlur: handleCopyButtonBlur,
+					onFocus: handleCopyButtonFocus,
+					children: /* @__PURE__ */ jsx(CopyIcon, {})
 				}),
 				interactive: false,
 				side: "top",
-				children: copyConfirmationOpen ? COPY_CONFIRMATION_TEXT : copyTooltipLabel
+				children: copyConfirmationOpen ? copyConfirmationLabel : copyTooltipLabel
 			})]
 		})]
 	});
 };
 //#endregion
-exports.TechnicalSticker = TechnicalSticker;
-exports.default = TechnicalSticker;
+export { TechnicalSticker as t };
 
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=TechnicalSticker-D7viw4H5.mjs.map

package/dist/TechnicalSticker-D7viw4H5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TechnicalSticker-D7viw4H5.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  /* Keyboard focus keeps the actions reachable, but a click also focuses the\n     button — matching plain :focus-within would leave them visible after the\n     pointer moves away. */\n  &:has(:focus-visible) {\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  /**\n   * Confirmation label shown in the copy tooltip after a successful copy.\n   * Defaults to `Copied!`.\n   */\n  copyConfirmationLabel?: 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  copyConfirmationLabel = COPY_CONFIRMATION_TEXT,\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 [isCopyButtonKeyboardFocused, setIsCopyButtonKeyboardFocused] = 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  const copyButtonRef = useRef<HTMLButtonElement>(null);\n  const isPointerFocusRef = useRef(false);\n  const copyRequestIdRef = useRef(0);\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 &&\n    !disabled &&\n    (isHoveredState || isCopyButtonKeyboardFocused || 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 dismissCopyConfirmation = useCallback(() => {\n    // Writing to the clipboard is async, so a copy still in flight would\n    // otherwise surface its confirmation after the dismissal.\n    copyRequestIdRef.current += 1;\n\n    if (copyConfirmationTimerRef.current) {\n      clearTimeout(copyConfirmationTimerRef.current);\n      copyConfirmationTimerRef.current = null;\n    }\n\n    setIsCopyTooltipOpen(false);\n    hideCopyConfirmation();\n  }, [hideCopyConfirmation]);\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 requestId = ++copyRequestIdRef.current;\n      const copyWasSuccessful = await copyTextToClipboard(copyValue ?? children);\n      if (!copyWasSuccessful || requestId !== copyRequestIdRef.current) {\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  // Clicking an already keyboard-focused button fires no second focus event, so\n  // pointer input has to retire the keyboard state itself.\n  const handleCopyButtonMouseDown = () => {\n    isPointerFocusRef.current = true;\n    setIsCopyButtonKeyboardFocused(false);\n  };\n\n  // A click focuses the button too, so treating any focus as a reason to keep\n  // the actions visible would pin them open once the pointer moves away.\n  const handleCopyButtonFocus = () => {\n    setIsCopyButtonKeyboardFocused(!isPointerFocusRef.current);\n    isPointerFocusRef.current = false;\n  };\n\n  const handleCopyButtonBlur = () => {\n    isPointerFocusRef.current = false;\n    setIsCopyButtonKeyboardFocused(false);\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        if (!isCopyButtonKeyboardFocused) {\n          // Otherwise a click's focus lingers on a button that is now hidden.\n          copyButtonRef.current?.blur();\n          dismissCopyConfirmation();\n        }\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                ref={copyButtonRef}\n                type='button'\n                aria-label='Copy'\n                disabled={disabled}\n                $background={copyActionBackground}\n                onClick={handleCopy}\n                onMouseDown={handleCopyButtonMouseDown}\n                onBlur={handleCopyButtonBlur}\n                onFocus={handleCopyButtonFocus}\n              >\n                <CopyIcon />\n              </CopyButton>\n            }\n            interactive={false}\n            side='top'\n          >\n            {copyConfirmationOpen ? copyConfirmationLabel : 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;;;;;;;;;;;AAYnE,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;;;AAsC/B,MAAa,oBAAoB,EAC/B,UAAU,QACV,MACA,cAAc,kBACd,mBAAmB,4BACnB,wBAAwB,wBACxB,WAAW,MACX,WACA,OACA,WAAW,QACX,UACA,UACA,cACA,cACA,GAAG,mBACwB;CAC3B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,6BAA6B,kCAAkC,SAAS,MAAM;CACrF,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;CACnF,MAAM,gBAAgB,OAA0B,KAAK;CACrD,MAAM,oBAAoB,OAAO,MAAM;CACvC,MAAM,mBAAmB,OAAO,EAAE;CAElC,MAAM,eAAe,oBAAoB;CACzC,MAAM,wBAAwB,oBAAoB;CAElD,MAAM,kBAAkB,iCAAiC;CACzD,MAAM,uBAAuB,iBACzB,kBACA,4BAA4B;CAChC,MAAM,kBACJ,YACA,CAAC,aACA,kBAAkB,+BAA+B;CACpD,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,0BAA0B,kBAAkB;AAGhD,mBAAiB,WAAW;AAE5B,MAAI,yBAAyB,SAAS;AACpC,gBAAa,yBAAyB,QAAQ;AAC9C,4BAAyB,UAAU;;AAGrC,uBAAqB,MAAM;AAC3B,wBAAsB;IACrB,CAAC,qBAAqB,CAAC;CAE1B,MAAM,aAAa,YACjB,OAAO,UAAyC;AAC9C,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AAEvB,MAAI,SACF;EAGF,MAAM,YAAY,EAAE,iBAAiB;AAErC,MAAI,CAAC,MAD2B,oBAAoB,aAAa,SAAS,IAChD,cAAc,iBAAiB,QACvD;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;CAID,MAAM,kCAAkC;AACtC,oBAAkB,UAAU;AAC5B,iCAA+B,MAAM;;CAKvC,MAAM,8BAA8B;AAClC,iCAA+B,CAAC,kBAAkB,QAAQ;AAC1D,oBAAkB,UAAU;;CAG9B,MAAM,6BAA6B;AACjC,oBAAkB,UAAU;AAC5B,iCAA+B,MAAM;;CAGvC,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;AACxB,OAAI,CAAC,6BAA6B;AAEhC,kBAAc,SAAS,MAAM;AAC7B,6BAAyB;;;YAf/B,CAmBG,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,KAAK;KACL,MAAK;KACL,cAAW;KACD;KACV,aAAa;KACb,SAAS;KACT,aAAa;KACb,QAAQ;KACR,SAAS;eAET,oBAAC,UAAD,EAAY,CAAA;KACD,CAAA;IAEf,aAAa;IACb,MAAK;cAEJ,uBAAuB,wBAAwB;IACxC,CAAA,CACE;KAEM"}

package/dist/TechnicalSticker.d.mts

@@ -1,5 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/TechnicalSticker/TechnicalSticker.d.ts
 type TechnicalStickerVariant = 'grey' | 'white';
@@ -22,6 +22,11 @@ interface TechnicalStickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'c
    * Defaults to `Copy ID`.
    */
   copyTooltipLabel?: string;
+  /**
+   * Confirmation label shown in the copy tooltip after a successful copy.
+   * Defaults to `Copied!`.
+   */
+  copyConfirmationLabel?: string;
   /** Whether to show the hover copy action. Default: true. */
   copyable?: boolean;
   /** Value copied to the clipboard. Defaults to `children`. */
@@ -36,6 +41,7 @@ declare const TechnicalSticker: ({
   href,
   tooltipLabel: tooltipLabelProp,
   copyTooltipLabel,
+  copyConfirmationLabel,
   copyable,
   copyValue,
   width,

package/dist/{Text-DNPbAuUG.d.mts → Text-CEisq2at.d.mts}

@@ -1,7 +1,7 @@
-import { i as ParagraphSize, n as HeadingSize, t as DisplaySize } from "./text-B21s9mRZ.mjs";
-import { r as TextColors } from "./theme-BzBpJXhO.mjs";
-import * as _$styled_components0 from "styled-components";
+import { i as ParagraphSize, n as HeadingSize, t as DisplaySize } from "./text-BaQdW8qa.mjs";
+import { r as TextColors } from "./theme-D9Y6NOzb.mjs";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from "react";
+import * as _$styled_components0 from "styled-components";
 
 //#region components/Text/Text.d.ts
 interface SpanProps {
@@ -39,4 +39,4 @@ declare const Label: _$styled_components0.StyledComponent<FC<PropsWithChildren<S
 declare const TabularNumber: _$styled_components0.StyledComponent<FC<PropsWithChildren<SpanProps>>, any, ParagraphProps, never>;
 //#endregion
 export { Label as a, ParagraphProps as c, TabularNumber as d, HeadingProps as i, Span as l, DisplayProps as n, LabelProps as o, Heading as r, Paragraph as s, Display as t, SpanProps as u };
-//# sourceMappingURL=Text-DNPbAuUG.d.mts.map
+//# sourceMappingURL=Text-CEisq2at.d.mts.map

package/dist/{Text-RcEfNFLx.mjs → Text-hEoPeOc9.mjs}

@@ -55,4 +55,4 @@ const TabularNumber = styled(Paragraph)`
 //#endregion
 export { Span as a, Paragraph as i, Heading as n, TabularNumber as o, Label as r, Display as t };
 
-//# sourceMappingURL=Text-RcEfNFLx.mjs.map
+//# sourceMappingURL=Text-hEoPeOc9.mjs.map

package/dist/{Text-RcEfNFLx.mjs.map → Text-hEoPeOc9.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Text-RcEfNFLx.mjs","names":[],"sources":["../components/Text/Text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  displayMixins,\n  type DisplaySize,\n  fontFamilyMixin,\n  headingMixins,\n  type HeadingSize,\n  paragraphMixins,\n  type ParagraphMixinSize,\n  type ParagraphSize,\n} from 'design-system/mixins/text';\nimport type { TextColors } from 'design-system/theme';\n\nexport interface SpanProps {\n  id?: string;\n  color?: keyof TextColors | null;\n  'data-test'?: string;\n}\n\nconst StyledSpan: FC<PropsWithChildren<SpanProps>> = ({ children, color, ...othersThanColor }) => (\n  <span {...othersThanColor}>{children}</span>\n);\n\n/**\n * Base class of all Text components.\n */\nexport const Span = styled(StyledSpan)`\n  color: ${({ color = 'primary', theme }) => (color == null ? 'inherit' : theme.color.text[color])};\n  ${fontFamilyMixin};\n`;\n\nexport interface DisplayProps {\n  size: DisplaySize;\n}\n\nexport const Display = styled(Span).attrs(() => ({ as: 'h1' }))<DisplayProps>`\n  ${({ size }) => displayMixins[size]}\n`;\n\nexport interface HeadingProps\n  extends\n    Omit<ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>, 'color'>,\n    SpanProps {\n  size: HeadingSize;\n  as?: string | ComponentType<any>;\n}\n\nconst HeadingComponent = styled(Span)<HeadingProps>`\n  ${({ size }) => headingMixins[size]}\n`;\n\n// Needs a wrapper to support chaining .attrs without overwriting `as: size`\n// This is a bug with styled components when chaining .attrs where the inner\n// .attr cannot access values passed by the outer .attr.\nexport const Heading: FC<HeadingProps> = ({ as, size, ...props }) => {\n  return <HeadingComponent as={as || 'h3'} size={size} {...props} />;\n};\n\nexport interface ParagraphProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  as?: string | ComponentType<any>;\n}\n\nexport const Paragraph = styled(Span).attrs<ParagraphProps>(({ as = 'p' }) => ({\n  as,\n}))<ParagraphProps>`\n  ${({ size = 'md', weight = 'normal' }) => {\n    if (weight !== 'normal') {\n      if (!['sm', 'md', 'lg'].includes(size) || (size === 'sm' && weight === 'light')) {\n        console.error(`Size '${size}' does not exist for weight '${weight}'.`);\n      } else {\n        return paragraphMixins[\n          (size + weight.charAt(0).toUpperCase() + weight.slice(1)) as ParagraphMixinSize\n        ];\n      }\n    }\n\n    return paragraphMixins[size];\n  }}\n  /* Unlike the other text components, Paragraph defaults to the secondary text color. */\n  color: ${({ color = 'secondary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport interface LabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  'data-test'?: string;\n}\n\nexport const Label = styled(Paragraph).attrs<LabelProps>({\n  as: 'label',\n})<LabelProps>`\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport const TabularNumber = styled(Paragraph)`\n  font-variant-numeric: tabular-nums;\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n"],"mappings":";;;;AAqBA,MAAM,cAAgD,EAAE,UAAU,OAAO,GAAG,sBAC1E,oBAAC,QAAD;CAAM,GAAI;CAAkB;CAAgB,CAAA;;;;AAM9C,MAAa,OAAO,OAAO,WAAW;YAC1B,EAAE,QAAQ,WAAW,YAAa,SAAS,OAAO,YAAY,MAAM,MAAM,KAAK,OAAQ;IAC/F,gBAAgB;;AAOpB,MAAa,UAAU,OAAO,KAAK,CAAC,aAAa,EAAE,IAAI,MAAM,EAAE;KAC1D,EAAE,WAAW,cAAc,MAAM;;AAWtC,MAAM,mBAAmB,OAAO,KAAK;KAChC,EAAE,WAAW,cAAc,MAAM;;AAMtC,MAAa,WAA6B,EAAE,IAAI,MAAM,GAAG,YAAY;AACnE,QAAO,oBAAC,kBAAD;EAAkB,IAAI,MAAM;EAAY;EAAM,GAAI;EAAS,CAAA;;AASpE,MAAa,YAAY,OAAO,KAAK,CAAC,OAAuB,EAAE,KAAK,WAAW,EAC7E,IACD,EAAE;KACE,EAAE,OAAO,MAAM,SAAS,eAAe;AACxC,KAAI,WAAW,SACb,KAAI,CAAC;EAAC;EAAM;EAAM;EAAK,CAAC,SAAS,KAAK,IAAK,SAAS,QAAQ,WAAW,QACrE,SAAQ,MAAM,SAAS,KAAK,+BAA+B,OAAO,IAAI;KAEtE,QAAO,gBACJ,OAAO,OAAO,OAAO,EAAE,CAAC,aAAa,GAAG,OAAO,MAAM,EAAE;AAK9D,QAAO,gBAAgB;EACvB;;YAEQ,EAAE,QAAQ,aAAa,YAAY;AAE3C,QAAO,MAAM,MAAM,KAAK;EACxB;;AASJ,MAAa,QAAQ,OAAO,UAAU,CAAC,MAAkB,EACvD,IAAI,SACL,CAAC;YACU,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB;;AAGJ,MAAa,gBAAgB,OAAO,UAAU;;YAElC,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB"}
+{"version":3,"file":"Text-hEoPeOc9.mjs","names":[],"sources":["../components/Text/Text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  displayMixins,\n  type DisplaySize,\n  fontFamilyMixin,\n  headingMixins,\n  type HeadingSize,\n  paragraphMixins,\n  type ParagraphMixinSize,\n  type ParagraphSize,\n} from 'design-system/mixins/text';\nimport type { TextColors } from 'design-system/theme';\n\nexport interface SpanProps {\n  id?: string;\n  color?: keyof TextColors | null;\n  'data-test'?: string;\n}\n\nconst StyledSpan: FC<PropsWithChildren<SpanProps>> = ({ children, color, ...othersThanColor }) => (\n  <span {...othersThanColor}>{children}</span>\n);\n\n/**\n * Base class of all Text components.\n */\nexport const Span = styled(StyledSpan)`\n  color: ${({ color = 'primary', theme }) => (color == null ? 'inherit' : theme.color.text[color])};\n  ${fontFamilyMixin};\n`;\n\nexport interface DisplayProps {\n  size: DisplaySize;\n}\n\nexport const Display = styled(Span).attrs(() => ({ as: 'h1' }))<DisplayProps>`\n  ${({ size }) => displayMixins[size]}\n`;\n\nexport interface HeadingProps\n  extends\n    Omit<ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>, 'color'>,\n    SpanProps {\n  size: HeadingSize;\n  as?: string | ComponentType<any>;\n}\n\nconst HeadingComponent = styled(Span)<HeadingProps>`\n  ${({ size }) => headingMixins[size]}\n`;\n\n// Needs a wrapper to support chaining .attrs without overwriting `as: size`\n// This is a bug with styled components when chaining .attrs where the inner\n// .attr cannot access values passed by the outer .attr.\nexport const Heading: FC<HeadingProps> = ({ as, size, ...props }) => {\n  return <HeadingComponent as={as || 'h3'} size={size} {...props} />;\n};\n\nexport interface ParagraphProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  as?: string | ComponentType<any>;\n}\n\nexport const Paragraph = styled(Span).attrs<ParagraphProps>(({ as = 'p' }) => ({\n  as,\n}))<ParagraphProps>`\n  ${({ size = 'md', weight = 'normal' }) => {\n    if (weight !== 'normal') {\n      if (!['sm', 'md', 'lg'].includes(size) || (size === 'sm' && weight === 'light')) {\n        console.error(`Size '${size}' does not exist for weight '${weight}'.`);\n      } else {\n        return paragraphMixins[\n          (size + weight.charAt(0).toUpperCase() + weight.slice(1)) as ParagraphMixinSize\n        ];\n      }\n    }\n\n    return paragraphMixins[size];\n  }}\n  /* Unlike the other text components, Paragraph defaults to the secondary text color. */\n  color: ${({ color = 'secondary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport interface LabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'color'>, SpanProps {\n  size?: ParagraphSize;\n  weight?: 'bold' | 'normal' | 'light';\n  'data-test'?: string;\n}\n\nexport const Label = styled(Paragraph).attrs<LabelProps>({\n  as: 'label',\n})<LabelProps>`\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n\nexport const TabularNumber = styled(Paragraph)`\n  font-variant-numeric: tabular-nums;\n  color: ${({ color = 'primary', theme }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return theme.color.text[color];\n  }};\n`;\n"],"mappings":";;;;AAqBA,MAAM,cAAgD,EAAE,UAAU,OAAO,GAAG,sBAC1E,oBAAC,QAAD;CAAM,GAAI;CAAkB;CAAgB,CAAA;;;;AAM9C,MAAa,OAAO,OAAO,WAAW;YAC1B,EAAE,QAAQ,WAAW,YAAa,SAAS,OAAO,YAAY,MAAM,MAAM,KAAK,OAAQ;IAC/F,gBAAgB;;AAOpB,MAAa,UAAU,OAAO,KAAK,CAAC,aAAa,EAAE,IAAI,MAAM,EAAE;KAC1D,EAAE,WAAW,cAAc,MAAM;;AAWtC,MAAM,mBAAmB,OAAO,KAAK;KAChC,EAAE,WAAW,cAAc,MAAM;;AAMtC,MAAa,WAA6B,EAAE,IAAI,MAAM,GAAG,YAAY;AACnE,QAAO,oBAAC,kBAAD;EAAkB,IAAI,MAAM;EAAY;EAAM,GAAI;EAAS,CAAA;;AASpE,MAAa,YAAY,OAAO,KAAK,CAAC,OAAuB,EAAE,KAAK,WAAW,EAC7E,IACD,EAAE;KACE,EAAE,OAAO,MAAM,SAAS,eAAe;AACxC,KAAI,WAAW,SACb,KAAI,CAAC;EAAC;EAAM;EAAM;EAAK,CAAC,SAAS,KAAK,IAAK,SAAS,QAAQ,WAAW,QACrE,SAAQ,MAAM,SAAS,KAAK,+BAA+B,OAAO,IAAI;KAEtE,QAAO,gBACJ,OAAO,OAAO,OAAO,EAAE,CAAC,aAAa,GAAG,OAAO,MAAM,EAAE;AAK9D,QAAO,gBAAgB;EACvB;;YAEQ,EAAE,QAAQ,aAAa,YAAY;AAE3C,QAAO,MAAM,MAAM,KAAK;EACxB;;AASJ,MAAa,QAAQ,OAAO,UAAU,CAAC,MAAkB,EACvD,IAAI,SACL,CAAC;YACU,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB;;AAGJ,MAAa,gBAAgB,OAAO,UAAU;;YAElC,EAAE,QAAQ,WAAW,YAAY;AAEzC,QAAO,MAAM,MAAM,KAAK;EACxB"}

package/dist/Text.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-DNPbAuUG.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-CEisq2at.mjs";
 export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/{TextArea-B89wtTsF.d.mts → TextArea-DiKEhpfD.d.mts}

@@ -1,4 +1,4 @@
-import { t as InputProps } from "./InputProps-BnjxrdWQ.mjs";
+import { t as InputProps } from "./InputProps-Buxtnz77.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef } from "react";
 
@@ -7,4 +7,4 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, Omit<Input
 declare const TextAreaWithStyle: _$react.ForwardRefExoticComponent<TextAreaProps & _$react.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 export { TextAreaWithStyle as n, TextAreaProps as t };
-//# sourceMappingURL=TextArea-B89wtTsF.d.mts.map
+//# sourceMappingURL=TextArea-DiKEhpfD.d.mts.map

package/dist/{TextArea-NCLsW-03.mjs → TextArea-DjmlpCdJ.mjs}

@@ -1,9 +1,9 @@
 import "./variables/transitions.mjs";
 import inputMixin from "./mixins/input.mjs";
 import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
+import { forwardRef } from "react";
 import styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 //#region components/TextArea/TextArea.tsx
 const TextArea = styled("textarea")`
   ${inputMixin};
@@ -30,4 +30,4 @@ const TextAreaWithStyle = forwardRef(function TextAreaWithStyle({ size, ...props
 //#endregion
 export { TextAreaWithStyle as t };
 
-//# sourceMappingURL=TextArea-NCLsW-03.mjs.map
+//# sourceMappingURL=TextArea-DjmlpCdJ.mjs.map

package/dist/{TextArea-NCLsW-03.mjs.map → TextArea-DjmlpCdJ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-NCLsW-03.mjs","names":[],"sources":["../components/TextArea/TextArea.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport inputMixin, { type InputMixinProps } from 'design-system/mixins/input';\nimport type { InputProps } from 'design-system/types/InputProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TextAreaProps\n  extends ComponentPropsWithoutRef<'textarea'>, Omit<InputProps, 'inputSize'> {}\n\nconst TextArea = styled('textarea')<InputMixinProps>`\n  ${inputMixin};\n  /* Don't cut off overflow text */\n  padding-bottom: 0;\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  height: ${({ theme }) => theme.element.height.xl};\n  white-space: pre-wrap;\n  transition:\n    all ${TransitionDuration.Fast},\n    height 0s,\n    width 0s;\n`;\n\nconst TextAreaWithStyle = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaWithStyle(\n  { size, ...props },\n  ref,\n) {\n  const { inputId } = useFormField(props);\n\n  return (\n    <TextArea\n      id={inputId}\n      aria-invalid={props.hasError === true}\n      ref={ref}\n      {...props}\n      $size={size}\n    />\n  );\n});\n\nexport { TextAreaWithStyle as TextArea };\nexport default TextAreaWithStyle;\n"],"mappings":";;;;;;;AAWA,MAAM,WAAW,OAAO,WAAW;IAC/B,WAAW;;;kBAGG,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;aAC9C,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;;;kBAGjB;;;;AAKlC,MAAM,oBAAoB,WAA+C,SAAS,kBAChF,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,EAAE,YAAY,aAAa,MAAM;AAEvC,QACE,oBAAC,UAAD;EACE,IAAI;EACJ,gBAAc,MAAM,aAAa;EAC5B;EACL,GAAI;EACJ,OAAO;EACP,CAAA;EAEJ"}
+{"version":3,"file":"TextArea-DjmlpCdJ.mjs","names":[],"sources":["../components/TextArea/TextArea.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport inputMixin, { type InputMixinProps } from 'design-system/mixins/input';\nimport type { InputProps } from 'design-system/types/InputProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TextAreaProps\n  extends ComponentPropsWithoutRef<'textarea'>, Omit<InputProps, 'inputSize'> {}\n\nconst TextArea = styled('textarea')<InputMixinProps>`\n  ${inputMixin};\n  /* Don't cut off overflow text */\n  padding-bottom: 0;\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  height: ${({ theme }) => theme.element.height.xl};\n  white-space: pre-wrap;\n  transition:\n    all ${TransitionDuration.Fast},\n    height 0s,\n    width 0s;\n`;\n\nconst TextAreaWithStyle = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaWithStyle(\n  { size, ...props },\n  ref,\n) {\n  const { inputId } = useFormField(props);\n\n  return (\n    <TextArea\n      id={inputId}\n      aria-invalid={props.hasError === true}\n      ref={ref}\n      {...props}\n      $size={size}\n    />\n  );\n});\n\nexport { TextAreaWithStyle as TextArea };\nexport default TextAreaWithStyle;\n"],"mappings":";;;;;;;AAWA,MAAM,WAAW,OAAO,WAAW;IAC/B,WAAW;;;kBAGG,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;aAC9C,EAAE,YAAY,MAAM,QAAQ,OAAO,GAAG;;;kBAGjB;;;;AAKlC,MAAM,oBAAoB,WAA+C,SAAS,kBAChF,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,EAAE,YAAY,aAAa,MAAM;AAEvC,QACE,oBAAC,UAAD;EACE,IAAI;EACJ,gBAAc,MAAM,aAAa;EAC5B;EACL,GAAI;EACJ,OAAO;EACP,CAAA;EAEJ"}

package/dist/TextArea.d.mts

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