@persona/design-system 0.2.1 → 0.3.1

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

@@ -1,5 +1,5 @@
-import { n as ControlBarProps } from "./ControlBar-DYrjBDzu.mjs";
-import { t as AttributeColumn } from "./types-CjHuZoVJ.mjs";
+import { n as ControlBarProps } from "./ControlBar-0XwbM4yC.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-CHBOjw7O.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -27,11 +27,7 @@ interface TableControlsProps extends ControlBarProps {
    * Column configuration options for the table.
    * If provided, displays a settings button to configure visible columns.
    */
-  columnConfigurationProps?: {
-    columnConfiguration: AttributeColumn[];
-    attributeOptions: AttributeColumn[];
-    updateColumnConfiguration: (newConfiguration: AttributeColumn[]) => void;
-  };
+  columnConfigurationProps?: TableViewConfigurationProps;
 }
 declare const TableControls: ({
   filterPanel,
@@ -67,4 +63,4 @@ declare const TableControls: ({
 }: TableControlsProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsProps as n, TableControls as t };
-//# sourceMappingURL=TableControls-DscP6fyt.d.mts.map
+//# sourceMappingURL=TableControls-CrGGlkEG.d.mts.map

package/dist/TableControls.d.mts

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

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

@@ -1,4 +1,4 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-CjHuZoVJ.mjs";
+import { n as BaseActiveFilter, r as BaseFilterConfig } from "./types-0_9G0kWg.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-BeJ7GHPN.d.mts.map
+//# sourceMappingURL=TableControlsContext-BKZt2Jid.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-BeJ7GHPN.mjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-BKZt2Jid.mjs";
 export { TableControlsContextProps, TableControlsProvider, TableControlsContext as default, useTableControls };

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

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

package/dist/TableHead.d.mts

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

package/dist/{TableHeaderCell-CWTMf2Fe.d.mts → TableHeaderCell-DK4R8vdK.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-CWTMf2Fe.d.mts.map
+//# sourceMappingURL=TableHeaderCell-DK4R8vdK.d.mts.map

package/dist/TableHeaderCell.d.mts

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

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

@@ -22,4 +22,4 @@ interface TableLayoutProps {
 declare const TableLayout: FC<PropsWithChildren<TableLayoutProps>>;
 //#endregion
 export { TableLayout as t };
-//# sourceMappingURL=TableLayout-hPlVO3dD.d.mts.map
+//# sourceMappingURL=TableLayout-BcIazRB-.d.mts.map

package/dist/TableLayout.d.mts

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

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

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-CcSlKNev.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-DgT5G_z5.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-lvjbVccA.d.mts.map
+//# sourceMappingURL=TableRow-DdJcjG2b.d.mts.map

package/dist/TableRow.d.mts

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

package/dist/TableTH.d.mts

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

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

@@ -1,4 +1,4 @@
-import { t as AttributeColumn } from "./types-CjHuZoVJ.mjs";
+import { t as AttributeColumn } from "./types-0_9G0kWg.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/TableViewConfigurationDropdown.d.ts
@@ -20,13 +20,15 @@ interface TableViewConfigurationProps {
   attributeOptions: AttributeColumn[];
   updateColumnConfiguration: (newConfiguration: AttributeColumn[]) => void;
   getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;
+  sortByRelevance?: boolean;
 }
 declare const TableViewConfiguration: ({
   columnConfiguration,
   attributeOptions,
   updateColumnConfiguration,
-  getColumnDisabled
+  getColumnDisabled,
+  sortByRelevance
 }: TableViewConfigurationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableViewConfigurationProps as i, TableViewConfigurationDropdown as n, TableViewConfigurationDropdownProps as r, TableViewConfiguration as t };
-//# sourceMappingURL=TableViewConfigurationDropdown-Ccxtk5dA.d.mts.map
+//# sourceMappingURL=TableViewConfigurationDropdown-CHBOjw7O.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-Ccxtk5dA.mjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-CHBOjw7O.mjs";
 export { TableViewConfiguration, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TableViewConfigurationDropdown as default };

package/dist/{TechnicalSticker-BrvR0zhC.mjs → TechnicalSticker-D3eeGMDR.mjs}

@@ -1,10 +1,10 @@
-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 { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { t as MiddleTruncatedText } from "./MiddleTruncatedText-DnF7F_1D.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
+import { a as Tooltip } from "./Tooltip-iJcfJqxn.mjs";
 import copyTextToClipboard from "./lib/copyTextToClipboard.mjs";
+import { isHovered } from "./lib/pseudoClass.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";
@@ -263,4 +263,4 @@ const TechnicalSticker = ({ variant = "grey", href, tooltipLabel: tooltipLabelPr
 //#endregion
 export { TechnicalSticker as t };
 
-//# sourceMappingURL=TechnicalSticker-BrvR0zhC.mjs.map
+//# sourceMappingURL=TechnicalSticker-D3eeGMDR.mjs.map

package/dist/{TechnicalSticker-BrvR0zhC.mjs.map → TechnicalSticker-D3eeGMDR.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TechnicalSticker-BrvR0zhC.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":"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"}
+{"version":3,"file":"TechnicalSticker-D3eeGMDR.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":"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"}

package/dist/{Text-hEoPeOc9.mjs → Text-B0orb-cZ.mjs}

@@ -1,5 +1,5 @@
+import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { displayMixins, fontFamilyMixin, headingMixins, paragraphMixins } from "./mixins/text.mjs";
-import styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
 //#region components/Text/Text.tsx
 const StyledSpan = ({ children, color, ...othersThanColor }) => /* @__PURE__ */ jsx("span", {
@@ -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-hEoPeOc9.mjs.map
+//# sourceMappingURL=Text-B0orb-cZ.mjs.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Text-B0orb-cZ.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-CfIFUyHt.d.mts → Text-BIgrwIdS.d.mts}

@@ -1,7 +1,7 @@
-import { i as ParagraphSize, n as HeadingSize, t as DisplaySize } from "./text-BaQdW8qa.mjs";
-import { r as TextColors } from "./theme-D9Y6NOzb.mjs";
-import * as _$styled_components0 from "styled-components";
+import { i as ParagraphSize, n as HeadingSize, t as DisplaySize } from "./text-xwtyWIbE.mjs";
+import { r as TextColors } from "./theme-Ftogn9Wo.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-CfIFUyHt.d.mts.map
+//# sourceMappingURL=Text-BIgrwIdS.d.mts.map

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-CfIFUyHt.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-BIgrwIdS.mjs";
 export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

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

@@ -1,4 +1,4 @@
-import { t as InputProps } from "./InputProps-Buxtnz77.mjs";
+import { t as InputProps } from "./InputProps-sHxlDiss.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-DiKEhpfD.d.mts.map
+//# sourceMappingURL=TextArea-CiLttt0s.d.mts.map

package/dist/{TextArea-BFsXUkuj.mjs → TextArea-DWXuV2aZ.mjs}

@@ -1,7 +1,7 @@
+import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
 import "./variables/transitions.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
-import styled from "styled-components";
+import { n as useFormField } from "./useFormField-Bz2iMPBO.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region components/TextArea/TextArea.tsx
@@ -30,4 +30,4 @@ const TextAreaWithStyle = forwardRef(function TextAreaWithStyle({ size, ...props
 //#endregion
 export { TextAreaWithStyle as t };
 
-//# sourceMappingURL=TextArea-BFsXUkuj.mjs.map
+//# sourceMappingURL=TextArea-DWXuV2aZ.mjs.map

package/dist/{TextArea-BFsXUkuj.mjs.map → TextArea-DWXuV2aZ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-BFsXUkuj.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-DWXuV2aZ.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-DiKEhpfD.mjs";
+import { n as TextAreaWithStyle, t as TextAreaProps } from "./TextArea-CiLttt0s.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/{TextUnderlineTooltip-Bs6Jn5yr.d.mts → TextUnderlineTooltip-_7mIrZ2-.d.mts}

@@ -1,6 +1,6 @@
-import { r as TooltipStandardProps } from "./Tooltip-0iXDCV2O.mjs";
-import * as _$styled_components0 from "styled-components";
+import { r as TooltipStandardProps } from "./Tooltip-DX-N-szt.mjs";
 import { ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Tooltip/TextUnderlineTooltip.d.ts
@@ -15,4 +15,4 @@ declare const TextUnderlineTooltip: ({
 }: TextUnderlineTooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TextWithDashedUnderline as n, TextUnderlineTooltip as t };
-//# sourceMappingURL=TextUnderlineTooltip-Bs6Jn5yr.d.mts.map
+//# sourceMappingURL=TextUnderlineTooltip-_7mIrZ2-.d.mts.map

package/dist/TextUnderlineTooltip.d.mts

@@ -1,2 +1,2 @@
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "./TextUnderlineTooltip-Bs6Jn5yr.mjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "./TextUnderlineTooltip-_7mIrZ2-.mjs";
 export { TextWithDashedUnderline, TextUnderlineTooltip as default };

package/dist/Tile.d.mts

@@ -1,4 +1,4 @@
-import { o as StickerProps } from "./Sticker-BIVuastf.mjs";
+import { o as StickerProps } from "./Sticker-DnSemOcW.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/Toast.d.mts

@@ -1,4 +1,4 @@
-import { t as MessageType } from "./message-CsK3sIq0.mjs";
+import { t as MessageType } from "./message-CqKB5mko.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { HTMLMotionProps } from "framer-motion";
 

package/dist/{Toggle-oukvAn6V.d.mts → Toggle-Cav7bMxg.d.mts}

@@ -51,4 +51,4 @@ interface ToggleProps {
 declare const Toggle: _$react.ForwardRefExoticComponent<ToggleProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ToggleProps as n, Toggle as t };
-//# sourceMappingURL=Toggle-oukvAn6V.d.mts.map
+//# sourceMappingURL=Toggle-Cav7bMxg.d.mts.map

package/dist/{Toggle-CC2FTAKS.mjs → Toggle-e8DCYa6i.mjs}

@@ -1,11 +1,11 @@
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { r as Label } from "./Text-B0orb-cZ.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
+import "./variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
-import { r as Label } from "./Text-hEoPeOc9.mjs";
-import { t as useToggle } from "./useToggle-3k3EkV8V.mjs";
-import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { n as useFormField } from "./useFormField-Bz2iMPBO.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { forwardRef, useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react-aria";
@@ -164,4 +164,4 @@ const Toggle = forwardRef(function Toggle({ className, disabled, titleOff = "Off
 //#endregion
 export { Toggle as t };
 
-//# sourceMappingURL=Toggle-CC2FTAKS.mjs.map
+//# sourceMappingURL=Toggle-e8DCYa6i.mjs.map

package/dist/{Toggle-CC2FTAKS.mjs.map → Toggle-e8DCYa6i.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Toggle-CC2FTAKS.mjs","names":[],"sources":["../components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, type ReactNode, useCallback, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { Label } from 'design-system/components/Text';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype ToggleSize = 'md' | 'sm';\n\ninterface SwitchSizes {\n  width: number;\n  height: number;\n}\n\nconst SWITCH_SIZES: Record<ToggleSize, SwitchSizes> = {\n  md: { width: 32, height: 18 },\n  sm: { width: 28, height: parseInt(Spacing[4], 10) }, // 16px height from tokens\n};\n\ninterface SliderSizes {\n  diameter: number;\n  offset: number;\n}\n\nconst SLIDER_SIZES: Record<ToggleSize, SliderSizes> = {\n  md: { diameter: 14, offset: 2 },\n  sm: { diameter: parseInt(Spacing[3], 10), offset: 2 }, // 12px diameter from tokens\n};\n\nconst Container = styled.div`\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n`;\n\ntype SwitchProps = Pick<ToggleProps, 'disabled'> & {\n  checked: boolean;\n  focused: boolean;\n  size: ToggleSize;\n};\nconst Switch = styled.div<SwitchProps>`\n  transition: box-shadow ${TransitionDuration.Fast};\n  position: relative;\n  display: inline-flex;\n  height: ${({ size }) => SWITCH_SIZES[size].height}px;\n  width: ${({ size }) => SWITCH_SIZES[size].width}px;\n  border-radius: 1000px;\n  cursor: pointer;\n  &${isDisabled} {\n    cursor: not-allowed;\n  }\n\n  ${focusOutlineControlled}\n\n  /* Background */\n  &:before {\n    position: absolute;\n    content: '';\n    height: ${({ size }) => SWITCH_SIZES[size].height}px;\n    width: ${({ size }) => SWITCH_SIZES[size].width}px;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ${({ checked, disabled }) =>\n      disabled\n        ? checked\n          ? Color.BackgroundInputActiveDisabled\n          : Color.BackgroundInputDisabled\n        : checked\n          ? Color.BackgroundInputActive\n          : Color.BackgroundInputToggle};\n\n    transition: ${TransitionDuration.Medium};\n    border-radius: 1000px;\n  }\n\n  &${isHovered}${isNotDisabled}:before {\n    background-color: ${({ checked }) =>\n      checked ? Color.BackgroundInputActiveHover : Color.BackgroundInputToggleHover};\n  }\n\n  /* Slider thumb */\n  &:after {\n    position: absolute;\n    content: '';\n    height: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n    width: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n    bottom: ${({ size }) => SLIDER_SIZES[size].offset}px;\n    background-color: ${Color.BackgroundInputDefault};\n    transition: ${TransitionDuration.Medium};\n    border-radius: 1000px;\n\n    right: ${({ size }) => SLIDER_SIZES[size].offset}px;\n\n    ${({ checked, size }) =>\n      !checked &&\n      css`\n        transform: translateX(-${getSlideDistance(size)}px);\n      `}\n  }\n`;\n\nconst ToggleLabel = styled(Label)<Pick<ToggleProps, 'disabled' | 'size'>>`\n  cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};\n  color: ${Color.TextSecondary};\n\n  padding: 0 ${Spacing[2]};\n  white-space: nowrap;\n  line-height: ${({ size = 'md' }) => `${SWITCH_SIZES[size].height}px`};\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nfunction getSlideDistance(size: ToggleSize) {\n  const switchSize = SWITCH_SIZES[size];\n  const sliderSize = SLIDER_SIZES[size];\n  return switchSize.width - sliderSize.diameter - sliderSize.offset * 2;\n}\n\nconst HiddenInput = styled.input`\n  height: 0;\n  width: 0;\n  margin: -1px;\n  border: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n`;\n\nexport interface ToggleProps {\n  className?: string;\n  /** Disables interaction and renders the toggle in a muted style. */\n  disabled?: boolean;\n  /**\n   * Tooltip / title shown on the root element when the toggle is off.\n   * @defaultValue 'Off'\n   */\n  titleOff?: string;\n  /**\n   * Tooltip / title shown on the root element when the toggle is on.\n   * @defaultValue 'On'\n   */\n  titleOn?: string;\n  /**\n   * Called with the new boolean value when the user clicks the toggle.\n   * The component is fully controlled — you must update `value` in response.\n   */\n  onChange?: (value: boolean) => void;\n  /**\n   * Current on/off state. Falsy values (`false`, `null`, `undefined`, `''`)\n   * are treated as off; `true` is treated as on.\n   */\n  value: boolean | null | undefined | '';\n  /** `id` forwarded to the visible switch element. */\n  id?: string;\n  /** Label node rendered to the left of the switch when the toggle is on. */\n  labelOn?: ReactNode;\n  /**\n   * Label node rendered to the left of the switch when the toggle is off.\n   * Falls back to `labelOn` when not provided.\n   */\n  labelOff?: ReactNode;\n  'data-test'?: string;\n  /**\n   * Accessible label for the hidden `<input role=\"switch\">`.\n   * Required when no visible label is provided via `labelOn` / `labelOff`.\n   */\n  'aria-label'?: string;\n  /**\n   * Size of the toggle switch.\n   * @defaultValue 'md'\n   */\n  size?: ToggleSize;\n}\n\nexport const Toggle = forwardRef<HTMLDivElement, ToggleProps>(function Toggle(\n  {\n    className,\n    disabled,\n    titleOff = 'Off',\n    titleOn = 'On',\n    onChange = () => undefined,\n    value,\n    id,\n    labelOn,\n    labelOff,\n    'data-test': dataTest,\n    'aria-label': ariaLabel,\n    size = 'md',\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useId();\n  const label = value ? labelOn : labelOff || labelOn;\n\n  const [focused, { enable: setFocus, disable: clearFocus }] = useToggle();\n\n  const handleChange = useCallback(() => {\n    onChange(!value);\n    inputRef.current?.focus();\n  }, [onChange, value]);\n\n  const inputRef = useRef<HTMLInputElement>();\n\n  return (\n    <Container\n      className={className}\n      data-test={dataTest}\n      title={value ? titleOn : titleOff}\n      ref={ref}\n    >\n      {label != null && (\n        <ToggleLabel htmlFor={generatedId} disabled={field.disabled} size={size}>\n          {label}\n        </ToggleLabel>\n      )}\n      <Switch\n        id={id}\n        checked={!!value}\n        disabled={field.disabled}\n        focused={focused}\n        onClick={field.disabled ? undefined : handleChange}\n        size={size}\n      />\n      <HiddenInput\n        id={generatedId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test-toggle-status={value ? 'on' : 'off'}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={!!value}\n        readOnly={true}\n        onChange={disabled ? undefined : handleChange}\n        onFocus={setFocus}\n        onBlur={clearFocus}\n        aria-checked={!!value}\n        role='switch'\n        aria-readonly={field.disabled}\n        {...(label\n          ? { 'aria-labelledby': generatedId }\n          : { 'aria-label': ariaLabel ?? (value ? 'Toggle on' : 'Toggle off') })}\n      />\n    </Container>\n  );\n});\n\nexport default Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"Toggle-e8DCYa6i.mjs","names":[],"sources":["../components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, type ReactNode, useCallback, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { Label } from 'design-system/components/Text';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype ToggleSize = 'md' | 'sm';\n\ninterface SwitchSizes {\n  width: number;\n  height: number;\n}\n\nconst SWITCH_SIZES: Record<ToggleSize, SwitchSizes> = {\n  md: { width: 32, height: 18 },\n  sm: { width: 28, height: parseInt(Spacing[4], 10) }, // 16px height from tokens\n};\n\ninterface SliderSizes {\n  diameter: number;\n  offset: number;\n}\n\nconst SLIDER_SIZES: Record<ToggleSize, SliderSizes> = {\n  md: { diameter: 14, offset: 2 },\n  sm: { diameter: parseInt(Spacing[3], 10), offset: 2 }, // 12px diameter from tokens\n};\n\nconst Container = styled.div`\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n`;\n\ntype SwitchProps = Pick<ToggleProps, 'disabled'> & {\n  checked: boolean;\n  focused: boolean;\n  size: ToggleSize;\n};\nconst Switch = styled.div<SwitchProps>`\n  transition: box-shadow ${TransitionDuration.Fast};\n  position: relative;\n  display: inline-flex;\n  height: ${({ size }) => SWITCH_SIZES[size].height}px;\n  width: ${({ size }) => SWITCH_SIZES[size].width}px;\n  border-radius: 1000px;\n  cursor: pointer;\n  &${isDisabled} {\n    cursor: not-allowed;\n  }\n\n  ${focusOutlineControlled}\n\n  /* Background */\n  &:before {\n    position: absolute;\n    content: '';\n    height: ${({ size }) => SWITCH_SIZES[size].height}px;\n    width: ${({ size }) => SWITCH_SIZES[size].width}px;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ${({ checked, disabled }) =>\n      disabled\n        ? checked\n          ? Color.BackgroundInputActiveDisabled\n          : Color.BackgroundInputDisabled\n        : checked\n          ? Color.BackgroundInputActive\n          : Color.BackgroundInputToggle};\n\n    transition: ${TransitionDuration.Medium};\n    border-radius: 1000px;\n  }\n\n  &${isHovered}${isNotDisabled}:before {\n    background-color: ${({ checked }) =>\n      checked ? Color.BackgroundInputActiveHover : Color.BackgroundInputToggleHover};\n  }\n\n  /* Slider thumb */\n  &:after {\n    position: absolute;\n    content: '';\n    height: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n    width: ${({ size }) => SLIDER_SIZES[size].diameter}px;\n    bottom: ${({ size }) => SLIDER_SIZES[size].offset}px;\n    background-color: ${Color.BackgroundInputDefault};\n    transition: ${TransitionDuration.Medium};\n    border-radius: 1000px;\n\n    right: ${({ size }) => SLIDER_SIZES[size].offset}px;\n\n    ${({ checked, size }) =>\n      !checked &&\n      css`\n        transform: translateX(-${getSlideDistance(size)}px);\n      `}\n  }\n`;\n\nconst ToggleLabel = styled(Label)<Pick<ToggleProps, 'disabled' | 'size'>>`\n  cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};\n  color: ${Color.TextSecondary};\n\n  padding: 0 ${Spacing[2]};\n  white-space: nowrap;\n  line-height: ${({ size = 'md' }) => `${SWITCH_SIZES[size].height}px`};\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nfunction getSlideDistance(size: ToggleSize) {\n  const switchSize = SWITCH_SIZES[size];\n  const sliderSize = SLIDER_SIZES[size];\n  return switchSize.width - sliderSize.diameter - sliderSize.offset * 2;\n}\n\nconst HiddenInput = styled.input`\n  height: 0;\n  width: 0;\n  margin: -1px;\n  border: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n`;\n\nexport interface ToggleProps {\n  className?: string;\n  /** Disables interaction and renders the toggle in a muted style. */\n  disabled?: boolean;\n  /**\n   * Tooltip / title shown on the root element when the toggle is off.\n   * @defaultValue 'Off'\n   */\n  titleOff?: string;\n  /**\n   * Tooltip / title shown on the root element when the toggle is on.\n   * @defaultValue 'On'\n   */\n  titleOn?: string;\n  /**\n   * Called with the new boolean value when the user clicks the toggle.\n   * The component is fully controlled — you must update `value` in response.\n   */\n  onChange?: (value: boolean) => void;\n  /**\n   * Current on/off state. Falsy values (`false`, `null`, `undefined`, `''`)\n   * are treated as off; `true` is treated as on.\n   */\n  value: boolean | null | undefined | '';\n  /** `id` forwarded to the visible switch element. */\n  id?: string;\n  /** Label node rendered to the left of the switch when the toggle is on. */\n  labelOn?: ReactNode;\n  /**\n   * Label node rendered to the left of the switch when the toggle is off.\n   * Falls back to `labelOn` when not provided.\n   */\n  labelOff?: ReactNode;\n  'data-test'?: string;\n  /**\n   * Accessible label for the hidden `<input role=\"switch\">`.\n   * Required when no visible label is provided via `labelOn` / `labelOff`.\n   */\n  'aria-label'?: string;\n  /**\n   * Size of the toggle switch.\n   * @defaultValue 'md'\n   */\n  size?: ToggleSize;\n}\n\nexport const Toggle = forwardRef<HTMLDivElement, ToggleProps>(function Toggle(\n  {\n    className,\n    disabled,\n    titleOff = 'Off',\n    titleOn = 'On',\n    onChange = () => undefined,\n    value,\n    id,\n    labelOn,\n    labelOff,\n    'data-test': dataTest,\n    'aria-label': ariaLabel,\n    size = 'md',\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useId();\n  const label = value ? labelOn : labelOff || labelOn;\n\n  const [focused, { enable: setFocus, disable: clearFocus }] = useToggle();\n\n  const handleChange = useCallback(() => {\n    onChange(!value);\n    inputRef.current?.focus();\n  }, [onChange, value]);\n\n  const inputRef = useRef<HTMLInputElement>();\n\n  return (\n    <Container\n      className={className}\n      data-test={dataTest}\n      title={value ? titleOn : titleOff}\n      ref={ref}\n    >\n      {label != null && (\n        <ToggleLabel htmlFor={generatedId} disabled={field.disabled} size={size}>\n          {label}\n        </ToggleLabel>\n      )}\n      <Switch\n        id={id}\n        checked={!!value}\n        disabled={field.disabled}\n        focused={focused}\n        onClick={field.disabled ? undefined : handleChange}\n        size={size}\n      />\n      <HiddenInput\n        id={generatedId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test-toggle-status={value ? 'on' : 'off'}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={!!value}\n        readOnly={true}\n        onChange={disabled ? undefined : handleChange}\n        onFocus={setFocus}\n        onBlur={clearFocus}\n        aria-checked={!!value}\n        role='switch'\n        aria-readonly={field.disabled}\n        {...(label\n          ? { 'aria-labelledby': generatedId }\n          : { 'aria-label': ariaLabel ?? (value ? 'Toggle on' : 'Toggle off') })}\n      />\n    </Container>\n  );\n});\n\nexport default Toggle;\n"],"mappings":"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"}

package/dist/Toggle.d.mts

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

package/dist/{Tooltip-0iXDCV2O.d.mts → Tooltip-DX-N-szt.d.mts}

@@ -1,6 +1,6 @@
-import { r as _default, t as CardProps } from "./Card-DxFajLnx.mjs";
-import { DefaultTheme, StyledComponent } from "styled-components";
+import { r as _default, t as CardProps } from "./Card-pr4FQWjn.mjs";
 import { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode } from "react";
+import { DefaultTheme, StyledComponent } from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
@@ -97,4 +97,4 @@ declare const Tooltip: ({
 }: TooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TooltipWithIconProps as i, Tooltip as n, TooltipStandardProps as r, FloatingTooltip as t };
-//# sourceMappingURL=Tooltip-0iXDCV2O.d.mts.map
+//# sourceMappingURL=Tooltip-DX-N-szt.d.mts.map

package/dist/{Tooltip-CDvOu1UN.mjs → Tooltip-iJcfJqxn.mjs}

@@ -1,9 +1,9 @@
-import "./variables/transitions.mjs";
+import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as Card_default } from "./Card-CLTkZLKr.mjs";
+import { t as Card_default } from "./Card-CKrJtn1f.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
+import "./variables/transitions.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
 import { Children, cloneElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleHelpIcon } from "@persona/icons";
@@ -117,4 +117,4 @@ const TextUnderlineTooltip = ({ children, tooltip, ...props }) => {
 //#endregion
 export { Tooltip as a, FloatingTooltip as i, TextWithDashedUnderline as n, HelperTooltip as r, TextUnderlineTooltip as t };
 
-//# sourceMappingURL=Tooltip-CDvOu1UN.mjs.map
+//# sourceMappingURL=Tooltip-iJcfJqxn.mjs.map

package/dist/{Tooltip-CDvOu1UN.mjs.map → Tooltip-iJcfJqxn.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Tooltip-CDvOu1UN.mjs","names":["Card","CircleHelpIconSmall"],"sources":["../components/Tooltip/Tooltip.tsx","../components/Tooltip/HelperTooltip.tsx","../components/Tooltip/TextUnderlineTooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport styled, { type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card, { type CardProps } from 'design-system/components/Card';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface FloatingTooltipProps extends CardProps {\n  zIndex?: number;\n  contentAlignment: 'start' | 'center' | 'end';\n  maxWidth?: string;\n  size?: 'sm' | 'md';\n}\n\nexport const FloatingTooltip: StyledComponent<\n  ComponentType<ComponentPropsWithoutRef<typeof Card>>,\n  DefaultTheme,\n  FloatingTooltipProps\n> = styled(Card)<FloatingTooltipProps>`\n  ${({ size = 'md' }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  line-height: ${({ size = 'md' }) => (size === 'sm' ? '16px' : '20px')};\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  display: flex;\n  align-items: ${({ contentAlignment }) => contentAlignment || 'center'};\n  justify-content: center;\n  padding: 6px ${Spacing[2]};\n  animation: ${fadeIn} ${TransitionDuration.Fast} ease-in-out;\n  z-index: ${({ zIndex }) => zIndex};\n  margin: 0;\n  max-width: ${({ maxWidth }) => maxWidth || '250px'};\n  color: ${Color.TextPrimary};\n`;\n\nconst TooltipArrow = styled.div`\n  width: 0;\n  height: 0;\n  border-color: ${({ theme }) => theme.color.background.primary};\n  border-left: 8px solid transparent;\n  border-top: 8px solid ${({ theme }) => theme.color.background.primary};\n  border-right: 8px solid transparent;\n`;\n\nconst TooltipIcon = styled.div`\n  display: inline-flex;\n`;\n\ninterface TooltipBaseProps\n  extends\n    Omit<TooltipPrimitive.TooltipProps, 'disableHoverableContent'>,\n    TooltipPrimitive.TooltipContentProps {\n  /**\n   * Optionally hide tooltip arrow.\n   */\n  hideArrow?: boolean;\n\n  children?: ReactNode;\n\n  /**\n   * Disabling will prevent tooltip from rendering on the trigger\n   */\n  disabled?: boolean;\n\n  /**\n   * Render in a portal.\n   * Disable to render adjacent to trigger for rendering within elements such as modals\n   */\n  portal?: boolean;\n\n  /**\n   * Props applied to Radix UI Portal component\n   */\n  portalProps?: TooltipPrimitive.TooltipPortalProps;\n\n  /**\n   * Determines if the tooltip closes when the mouse hovers into the tooltip content area\n   */\n  interactive?: boolean;\n\n  /**\n   * Override the zIndex in case the tooltip is used in situations where the content is\n   * already elevated\n   */\n  zIndex?: number;\n\n  /**\n   * Max width of the contents in the tooltip\n   */\n  maxWidth?: string;\n\n  /**\n   * Props to apply to Tooltip.Trigger within\n   */\n  triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n\n  /**\n   * Size of the tooltip. Defaults to 'md'.\n   */\n  size?: 'sm' | 'md';\n}\n\nexport interface TooltipStandardProps extends TooltipBaseProps {\n  /**\n   * Element that will trigger the tooltip. A `ref` will be set.\n   */\n  trigger: ReactElement;\n\n  iconTrigger?: never;\n\n  className?: never;\n\n  contentAlignment?: 'start' | 'center' | 'end';\n}\n\nexport interface TooltipWithIconProps extends TooltipBaseProps {\n  trigger?: never;\n\n  /**\n   * Icon that will trigger the tooltip. A wrapper div will be set.\n   */\n  iconTrigger: ReactElement;\n\n  className?: string;\n\n  contentAlignment?: 'start' | 'center' | 'end';\n}\n\ntype TooltipProps = TooltipStandardProps | TooltipWithIconProps;\n\nexport const Tooltip = ({\n  trigger: triggerProp,\n  iconTrigger,\n  side = 'bottom',\n  hideArrow,\n  defaultOpen,\n  open,\n  delayDuration = 300,\n  onOpenChange,\n  interactive = true,\n  children,\n  'aria-label': ariaLabel,\n  portal = true,\n  disabled = false,\n  className,\n  maxWidth,\n  zIndex = 10,\n  triggerProps,\n  portalProps,\n  contentAlignment,\n  size = 'md',\n  ...contentProps\n}: TooltipProps) => {\n  let trigger;\n\n  if (iconTrigger) {\n    trigger = (\n      <TooltipIcon tabIndex={0} aria-label={ariaLabel} className={className}>\n        {cloneElement(iconTrigger, { focusable: false, 'aria-hidden': true })}\n      </TooltipIcon>\n    );\n  } else {\n    trigger = triggerProp;\n  }\n\n  // quick way to check if children are renderable. null, false, and true will be filtered out when converting to an array\n  const hasRenderableChildren = Children.toArray(children).length > 0;\n\n  const content = (\n    <TooltipPrimitive.Content side={side} sideOffset={8} asChild {...contentProps}>\n      <FloatingTooltip\n        zIndex={zIndex}\n        contentAlignment={contentAlignment}\n        maxWidth={maxWidth}\n        size={size}\n      >\n        {children}\n        {!hideArrow && (\n          <TooltipPrimitive.Arrow asChild>\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n        )}\n      </FloatingTooltip>\n    </TooltipPrimitive.Content>\n  );\n\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        disableHoverableContent={!interactive}\n        onOpenChange={onOpenChange}\n      >\n        <TooltipPrimitive.Trigger asChild aria-label={ariaLabel} {...triggerProps}>\n          {trigger}\n        </TooltipPrimitive.Trigger>\n\n        {!disabled &&\n          hasRenderableChildren &&\n          (portal ? (\n            <TooltipPrimitive.Portal {...portalProps}>{content}</TooltipPrimitive.Portal>\n          ) : (\n            content\n          ))}\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n};\n\nexport default Tooltip;\n","import type { ReactNode } from 'react';\n\nimport { Color } from '@persona/design-tokens';\nimport { CircleHelpIcon } from '@persona/icons';\nimport { CircleHelpIcon as CircleHelpIconSmall } from '@persona/icons/12px';\n\nimport Tooltip, { type TooltipWithIconProps } from './Tooltip';\n\nexport interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {\n  children: ReactNode;\n  size?: 'md' | 'sm';\n}\n\n/**\n * Helper component for rendering help text via help icons.\n */\nconst HelperTooltip = ({ children, size = 'md', ...props }: HelperTooltipProps) => {\n  return (\n    <Tooltip\n      size={size}\n      iconTrigger={\n        size === 'md' ? (\n          <CircleHelpIcon color={Color.BorderIconSecondary} />\n        ) : (\n          <CircleHelpIconSmall color={Color.BorderIconSecondary} />\n        )\n      }\n      {...props}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\nexport default HelperTooltip;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport Tooltip, { type TooltipStandardProps } from './Tooltip';\n\nexport const TextWithDashedUnderline = styled.span`\n  text-decoration: underline;\n  text-decoration-style: dashed;\n  text-decoration-color: ${Color.CoreSlate700};\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n  width: fit-content;\n`;\n\ninterface TextUnderlineTooltipProps extends Omit<TooltipStandardProps, 'trigger' | 'iconTrigger'> {\n  tooltip: ReactNode;\n}\n\nconst TextUnderlineTooltip = ({ children, tooltip, ...props }: TextUnderlineTooltipProps) => {\n  return (\n    <Tooltip trigger={<TextWithDashedUnderline>{children}</TextWithDashedUnderline>} {...props}>\n      {tooltip}\n    </Tooltip>\n  );\n};\n\nexport default TextUnderlineTooltip;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,kBAIT,OAAOA,aAAK;KACX,EAAE,OAAO,WAAY,SAAS,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;kBACjE,EAAE,OAAO,WAAY,SAAS,OAAO,SAAS,OAAQ;;;;kBAItD,EAAE,uBAAuB,oBAAoB,SAAS;;iBAEvD,QAAQ,GAAG;eACb,OAAO,GAAA,QAA2B;cACnC,EAAE,aAAa,OAAO;;gBAEpB,EAAE,eAAe,YAAY,QAAQ;WAC1C,MAAM,YAAY;;AAG7B,MAAM,eAAe,OAAO,GAAG;;;mBAGZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;2BAErC,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;AAIxE,MAAM,cAAc,OAAO,GAAG;;;AAsF9B,MAAa,WAAW,EACtB,SAAS,aACT,aACA,OAAO,UACP,WACA,aACA,MACA,gBAAgB,KAChB,cACA,cAAc,MACd,UACA,cAAc,WACd,SAAS,MACT,WAAW,OACX,WACA,UACA,SAAS,IACT,cACA,aACA,kBACA,OAAO,MACP,GAAG,mBACe;CAClB,IAAI;AAEJ,KAAI,YACF,WACE,oBAAC,aAAD;EAAa,UAAU;EAAG,cAAY;EAAsB;YACzD,aAAa,aAAa;GAAE,WAAW;GAAO,eAAe;GAAM,CAAC;EACzD,CAAA;KAGhB,WAAU;CAIZ,MAAM,wBAAwB,SAAS,QAAQ,SAAS,CAAC,SAAS;CAElE,MAAM,UACJ,oBAAC,iBAAiB,SAAlB;EAAgC;EAAM,YAAY;EAAG,SAAA;EAAQ,GAAI;YAC/D,qBAAC,iBAAD;GACU;GACU;GACR;GACJ;aAJR,CAMG,UACA,CAAC,aACA,oBAAC,iBAAiB,OAAlB;IAAwB,SAAA;cACtB,oBAAC,cAAD,EAAgB,CAAA;IACO,CAAA,CAEX;;EACO,CAAA;AAG7B,QACE,oBAAC,iBAAiB,UAAlB;EAA0C;YACxC,qBAAC,iBAAiB,MAAlB;GACQ;GACO;GACb,yBAAyB,CAAC;GACZ;aAJhB,CAME,oBAAC,iBAAiB,SAAlB;IAA0B,SAAA;IAAQ,cAAY;IAAW,GAAI;cAC1D;IACwB,CAAA,EAE1B,CAAC,YACA,0BACC,SACC,oBAAC,iBAAiB,QAAlB;IAAyB,GAAI;cAAc;IAAkC,CAAA,GAE7E,SAEkB;;EACE,CAAA;;;;;;;ACvMhC,MAAM,iBAAiB,EAAE,UAAU,OAAO,MAAM,GAAG,YAAgC;AACjF,QACE,oBAAC,SAAD;EACQ;EACN,aACE,SAAS,OACP,oBAAC,gBAAD,EAAgB,OAAO,MAAM,qBAAuB,CAAA,GAEpD,oBAACC,kBAAD,EAAqB,OAAO,MAAM,qBAAuB,CAAA;EAG7D,GAAI;EAEH;EACO,CAAA;;;;ACvBd,MAAa,0BAA0B,OAAO,IAAI;;;2BAGvB,MAAM,aAAa;;;;;AAU9C,MAAM,wBAAwB,EAAE,UAAU,SAAS,GAAG,YAAuC;AAC3F,QACE,oBAAC,SAAD;EAAS,SAAS,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;EAAE,GAAI;YAClF;EACO,CAAA"}
+{"version":3,"file":"Tooltip-iJcfJqxn.mjs","names":["Card","CircleHelpIconSmall"],"sources":["../components/Tooltip/Tooltip.tsx","../components/Tooltip/HelperTooltip.tsx","../components/Tooltip/TextUnderlineTooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport styled, { type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card, { type CardProps } from 'design-system/components/Card';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface FloatingTooltipProps extends CardProps {\n  zIndex?: number;\n  contentAlignment: 'start' | 'center' | 'end';\n  maxWidth?: string;\n  size?: 'sm' | 'md';\n}\n\nexport const FloatingTooltip: StyledComponent<\n  ComponentType<ComponentPropsWithoutRef<typeof Card>>,\n  DefaultTheme,\n  FloatingTooltipProps\n> = styled(Card)<FloatingTooltipProps>`\n  ${({ size = 'md' }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  line-height: ${({ size = 'md' }) => (size === 'sm' ? '16px' : '20px')};\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  display: flex;\n  align-items: ${({ contentAlignment }) => contentAlignment || 'center'};\n  justify-content: center;\n  padding: 6px ${Spacing[2]};\n  animation: ${fadeIn} ${TransitionDuration.Fast} ease-in-out;\n  z-index: ${({ zIndex }) => zIndex};\n  margin: 0;\n  max-width: ${({ maxWidth }) => maxWidth || '250px'};\n  color: ${Color.TextPrimary};\n`;\n\nconst TooltipArrow = styled.div`\n  width: 0;\n  height: 0;\n  border-color: ${({ theme }) => theme.color.background.primary};\n  border-left: 8px solid transparent;\n  border-top: 8px solid ${({ theme }) => theme.color.background.primary};\n  border-right: 8px solid transparent;\n`;\n\nconst TooltipIcon = styled.div`\n  display: inline-flex;\n`;\n\ninterface TooltipBaseProps\n  extends\n    Omit<TooltipPrimitive.TooltipProps, 'disableHoverableContent'>,\n    TooltipPrimitive.TooltipContentProps {\n  /**\n   * Optionally hide tooltip arrow.\n   */\n  hideArrow?: boolean;\n\n  children?: ReactNode;\n\n  /**\n   * Disabling will prevent tooltip from rendering on the trigger\n   */\n  disabled?: boolean;\n\n  /**\n   * Render in a portal.\n   * Disable to render adjacent to trigger for rendering within elements such as modals\n   */\n  portal?: boolean;\n\n  /**\n   * Props applied to Radix UI Portal component\n   */\n  portalProps?: TooltipPrimitive.TooltipPortalProps;\n\n  /**\n   * Determines if the tooltip closes when the mouse hovers into the tooltip content area\n   */\n  interactive?: boolean;\n\n  /**\n   * Override the zIndex in case the tooltip is used in situations where the content is\n   * already elevated\n   */\n  zIndex?: number;\n\n  /**\n   * Max width of the contents in the tooltip\n   */\n  maxWidth?: string;\n\n  /**\n   * Props to apply to Tooltip.Trigger within\n   */\n  triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n\n  /**\n   * Size of the tooltip. Defaults to 'md'.\n   */\n  size?: 'sm' | 'md';\n}\n\nexport interface TooltipStandardProps extends TooltipBaseProps {\n  /**\n   * Element that will trigger the tooltip. A `ref` will be set.\n   */\n  trigger: ReactElement;\n\n  iconTrigger?: never;\n\n  className?: never;\n\n  contentAlignment?: 'start' | 'center' | 'end';\n}\n\nexport interface TooltipWithIconProps extends TooltipBaseProps {\n  trigger?: never;\n\n  /**\n   * Icon that will trigger the tooltip. A wrapper div will be set.\n   */\n  iconTrigger: ReactElement;\n\n  className?: string;\n\n  contentAlignment?: 'start' | 'center' | 'end';\n}\n\ntype TooltipProps = TooltipStandardProps | TooltipWithIconProps;\n\nexport const Tooltip = ({\n  trigger: triggerProp,\n  iconTrigger,\n  side = 'bottom',\n  hideArrow,\n  defaultOpen,\n  open,\n  delayDuration = 300,\n  onOpenChange,\n  interactive = true,\n  children,\n  'aria-label': ariaLabel,\n  portal = true,\n  disabled = false,\n  className,\n  maxWidth,\n  zIndex = 10,\n  triggerProps,\n  portalProps,\n  contentAlignment,\n  size = 'md',\n  ...contentProps\n}: TooltipProps) => {\n  let trigger;\n\n  if (iconTrigger) {\n    trigger = (\n      <TooltipIcon tabIndex={0} aria-label={ariaLabel} className={className}>\n        {cloneElement(iconTrigger, { focusable: false, 'aria-hidden': true })}\n      </TooltipIcon>\n    );\n  } else {\n    trigger = triggerProp;\n  }\n\n  // quick way to check if children are renderable. null, false, and true will be filtered out when converting to an array\n  const hasRenderableChildren = Children.toArray(children).length > 0;\n\n  const content = (\n    <TooltipPrimitive.Content side={side} sideOffset={8} asChild {...contentProps}>\n      <FloatingTooltip\n        zIndex={zIndex}\n        contentAlignment={contentAlignment}\n        maxWidth={maxWidth}\n        size={size}\n      >\n        {children}\n        {!hideArrow && (\n          <TooltipPrimitive.Arrow asChild>\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n        )}\n      </FloatingTooltip>\n    </TooltipPrimitive.Content>\n  );\n\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        disableHoverableContent={!interactive}\n        onOpenChange={onOpenChange}\n      >\n        <TooltipPrimitive.Trigger asChild aria-label={ariaLabel} {...triggerProps}>\n          {trigger}\n        </TooltipPrimitive.Trigger>\n\n        {!disabled &&\n          hasRenderableChildren &&\n          (portal ? (\n            <TooltipPrimitive.Portal {...portalProps}>{content}</TooltipPrimitive.Portal>\n          ) : (\n            content\n          ))}\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n};\n\nexport default Tooltip;\n","import type { ReactNode } from 'react';\n\nimport { Color } from '@persona/design-tokens';\nimport { CircleHelpIcon } from '@persona/icons';\nimport { CircleHelpIcon as CircleHelpIconSmall } from '@persona/icons/12px';\n\nimport Tooltip, { type TooltipWithIconProps } from './Tooltip';\n\nexport interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {\n  children: ReactNode;\n  size?: 'md' | 'sm';\n}\n\n/**\n * Helper component for rendering help text via help icons.\n */\nconst HelperTooltip = ({ children, size = 'md', ...props }: HelperTooltipProps) => {\n  return (\n    <Tooltip\n      size={size}\n      iconTrigger={\n        size === 'md' ? (\n          <CircleHelpIcon color={Color.BorderIconSecondary} />\n        ) : (\n          <CircleHelpIconSmall color={Color.BorderIconSecondary} />\n        )\n      }\n      {...props}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\nexport default HelperTooltip;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport Tooltip, { type TooltipStandardProps } from './Tooltip';\n\nexport const TextWithDashedUnderline = styled.span`\n  text-decoration: underline;\n  text-decoration-style: dashed;\n  text-decoration-color: ${Color.CoreSlate700};\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n  width: fit-content;\n`;\n\ninterface TextUnderlineTooltipProps extends Omit<TooltipStandardProps, 'trigger' | 'iconTrigger'> {\n  tooltip: ReactNode;\n}\n\nconst TextUnderlineTooltip = ({ children, tooltip, ...props }: TextUnderlineTooltipProps) => {\n  return (\n    <Tooltip trigger={<TextWithDashedUnderline>{children}</TextWithDashedUnderline>} {...props}>\n      {tooltip}\n    </Tooltip>\n  );\n};\n\nexport default TextUnderlineTooltip;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,kBAIT,OAAOA,aAAK;KACX,EAAE,OAAO,WAAY,SAAS,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;kBACjE,EAAE,OAAO,WAAY,SAAS,OAAO,SAAS,OAAQ;;;;kBAItD,EAAE,uBAAuB,oBAAoB,SAAS;;iBAEvD,QAAQ,GAAG;eACb,OAAO,GAAA,QAA2B;cACnC,EAAE,aAAa,OAAO;;gBAEpB,EAAE,eAAe,YAAY,QAAQ;WAC1C,MAAM,YAAY;;AAG7B,MAAM,eAAe,OAAO,GAAG;;;mBAGZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;2BAErC,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;AAIxE,MAAM,cAAc,OAAO,GAAG;;;AAsF9B,MAAa,WAAW,EACtB,SAAS,aACT,aACA,OAAO,UACP,WACA,aACA,MACA,gBAAgB,KAChB,cACA,cAAc,MACd,UACA,cAAc,WACd,SAAS,MACT,WAAW,OACX,WACA,UACA,SAAS,IACT,cACA,aACA,kBACA,OAAO,MACP,GAAG,mBACe;CAClB,IAAI;AAEJ,KAAI,YACF,WACE,oBAAC,aAAD;EAAa,UAAU;EAAG,cAAY;EAAsB;YACzD,aAAa,aAAa;GAAE,WAAW;GAAO,eAAe;GAAM,CAAC;EACzD,CAAA;KAGhB,WAAU;CAIZ,MAAM,wBAAwB,SAAS,QAAQ,SAAS,CAAC,SAAS;CAElE,MAAM,UACJ,oBAAC,iBAAiB,SAAlB;EAAgC;EAAM,YAAY;EAAG,SAAA;EAAQ,GAAI;YAC/D,qBAAC,iBAAD;GACU;GACU;GACR;GACJ;aAJR,CAMG,UACA,CAAC,aACA,oBAAC,iBAAiB,OAAlB;IAAwB,SAAA;cACtB,oBAAC,cAAD,EAAgB,CAAA;IACO,CAAA,CAEX;;EACO,CAAA;AAG7B,QACE,oBAAC,iBAAiB,UAAlB;EAA0C;YACxC,qBAAC,iBAAiB,MAAlB;GACQ;GACO;GACb,yBAAyB,CAAC;GACZ;aAJhB,CAME,oBAAC,iBAAiB,SAAlB;IAA0B,SAAA;IAAQ,cAAY;IAAW,GAAI;cAC1D;IACwB,CAAA,EAE1B,CAAC,YACA,0BACC,SACC,oBAAC,iBAAiB,QAAlB;IAAyB,GAAI;cAAc;IAAkC,CAAA,GAE7E,SAEkB;;EACE,CAAA;;;;;;;ACvMhC,MAAM,iBAAiB,EAAE,UAAU,OAAO,MAAM,GAAG,YAAgC;AACjF,QACE,oBAAC,SAAD;EACQ;EACN,aACE,SAAS,OACP,oBAAC,gBAAD,EAAgB,OAAO,MAAM,qBAAuB,CAAA,GAEpD,oBAACC,kBAAD,EAAqB,OAAO,MAAM,qBAAuB,CAAA;EAG7D,GAAI;EAEH;EACO,CAAA;;;;ACvBd,MAAa,0BAA0B,OAAO,IAAI;;;2BAGvB,MAAM,aAAa;;;;;AAU9C,MAAM,wBAAwB,EAAE,UAAU,SAAS,GAAG,YAAuC;AAC3F,QACE,oBAAC,SAAD;EAAS,SAAS,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;EAAE,GAAI;YAClF;EACO,CAAA"}

package/dist/Tooltip.d.mts

@@ -1,2 +1,2 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "./Tooltip-0iXDCV2O.mjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "./Tooltip-DX-N-szt.mjs";
 export { FloatingTooltip, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/{TruncatedText-CdeU19Ev.d.mts → TruncatedText-D2R7uy_y.d.mts}

@@ -1,5 +1,5 @@
-import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef, FC } from "react";
+import * as _$styled_components0 from "styled-components";
 
 //#region lib/TruncatedText.d.ts
 declare const OverflowEllipsisSpan: _$styled_components0.StyledComponent<"span", any, {}, never>;
@@ -15,4 +15,4 @@ interface TruncatedTextProps extends ComponentPropsWithoutRef<'span'> {
 declare const TruncatedText: FC<TruncatedTextProps>;
 //#endregion
 export { TruncatedText as n, TruncatedTextProps as r, OverflowEllipsisSpan as t };
-//# sourceMappingURL=TruncatedText-CdeU19Ev.d.mts.map
+//# sourceMappingURL=TruncatedText-D2R7uy_y.d.mts.map