@persona/design-system 0.10.10 → 0.10.11

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx","../../../src/components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\n\nimport { type MaybeSemanticTheme, semanticColor } from '#src/lib/semanticColor';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst statusFill = (theme: MaybeSemanticTheme, status: ProgressBarStatus) => {\n  if (status === 'exception') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderInputDanger);\n  }\n  if (status === 'success') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  return semanticColor(theme, 'StatusInfo3', Color.BorderInputActive);\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ theme, $railColor }) =>\n    $railColor ?? semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme }) => statusFill(theme, 'success')};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  background-color: ${({ theme }) => semanticColor(theme, 'FeedbackNeutral5', Color.BorderIconPrimary)};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $status: 'exception' | 'success' }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ theme, $status }) => statusFill(theme, $status)};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $status={effectiveStatus}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx","../../../src/components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\n\nimport { type MaybeSemanticTheme, semanticColor } from '#src/lib/semanticColor';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst statusFill = (theme: MaybeSemanticTheme, status: ProgressBarStatus) => {\n  if (status === 'exception') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderInputDanger);\n  }\n  if (status === 'success') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  return semanticColor(theme, 'StatusInfo3', Color.BorderInputActive);\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ theme, $railColor }) =>\n    $railColor ?? semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition:\n    width ${TransitionDuration.MediumFast} ${TransitionEasing.Move},\n    left ${TransitionDuration.MediumFast} ${TransitionEasing.Move};\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme }) => statusFill(theme, 'success')};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width ${TransitionDuration.MediumFast} ${TransitionEasing.Move};\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  background-color: ${({ theme }) => semanticColor(theme, 'FeedbackNeutral5', Color.BorderIconPrimary)};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n    left: 30%;\n    width: 40%;\n  }\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $status: 'exception' | 'success' }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ theme, $status }) => statusFill(theme, $status)};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $status={effectiveStatus}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}

package/dist/components/ProgressIndicator/index.mjs

@@ -1,2 +1,2 @@
-import { t as ProgressIndicator } from "../../ProgressIndicator-zt3ndT9U.mjs";
+import { t as ProgressIndicator } from "../../ProgressIndicator-hy1P-RG1.mjs";
 export { ProgressIndicator, ProgressIndicator as default };

package/dist/components/Radio/index.mjs

@@ -1,2 +1,2 @@
-import { t as Radio } from "../../Radio-BlEtetrr.mjs";
+import { t as Radio } from "../../Radio-B4TBAho6.mjs";
 export { Radio, Radio as default };

package/dist/components/RadioGroup/index.mjs

@@ -1,2 +1,2 @@
-import { t as RadioGroup } from "../../RadioGroup-CMrXmmn4.mjs";
+import { t as RadioGroup } from "../../RadioGroup-Bf24GKOb.mjs";
 export { RadioGroup, RadioGroup as default };

package/dist/components/RichTextEditor/index.mjs

