@persona/design-system 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.7.2 (2026-09-29)
+
+### Features
+
+- **design-system:** add WizardModal with progress and step chrome
+- **design-system:** add Accordion component
+- **design-system:** render a required asterisk on FormLabel from the required prop
+- **design-system:** add single and split page layouts
+
+### Bug Fixes
+
+- **design-system:** send a saved-view rename once instead of up to three times
+- **design-system:** stop ControlBar saved-view tabs oscillating at some widths
+- **design-system:** drive WizardModal confirm pending state from submit lock
+- **design-system:** read Accordion colors through semanticColor
+- **design-system:** use FgDanger1 semantic token for required asterisk
+
 ## 0.7.1 (2026-09-24)
 
 ### Bug Fixes

package/README.md

@@ -8,20 +8,20 @@ This project contains everything related to the Persona Design System.
 yarn add @persona/design-system @persona/design-tokens @persona/icons 'styled-components@^5.3.5'
 ```
 
-`@persona/design-tokens`, `@persona/icons`, and `styled-components` are peer dependencies, so
-they must be installed alongside the design system — Yarn does not add them for you. PDS requires
+`@persona/design-tokens`, `@persona/icons`, and `styled-components` are peer dependencies, so they
+must be installed alongside the design system — Yarn does not add them for you. PDS requires
 `styled-components` v5; v6 is a breaking major.
 
 ## Skills for AI coding agents
 
-The package bundles an [Agent Skill](https://agentskills.io) under `skills/ui-authoring/`,
-versioned alongside the components it documents:
+The package bundles an [Agent Skill](https://agentskills.io) under `skills/ui-authoring/`, versioned
+alongside the components it documents:
 
-| File            | Contents                                                                                |
-| --------------- | --------------------------------------------------------------------------------------- |
-| `SKILL.md`      | Design tokens, component-first guidance, and the rules that matter most when writing UI |
-| `TOKENS.md`     | `Color` / `Spacing` / `Typography` selection and catalog                                |
-| `PATTERNS.md`   | Forms, layout, indicators, feedback, empty states, panels                                |
+| File            | Contents                                                                                                                                 |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `SKILL.md`      | Design tokens, component-first guidance, and the rules that matter most when writing UI                                                  |
+| `TOKENS.md`     | `Color` / `Spacing` / `Typography` selection and catalog                                                                                 |
+| `PATTERNS.md`   | Forms, layout, indicators, feedback, empty states, panels                                                                                |
 | `COMPONENTS.md` | Which PDS component to use (and its import path); APIs live in each component's `.mdx` when one exists, otherwise in the published types |
 
 Point your agent at `node_modules/@persona/design-system/skills/ui-authoring/SKILL.md`, or copy the

package/dist/Accordion.d.mts

@@ -0,0 +1,38 @@
+import { n as AccordionTitleTypography, t as AccordionSize } from "./accordionTitleTypography-BYhjSN9t.mjs";
+import { AccordionTitleHeadingAs } from "./AccordionItem.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Accordion/Accordion.d.ts
+type AccordionItemProps = {
+  id?: string;
+  title: string;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  disabled?: boolean;
+};
+type AccordionProps = {
+  items: AccordionItemProps[];
+  size?: AccordionSize;
+  dividers?: boolean;
+  titleTypography?: AccordionTitleTypography;
+  /**
+   * Heading element for each item title (inside the trigger), matching Card section headings.
+   * Defaults to `h3`; use a lower level when the page already uses higher headings.
+   */
+  titleHeadingAs?: AccordionTitleHeadingAs;
+  'aria-label'?: string;
+  className?: string;
+};
+declare const Accordion: ({
+  items,
+  size,
+  dividers,
+  titleTypography,
+  titleHeadingAs,
+  "aria-label": ariaLabel,
+  className
+}: AccordionProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Accordion, Accordion as default, AccordionItemProps, AccordionProps };
+//# sourceMappingURL=Accordion.d.mts.map

package/dist/AccordionItem.d.mts

@@ -0,0 +1,31 @@
+import { n as AccordionTitleTypography, t as AccordionSize } from "./accordionTitleTypography-BYhjSN9t.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Accordion/AccordionItem.d.ts
+type AccordionTitleHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type AccordionItemComponentProps = {
+  title: string;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  disabled?: boolean;
+  showDivider?: boolean;
+  size: AccordionSize;
+  titleTypography: AccordionTitleTypography;
+  usesTitleTypographyOverride: boolean;
+  titleHeadingAs: AccordionTitleHeadingAs;
+};
+declare const AccordionItem: ({
+  title,
+  children,
+  defaultExpanded,
+  disabled,
+  showDivider,
+  size,
+  titleTypography,
+  usesTitleTypographyOverride,
+  titleHeadingAs
+}: AccordionItemComponentProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AccordionItemComponentProps, type AccordionSize, AccordionTitleHeadingAs, type AccordionTitleTypography, AccordionItem as default };
+//# sourceMappingURL=AccordionItem.d.mts.map

package/dist/{Action-C7INft7X.d.mts → Action-Cyo6KCsS.d.mts}

@@ -1,5 +1,5 @@
-import { n as Tooltip } from "./Tooltip-Cnqf1-tx.mjs";
-import { t as RequireOneOf } from "./utilities-D0EhDri-.mjs";
+import { n as Tooltip } from "./Tooltip-x1pFf-Mj.mjs";
+import { t as RequireOneOf } from "./utilities-BcGuP8Fd.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, ReactElement } from "react";
 
 //#region types/Action.d.ts
@@ -32,4 +32,4 @@ type MenuAction = Action & {
 };
 //#endregion
 export { TextAction as i, IconAction as n, MenuAction as r, Action as t };
-//# sourceMappingURL=Action-C7INft7X.d.mts.map
+//# sourceMappingURL=Action-Cyo6KCsS.d.mts.map

package/dist/Action.d.mts

@@ -1,2 +1,2 @@
-import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-C7INft7X.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-Cyo6KCsS.mjs";
 export { Action, IconAction, MenuAction, TextAction };

package/dist/AdvancedFilterRuleRow.d.mts

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-N8PYonjD.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BdtxI1N2.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-BEjWTkZV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-bKxrF1gC.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/AdvancedFilterRulesPopover.d.mts

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, n as CompoundExpression, u as FilterRuleValue } from "./types-N8PYonjD.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BdtxI1N2.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, n as CompoundExpression, u as FilterRuleValue } from "./types-BEjWTkZV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-bKxrF1gC.mjs";
 import { ReactElement, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/ArrayValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-gnF3MPfk2.mjs";
+import { t as ValueControlProps } from "./types-3iEDsymE.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/ArrayValueControl/ArrayValueControl.d.ts

package/dist/Attribute.d.mts

@@ -1,6 +1,6 @@
-import { i as ParagraphSize } from "./text-DjTGRUM1.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-DD_W_ixb.mjs";
-import { t as MaybeSemanticTheme } from "./semanticColor-IAhXS17y.mjs";
+import { i as ParagraphSize } from "./text-CxIup7HJ.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-B69gp3X_.mjs";
+import { t as MaybeSemanticTheme } from "./semanticColor-Cru2gSys.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";

package/dist/BooleanValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-gnF3MPfk2.mjs";
+import { t as ValueControlProps } from "./types-3iEDsymE.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/BooleanValueControl/BooleanValueControl.d.ts

package/dist/{Breadcrumb-DtW1R9xW.d.mts → Breadcrumb-CYXkrKXl.d.mts}

@@ -49,4 +49,4 @@ declare const Breadcrumb: ({
 }: BreadcrumbProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { BreadcrumbSize as i, BreadcrumbHeadingAs as n, BreadcrumbProps as r, Breadcrumb as t };
-//# sourceMappingURL=Breadcrumb-DtW1R9xW.d.mts.map
+//# sourceMappingURL=Breadcrumb-CYXkrKXl.d.mts.map

package/dist/Breadcrumb.d.mts

@@ -1,2 +1,2 @@
-import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps, t as Breadcrumb } from "./Breadcrumb-DtW1R9xW.mjs";
+import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps, t as Breadcrumb } from "./Breadcrumb-CYXkrKXl.mjs";
 export { BreadcrumbHeadingAs, BreadcrumbProps, BreadcrumbSize, Breadcrumb as default };

package/dist/{Breadcrumbs-B6JyoS8n.d.mts → Breadcrumbs-CP7eUYUy.d.mts}

@@ -1,4 +1,4 @@
-import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-DtW1R9xW.mjs";
+import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-CYXkrKXl.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Breadcrumbs/Breadcrumbs.d.ts
@@ -23,4 +23,4 @@ declare const Breadcrumbs: ({
 }: BreadcrumbsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { BreadcrumbsItemProps as n, BreadcrumbsProps as r, Breadcrumbs as t };
-//# sourceMappingURL=Breadcrumbs-B6JyoS8n.d.mts.map
+//# sourceMappingURL=Breadcrumbs-CP7eUYUy.d.mts.map

package/dist/Breadcrumbs.d.mts

@@ -1,2 +1,2 @@
-import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "./Breadcrumbs-B6JyoS8n.mjs";
+import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "./Breadcrumbs-CP7eUYUy.mjs";
 export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };

package/dist/{Button-HodDf_bB.d.mts → Button-Dhiund3f.d.mts}

@@ -1,6 +1,6 @@
-import { i as To } from "./types-CuQSgl1F.mjs";
-import { t as PseudoClassProps } from "./PseudoClassProps-CdRF3QNn.mjs";
-import { n as ButtonVariant } from "./palette-qgPRWgUN.mjs";
+import { i as To } from "./types-B-stjYNc.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-CHtBNv8B.mjs";
+import { n as ButtonVariant } from "./palette-CMOEyNPH.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, HTMLAttributeAnchorTarget, MouseEvent, ReactNode, Ref } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -108,4 +108,4 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'>, Omit<PseudoCla
 declare const Button: _$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SuffixIconContainer as a, StyledButton as i, ButtonChildren as n, ButtonProps as r, Button as t };
-//# sourceMappingURL=Button-HodDf_bB.d.mts.map
+//# sourceMappingURL=Button-Dhiund3f.d.mts.map

package/dist/Button.d.mts

@@ -1,2 +1,2 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-HodDf_bB.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-Dhiund3f.mjs";
 export { ButtonChildren, ButtonProps, StyledButton, SuffixIconContainer, Button as default };

package/dist/{Calendar-DrdTvzAa.d.mts → Calendar-CMeIZ0BO.d.mts}

@@ -9,4 +9,4 @@ interface CalendarProps extends AriaCalendarProps<DateValue> {
 declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Calendar as t };
-//# sourceMappingURL=Calendar-DrdTvzAa.d.mts.map
+//# sourceMappingURL=Calendar-CMeIZ0BO.d.mts.map

package/dist/Calendar.d.mts

@@ -1,2 +1,2 @@
-import { t as Calendar } from "./Calendar-DrdTvzAa.mjs";
+import { t as Calendar } from "./Calendar-CMeIZ0BO.mjs";
 export { Calendar as default };

package/dist/CalendarBase.d.mts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "./IconButton-zu-VNp1h.mjs";
+import { n as IconButtonProps } from "./IconButton-CjPFhpVG.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/{Card-CpDwATnX.d.mts → Card-DCYB_mtR.d.mts}

@@ -1,5 +1,5 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-DD_W_ixb.mjs";
-import { i as HeaderProps } from "./Header-ZnHGm8fs.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-B69gp3X_.mjs";
+import { i as HeaderProps } from "./Header-BqEKkEp5.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -72,4 +72,4 @@ declare const _default: typeof Card & {
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-CpDwATnX.d.mts.map
+//# sourceMappingURL=Card-DCYB_mtR.d.mts.map

package/dist/Card.d.mts

@@ -1,2 +1,2 @@
-import { n as SectionProps, r as _default, t as CardProps } from "./Card-CpDwATnX.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "./Card-DCYB_mtR.mjs";
 export { CardProps, SectionProps, _default as default };

package/dist/{Checkbox-CyWXhuby.mjs → Checkbox-AjL7ucoR.mjs}

@@ -7,7 +7,7 @@ import { isChecked, isDisabled, isFocusedVisible, isHovered, isIndeterminate, is
 import useControlled from "./lib/useControlled.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
 import { n as Stack } from "./Stack-ChsImaEY.mjs";
-import { n as useFormField } from "./useFormField-DsvC5dOb.mjs";
+import { n as useFormField } from "./useFormField-BzhMbl5P.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -177,4 +177,4 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 //#endregion
 export { Checkbox as t };
 
-//# sourceMappingURL=Checkbox-CyWXhuby.mjs.map
+//# sourceMappingURL=Checkbox-AjL7ucoR.mjs.map

package/dist/{Checkbox-CyWXhuby.mjs.map → Checkbox-AjL7ucoR.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-CyWXhuby.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  ${({ checked, theme }) =>\n    checked &&\n    css`\n      border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n      background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n      &${isDisabled} {\n        border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n        background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : undefined}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAM,YAAY,OAAO,MAAM;;;;;;KAM1B,EAAE,WACH,SAAS,QACT,GAAG;;MAED;;KAED,WAAW;;;;AAKhB,MAAM,cAAc,OAAO,GAA8C;;;;;;;yBAOhC;+BACM;2BACJ;;YAE/B,QAAQ,GAAG;WACZ,QAAQ,GAAG;;uBAEC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,uBAAuB,CAAC;;;cAG3F,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;;KAGxF,WAAW;;mBAEG,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;KAGtE,EAAE,SAAS,YACZ,WACA,GAAG;sBACe,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;oBACzE,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;SAEnF,WAAW;wBACI,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;sBAC1F,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;MAExG;;AAGN,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;KAU7B,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU,KAAK,gBAAgB;OAC7B,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;AAIjB,MAAM,QAAQ,OAAO,KAA+C;;YAExD,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;KAE1E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;;;;;UAKxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AA0CN,MAAa,WAAW,WAA4C,SAAS,SAC3E,EACE,WACA,UACA,eACA,UACA,SAAS,aACT,gBACA,IACA,OACA,aAAa,UACb,gBACA,OACA,OAAO,MACP,SACA,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,CAAC,SAAS,cAAc,cAAc;EAC1C,iBAAiB;EACjB,SAAS;EACV,CAAC;CACF,MAAM,cAAc,cAAc,SAAS,iBAAiB,EAAE,EAAE,CAAC;CACjE,MAAM,WAAW,QAA0B;CAG3C,MAAM,UAAU,MAAM,WAAW,MAAM;AAGvC,qBAAoB,WAAW,SAAS,SAAS,CAAC,SAAS,CAAC;AAE5D,iBAAgB;AACd,MAAI,SAAS,QAEX,UAAS,QAAQ,gBAAgB;IAElC,CAAC,eAAe,SAAS,CAAC;AAE7B,QACE,qBAAC,WAAD;EACE,WAAU;EACC;EACX,aAAW;EACX,UAAU,MAAM;EAChB,OAAM;EACA;EACN,GAAI;YAPN;GASE,oBAAC,eAAD;IACE,IAAI;IAEJ,KAAK;IACL,aAAW,YAAY,GAAG,SAAS;IACnC,UAAU,MAAM;IAChB,MAAK;IACL,SAAS,eAAe,OAAO,KAAA,IAAY;IAC3B;IAChB,WAAW,MAAM;AACf,gBAAW,EAAE,OAAO,QAAQ;AAC5B,SAAI,SACF,UAAS,EAAE;;IAGf,gBAAc,gBAAgB,UAAU,KAAA;IACjC;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD;IACE,eAAY;IACZ,UAAU,MAAM;IAChB,SAAU,WAAW,QAAQ,WAAY;cAExC,gBAAgB,oBAAC,eAAD,EAAiB,CAAA,GAAG,UAAU,oBAAC,gBAAD,EAAkB,CAAA,GAAG;IACxD,CAAA;GACb,UACE,UACC,oBAAC,SAAD;IACQ;IACN,SACE,oBAAC,OAAD;KAAO,SAAS;KAAS,UAAU,CAAC,CAAC,MAAM;KAAgB;eACzD,oBAAC,yBAAD,EAAA,UAA0B,OAAgC,CAAA;KACpD,CAAA;cAGT;IACO,CAAA,GAEV,oBAAC,OAAD;IAAO,SAAS;IAAS,UAAU,CAAC,CAAC,MAAM;IAAgB;cACxD;IACK,CAAA;GAEF;;EAEd"}
+{"version":3,"file":"Checkbox-AjL7ucoR.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  ${({ checked, theme }) =>\n    checked &&\n    css`\n      border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n      background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n      &${isDisabled} {\n        border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n        background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : undefined}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/{Checkbox-C-hMfItK.d.mts → Checkbox-fWj7GkBl.d.mts}

@@ -43,4 +43,4 @@ interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value'
 declare const Checkbox: _$react.ForwardRefExoticComponent<CheckboxProps & _$react.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { CheckboxProps as n, Checkbox as t };
-//# sourceMappingURL=Checkbox-C-hMfItK.d.mts.map
+//# sourceMappingURL=Checkbox-fWj7GkBl.d.mts.map

package/dist/Checkbox.d.mts

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "./Checkbox-C-hMfItK.mjs";
+import { n as CheckboxProps, t as Checkbox } from "./Checkbox-fWj7GkBl.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/CheckboxGroupField.d.mts

@@ -1,4 +1,4 @@
-import { n as CheckboxProps } from "./Checkbox-C-hMfItK.mjs";
+import { n as CheckboxProps } from "./Checkbox-fWj7GkBl.mjs";
 import { ImplementsFormField } from "./inputFields.mjs";
 import { ReactElement } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/ChoicesValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-gnF3MPfk2.mjs";
+import { t as ValueControlProps } from "./types-3iEDsymE.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/ChoicesValueControl/ChoicesValueControl.d.ts

package/dist/{Combobox-1M6EwVmq.mjs → Combobox-C2b9u955.mjs}

@@ -7,11 +7,11 @@ import { focusStyle } from "./mixins/focus.mjs";
 import { n as Stack } from "./Stack-ChsImaEY.mjs";
 import { n as Button } from "./IconButton-CqTPMhjV.mjs";
 import { n as Sticker } from "./Sticker-C3Eb13OQ.mjs";
-import { n as useFormField } from "./useFormField-DsvC5dOb.mjs";
-import { r as InputGroup } from "./Input-Bc2yWH3j.mjs";
+import { n as useFormField } from "./useFormField-BzhMbl5P.mjs";
+import { r as InputGroup } from "./Input-C_3QwAAt.mjs";
 import Input_default from "./components/Input/index.mjs";
 import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-Cd6oxjAe.mjs";
-import { t as Checkbox } from "./Checkbox-CyWXhuby.mjs";
+import { t as Checkbox } from "./Checkbox-AjL7ucoR.mjs";
 import { t as Spinner } from "./Spinner-DplDSBqf.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -748,7 +748,7 @@ const CheckboxLabel = styled.span`
   position: relative;
   bottom: -1px;
 `;
-function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOptionsLoading, values = [], onValuesChange, searchPlaceholder = "Search...", onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, truncate = false, selectAll = false, stableOptionOrder = false, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, virtualize = false, footerAction, ...props }, ref) {
+function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOptionsLoading, values = [], onValuesChange, searchPlaceholder = "Search...", onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, truncate = false, selectAll = false, stableOptionOrder = false, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, virtualize = false, footerAction, ...props }, ref) {
 	const options = useMemo(() => containsNestedGroup(rawOptions) ? inlineNestedGroups(rawOptions) : rawOptions, [rawOptions]);
 	const field = useFormField({
 		hasWarning,
@@ -1187,6 +1187,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
 					"aria-errormessage": field.hasError ? field.errorTextId : void 0,
 					"aria-invalid": field.hasError,
+					"aria-required": required || void 0,
 					preventKeyAction: isMenuOpen,
 					onKeyDown: handleKeyDown
 				})),
@@ -1400,7 +1401,7 @@ const StickerComboboxInput = styled(ComboboxInput)`
   color: transparent;
   caret-color: transparent;
 `;
-function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, footerAction, ...props }, ref) {
+function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, footerAction, ...props }, ref) {
 	const field = useFormField({
 		hasWarning,
 		hasError,
@@ -1757,6 +1758,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
 		"aria-errormessage": field.hasError ? field.errorTextId : void 0,
 		"aria-invalid": field.hasError,
+		"aria-required": required || void 0,
 		onKeyDown: handleKeyDown
 	});
 	if (isFooterHighlighted) searchInputProps["aria-activedescendant"] = footerActionId;
@@ -1771,6 +1773,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
 		"aria-errormessage": field.hasError ? field.errorTextId : void 0,
 		"aria-invalid": field.hasError,
+		"aria-required": required || void 0,
 		onKeyDown: handleKeyDown
 	});
 	if (isFooterHighlighted) mainInputProps["aria-activedescendant"] = footerActionId;
@@ -1885,4 +1888,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
 
-//# sourceMappingURL=Combobox-1M6EwVmq.mjs.map
+//# sourceMappingURL=Combobox-C2b9u955.mjs.map