@persona/design-system 0.10.7 → 0.10.9

package/dist/variables/charting.mjs

@@ -0,0 +1,134 @@
+import { Color } from "@persona/design-tokens";
+//#region src/variables/charting.ts
+const chartingLight = {
+	Sequential: [
+		Color.CorePurple400,
+		Color.CorePurple300,
+		Color.CorePurple200,
+		Color.CoreTeal400,
+		Color.CoreTeal200,
+		Color.CoreTeal100,
+		Color.CoreSlate400,
+		Color.CoreSlate300
+	],
+	Categorical: [
+		Color.CorePurple500,
+		Color.CorePurple700,
+		Color.CoreTeal400,
+		Color.CoreTeal800,
+		Color.CoreGreen400,
+		Color.CoreGreen800,
+		Color.CoreOrange400,
+		Color.CoreOrange700,
+		Color.CoreYellow400,
+		Color.CoreYellow800,
+		Color.CoreRed400,
+		Color.CoreRed600,
+		Color.CoreBlue400,
+		Color.CoreBlue700
+	],
+	Qualitative: [
+		Color.CoreBlue500,
+		Color.CoreYellow1000,
+		Color.CoreOrange800,
+		Color.CoreGreen900,
+		Color.CoreGreen700,
+		Color.CoreBlue800,
+		Color.CoreOrange700,
+		Color.CoreTeal900,
+		Color.CoreYellow900,
+		Color.CoreBlue700,
+		Color.CoreSlate600,
+		Color.CoreTeal800
+	],
+	SequentialMono: [
+		Color.CoreBlue900,
+		Color.CoreBlue800,
+		Color.CoreBlue700,
+		Color.CoreBlue600,
+		Color.CoreBlue500,
+		Color.CoreBlue400,
+		Color.CoreBlue300,
+		Color.CoreBlue200
+	],
+	SequentialDivergent: [
+		Color.CoreBlue900,
+		Color.CoreBlue800,
+		Color.CoreBlue600,
+		Color.CoreBlue400,
+		Color.CoreBlue200,
+		Color.CoreOrange200,
+		Color.CoreOrange400,
+		Color.CoreOrange600,
+		Color.CoreOrange800,
+		Color.CoreOrange900
+	]
+};
+const chartingDark = {
+	Sequential: [
+		Color.CorePurple400,
+		Color.CorePurple300,
+		Color.CorePurple200,
+		Color.CoreTeal400,
+		Color.CoreTeal200,
+		Color.CoreTeal100,
+		Color.CoreSlate400,
+		Color.CoreSlate300
+	],
+	Categorical: [
+		Color.CorePurple500,
+		Color.CorePurple700,
+		Color.CoreTeal400,
+		Color.CoreTeal800,
+		Color.CoreGreen400,
+		Color.CoreGreen800,
+		Color.CoreOrange400,
+		Color.CoreOrange700,
+		Color.CoreYellow400,
+		Color.CoreYellow800,
+		Color.CoreRed400,
+		Color.CoreRed600,
+		Color.CoreBlue400,
+		Color.CoreBlue700
+	],
+	Qualitative: [
+		Color.CoreBlue500,
+		Color.CoreYellow900,
+		Color.CoreOrange800,
+		Color.CoreGreen800,
+		Color.CoreGreen700,
+		Color.CoreBlue600,
+		Color.CoreOrange700,
+		Color.CoreTeal900,
+		Color.CoreYellow900,
+		Color.CoreBlue700,
+		Color.CoreSlate600,
+		Color.CoreTeal800
+	],
+	SequentialMono: [
+		Color.CoreBlue900,
+		Color.CoreBlue800,
+		Color.CoreBlue700,
+		Color.CoreBlue600,
+		Color.CoreBlue500,
+		Color.CoreBlue400,
+		Color.CoreBlue300,
+		Color.CoreBlue200
+	],
+	SequentialDivergent: [
+		Color.CoreBlue900,
+		Color.CoreBlue800,
+		Color.CoreBlue600,
+		Color.CoreBlue400,
+		Color.CoreBlue200,
+		Color.CoreOrange200,
+		Color.CoreOrange400,
+		Color.CoreOrange600,
+		Color.CoreOrange800,
+		Color.CoreOrange900
+	]
+};
+//#endregion
+export { chartingDark, chartingLight };
+
+//# sourceMappingURL=charting.mjs.map

