@persona/design-system 0.1.7 → 0.1.9

package/dist/AttributeGrid.d.cts

@@ -1,40 +0,0 @@
-import { AttributeSize, TableLayoutValue } from "./Attribute.cjs";
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Attribute/AttributeGrid.d.ts
-type AttributeGridProps = {
-  children?: ReactNode;
-  /**
-   * Sets the font size and spacing density for all child Attributes.
-   * Defaults to `'md'`.
-   */
-  size?: AttributeSize;
-} & ({
-  /**
-   * Set a fixed number of columns for the grid.
-   */
-  colCount?: number;
-  /**
-   * Display attributes in a stacked list with label first then value.
-   */
-  horizontal?: boolean;
-  table?: never;
-} | {
-  /**
-   * Display attributes in a fixed tabular layout.
-   * Set to `full-width` to expand to full width of container.
-   */
-  table?: TableLayoutValue;
-  colCount?: never;
-  horizontal?: never;
-});
-declare const AttributeGrid: ({
-  children,
-  horizontal,
-  table,
-  size,
-  ...props
-}: AttributeGridProps) => _$react_jsx_runtime0.JSX.Element;
-export = AttributeGrid;
-//# sourceMappingURL=AttributeGrid.d.cts.map

package/dist/Badge-DAGPU4-e.cjs

@@ -1,38 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_Sticker = require("./Sticker-D0jIU2Dt.cjs");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Badge/Badge.tsx
-const Badge = (0, styled_components.default)(({ variant, ...rest }) => {
-	let variantProp;
-	switch (variant) {
-		case "alert":
-			variantProp = "danger";
-			break;
-		case "active":
-			variantProp = "purple";
-			break;
-		default: variantProp = "grey";
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-		...rest,
-		variant: variantProp
-	});
-})(() => styled_components.css`
-    min-width: 16px;
-    text-align: center;
-    border-radius: 100px;
-    span {
-      font-size: 10px;
-    }
-  `);
-//#endregion
-Object.defineProperty(exports, "Badge", {
-	enumerable: true,
-	get: function() {
-		return Badge;
-	}
-});
-
-//# sourceMappingURL=Badge-DAGPU4-e.cjs.map

package/dist/Badge-DAGPU4-e.cjs.map

