@persona/design-system 0.7.2 → 0.8.0

package/dist/components/Menu/index.mjs

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-Cd6oxjAe.mjs";
+import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-CwlI7BMN.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

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

@@ -1,2 +1,2 @@
-import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-Dwq-QBw_.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-ymxlGYKt.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/components/Modal/index.mjs

@@ -1,2 +1,2 @@
-import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-BN0K8QXi.mjs";
+import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-CMiFcXC9.mjs";
 export { ModalClose, ModalContent, ModalTrigger, Modal_default as default };

package/dist/components/PageHeader/index.mjs

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-BTtm3hRQ.mjs";
+import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-D_0p7UK_.mjs";
 export { PageHeaderContainer, PageHeader as default };

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

@@ -1,4 +1,4 @@
-import { t as Pagination } from "../../Pagination-H-CcXrCD.mjs";
-import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-CeGC84N1.mjs";
-import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-BpwnTzcv.mjs";
+import { t as Pagination } from "../../Pagination-Dg-4O7F7.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-Bxulu6vU.mjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-BOxzLX-O.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.mjs

@@ -1,2 +1,2 @@
-import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-CPd4mSnw.mjs";
+import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-Co9CfyFQ.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };

package/dist/components/Pii/index.mjs

@@ -1,2 +1,2 @@
-import { t as Pii_default } from "../../Pii-Dz4woKd8.mjs";
+import { t as Pii_default } from "../../Pii-JGV9gP95.mjs";
 export { Pii_default as default };

package/dist/components/Popover/index.mjs

@@ -1,2 +1,2 @@
-import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-opVa9Xhc.mjs";
+import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-ZAj03lws.mjs";
 export { PopoverAnchor, PopoverCard, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Popover_default as default };

package/dist/components/ProgressBar/index.mjs

@@ -13,7 +13,6 @@ const statusFill = (theme, status) => {
 	if (status === "success") return semanticColor(theme, "StatusSuccess3", Color.BorderIconSuccess);
 	return semanticColor(theme, "StatusInfo3", Color.BorderInputActive);
 };
