@persona/design-system 0.1.8 → 0.2.0

package/dist/Button-C_3p5Xfi.d.cts

@@ -1,101 +0,0 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
-import * as _$react from "react";
-import { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
-import * as _$styled_components0 from "styled-components";
-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-C_3p5Xfi.d.cts.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-CJPEmUvg.d.cts

@@ -1,52 +0,0 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-CrGiWG2E.cjs";
-import { i as HeaderProps } from "./Header-C-WhPOin.cjs";
-import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-import { Spacing } from "@persona/design-tokens";
-import * as _$hoist_non_react_statics0 from "hoist-non-react-statics";
-
-//#region components/Card/Card.d.ts
-interface CardProps {
-  elevated?: boolean;
-  $matchCardV2?: boolean;
-}
-interface TitleBaseProps {
-  icon?: ReactElement;
-}
-interface TitleProps extends TitleBaseProps, Pick<HeaderProps, 'actions' | 'subtitle'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {
-  $matchCardV2?: boolean;
-}
-interface SectionProps extends Pick<HeaderProps, 'subtitle' | 'actions'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}
-/**
- * Wrapper for a full-width image to be used at the top of a card.
- */
-interface ImageProps {
-  height: number;
-  children: ReactNode;
-}
-interface CollapsibleSectionProps {
-  id?: string;
-  defaultExpanded?: boolean;
-  title: ReactNode;
-}
-declare const _default: string & _$styled_components0.StyledComponentBase<"div", any, CardProps, never> & _$hoist_non_react_statics0.NonReactStatics<never, {}> & {
-  Title: FC<TitleProps>;
-  SectionHeader: ({
-    children,
-    ...elemProps
-  }: SectionProps) => _$react_jsx_runtime0.JSX.Element;
-  Subtitle: _$styled_components0.StyledComponent<FC<PropsWithChildren<SpanProps>>, any, ParagraphProps & {
-    size: string;
-  }, "size">;
-  Body: _$styled_components0.StyledComponent<"section", any, {
-    gap?: number;
-    padding?: Spacing;
-    $matchCardV2?: boolean;
-  }, never>;
-  Image: FC<ImageProps>;
-  CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>>;
-};
-//#endregion
-export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-CJPEmUvg.d.cts.map

package/dist/Card-Csz-PxX0.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-B2CerL6e.cjs");
-const require_Text = require("./Text-G9QmYf0P.cjs");
-const require_useToggle = require("./useToggle-DARO917w.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-Csz-PxX0.cjs.map

package/dist/Card-Csz-PxX0.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-Csz-PxX0.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":"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"}

package/dist/Card.d.cts

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

package/dist/Card2.d.cts

@@ -1,95 +0,0 @@
-import { t as SectionHeading } from "./SectionHeading-C6hjGdK-.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" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "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" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
-  Stacked: FC<{
-    children: ReactNode[];
-  }>;
-};
-export = _default;
-//# sourceMappingURL=Card2.d.cts.map