@persona/design-system 0.10.10 → 0.10.12

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

@@ -5,13 +5,13 @@ 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 { a as Tooltip } from "../../Tooltip-CVBxc1yf.mjs";
 import { focusStyle } from "../../mixins/focus.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 { n as Button$1, t as IconButton } from "../../IconButton-Bj1fry_K.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-Ip75l4Th.mjs";
+import { t as DropdownButton } from "../../DropdownButton-BxZ5hn0X.mjs";
+import { n as SingleColumnLayout } from "../../PageLayout-CPiVnS_r.mjs";
 import { cloneElement } from "react";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Disclosure, DisclosurePanel } from "react-aria-components";
@@ -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,8 @@
+import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 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-DdSY9mzT.mjs";
+import { t as PageHeader } from "../../PageHeader-6KvtGED-.mjs";
+import { n as SingleColumnLayout } from "../../PageLayout-CPiVnS_r.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/IndexTableLayout/useColumnConfiguration.ts
@@ -46,7 +47,10 @@ const useColumnConfiguration = ({ columnDefinitions, columnConfiguration, onColu
 };
 //#endregion
 //#region src/patterns/IndexTableLayout/IndexTableLayout.tsx
-const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, controls, columnDefinitions, defaultColumns, columnConfiguration, onColumnConfigurationChange, getColumnDisabled, sortByRelevance, ...dataTableProps }) => {
+const Root = styled.div`
+  width: 100%;
+`;
+const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, width = "wide", controls, columnDefinitions, defaultColumns, columnConfiguration, onColumnConfigurationChange, getColumnDisabled, sortByRelevance, ...dataTableProps }) => {
 	const { columns, columnConfigurationProps } = useColumnConfiguration({
 		columnDefinitions,
 		defaultColumns,
@@ -60,7 +64,7 @@ const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, c
 	const forwardedDataTableProps = { ...dataTableProps };
 	delete forwardedDataTableProps.showColumnProperties;
 	delete forwardedDataTableProps.onUpdateColumnProperties;
-	return /* @__PURE__ */ jsxs(Container, {
+	return /* @__PURE__ */ jsxs(Root, {
 		className,
 		children: [/* @__PURE__ */ jsx(PageHeader, {
 			...restHeaderProps,
@@ -68,17 +72,20 @@ const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, c
 				title: headerTitle ?? title,
 				subtitle: headerSubtitle
 			}
-		}), /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsx(Card_default, { children: /* @__PURE__ */ jsxs(Card_default.Body, { children: [banner, /* @__PURE__ */ jsx(DataTable, {
-			...forwardedDataTableProps,
-			columns,
-			title: tableTitle,
-			showControls: true,
-			controls: {
-				...controls,
-				columnConfigurationProps
-			},
-			enableRowSelection: hasBulkActions
-		})] }) }) })]
+		}), /* @__PURE__ */ jsx(SingleColumnLayout, {
+			width,
+			main: /* @__PURE__ */ jsx(Card_default, { children: /* @__PURE__ */ jsxs(Card_default.Body, { children: [banner, /* @__PURE__ */ jsx(DataTable, {
+				...forwardedDataTableProps,
+				columns,
+				title: tableTitle,
+				showControls: true,
+				controls: {
+					...controls,
+					columnConfigurationProps
+				},
+				enableRowSelection: hasBulkActions
+			})] }) })
+		})]
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Card"],"sources":["../../../src/patterns/IndexTableLayout/useColumnConfiguration.ts","../../../src/patterns/IndexTableLayout/IndexTableLayout.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport { useMemo } from 'react';\n\nimport type { TableViewConfigurationProps } from '#src/components/DataTable/TableControls';\nimport type { ColumnConfig } from '#src/components/DataTable/types';\n\ntype AttributeColumn = TableViewConfigurationProps['columnConfiguration'][number];\n\nexport interface ColumnDefinition<TData extends RowData> extends ColumnConfig<TData> {\n  key?: string;\n  label: string;\n  isCustomField?: boolean;\n}\n\nexport type ColumnDefinitions<TData extends RowData> = Record<string, ColumnDefinition<TData>>;\n\nexport interface UseColumnConfigurationOptions<TData extends RowData> {\n  columnDefinitions: ColumnDefinitions<TData>;\n  defaultColumns: string[];\n  columnConfiguration?: AttributeColumn[];\n  onColumnConfigurationChange?: (c: AttributeColumn[]) => void;\n  getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;\n  sortByRelevance?: boolean;\n}\n\nexport const useColumnConfiguration = <TData extends RowData>({\n  columnDefinitions,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  defaultColumns,\n  getColumnDisabled,\n  sortByRelevance,\n}: UseColumnConfigurationOptions<TData>): {\n  columns: ColumnConfig<TData>[];\n  columnConfigurationProps?: TableViewConfigurationProps;\n} => {\n  const visibleColumnKeys = useMemo(() => {\n    if (!columnConfiguration || columnConfiguration.length === 0) {\n      return defaultColumns;\n    }\n\n    return columnConfiguration.map((column) => column.key);\n  }, [columnConfiguration, defaultColumns]);\n\n  const columns = useMemo(\n    () =>\n      visibleColumnKeys\n        .map((key): ColumnConfig<TData> | null => {\n          const definition = columnDefinitions[key];\n          if (!definition) {\n            return null;\n          }\n\n          const {\n            key: _key,\n            label: _label,\n            isCustomField: _isCustomField,\n            ...columnConfig\n          } = definition;\n          return columnConfig;\n        })\n        .filter((column): column is ColumnConfig<TData> => column != null),\n    [visibleColumnKeys, columnDefinitions],\n  );\n\n  const columnConfigurationProps = useMemo(() => {\n    if (!columnConfiguration || !onColumnConfigurationChange) {\n      return undefined;\n    }\n\n    const attributeOptions = Object.keys(columnDefinitions).map((key) => ({\n      key: String(key),\n      label: columnDefinitions[key].label,\n      isCustomField: columnDefinitions[key].isCustomField,\n    }));\n\n    const currentConfiguration: AttributeColumn[] = visibleColumnKeys\n      .filter((key) => columnDefinitions[key] != null)\n      .map((key) => ({\n        key: String(key),\n        label: columnDefinitions[key].label,\n      }));\n\n    return {\n      columnConfiguration: currentConfiguration,\n      attributeOptions,\n      updateColumnConfiguration: onColumnConfigurationChange,\n      getColumnDisabled,\n      sortByRelevance,\n    };\n  }, [\n    columnConfiguration,\n    onColumnConfigurationChange,\n    columnDefinitions,\n    visibleColumnKeys,\n    getColumnDisabled,\n    sortByRelevance,\n  ]);\n\n  return { columns, columnConfigurationProps };\n};\n","import type { RowData } from '@tanstack/react-table';\nimport type { ReactNode } from 'react';\n\nimport type { BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport Card from '#src/components/Card';\nimport DataTable, { type DataTableProps } from '#src/components/DataTable';\nimport type {\n  BaseFilterConfig,\n  FilterConfig,\n  TableControlsProps,\n} from '#src/components/DataTable/TableControls';\nimport PageHeader, { type PageHeaderProps } from '#src/components/PageHeader';\nimport { Container, Section } from '#src/patterns/PageLayout';\n\nimport {\n  useColumnConfiguration,\n  type UseColumnConfigurationOptions,\n} from './useColumnConfiguration';\n\nexport type IndexTableLayoutHeaderProps =\n  | (Omit<Extract<PageHeaderProps, { breadcrumbs?: never }>, 'title'> & { title?: ReactNode })\n  | Extract<PageHeaderProps, { breadcrumbs: BreadcrumbsProps }>;\n\nexport interface IndexTableLayoutProps<\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>\n  extends\n    Omit<\n      DataTableProps<TData, TFilter>,\n      | 'title'\n      | 'showControls'\n      | 'controls'\n      | 'columns'\n      | 'enableRowSelection'\n      | 'showColumnProperties'\n      | 'onUpdateColumnProperties'\n    >,\n    UseColumnConfigurationOptions<TData> {\n  title: string;\n  tableTitle?: string;\n  headerProps?: IndexTableLayoutHeaderProps;\n  banner?: ReactNode;\n  className?: string;\n  /** Host-built table controls: search, filters/filterResolver/filterPanel, saved-view ControlBar props, tableActions… */\n  controls?: Omit<TableControlsProps<TFilter>, 'columnConfigurationProps'>;\n}\n\nexport const IndexTableLayout = <\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>({\n  title,\n  tableTitle,\n  headerProps,\n  banner,\n  className,\n  controls,\n  columnDefinitions,\n  defaultColumns,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  getColumnDisabled,\n  sortByRelevance,\n  ...dataTableProps\n}: IndexTableLayoutProps<TData, TFilter>) => {\n  const { columns, columnConfigurationProps } = useColumnConfiguration({\n    columnDefinitions,\n    defaultColumns,\n    columnConfiguration,\n    onColumnConfigurationChange,\n    getColumnDisabled,\n    sortByRelevance,\n  });\n\n  const hasBulkActions =\n    (dataTableProps.bulkActions?.length ?? 0) > 0 ||\n    (controls?.bulkActions?.length ?? 0) > 0 ||\n    dataTableProps.getAvailableBulkActions != null;\n\n  const {\n    title: headerTitle,\n    subtitle: headerSubtitle,\n    breadcrumbs,\n    ...restHeaderProps\n  } = headerProps ?? {};\n\n  const forwardedDataTableProps = { ...dataTableProps } as typeof dataTableProps &\n    Pick<DataTableProps<TData, TFilter>, 'showColumnProperties' | 'onUpdateColumnProperties'>;\n  delete forwardedDataTableProps.showColumnProperties;\n  delete forwardedDataTableProps.onUpdateColumnProperties;\n\n  return (\n    <Container className={className}>\n      <PageHeader\n        {...restHeaderProps}\n        {...(breadcrumbs\n          ? { breadcrumbs }\n          : { title: headerTitle ?? title, subtitle: headerSubtitle })}\n      />\n      <Section>\n        <Card>\n          <Card.Body>\n            {banner}\n            <DataTable<TData, TFilter>\n              {...forwardedDataTableProps}\n              columns={columns}\n              title={tableTitle}\n              showControls\n              controls={{ ...controls, columnConfigurationProps }}\n              enableRowSelection={hasBulkActions}\n            />\n          </Card.Body>\n        </Card>\n      </Section>\n    </Container>\n  );\n};\n\nexport default IndexTableLayout;\n"],"mappings":";;;;;;;AAyBA,MAAa,0BAAiD,EAC5D,mBACA,qBACA,6BACA,gBACA,mBACA,sBAIG;CACH,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,uBAAuB,oBAAoB,WAAW,EACzD,QAAO;AAGT,SAAO,oBAAoB,KAAK,WAAW,OAAO,IAAI;IACrD,CAAC,qBAAqB,eAAe,CAAC;AAyDzC,QAAO;EAAE,SAvDO,cAEZ,kBACG,KAAK,QAAoC;GACxC,MAAM,aAAa,kBAAkB;AACrC,OAAI,CAAC,WACH,QAAO;GAGT,MAAM,EACJ,KAAK,MACL,OAAO,QACP,eAAe,gBACf,GAAG,iBACD;AACJ,UAAO;IACP,CACD,QAAQ,WAA0C,UAAU,KAAK,EACtE,CAAC,mBAAmB,kBAAkB,CAqCxB;EAAE,0BAlCe,cAAc;AAC7C,OAAI,CAAC,uBAAuB,CAAC,4BAC3B;GAGF,MAAM,mBAAmB,OAAO,KAAK,kBAAkB,CAAC,KAAK,SAAS;IACpE,KAAK,OAAO,IAAI;IAChB,OAAO,kBAAkB,KAAK;IAC9B,eAAe,kBAAkB,KAAK;IACvC,EAAE;AASH,UAAO;IACL,qBAR8C,kBAC7C,QAAQ,QAAQ,kBAAkB,QAAQ,KAAK,CAC/C,KAAK,SAAS;KACb,KAAK,OAAO,IAAI;KAChB,OAAO,kBAAkB,KAAK;KAC/B,EAGwC;IACzC;IACA,2BAA2B;IAC3B;IACA;IACD;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACD,CAEyC;EAAE;;;;ACnD9C,MAAa,oBAGX,EACA,OACA,YACA,aACA,QACA,WACA,UACA,mBACA,gBACA,qBACA,6BACA,mBACA,iBACA,GAAG,qBACwC;CAC3C,MAAM,EAAE,SAAS,6BAA6B,uBAAuB;EACnE;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBACH,eAAe,aAAa,UAAU,KAAK,MAC3C,UAAU,aAAa,UAAU,KAAK,KACvC,eAAe,2BAA2B;CAE5C,MAAM,EACJ,OAAO,aACP,UAAU,gBACV,aACA,GAAG,oBACD,eAAe,EAAE;CAErB,MAAM,0BAA0B,EAAE,GAAG,gBAAgB;AAErD,QAAO,wBAAwB;AAC/B,QAAO,wBAAwB;AAE/B,QACE,qBAAC,WAAD;EAAsB;YAAtB,CACE,oBAAC,YAAD;GACE,GAAI;GACJ,GAAK,cACD,EAAE,aAAa,GACf;IAAE,OAAO,eAAe;IAAO,UAAU;IAAgB;GAC7D,CAAA,EACF,oBAAC,SAAD,EAAA,UACE,oBAACA,cAAD,EAAA,UACE,qBAACA,aAAK,MAAN,EAAA,UAAA,CACG,QACD,oBAAC,WAAD;GACE,GAAI;GACK;GACT,OAAO;GACP,cAAA;GACA,UAAU;IAAE,GAAG;IAAU;IAA0B;GACnD,oBAAoB;GACpB,CAAA,CACQ,EAAA,CAAA,EACP,CAAA,EACC,CAAA,CACA"}
+{"version":3,"file":"index.mjs","names":["Card"],"sources":["../../../src/patterns/IndexTableLayout/useColumnConfiguration.ts","../../../src/patterns/IndexTableLayout/IndexTableLayout.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport { useMemo } from 'react';\n\nimport type { TableViewConfigurationProps } from '#src/components/DataTable/TableControls';\nimport type { ColumnConfig } from '#src/components/DataTable/types';\n\ntype AttributeColumn = TableViewConfigurationProps['columnConfiguration'][number];\n\nexport interface ColumnDefinition<TData extends RowData> extends ColumnConfig<TData> {\n  key?: string;\n  label: string;\n  isCustomField?: boolean;\n}\n\nexport type ColumnDefinitions<TData extends RowData> = Record<string, ColumnDefinition<TData>>;\n\nexport interface UseColumnConfigurationOptions<TData extends RowData> {\n  columnDefinitions: ColumnDefinitions<TData>;\n  defaultColumns: string[];\n  columnConfiguration?: AttributeColumn[];\n  onColumnConfigurationChange?: (c: AttributeColumn[]) => void;\n  getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;\n  sortByRelevance?: boolean;\n}\n\nexport const useColumnConfiguration = <TData extends RowData>({\n  columnDefinitions,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  defaultColumns,\n  getColumnDisabled,\n  sortByRelevance,\n}: UseColumnConfigurationOptions<TData>): {\n  columns: ColumnConfig<TData>[];\n  columnConfigurationProps?: TableViewConfigurationProps;\n} => {\n  const visibleColumnKeys = useMemo(() => {\n    if (!columnConfiguration || columnConfiguration.length === 0) {\n      return defaultColumns;\n    }\n\n    return columnConfiguration.map((column) => column.key);\n  }, [columnConfiguration, defaultColumns]);\n\n  const columns = useMemo(\n    () =>\n      visibleColumnKeys\n        .map((key): ColumnConfig<TData> | null => {\n          const definition = columnDefinitions[key];\n          if (!definition) {\n            return null;\n          }\n\n          const {\n            key: _key,\n            label: _label,\n            isCustomField: _isCustomField,\n            ...columnConfig\n          } = definition;\n          return columnConfig;\n        })\n        .filter((column): column is ColumnConfig<TData> => column != null),\n    [visibleColumnKeys, columnDefinitions],\n  );\n\n  const columnConfigurationProps = useMemo(() => {\n    if (!columnConfiguration || !onColumnConfigurationChange) {\n      return undefined;\n    }\n\n    const attributeOptions = Object.keys(columnDefinitions).map((key) => ({\n      key: String(key),\n      label: columnDefinitions[key].label,\n      isCustomField: columnDefinitions[key].isCustomField,\n    }));\n\n    const currentConfiguration: AttributeColumn[] = visibleColumnKeys\n      .filter((key) => columnDefinitions[key] != null)\n      .map((key) => ({\n        key: String(key),\n        label: columnDefinitions[key].label,\n      }));\n\n    return {\n      columnConfiguration: currentConfiguration,\n      attributeOptions,\n      updateColumnConfiguration: onColumnConfigurationChange,\n      getColumnDisabled,\n      sortByRelevance,\n    };\n  }, [\n    columnConfiguration,\n    onColumnConfigurationChange,\n    columnDefinitions,\n    visibleColumnKeys,\n    getColumnDisabled,\n    sortByRelevance,\n  ]);\n\n  return { columns, columnConfigurationProps };\n};\n","import type { RowData } from '@tanstack/react-table';\nimport type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport type { BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport Card from '#src/components/Card';\nimport DataTable, { type DataTableProps } from '#src/components/DataTable';\nimport type {\n  BaseFilterConfig,\n  FilterConfig,\n  TableControlsProps,\n} from '#src/components/DataTable/TableControls';\nimport PageHeader, { type PageHeaderProps } from '#src/components/PageHeader';\nimport { type PageLayoutWidth, SingleColumnLayout } from '#src/patterns/PageLayout';\n\nimport {\n  useColumnConfiguration,\n  type UseColumnConfigurationOptions,\n} from './useColumnConfiguration';\n\nconst Root = styled.div`\n  width: 100%;\n`;\n\nexport type IndexTableLayoutHeaderProps =\n  | (Omit<Extract<PageHeaderProps, { breadcrumbs?: never }>, 'title'> & { title?: ReactNode })\n  | Extract<PageHeaderProps, { breadcrumbs: BreadcrumbsProps }>;\n\nexport interface IndexTableLayoutProps<\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>\n  extends\n    Omit<\n      DataTableProps<TData, TFilter>,\n      | 'title'\n      | 'showControls'\n      | 'controls'\n      | 'columns'\n      | 'enableRowSelection'\n      | 'showColumnProperties'\n      | 'onUpdateColumnProperties'\n    >,\n    UseColumnConfigurationOptions<TData> {\n  title: string;\n  tableTitle?: string;\n  headerProps?: IndexTableLayoutHeaderProps;\n  banner?: ReactNode;\n  className?: string;\n  /**\n   * Page grid for the table card. `wide` uses the fluid grid; `standard` uses the centered fixed grid (max 1408px).\n   *\n   * @defaultValue 'wide'\n   */\n  width?: PageLayoutWidth;\n  /** Host-built table controls: search, filters/filterResolver/filterPanel, saved-view ControlBar props, tableActions… */\n  controls?: Omit<TableControlsProps<TFilter>, 'columnConfigurationProps'>;\n}\n\nexport const IndexTableLayout = <\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>({\n  title,\n  tableTitle,\n  headerProps,\n  banner,\n  className,\n  width = 'wide',\n  controls,\n  columnDefinitions,\n  defaultColumns,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  getColumnDisabled,\n  sortByRelevance,\n  ...dataTableProps\n}: IndexTableLayoutProps<TData, TFilter>) => {\n  const { columns, columnConfigurationProps } = useColumnConfiguration({\n    columnDefinitions,\n    defaultColumns,\n    columnConfiguration,\n    onColumnConfigurationChange,\n    getColumnDisabled,\n    sortByRelevance,\n  });\n\n  const hasBulkActions =\n    (dataTableProps.bulkActions?.length ?? 0) > 0 ||\n    (controls?.bulkActions?.length ?? 0) > 0 ||\n    dataTableProps.getAvailableBulkActions != null;\n\n  const {\n    title: headerTitle,\n    subtitle: headerSubtitle,\n    breadcrumbs,\n    ...restHeaderProps\n  } = headerProps ?? {};\n\n  const forwardedDataTableProps = { ...dataTableProps } as typeof dataTableProps &\n    Pick<DataTableProps<TData, TFilter>, 'showColumnProperties' | 'onUpdateColumnProperties'>;\n  delete forwardedDataTableProps.showColumnProperties;\n  delete forwardedDataTableProps.onUpdateColumnProperties;\n\n  return (\n    <Root className={className}>\n      <PageHeader\n        {...restHeaderProps}\n        {...(breadcrumbs\n          ? { breadcrumbs }\n          : { title: headerTitle ?? title, subtitle: headerSubtitle })}\n      />\n      <SingleColumnLayout\n        width={width}\n        main={\n          <Card>\n            <Card.Body>\n              {banner}\n              <DataTable<TData, TFilter>\n                {...forwardedDataTableProps}\n                columns={columns}\n                title={tableTitle}\n                showControls\n                controls={{ ...controls, columnConfigurationProps }}\n                enableRowSelection={hasBulkActions}\n              />\n            </Card.Body>\n          </Card>\n        }\n      />\n    </Root>\n  );\n};\n\nexport default IndexTableLayout;\n"],"mappings":";;;;;;;;AAyBA,MAAa,0BAAiD,EAC5D,mBACA,qBACA,6BACA,gBACA,mBACA,sBAIG;CACH,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,uBAAuB,oBAAoB,WAAW,EACzD,QAAO;AAGT,SAAO,oBAAoB,KAAK,WAAW,OAAO,IAAI;IACrD,CAAC,qBAAqB,eAAe,CAAC;AAyDzC,QAAO;EAAE,SAvDO,cAEZ,kBACG,KAAK,QAAoC;GACxC,MAAM,aAAa,kBAAkB;AACrC,OAAI,CAAC,WACH,QAAO;GAGT,MAAM,EACJ,KAAK,MACL,OAAO,QACP,eAAe,gBACf,GAAG,iBACD;AACJ,UAAO;IACP,CACD,QAAQ,WAA0C,UAAU,KAAK,EACtE,CAAC,mBAAmB,kBAAkB,CAqCxB;EAAE,0BAlCe,cAAc;AAC7C,OAAI,CAAC,uBAAuB,CAAC,4BAC3B;GAGF,MAAM,mBAAmB,OAAO,KAAK,kBAAkB,CAAC,KAAK,SAAS;IACpE,KAAK,OAAO,IAAI;IAChB,OAAO,kBAAkB,KAAK;IAC9B,eAAe,kBAAkB,KAAK;IACvC,EAAE;AASH,UAAO;IACL,qBAR8C,kBAC7C,QAAQ,QAAQ,kBAAkB,QAAQ,KAAK,CAC/C,KAAK,SAAS;KACb,KAAK,OAAO,IAAI;KAChB,OAAO,kBAAkB,KAAK;KAC/B,EAGwC;IACzC;IACA,2BAA2B;IAC3B;IACA;IACD;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACD,CAEyC;EAAE;;;;AC/E9C,MAAM,OAAO,OAAO,GAAG;;;AAuCvB,MAAa,oBAGX,EACA,OACA,YACA,aACA,QACA,WACA,QAAQ,QACR,UACA,mBACA,gBACA,qBACA,6BACA,mBACA,iBACA,GAAG,qBACwC;CAC3C,MAAM,EAAE,SAAS,6BAA6B,uBAAuB;EACnE;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBACH,eAAe,aAAa,UAAU,KAAK,MAC3C,UAAU,aAAa,UAAU,KAAK,KACvC,eAAe,2BAA2B;CAE5C,MAAM,EACJ,OAAO,aACP,UAAU,gBACV,aACA,GAAG,oBACD,eAAe,EAAE;CAErB,MAAM,0BAA0B,EAAE,GAAG,gBAAgB;AAErD,QAAO,wBAAwB;AAC/B,QAAO,wBAAwB;AAE/B,QACE,qBAAC,MAAD;EAAiB;YAAjB,CACE,oBAAC,YAAD;GACE,GAAI;GACJ,GAAK,cACD,EAAE,aAAa,GACf;IAAE,OAAO,eAAe;IAAO,UAAU;IAAgB;GAC7D,CAAA,EACF,oBAAC,oBAAD;GACS;GACP,MACE,oBAACA,cAAD,EAAA,UACE,qBAACA,aAAK,MAAN,EAAA,UAAA,CACG,QACD,oBAAC,WAAD;IACE,GAAI;IACK;IACT,OAAO;IACP,cAAA;IACA,UAAU;KAAE,GAAG;KAAU;KAA0B;IACnD,oBAAoB;IACpB,CAAA,CACQ,EAAA,CAAA,EACP,CAAA;GAET,CAAA,CACG"}

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-BVVdBeN-.mjs";
+import { t as Card_default } from "../../CardV2-DO-8COfu.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-9mNn8Q-d.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-6KvtGED-.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,5 +1,6 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { fadeIn, rotate } from "../../variables/keyframes.mjs";
+import "../../variables/transitions.mjs";
 import { Color } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/LayoutLoadingSpinner/LayoutLoadingSpinner.tsx
@@ -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.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-CPiVnS_r.mjs";
 export { Backdrop, Container, Section, SingleColumnLayout, SplitColumnLayout };

package/dist/patterns/WizardModal/index.mjs

@@ -1,8 +1,8 @@
 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 { n as Button } from "../../IconButton-Bj1fry_K.mjs";
+import { i as Modal_default } from "../../Modal-CiPFqr0L.mjs";
 import { t as ProgressIndicator } from "../../ProgressIndicator-zt3ndT9U.mjs";
 import { useState } from "react";
 import { Color, Spacing } from "@persona/design-tokens";

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/{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-BiqzeNsa.d.mts → types-Dws2XDz2.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-D6OrKCTC.mjs";
+import { l as MenuItemProps } from "./Menu-DviYNrFd.mjs";
 import { o as StickerProps } from "./Sticker-CLvRB8V5.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-Dws2XDz2.d.mts.map

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

@@ -1,4 +1,4 @@
-import { n as ComboboxProps } from "./Combobox-CIKqTYZt.mjs";
+import { n as ComboboxProps } from "./Combobox-DbcSss15.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-NO2GRlM-.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-NO2GRlM-.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/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