@persona/design-system 0.10.10 → 0.10.12

package/dist/{TableControls-Clo_0Mty.d.mts → TableControls-DE6eHq8h.d.mts}

@@ -1,7 +1,7 @@
 import { n as ControlBarProps } from "./ControlBar-B3Jn8G0k.mjs";
-import { n as FilterBarProps } from "./FilterBar-BE_gBM0H.mjs";
-import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-BEdERA4v.mjs";
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-Cp7ausV_.mjs";
+import { n as FilterBarProps } from "./FilterBar-CA4mDAXK.mjs";
+import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-NO2GRlM-.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-DE9HFXYY.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -82,4 +82,4 @@ declare const TableControls: <TFilter extends BaseFilterConfig = FilterConfig>({
 }: TableControlsProps<TFilter>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsFiltersV2Props as n, TableControlsProps as r, TableControls as t };
-//# sourceMappingURL=TableControls-Clo_0Mty.d.mts.map
+//# sourceMappingURL=TableControls-DE6eHq8h.d.mts.map

package/dist/TableControls.d.mts

@@ -1,2 +1,2 @@
-import { n as TableControlsFiltersV2Props, r as TableControlsProps, t as TableControls } from "./TableControls-Clo_0Mty.mjs";
+import { n as TableControlsFiltersV2Props, r as TableControlsProps, t as TableControls } from "./TableControls-DE6eHq8h.mjs";
 export { TableControlsFiltersV2Props, TableControlsProps, TableControls as default };

package/dist/{TableControlsContext-BNd6z9mD.d.mts → TableControlsContext-C2_2EuMh.d.mts}

@@ -1,4 +1,4 @@
-import { i as BaseFilterConfig, r as BaseActiveFilter } from "./types-BEdERA4v.mjs";
+import { i as BaseFilterConfig, r as BaseActiveFilter } from "./types-NO2GRlM-.mjs";
 import * as _$react from "react";
 import { Dispatch, ReactNode, SetStateAction } 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-BNd6z9mD.d.mts.map
+//# sourceMappingURL=TableControlsContext-C2_2EuMh.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-BNd6z9mD.mjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "./TableControlsContext-C2_2EuMh.mjs";
 export { TableControlsContextProps, TableControlsProvider, TableControlsContext as default, useTableControls };

package/dist/{TableViewConfigurationDropdown-Cp7ausV_.d.mts → TableViewConfigurationDropdown-DE9HFXYY.d.mts}

@@ -1,4 +1,4 @@
-import { n as AttributeColumn } from "./types-BEdERA4v.mjs";
+import { n as AttributeColumn } from "./types-NO2GRlM-.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/DataTable/TableControls/TableViewConfigurationDropdown.d.ts
@@ -31,4 +31,4 @@ declare const TableViewConfiguration: ({
 }: TableViewConfigurationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableViewConfigurationProps as i, TableViewConfigurationDropdown as n, TableViewConfigurationDropdownProps as r, TableViewConfiguration as t };
-//# sourceMappingURL=TableViewConfigurationDropdown-Cp7ausV_.d.mts.map
+//# sourceMappingURL=TableViewConfigurationDropdown-DE9HFXYY.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-Cp7ausV_.mjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "./TableViewConfigurationDropdown-DE9HFXYY.mjs";
 export { TableViewConfiguration, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TableViewConfigurationDropdown as default };

package/dist/{TechnicalSticker-Cq5jzYKQ.mjs → TechnicalSticker-DtV7Gawf.mjs}

@@ -2,10 +2,11 @@ import { a as styled, o as useTheme, r as css } from "./styledComponentsInterop-
 import { semanticColor, semanticTokens } from "./lib/semanticColor.mjs";
 import { t as MiddleTruncatedText } from "./MiddleTruncatedText-DicQsLDG.mjs";
 import { t as useToggle } from "./useToggle-1z8JE7Ym.mjs";
-import { a as Tooltip } from "./Tooltip-YViXzMdm.mjs";
+import { a as Tooltip } from "./Tooltip-CVBxc1yf.mjs";
 import { withAlpha } from "./lib/color.mjs";
 import copyTextToClipboard from "./lib/copyTextToClipboard.mjs";
 import { isHovered } from "./lib/pseudoClass.mjs";