@@ -1 +0,0 @@
-{"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.d.cts

@@ -1,25 +0,0 @@
-import { DefaultTheme, StyledComponent } from "styled-components";
-
-//#region components/Badge/Badge.d.ts
-interface BadgeProps {
-  /**
-   * When rendered on a secondary background (e.g. inside a panel or card with
-   * a grey fill), set this to true so the component adjusts its colours
-   * appropriately for certain variants.
-   */
-  onSecondaryBackground?: boolean;
-  /**
-   * Semantic colour variant for the badge.
-   *
-   * - `basic` – neutral grey, for informational counts or labels (default).
-   * - `active` – purple, to highlight an active or selected state.
-   * - `alert` – red/danger, to draw attention to errors or urgent counts.
-   *
-   * @defaultValue 'basic'
-   */
-  variant?: 'alert' | 'active' | 'basic';
-}
-declare const Badge: StyledComponent<"span", DefaultTheme, BadgeProps, never>;
-//#endregion
-export { Badge, Badge as default, BadgeProps };
-//# sourceMappingURL=Badge.d.cts.map

package/dist/Banner.d.cts

@@ -1,48 +0,0 @@
-import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Banner/Banner.d.ts
-interface BannerProps extends ComponentPropsWithoutRef<'div'> {
-  children: ReactNode;
-  /**
-   * Semantic colour theme for the banner background.
-   *
-   * - `informational` – purple, for general tips or announcements (default).
-   * - `success` – green, for confirmations or completed actions.
-   * - `warning` – yellow, for non-blocking cautions.
-   * - `alert` – red, for errors or destructive warnings.
-   *
-   * @defaultValue 'informational'
-   */
-  variant?: 'informational' | 'success' | 'warning' | 'alert';
-  /**
-   * Action affordance rendered to the right of the content.
-   *
-   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.
-   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).
-   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.
-   */
-  action?: string | ReactElement;
-  /**
-   * Called when the user clicks the close (×) button.
-   * When provided and `action` is absent, a close icon button is rendered automatically.
-   * When `action` is a string, clicking that string-labelled button calls this handler.
-   */
-  onClose?: VoidFunction;
-  /**
-   * When true, the content area stretches to fill the full banner width.
-   * Useful when `children` contains a layout that needs to span the entire space.
-   */
-  extendContentWidth?: boolean;
-}
-declare const Banner: ({
-  children,
-  variant,
-  action,
-  onClose,
-  extendContentWidth,
-  ...elemProps
-}: BannerProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { Banner, Banner as default, BannerProps };
-//# sourceMappingURL=Banner.d.cts.map

package/dist/Breadcrumb-BOxfam3E.d.cts

@@ -1,31 +0,0 @@
-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.d.cts

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

package/dist/Breadcrumbs.d.cts

@@ -1,20 +0,0 @@
-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/Button-DXsYU5qU.d.mts

@@ -1,101 +0,0 @@
-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";
-import { LinkProps } from "react-router-dom";
-
-//#region components/Button/Button.d.ts
-interface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {
-  $isPending: boolean;
-  $onSecondaryBackground?: boolean;
-}
-declare const StyledButton: _$styled_components0.StyledComponent<"button", any, ButtonPropsWithTransientProps, never>;
-type WithPendingProps = Pick<ButtonProps, 'isPending'>;
-declare const ButtonChildren: _$styled_components0.StyledComponent<"div", any, {
-  "aria-hidden": boolean | undefined;
-} & WithPendingProps, "aria-hidden">;
-declare const SuffixIconContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
-type MaybePromise = ((e: MouseEvent<HTMLButtonElement>) => void) | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);
-interface ButtonProps extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {
-  /**
-   * Visual style of the button.
-   *
-   * - `primary` – filled brand colour, for the primary action on a surface.
-   * - `basic` – subtle grey fill, for secondary actions.
-   * - `outline` – transparent with a border, alternative secondary style.
-   * - `text` – no background or border, for tertiary / inline actions.
-   * - `inverse` – inverted fill for use on dark/coloured backgrounds.
-   * - `danger` – red fill, for destructive actions.
-   *
-   * @defaultValue 'primary'
-   */
-  variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';
-  /**
-   * Shows a loading spinner and disables the button. Also triggers automatically
-   * when `onClick` returns a Promise, clearing once the promise settles.
-   */
-  isPending?: boolean;
-  /**
-   * Icon rendered to the left of the button label.
-   * Import from `@persona-id/icons`.
-   */
-  prefixIcon?: ReactNode;
-  /**
-   * Controls how the prefix icon inherits sizing.
-   *
-   * - `basic` – icon is rendered inside a fixed-size container.
-   * - `inherit` – icon stretches to fill the surrounding element's dimensions.
-   *
-   * @defaultValue 'basic'
-   */
-  prefixIconType?: 'basic' | 'inherit';
-  /**
-   * Icon rendered to the right of the button label.
-   * Import from `@persona-id/icons`.
-   */
-  suffixIcon?: ReactNode;
-  /**
-   * Height and typography scale of the button.
-   *
-   * @defaultValue 'md'
-   */
-  size?: 'md' | 'sm';
-  /**
-   * Changes the button into a link.
-   * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute
-   * `https://` URL to render an `<a>` tag that opens in a new tab.
-   */
-  to?: LinkProps['to'];
-  /**
-   * Overrides the target of the link if `to` is provided and is an external link.
-   */
-  target?: LinkProps['target'];
-  /**
-   * Note: we may want to default this to 'button' in the future, but many instances of this Button component
-   * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form
-   * so we'll have to comb through and manually add the type='submit' prop.
-   */
-  type?: 'button' | 'reset' | 'submit';
-  /**
-   * Controls the width of the button.
-   *
-   * - `full` – stretches to fill its container (`width: 100%`).
-   * - `auto` – shrinks to fit its content.
-   * - `button` – a fixed medium element width (from design tokens).
-   * - `icon` – square, sized to match the button height; use for icon-only buttons.
-   *
-   * @defaultValue 'full'
-   */
-  width?: 'full' | 'auto' | 'button' | 'icon';
-  onClick?: MaybePromise;
-  ref?: Ref<HTMLButtonElement>;
-  /**
-   * In some cases we render a button on a secondary background, which needs an adjustment
-   * for certain variants.
-   */
-  onSecondaryBackground?: boolean;
-}
-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-DXsYU5qU.d.mts.map

package/dist/Button.d.cts

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

package/dist/ButtonGroup.d.cts

@@ -1,20 +0,0 @@
-import * as _$react from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { ToggleGroupMultipleProps, ToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
-
-//#region components/ButtonGroup/ButtonGroup.d.ts
-interface ButtonGroupProps {
-  id?: string;
-  className?: string;
-  fullWidth?: boolean;
-}
-declare const ButtonGroup: ({
-  children,
-  fullWidth,
-  ...props
-}: (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ButtonGroupProps) => _$react_jsx_runtime0.JSX.Element;
-declare const ButtonGroupItem: _$react.ForwardRefExoticComponent<ToggleGroupPrimitive.ToggleGroupItemProps & _$react.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { ButtonGroup, ButtonGroup as default, ButtonGroupItem, ButtonGroupProps };
-//# sourceMappingURL=ButtonGroup.d.cts.map

package/dist/Calendar.d.cts

@@ -1,11 +0,0 @@
-import { Ref } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-import { AriaCalendarProps, DateValue } from "react-aria";
-
-//#region components/DatePicker/Calendar/Calendar.d.ts
-interface CalendarProps extends AriaCalendarProps<DateValue> {
-  calendarRef?: Ref<HTMLDivElement>;
-}
-declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
-export = Calendar;
-//# sourceMappingURL=Calendar.d.cts.map

package/dist/Card-CaOItkgL.cjs

@@ -1,248 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-require("./variables/spacing.cjs");
-const require_Spacer = require("./Spacer-GYHbk-dS.cjs");
-const require_Text = require("./Text-CzN0DOXV.cjs");
-const require_useToggle = require("./useToggle-CSkZWXtQ.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_icons = require("@persona/icons");
-//#region components/Card/Header/Header.tsx
-const HeaderContainer = styled_components.default.div`
-  ${require_mixins_text.paragraphMixins.md};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  &:not(:only-child) {
-    margin: 0px 0px ${_persona_design_tokens.Spacing[4]} 0px;
-    ${({ $matchCardV2 }) => $matchCardV2 && styled_components.css`
-        margin-bottom: ${_persona_design_tokens.Spacing[1]};
-      `}
-  }
-  ${({ variant }) => variant === "section" && styled_components.css`
-      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
-    `}
-`;
-const TitleContainer = styled_components.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[2]};
-`;
-const Title$1 = styled_components.default.h3`
-  display: flex;
-  align-items: center;
-  margin: 0px;
-  gap: ${_persona_design_tokens.Spacing[2]};
-  ${({ variant }) => {
-	switch (variant) {
-		case "section": return require_mixins_text.paragraphMixins.lgBold;
-		default: return require_mixins_text.headingMixins.sm;
-	}
-}}
-  ${({ $matchCardV2 }) => $matchCardV2 && styled_components.css`
-      ${require_mixins_text.headingMixins.xsm};
-    `}
-`;
-const ActionsContainer = styled_components.default.div`
-  color: ${({ theme }) => theme.color.text.secondary};
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[2]};
-`;
-const FullDivider = styled_components.default.hr`
-  border-top: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-  margin: 0;
-
-  /* Use negative margin to bleed the divider out of the grid. */
-  margin-left: -${_persona_design_tokens.Spacing[5]};
-  margin-right: -${_persona_design_tokens.Spacing[5]};
-`;
-const Header = ({ children, variant, actions, subtitle, $matchCardV2, ...elemProps }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderContainer, {
-		variant,
-		...elemProps,
-		$matchCardV2,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title$1, {
-			variant,
-			$matchCardV2,
-			children
-		}), subtitle] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionsContainer, { children: actions })]
-	}), $matchCardV2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FullDivider, {})] });
-};
-const Root = Header;
-//#endregion
-//#region components/Card/Card.tsx
-/**
-* @deprecated Use CardV2 instead
-*/
-const Card = (0, styled_components.default)("div")`
-  border-radius: ${({ theme }) => {
-	return theme.card.borderRadius;
-}};
-  display: flex;
-  flex-direction: column;
-  margin-bottom: ${_persona_design_tokens.Spacing[4]};
-  background-color: ${({ theme }) => theme.color.background.primary};
-  font-family: ${({ theme }) => theme.text.fontFamily.base};
-  ${({ elevated }) => elevated && styled_components.css`
-      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);
-    `}
-
-  ${({ $matchCardV2 }) => $matchCardV2 && styled_components.css`
-      margin-bottom: 0;
-    `}
-`;
-/**
-* To be used within cards. Provides padding and basic layout. Should not be
-* used if card's contents are edge-to-edge with no padding.
-*/
-const Body = (0, styled_components.default)("section")`
-  margin: 0;
-  padding: ${({ padding }) => padding ?? _persona_design_tokens.Spacing[5]};
-  display: grid;
-  grid-auto-flow: row;
-  grid-gap: ${({ gap }) => gap != null ? gap : 8}px;
-  /**
-    * Prevent grid blowout
-    * https://css-tricks.com/preventing-a-grid-blowout/
-    */
-  grid-template-columns: minmax(0, 1fr);
-
-  ${({ $matchCardV2 }) => $matchCardV2 && styled_components.css`
-      padding: ${_persona_design_tokens.Spacing[4]} ${_persona_design_tokens.Spacing[5]};
-      grid-gap: ${_persona_design_tokens.Spacing[3]};
-    `}
-`;
-const IconContainer = (0, styled_components.default)("div")`
-  margin-right: ${_persona_design_tokens.Spacing[3]};
-  display: flex;
-  align-items: center;
-
-  > svg {
-    height: 24px;
-    width: 24px;
-  }
-`;
-const ImageWrapper = (0, styled_components.default)("div")`
-  width: 100%;
-  overflow: hidden;
-  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}
-    0px 0px;
-
-  ${({ height }) => {
-	return styled_components.css`
-      height: ${height}px;
-    `;
-}};
-
-  > img,
-  svg {
-    width: 100%;
-    border-radius: ${({ theme }) => theme.card.borderRadius}
-      ${({ theme }) => theme.card.borderRadius} 0px 0px;
-  }
-`;
-/**
-* Label to be used within cards. Note that some cards lead with a Title while
-* some others lead with a Subtitle (see below).
-*/
-const Title = ({ icon, children, ...elemProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Header, {
-	variant: "title",
-	...elemProps,
-	children: [icon != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconContainer, { children: icon }), children]
-});
-/**
-* Smaller label to be used within cards.
-*/
-const Subtitle = (0, styled_components.default)(require_Text.Paragraph).attrs(() => ({ size: "md" }))`
-  color: ${({ theme }) => theme.color.text.tertiary};
-`;
-/**
-* Header for section headers within a Card
-*/
-const SectionHeader = ({ children, ...elemProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
-	variant: "section",
-	...elemProps,
-	children
-});
-const Image = ({ height, children, ...elemProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageWrapper, {
-	...elemProps,
-	height,
-	children
-});
-const CollapsibleSection = ({ id, defaultExpanded, title, children }) => {
-	const [isOpen, { toggle }] = require_useToggle.useToggle(defaultExpanded);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			id,
-			onClick: toggle,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Header, {
-				variant: "section",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderIcon, { children: [isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronUpIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronDownIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spacer.Spacer_default, {
-					width: .5,
-					height: 0
-				})] }), title]
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spacer.Spacer_default, { height: 1 }), children] }) }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spacer.Spacer_default, { height: 1 })
-	] });
-};
-const HeaderIcon = styled_components.default.div`
-  display: flex;
-`;
-var Card_default = Object.assign(Card, {
-	Title,
-	SectionHeader,
-	Subtitle,
-	Body,
-	Image,
-	CollapsibleSection
-});
-//#endregion
-Object.defineProperty(exports, "ActionsContainer", {
-	enumerable: true,
-	get: function() {
-		return ActionsContainer;
-	}
-});
-Object.defineProperty(exports, "Card_default", {
-	enumerable: true,
-	get: function() {
-		return Card_default;
-	}
-});
-Object.defineProperty(exports, "Header", {
-	enumerable: true,
-	get: function() {
-		return Header;
-	}
-});
-Object.defineProperty(exports, "HeaderContainer", {
-	enumerable: true,
-	get: function() {
-		return HeaderContainer;
-	}
-});
-Object.defineProperty(exports, "Root", {
-	enumerable: true,
-	get: function() {
-		return Root;
-	}
-});
-Object.defineProperty(exports, "Title", {
-	enumerable: true,
-	get: function() {
-		return Title$1;
-	}
-});
-Object.defineProperty(exports, "TitleContainer", {
-	enumerable: true,
-	get: function() {
-		return TitleContainer;
-	}
-});
-
-//# sourceMappingURL=Card-CaOItkgL.cjs.map

package/dist/Card-CaOItkgL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-CaOItkgL.cjs","names":["paragraphMixins","Spacing","Title","headingMixins","Color","Spacing","Paragraph","useToggle","ChevronUpIcon","ChevronDownIcon","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n  children: ReactNode;\n  subtitle?: ReactNode;\n  variant?: 'title' | 'section';\n  actions?: ReactNode;\n  $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  &:not(:only-child) {\n    margin: 0px 0px ${Spacing[4]} 0px;\n    ${({ $matchCardV2 }) =>\n      $matchCardV2 &&\n      css`\n        margin-bottom: ${Spacing[1]};\n      `}\n  }\n  ${({ variant }) =>\n    variant === 'section' &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n    `}\n`;\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  gap: ${Spacing[2]};\n  ${({ variant }) => {\n    switch (variant) {\n      case 'section':\n        return paragraphMixins.lgBold;\n      case 'title':\n      default:\n        return headingMixins.sm;\n    }\n  }}\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      ${headingMixins.xsm};\n    `}\n`;\n\nexport const ActionsContainer = styled.div`\n  color: ${({ theme }) => theme.color.text.secondary};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n\n  /* Use negative margin to bleed the divider out of the grid. */\n  margin-left: -${Spacing[5]};\n  margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n  children,\n  variant,\n  actions,\n  subtitle,\n  $matchCardV2,\n  ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <>\n      <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n        <TitleContainer>\n          <Title variant={variant} $matchCardV2={$matchCardV2}>\n            {children}\n          </Title>\n          {subtitle}\n        </TitleContainer>\n        <ActionsContainer>{actions}</ActionsContainer>\n      </HeaderContainer>\n      {$matchCardV2 && <FullDivider />}\n    </>\n  );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n  elevated?: boolean;\n  $matchCardV2?: boolean;\n}\n\n/**\n * @deprecated Use CardV2 instead\n */\nconst Card = styled('div')<CardProps>`\n  border-radius: ${({ theme }) => {\n    return theme.card.borderRadius;\n  }};\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ${Spacing[4]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  ${({ elevated }) =>\n    elevated &&\n    css`\n      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n    `}\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      margin-bottom: 0;\n    `}\n`;\n\n/**\n * To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n */\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n  margin: 0;\n  padding: ${({ padding }) => padding ?? Spacing[5]};\n  display: grid;\n  grid-auto-flow: row;\n  grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n  /**\n    * Prevent grid blowout\n    * https://css-tricks.com/preventing-a-grid-blowout/\n    */\n  grid-template-columns: minmax(0, 1fr);\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n      grid-gap: ${Spacing[3]};\n    `}\n`;\n\nconst IconContainer = styled('div')`\n  margin-right: ${Spacing[3]};\n  display: flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n  width: 100%;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n    0px 0px;\n\n  ${({ height }) => {\n    return css`\n      height: ${height}px;\n    `;\n  }};\n\n  > img,\n  svg {\n    width: 100%;\n    border-radius: ${({ theme }) => theme.card.borderRadius}\n      ${({ theme }) => theme.card.borderRadius} 0px 0px;\n  }\n`;\n\ninterface TitleBaseProps {\n  icon?: ReactElement;\n}\n\ninterface TitleProps\n  extends\n    TitleBaseProps,\n    Pick<HeaderProps, 'actions' | 'subtitle'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {\n  $matchCardV2?: boolean;\n}\n\n/**\n * Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n */\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n  <Header variant='title' {...elemProps}>\n    {icon != null && <IconContainer>{icon}</IconContainer>}\n    {children}\n  </Header>\n);\n\n/**\n * Smaller label to be used within cards.\n */\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n  color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n  extends\n    Pick<HeaderProps, 'subtitle' | 'actions'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}\n\n/**\n * Header for section headers within a Card\n */\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n  <Header variant='section' {...elemProps}>\n    {children}\n  </Header>\n);\n\n/**\n * Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n  height: number;\n  children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n  <ImageWrapper {...elemProps} height={height}>\n    {children}\n  </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n  id?: string;\n  defaultExpanded?: boolean;\n  title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n  id,\n  defaultExpanded,\n  title,\n  children,\n}) => {\n  const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n  return (\n    <section>\n      <div id={id} onClick={toggle}>\n        <Header variant='section'>\n          <HeaderIcon>\n            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            <Spacer width={0.5} height={0} />\n          </HeaderIcon>\n          {title}\n        </Header>\n      </div>\n      <div>\n        {isOpen && (\n          <>\n            <Spacer height={1} />\n            {children}\n          </>\n        )}\n      </div>\n      <Spacer height={1} />\n    </section>\n  );\n};\n\nconst HeaderIcon = styled.div`\n  display: flex;\n`;\n\nexport default Object.assign(Card, {\n  Title,\n  SectionHeader,\n  Subtitle,\n  Body,\n  Image,\n  CollapsibleSection,\n});\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,kBAAkB,kBAAA,QAAO,GAAkD;IACpFA,oBAAAA,gBAAgB,GAAG;;;;;sBAKDC,uBAAAA,QAAQ,GAAG;OAC1B,EAAE,mBACH,gBACA,kBAAA,GAAG;yBACgBA,uBAAAA,QAAQ,GAAG;QAC5B;;KAEH,EAAE,cACH,YAAY,aACZ,kBAAA,GAAG;kCAC2B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;MACrE;;AAGN,MAAa,iBAAiB,kBAAA,QAAO,GAAG;;;SAG/BA,uBAAAA,QAAQ,GAAG;;AAGpB,MAAaC,UAAQ,kBAAA,QAAO,EAAiD;;;;SAIpED,uBAAAA,QAAQ,GAAG;KACf,EAAE,cAAc;AACjB,SAAQ,SAAR;EACE,KAAK,UACH,QAAOD,oBAAAA,gBAAgB;EAEzB,QACE,QAAOG,oBAAAA,cAAc;;EAEzB;KACC,EAAE,mBACH,gBACA,kBAAA,GAAG;QACCA,oBAAAA,cAAc,IAAI;MACpB;;AAGN,MAAa,mBAAmB,kBAAA,QAAO,GAAG;YAC9B,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;SAG5CF,uBAAAA,QAAQ,GAAG;;AAGpB,MAAM,cAAc,kBAAA,QAAO,EAAE;0BACHG,uBAAAA,MAAM,cAAc;;;;kBAI5BH,uBAAAA,QAAQ,GAAG;mBACVA,uBAAAA,QAAQ,GAAG;;AAG9B,MAAM,UAAU,EACd,UACA,SACA,SACA,UACA,cACA,GAAG,gBACgD;AACnD,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,iBAAD;EAA0B;EAAS,GAAI;EAAyB;YAAhE,CACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,SAAD;GAAgB;GAAuB;GACpC;GACK,CAAA,EACP,SACc,EAAA,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UAAmB,SAA2B,CAAA,CAC9B;KACjB,gBAAgB,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAe,CAAA,CAC/B,EAAA,CAAA;;AAIP,MAAa,OAAO;;;;;;AC5EpB,MAAM,OAAO,CAAA,GAAA,kBAAA,SAAO,MAAM;oBACN,EAAE,YAAY;AAC9B,QAAO,MAAM,KAAK;EAClB;;;mBAGeG,uBAAAA,QAAQ,GAAG;uBACP,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;kBAClD,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;KACtD,EAAE,eACH,YACA,kBAAA,GAAG;;MAED;;KAED,EAAE,mBACH,gBACA,kBAAA,GAAG;;MAED;;;;;;AAON,MAAM,OAAO,CAAA,GAAA,kBAAA,SAAO,UAAU;;cAEhB,EAAE,cAAc,WAAWA,uBAAAA,QAAQ,GAAG;;;eAGrC,EAAE,UAAW,OAAO,OAAO,MAAA,EAAY;;;;;;;KAOjD,EAAE,mBACH,gBACA,kBAAA,GAAG;iBACUA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;kBACxBA,uBAAAA,QAAQ,GAAG;MACvB;;AAGN,MAAM,gBAAgB,CAAA,GAAA,kBAAA,SAAO,MAAM;kBACjBA,uBAAAA,QAAQ,GAAG;;;;;;;;;AAU7B,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,MAAM;;;oBAGd,EAAE,YAAY,MAAM,KAAK,aAAa,IAAI,EAAE,YAAY,MAAM,KAAK,aAAa;;;KAG/F,EAAE,aAAa;AAChB,QAAO,kBAAA,GAAG;gBACE,OAAO;;EAEnB;;;;;sBAKkB,EAAE,YAAY,MAAM,KAAK,aAAa;SACnD,EAAE,YAAY,MAAM,KAAK,aAAa;;;;;;;AAoB/C,MAAM,SAAyB,EAAE,MAAM,UAAU,GAAG,gBAClD,iBAAA,GAAA,kBAAA,MAAC,QAAD;CAAQ,SAAQ;CAAQ,GAAI;WAA5B,CACG,QAAQ,QAAQ,iBAAA,GAAA,kBAAA,KAAC,eAAD,EAAA,UAAgB,MAAqB,CAAA,EACrD,SACM;;;;;AAMX,MAAM,WAAW,CAAA,GAAA,kBAAA,SAAOC,aAAAA,UAAU,CAAC,aAAa,EAAE,MAAM,MAAM,EAAE;YACpD,EAAE,YAAY,MAAM,MAAM,KAAK,SAAS;;;;;AAWpD,MAAM,iBAAiB,EAAE,UAAU,GAAG,gBACpC,iBAAA,GAAA,kBAAA,KAAC,QAAD;CAAQ,SAAQ;CAAU,GAAI;CAC3B;CACM,CAAA;AAYX,MAAM,SAAyB,EAAE,QAAQ,UAAU,GAAG,gBACpD,iBAAA,GAAA,kBAAA,KAAC,cAAD;CAAc,GAAI;CAAmB;CAClC;CACY,CAAA;AASjB,MAAM,sBAAsE,EAC1E,IACA,iBACA,OACA,eACI;CACJ,MAAM,CAAC,QAAQ,EAAE,YAAYC,kBAAAA,UAAU,gBAAgB;AAEvD,QACE,iBAAA,GAAA,kBAAA,MAAC,WAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAS;GAAI,SAAS;aACpB,iBAAA,GAAA,kBAAA,MAAC,QAAD;IAAQ,SAAQ;cAAhB,CACE,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,KAACC,eAAAA,eAAD,EAAiB,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,eAAAA,iBAAD,EAAmB,CAAA,EACjD,iBAAA,GAAA,kBAAA,KAACC,eAAAA,gBAAD;KAAQ,OAAO;KAAK,QAAQ;KAAK,CAAA,CACtB,EAAA,CAAA,EACZ,MACM;;GACL,CAAA;EACN,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UACG,UACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACA,eAAAA,gBAAD,EAAQ,QAAQ,GAAK,CAAA,EACpB,SACA,EAAA,CAAA,EAED,CAAA;EACN,iBAAA,GAAA,kBAAA,KAACA,eAAAA,gBAAD,EAAQ,QAAQ,GAAK,CAAA;EACb,EAAA,CAAA;;AAId,MAAM,aAAa,kBAAA,QAAO,GAAG;;;AAI7B,IAAA,eAAe,OAAO,OAAO,MAAM;CACjC;CACA;CACA;CACA;CACA;CACA;CACD,CAAC"}