@persona/design-system 0.1.5-pre.4

package/dist/Card-CyCKL-M5.cjs

@@ -0,0 +1,248 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+require("./variables/spacing.cjs");
+const require_Spacer = require("./Spacer-DWGkX170.cjs");
+const require_Text = require("./Text-DVz8erdF.cjs");
+const require_useToggle = require("./useToggle-DNrEsTpr.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-CyCKL-M5.cjs.map

package/dist/Card-CyCKL-M5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-CyCKL-M5.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 { Color, Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\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 { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\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":"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"}

package/dist/Card-DeJSt5ys.mjs

@@ -0,0 +1,205 @@
+import { headingMixins, paragraphMixins } from "./mixins/text.mjs";
+import "./variables/spacing.mjs";
+import { t as Spacer_default } from "./Spacer-DxH_sQrV.mjs";
+import { i as Paragraph } from "./Text-DOTYjIt0.mjs";
+import { t as useToggle } from "./useToggle-0zLL1E7s.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from "@persona/icons";
+//#region components/Card/Header/Header.tsx
+const HeaderContainer = styled.div`
+  ${paragraphMixins.md};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &:not(:only-child) {
+    margin: 0px 0px ${Spacing[4]} 0px;
+    ${({ $matchCardV2 }) => $matchCardV2 && css`
+        margin-bottom: ${Spacing[1]};
+      `}
+  }
+  ${({ variant }) => variant === "section" && css`
+      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+    `}
+`;
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+`;
+const Title$1 = styled.h3`
+  display: flex;
+  align-items: center;
+  margin: 0px;
+  gap: ${Spacing[2]};
+  ${({ variant }) => {
+	switch (variant) {
+		case "section": return paragraphMixins.lgBold;
+		default: return headingMixins.sm;
+	}
+}}
+  ${({ $matchCardV2 }) => $matchCardV2 && css`
+      ${headingMixins.xsm};
+    `}
+`;
+const ActionsContainer = styled.div`
+  color: ${({ theme }) => theme.color.text.secondary};
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+`;
+const FullDivider = styled.hr`
+  border-top: 1px solid ${Color.BorderDivider};
+  margin: 0;
+
+  /* Use negative margin to bleed the divider out of the grid. */
+  margin-left: -${Spacing[5]};
+  margin-right: -${Spacing[5]};
+`;
+const Header = ({ children, variant, actions, subtitle, $matchCardV2, ...elemProps }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(HeaderContainer, {
+		variant,
+		...elemProps,
+		$matchCardV2,
+		children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(Title$1, {
+			variant,
+			$matchCardV2,
+			children
+		}), subtitle] }), /* @__PURE__ */ jsx(ActionsContainer, { children: actions })]
+	}), $matchCardV2 && /* @__PURE__ */ jsx(FullDivider, {})] });
+};
+const Root = Header;
+//#endregion
+//#region components/Card/Card.tsx
+/**
+* @deprecated Use CardV2 instead
+*/
+const Card = styled("div")`
+  border-radius: ${({ theme }) => {
+	return theme.card.borderRadius;
+}};
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${Spacing[4]};
+  background-color: ${({ theme }) => theme.color.background.primary};
+  font-family: ${({ theme }) => theme.text.fontFamily.base};
+  ${({ elevated }) => elevated && css`
+      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);
+    `}
+
+  ${({ $matchCardV2 }) => $matchCardV2 && 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 = styled("section")`
+  margin: 0;
+  padding: ${({ padding }) => padding ?? 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 && css`
+      padding: ${Spacing[4]} ${Spacing[5]};
+      grid-gap: ${Spacing[3]};
+    `}
+`;
+const IconContainer = styled("div")`
+  margin-right: ${Spacing[3]};
+  display: flex;
+  align-items: center;
+
+  > svg {
+    height: 24px;
+    width: 24px;
+  }
+`;
+const ImageWrapper = styled("div")`
+  width: 100%;
+  overflow: hidden;
+  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}
+    0px 0px;
+
+  ${({ height }) => {
+	return 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__ */ jsxs(Header, {
+	variant: "title",
+	...elemProps,
+	children: [icon != null && /* @__PURE__ */ jsx(IconContainer, { children: icon }), children]
+});
+/**
+* Smaller label to be used within cards.
+*/
+const Subtitle = styled(Paragraph).attrs(() => ({ size: "md" }))`
+  color: ${({ theme }) => theme.color.text.tertiary};
+`;
+/**
+* Header for section headers within a Card
+*/
+const SectionHeader = ({ children, ...elemProps }) => /* @__PURE__ */ jsx(Header, {
+	variant: "section",
+	...elemProps,
+	children
+});
+const Image = ({ height, children, ...elemProps }) => /* @__PURE__ */ jsx(ImageWrapper, {
+	...elemProps,
+	height,
+	children
+});
+const CollapsibleSection = ({ id, defaultExpanded, title, children }) => {
+	const [isOpen, { toggle }] = useToggle(defaultExpanded);
+	return /* @__PURE__ */ jsxs("section", { children: [
+		/* @__PURE__ */ jsx("div", {
+			id,
+			onClick: toggle,
+			children: /* @__PURE__ */ jsxs(Header, {
+				variant: "section",
+				children: [/* @__PURE__ */ jsxs(HeaderIcon, { children: [isOpen ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}), /* @__PURE__ */ jsx(Spacer_default, {
+					width: .5,
+					height: 0
+				})] }), title]
+			})
+		}),
+		/* @__PURE__ */ jsx("div", { children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spacer_default, { height: 1 }), children] }) }),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 1 })
+	] });
+};
+const HeaderIcon = styled.div`
+  display: flex;
+`;
+var Card_default = Object.assign(Card, {
+	Title,
+	SectionHeader,
+	Subtitle,
+	Body,
+	Image,
+	CollapsibleSection
+});
+//#endregion
+export { Root as a, HeaderContainer as i, ActionsContainer as n, Title$1 as o, Header as r, TitleContainer as s, Card_default as t };
+
+//# sourceMappingURL=Card-DeJSt5ys.mjs.map

package/dist/Card-DeJSt5ys.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DeJSt5ys.mjs","names":["Title","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import { Color, Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\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 { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\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":"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"}

package/dist/Card.d.cts

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

package/dist/Card.d.mts

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

package/dist/Card2.d.cts

@@ -0,0 +1,95 @@
+import { t as SectionHeading } from "./SectionHeading-DVSXofwK.cjs";
+import { ComponentProps, FC, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+
+//#region components/CardV2/Card.d.ts
+declare const CardContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const _default: FC<{
+  /**
+   * Optional footer to render at the bottom of the card. Footer content is rendered as a
+   * paragraph with the items separated by a dot.
+   */
+  footer?: ReactNode[];
+  /**
+   * Optional arbitrary footer content to render as-is.
+   */
+  footerContent?: ReactNode;
+  /**
+   * Whether the card heading and footer are sticky.
+   */
+  sticky?: boolean;
+  /**
+   * Force the card to render in an errored state. Errors bubbling up from children will also
+   * render the errored state.
+   */
+  errored?: boolean;
+  /**
+   * Props for the errored state.
+   */
+  erroredProps?: {
+    /**
+     * Message to render in the errored state.
+     */
+    message?: string;
+    /**
+     * Callback to handle errors. Note this callback is only called when the error is bubbled up
+     * from children, not when `errored` is set to true.
+     */
+    onError?: (error: Error) => void;
+  };
+  containerProps?: ComponentProps<typeof CardContainer>;
+  /**
+   * Whether the card should render its content with 100% height. This is a bit of a hack for cards
+   * that want full control of their content and don't use sections.
+   */
+  fullHeight?: boolean;
+} & Pick<{
+  children?: ReactNode;
+  isTopSection: boolean;
+  heading?: Pick<ComponentProps<typeof SectionHeading>, "title" | "actions" | "menuActions" | "headerActionsRowContent" | "sticker" | "leftDecorativeIcon" | "headingProps">;
+  footer?: ReactNode[];
+  footerContent?: ReactNode;
+  collapsible?: boolean;
+  sticky?: boolean;
+  defaultCollapsed?: boolean;
+  loading?: boolean;
+  loadingProps?: {
+    height?: string;
+  };
+  empty?: boolean;
+  emptyProps?: {
+    message?: string;
+  };
+  fullHeight?: boolean;
+} & {
+  children?: ReactNode | undefined;
+}, "children" | "collapsible" | "defaultCollapsed" | "heading" | "loading" | "loadingProps" | "empty" | "emptyProps"> & {
+  children?: ReactNode | undefined;
+}> & {
+  Section: FC<Pick<{
+    children?: ReactNode;
+    isTopSection: boolean;
+    heading?: Pick<ComponentProps<typeof SectionHeading>, "title" | "actions" | "menuActions" | "headerActionsRowContent" | "sticker" | "leftDecorativeIcon" | "headingProps">;
+    footer?: ReactNode[];
+    footerContent?: ReactNode;
+    collapsible?: boolean;
+    sticky?: boolean;
+    defaultCollapsed?: boolean;
+    loading?: boolean;
+    loadingProps?: {
+      height?: string;
+    };
+    empty?: boolean;
+    emptyProps?: {
+      message?: string;
+    };
+    fullHeight?: boolean;
+  } & {
+    children?: ReactNode | undefined;
+  }, "children" | "collapsible" | "defaultCollapsed" | "heading" | "loading" | "loadingProps" | "empty" | "emptyProps">>;
+  Stacked: FC<{
+    children: ReactNode[];
+  }>;
+};
+export = _default;
+//# sourceMappingURL=Card2.d.cts.map