+import { revealShown, revealTransition } from "./mixins/motion.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -99,7 +100,7 @@ const CopyActions = styled.div`
   height: 16px;
   opacity: ${({ $visible }) => $visible ? 1 : 0};
   pointer-events: ${({ $visible }) => $visible ? "auto" : "none"};
-  transition: opacity 120ms ease-in-out;
+  ${({ $visible }) => revealTransition($visible)}
 
   /* Keyboard focus keeps the actions reachable, but a click also focuses the
      button — matching plain :focus-within would leave them visible after the
@@ -107,6 +108,7 @@ const CopyActions = styled.div`
   &:has(:focus-visible) {
     opacity: 1;
     pointer-events: auto;
+    ${revealShown}
   }
 `;
 const CopyGradient = styled.div`
@@ -268,4 +270,4 @@ const TechnicalSticker = ({ variant = "grey", href, tooltipLabel: tooltipLabelPr
 //#endregion
 export { TechnicalSticker as t };
 
-//# sourceMappingURL=TechnicalSticker-Cq5jzYKQ.mjs.map
+//# sourceMappingURL=TechnicalSticker-DtV7Gawf.mjs.map

package/dist/TechnicalSticker-DtV7Gawf.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TechnicalSticker-DtV7Gawf.mjs","names":[],"sources":["../src/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, useTheme } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons/12px';\n\nimport Tooltip from '#src/components/Tooltip';\nimport { withAlpha } from '#src/lib/color';\nimport copyTextToClipboard from '#src/lib/copyTextToClipboard';\nimport MiddleTruncatedText from '#src/lib/MiddleTruncatedText';\nimport { isHovered } from '#src/lib/pseudoClass';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport useToggle from '#src/lib/useToggle';\nimport { revealShown, revealTransition } from '#src/mixins/motion';\nimport type { SemanticTokens } from '#src/variables/semantic';\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 semanticRestFill = (tokens: SemanticTokens, variant: TechnicalStickerVariant) =>\n  variant === 'white' ? tokens.FeedbackNeutralInverse : tokens.FeedbackNeutral1;\n\nconst restFill = (theme: MaybeSemanticTheme, variant: TechnicalStickerVariant) => {\n  const tokens = semanticTokens(theme);\n  if (tokens) {\n    return semanticRestFill(tokens, variant);\n  }\n  return variant === 'white' ? Color.BackgroundLabelWhite : Color.BackgroundLabelGrey;\n};\n\nconst hoverFill = (theme: MaybeSemanticTheme, variant: TechnicalStickerVariant) =>\n  variant === 'white'\n    ? semanticColor(theme, 'FeedbackNeutral1', Color.BackgroundButtonInverseHover)\n    : semanticColor(theme, 'ActionNeutralActive', Color.BackgroundLabelGreyHover);\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\n      ? semanticColor(theme, 'FgDisabled', theme.color.text.disabled)\n      : semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  background: ${({ theme, variant, disabled }) => {\n    const tokens = semanticTokens(theme);\n    return tokens && disabled\n      ? withAlpha(semanticRestFill(tokens, variant), tokens.Opacity65)\n      : restFill(theme, variant);\n  }};\n\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDefault', Color.BorderInputDefault)};\n\n  ${({ theme, variant, disabled }) =>\n    !disabled &&\n    css`\n      &:hover {\n        background: ${hoverFill(theme, 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  ${({ $visible }) => revealTransition($visible)}\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    ${revealShown}\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: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary)};\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &${isHovered}:not(:disabled) {\n    color: ${({ theme }) => semanticColor(theme, 'FgPrimary', 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 theme = useTheme();\n  const hoverBackground = hoverFill(theme, variant);\n  const copyActionBackground = isHoveredState ? hoverBackground : restFill(theme, 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/{TextArea-Dro-HH8O.mjs → TextArea-CQ1YNi2b.mjs}

@@ -12,10 +12,9 @@ const TextArea = styled("textarea")`
   font-family: ${({ theme }) => theme.text.fontFamily.base};
   height: ${({ theme }) => theme.element.height.xl};
   white-space: pre-wrap;
-  transition:
-    all ${"200ms"},
-    height 0s,
-    width 0s;
+  transition-property: background-color, color, border-color;
+  transition-duration: ${"200ms"};
+  transition-timing-function: ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 `;
 const TextAreaWithStyle = forwardRef(function TextAreaWithStyle({ size, ...props }, ref) {
 	const { inputId } = useFormField(props);
@@ -30,4 +29,4 @@ const TextAreaWithStyle = forwardRef(function TextAreaWithStyle({ size, ...props
 //#endregion
 export { TextAreaWithStyle as t };
 
-//# sourceMappingURL=TextArea-Dro-HH8O.mjs.map
+//# sourceMappingURL=TextArea-CQ1YNi2b.mjs.map

package/dist/TextArea-CQ1YNi2b.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-CQ1YNi2b.mjs","names":[],"sources":["../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport useFormField from '#src/components/FormControl/useFormField';\nimport inputMixin, { type InputMixinProps } from '#src/mixins/input';\nimport type { InputProps } from '#src/types/InputProps';\nimport { TransitionDuration, TransitionEasing } from '#src/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-property: background-color, color, border-color;\n  transition-duration: ${TransitionDuration.Fast};\n  transition-timing-function: ${TransitionEasing.Move};\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;;;iCAGF;+DACK;;AAGtD,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/{Toggle-D9MzTIZs.mjs → Toggle-CzHoIR-n.mjs}

@@ -38,7 +38,7 @@ const Container = styled.div`
   position: relative;
 `;
 const Switch = styled.div`
-  transition: box-shadow ${"200ms"};
+  transition: box-shadow ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
   position: relative;
   display: inline-flex;
   height: ${({ size }) => SWITCH_SIZES[size].height}px;
@@ -70,7 +70,7 @@ const Switch = styled.div`
 	return checked ? Color.BackgroundInputActive : Color.BackgroundInputToggle;
 }};
 
-    transition: ${"400ms"};
+    transition: background-color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
     border-radius: 1000px;
 
     ${(props) => !props.checked && props.disabled ? semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)(props) : ""}
@@ -88,9 +88,13 @@ const Switch = styled.div`
     width: ${({ size }) => SLIDER_SIZES[size].diameter}px;
     bottom: ${({ size }) => SLIDER_SIZES[size].offset}px;
     background-color: ${({ theme }) => semanticColor(theme, "InputSurfaceInverseStatic", Color.BackgroundInputDefault)};
-    transition: ${"400ms"};
+    transition: transform ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
     border-radius: 1000px;
 
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     right: ${({ size }) => SLIDER_SIZES[size].offset}px;
 
     ${({ checked, size }) => !checked && css`
@@ -179,4 +183,4 @@ const Toggle = forwardRef(function Toggle({ className, disabled, required, title
 //#endregion
 export { Toggle as t };
 
-//# sourceMappingURL=Toggle-D9MzTIZs.mjs.map
+//# sourceMappingURL=Toggle-CzHoIR-n.mjs.map

package/dist/Toggle-CzHoIR-n.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle-CzHoIR-n.mjs","names":[],"sources":["../src/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';\n\nimport useFormField from '#src/components/FormControl/useFormField';\nimport { Label } from '#src/components/Text';\nimport { opacityOf } from '#src/lib/color';\nimport { isDisabled, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { semanticColor, semanticOnly, semanticTokens } from '#src/lib/semanticColor';\nimport useToggle from '#src/lib/useToggle';\nimport { focusOutlineControlled } from '#src/mixins/focus';\nimport { TransitionDuration, TransitionEasing } from '#src/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} ${TransitionEasing.Move};\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: ${({ theme, checked, disabled }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        if (disabled) {\n          return checked ? tokens.InputSurfaceAccentDisabled : tokens.BorderDivider;\n        }\n        return checked ? tokens.InputSurfaceAccent : tokens.InputBorderStrong;\n      }\n      if (disabled) {\n        return checked ? Color.BackgroundInputActiveDisabled : Color.BackgroundInputDisabled;\n      }\n      return checked ? Color.BackgroundInputActive : Color.BackgroundInputToggle;\n    }};\n\n    transition: background-color ${TransitionDuration.Fast} ${TransitionEasing.Move};\n    border-radius: 1000px;\n\n    ${(props) =>\n      !props.checked && props.disabled\n        ? semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)(props)\n        : ''}\n  }\n\n  &${isHovered}${isNotDisabled}:before {\n    background-color: ${({ theme, checked }) =>\n      checked\n        ? semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)\n        : semanticColor(theme, 'InputBorderHoverStrong', 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: ${({ theme }) => semanticColor(theme, 'InputSurfaceInverseStatic', Color.BackgroundInputDefault)};\n    transition: transform ${TransitionDuration.Fast} ${TransitionEasing.Move};\n    border-radius: 1000px;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\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    ${(props) =>\n      props.disabled\n        ? semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)(props)\n        : ''}\n  }\n`;\n\nconst ToggleLabel = styled(Label)<Pick<ToggleProps, 'disabled' | 'size'>>`\n  cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', 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: ${semanticColor(theme, 'FgDisabled', 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  /** Marks the switch as required (sets aria-required). */\n  required?: 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    required,\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        aria-required={required || undefined}\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/{Tooltip-YViXzMdm.mjs → Tooltip-CVBxc1yf.mjs}

