@persona/design-system 0.10.10 → 0.10.11

package/dist/{operators-BHxKZcpD.d.mts → operators-B8_k3r69.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, l as FilterOperator, o as FilterField, r as DateRangeFilterValue, u as FilterRule } from "./types-DLnCkvTt.mjs";
+import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, l as FilterOperator, o as FilterField, r as DateRangeFilterValue, u as FilterRule } from "./types-BJqmRXFV.mjs";
 import { i as CommonStrings } from "./strings-DQZIO-n7.mjs";
 //#region src/components/DataTable/TableControls/FiltersV2/operators.d.ts
 type OperatorLabelKey = 'operatorIs' | 'operatorIsNot' | 'operatorContains' | 'operatorDoesNotContain' | 'operatorIsEmpty' | 'operatorIsNotEmpty' | 'operatorIsTrue' | 'operatorIsFalse' | 'operatorBefore' | 'operatorAfter' | 'operatorBetween' | 'operatorIsAnyOf' | 'operatorIsNoneOf' | 'operatorGreaterThan' | 'operatorGreaterThanOrEqual' | 'operatorLessThan' | 'operatorLessThanOrEqual' | 'operatorIsEqualTo' | 'operatorIsGreaterThan' | 'operatorIsLessThan';
@@ -46,6 +46,13 @@ declare function getOperatorsForField(field: Pick<FilterField, 'type' | 'allowed
 declare function getDefaultOperatorForType(type: FilterFieldType): FilterOperator;
 declare function getConditionOperator(field: Pick<FilterField, 'condition'> | undefined, operator: FilterOperator): FilterConditionOperator | undefined;
 declare function isValuelessOperator(operator: FilterOperator, field?: Pick<FilterField, 'condition'>): boolean;
+/**
+ * The error message a condition operator's `validate` returns for `value`, or
+ * `undefined` when the value is accepted, empty, or the operator has no
+ * validator. Value controls show it below the input; a rule with a message
+ * is incomplete (see `hasCompleteConditionValue`).
+ */
+declare function getConditionValueError(field: Pick<FilterField, 'condition'> | undefined, operator: FilterOperator, value: FilterRuleValue): string | undefined;
 declare function hasCompleteConditionValue(rule: FilterRule, field: FilterField): boolean;
 /**
  * Whether a rule's value is a date range: a range operator, or a field that is
@@ -108,5 +115,5 @@ declare function emptyValueForRule(field: Pick<FilterField, 'type' | 'condition'
  */
 declare function reconcileValueForOperator(field: Pick<FilterField, 'type' | 'condition'>, nextOperator: FilterOperator, previousOperator: FilterOperator, value: FilterRuleValue): FilterRuleValue;
 //#endregion
-export { isNumericComparisonOperator as _, emptyValueForRule as a, reconcileValueForOperator as b, getDefaultOperatorForType as c, getOperatorsForType as d, hasCompleteConditionValue as f, isNumericComparison as g, isMinutePrecisionDate as h, emptyValueForFieldType as i, getOperatorLabel as l, isCompleteNumericComparisonValue as m, NumericComparisonOperator as n, fieldHasMultipleOperators as o, isCompleteDateRange as p, carriesDateRange as r, getConditionOperator as s, NUMERIC_COMPARISON_OPERATORS as t, getOperatorsForField as u, isRangeOperator as v, withValue as x, isValuelessOperator as y };
-//# sourceMappingURL=operators-BHxKZcpD.d.mts.map
+export { withValue as S, isNumericComparison as _, emptyValueForRule as a, isValuelessOperator as b, getConditionValueError as c, getOperatorsForField as d, getOperatorsForType as f, isMinutePrecisionDate as g, isCompleteNumericComparisonValue as h, emptyValueForFieldType as i, getDefaultOperatorForType as l, isCompleteDateRange as m, NumericComparisonOperator as n, fieldHasMultipleOperators as o, hasCompleteConditionValue as p, carriesDateRange as r, getConditionOperator as s, NUMERIC_COMPARISON_OPERATORS as t, getOperatorLabel as u, isNumericComparisonOperator as v, reconcileValueForOperator as x, isRangeOperator as y };
+//# sourceMappingURL=operators-B8_k3r69.d.mts.map

package/dist/operators.d.mts

@@ -1,2 +1,2 @@
-import { _ as isNumericComparisonOperator, a as emptyValueForRule, b as reconcileValueForOperator, c as getDefaultOperatorForType, d as getOperatorsForType, f as hasCompleteConditionValue, g as isNumericComparison, h as isMinutePrecisionDate, i as emptyValueForFieldType, l as getOperatorLabel, m as isCompleteNumericComparisonValue, n as NumericComparisonOperator, o as fieldHasMultipleOperators, p as isCompleteDateRange, r as carriesDateRange, s as getConditionOperator, t as NUMERIC_COMPARISON_OPERATORS, u as getOperatorsForField, v as isRangeOperator, x as withValue, y as isValuelessOperator } from "./operators-BHxKZcpD.mjs";
-export { NUMERIC_COMPARISON_OPERATORS, NumericComparisonOperator, carriesDateRange, emptyValueForFieldType, emptyValueForRule, fieldHasMultipleOperators, getConditionOperator, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, hasCompleteConditionValue, isCompleteDateRange, isCompleteNumericComparisonValue, isMinutePrecisionDate, isNumericComparison, isNumericComparisonOperator, isRangeOperator, isValuelessOperator, reconcileValueForOperator, withValue };
+import { S as withValue, _ as isNumericComparison, a as emptyValueForRule, b as isValuelessOperator, c as getConditionValueError, d as getOperatorsForField, f as getOperatorsForType, g as isMinutePrecisionDate, h as isCompleteNumericComparisonValue, i as emptyValueForFieldType, l as getDefaultOperatorForType, m as isCompleteDateRange, n as NumericComparisonOperator, o as fieldHasMultipleOperators, p as hasCompleteConditionValue, r as carriesDateRange, s as getConditionOperator, t as NUMERIC_COMPARISON_OPERATORS, u as getOperatorLabel, v as isNumericComparisonOperator, x as reconcileValueForOperator, y as isRangeOperator } from "./operators-B8_k3r69.mjs";
+export { NUMERIC_COMPARISON_OPERATORS, NumericComparisonOperator, carriesDateRange, emptyValueForFieldType, emptyValueForRule, fieldHasMultipleOperators, getConditionOperator, getConditionValueError, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, hasCompleteConditionValue, isCompleteDateRange, isCompleteNumericComparisonValue, isMinutePrecisionDate, isNumericComparison, isNumericComparisonOperator, isRangeOperator, isValuelessOperator, reconcileValueForOperator, withValue };

package/dist/overlay-motion.d.mts

@@ -0,0 +1,7 @@
+import { r as Rule } from "./index-CLAjbq8g.mjs";
+
+//#region src/lint/rules/overlay-motion.d.ts
+declare const overlayMotion: Rule;
+//#endregion
+export { overlayMotion };
+//# sourceMappingURL=overlay-motion.d.mts.map

package/dist/patterns/CardGrouping/index.mjs

@@ -1,19 +1,19 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
+import "../../variables/transitions.mjs";
 import { HeadlessAriaButton } from "../../lib/HeadlessAriaButton.mjs";
 import { n as RouterLink } from "../../router-BxmA940v.mjs";
 import { TruncatedText } from "../../lib/TruncatedText.mjs";
 import { i as Paragraph, n as Heading$1 } from "../../Text-D0vEReED.mjs";
-import "../../variables/transitions.mjs";
-import { a as Tooltip } from "../../Tooltip-YViXzMdm.mjs";
-import { focusStyle } from "../../mixins/focus.mjs";
+import { a as Tooltip } from "../../Tooltip-C2VB8I6y.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button$1, t as IconButton } from "../../IconButton-DxHB2g80.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-c8XK2Lr4.mjs";
-import { t as DropdownButton } from "../../DropdownButton-DpLG-cIj.mjs";
-import { n as SingleColumnLayout } from "../../PageLayout-DjtGrvJa.mjs";
-import { cloneElement } from "react";
+import { n as Button$1, t as IconButton } from "../../IconButton-kSjnfhWt.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-jJSHQaih.mjs";
+import { t as DropdownButton } from "../../DropdownButton-Dp-MZ5tA.mjs";
+import { n as SingleColumnLayout } from "../../PageLayout-DgEGcZgB.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
+import { cloneElement } from "react";
 import { Disclosure, DisclosurePanel } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, MoreIcon } from "@persona/icons";