@@ -1,21 +1,21 @@
 import { a as styled, n as createGlobalStyle, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "../../lib/semanticColor.mjs";
+import { focusWithinOutline } from "../../mixins/focus.mjs";
+import "../../variables/effect.mjs";
+import { withAlpha } from "../../lib/color.mjs";
 import { t as Card_default } from "../../Card-DuQHyroh.mjs";
 import { t as useToggle } from "../../useToggle-1z8JE7Ym.mjs";
-import { withAlpha } from "../../lib/color.mjs";
 import { useOutsideClick } from "../../lib/useOutsideClick.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { focusWithinOutline } from "../../mixins/focus.mjs";
-import "../../variables/effect.mjs";
 import { t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button } from "../../IconButton-DxHB2g80.mjs";
+import { n as Button } from "../../IconButton-kSjnfhWt.mjs";
 import { t as intersperse } from "../../intersperse-DvJsBw5D.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-c8XK2Lr4.mjs";
-import { s as Popover_default } from "../../Popover-DordjYNM.mjs";
-import { d as TextField } from "../../FormField-Cf1VMvoa.mjs";
-import { n as ensureProtocol, t as FloatingToolbar } from "../../FloatingToolbar-DLRaE0o7.mjs";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { n as DropdownMenu_default } from "../../DropdownMenu-jJSHQaih.mjs";
+import { s as Popover_default } from "../../Popover-DuFjaSoq.mjs";
+import { d as TextField } from "../../FormField-DMxjftFw.mjs";
+import { n as ensureProtocol, t as FloatingToolbar } from "../../FloatingToolbar-rfKurDs8.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BoldIcon, CapitalizeIcon, CaretDownIcon, GridIcon, ItalicIcon, LinkIcon, ListIcon, ListNumbersIcon, RotateCcwIcon, RotateCwIcon } from "@persona/icons";
 import { noop } from "lodash-es";

package/dist/components/RightPanel/index.mjs

@@ -1,12 +1,13 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
-import { i as Paragraph } from "../../Text-D0vEReED.mjs";
+import { ReducedMotionFade, TransitionEasingCurve } from "../../variables/transitions.mjs";
 import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { t as IconButton } from "../../IconButton-DxHB2g80.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { t as IconButton } from "../../IconButton-kSjnfhWt.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-CpfKTSUs.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
 import { mergeProps, useMove } from "react-aria";
@@ -69,12 +70,13 @@ const Handle = styled.div`
     left: 0;
     width: 2px;
     background-color: transparent;
-    transition: background-color 0.15s ease-in;
-    transition-delay: 0.025s;
+    transition: background-color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
   }
 
   &:hover::after,
   &${`.${DRAGGING_CLASSNAME}`}::after {
+    /* Filters out a pointer passing over the handle; the hover-out has no delay. */
+    transition-delay: 25ms;
     background-color: ${({ theme }) => semanticColor(theme, "BorderFocus", theme.color.border.active)};
   }
 `;
@@ -152,6 +154,10 @@ const RightPanelResizeHandle = ({ onMove, onMoveTo, onMoveStart, onMoveEnd, onDo
 //#region src/components/RightPanel/RightPanel.tsx
 const OPEN_DURATION = .4;
 const CLOSE_DURATION = .3;
+const REDUCED_FADE = {
+	duration: ReducedMotionFade.durationInSeconds,
+	ease: TransitionEasingCurve.Move
+};
 const DEFAULT_MIN_WIDTH = 450;
 const MAX_WIDTH_RATIO = .5;
 const BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;
@@ -225,24 +231,33 @@ const RightPanel = ({ id, open = false, onOpenChange, title, description, childr
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(PanelOuter, {
 		initial: {
 			width: prefersReducedMotion ? effectiveWidth : 0,
-			minWidth: prefersReducedMotion ? effectiveWidth : 0
+			minWidth: prefersReducedMotion ? effectiveWidth : 0,
+			opacity: prefersReducedMotion ? 0 : 1
 		},
 		animate: {
 			width: effectiveWidth,
 			minWidth: effectiveWidth,
-			transition: {
-				duration: prefersReducedMotion ? 0 : OPEN_DURATION,
-				ease: "circOut",
-				width: shouldAnimateWidth && !prefersReducedMotion ? void 0 : { duration: 0 },
-				minWidth: shouldAnimateWidth && !prefersReducedMotion ? void 0 : { duration: 0 }
+			opacity: 1,
+			transition: prefersReducedMotion ? {
+				...REDUCED_FADE,
+				width: { duration: 0 },
+				minWidth: { duration: 0 }
+			} : {
+				duration: OPEN_DURATION,
+				ease: TransitionEasingCurve.Enter,
+				width: shouldAnimateWidth ? void 0 : { duration: 0 },
+				minWidth: shouldAnimateWidth ? void 0 : { duration: 0 }
 			}
 		},
-		exit: {
+		exit: prefersReducedMotion ? {
+			opacity: 0,
+			transition: REDUCED_FADE
+		} : {
 			width: 0,
 			minWidth: 0,
 			transition: {
-				duration: prefersReducedMotion ? 0 : CLOSE_DURATION,
-				ease: "circOut"
+				duration: CLOSE_DURATION,
+				ease: TransitionEasingCurve.Exit
 			}
 		},
 		children: /* @__PURE__ */ jsxs(PanelInner, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/RightPanel/RightPanelLoadingContent.tsx","../../../src/components/RightPanel/RightPanelResizeHandle.tsx","../../../src/components/RightPanel/RightPanel.tsx"],"sourcesContent":["import { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nconst RightPanelLoadingContent = () => (\n  <Stack spacing={Spacing[5]} aria-label='Loading panel content'>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='30%' height='16px' />\n      <LoadingShimmer width='100%' height='40px' />\n    </Stack>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='35%' height='16px' />\n      <LoadingShimmer width='100%' height='200px' />\n    </Stack>\n    <HStack justify='flex-end'>\n      <LoadingShimmer width='80px' height='32px' />\n    </HStack>\n  </Stack>\n);\n\nexport default RightPanelLoadingContent;\n","import { type FC, type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react';\nimport { mergeProps, useMove } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst DRAGGING_CLASSNAME = 'dragging';\nconst KEYBOARD_RESIZE_STEP = 10;\nconst KEYBOARD_RESIZE_STEP_LARGE = 40;\n\nexport interface RightPanelResizeHandleProps {\n  onMove: (deltaX: number) => void;\n  onMoveTo?: (clientX: number) => void;\n  onMoveStart?: () => void;\n  onMoveEnd?: () => void;\n  onDoubleClick?: () => void;\n}\n\nconst Handle = styled.div`\n  touch-action: none;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 1;\n  width: ${Spacing[2]};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &${`.${DRAGGING_CLASSNAME}`}::after {\n    background-color: ${({ theme }) => semanticColor(theme, 'BorderFocus', theme.color.border.active)};\n  }\n`;\n\nconst RightPanelResizeHandle: FC<RightPanelResizeHandleProps> = ({\n  onMove,\n  onMoveTo,\n  onMoveStart,\n  onMoveEnd,\n  onDoubleClick,\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const isDraggingRef = useRef(false);\n  const capturedPointerIdRef = useRef<number | null>(null);\n  const onMoveEndRef = useRef(onMoveEnd);\n  onMoveEndRef.current = onMoveEnd;\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = true;\n        setIsDragging(true);\n      }\n      onMoveStart?.();\n    },\n    onMove(e) {\n      if (e.pointerType !== 'keyboard') {\n        return;\n      }\n      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;\n      onMove(e.deltaX * step);\n    },\n    onMoveEnd(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        capturedPointerIdRef.current = null;\n      }\n      onMoveEnd?.();\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (isDraggingRef.current) {\n        onMoveEndRef.current?.();\n      }\n    };\n  }, []);\n\n  return (\n    <Handle\n      {...mergeProps(moveProps, {\n        onDoubleClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onDoubleClick?.();\n            e.preventDefault();\n          }\n        },\n        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          capturedPointerIdRef.current = null;\n          window.dispatchEvent(\n            new PointerEvent('pointerup', {\n              bubbles: true,\n              pointerId: e.pointerId,\n              pointerType: e.pointerType || 'mouse',\n            }),\n          );\n        },\n        onPointerDown: (e: PointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || capturedPointerIdRef.current != null) {\n            return;\n          }\n          capturedPointerIdRef.current = e.pointerId;\n          try {\n            e.currentTarget.setPointerCapture(e.pointerId);\n          } catch {\n            // Pointer capture unsupported.\n          }\n        },\n        onPointerMove: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          onMoveTo?.(e.clientX);\n        },\n      })}\n      aria-label='Resize right panel'\n      aria-orientation='vertical'\n      role='separator'\n      tabIndex={0}\n      className={isDragging ? DRAGGING_CLASSNAME : undefined}\n    />\n  );\n};\n\nexport default RightPanelResizeHandle;\n","import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nimport RightPanelLoadingContent from './RightPanelLoadingContent';\nimport RightPanelResizeHandle from './RightPanelResizeHandle';\n\nconst OPEN_DURATION = 0.4;\nconst CLOSE_DURATION = 0.3;\nconst DEFAULT_MIN_WIDTH = 450;\nconst MAX_WIDTH_RATIO = 0.5;\n// Reserves scroll-area space so form submit buttons don't collide with the\n// floating Copilot button (anchored at bottom: Spacing[5], 48px hit target).\nconst BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;\n\nconst PanelOuter = styled(motion.div)`\n  flex-shrink: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst PanelInner = styled.div<{ $width: number; $useMinWidth: boolean }>`\n  position: relative;\n  ${({ $width, $useMinWidth }) => ($useMinWidth ? `min-width: ${$width}px;` : '')}\n  height: 100%;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  border-left: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) =>\n    semanticColor(theme, 'BorderSubtle', theme.color.border.primary)};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  ${semanticScrollbar}\n  padding: ${Spacing[4]};\n  padding-bottom: ${BODY_BOTTOM_PADDING};\n`;\n\nexport interface RightPanelProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Panel id */\n  id?: string;\n  /** Called when open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Panel title rendered in header */\n  title: string;\n  /** Optional description below title */\n  description?: string;\n  /** Panel content */\n  children: ReactNode;\n  /** Panel width in pixels */\n  width?: number;\n  /** Minimum width when resizable. Defaults to 450px. */\n  minWidth?: number;\n  /** When true, the panel is drag-resizable via its left edge. */\n  resizable?: boolean;\n  /** When true, render a shimmer placeholder in the body instead of children. */\n  loading?: boolean;\n}\n\nconst RightPanel = ({\n  id,\n  open = false,\n  onOpenChange,\n  title,\n  description,\n  children,\n  width = DEFAULT_MIN_WIDTH,\n  minWidth = DEFAULT_MIN_WIDTH,\n  resizable = false,\n  loading = false,\n}: RightPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  const defaultWidth = resizable ? Math.max(minWidth, width) : width;\n  const [currentWidth, setCurrentWidth] = useState(defaultWidth);\n  const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);\n\n  const effectiveWidth = resizable ? currentWidth : width;\n\n  const handleClose = useCallback(() => {\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement | null;\n      panelRef.current?.focus();\n    } else if (\n      previousActiveElementRef.current &&\n      document.contains(previousActiveElementRef.current)\n    ) {\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [open]);\n\n  const clampWidth = useCallback(\n    (nextWidth: number) =>\n      Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)),\n    [minWidth],\n  );\n\n  const handleMove = useCallback(\n    (deltaX: number) => {\n      setCurrentWidth((current) => clampWidth(current - deltaX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveTo = useCallback(\n    (clientX: number) => {\n      const rightEdge = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;\n      setCurrentWidth(clampWidth(rightEdge - clientX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveStart = useCallback(() => {\n    setShouldAnimateWidth(false);\n  }, []);\n\n  const handleMoveEnd = useCallback(() => {\n    setShouldAnimateWidth(true);\n  }, []);\n\n  const handleDoubleClick = useCallback(() => {\n    setShouldAnimateWidth(true);\n    setCurrentWidth(defaultWidth);\n  }, [defaultWidth]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PanelOuter\n          initial={{\n            width: prefersReducedMotion ? effectiveWidth : 0,\n            minWidth: prefersReducedMotion ? effectiveWidth : 0,\n          }}\n          animate={{\n            width: effectiveWidth,\n            minWidth: effectiveWidth,\n            transition: {\n              duration: prefersReducedMotion ? 0 : OPEN_DURATION,\n              ease: 'circOut',\n              width: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n              minWidth: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n            },\n          }}\n          exit={{\n            width: 0,\n            minWidth: 0,\n            transition: {\n              duration: prefersReducedMotion ? 0 : CLOSE_DURATION,\n              ease: 'circOut',\n            },\n          }}\n        >\n          <PanelInner\n            ref={panelRef}\n            id={id}\n            $width={effectiveWidth}\n            $useMinWidth={shouldAnimateWidth}\n            role='complementary'\n            aria-label={title}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n          >\n            {resizable && (\n              <RightPanelResizeHandle\n                onMove={handleMove}\n                onMoveTo={handleMoveTo}\n                onMoveStart={handleMoveStart}\n                onMoveEnd={handleMoveEnd}\n                onDoubleClick={handleDoubleClick}\n              />\n            )}\n            <PanelHeader>\n              <Stack spacing={Spacing[2]}>\n                <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n                  <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n                    {title}\n                  </Paragraph>\n                  <IconButton size='md' aria-label='Close' onClick={handleClose}>\n                    <XIcon />\n                  </IconButton>\n                </HStack>\n                {description && (\n                  <Paragraph size='md' color='secondary'>\n                    {description}\n                  </Paragraph>\n                )}\n              </Stack>\n            </PanelHeader>\n            <PanelBody>{loading ? <RightPanelLoadingContent /> : children}</PanelBody>\n          </PanelInner>\n        </PanelOuter>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport { RightPanel };\nexport default RightPanel;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/RightPanel/RightPanelLoadingContent.tsx","../../../src/components/RightPanel/RightPanelResizeHandle.tsx","../../../src/components/RightPanel/RightPanel.tsx"],"sourcesContent":["import { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nconst RightPanelLoadingContent = () => (\n  <Stack spacing={Spacing[5]} aria-label='Loading panel content'>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='30%' height='16px' />\n      <LoadingShimmer width='100%' height='40px' />\n    </Stack>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='35%' height='16px' />\n      <LoadingShimmer width='100%' height='200px' />\n    </Stack>\n    <HStack justify='flex-end'>\n      <LoadingShimmer width='80px' height='32px' />\n    </HStack>\n  </Stack>\n);\n\nexport default RightPanelLoadingContent;\n","import { type FC, type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react';\nimport { mergeProps, useMove } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nconst DRAGGING_CLASSNAME = 'dragging';\nconst KEYBOARD_RESIZE_STEP = 10;\nconst KEYBOARD_RESIZE_STEP_LARGE = 40;\n\nexport interface RightPanelResizeHandleProps {\n  onMove: (deltaX: number) => void;\n  onMoveTo?: (clientX: number) => void;\n  onMoveStart?: () => void;\n  onMoveEnd?: () => void;\n  onDoubleClick?: () => void;\n}\n\nconst Handle = styled.div`\n  touch-action: none;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 1;\n  width: ${Spacing[2]};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 2px;\n    background-color: transparent;\n    transition: background-color ${TransitionDuration.Fast} ${TransitionEasing.Move};\n  }\n\n  &:hover::after,\n  &${`.${DRAGGING_CLASSNAME}`}::after {\n    /* Filters out a pointer passing over the handle; the hover-out has no delay. */\n    transition-delay: 25ms;\n    background-color: ${({ theme }) => semanticColor(theme, 'BorderFocus', theme.color.border.active)};\n  }\n`;\n\nconst RightPanelResizeHandle: FC<RightPanelResizeHandleProps> = ({\n  onMove,\n  onMoveTo,\n  onMoveStart,\n  onMoveEnd,\n  onDoubleClick,\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const isDraggingRef = useRef(false);\n  const capturedPointerIdRef = useRef<number | null>(null);\n  const onMoveEndRef = useRef(onMoveEnd);\n  onMoveEndRef.current = onMoveEnd;\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = true;\n        setIsDragging(true);\n      }\n      onMoveStart?.();\n    },\n    onMove(e) {\n      if (e.pointerType !== 'keyboard') {\n        return;\n      }\n      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;\n      onMove(e.deltaX * step);\n    },\n    onMoveEnd(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        capturedPointerIdRef.current = null;\n      }\n      onMoveEnd?.();\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (isDraggingRef.current) {\n        onMoveEndRef.current?.();\n      }\n    };\n  }, []);\n\n  return (\n    <Handle\n      {...mergeProps(moveProps, {\n        onDoubleClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onDoubleClick?.();\n            e.preventDefault();\n          }\n        },\n        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          capturedPointerIdRef.current = null;\n          window.dispatchEvent(\n            new PointerEvent('pointerup', {\n              bubbles: true,\n              pointerId: e.pointerId,\n              pointerType: e.pointerType || 'mouse',\n            }),\n          );\n        },\n        onPointerDown: (e: PointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || capturedPointerIdRef.current != null) {\n            return;\n          }\n          capturedPointerIdRef.current = e.pointerId;\n          try {\n            e.currentTarget.setPointerCapture(e.pointerId);\n          } catch {\n            // Pointer capture unsupported.\n          }\n        },\n        onPointerMove: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          onMoveTo?.(e.clientX);\n        },\n      })}\n      aria-label='Resize right panel'\n      aria-orientation='vertical'\n      role='separator'\n      tabIndex={0}\n      className={isDragging ? DRAGGING_CLASSNAME : undefined}\n    />\n  );\n};\n\nexport default RightPanelResizeHandle;\n","import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n  ReducedMotionFade,\n  TransitionDurationInSeconds,\n  TransitionEasingCurve,\n} from '#src/variables/transitions';\n\nimport RightPanelLoadingContent from './RightPanelLoadingContent';\nimport RightPanelResizeHandle from './RightPanelResizeHandle';\n\nconst OPEN_DURATION = TransitionDurationInSeconds.Medium;\nconst CLOSE_DURATION = TransitionDurationInSeconds.MediumFast;\n// Under reduced motion the width jumps and the panel fades instead.\nconst REDUCED_FADE = {\n  duration: ReducedMotionFade.durationInSeconds,\n  ease: TransitionEasingCurve.Move,\n};\nconst DEFAULT_MIN_WIDTH = 450;\nconst MAX_WIDTH_RATIO = 0.5;\n// Reserves scroll-area space so form submit buttons don't collide with the\n// floating Copilot button (anchored at bottom: Spacing[5], 48px hit target).\nconst BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;\n\nconst PanelOuter = styled(motion.div)`\n  flex-shrink: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst PanelInner = styled.div<{ $width: number; $useMinWidth: boolean }>`\n  position: relative;\n  ${({ $width, $useMinWidth }) => ($useMinWidth ? `min-width: ${$width}px;` : '')}\n  height: 100%;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  border-left: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) =>\n    semanticColor(theme, 'BorderSubtle', theme.color.border.primary)};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  ${semanticScrollbar}\n  padding: ${Spacing[4]};\n  padding-bottom: ${BODY_BOTTOM_PADDING};\n`;\n\nexport interface RightPanelProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Panel id */\n  id?: string;\n  /** Called when open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Panel title rendered in header */\n  title: string;\n  /** Optional description below title */\n  description?: string;\n  /** Panel content */\n  children: ReactNode;\n  /** Panel width in pixels */\n  width?: number;\n  /** Minimum width when resizable. Defaults to 450px. */\n  minWidth?: number;\n  /** When true, the panel is drag-resizable via its left edge. */\n  resizable?: boolean;\n  /** When true, render a shimmer placeholder in the body instead of children. */\n  loading?: boolean;\n}\n\nconst RightPanel = ({\n  id,\n  open = false,\n  onOpenChange,\n  title,\n  description,\n  children,\n  width = DEFAULT_MIN_WIDTH,\n  minWidth = DEFAULT_MIN_WIDTH,\n  resizable = false,\n  loading = false,\n}: RightPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  const defaultWidth = resizable ? Math.max(minWidth, width) : width;\n  const [currentWidth, setCurrentWidth] = useState(defaultWidth);\n  const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);\n\n  const effectiveWidth = resizable ? currentWidth : width;\n\n  const handleClose = useCallback(() => {\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement | null;\n      panelRef.current?.focus();\n    } else if (\n      previousActiveElementRef.current &&\n      document.contains(previousActiveElementRef.current)\n    ) {\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [open]);\n\n  const clampWidth = useCallback(\n    (nextWidth: number) =>\n      Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)),\n    [minWidth],\n  );\n\n  const handleMove = useCallback(\n    (deltaX: number) => {\n      setCurrentWidth((current) => clampWidth(current - deltaX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveTo = useCallback(\n    (clientX: number) => {\n      const rightEdge = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;\n      setCurrentWidth(clampWidth(rightEdge - clientX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveStart = useCallback(() => {\n    setShouldAnimateWidth(false);\n  }, []);\n\n  const handleMoveEnd = useCallback(() => {\n    setShouldAnimateWidth(true);\n  }, []);\n\n  const handleDoubleClick = useCallback(() => {\n    setShouldAnimateWidth(true);\n    setCurrentWidth(defaultWidth);\n  }, [defaultWidth]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PanelOuter\n          initial={{\n            width: prefersReducedMotion ? effectiveWidth : 0,\n            minWidth: prefersReducedMotion ? effectiveWidth : 0,\n            opacity: prefersReducedMotion ? 0 : 1,\n          }}\n          animate={{\n            width: effectiveWidth,\n            minWidth: effectiveWidth,\n            opacity: 1,\n            transition: prefersReducedMotion\n              ? { ...REDUCED_FADE, width: { duration: 0 }, minWidth: { duration: 0 } }\n              : {\n                  duration: OPEN_DURATION,\n                  ease: TransitionEasingCurve.Enter,\n                  width: shouldAnimateWidth ? undefined : { duration: 0 },\n                  minWidth: shouldAnimateWidth ? undefined : { duration: 0 },\n                },\n          }}\n          exit={\n            prefersReducedMotion\n              ? { opacity: 0, transition: REDUCED_FADE }\n              : {\n                  width: 0,\n                  minWidth: 0,\n                  transition: { duration: CLOSE_DURATION, ease: TransitionEasingCurve.Exit },\n                }\n          }\n        >\n          <PanelInner\n            ref={panelRef}\n            id={id}\n            $width={effectiveWidth}\n            $useMinWidth={shouldAnimateWidth}\n            role='complementary'\n            aria-label={title}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n          >\n            {resizable && (\n              <RightPanelResizeHandle\n                onMove={handleMove}\n                onMoveTo={handleMoveTo}\n                onMoveStart={handleMoveStart}\n                onMoveEnd={handleMoveEnd}\n                onDoubleClick={handleDoubleClick}\n              />\n            )}\n            <PanelHeader>\n              <Stack spacing={Spacing[2]}>\n                <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n                  <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n                    {title}\n                  </Paragraph>\n                  <IconButton size='md' aria-label='Close' onClick={handleClose}>\n                    <XIcon />\n                  </IconButton>\n                </HStack>\n                {description && (\n                  <Paragraph size='md' color='secondary'>\n                    {description}\n                  </Paragraph>\n                )}\n              </Stack>\n            </PanelHeader>\n            <PanelBody>{loading ? <RightPanelLoadingContent /> : children}</PanelBody>\n          </PanelInner>\n        </PanelOuter>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport { RightPanel };\nexport default RightPanel;\n"],"mappings":"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"}

package/dist/components/SegmentedControl/index.mjs

@@ -1,2 +1,2 @@
-import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-D_DA-MU1.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-BpR7sUWO.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem };

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

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-CR9TjFfo.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-DYdn73Nh.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/components/Select/index.mjs

@@ -1,2 +1,2 @@
-import { n as Select, r as SelectHeader, t as Option } from "../../Select-DOlw_LPR.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-RdTT2KoH.mjs";
 export { Option, Select, Select as default, SelectHeader };

package/dist/components/SelectionCard/index.mjs

@@ -1,15 +1,15 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "../../lib/semanticColor.mjs";
-import { i as Paragraph } from "../../Text-D0vEReED.mjs";
-import { a as Tooltip } from "../../Tooltip-YViXzMdm.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
 import { opacityOf, withAlpha } from "../../lib/color.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
+import { a as Tooltip } from "../../Tooltip-C2VB8I6y.mjs";
 import useControlled from "../../lib/useControlled.mjs";
-import { focusStyle } from "../../mixins/focus.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
 import { n as useFormField, t as FormControlContext } from "../../useFormField-pOVkb5BK.mjs";
-import { t as Checkbox } from "../../Checkbox-Dr4LMKHV.mjs";
-import { Children, cloneElement, isValidElement, useContext } from "react";
+import { t as Checkbox } from "../../Checkbox-C3z7UUSC.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { Children, cloneElement, isValidElement, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SelectionCard/SelectionCard.tsx
 const CardRoot = styled.label`

package/dist/components/Slider/index.mjs

@@ -1,10 +1,11 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
-import { paragraphMixins } from "../../mixins/text.mjs";
-import { i as FloatingTooltip } from "../../Tooltip-YViXzMdm.mjs";
 import { focusStyle } from "../../mixins/focus.mjs";
-import { useEffect, useMemo, useRef, useState } from "react";
+import "../../variables/transitions.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { i as FloatingTooltip } from "../../Tooltip-C2VB8I6y.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
 import { mergeProps } from "@react-aria/utils";
@@ -129,7 +130,7 @@ const SliderTrack = styled.div`
   height: 4px;
   border-radius: 4px;
   outline: none;
-  transition: background 0.2s;
+  transition: background ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
   /* Disable clicks on slide bar */
   pointer-events: none;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/Slider/SliderThumb.tsx","../../../src/components/Slider/Slider.tsx","../../../src/components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { FloatingTooltip } from '#src/components/Tooltip';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { focusStyle } from '#src/mixins/focus';\nimport { paragraphMixins } from '#src/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)\n      : semanticColor(theme, 'InputSurfaceInverseStatic', Color.BackgroundInputDefault)};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid\n    ${({ theme, disabled }) =>\n      disabled\n        ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n        : semanticColor(theme, 'BorderDefault', Color.BorderInputDisabled)};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport SliderThumb from '#src/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div<{ $disabled?: boolean }>`\n  ${paragraphMixins.md};\n  ${({ $disabled }) =>\n    semanticOnly((tokens) => `color: ${$disabled ? tokens.FgDisabled : tokens.FgPrimary};`)}\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ theme, percents, track, disabled }) => {\n    const activeColor = disabled\n      ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n      : semanticColor(theme, 'InputBorderAccent', Color.CoreBlue700);\n    const trackColor = semanticColor(theme, 'BorderSubtle', Color.BorderDivider);\n\n    if (track === false) {\n      return css`\n        background: ${trackColor};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel $disabled={disabled}>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel $disabled={disabled}>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/Slider/SliderThumb.tsx","../../../src/components/Slider/Slider.tsx","../../../src/components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { FloatingTooltip } from '#src/components/Tooltip';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { focusStyle } from '#src/mixins/focus';\nimport { paragraphMixins } from '#src/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)\n      : semanticColor(theme, 'InputSurfaceInverseStatic', Color.BackgroundInputDefault)};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid\n    ${({ theme, disabled }) =>\n      disabled\n        ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n        : semanticColor(theme, 'BorderDefault', Color.BorderInputDisabled)};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport SliderThumb from '#src/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div<{ $disabled?: boolean }>`\n  ${paragraphMixins.md};\n  ${({ $disabled }) =>\n    semanticOnly((tokens) => `color: ${$disabled ? tokens.FgDisabled : tokens.FgPrimary};`)}\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background ${TransitionDuration.Fast} ${TransitionEasing.Move};\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ theme, percents, track, disabled }) => {\n    const activeColor = disabled\n      ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n      : semanticColor(theme, 'InputBorderAccent', Color.CoreBlue700);\n    const trackColor = semanticColor(theme, 'BorderSubtle', Color.BorderDivider);\n\n    if (track === false) {\n      return css`\n        background: ${trackColor};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel $disabled={disabled}>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel $disabled={disabled}>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}

package/dist/components/SmartTextInput/index.mjs

@@ -1,6 +1,8 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
-import { i as Paragraph } from "../../Text-D0vEReED.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
+import "../../variables/effect.mjs";
 import { rotate } from "../../variables/keyframes.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
 import { JsonSchemaStringifiableTypes, getNonNullableRefSchema, getNonNullableType, isFunctionSchema, isJsonSchemaArray, isSchemaTypeAllowed } from "../../lib/jsonSchema.mjs";
 import { isCreatableReceiverSchema, isNoArgCodeChainFunction } from "../../lib/customFunctionSchema.mjs";
 import { isASTCustomFunctionNode, isAnyASTFunctionNode, isRealASTFunctionParamType } from "./parser/method-chain/types.mjs";
@@ -9,19 +11,17 @@ import { normalizeChain, normalizeFunctionParam } from "../../lib/methodChainNor
 import { UNTYPED_ADDITIONAL_PROPERTY_SCHEMA, getFunctionSchemaForNode, getSchemaForFieldPath } from "../../lib/schemaOptions.mjs";
 import { n as useChain, r as useChainSchema } from "../../useChain-D1aNsdvn.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { focusStyle } from "../../mixins/focus.mjs";
-import "../../variables/effect.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button } from "../../IconButton-DxHB2g80.mjs";
+import { n as Button } from "../../IconButton-kSjnfhWt.mjs";
 import { n as useFormField } from "../../useFormField-pOVkb5BK.mjs";
 import Input_default from "../Input/index.mjs";
-import { n as ErrorText } from "../../FormControl-BztNXLn6.mjs";
-import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-Cf1VMvoa.mjs";
+import { n as ErrorText } from "../../FormControl--pbTH3bY.mjs";
+import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-DMxjftFw.mjs";
 import PillType from "./PillType.mjs";
 import { ErrorMessageByKind, NodeType, isASTChainNode, isASTContainerNode, isMethodChainNode } from "./parser/smart-text/types.mjs";
 import { parse as peg$parse } from "./parser/smart-text/parser.mjs";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "@persona/icons";
 import { ArrowLeftIcon as ArrowLeftIcon$1 } from "@persona/icons/12px";
@@ -400,14 +400,6 @@ function safeParse(input, options) {
 }
 //#endregion
 //#region src/components/SmartTextInput/utils.ts
-const createMeasureCanvas = () => {
-	const canvas = document.createElement("canvas");
-	return [canvas, () => {
-		canvas.width = 0;
-		canvas.height = 0;
-		canvas.remove();
-	}];
-};
 const safeCursorIdx = (cursorIdx, ast) => {
 	const idx = cursorIdx ?? ast.end;
 	return Math.max(Math.min(idx, ast.end), 0);
@@ -442,7 +434,7 @@ function canExitToInterpolation(value, allowedValueType) {
 const syncScroll = (from, to) => {
 	if (from.current && to.current) to.current.scrollLeft = from.current.scrollLeft;
 };
-const [globalMeasureCanvas] = createMeasureCanvas();
+let globalMeasureCanvas;
 /**
 * Scroll the input so the cursor at cursorIdx is visible, then sync the overlay.
 *
@@ -453,6 +445,7 @@ const [globalMeasureCanvas] = createMeasureCanvas();
 const scrollInputToCursor = (inputRef, cursorIdx) => {
 	const input = inputRef.current;
 	if (!input) return;
+	globalMeasureCanvas ??= document.createElement("canvas");
 	const ctx = globalMeasureCanvas.getContext("2d");
 	if (!ctx) return;
 	const style = window.getComputedStyle(input);
@@ -1351,7 +1344,7 @@ function findSchemaErrors(tree, rootSchema, platformObjectJsonSchema, primitiveU
 		}
 		const hasIncomplete = findAll(chainNode, NodeType.Error).some((c) => c.wip);
 		const enclosing = enclosingExpr(tree, chainNode);
-		const inClosedHandlebars = enclosing?.type === NodeType.Handlebars && !enclosing.children?.some((c) => c.type === NodeType.Error && c.kind === "unclosedHandlebars");
+		const inClosedHandlebars = enclosing?.type === NodeType.Handlebars && enclosing.children?.includes(chainNode) && !enclosing.children?.some((c) => c.type === NodeType.Error && c.kind === "unclosedHandlebars");
 		if (!hasIncomplete && identifierLinks.length > 0 && inClosedHandlebars) {
 			if (!(prevSchema === UNTYPED_ADDITIONAL_PROPERTY_SCHEMA || isSchemaTypeAllowed(prevSchema, JsonSchemaStringifiableTypes))) {
 				const lastLink = identifierLinks[identifierLinks.length - 1];
@@ -1417,7 +1410,7 @@ function getError(leftmostSyntaxError, leftmostIncompleteError, leftmostSchemaEr
 const useInternalValidation = ({ tree, valueIsEmpty, focused, schemaValidator, onValidationChange, value, valueType }) => {
 	const errorNodes = findAll(tree, NodeType.Error);
 	let leftmostSyntaxError = errorNodes.find((e) => e.start < e.end && !e.wip);
-	const leftmostIncompleteError = errorNodes.find((e) => e.start === e.end);
+	const leftmostIncompleteError = errorNodes.find((e) => e.wip || e.start === e.end);
 	const leftmostSchemaError = useMemo(() => schemaValidator(tree), [tree, schemaValidator]);
 	if (leftmostSyntaxError != null && valueType === "method-chain" && (value.includes("{{") || value.includes("${"))) leftmostSyntaxError = {
 		...leftmostSyntaxError,