@@ -2,8 +2,8 @@ import { a as styled, o as useTheme } from "./styledComponentsInterop-Cs5CCPRy.m
 import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
-import { fadeIn } from "./variables/keyframes.mjs";
-import "./variables/transitions.mjs";
+import { fadeIn, fadeOut } from "./variables/keyframes.mjs";
+import { ReducedMotionFade } from "./variables/transitions.mjs";
 import { Children, cloneElement } from "react";
 import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +20,20 @@ const FloatingTooltip = styled(Card_default)`
   align-items: ${({ contentAlignment }) => contentAlignment || "center"};
   justify-content: center;
   padding: 6px ${Spacing[2]};
-  animation: ${fadeIn} ${"200ms"} ease-in-out;
+  animation: ${fadeIn} ${"200ms"} ${"cubic-bezier(0, 0, 0.2, 1)"};
+
+  /* Radix keeps the content mounted until this exit animation ends. */
+  &[data-state='closed'] {
+    animation: ${fadeOut} ${"150ms"} ${"cubic-bezier(0.4, 0, 1, 1)"} both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &[data-state='closed'] {
+      animation-duration: ${ReducedMotionFade.duration};
+      animation-timing-function: ${ReducedMotionFade.easing};
+    }
+  }
   z-index: ${({ zIndex }) => zIndex};
   margin: 0;
   max-width: ${({ maxWidth }) => maxWidth || "250px"};
@@ -120,4 +133,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-YViXzMdm.mjs.map
+//# sourceMappingURL=Tooltip-CVBxc1yf.mjs.map

package/dist/Tooltip-CVBxc1yf.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip-CVBxc1yf.mjs","names":["Card","CircleHelpIconSmall"],"sources":["../src/components/Tooltip/Tooltip.tsx","../src/components/Tooltip/HelperTooltip.tsx","../src/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';\n\nimport Card, { type CardProps } from '#src/components/Card';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { fadeIn, fadeOut } from '#src/variables/keyframes';\nimport {\n  ReducedMotionFade,\n  TransitionDuration,\n  TransitionEasing,\n} from '#src/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} ${TransitionEasing.Enter};\n\n  /* Radix keeps the content mounted until this exit animation ends. */\n  &[data-state='closed'] {\n    animation: ${fadeOut} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &,\n    &[data-state='closed'] {\n      animation-duration: ${ReducedMotionFade.duration};\n      animation-timing-function: ${ReducedMotionFade.easing};\n    }\n  }\n  z-index: ${({ zIndex }) => zIndex};\n  margin: 0;\n  max-width: ${({ maxWidth }) => maxWidth || '250px'};\n  ${semanticOnly((tokens) => `background-color: ${tokens.SurfaceElevated};`)}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst TooltipArrow = styled.div`\n  width: 0;\n  height: 0;\n  border-color: ${({ theme }) => semanticColor(theme, 'SurfaceElevated', theme.color.background.primary)};\n  border-left: 8px solid transparent;\n  border-top: 8px solid ${({ theme }) => semanticColor(theme, 'SurfaceElevated', 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';\nimport { useTheme } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { CircleHelpIcon } from '@persona/icons';\nimport { CircleHelpIcon as CircleHelpIconSmall } from '@persona/icons/12px';\n\nimport { semanticColor } from '#src/lib/semanticColor';\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  const theme = useTheme();\n  const iconColor = semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary);\n  return (\n    <Tooltip\n      size={size}\n      iconTrigger={\n        size === 'md' ? (\n          <CircleHelpIcon color={iconColor} />\n        ) : (\n          <CircleHelpIconSmall color={iconColor} />\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 { semanticColor } from '#src/lib/semanticColor';\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: ${({ theme }) => semanticColor(theme, 'FgTertiary', 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":";;;;;;;;;;;;;AA8BA,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,GAAA,6BAA0B;;;;iBAI1D,QAAQ,GAAA,QAA6B,GAAA,6BAAyB;;;;;;4BAMnD,kBAAkB,SAAS;mCACpB,kBAAkB,OAAO;;;cAG9C,EAAE,aAAa,OAAO;;gBAEpB,EAAE,eAAe,YAAY,QAAQ;IACjD,cAAc,WAAW,qBAAqB,OAAO,gBAAgB,GAAG,CAAC;YACjE,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;AAG/E,MAAM,eAAe,OAAO,GAAG;;;mBAGZ,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,MAAM,WAAW,QAAQ,CAAC;;2BAE9E,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,MAAM,WAAW,QAAQ,CAAC;;;AAIjH,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;;;;;;;ACxNhC,MAAM,iBAAiB,EAAE,UAAU,OAAO,MAAM,GAAG,YAAgC;CAEjF,MAAM,YAAY,cADJ,UACuB,EAAE,eAAe,MAAM,oBAAoB;AAChF,QACE,oBAAC,SAAD;EACQ;EACN,aACE,SAAS,OACP,oBAAC,gBAAD,EAAgB,OAAO,WAAa,CAAA,GAEpC,oBAACC,kBAAD,EAAqB,OAAO,WAAa,CAAA;EAG7C,GAAI;EAEH;EACO,CAAA;;;;AC1Bd,MAAa,0BAA0B,OAAO,IAAI;;;4BAGtB,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,aAAa,CAAC;;;;;AAUjG,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/chartColors.d.mts

@@ -0,0 +1,92 @@
+import { t as ChartingTokens } from "./charting-C_WcP3tn.mjs";
+import { t as MaybeChartingTheme } from "./semanticColor-BKbCliyl.mjs";
+import { Color } from "@persona/design-tokens";
+
+//#region src/components/Chart/chartColors.d.ts
+/**
+ * The charting palettes a chart may use. Each maps to a `ChartingColors` palette from
+ * `@persona/design-tokens` (or its dark-mode twin under a PDS colour mode):
+ *
+ * - `qualitative` → `Qualitative` (12): distinct, unordered series. The default; its order is
+ *   tuned for accessibility, so series take colours in this order.
+ * - `sequentialMono` → `SequentialMono` (8): ordered magnitude in one hue.
+ * - `sequentialDivergent` → `SequentialDivergent` (10): values diverging around a midpoint.
+ *
+ * The legacy `Sequential` and `Categorical` palettes are deliberately not offered.
+ *
+ * @experimental Part of the in-progress PDS charting components; the API may change.
+ */
+type ChartPalette = 'qualitative' | 'sequentialMono' | 'sequentialDivergent';
+/** @experimental */
+declare const CHART_PALETTE_TOKENS: {
+  readonly qualitative: "Qualitative";
+  readonly sequentialMono: "SequentialMono";
+  readonly sequentialDivergent: "SequentialDivergent";
+};
+/** @experimental */
+declare const DEFAULT_CHART_PALETTE: ChartPalette;
+/** @experimental */
+type ChartColorMode = 'light' | 'dark';
+/**
+ * A colour override for one series: a Persona `Color` token, or a light/dark pair of tokens.
+ * `Color` is a string enum, so a raw hex string (`'#3F48FD'`) does not type-check.
+ *
+ * Wrap overrides in {@link chartColor} so the `pds/semantic-color` lint rule accepts the `Color.*`
+ * reference.
+ *
+ * @experimental
+ */
+type ChartColor = Color | {
+  readonly light: Color;
+  readonly dark: Color;
+};
+/**
+ * Marks a series colour override as a deliberate chart colour. It returns its argument unchanged;
+ * its job is to type-check the override (Persona tokens only, never hex) and to tell the
+ * `pds/semantic-color` lint rule that the `Color.*` inside is intended.
+ *
+ * ```ts
+ * { key: 'fraud', label: 'Fraud', color: chartColor(Color.CoreRed600) }
+ * { key: 'fraud', label: 'Fraud', color: chartColor({ light: Color.CoreRed600, dark: Color.CoreRed400 }) }
+ * ```
+ *
+ * @experimental
+ */
+declare const chartColor: <C extends ChartColor>(color: C) => C;
+/** One series as far as colour resolution is concerned. @experimental */
+interface ChartSeriesColorInput<K extends string = string> {
+  key: K;
+  color?: ChartColor;
+}
+/** @experimental */
+interface ResolveSeriesColorsOptions {
+  /** Palettes for the active colour mode, e.g. `chartingColors(theme)`. Defaults to light. */
+  tokens?: ChartingTokens;
+  /** Defaults to `'qualitative'`. */
+  palette?: ChartPalette;
+  /** Picks the side of a light/dark override pair. Defaults to `'light'`. */
+  mode?: ChartColorMode;
+}
+/** The ordered colours of `palette` in `tokens`. @experimental */
+declare const chartPaletteColors: (tokens: ChartingTokens, palette?: ChartPalette) => readonly Color[];
+/** Resolves an override to the single token for `mode`. @experimental */
+declare const resolveChartColor: (color: ChartColor, mode: ChartColorMode) => Color;
+/** `'dark'` when `theme` carries the dark charting palettes, else `'light'`. @experimental */
+declare const chartColorModeOf: (theme: MaybeChartingTheme | undefined) => ChartColorMode;
+/**
+ * Assigns each series a colour token, keyed by series key.
+ *
+ * Series without an override take the palette colour at their own index, so a series keeps its
+ * colour when another is hidden or overridden. Past the end of the palette colours repeat and a
+ * development warning suggests grouping the extra series (e.g. into "Other"): never invent colours.
+ *
+ * @experimental
+ */
+declare function resolveSeriesColors<K extends string>(series: readonly ChartSeriesColorInput<K>[], {
+  tokens,
+  palette,
+  mode
+}?: ResolveSeriesColorsOptions): Record<K, Color>;
+//#endregion
+export { CHART_PALETTE_TOKENS, ChartColor, ChartColorMode, ChartPalette, ChartSeriesColorInput, DEFAULT_CHART_PALETTE, ResolveSeriesColorsOptions, chartColor, chartColorModeOf, chartPaletteColors, resolveChartColor, resolveSeriesColors };
+//# sourceMappingURL=chartColors.d.mts.map

package/dist/chartFrameLayout.d.mts

@@ -0,0 +1,46 @@
+import * as _$react from "react";
+
+//#region src/components/Chart/chartFrameLayout.d.ts
+/**
+ * Where a `ChartFrame` places its legend:
+ * - `'stack'` (default): left-aligned above the plot; legend items run in a wrapping row.
+ * - `'right'`: inline to the right of the plot, top-aligned; legend items run in a column.
+ *
+ * @experimental Part of the in-progress PDS charting components; the API may change.
+ */
+type ChartLegendPosition = 'stack' | 'right';
+/** @experimental */
+declare const DEFAULT_CHART_LEGEND_POSITION: ChartLegendPosition;
+/**
+ * Plot height in px when a `ChartFrame` is given none. The plot always fills the frame's width.
+ *
+ * @experimental
+ */
+declare const CHART_DEFAULT_HEIGHT = 300;
+/**
+ * Opacity of a de-emphasised series: a hidden series' legend swatch, and the series a pointer is
+ * not on (its popover row and its segment in the hovered bar).
+ *
+ * @experimental
+ */
+declare const CHART_INACTIVE_OPACITY = 0.65;
+/**
+ * Recharts margin for a plot inside a `ChartFrame`. The frame owns the spacing around the plot
+ * (`Spacing[3]` between legend and plot) and lets axis labels overflow the SVG, so the chart adds
+ * no margin of its own: `<BarChart margin={CHART_PLOT_MARGIN} ...>`.
+ *
+ * @experimental
+ */
+declare const CHART_PLOT_MARGIN: {
+  readonly top: 0;
+  readonly right: 0;
+  readonly bottom: 0;
+  readonly left: 0;
+};
+/** Provided by `ChartFrame` so its `ChartLegend` lays its items out to match. */
+declare const ChartLegendPositionProvider: _$react.Provider<ChartLegendPosition | undefined>;
+/** The legend position of the enclosing `ChartFrame`, or `undefined` outside one. */
+declare const useChartLegendPosition: () => ChartLegendPosition | undefined;
+//#endregion
+export { CHART_DEFAULT_HEIGHT, CHART_INACTIVE_OPACITY, CHART_PLOT_MARGIN, ChartLegendPosition, ChartLegendPositionProvider, DEFAULT_CHART_LEGEND_POSITION, useChartLegendPosition };
+//# sourceMappingURL=chartFrameLayout.d.mts.map

package/dist/{clientFilterUtils-CGHYF5NE.d.mts → clientFilterUtils-2TBUC31K.d.mts}

@@ -1,4 +1,4 @@
-import { s as FilterConfig } from "./types-BEdERA4v.mjs";
+import { s as FilterConfig } from "./types-NO2GRlM-.mjs";
 import { Dispatch, SetStateAction } from "react";
 import { Column, ColumnFiltersState, Header, RowData, Table } from "@tanstack/react-table";
 
@@ -17,4 +17,4 @@ declare const generateClientFilters: <TData extends RowData>(columns: Array<{
 }>, columnFilters: ColumnFiltersState, setColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>) => FilterConfig[];
 //#endregion
 export { getFilterFnName as n, generateClientFilters as t };
-//# sourceMappingURL=clientFilterUtils-CGHYF5NE.d.mts.map
+//# sourceMappingURL=clientFilterUtils-2TBUC31K.d.mts.map

package/dist/clientFilterUtils.d.mts

@@ -1,2 +1,2 @@
-import { n as getFilterFnName, t as generateClientFilters } from "./clientFilterUtils-CGHYF5NE.mjs";
+import { n as getFilterFnName, t as generateClientFilters } from "./clientFilterUtils-2TBUC31K.mjs";
 export { generateClientFilters, getFilterFnName };

package/dist/components/Accordion/index.mjs

@@ -3,7 +3,8 @@ import { semanticColor } from "../../lib/semanticColor.mjs";
 import { HeadlessAriaButton } from "../../lib/HeadlessAriaButton.mjs";
 import { TruncatedText } from "../../lib/TruncatedText.mjs";
 import { i as Paragraph, n as Heading$1 } from "../../Text-D0vEReED.mjs";
-import "../../variables/transitions.mjs";
+import { fadeIn } from "../../variables/keyframes.mjs";
+import { ReducedMotionFade } from "../../variables/transitions.mjs";
 import { isFocusedVisible, isNotDisabled } from "../../lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "../../mixins/focus.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
@@ -119,11 +120,7 @@ const ChevronContainer = styled.span`
   width: ${Spacing[3]};
   height: ${Spacing[3]};
   color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.BorderIconSecondary)};
-  transition: color ${"200ms"} ease;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
+  transition: color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 `;
 const TriggerButton = styled(HeadlessAriaButton)`
   width: 100%;
@@ -135,13 +132,9 @@ const TriggerButton = styled(HeadlessAriaButton)`
   border-radius: 0;
   background-color: transparent;
   color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
-  transition: background-color ${"200ms"} ease-in-out;
+  transition: background-color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
   ${focusOutlineControlled}
 
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-
   &${isFocusedVisible}${isNotDisabled} {
     position: relative;
     z-index: 1;
@@ -178,10 +171,16 @@ const TitleWrapper = styled.span`
 const Panel = styled(DisclosurePanel)`
   height: var(--disclosure-panel-height);
   overflow: clip;
-  transition: height ${"200ms"} ease-out;
+  transition: height ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
+  /* No height motion: on expand the panel opens at once; on collapse it waits for the content's fade
+     to finish, then closes. React Aria hides the panel when this delayed transition ends. */
   @media (prefers-reduced-motion: reduce) {
-    transition: none;
+    transition: height 0s linear ${ReducedMotionFade.duration};
+
+    ${ItemContainer}[data-expanded] > & {
+      transition: none;
+    }
   }
 `;
 const TitleHeading = styled(Heading$1)`
@@ -196,6 +195,16 @@ const TitleHeading = styled(Heading$1)`
 `;
 const PanelContent = styled.div`
   padding: ${Spacing[3]} ${Spacing[4]};
+
+  @media (prefers-reduced-motion: reduce) {
+    opacity: 0;
+    transition: opacity ${ReducedMotionFade.duration} ${ReducedMotionFade.easing};
+
+    ${ItemContainer}[data-expanded] > ${Panel} > & {
+      opacity: 1;
+      animation: ${fadeIn} ${ReducedMotionFade.duration} ${ReducedMotionFade.easing};
+    }
+  }
 `;
 const TitleText = styled.span`
   min-width: 0;