-const statusIconColor = (theme, status) => status === "exception" ? semanticColor(theme, "FgDanger1", Color.BorderInputDanger) : semanticColor(theme, "FgSuccess", Color.BorderIconSuccess);
 const TRACK_HEIGHT = {
 	sm: "4px",
 	md: "8px"
@@ -91,7 +90,7 @@ const IconWrapper = styled.span`
   display: flex;
   flex-shrink: 0;
   line-height: 0;
-  color: ${({ theme, $status }) => statusIconColor(theme, $status)};
+  color: ${({ theme, $status }) => statusFill(theme, $status)};
 `;
 /**
 * ProgressBar shows the completion status of an operation as a filled bar.

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../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';\nimport { type MaybeSemanticTheme, semanticColor } from 'design-system/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 statusIconColor = (theme: MaybeSemanticTheme, status: 'exception' | 'success') =>\n  status === 'exception'\n    ? semanticColor(theme, 'FgDanger1', Color.BorderInputDanger)\n    : semanticColor(theme, 'FgSuccess', Color.BorderIconSuccess);\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 }) => statusIconColor(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":["../../../components/ProgressBar/ProgressBar.tsx","../../../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';\nimport { type MaybeSemanticTheme, semanticColor } from 'design-system/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":";;;;;;;;;;AAeA,MAAM,cAAc,OAA2B,WAA8B;AAC3E,KAAI,WAAW,YACb,QAAO,cAAc,OAAO,iBAAiB,MAAM,kBAAkB;AAEvE,KAAI,WAAW,UACb,QAAO,cAAc,OAAO,kBAAkB,MAAM,kBAAkB;AAExE,QAAO,cAAc,OAAO,eAAe,MAAM,kBAAkB;;AAGrE,MAAM,eAAgD;CACpD,IAAI;CACJ,IAAI;CACL;AAGD,MAAM,iBAAiB;AAEvB,MAAM,oBAAoB,SAAS;;;;;AAMnC,MAAM,YAAY,OAAO,GAAG;;;;;AAM5B,MAAM,YAAY,OAAO,IAAI;IACzB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;AAG/E,MAAM,SAAS,OAAO,GAAG;;SAEhB,QAAQ,GAAG;;gBAEJ,eAAe;;;AAI/B,MAAM,QAAQ,OAAO,GAAmD;;aAE3D,EAAE,YAAY,aAAa,OAAO;uBACxB,EAAE,OAAO,iBAC5B,cAAc,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;;;;AAM5E,MAAM,OAAO,OAAO,GAMlB;;;;WAIS,EAAE,YAAY,GAAG,MAAM,GAAG;YACzB,EAAE,eAAe,GAAG,SAAS,GAAG;uBACrB,EAAE,OAAO,SAAS,iBAAiB,cAAc,WAAW,OAAO,QAAQ,CAAC;oBAC/E,EAAE,wBAAyB,oBAAoB,gBAAgB,MAAO;;;AAI1F,MAAM,cAAc,OAAO,GAAuD;;;;;YAKtE,EAAE,eAAe,GAAG,SAAS,GAAG;uBACrB,EAAE,YAAY,WAAW,OAAO,UAAU,CAAC;oBAC9C,EAAE,0BAA2B,sBAAsB,gBAAgB,MAAO;;;AAI9F,MAAM,oBAAoB,OAAO,GAAG;;;;uBAIb,EAAE,YAAY,cAAc,OAAO,oBAAoB,MAAM,kBAAkB,CAAC;;eAExF,kBAAkB;;AAGjC,MAAM,YAAY,OAAO,GAAG;;SAEnB,QAAQ,GAAG;;;;AAKpB,MAAM,cAAc,OAAO,IAAI;IAC3B,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;;AAI/E,MAAM,cAAc,OAAO,IAA0C;;;;YAIzD,EAAE,OAAO,cAAc,WAAW,OAAO,QAAQ,CAAC;;;;;;;;;;;;;;;AA4D9D,MAAa,eAAe,EAC1B,UAAU,GACV,OAAO,MACP,SAAS,WACT,OAAO,eACP,OACA,UACA,WACA,WACA,QACA,gBACA,SACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,YACmB;CACtB,MAAM,UAAU,OAAO;CACvB,MAAM,iBAAiB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,QAAQ,CAAC;CAC1D,MAAM,wBACJ,kBAAkB,OAAO,KAAK,IAAI,gBAAgB,KAAK,IAAI,GAAG,eAAe,CAAC,GAAG;CACnF,MAAM,oBAAoB,iBAAiB;CAC3C,MAAM,oBAAoB,wBAAwB;CAClD,MAAM,uBAAuB,oBAAoB;CAGjD,MAAM,kBACJ,kBAAkB,OAAO,WAAW,cAAc,YAAY;CAGhE,MAAM,oBAAoB,YAAY,kBAAkB;CAExD,MAAM,aAAa,oBAAoB,eAAe,oBAAoB;CAC1E,MAAM,mBAAmB,SAAS,OAAO,eAAe,GAAG,GAAG,eAAe;CAC7E,MAAM,kBAAkB,SAAS;CAEjC,MAAM,aAAa,QAAQ,CAAC,SAAS,eAAe,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,GAAG;CAGjF,MAAM,QACJ,oBAAC,OAAD;EACE,OAAO;EACP,YAAY;EACZ,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,kBAAkB,KAAA,IAAY;EAC7C,kBAAgB,kBAAkB,KAAA,IAAY;EAC9C,mBAAiB,cAAc,KAAA;EAC/B,cAZoB,aAAa,KAAA,IAAa,aAAa;YAc1D,kBACC,oBAAC,mBAAD,EAAqB,CAAA,GAErB,qBAAA,UAAA,EAAA,UAAA,CACG,qBACC,oBAAC,aAAD;GACE,UAAU;GACV,qBAAqB;GACrB,CAAA,EAEH,wBACC,oBAAC,MAAD;GACE,UAAU;GACV,OAAO;GACP,SAAS;GACT,YAAY;GACZ,mBAAmB;GACnB,CAAA,CAEH,EAAA,CAAA;EAEC,CAAA;AAGV,QACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACG,SAAS,oBAAC,WAAD;GAAW,IAAI;aAAU;GAAkB,CAAA,EACrD,qBAAC,QAAD,EAAA,UAAA,CACG,UACC,oBAAC,SAAD;GAAS,SAAS;GAAO,MAAK;GAAM,kBAAiB;aAClD;GACO,CAAA,GAEV,OAED,qBACC,oBAAC,WAAD,EAAA,UACG,aACC,oBAAC,aAAD;GAAa,SAAS;aACnB,oBAAoB,cACnB,oBAAC,uBAAD,EAAuB,MAAM,IAAM,CAAA,GAEnC,oBAAC,qBAAD,EAAqB,MAAM,IAAM,CAAA;GAEvB,CAAA,GAEd,oBAAC,aAAD,EAAA,UAAc,kBAA+B,CAAA,EAErC,CAAA,CAEP,EAAA,CAAA,CACC;;;;;ACjRhB,IAAA,sBAAe"}

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

@@ -1,2 +1,2 @@
-import { i as StepStatus, n as ProgressIndicatorProps, r as ProgressIndicatorStep, t as ProgressIndicator } from "../../ProgressIndicator-DbOLOaxJ.mjs";
+import { i as StepStatus, n as ProgressIndicatorProps, r as ProgressIndicatorStep, t as ProgressIndicator } from "../../ProgressIndicator-D85HQGSx.mjs";
 export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };

package/dist/components/ProgressIndicator/index.mjs

@@ -1,2 +1,2 @@
-import { t as ProgressIndicator } from "../../ProgressIndicator-3A4Aqci6.mjs";
+import { t as ProgressIndicator } from "../../ProgressIndicator-CQg08vuA.mjs";
 export { ProgressIndicator, ProgressIndicator as default };

package/dist/components/Radio/index.mjs

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

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

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-BjrfVPZQ.mjs";
+import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-Cq3KV1TN.mjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

package/dist/components/RadioGroup/index.mjs

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

package/dist/components/RightPanel/index.mjs

@@ -1,8 +1,10 @@
 import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
 import { i as Paragraph } from "../../Text-BdluS7Fy.mjs";
-import { n as Stack, t as HStack } from "../../Stack-ChsImaEY.mjs";
-import { t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Dizk2sZu.mjs";
+import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bkn0TUDe.mjs";
+import { t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-dRSkdlqD.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -73,7 +75,7 @@ const Handle = styled.div`
 
   &:hover::after,
   &${`.${DRAGGING_CLASSNAME}`}::after {
-    background-color: ${({ theme }) => theme.color.border.active};
+    background-color: ${({ theme }) => semanticColor(theme, "BorderFocus", theme.color.border.active)};
   }
 `;
 const RightPanelResizeHandle = ({ onMove, onMoveTo, onMoveStart, onMoveEnd, onDoubleClick }) => {
@@ -165,17 +167,18 @@ const PanelInner = styled.div`
   outline: none;
   display: flex;
   flex-direction: column;
-  background: ${Color.BackgroundPrimary};
-  border-left: 1px solid ${Color.BorderDivider};
+  background: ${({ theme }) => semanticColor(theme, "SurfacePrimary", Color.BackgroundPrimary)};
+  border-left: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
 `;
 const PanelHeader = styled.div`
   padding: ${Spacing[4]};
-  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.primary)};
   flex-shrink: 0;
 `;
 const PanelBody = styled.div`
   flex: 1;
   overflow-y: auto;
+  ${semanticScrollbar}
   padding: ${Spacing[4]};
   padding-bottom: ${BODY_BOTTOM_PADDING};
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/RightPanel/RightPanelLoadingContent.tsx","../../../components/RightPanel/RightPanelResizeHandle.tsx","../../../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\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 }) => 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 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: ${Color.BackgroundPrimary};\n  border-left: 1px solid ${Color.BorderDivider};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\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":["../../../components/RightPanel/RightPanelLoadingContent.tsx","../../../components/RightPanel/RightPanelResizeHandle.tsx","../../../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';\nimport { semanticColor } from 'design-system/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';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { semanticScrollbar } from 'design-system/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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"}

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

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-Crr_aHAs.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-DgDabSgr.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlProps };

package/dist/components/SegmentedControl/index.mjs

@@ -1,2 +1,2 @@
-import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-BcwfLuHA.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-BEbIcV3g.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-CJQeuCiF.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-wqTtGyga.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-BstCz8P1.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-yC2t_gZb.mjs";
 export { Option, Select, Select as default, SelectHeader };

package/dist/components/Slider/index.mjs

@@ -136,7 +136,7 @@ const SliderTrack = styled.div`
 
   ${({ theme, percents, track, disabled }) => {
 	const activeColor = disabled ? semanticColor(theme, "InputBorderDisabled", Color.BorderInputDisabled) : semanticColor(theme, "InputBorderAccent", Color.CoreBlue700);
-	const trackColor = semanticColor(theme, "BorderDivider", Color.BorderDivider);
+	const trackColor = semanticColor(theme, "BorderSubtle", Color.BorderDivider);
 	if (track === false) return css`
         background: ${trackColor};
       `;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../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';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/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';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/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, 'BorderDivider', 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":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../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';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/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';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/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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"}

package/dist/components/SmartTextInput/parser/method-chain/types.d.mts

@@ -1,105 +1,2 @@
-//#region components/SmartTextInput/parser/method-chain/types.d.ts
-declare enum ASTNodeType {
-  Chain = "chain",
-  Identifier = "identifier",
-  Function = "function",
-  CustomFunction = "custom_function",
-  String = "string",
-  Number = "number",
-  Array = "array",
-  ParenOpen = "paren_open",
-  ParenClose = "paren_close",
-  Error = "error",
-  Dot = "dot"
-}
-declare enum ErrorKind {
-  InvalidMethodChainSyntax = "invalidMethodChainSyntax",
-  EmptyFunctionParam = "emptyFunctionParam",
-  TrailingFunctionComma = "trailingFunctionComma",
-  UnclosedFunctionParen = "unclosedFunctionParen",
-  TrailingDot = "trailingDot"
-}
-type ASTMethodChainNode = ASTIdentifierNode | ASTFunctionNode | ASTCustomFunctionNode;
-declare const isASTMethodChainNode: (node: {
-  type: string;
-}) => node is ASTMethodChainNode;
-declare const isAnyASTFunctionNode: (node: {
-  type: string;
-}) => node is ASTFunctionNode | ASTCustomFunctionNode;
-declare const isASTCustomFunctionNode: (node: {
-  type: string;
-}) => node is ASTCustomFunctionNode;
-type ASTFunctionParamType = ASTChain | ASTStringNode | ASTNumberNode | ASTArrayNode | ASTParenOpenNode | ASTParenCloseNode | ASTErrorNode;
-declare const isRealASTFunctionParamType: (node: {
-  type: string;
-}) => node is ASTChain | ASTStringNode | ASTNumberNode | ASTArrayNode;
-interface ASTChain {
-  type: ASTNodeType.Chain;
-  children: (ASTMethodChainNode | ASTDotNode | ASTErrorNode)[];
-  start: number;
-  end: number;
-}
-interface ASTStringNode {
-  type: ASTNodeType.String;
-  value: string;
-  start: number;
-  end: number;
-}
-interface ASTNumberNode {
-  type: ASTNodeType.Number;
-  value: number;
-  start: number;
-  end: number;
-}
-interface ASTArrayNode {
-  type: ASTNodeType.Array;
-  children: (ASTStringNode | ASTNumberNode)[];
-  start: number;
-  end: number;
-}
-interface ASTIdentifierNode {
-  type: ASTNodeType.Identifier;
-  name: string;
-  prefix?: string;
-  start: number;
-  end: number;
-}
-interface ASTErrorNode {
-  type: ASTNodeType.Error;
-  start: number;
-  end: number;
-  wip?: boolean;
-  kind?: 'invalidMethodChainSyntax' | 'emptyFunctionParam' | 'trailingFunctionComma' | 'unclosedFunctionParen' | 'trailingDot' | 'trailingAtSign';
-}
-interface ASTDotNode {
-  type: ASTNodeType.Dot;
-  start: number;
-  end: number;
-}
-interface ASTParenOpenNode {
-  type: ASTNodeType.ParenOpen;
-  start: number;
-  end: number;
-}
-interface ASTParenCloseNode {
-  type: ASTNodeType.ParenClose;
-  start: number;
-  end: number;
-}
-interface ASTFunctionNode {
-  type: ASTNodeType.Function;
-  name: string;
-  children: ASTFunctionParamType[];
-  start: number;
-  end: number;
-}
-interface ASTCustomFunctionNode {
-  type: ASTNodeType.CustomFunction;
-  name: string;
-  children: ASTFunctionParamType[];
-  start: number;
-  end: number;
-}
-//#endregion
-export { ASTArrayNode, ASTChain, ASTCustomFunctionNode, ASTDotNode, ASTErrorNode, ASTFunctionNode, ASTFunctionParamType, ASTIdentifierNode, ASTMethodChainNode, ASTNodeType, ASTNumberNode, ASTParenCloseNode, ASTParenOpenNode, ASTStringNode, ErrorKind, isASTCustomFunctionNode, isASTMethodChainNode, isAnyASTFunctionNode, isRealASTFunctionParamType };
-//# sourceMappingURL=types.d.mts.map
+import { _ as isASTMethodChainNode, a as ASTErrorNode, c as ASTIdentifierNode, d as ASTNumberNode, f as ASTParenCloseNode, g as isASTCustomFunctionNode, h as ErrorKind, i as ASTDotNode, l as ASTMethodChainNode, m as ASTStringNode, n as ASTChain, o as ASTFunctionNode, p as ASTParenOpenNode, r as ASTCustomFunctionNode, s as ASTFunctionParamType, t as ASTArrayNode, u as ASTNodeType, v as isAnyASTFunctionNode, y as isRealASTFunctionParamType } from "../../../../types-BGMmkUpy.mjs";
+export { ASTArrayNode, ASTChain, ASTCustomFunctionNode, ASTDotNode, ASTErrorNode, ASTFunctionNode, ASTFunctionParamType, ASTIdentifierNode, ASTMethodChainNode, ASTNodeType, ASTNumberNode, ASTParenCloseNode, ASTParenOpenNode, ASTStringNode, ErrorKind, isASTCustomFunctionNode, isASTMethodChainNode, isAnyASTFunctionNode, isRealASTFunctionParamType };

package/dist/components/SmartTextInput/parser/smart-text/types.d.mts

@@ -1,4 +1,4 @@
-import { ASTChain, ASTErrorNode, ASTMethodChainNode, ASTNodeType, ASTParenCloseNode, ASTParenOpenNode } from "../method-chain/types.mjs";
+import { a as ASTErrorNode, f as ASTParenCloseNode, l as ASTMethodChainNode, n as ASTChain, p as ASTParenOpenNode, u as ASTNodeType } from "../../../../types-BGMmkUpy.mjs";
 
 //#region components/SmartTextInput/parser/smart-text/types.d.ts
 type ErrorKind = NonNullable<ASTErrorNode['kind']> | 'unclosedHandlebars' | 'emptyHandlebars' | 'invalidHandlebarsContent' | 'interpolationInDataPath';

package/dist/components/Spinner/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../Spinner-DplDSBqf.mjs";
+import { t as Spinner } from "../../Spinner-BlAg8_OX.mjs";
 export { Spinner, Spinner as default };

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

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-RVptVTVi.mjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-CYqjBXe8.mjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/components/Stack/index.mjs

@@ -1,2 +1,2 @@
-import { n as Stack, t as HStack } from "../../Stack-ChsImaEY.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bkn0TUDe.mjs";
 export { HStack, Stack, Stack as default };