package/dist/variables/charting.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"charting.mjs","names":[],"sources":["../../src/variables/charting.ts"],"sourcesContent":["// Generated by design-system/scripts/generate-charting-tokens.mjs from\n//   design-system/tokens/charting/light.json\n//   design-system/tokens/charting/dark.json\n// Do not edit by hand — edit the token source and regenerate.\n// This module is where charting palettes map onto core primitives, per colour mode.\n/* oxlint-disable persona-web/no-core-color-tokens */\nimport { Color } from '@persona/design-tokens';\n\n/** Charting palettes: ordered colour lists, named as `ChartingColors` names them. */\nexport interface ChartingTokens {\n  Sequential: readonly Color[];\n  Categorical: readonly Color[];\n  Qualitative: readonly Color[];\n  SequentialMono: readonly Color[];\n  SequentialDivergent: readonly Color[];\n}\n\nexport const chartingLight: ChartingTokens = {\n  Sequential: [\n    Color.CorePurple400,\n    Color.CorePurple300,\n    Color.CorePurple200,\n    Color.CoreTeal400,\n    Color.CoreTeal200,\n    Color.CoreTeal100,\n    Color.CoreSlate400,\n    Color.CoreSlate300,\n  ],\n  Categorical: [\n    Color.CorePurple500,\n    Color.CorePurple700,\n    Color.CoreTeal400,\n    Color.CoreTeal800,\n    Color.CoreGreen400,\n    Color.CoreGreen800,\n    Color.CoreOrange400,\n    Color.CoreOrange700,\n    Color.CoreYellow400,\n    Color.CoreYellow800,\n    Color.CoreRed400,\n    Color.CoreRed600,\n    Color.CoreBlue400,\n    Color.CoreBlue700,\n  ],\n  Qualitative: [\n    Color.CoreBlue500,\n    Color.CoreYellow1000,\n    Color.CoreOrange800,\n    Color.CoreGreen900,\n    Color.CoreGreen700,\n    Color.CoreBlue800,\n    Color.CoreOrange700,\n    Color.CoreTeal900,\n    Color.CoreYellow900,\n    Color.CoreBlue700,\n    Color.CoreSlate600,\n    Color.CoreTeal800,\n  ],\n  SequentialMono: [\n    Color.CoreBlue900,\n    Color.CoreBlue800,\n    Color.CoreBlue700,\n    Color.CoreBlue600,\n    Color.CoreBlue500,\n    Color.CoreBlue400,\n    Color.CoreBlue300,\n    Color.CoreBlue200,\n  ],\n  SequentialDivergent: [\n    Color.CoreBlue900,\n    Color.CoreBlue800,\n    Color.CoreBlue600,\n    Color.CoreBlue400,\n    Color.CoreBlue200,\n    Color.CoreOrange200,\n    Color.CoreOrange400,\n    Color.CoreOrange600,\n    Color.CoreOrange800,\n    Color.CoreOrange900,\n  ],\n};\n\nexport const chartingDark: ChartingTokens = {\n  Sequential: [\n    Color.CorePurple400,\n    Color.CorePurple300,\n    Color.CorePurple200,\n    Color.CoreTeal400,\n    Color.CoreTeal200,\n    Color.CoreTeal100,\n    Color.CoreSlate400,\n    Color.CoreSlate300,\n  ],\n  Categorical: [\n    Color.CorePurple500,\n    Color.CorePurple700,\n    Color.CoreTeal400,\n    Color.CoreTeal800,\n    Color.CoreGreen400,\n    Color.CoreGreen800,\n    Color.CoreOrange400,\n    Color.CoreOrange700,\n    Color.CoreYellow400,\n    Color.CoreYellow800,\n    Color.CoreRed400,\n    Color.CoreRed600,\n    Color.CoreBlue400,\n    Color.CoreBlue700,\n  ],\n  Qualitative: [\n    Color.CoreBlue500,\n    Color.CoreYellow900,\n    Color.CoreOrange800,\n    Color.CoreGreen800,\n    Color.CoreGreen700,\n    Color.CoreBlue600,\n    Color.CoreOrange700,\n    Color.CoreTeal900,\n    Color.CoreYellow900,\n    Color.CoreBlue700,\n    Color.CoreSlate600,\n    Color.CoreTeal800,\n  ],\n  SequentialMono: [\n    Color.CoreBlue900,\n    Color.CoreBlue800,\n    Color.CoreBlue700,\n    Color.CoreBlue600,\n    Color.CoreBlue500,\n    Color.CoreBlue400,\n    Color.CoreBlue300,\n    Color.CoreBlue200,\n  ],\n  SequentialDivergent: [\n    Color.CoreBlue900,\n    Color.CoreBlue800,\n    Color.CoreBlue600,\n    Color.CoreBlue400,\n    Color.CoreBlue200,\n    Color.CoreOrange200,\n    Color.CoreOrange400,\n    Color.CoreOrange600,\n    Color.CoreOrange800,\n    Color.CoreOrange900,\n  ],\n};\n"],"mappings":";;AAiBA,MAAa,gBAAgC;CAC3C,YAAY;EACV,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,aAAa;EACX,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,aAAa;EACX,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,gBAAgB;EACd,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,qBAAqB;EACnB,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACF;AAED,MAAa,eAA+B;CAC1C,YAAY;EACV,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,aAAa;EACX,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,aAAa;EACX,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,gBAAgB;EACd,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,qBAAqB;EACnB,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACF"}