@@ -204,7 +204,7 @@ const Chevron = styled.span`
   color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
 
   svg {
-    transition: transform ${"150ms"} ease-out;
+    transition: transform ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
     transform: rotate(${({ $expanded }) => $expanded ? "0deg" : "-90deg"});
   }
 `;

package/dist/patterns/CardGrouping/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Heading","Button","DropdownMenu"],"sources":["../../../src/patterns/CardGrouping/CardGrouping.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\n\nimport Button, { IconButton } from '#src/components/Button';\nimport DropdownButton from '#src/components/DropdownButton';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport { HStack, Stack } from '#src/components/Stack';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport Tooltip from '#src/components/Tooltip';\nimport { HeadlessAriaButton } from '#src/lib/HeadlessAriaButton';\nimport { RouterLink } from '#src/lib/router';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { TruncatedText } from '#src/lib/TruncatedText';\nimport { focusStyle } from '#src/mixins/focus';\nimport type { IconAction, TextAction } from '#src/types/Action';\nimport { TransitionDuration } from '#src/variables/transitions';\n\nimport { SingleColumnLayout, type SingleColumnLayoutProps } from '../PageLayout';\n\ntype HeaderAction = IconAction | TextAction;\n\nconst isIconAction = (action: HeaderAction): action is IconAction => 'icon' in action;\n\nconst splitGroupActions = (actions: HeaderAction[]) => {\n  if (actions.length <= 1) {\n    return { inlineActions: actions, overflowActions: [] as HeaderAction[] };\n  }\n\n  const primaryIndex = actions.findIndex(\n    (action) => !isIconAction(action) && action.variant === 'primary',\n  );\n  const inlineIndex = primaryIndex === -1 ? 0 : primaryIndex;\n\n  return {\n    inlineActions: [actions[inlineIndex]],\n    overflowActions: actions.filter((_, index) => index !== inlineIndex),\n  };\n};\n\nconst actionKey = (action: HeaderAction, index: number) =>\n  isIconAction(action)\n    ? (action.id ?? action.ariaLabel ?? `action-${index}`)\n    : (action.id ?? action.label ?? `action-${index}`);\n\nconst actionLabel = (action: HeaderAction) =>\n  isIconAction(action) ? action.ariaLabel : action.label;\n\nconst overflowLinkProps = (action: HeaderAction) => {\n  if (action.disabled || action.to == null) {\n    return {};\n  }\n\n  if (typeof action.to === 'string' && action.to.startsWith('https://')) {\n    return {\n      as: 'a' as const,\n      href: action.to,\n      target: '_blank' as const,\n      rel: 'noreferrer',\n    };\n  }\n\n  return { as: RouterLink, to: action.to };\n};\n\nconst TitleBlock = styled(Stack)`\n  min-width: 0;\n  flex: 1;\n\n  > * {\n    min-width: 0;\n  }\n`;\n\nconst TitleHeading = styled(Heading)`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n`;\n\nconst TitleText = styled.span`\n  min-width: 0;\n`;\n\nconst Actions = styled(HStack)`\n  flex-shrink: 0;\n`;\n\nconst Adornment = styled.span`\n  display: flex;\n  flex-shrink: 0;\n  max-width: 180px;\n`;\n\nconst ActionRow = ({\n  actions,\n  size,\n  collapseToPrimary = false,\n}: {\n  actions: HeaderAction[];\n  size: 'sm' | 'md';\n  collapseToPrimary?: boolean;\n}) => {\n  const visibleActions = actions.filter((action) => !action.hidden);\n  const { inlineActions, overflowActions } = collapseToPrimary\n    ? splitGroupActions(visibleActions)\n    : { inlineActions: visibleActions, overflowActions: [] as HeaderAction[] };\n\n  const buttons = inlineActions.map((action, i) => {\n    const key = actionKey(action, i);\n\n    const button = isIconAction(action) ? (\n      <IconButton\n        id={action.id}\n        key={key}\n        to={action.to}\n        size={size}\n        disabled={action.disabled}\n        aria-label={action.ariaLabel}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.icon}\n      </IconButton>\n    ) : (\n      <Button\n        id={action.id}\n        key={key}\n        to={action.to}\n        aria-label={action.ariaLabel}\n        disabled={action.disabled}\n        variant={action.variant ?? 'basic'}\n        size={size}\n        width='auto'\n        onSecondaryBackground={(action.variant ?? 'basic') === 'basic'}\n        prefixIcon={action.prefixIcon}\n        suffixIcon={action.suffixIcon}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.label}\n      </Button>\n    );\n\n    return action.tooltip ? (\n      <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n        {action.tooltip}\n      </Tooltip>\n    ) : (\n      button\n    );\n  });\n\n  return (\n    <Actions spacing={Spacing[2]}>\n      {buttons}\n      {overflowActions.length > 0 && (\n        <DropdownButton\n          variant='basic'\n          size={size}\n          width='icon'\n          onSecondaryBackground\n          suffixIcon={undefined}\n          aria-label='More actions'\n          menuProps={{ portal: true }}\n          menuItems={overflowActions.map((action, index) => (\n            <DropdownMenu.Item\n              id={action.id ?? actionLabel(action)}\n              key={actionKey(action, index)}\n              disabled={action.disabled}\n              variant={!isIconAction(action) && action.variant === 'danger' ? 'danger' : undefined}\n              {...overflowLinkProps(action)}\n              onClick={(event) => {\n                event.stopPropagation();\n                return action.onClick?.(event);\n              }}\n            >\n              {actionLabel(action)}\n            </DropdownMenu.Item>\n          ))}\n        >\n          <MoreIcon />\n        </DropdownButton>\n      )}\n    </Actions>\n  );\n};\n\nconst onSecondarySurface = (node: ReactElement) =>\n  cloneElement(node as ReactElement<{ onSecondaryBackground?: boolean }>, {\n    onSecondaryBackground: true,\n  });\n\nconst Controls = styled.div`\n  margin-top: ${Spacing[2]};\n\n  > * {\n    margin-bottom: 0;\n  }\n`;\n\nconst ListHeader = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n}: {\n  title: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  controls?: ReactNode;\n}) => (\n  <HStack align='flex-start' justify='space-between' spacing={Spacing[4]} fullWidth>\n    <TitleBlock spacing={Spacing[1]}>\n      <TitleHeading forwardedAs='h2' size='xsm'>\n        <TitleText>\n          <TruncatedText>{title}</TruncatedText>\n        </TitleText>\n        {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n        {status && <Adornment>{status}</Adornment>}\n      </TitleHeading>\n      {description && <Paragraph size='md'>{description}</Paragraph>}\n      {controls && <Controls>{controls}</Controls>}\n    </TitleBlock>\n    {actions && actions.length > 0 && <ActionRow actions={actions} size='md' />}\n  </HStack>\n);\n\nconst GroupDisclosure = styled(Disclosure)`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst GroupHeader = styled(HStack)`\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: ${Spacing[9]};\n`;\n\nconst Trigger = styled(HeadlessAriaButton)`\n  min-width: 0;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  text-align: left;\n\n  &:focus-visible {\n    ${focusStyle}\n  }\n`;\n\nconst Chevron = styled.span<{ $expanded: boolean }>`\n  display: flex;\n  flex-shrink: 0;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n\n  svg {\n    transition: transform ${TransitionDuration.Faster} ease-out;\n    transform: rotate(${({ $expanded }) => ($expanded ? '0deg' : '-90deg')});\n  }\n`;\n\nconst GroupList = styled(Stack)`\n  && {\n    gap: 0;\n  }\n\n  > *:not(:last-child) {\n    border-bottom: 1px solid\n      ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  }\n`;\n\nconst GroupCards = styled(Stack)`\n  padding-top: ${Spacing[4]};\n  padding-bottom: ${Spacing[4]};\n`;\n\nexport type CardGroupingGroup = {\n  title: string;\n  sticker?: ReactElement;\n  actions?: HeaderAction[];\n  /** @defaultValue false */\n  defaultExpanded?: boolean;\n  children: ReactNode;\n};\n\ntype CardGroupingHeaderProps = Omit<SingleColumnLayoutProps, 'main'> & {\n  title?: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  /** Extra controls under the description, inside the list title group. */\n  controls?: ReactNode;\n};\n\nexport type CardGroupingProps = CardGroupingHeaderProps & {\n  groups: CardGroupingGroup[];\n};\n\nconst GroupRow = ({\n  title,\n  sticker,\n  actions,\n  defaultExpanded = false,\n  children,\n}: CardGroupingGroup) => (\n  <GroupDisclosure defaultExpanded={defaultExpanded}>\n    {({ isExpanded }) => (\n      <>\n        <GroupHeader align='center' justify='space-between' spacing={Spacing[2]}>\n          <Trigger slot='trigger' aria-label={title}>\n            <Chevron $expanded={isExpanded} aria-hidden>\n              <ChevronDownIcon />\n            </Chevron>\n            <TitleBlock spacing={Spacing[1]}>\n              <TitleHeading forwardedAs='h3' size='xsm'>\n                <TitleText>\n                  <TruncatedText>{title}</TruncatedText>\n                </TitleText>\n                {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n              </TitleHeading>\n            </TitleBlock>\n          </Trigger>\n          {actions && actions.length > 0 && (\n            <ActionRow actions={actions} size='sm' collapseToPrimary />\n          )}\n        </GroupHeader>\n        <DisclosurePanel>\n          <GroupCards spacing={Spacing[4]}>{children}</GroupCards>\n        </DisclosurePanel>\n      </>\n    )}\n  </GroupDisclosure>\n);\n\nexport const CardGrouping = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n  groups,\n  ...chrome\n}: CardGroupingProps) => (\n  <SingleColumnLayout\n    {...chrome}\n    main={\n      <Stack spacing={Spacing[4]} fullWidth>\n        {title ? (\n          <ListHeader\n            title={title}\n            description={description}\n            sticker={sticker}\n            status={status}\n            actions={actions}\n            controls={controls}\n          />\n        ) : (\n          description && <Paragraph size='md'>{description}</Paragraph>\n        )}\n        <GroupList fullWidth>\n          {groups.map((group, index) => (\n            <GroupRow key={`${group.title}-${index}`} {...group} />\n          ))}\n        </GroupList>\n      </Stack>\n    }\n  />\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["Heading","Button","DropdownMenu"],"sources":["../../../src/patterns/CardGrouping/CardGrouping.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\n\nimport Button, { IconButton } from '#src/components/Button';\nimport DropdownButton from '#src/components/DropdownButton';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport { HStack, Stack } from '#src/components/Stack';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport Tooltip from '#src/components/Tooltip';\nimport { HeadlessAriaButton } from '#src/lib/HeadlessAriaButton';\nimport { RouterLink } from '#src/lib/router';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { TruncatedText } from '#src/lib/TruncatedText';\nimport { focusStyle } from '#src/mixins/focus';\nimport type { IconAction, TextAction } from '#src/types/Action';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nimport { SingleColumnLayout, type SingleColumnLayoutProps } from '../PageLayout';\n\ntype HeaderAction = IconAction | TextAction;\n\nconst isIconAction = (action: HeaderAction): action is IconAction => 'icon' in action;\n\nconst splitGroupActions = (actions: HeaderAction[]) => {\n  if (actions.length <= 1) {\n    return { inlineActions: actions, overflowActions: [] as HeaderAction[] };\n  }\n\n  const primaryIndex = actions.findIndex(\n    (action) => !isIconAction(action) && action.variant === 'primary',\n  );\n  const inlineIndex = primaryIndex === -1 ? 0 : primaryIndex;\n\n  return {\n    inlineActions: [actions[inlineIndex]],\n    overflowActions: actions.filter((_, index) => index !== inlineIndex),\n  };\n};\n\nconst actionKey = (action: HeaderAction, index: number) =>\n  isIconAction(action)\n    ? (action.id ?? action.ariaLabel ?? `action-${index}`)\n    : (action.id ?? action.label ?? `action-${index}`);\n\nconst actionLabel = (action: HeaderAction) =>\n  isIconAction(action) ? action.ariaLabel : action.label;\n\nconst overflowLinkProps = (action: HeaderAction) => {\n  if (action.disabled || action.to == null) {\n    return {};\n  }\n\n  if (typeof action.to === 'string' && action.to.startsWith('https://')) {\n    return {\n      as: 'a' as const,\n      href: action.to,\n      target: '_blank' as const,\n      rel: 'noreferrer',\n    };\n  }\n\n  return { as: RouterLink, to: action.to };\n};\n\nconst TitleBlock = styled(Stack)`\n  min-width: 0;\n  flex: 1;\n\n  > * {\n    min-width: 0;\n  }\n`;\n\nconst TitleHeading = styled(Heading)`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n`;\n\nconst TitleText = styled.span`\n  min-width: 0;\n`;\n\nconst Actions = styled(HStack)`\n  flex-shrink: 0;\n`;\n\nconst Adornment = styled.span`\n  display: flex;\n  flex-shrink: 0;\n  max-width: 180px;\n`;\n\nconst ActionRow = ({\n  actions,\n  size,\n  collapseToPrimary = false,\n}: {\n  actions: HeaderAction[];\n  size: 'sm' | 'md';\n  collapseToPrimary?: boolean;\n}) => {\n  const visibleActions = actions.filter((action) => !action.hidden);\n  const { inlineActions, overflowActions } = collapseToPrimary\n    ? splitGroupActions(visibleActions)\n    : { inlineActions: visibleActions, overflowActions: [] as HeaderAction[] };\n\n  const buttons = inlineActions.map((action, i) => {\n    const key = actionKey(action, i);\n\n    const button = isIconAction(action) ? (\n      <IconButton\n        id={action.id}\n        key={key}\n        to={action.to}\n        size={size}\n        disabled={action.disabled}\n        aria-label={action.ariaLabel}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.icon}\n      </IconButton>\n    ) : (\n      <Button\n        id={action.id}\n        key={key}\n        to={action.to}\n        aria-label={action.ariaLabel}\n        disabled={action.disabled}\n        variant={action.variant ?? 'basic'}\n        size={size}\n        width='auto'\n        onSecondaryBackground={(action.variant ?? 'basic') === 'basic'}\n        prefixIcon={action.prefixIcon}\n        suffixIcon={action.suffixIcon}\n        onClick={(event) => {\n          event.stopPropagation();\n          return action.onClick?.(event);\n        }}\n      >\n        {action.label}\n      </Button>\n    );\n\n    return action.tooltip ? (\n      <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n        {action.tooltip}\n      </Tooltip>\n    ) : (\n      button\n    );\n  });\n\n  return (\n    <Actions spacing={Spacing[2]}>\n      {buttons}\n      {overflowActions.length > 0 && (\n        <DropdownButton\n          variant='basic'\n          size={size}\n          width='icon'\n          onSecondaryBackground\n          suffixIcon={undefined}\n          aria-label='More actions'\n          menuProps={{ portal: true }}\n          menuItems={overflowActions.map((action, index) => (\n            <DropdownMenu.Item\n              id={action.id ?? actionLabel(action)}\n              key={actionKey(action, index)}\n              disabled={action.disabled}\n              variant={!isIconAction(action) && action.variant === 'danger' ? 'danger' : undefined}\n              {...overflowLinkProps(action)}\n              onClick={(event) => {\n                event.stopPropagation();\n                return action.onClick?.(event);\n              }}\n            >\n              {actionLabel(action)}\n            </DropdownMenu.Item>\n          ))}\n        >\n          <MoreIcon />\n        </DropdownButton>\n      )}\n    </Actions>\n  );\n};\n\nconst onSecondarySurface = (node: ReactElement) =>\n  cloneElement(node as ReactElement<{ onSecondaryBackground?: boolean }>, {\n    onSecondaryBackground: true,\n  });\n\nconst Controls = styled.div`\n  margin-top: ${Spacing[2]};\n\n  > * {\n    margin-bottom: 0;\n  }\n`;\n\nconst ListHeader = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n}: {\n  title: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  controls?: ReactNode;\n}) => (\n  <HStack align='flex-start' justify='space-between' spacing={Spacing[4]} fullWidth>\n    <TitleBlock spacing={Spacing[1]}>\n      <TitleHeading forwardedAs='h2' size='xsm'>\n        <TitleText>\n          <TruncatedText>{title}</TruncatedText>\n        </TitleText>\n        {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n        {status && <Adornment>{status}</Adornment>}\n      </TitleHeading>\n      {description && <Paragraph size='md'>{description}</Paragraph>}\n      {controls && <Controls>{controls}</Controls>}\n    </TitleBlock>\n    {actions && actions.length > 0 && <ActionRow actions={actions} size='md' />}\n  </HStack>\n);\n\nconst GroupDisclosure = styled(Disclosure)`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst GroupHeader = styled(HStack)`\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: ${Spacing[9]};\n`;\n\nconst Trigger = styled(HeadlessAriaButton)`\n  min-width: 0;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  text-align: left;\n\n  &:focus-visible {\n    ${focusStyle}\n  }\n`;\n\nconst Chevron = styled.span<{ $expanded: boolean }>`\n  display: flex;\n  flex-shrink: 0;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n\n  svg {\n    transition: transform ${TransitionDuration.Fast} ${TransitionEasing.Move};\n    transform: rotate(${({ $expanded }) => ($expanded ? '0deg' : '-90deg')});\n  }\n`;\n\nconst GroupList = styled(Stack)`\n  && {\n    gap: 0;\n  }\n\n  > *:not(:last-child) {\n    border-bottom: 1px solid\n      ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  }\n`;\n\nconst GroupCards = styled(Stack)`\n  padding-top: ${Spacing[4]};\n  padding-bottom: ${Spacing[4]};\n`;\n\nexport type CardGroupingGroup = {\n  title: string;\n  sticker?: ReactElement;\n  actions?: HeaderAction[];\n  /** @defaultValue false */\n  defaultExpanded?: boolean;\n  children: ReactNode;\n};\n\ntype CardGroupingHeaderProps = Omit<SingleColumnLayoutProps, 'main'> & {\n  title?: string;\n  description?: string;\n  sticker?: ReactElement;\n  status?: ReactElement;\n  actions?: HeaderAction[];\n  /** Extra controls under the description, inside the list title group. */\n  controls?: ReactNode;\n};\n\nexport type CardGroupingProps = CardGroupingHeaderProps & {\n  groups: CardGroupingGroup[];\n};\n\nconst GroupRow = ({\n  title,\n  sticker,\n  actions,\n  defaultExpanded = false,\n  children,\n}: CardGroupingGroup) => (\n  <GroupDisclosure defaultExpanded={defaultExpanded}>\n    {({ isExpanded }) => (\n      <>\n        <GroupHeader align='center' justify='space-between' spacing={Spacing[2]}>\n          <Trigger slot='trigger' aria-label={title}>\n            <Chevron $expanded={isExpanded} aria-hidden>\n              <ChevronDownIcon />\n            </Chevron>\n            <TitleBlock spacing={Spacing[1]}>\n              <TitleHeading forwardedAs='h3' size='xsm'>\n                <TitleText>\n                  <TruncatedText>{title}</TruncatedText>\n                </TitleText>\n                {sticker && <Adornment>{onSecondarySurface(sticker)}</Adornment>}\n              </TitleHeading>\n            </TitleBlock>\n          </Trigger>\n          {actions && actions.length > 0 && (\n            <ActionRow actions={actions} size='sm' collapseToPrimary />\n          )}\n        </GroupHeader>\n        <DisclosurePanel>\n          <GroupCards spacing={Spacing[4]}>{children}</GroupCards>\n        </DisclosurePanel>\n      </>\n    )}\n  </GroupDisclosure>\n);\n\nexport const CardGrouping = ({\n  title,\n  description,\n  sticker,\n  status,\n  actions,\n  controls,\n  groups,\n  ...chrome\n}: CardGroupingProps) => (\n  <SingleColumnLayout\n    {...chrome}\n    main={\n      <Stack spacing={Spacing[4]} fullWidth>\n        {title ? (\n          <ListHeader\n            title={title}\n            description={description}\n            sticker={sticker}\n            status={status}\n            actions={actions}\n            controls={controls}\n          />\n        ) : (\n          description && <Paragraph size='md'>{description}</Paragraph>\n        )}\n        <GroupList fullWidth>\n          {groups.map((group, index) => (\n            <GroupRow key={`${group.title}-${index}`} {...group} />\n          ))}\n        </GroupList>\n      </Stack>\n    }\n  />\n);\n"],"mappings":"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"}

package/dist/patterns/IndexTableLayout/index.mjs

@@ -1,7 +1,7 @@
 import { t as Card_default } from "../../Card-DuQHyroh.mjs";
-import { t as DataTable } from "../../DataTable-CIZJ1vO8.mjs";
-import { t as PageHeader } from "../../PageHeader-7_Hf6rHl.mjs";
-import { a as Section, i as Container } from "../../PageLayout-DjtGrvJa.mjs";
+import { t as DataTable } from "../../DataTable-DiwzhNMt.mjs";
+import { t as PageHeader } from "../../PageHeader-bhQTjuZF.mjs";
+import { a as Section, i as Container } from "../../PageLayout-DgEGcZgB.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/IndexTableLayout/useColumnConfiguration.ts

package/dist/patterns/LayoutLoadingShimmer/index.mjs

@@ -1,9 +1,9 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
-import { t as Card_default } from "../../CardV2-CrV6eEQb.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-DPi4Dt5H.mjs";
-import { n as PageHeaderContainer } from "../../PageHeader-7_Hf6rHl.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-CpfKTSUs.mjs";
+import { t as Card_default } from "../../CardV2-DCoDfEvr.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-SMJAWqoe.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-bhQTjuZF.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/containers.tsx

package/dist/patterns/LayoutLoadingSpinner/index.mjs

@@ -1,4 +1,5 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
+import "../../variables/transitions.mjs";
 import { fadeIn, rotate } from "../../variables/keyframes.mjs";
 import { Color } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +10,8 @@ const Container = styled.div`
   justify-content: center;
   height: 100%;
   width: 100%;
-  animation: ${fadeIn} 1s;
+  /* Waits 500ms so a fast load never flashes a spinner. */
+  animation: ${fadeIn} ${"200ms"} ${"cubic-bezier(0, 0, 0.2, 1)"} 500ms backwards;
 `;
 const VisuallyHidden = styled.span`
   position: absolute;

package/dist/patterns/LayoutLoadingSpinner/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/patterns/LayoutLoadingSpinner/LayoutLoadingSpinner.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { fadeIn, rotate } from '#src/variables/keyframes';\n\nconst Container = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  animation: ${fadeIn} 1s;\n`;\n\nconst VisuallyHidden = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n`;\n\nconst Ring = styled.svg`\n  display: block;\n  border-radius: 50%;\n  animation: ${rotate} 0.9s linear infinite;\n`;\n\nconst RingStroke = styled.circle`\n  stroke: ${Color.PrimaryPurple};\n  stroke-dasharray: 166;\n  stroke-dashoffset: 110;\n  stroke-linecap: round;\n`;\n\n/**\n * Centered 120px loading ring that fills its container. Use as the loading state for a page or\n * embedded app when no layout-specific shimmer exists.\n */\nexport const LayoutLoadingSpinner = () => (\n  <Container role='status' aria-label='loading spinner'>\n    <VisuallyHidden>Loading...</VisuallyHidden>\n    <Ring viewBox='0 0 52 52' width={120} height={120} aria-hidden='true'>\n      <RingStroke cx='26' cy='26' r='25' fill='none' />\n    </Ring>\n  </Container>\n);\n"],"mappings":";;;;;AAMA,MAAM,YAAY,OAAO,GAAG;;;;;;eAMb,OAAO;;AAGtB,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;AASlC,MAAM,OAAO,OAAO,GAAG;;;eAGR,OAAO;;AAGtB,MAAM,aAAa,OAAO,MAAM;YACpB,MAAM,cAAc;;;;;;;;;AAUhC,MAAa,6BACX,qBAAC,WAAD;CAAW,MAAK;CAAS,cAAW;WAApC,CACE,oBAAC,gBAAD,EAAA,UAAgB,cAA2B,CAAA,EAC3C,oBAAC,MAAD;EAAM,SAAQ;EAAY,OAAO;EAAK,QAAQ;EAAK,eAAY;YAC7D,oBAAC,YAAD;GAAY,IAAG;GAAK,IAAG;GAAK,GAAE;GAAK,MAAK;GAAS,CAAA;EAC5C,CAAA,CACG"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/patterns/LayoutLoadingSpinner/LayoutLoadingSpinner.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { fadeIn, rotate } from '#src/variables/keyframes';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nconst Container = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  /* Waits 500ms so a fast load never flashes a spinner. */\n  animation: ${fadeIn} ${TransitionDuration.Fast} ${TransitionEasing.Enter} 500ms backwards;\n`;\n\nconst VisuallyHidden = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n`;\n\nconst Ring = styled.svg`\n  display: block;\n  border-radius: 50%;\n  animation: ${rotate} 0.9s linear infinite;\n`;\n\nconst RingStroke = styled.circle`\n  stroke: ${Color.PrimaryPurple};\n  stroke-dasharray: 166;\n  stroke-dashoffset: 110;\n  stroke-linecap: round;\n`;\n\n/**\n * Centered 120px loading ring that fills its container. Use as the loading state for a page or\n * embedded app when no layout-specific shimmer exists.\n */\nexport const LayoutLoadingSpinner = () => (\n  <Container role='status' aria-label='loading spinner'>\n    <VisuallyHidden>Loading...</VisuallyHidden>\n    <Ring viewBox='0 0 52 52' width={120} height={120} aria-hidden='true'>\n      <RingStroke cx='26' cy='26' r='25' fill='none' />\n    </Ring>\n  </Container>\n);\n"],"mappings":";;;;;;AAOA,MAAM,YAAY,OAAO,GAAG;;;;;;;eAOb,OAAO,GAAA,QAA2B,GAAA,6BAA0B;;AAG3E,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;AASlC,MAAM,OAAO,OAAO,GAAG;;;eAGR,OAAO;;AAGtB,MAAM,aAAa,OAAO,MAAM;YACpB,MAAM,cAAc;;;;;;;;;AAUhC,MAAa,6BACX,qBAAC,WAAD;CAAW,MAAK;CAAS,cAAW;WAApC,CACE,oBAAC,gBAAD,EAAA,UAAgB,cAA2B,CAAA,EAC3C,oBAAC,MAAD;EAAM,SAAQ;EAAY,OAAO;EAAK,QAAQ;EAAK,eAAY;YAC7D,oBAAC,YAAD;GAAY,IAAG;GAAK,IAAG;GAAK,GAAE;GAAK,MAAK;GAAS,CAAA;EAC5C,CAAA,CACG"}

package/dist/patterns/PageLayout/index.d.mts

@@ -1,4 +1,4 @@
-import { n as Container, r as Section, t as Backdrop } from "../../PageLayout-BdVM37bV.mjs";
+import { n as Container, r as Section, t as Backdrop } from "../../PageLayout-BXM_pyrU.mjs";
 import { r as PageLayoutWidth } from "../../PageLayoutFrame-4QGs7x-t.mjs";
 import { n as SingleColumnLayoutProps, t as SingleColumnLayout } from "../../SingleColumnLayout-D2bpX7X1.mjs";
 import { n as SplitColumnLayoutProps, t as SplitColumnLayout } from "../../SplitColumnLayout-CRDSDHHm.mjs";

package/dist/patterns/PageLayout/index.mjs

@@ -1,2 +1,2 @@
-import { a as Section, i as Container, n as SingleColumnLayout, r as Backdrop, t as SplitColumnLayout } from "../../PageLayout-DjtGrvJa.mjs";
+import { a as Section, i as Container, n as SingleColumnLayout, r as Backdrop, t as SplitColumnLayout } from "../../PageLayout-DgEGcZgB.mjs";
 export { Backdrop, Container, Section, SingleColumnLayout, SplitColumnLayout };

package/dist/patterns/WizardModal/index.mjs

@@ -1,11 +1,11 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
 import { t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button } from "../../IconButton-DxHB2g80.mjs";
-import { i as Modal_default } from "../../Modal-De5_bPJ_.mjs";
-import { t as ProgressIndicator } from "../../ProgressIndicator-zt3ndT9U.mjs";
-import { useState } from "react";
+import { n as Button } from "../../IconButton-kSjnfhWt.mjs";
+import { i as Modal_default } from "../../Modal-B6X5AgWj.mjs";
+import { t as ProgressIndicator } from "../../ProgressIndicator-hy1P-RG1.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/WizardModal/WizardModal.tsx
 const statusFromProceed = (result) => result === "valid" ? "completed" : result;

package/dist/relative-date-label.d.mts

@@ -1,4 +1,4 @@
-import { d as FilterRuleValue, u as FilterRule } from "./types-DLnCkvTt.mjs";
+import { d as FilterRuleValue, u as FilterRule } from "./types-BJqmRXFV.mjs";
 
 //#region src/components/DataTable/TableControls/FiltersV2/relative-date-label.d.ts
 /**

package/dist/tone.d.mts

@@ -1,6 +1,6 @@
 import { n as SemanticTokens } from "./semantic-BZbvb3LV.mjs";
 import { n as PdsColor } from "./color-Db57Wms_.mjs";
-import { o as StickerProps } from "./Sticker-CLvRB8V5.mjs";
+import { o as StickerProps } from "./Sticker-C7Wv3Obx.mjs";
 import { Color } from "@persona/design-tokens";
 
 //#region src/components/Sticker/tone.d.ts

package/dist/{types-DLnCkvTt.d.mts → types-BJqmRXFV.d.mts}

@@ -106,6 +106,20 @@ type FilterConditionOperator = {
   operator: FilterOperator;
   label: string;
   isComplete?: (value: FilterRuleValue) => boolean;
+  /**
+   * Optional validation for the value the user has entered. Return an error
+   * message to reject the value, or `undefined` to accept it.
+   *
+   * While it returns a message, the rule counts as incomplete: the pill is not
+   * applied, the value control keeps what the user typed, and the Float,
+   * Integer and String controls show the message below the input in the error
+   * state (red border, `aria-invalid`). The message clears once the value is
+   * accepted.
+   *
+   * Not called for an empty value (`null`, `''` or an empty array): an empty
+   * rule is incomplete but not invalid, so it shows no error.
+   */
+  validate?: (value: FilterRuleValue) => string | undefined;
 } & ({
   valueType: 'string';
   defaultValue?: string;
@@ -200,4 +214,4 @@ declare const EMPTY_FILTER_STATE: FilterStateV2;
 declare function isEmptyState(state: FilterStateV2): boolean;
 //#endregion
 export { FilterConditionOperator as a, FilterFieldType as c, FilterRuleValue as d, FilterRuleValueChange as f, isEmptyState as g, TopLevelFilterRule as h, EMPTY_FILTER_STATE as i, FilterOperator as l, FilterStateV2 as m, CompoundExpression as n, FilterField as o, FilterSize as p, DateRangeFilterValue as r, FilterFieldSource as s, AndGroup as t, FilterRule as u };
-//# sourceMappingURL=types-DLnCkvTt.d.mts.map
+//# sourceMappingURL=types-BJqmRXFV.d.mts.map

package/dist/{types-CqcbWyUY.d.mts → types-BOsCi-kZ.d.mts}

@@ -1,4 +1,4 @@
-import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-DLnCkvTt.mjs";
+import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, u as FilterRule } from "./types-BJqmRXFV.mjs";
 import { ReactElement } from "react";
 
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/types.d.ts
@@ -32,6 +32,12 @@ interface ValueControlProps {
   onCommit?: () => void;
   /** Aria label wired to the popover's labeling. */
   ariaLabel?: string;
+  /**
+   * Validation error for the current value. The Float, Integer and String
+   * controls show it below the input and put the input in its error state.
+   * `resolveValueControl` fills it from the condition operator's `validate`.
+   */
+  errorMessage?: string;
   /** Optional external trigger that opens dropdown-backed value controls directly. */
   trigger?: ReactElement;
   /**
@@ -44,4 +50,4 @@ interface ValueControlProps {
 }
 //#endregion
 export { ValueControlProps as t };
-//# sourceMappingURL=types-CqcbWyUY.d.mts.map
+//# sourceMappingURL=types-BOsCi-kZ.d.mts.map

package/dist/{types-BEdERA4v.d.mts → types-C_CncajO.d.mts}

@@ -1,4 +1,4 @@
-import { n as ComboboxProps } from "./Combobox-CIKqTYZt.mjs";
+import { n as ComboboxProps } from "./Combobox-aOJDTjzC.mjs";
 import { n as DateRange } from "./DateRangePicker-DlHC2q--.mjs";
 import { ReactNode } from "react";
 import { DateValue } from "@internationalized/date";
@@ -92,4 +92,4 @@ interface FilterTypeDefinition<TFilter extends BaseFilterConfig = FilterConfig>
 type FilterTypeResolver<TFilter extends BaseFilterConfig = FilterConfig> = (config: TFilter) => FilterTypeDefinition<TFilter> | undefined;
 //#endregion
 export { ComboboxFilterConfig as a, FilterRenderOptions as c, InputFilterConfig as d, MultiSelectFilterConfig as f, BaseFilterConfig as i, FilterTypeDefinition as l, AttributeColumn as n, DateRangeFilterConfig as o, SelectFilterConfig as p, BaseActiveFilter as r, FilterConfig as s, ActiveFilter as t, FilterTypeResolver as u };
-//# sourceMappingURL=types-BEdERA4v.d.mts.map
+//# sourceMappingURL=types-C_CncajO.d.mts.map

package/dist/{types-BiqzeNsa.d.mts → types-D5txFacG.d.mts}

@@ -1,5 +1,5 @@
-import { l as MenuItemProps } from "./Menu-D6OrKCTC.mjs";
-import { o as StickerProps } from "./Sticker-CLvRB8V5.mjs";
+import { l as MenuItemProps } from "./Menu-Ca5ftvo6.mjs";
+import { o as StickerProps } from "./Sticker-C7Wv3Obx.mjs";
 import { ReactNode } from "react";
 import { Column, DeepKeys, FilterFnOption, Header, RowData, SortingState, Table } from "@tanstack/react-table";
 
@@ -177,4 +177,4 @@ type BulkAction = {
 };
 //#endregion
 export { RowAction as C, RowDataWithTourTarget as D, RowDataWithSubrowsToAlwaysShowIds as E, SortProps as O, RenderValueStickerFormatConfig as S, RowDataWithSubrows as T, DataTableColumns as _, DataTableColumnBaseFormat as a, DatetimeConfig as b, DataTableColumnDatetimeFormat as c, DataTableColumnImageFormat as d, DataTableColumnNumberFormat as f, DataTableColumnURLFormat as g, DataTableColumnStringFormat as h, ColumnConfig as i, StickerMapping as k, DataTableColumnFormat as l, DataTableColumnStickerFormat as m, ClientFilterConfig as n, DataTableColumnCheckboxFormat as o, DataTableColumnPiiFormat as p, ClientFilterType as r, DataTableColumnDateFormat as s, BulkAction as t, DataTableColumnIDFormat as u, DataTableVariables as v, RowDataWithDetails as w, HeadlessFilterConfig as x, DateConfig as y };
-//# sourceMappingURL=types-BiqzeNsa.d.mts.map
+//# sourceMappingURL=types-D5txFacG.d.mts.map

package/dist/types4.d.mts

@@ -1,2 +1,2 @@
-import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, f as FilterRuleValueChange, g as isEmptyState, h as TopLevelFilterRule, i as EMPTY_FILTER_STATE, l as FilterOperator, m as FilterStateV2, n as CompoundExpression, o as FilterField, p as FilterSize, r as DateRangeFilterValue, s as FilterFieldSource, t as AndGroup, u as FilterRule } from "./types-DLnCkvTt.mjs";
+import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, f as FilterRuleValueChange, g as isEmptyState, h as TopLevelFilterRule, i as EMPTY_FILTER_STATE, l as FilterOperator, m as FilterStateV2, n as CompoundExpression, o as FilterField, p as FilterSize, r as DateRangeFilterValue, s as FilterFieldSource, t as AndGroup, u as FilterRule } from "./types-BJqmRXFV.mjs";
 export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterConditionOperator, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterRuleValueChange, FilterSize, FilterStateV2, TopLevelFilterRule, isEmptyState };

package/dist/types5.d.mts

@@ -1,2 +1,2 @@
-import { a as ComboboxFilterConfig, c as FilterRenderOptions, d as InputFilterConfig, f as MultiSelectFilterConfig, i as BaseFilterConfig, l as FilterTypeDefinition, n as AttributeColumn, o as DateRangeFilterConfig, p as SelectFilterConfig, r as BaseActiveFilter, s as FilterConfig, t as ActiveFilter, u as FilterTypeResolver } from "./types-BEdERA4v.mjs";
+import { a as ComboboxFilterConfig, c as FilterRenderOptions, d as InputFilterConfig, f as MultiSelectFilterConfig, i as BaseFilterConfig, l as FilterTypeDefinition, n as AttributeColumn, o as DateRangeFilterConfig, p as SelectFilterConfig, r as BaseActiveFilter, s as FilterConfig, t as ActiveFilter, u as FilterTypeResolver } from "./types-C_CncajO.mjs";
 export { ActiveFilter, AttributeColumn, BaseActiveFilter, BaseFilterConfig, ComboboxFilterConfig, DateRangeFilterConfig, FilterConfig, FilterRenderOptions, FilterTypeDefinition, FilterTypeResolver, InputFilterConfig, MultiSelectFilterConfig, SelectFilterConfig };

package/dist/types6.d.mts

@@ -1,2 +1,2 @@
-import { t as ValueControlProps } from "./types-CqcbWyUY.mjs";
+import { t as ValueControlProps } from "./types-BOsCi-kZ.mjs";
 export { ValueControlProps };

package/dist/{url-state-CXUuK3_r.d.mts → url-state-CXPmXzIZ.d.mts}

@@ -1,4 +1,4 @@
-import { m as FilterStateV2 } from "./types-DLnCkvTt.mjs";
+import { m as FilterStateV2 } from "./types-BJqmRXFV.mjs";
 
 //#region src/components/DataTable/TableControls/FiltersV2/url-state.d.ts
 /**
@@ -39,4 +39,4 @@ declare function applyFilterStateToSearchParams(params: URLSearchParams, state:
 declare function decodeFilterStateFromString(raw: string | null | undefined): FilterStateV2 | null;
 //#endregion
 export { decodeFilterStateFromUrl as a, decodeFilterStateFromString as i, UrlStateCodecResult as n, encodeFilterStateToUrlParam as o, applyFilterStateToSearchParams as r, FILTER_STATE_URL_PARAM as t };
-//# sourceMappingURL=url-state-CXUuK3_r.d.mts.map
+//# sourceMappingURL=url-state-CXPmXzIZ.d.mts.map

package/dist/url-state.d.mts

@@ -1,2 +1,2 @@
-import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "./url-state-CXUuK3_r.mjs";
+import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "./url-state-CXPmXzIZ.mjs";
 export { FILTER_STATE_URL_PARAM, UrlStateCodecResult, applyFilterStateToSearchParams, decodeFilterStateFromString, decodeFilterStateFromUrl, encodeFilterStateToUrlParam };

package/dist/{useChain-B--KAtdN.d.mts → useChain-x9fd9Fyq.d.mts}

@@ -1,4 +1,4 @@
-import { r as Sticker } from "./Sticker-CLvRB8V5.mjs";
+import { r as Sticker } from "./Sticker-C7Wv3Obx.mjs";
 import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-C4lfpDrt.mjs";
 import { n as Chain, s as MethodChainNode } from "./methodChainTypes-De6sHGyd.mjs";
 import { t as Option } from "./schemaOptions-DMq37JC5.mjs";
@@ -74,4 +74,4 @@ declare const useChainSchema: ({
 declare const useChain: UseChainHook;
 //#endregion
 export { useChain as n, useChainSchema as r, chainRootsFromSchemaProperties as t };
-//# sourceMappingURL=useChain-B--KAtdN.d.mts.map
+//# sourceMappingURL=useChain-x9fd9Fyq.d.mts.map

package/dist/useChainAtCursor.d.mts

@@ -3,7 +3,7 @@ import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from
 import { n as Chain, s as MethodChainNode } from "./methodChainTypes-De6sHGyd.mjs";
 import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-C5mXGz6T.mjs";
 import { u as ValueType } from "./types-02Ij0dgs.mjs";
-import { n as useChain } from "./useChain-B--KAtdN.mjs";
+import { n as useChain } from "./useChain-x9fd9Fyq.mjs";
 
 //#region src/components/SmartTextInput/useChainAtCursor.d.ts
 /**

package/dist/useChartColors.d.mts

@@ -0,0 +1,30 @@
+import { ChartColorMode, ChartPalette, ChartSeriesColorInput } from "./chartColors.mjs";
+import { Color } from "@persona/design-tokens";
+
+//#region src/components/Chart/useChartColors.d.ts
+/** @experimental */
+interface ChartColors {
+  /** The colour mode the palettes were read for. */
+  mode: ChartColorMode;
+  /** The ordered colours of the selected palette for that mode. */
+  colors: readonly Color[];
+  /** {@link resolveSeriesColors} bound to the selected palette and mode. */
+  resolve: <K extends string>(series: readonly ChartSeriesColorInput<K>[]) => Record<K, Color>;
+}
+/**
+ * The chart colours for the current PDS colour mode. Reads the charting palettes `PDSProvider` /
+ * `ColorModeScope` install on the styled-components theme, so charts follow dark mode with no
+ * extra setup; without a PDS colour mode it returns the light `ChartingColors`.
+ *
+ * ```tsx
+ * const { resolve } = useChartColors();
+ * const colors = resolve([{ key: 'approved' }, { key: 'declined', color: chartColor(Color.CoreRed600) }]);
+ * <Bar dataKey='approved' fill={colors.approved} />
+ * ```
+ *
+ * @experimental
+ */
+declare function useChartColors(palette?: ChartPalette): ChartColors;
+//#endregion
+export { ChartColors, useChartColors };
+//# sourceMappingURL=useChartColors.d.mts.map

package/dist/useChartSeriesVisibility.d.mts

@@ -0,0 +1,22 @@
+//#region src/components/Chart/useChartSeriesVisibility.d.ts
+/** @experimental */
+interface ChartSeriesVisibility<K extends string> {
+  /** Keys of the hidden series, in series order: pass to `ChartLegend`'s `hidden`. */
+  hidden: K[];
+  /** Pass to `ChartLegend`'s `onToggle`. */
+  toggle: (key: K) => void;
+  isHidden: (key: K) => boolean;
+  /** True when every series is hidden; the plot keeps its size and axes. */
+  allHidden: boolean;
+}
+/**
+ * Show/hide state for a chart's series, driven by a {@link ChartLegend}. Every series may be hidden.
+ * Hide a Recharts series with its `hide` prop (`<Bar hide={isHidden(key)} />`) rather than
+ * unmounting it, so colours and axes stay put.
+ *
+ * @experimental
+ */
+declare function useChartSeriesVisibility<K extends string>(keys: readonly K[], initialHidden?: readonly K[]): ChartSeriesVisibility<K>;
+//#endregion
+export { ChartSeriesVisibility, useChartSeriesVisibility };
+//# sourceMappingURL=useChartSeriesVisibility.d.mts.map

package/dist/useChartStyles.d.mts

@@ -0,0 +1,108 @@
+//#region src/components/Chart/useChartStyles.d.ts
+/** Axis tick text style (TextSmall). @experimental */
+interface ChartTickStyle {
+  fill: string;
+  fontSize: string;
+  fontFamily: string;
+}
+/** What {@link useChartStyles} returns: props to spread on Recharts components. @experimental */
+interface ChartStyles {
+  /** The resolved semantic colours behind the props below. */
+  colors: {
+    grid: string;
+    axis: string;
+    text: string;
+    surface: string;
+    hover: string;
+  };
+  grid: {
+    vertical: false;
+    stroke: string;
+    zIndex: number;
+  };
+  xAxis: {
+    tick: ChartTickStyle;
+    tickLine: false;
+    axisLine: {
+      stroke: string;
+    };
+  };
+  yAxis: {
+    tick: ChartTickStyle;
+    tickLine: false;
+    axisLine: false;
+  };
+  barCursor: {
+    fill: string;
+    fillOpacity: number;
+  };
+  lineCursor: {
+    stroke: string;
+  };
+  segmentGap: {
+    stroke: string;
+    strokeWidth: number;
+  };
+  activeDot: {
+    r: number;
+    stroke: string;
+    strokeWidth: number;
+  };
+}
+/**
+ * PDS styling for hand-built Recharts charts, as props to spread on Recharts' own components so a
+ * custom chart (reference lines, formatters, extra children) keeps the PDS look:
+ *
+ * ```tsx
+ * const styles = useChartStyles();
+ * <BarChart data={data} margin={CHART_PLOT_MARGIN}>
+ *   <Tooltip cursor={styles.barCursor} content={<ChartPopover series={series} />} />
+ *   <CartesianGrid {...styles.grid} />
+ *   <XAxis dataKey='month' {...styles.xAxis} tickFormatter={formatMonth} />
+ *   <YAxis {...styles.yAxis} />
+ *   <ReferenceLine y={target} stroke={styles.colors.axis} strokeDasharray='4 4' />
+ *   ...
+ * </BarChart>
+ * ```
+ *
+ * Colours come from semantic tokens, so they follow light and dark mode.
+ *
+ * @experimental Part of the in-progress PDS charting components; the API may change.
+ */
+declare function useChartStyles(): ChartStyles;
+/** @experimental */
+interface ChartActiveSeries<K extends string> {
+  /** The series under the pointer, for `ChartPopover activeSeries`. */
+  activeSeries: K | undefined;
+  /** Spread on each `<Bar>`: tracks which series and category the pointer is on. */
+  barHandlers: (key: K) => {
+    onMouseEnter: (data: unknown, index: number) => void;
+    onMouseLeave: () => void;
+  };
+  /**
+   * `fillOpacity` for a series' bar at `index` (pass it to a `<Cell>`): 0.65 for the other series in
+   * the hovered category, 1 otherwise.
+   */
+  segmentOpacity: (key: K, index: number) => number;
+}
+/**
+ * Hover emphasis for bars holding several series (stacked or grouped): the segment under the
+ * pointer stays at full strength, the other segments of the same category drop to 65% opacity, and
+ * `activeSeries` dims the matching popover rows.
+ *
+ * ```tsx
+ * const { activeSeries, barHandlers, segmentOpacity } = useChartActiveSeries<Key>();
+ * <Tooltip content={<ChartPopover series={series} activeSeries={activeSeries} />} />
+ * {series.map(({ key }) => (
+ *   <Bar key={key} dataKey={key} {...barHandlers(key)}>
+ *     {data.map((_, i) => <Cell key={i} fillOpacity={segmentOpacity(key, i)} />)}
+ *   </Bar>
+ * ))}
+ * ```
+ *
+ * @experimental
+ */
+declare function useChartActiveSeries<K extends string>(): ChartActiveSeries<K>;
+//#endregion
+export { ChartActiveSeries, ChartStyles, ChartTickStyle, useChartActiveSeries, useChartStyles };
+//# sourceMappingURL=useChartStyles.d.mts.map

package/dist/useColumnConfiguration.d.mts

@@ -1,5 +1,5 @@
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-Cp7ausV_.mjs";
-import { i as ColumnConfig } from "./types-BiqzeNsa.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-CZcLH8uR.mjs";
+import { i as ColumnConfig } from "./types-D5txFacG.mjs";
 import { RowData } from "@tanstack/react-table";
 
 //#region src/patterns/IndexTableLayout/useColumnConfiguration.d.ts

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { p as FooterAction } from "./ComboboxBase-BPXqJHaQ.mjs";
+import { m as FooterAction } from "./ComboboxBase-Brgv5nxk.mjs";
 import { KeyboardEvent } from "react";
 
 //#region src/components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useFilterStateV2-DBpbxAEC.d.mts → useFilterStateV2-DiTS9DTg.d.mts}

@@ -1,5 +1,5 @@
-import { m as FilterStateV2, n as CompoundExpression, u as FilterRule } from "./types-DLnCkvTt.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-C2NVPhMO.mjs";
+import { m as FilterStateV2, n as CompoundExpression, u as FilterRule } from "./types-BJqmRXFV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-CJwGpUVK.mjs";
 import { SetStateAction } from "react";
 
 //#region src/components/DataTable/TableControls/FiltersV2/useFilterStateV2.d.ts
@@ -91,4 +91,4 @@ interface UseFilterStateV2Result {
 declare function useFilterStateV2(options: UseFilterStateV2Options): UseFilterStateV2Result;
 //#endregion
 export { UseFilterStateV2Result as n, useFilterStateV2 as r, UseFilterStateV2Options as t };
-//# sourceMappingURL=useFilterStateV2-DBpbxAEC.d.mts.map
+//# sourceMappingURL=useFilterStateV2-DiTS9DTg.d.mts.map

package/dist/useFilterStateV2.d.mts

@@ -1,2 +1,2 @@
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DBpbxAEC.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DiTS9DTg.mjs";
 export { UseFilterStateV2Options, UseFilterStateV2Result, useFilterStateV2 };