@persona/design-system 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 Summary of changes to the @persona/design-system package.
 
+## [0.1.7] - 2026-07-22
+
+- **2026-07-21**: Applied Typography styling to Pagination text ([5c93576](https://github.com/persona-id/persona-web/commit/5c93576b28408a82647e3f270a5bf4fa2b1c1a7e))
+- **2026-07-21**: Hid the TableBox delete icon while an input in the last column has focus, preventing it from obscuring the field ([3175a8](https://github.com/persona-id/persona-web/commit/3175a88a1723c372987eba6d5b78c32337591e1d))
+- **2026-07-21**: Fixed Combobox multi-select crashing on input blur by avoiding access to state before initialization ([7906b5f](https://github.com/persona-id/persona-web/commit/7906b5fcf715a61ce5fc7e018a339e3ba537b208))
+- **2026-07-21**: Added grouped options support to Combobox single-selects ([1b2eb9c](https://github.com/persona-id/persona-web/commit/1b2eb9c0e7a8b338dacb2c106aeee3ddbfe45121))
+- **2026-07-20**: Vertically centered Badge content in TabBar tabs ([d3e3c71](https://github.com/persona-id/persona-web/commit/d3e3c7194ae697038a3d3c676703a1f478712b82))
+- **2026-07-20**: Added grouped TableBox row actions, including FormField configuration and stories ([fb4040e](https://github.com/persona-id/persona-web/commit/fb4040e3f72c2c52215d294731552c8eb9cd145c))
+- **2026-07-18**: Replaced design-token imports with the published `@persona/design-tokens` package paths ([69c8fff](https://github.com/persona-id/persona-web/commit/69c8fffdbbafc774ae4c0f8ae6d512fe6fde40ca))
+- **2026-07-18**: Corrected LoadingShimmer Storybook titles ([523a048](https://github.com/persona-id/persona-web/commit/523a0487aa9230561f6e732f42b3a486de05c159))
+- **2026-07-17**: Made TableBox empty-state stories interactive ([283c9d2](https://github.com/persona-id/persona-web/commit/283c9d23da0db31b3730e088d3bbc6b2e78d2915))
+- **2026-07-17**: Closed ListBox and TableBox action menus after selecting an action ([be21738](https://github.com/persona-id/persona-web/commit/be217384f5fbdb7d96af70f68b9f6c92a7bfe8e4))
+- **2026-07-17**: Enabled DateRangePicker popovers to render correctly inside modals ([252b505](https://github.com/persona-id/persona-web/commit/252b5051f4d2848ab94a9119b33bd2e1ba06920a))
+- **2026-07-17**: Clarified TableBox empty-state stories ([1357982](https://github.com/persona-id/persona-web/commit/1357982c77111abbb171551ae1756a51d41606ef))
+- **2026-07-17**: Added the missing `onDisplayedRowIdsChange` callback to DataTable stories ([df86f80](https://github.com/persona-id/persona-web/commit/df86f8046f83aea5e9b0794f9f3ad3f82e0f58a1))
+- **2026-07-17**: Removed locally emptied TableBox rows ([cb42880](https://github.com/persona-id/persona-web/commit/cb428802302eb96ce9cbb4c8679caf40f645447a))
+- **2026-07-16**: Added actionable TableBox empty states ([096927a](https://github.com/persona-id/persona-web/commit/096927a03bec1234254507e2836b9e7d4a361088))
+- **2026-07-16**: Added TableBox cell and row error states with delayed inline-edit validation ([95bd33c](https://github.com/persona-id/persona-web/commit/95bd33c21e40399ca5d1a4769ebfee71437e0991))
+- **2026-07-14**: Made Modal layouts align with share-token dialogs ([790a130](https://github.com/persona-id/persona-web/commit/790a130ca5782b3c04ee3a83fafadb94bc430f95))
+- **2026-07-13**: Bumped TypeScript to v7 in the package toolchain ([2db7196](https://github.com/persona-id/persona-web/commit/2db7196f4eac9ba829eb2ddef899d5d34b7384b3))
+- **2026-07-06**: Added Breadcrumb and Breadcrumbs components with keyboard, overflow, and accessibility support ([247d300](https://github.com/persona-id/persona-web/commit/247d3005cd49a38f148658c7e0f6eb79cdeda6be))
+
 ## [0.1.6] - 2026-07-16
 
 - **2026-07-16**: Promoted the DataTable component into the design system — the full table renderer (`DataTable`, `DataTableContainer`, `DataTableControls`, `FloatingActionBarContainer` exports) — and added a `HoverCopyableField` component that reveals a copy-to-clipboard affordance on hover ([787bd8d](https://github.com/persona-id/persona-web/commit/787bd8d330a13206b3dccb66c8372782894c02aa))

package/dist/{Action-DSg3yZck.d.mts → Action-DkNqzc2X.d.mts}

@@ -1,5 +1,5 @@
-import { n as Tooltip } from "./Tooltip-DtWJO_kU.mjs";
-import { t as RequireOneOf } from "./utilities-DT-Hh45R.mjs";
+import { n as Tooltip } from "./Tooltip-DRgufW3i.mjs";
+import { t as RequireOneOf } from "./utilities-SMbDe8oK.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-DSg3yZck.d.mts.map
+//# sourceMappingURL=Action-DkNqzc2X.d.mts.map

package/dist/{Action-uduFOh2m.d.cts → Action-z1rV4qON.d.cts}

@@ -1,5 +1,5 @@
-import { n as Tooltip } from "./Tooltip-CE1oH6Iz.cjs";
-import { t as RequireOneOf } from "./utilities-C8Jf-xpi.cjs";
+import { n as Tooltip } from "./Tooltip-BhGRP9QA.cjs";
+import { t as RequireOneOf } from "./utilities-DqO6Sh94.cjs";
 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-uduFOh2m.d.cts.map
+//# sourceMappingURL=Action-z1rV4qON.d.cts.map

package/dist/Action.d.cts

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

package/dist/Action.d.mts

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

package/dist/Attribute.d.mts

@@ -1,6 +1,6 @@
-import { n as IconButtonProps } from "./IconButton-DggxojBH.mjs";
-import { i as ParagraphSize } from "./text-BEKhEWTa.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-CPd0r0w2.mjs";
+import { n as IconButtonProps } from "./IconButton-Dnnlf9uO.mjs";
+import { i as ParagraphSize } from "./text-CtoDqqAO.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-D3FXEnG6.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";

package/dist/{Badge-CvdUyXSH.cjs → Badge-DAGPU4-e.cjs}

@@ -25,9 +25,6 @@ const Badge = (0, styled_components.default)(({ variant, ...rest }) => {
     border-radius: 100px;
     span {
       font-size: 10px;
-
-      /* Need to reset the visual alignment for numbers on badges here */
-      transform: none;
     }
   `);
 //#endregion
@@ -38,4 +35,4 @@ Object.defineProperty(exports, "Badge", {
 	}
 });
 
-//# sourceMappingURL=Badge-CvdUyXSH.cjs.map
+//# sourceMappingURL=Badge-DAGPU4-e.cjs.map

package/dist/{Badge-CvdUyXSH.cjs.map → Badge-DAGPU4-e.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Badge-CvdUyXSH.cjs","names":["Sticker"],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n  /**\n   * When rendered on a secondary background (e.g. inside a panel or card with\n   * a grey fill), set this to true so the component adjusts its colours\n   * appropriately for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n  /**\n   * Semantic colour variant for the badge.\n   *\n   * - `basic` – neutral grey, for informational counts or labels (default).\n   * - `active` – purple, to highlight an active or selected state.\n   * - `alert` – red/danger, to draw attention to errors or urgent counts.\n   *\n   * @defaultValue 'basic'\n   */\n  variant?: 'alert' | 'active' | 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n  let variantProp: StickerProps['variant'];\n  switch (variant) {\n    case 'alert':\n      variantProp = 'danger';\n      break;\n    case 'active':\n      variantProp = 'purple';\n      break;\n    case 'basic':\n    default:\n      variantProp = 'grey';\n  }\n\n  return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n  () => css`\n    min-width: 16px;\n    text-align: center;\n    border-radius: 100px;\n    span {\n      font-size: 10px;\n\n      /* Need to reset the visual alignment for numbers on badges here */\n      transform: none;\n    }\n  `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/**\n * The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n *\n * We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;;;AAuBA,MAAa,SAAA,GAAA,kBAAA,UAAgB,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,kBAAA,GAAG;;;;;;;;;;IAWV"}
+{"version":3,"file":"Badge-DAGPU4-e.cjs","names":["Sticker"],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n  /**\n   * When rendered on a secondary background (e.g. inside a panel or card with\n   * a grey fill), set this to true so the component adjusts its colours\n   * appropriately for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n  /**\n   * Semantic colour variant for the badge.\n   *\n   * - `basic` – neutral grey, for informational counts or labels (default).\n   * - `active` – purple, to highlight an active or selected state.\n   * - `alert` – red/danger, to draw attention to errors or urgent counts.\n   *\n   * @defaultValue 'basic'\n   */\n  variant?: 'alert' | 'active' | 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n  let variantProp: StickerProps['variant'];\n  switch (variant) {\n    case 'alert':\n      variantProp = 'danger';\n      break;\n    case 'active':\n      variantProp = 'purple';\n      break;\n    case 'basic':\n    default:\n      variantProp = 'grey';\n  }\n\n  return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n  () => css`\n    min-width: 16px;\n    text-align: center;\n    border-radius: 100px;\n    span {\n      font-size: 10px;\n    }\n  `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/**\n * The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n *\n * We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;;;AAuBA,MAAa,SAAA,GAAA,kBAAA,UAAgB,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,kBAAA,GAAG;;;;;;;IAQV"}

package/dist/{Badge-pq6B-3ue.mjs → Badge-DRn_r6is.mjs}

@@ -23,12 +23,9 @@ const Badge = styled(({ variant, ...rest }) => {
     border-radius: 100px;
     span {
       font-size: 10px;
-
-      /* Need to reset the visual alignment for numbers on badges here */
-      transform: none;
     }
   `);
 //#endregion
 export { Badge as t };
 
-//# sourceMappingURL=Badge-pq6B-3ue.mjs.map
+//# sourceMappingURL=Badge-DRn_r6is.mjs.map

package/dist/{Badge-pq6B-3ue.mjs.map → Badge-DRn_r6is.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Badge-pq6B-3ue.mjs","names":[],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n  /**\n   * When rendered on a secondary background (e.g. inside a panel or card with\n   * a grey fill), set this to true so the component adjusts its colours\n   * appropriately for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n  /**\n   * Semantic colour variant for the badge.\n   *\n   * - `basic` – neutral grey, for informational counts or labels (default).\n   * - `active` – purple, to highlight an active or selected state.\n   * - `alert` – red/danger, to draw attention to errors or urgent counts.\n   *\n   * @defaultValue 'basic'\n   */\n  variant?: 'alert' | 'active' | 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n  let variantProp: StickerProps['variant'];\n  switch (variant) {\n    case 'alert':\n      variantProp = 'danger';\n      break;\n    case 'active':\n      variantProp = 'purple';\n      break;\n    case 'basic':\n    default:\n      variantProp = 'grey';\n  }\n\n  return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n  () => css`\n    min-width: 16px;\n    text-align: center;\n    border-radius: 100px;\n    span {\n      font-size: 10px;\n\n      /* Need to reset the visual alignment for numbers on badges here */\n      transform: none;\n    }\n  `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/**\n * The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n *\n * We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;AAuBA,MAAa,QAAQ,QAAQ,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,oBAAC,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,GAAG;;;;;;;;;;IAWV"}
+{"version":3,"file":"Badge-DRn_r6is.mjs","names":[],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n  /**\n   * When rendered on a secondary background (e.g. inside a panel or card with\n   * a grey fill), set this to true so the component adjusts its colours\n   * appropriately for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n  /**\n   * Semantic colour variant for the badge.\n   *\n   * - `basic` – neutral grey, for informational counts or labels (default).\n   * - `active` – purple, to highlight an active or selected state.\n   * - `alert` – red/danger, to draw attention to errors or urgent counts.\n   *\n   * @defaultValue 'basic'\n   */\n  variant?: 'alert' | 'active' | 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n  let variantProp: StickerProps['variant'];\n  switch (variant) {\n    case 'alert':\n      variantProp = 'danger';\n      break;\n    case 'active':\n      variantProp = 'purple';\n      break;\n    case 'basic':\n    default:\n      variantProp = 'grey';\n  }\n\n  return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n  () => css`\n    min-width: 16px;\n    text-align: center;\n    border-radius: 100px;\n    span {\n      font-size: 10px;\n    }\n  `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/**\n * The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n *\n * We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;AAuBA,MAAa,QAAQ,QAAQ,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,oBAAC,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,GAAG;;;;;;;IAQV"}

package/dist/Breadcrumb-BOxfam3E.d.cts

@@ -0,0 +1,31 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Breadcrumbs/Breadcrumb.d.ts
+type BreadcrumbSize = 'md' | 'lg';
+type BreadcrumbProps = {
+  label: string;
+  size?: BreadcrumbSize;
+  current?: boolean;
+  showCopyAction?: boolean;
+  copyValue?: string;
+  copyTooltipLabel?: string; /** Internal dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. */
+  href?: string;
+  onEdit?: (newLabel: string) => void;
+  editMaxLength?: number;
+  onCopy?: () => void;
+};
+declare const Breadcrumb: ({
+  label,
+  size,
+  current,
+  showCopyAction,
+  copyValue,
+  copyTooltipLabel,
+  href,
+  onEdit,
+  editMaxLength,
+  onCopy
+}: BreadcrumbProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BreadcrumbProps as n, BreadcrumbSize as r, Breadcrumb as t };
+//# sourceMappingURL=Breadcrumb-BOxfam3E.d.cts.map

package/dist/Breadcrumb-On7pOpgt.d.mts

@@ -0,0 +1,31 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Breadcrumbs/Breadcrumb.d.ts
+type BreadcrumbSize = 'md' | 'lg';
+type BreadcrumbProps = {
+  label: string;
+  size?: BreadcrumbSize;
+  current?: boolean;
+  showCopyAction?: boolean;
+  copyValue?: string;
+  copyTooltipLabel?: string; /** Internal dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. */
+  href?: string;
+  onEdit?: (newLabel: string) => void;
+  editMaxLength?: number;
+  onCopy?: () => void;
+};
+declare const Breadcrumb: ({
+  label,
+  size,
+  current,
+  showCopyAction,
+  copyValue,
+  copyTooltipLabel,
+  href,
+  onEdit,
+  editMaxLength,
+  onCopy
+}: BreadcrumbProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BreadcrumbProps as n, BreadcrumbSize as r, Breadcrumb as t };
+//# sourceMappingURL=Breadcrumb-On7pOpgt.d.mts.map

package/dist/Breadcrumb.d.cts

@@ -0,0 +1,2 @@
+import { n as BreadcrumbProps, r as BreadcrumbSize, t as Breadcrumb } from "./Breadcrumb-BOxfam3E.cjs";
+export { BreadcrumbProps, BreadcrumbSize, Breadcrumb as default };

package/dist/Breadcrumb.d.mts

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

package/dist/Breadcrumbs.d.cts

@@ -0,0 +1,20 @@
+import { n as BreadcrumbProps, r as BreadcrumbSize } from "./Breadcrumb-BOxfam3E.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Breadcrumbs/Breadcrumbs.d.ts
+type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' | 'current'>;
+type BreadcrumbsProps = {
+  items: BreadcrumbsItemProps[];
+  size?: BreadcrumbSize;
+  'aria-label'?: string;
+  className?: string;
+};
+declare const Breadcrumbs: ({
+  items,
+  size,
+  "aria-label": ariaLabel,
+  className
+}: BreadcrumbsProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };
+//# sourceMappingURL=Breadcrumbs.d.cts.map

package/dist/Breadcrumbs.d.mts

@@ -0,0 +1,20 @@
+import { n as BreadcrumbProps, r as BreadcrumbSize } from "./Breadcrumb-On7pOpgt.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Breadcrumbs/Breadcrumbs.d.ts
+type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' | 'current'>;
+type BreadcrumbsProps = {
+  items: BreadcrumbsItemProps[];
+  size?: BreadcrumbSize;
+  'aria-label'?: string;
+  className?: string;
+};
+declare const Breadcrumbs: ({
+  items,
+  size,
+  "aria-label": ariaLabel,
+  className
+}: BreadcrumbsProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };
+//# sourceMappingURL=Breadcrumbs.d.mts.map

package/dist/{Button-DcTUxRNI.d.mts → Button-DXsYU5qU.d.mts}

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "./PseudoClassProps--MiDp2l2.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-ySXCGUEQ.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
@@ -98,4 +98,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-DcTUxRNI.d.mts.map
+//# sourceMappingURL=Button-DXsYU5qU.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-DcTUxRNI.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-DXsYU5qU.mjs";
 export { ButtonChildren, ButtonProps, StyledButton, SuffixIconContainer, Button as default };

package/dist/CalendarBase.d.mts

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

package/dist/{Card-CrQL0hXm.d.cts → Card-DnmrsQWi.d.cts}

@@ -1,5 +1,5 @@
 import { c as ParagraphProps, u as SpanProps } from "./Text-CrGiWG2E.cjs";
-import { i as HeaderProps } from "./Header-D8oDtnIL.cjs";
+import { i as HeaderProps } from "./Header-CkZvzbzL.cjs";
 import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
@@ -49,4 +49,4 @@ declare const _default: string & _$styled_components0.StyledComponentBase<"div",
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-CrQL0hXm.d.cts.map
+//# sourceMappingURL=Card-DnmrsQWi.d.cts.map

package/dist/{Card-YzGS3nQI.d.mts → Card-IOBCsfke.d.mts}

@@ -1,5 +1,5 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-CPd0r0w2.mjs";
-import { i as HeaderProps } from "./Header-WNGlG541.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-D3FXEnG6.mjs";
+import { i as HeaderProps } from "./Header-B-Us54dR.mjs";
 import { Spacing } from "@persona/design-tokens";
 import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
@@ -49,4 +49,4 @@ declare const _default: string & _$styled_components0.StyledComponentBase<"div",
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-YzGS3nQI.d.mts.map
+//# sourceMappingURL=Card-IOBCsfke.d.mts.map

package/dist/Card.d.cts

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

package/dist/Card.d.mts

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

package/dist/Card2.d.cts

@@ -1,4 +1,4 @@
-import { t as SectionHeading } from "./SectionHeading-DZyfNPn0.cjs";
+import { t as SectionHeading } from "./SectionHeading-D-L4uPoX.cjs";
 import { ComponentProps, FC, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 

package/dist/Card2.d.mts

@@ -1,4 +1,4 @@
-import { t as SectionHeading } from "./SectionHeading-BLDimf5d.mjs";
+import { t as SectionHeading } from "./SectionHeading-CDBQ4m9E.mjs";
 import * as _$styled_components0 from "styled-components";
 import { ComponentProps, FC, ReactNode } from "react";
 

package/dist/{Checkbox-UWdk4pqb.mjs → Checkbox-BghGF-iW.mjs}

@@ -4,7 +4,7 @@ import "./variables/transitions.mjs";
 import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-CDvOu1UN.mjs";
 import useControlled from "./lib/useControlled.mjs";
 import { n as Stack } from "./Stack-ckRN7LrP.mjs";
-import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
@@ -173,4 +173,4 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 //#endregion
 export { Checkbox as t };
 
-//# sourceMappingURL=Checkbox-UWdk4pqb.mjs.map
+//# sourceMappingURL=Checkbox-BghGF-iW.mjs.map

package/dist/{Checkbox-UWdk4pqb.mjs.map → Checkbox-BghGF-iW.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-UWdk4pqb.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\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 {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\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 ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${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: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${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: ${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: ${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={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' : checked}\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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"}
+{"version":3,"file":"Checkbox-BghGF-iW.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\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 {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\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 ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${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: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${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: ${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: ${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={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' : checked}\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-BmjK0Wac.d.cts → Checkbox-DfI0Xp3y.d.cts}

@@ -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-BmjK0Wac.d.cts.map
+//# sourceMappingURL=Checkbox-DfI0Xp3y.d.cts.map

package/dist/{Checkbox-B83WfsOZ.cjs → Checkbox-DhxpxzGp.cjs}

@@ -5,7 +5,7 @@ require("./variables/transitions.cjs");
 const require_Tooltip = require("./Tooltip-vylydKVv.cjs");
 const require_lib_useControlled = require("./lib/useControlled.cjs");
 const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_useFormField = require("./useFormField-BpYf3CAW.cjs");
+const require_useFormField = require("./useFormField-B98dmreO.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
@@ -180,4 +180,4 @@ Object.defineProperty(exports, "Checkbox", {
 	}
 });
 
-//# sourceMappingURL=Checkbox-B83WfsOZ.cjs.map
+//# sourceMappingURL=Checkbox-DhxpxzGp.cjs.map

package/dist/{Checkbox-B83WfsOZ.cjs.map → Checkbox-DhxpxzGp.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-B83WfsOZ.cjs","names":["Stack","isDisabled","Spacing","Color","isHovered","isNotDisabled","isChecked","isIndeterminate","isFocusedVisible","focusStyle","Typography","useFormField","useControlled","InputDashIcon","InputCheckIcon","Tooltip","TextWithDashedUnderline"],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\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 {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\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 ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${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: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${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: ${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: ${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={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' : checked}\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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"}
+{"version":3,"file":"Checkbox-DhxpxzGp.cjs","names":["Stack","isDisabled","Spacing","Color","isHovered","isNotDisabled","isChecked","isIndeterminate","isFocusedVisible","focusStyle","Typography","useFormField","useControlled","InputDashIcon","InputCheckIcon","Tooltip","TextWithDashedUnderline"],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\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 {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\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 ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${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: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${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: ${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: ${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={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' : checked}\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-Bc2kzl9q.d.mts → Checkbox-MUC37dLY.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-Bc2kzl9q.d.mts.map
+//# sourceMappingURL=Checkbox-MUC37dLY.d.mts.map

package/dist/Checkbox.d.cts

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "./Checkbox-BmjK0Wac.cjs";
+import { n as CheckboxProps, t as Checkbox } from "./Checkbox-DfI0Xp3y.cjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/Checkbox.d.mts

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

package/dist/CheckboxGroupField.d.cts

@@ -1,4 +1,4 @@
-import { n as CheckboxProps } from "./Checkbox-BmjK0Wac.cjs";
+import { n as CheckboxProps } from "./Checkbox-DfI0Xp3y.cjs";
 import { ImplementsFormField } from "./inputFields.cjs";
 import { ReactElement } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";

package/dist/CheckboxGroupField.d.mts

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

package/dist/{Combobox-R3_NDBi3.cjs → Combobox-4Bi9-N1p.cjs}

@@ -6,12 +6,12 @@ const require_lib_zindex = require("./lib/zindex.cjs");
 const require_Stack = require("./Stack-BF-9YjA1.cjs");
 const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
 const require_Sticker = require("./Sticker-D0jIU2Dt.cjs");
-const require_useFormField = require("./useFormField-BpYf3CAW.cjs");
-const require_Checkbox = require("./Checkbox-B83WfsOZ.cjs");
-const require_Menu = require("./Menu-BLbEcodU.cjs");
-const require_Input = require("./Input-DQS-BEym.cjs");
+const require_useFormField = require("./useFormField-B98dmreO.cjs");
+const require_Input = require("./Input-BDLUq-pK.cjs");
 const require_components_Input_index = require("./components/Input/index.cjs");
-const require_Spinner = require("./Spinner-DaSlM4kU.cjs");
+const require_Menu = require("./Menu-BXic-30n.cjs");
+const require_Checkbox = require("./Checkbox-DhxpxzGp.cjs");
+const require_Spinner = require("./Spinner-B6bx70yR.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
@@ -846,7 +846,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					highlightedIndex: state.highlightedIndex
 				};
 				case downshift.useCombobox.stateChangeTypes.InputBlur:
-					if (isOpen) return {
+					if (state.isOpen) return {
 						...changes,
 						isOpen: true
 					};
@@ -1191,6 +1191,10 @@ const ParentMenuItem = (0, styled_components.default)(require_Menu.MenuItem)`
   ${require_Menu.IconContainer} {
     margin-right: 0;
   }
+
+  > ${require_Menu.IconContainer}:first-child:not(:last-child) {
+    margin-right: ${_persona_design_tokens.Spacing[2]};
+  }
 `;
 const ParentChevron = styled_components.default.span`
   display: inline-flex;
@@ -1436,6 +1440,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			}),
 			"aria-haspopup": "menu",
 			focused: isHighlighted,
+			prefixIcon: group.prefixIcon,
 			size,
 			tabIndex: -1,
 			stretchLabel: true,
@@ -1685,4 +1690,4 @@ Object.defineProperty(exports, "flattenOptions", {
 	}
 });
 
-//# sourceMappingURL=Combobox-R3_NDBi3.cjs.map
+//# sourceMappingURL=Combobox-4Bi9-N1p.cjs.map