package/dist/variables/effect.d.mts

@@ -1,4 +1,4 @@
-import { t as MaybeSemanticTheme } from "../semanticColor-y9byerSl.mjs";
+import { n as MaybeSemanticTheme } from "../semanticColor-BKbCliyl.mjs";
 
 //#region src/variables/effect.d.ts
 /**

package/llms.txt

@@ -40,7 +40,7 @@ their own subpaths.
 - Modal close button: localize the default with `PDSProvider strings={{ closeModal: translatedLabel }}` (English: "Close"), or override one modal with `contentProps.closeButtonLabel`.
 - Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`, `RichTextEditor` (tiptap-based Markdown/HTML editor with menu bar and optional floating toolbar), `FloatingToolbar` (tiptap bubble-menu toolbar)
 - Status: `Sticker` (status badges), `Badge` (counts), `StatusIndicator`
-- Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views. Pass `starredDefaultView` to star the default view: the `isDefault` view is pinned first with a star icon, cannot be dragged, hidden, deleted or unset, and its menu offers only Save and Duplicate (its name field still renames it); every other view gets the full menu. Rename and Duplicate on it call `onViewNameChange` / `onDuplicateView` with its id; Save calls `onSaveView()` with no id, saving whatever the consumer treats as the current view. A null `currentView` is shown as the starred view, so `onSaveView` and toolbar Save must treat null as the starred view; while an `isDefault` view exists, pass its id as `currentView` rather than null. A lazy default is a consumer-owned placeholder view with `isDefault: true`. While a view is the default the built-in tab is not shown and a `null` `currentView` is displayed as the starred view; with no `isDefault` view the built-in tab is shown starred and read-only.
+- Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views. Pass `starredDefaultView` to star the default view: the `isDefault` view is pinned first with a star icon, cannot be dragged, hidden, deleted or unset, and its menu offers only Save, Duplicate and Reset (its name field still renames it); every other view gets the full menu. Rename and Duplicate on it call `onViewNameChange` / `onDuplicateView` with its id; Save calls `onSaveView()` with no id, saving whatever the consumer treats as the current view. A null `currentView` is shown as the starred view, so `onSaveView` and toolbar Save must treat null as the starred view; while an `isDefault` view exists, pass its id as `currentView` rather than null. A lazy default is a consumer-owned placeholder view with `isDefault: true`. While a view is the default the built-in tab is not shown and a `null` `currentView` is displayed as the starred view; with no `isDefault` view the built-in tab is shown starred and read-only.
 - DataTable filters: pass `filtersV2` (`TableControlsFiltersV2Props` / `FilterBarProps`) through `DataTable.controls` or directly to `TableControls` for a first-class FilterBar; defaults visible with size derived from `compact`. Hosts own V2 data filtering and feed `onChange` back to `initialState` for active-filter messaging; hydration needs no remount key. Precedence: `filterPanel` → `filtersV2` → legacy `filters`. Legacy `filters` supports `input`, `select`, `multiselect`, `combobox`, and `daterange` with optional `filterResolver`. With `clientFiltering`, `column.filter` generates legacy-only controls backed by TanStack column-filter state, not V2 filtering.
 - SmartTextInput: when method chains are allowed (`ValueType.MethodChain` or `{{...}}` interpolation), you MUST pass `renderFunctionForm`. PDS does not build the function-parameter form, so without it the dialog opened by placing the cursor in a call like `convert_to(...)` shows only the function name over an empty body. It receives `FunctionFormRenderProps` and must call `onComplete(nodes)` or `onCancel()`. In persona-web, `useDashboardSmartTextInputProps` supplies it (backed by `InputMethodChain/FunctionForm`). See components/SmartTextInput/SmartTextInput.mdx.
 - FilterBar: optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates in pills and native Rules; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx. Hosts own feature activation and serialization.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -167,6 +167,7 @@
     "./theme": "./dist/theme.mjs",
     "./utils/storybook": "./dist/utils/storybook.mjs",
     "./utils/testing": "./dist/utils/testing.mjs",
+    "./variables/charting": "./dist/variables/charting.mjs",
     "./variables/color": "./dist/variables/color.mjs",
     "./variables/effect": "./dist/variables/effect.mjs",
     "./variables/keyframes": "./dist/variables/keyframes.mjs",
@@ -181,8 +182,8 @@
     "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs && node scripts/assert-parser-declarations.mjs",
     "release": "scripts/release.sh --dry-run",
     "skills:validate": "intent validate skills",
-    "tokens:generate": "node scripts/generate-semantic-tokens.mjs",
-    "tokens:check": "node scripts/generate-semantic-tokens.mjs --check",
+    "tokens:generate": "node scripts/generate-semantic-tokens.mjs && node scripts/generate-charting-tokens.mjs",
+    "tokens:check": "node scripts/generate-semantic-tokens.mjs --check && node scripts/generate-charting-tokens.mjs --check",
     "skills:stale": "intent stale"
   },
   "dependencies": {
@@ -444,6 +445,7 @@
       "./theme": "./dist/theme.mjs",
       "./utils/storybook": "./dist/utils/storybook.mjs",
       "./utils/testing": "./dist/utils/testing.mjs",
+      "./variables/charting": "./dist/variables/charting.mjs",
       "./variables/color": "./dist/variables/color.mjs",
       "./variables/effect": "./dist/variables/effect.mjs",
       "./variables/keyframes": "./dist/variables/keyframes.mjs",

package/skills/ui-authoring/TOKENS.md

@@ -712,6 +712,11 @@ Use according to this priority:
 `Categorical` is for light backgrounds. If you exceed the max series, group leftover items or link
 to an export — do not invent extra hex colors.
 
+Under a PDS colour mode, read the palettes through `chartingColors(theme)` from
+`@persona/design-system/lib/semanticColor`. It returns the same palette names and lengths as
+`ChartingColors`, with dark-mode colours under `colorMode='dark'`, and falls back to
+`ChartingColors` (the light palettes) when the theme has no colour mode.
+
 | Need | Use | Max series |
 |------|-----|------------|
 | Numeric / ordered | `ChartingColors.Sequential` | 8 |

package/dist/Modal-BBlilB-B.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal-BBlilB-B.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\n  type ModalOverlayProps,\n  OverlayTriggerStateContext,\n  Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from '#src/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  @keyframes overlayShow {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: ${({ $insetRight }) => $insetRight};\n  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-fill-mode: both;\n  ${({ $hostPending }) =>\n    $hostPending &&\n    `\n    animation-play-state: paused;\n  `}\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 0ms;\n    animation-delay: 0ms;\n    animation-play-state: running;\n  }\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n  z-index: 10001;\n  outline: none;\n  width: fit-content;\n  max-width: 100%;\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n  function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n    useEmbeddedSurface(surfaceId);\n    return <StyledModal ref={ref}>{children}</StyledModal>;\n  },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n  $insetRight: string;\n  $transitionMs: number;\n  surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  const isOpen = state?.isOpen ?? false;\n  const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n  const { $insetRight, $transitionMs, ...overlayProps } = props;\n  return (\n    <StyledModalOverlay\n      {...overlayProps}\n      $insetRight={$insetRight}\n      $transitionMs={$transitionMs}\n      $animationDelayMs={animationDelayMs}\n      $hostPending={isOpen && !ready}\n    />\n  );\n};\n\nconst ModalCloseButton = styled(Button)`\n  display: inline-flex;\n  padding: ${Spacing[2]};\n  border-radius: ${Spacing[1]};\n  width: fit-content;\n  min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n  justify: 'flex-end',\n  align: 'center',\n  spacing: Spacing[2],\n})`\n  padding: ${Spacing[3]} ${Spacing[4]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n  flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n  return (\n    <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n      <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n        <XIcon />\n      </ModalCloseButton>\n    </AriaButton>\n  );\n};\n\nexport interface ModalTitleProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/** Props passed to modal content render functions. */\nexport interface ModalRenderProps {\n  /** Element that floating content should use as its portal container. */\n  portalContainer: HTMLDivElement | null;\n}\n\ntype ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n  return (\n    <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n      {children}\n    </Heading>\n  );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n  border-bottom: ${({ $hasTabs, theme }) =>\n    $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n  padding: ${({ $hasTabs }) =>\n    $hasTabs\n      ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n      : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n  padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n  outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' | 'md' | 'lg' | 'xl' | 'full' }>`\n  position: relative;\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return '90vw';\n    }\n  }};\n  max-width: ${({ theme, $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return theme.modal.width[$size];\n    }\n  }};\n  /* TODO: Use breakpoints to make this responsive */\n  max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${({ $size }) =>\n    $size === 'full' &&\n    `\n    height: calc(100vh - 160px);\n  `}\n  margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n   */\n  closeButtonLabel?: string;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer content\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   * Tab contents can be render functions that receive the modal portal container.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Title of the modal\n   */\n  title?: ReactNode;\n\n  /**\n   * Children content\n   */\n  children?: ReactNode;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Additional props for the Dialog element\n   */\n  className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n  portalContainer: HTMLDivElement | null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n  $noPadding?: boolean;\n  $hidden?: boolean;\n}>`\n  overflow-y: auto;\n  ${semanticScrollbar}\n  flex: 1;\n  min-height: 0;\n  ${({ $noPadding }) =>\n    $noPadding\n      ? 'padding: 0;'\n      : `\n    padding-left: ${Spacing[4]};\n    padding-right: ${Spacing[4]};\n  `}\n  ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/**\n * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n */\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n  {\n    title,\n    children,\n    showCloseButton = true,\n    closeButtonLabel,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const strings = usePDSStrings();\n  const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n  const tabCount = tabs?.length ?? 0;\n\n  useEffect(() => {\n    setSelectedTabIdx(0);\n  }, [tabCount]);\n\n  const titleAndClose = (\n    <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n      <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n      {showCloseButton && <ModalClose aria-label={closeButtonLabel ?? strings.closeModal} />}\n    </ModalHeader>\n  );\n\n  const modalHeader = tabs ? (\n    <Stack>\n      {titleAndClose}\n      <ModalTabBar>\n        {tabs.map((tab, idx) => (\n          <Tab\n            key={tab.name}\n            selected={selectedTabIdx === idx}\n            id={`pds-modal_tab-${idx}`}\n            onClick={() => setSelectedTabIdx(idx)}\n            aria-controls={`pds-modal_tab-panel-${idx}`}\n          >\n            {tab.name}\n          </Tab>\n        ))}\n      </ModalTabBar>\n    </Stack>\n  ) : (\n    titleAndClose\n  );\n\n  return (\n    <StyledDialog {...props} ref={ref}>\n      <StyledCard elevated $size={size}>\n        {(showCloseButton || title) && modalHeader}\n        {tabs ? (\n          tabs.map((tab, idx) => (\n            <StyledModalCardBody\n              key={tab.name}\n              $noPadding={noBodyPadding}\n              $hidden={selectedTabIdx !== idx}\n              role={tabs ? 'tabpanel' : undefined}\n              id={`pds-modal_tab-panel-${tab.name}`}\n              aria-labelledby={`pds-modal_tab-${tab.name}`}\n            >\n              {typeof tab.contents === 'function'\n                ? tab.contents({ portalContainer })\n                : tab.contents}\n            </StyledModalCardBody>\n          ))\n        ) : (\n          <StyledModalCardBody\n            $noPadding={noBodyPadding}\n            role={tabs ? 'tabpanel' : undefined}\n            id={`pds-modal_tab-panel-${selectedTabIdx}`}\n            aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n          >\n            {children}\n          </StyledModalCardBody>\n        )}\n\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </StyledCard>\n    </StyledDialog>\n  );\n});\n\ninterface TabView {\n  name: string;\n  contents: ModalRenderable;\n  badge?: React.ReactElement;\n  disabled?: boolean;\n  'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n  /**\n   * Title of the Card\n   */\n  title?: string;\n\n  /**\n   * Component to use as trigger. React Aria trigger props will be merged with this element.\n   */\n  trigger?: ComponentProps<typeof Pressable>['children'];\n\n  /**\n   * Props to apply to Modal.Card within\n   */\n  contentProps?: ModalCardProps;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer section intended for actions.\n   * You can pass in Buttons directly and they will render in a HStack.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Children content\n   */\n  children?: ModalRenderable;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   * Can also be set via contentProps.noBodyPadding.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Controls whether the modal is open (controlled)\n   */\n  open?: boolean;\n\n  /**\n   * Default open state (uncontrolled)\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Handler called when open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether the modal can be dismissed by clicking outside or pressing escape\n   */\n  isDismissable?: boolean;\n\n  /**\n   * Whether pressing the escape key closes the modal\n   */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n  children,\n  trigger,\n  contentProps,\n  noBodyPadding = false,\n  size = 'md',\n  title,\n  footer,\n  tabs,\n  defaultOpen,\n  onOpenChange,\n  isDismissable = false,\n  isKeyboardDismissDisabled = false,\n  open,\n}: ModalProps) => {\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n  const surfaceId = useEmbeddedSurfaceId();\n  const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n  const transitionMs =\n    panelState === 'opening'\n      ? SIDEBAR_OPEN_TRANSITION_MS\n      : panelState === 'closing'\n        ? SIDEBAR_CLOSE_TRANSITION_MS\n        : 0;\n\n  const content = (\n    <ModalCard\n      size={size}\n      title={title}\n      footer={footer}\n      tabs={tabs}\n      noBodyPadding={noBodyPadding}\n      {...contentProps}\n      portalContainer={portalContainer}\n    >\n      {typeof children === 'function' ? children({ portalContainer }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {wrappedTrigger}\n      <EmbeddedSurfaceOverlay\n        surfaceId={surfaceId}\n        $insetRight={modalInsetRight}\n        $transitionMs={transitionMs}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n      >\n        <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n          {content}\n        </EmbeddedSurfaceModal>\n      </EmbeddedSurfaceOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/PageHeader-DEKTopzU.mjs

@@ -1,75 +0,0 @@
-import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
-import { i as Paragraph, n as Heading } from "./Text-D0vEReED.mjs";
-import { t as Breadcrumbs } from "./Breadcrumbs-Dft2TR4v.mjs";
-import { Spacing } from "@persona/design-tokens";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/PageHeader/PageHeader.tsx
-const PageHeaderContainer = styled.header`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${Spacing[3]} ${Spacing[5]};
-  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
-  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", theme.color.border.primary)};
-  box-sizing: border-box;
-  min-height: 56px; /* Standardize height for most PageHeaders */
-`;
-const TitleContainer = styled.div`
-  display: flex;
-  flex: 0 1 auto;
-  min-width: 0;
-  align-items: center;
-  h1 {
-    margin: 0;
-    ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
-  }
-  p {
-    margin: 0 0 0 ${Spacing[2]};
-    ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}
-  }
-`;
-const LeftContainer = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-  gap: ${Spacing[2]};
-  min-width: 0;
-  & > :not(${TitleContainer}) {
-    flex-shrink: 0;
-  }
-`;
-const RightContainer = styled.div`
-  display: flex;
-  gap: ${Spacing[2]};
-  margin-left: ${Spacing[3]};
-  flex-shrink: 0;
-`;
-const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend, append, children, ...props }) => /* @__PURE__ */ jsxs(PageHeaderContainer, {
-	...props,
-	children: [/* @__PURE__ */ jsxs(LeftContainer, { children: [
-		prepend,
-		/* @__PURE__ */ jsxs(TitleContainer, { children: [breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, {
-			size: "lg",
-			...breadcrumbs
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [level === "product" && /* @__PURE__ */ jsx(Heading, {
-			as: "h1",
-			size: "sm",
-			children: title
-		}), level === "detail" && /* @__PURE__ */ jsx(Paragraph, {
-			as: "h1",
-			size: "lg",
-			color: "primary",
-			children: title
-		})] }), subtitle && /* @__PURE__ */ jsx(Paragraph, {
-			size: "md",
-			children: subtitle
-		})] }),
-		append
-	] }), children && /* @__PURE__ */ jsx(RightContainer, { children })]
-});
-//#endregion
-export { PageHeaderContainer as n, PageHeader as t };
-
-//# sourceMappingURL=PageHeader-DEKTopzU.mjs.map

package/dist/PageHeader-DEKTopzU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeader-DEKTopzU.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\n\nexport const PageHeaderContainer = styled.header`\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  padding: ${Spacing[3]} ${Spacing[5]};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  box-sizing: border-box;\n  min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex: 0 1 auto;\n  min-width: 0;\n  align-items: center;\n  h1 {\n    margin: 0;\n    ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  }\n  p {\n    margin: 0 0 0 ${Spacing[2]};\n    ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n  }\n`;\n\nconst LeftContainer = styled.div`\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  & > :not(${TitleContainer}) {\n    flex-shrink: 0;\n  }\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n  flex-shrink: 0;\n`;\n\ninterface PageHeaderCommonProps {\n  level?: 'product' | 'detail';\n  prepend?: ReactNode;\n  append?: ReactNode;\n  children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n  (\n    | { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n    | {\n        title?: never;\n        /**\n         * The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n         * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n         */\n        subtitle?: never;\n        /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n        breadcrumbs: BreadcrumbsProps;\n      }\n  );\n\nconst PageHeader = ({\n  title,\n  breadcrumbs,\n  subtitle,\n  level = 'product',\n  prepend,\n  append,\n  children,\n  ...props\n}: PageHeaderProps) => (\n  <PageHeaderContainer {...props}>\n    <LeftContainer>\n      {prepend}\n      <TitleContainer>\n        {breadcrumbs ? (\n          <Breadcrumbs size='lg' {...breadcrumbs} />\n        ) : (\n          <>\n            {level === 'product' && (\n              <Heading as='h1' size='sm'>\n                {title}\n              </Heading>\n            )}\n            {level === 'detail' && (\n              <Paragraph as='h1' size='lg' color='primary'>\n                {title}\n              </Paragraph>\n            )}\n          </>\n        )}\n        {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n      </TitleContainer>\n      {append}\n    </LeftContainer>\n    {children && <RightContainer>{children}</RightContainer>}\n  </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AASA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;8BAC9E,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;;AAK9G,MAAM,iBAAiB,OAAO,GAAG;;;;;;;MAO3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;oBAG1C,QAAQ,GAAG;MACzB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;AAIhE,MAAM,gBAAgB,OAAO,GAAG;;;;SAIvB,QAAQ,GAAG;;aAEP,eAAe;;;;AAK5B,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AA2B5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD,EAAA,UAAA;EACG;EACD,qBAAC,gBAAD,EAAA,UAAA,CACG,cACC,oBAAC,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,oBAAC,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,oBAAC,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,oBAAC,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB;EACa,EAAA,CAAA,EACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}