@persona/design-system 0.1.6 → 0.1.8

package/dist/components/CardV2/index.cjs

@@ -2,435 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CKQMccvm.cjs");
-const require_mixins_focus = require("../../mixins/focus.cjs");
-require("../../variables/transitions.cjs");
-const require_lib_ConfigContext = require("../../lib/ConfigContext.cjs");
-const require_lib_HeadlessAriaButton = require("../../lib/HeadlessAriaButton.cjs");
-const require_lib_TruncatedText = require("../../lib/TruncatedText.cjs");
-const require_Text = require("../../Text-CzN0DOXV.cjs");
-const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
-const require_lib_zindex = require("../../lib/zindex.cjs");
-const require_Stack = require("../../Stack-BF-9YjA1.cjs");
-const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
-const require_DropdownMenu = require("../../DropdownMenu-CeqZAxjs.cjs");
-const require_DropdownButton = require("../../DropdownButton-Dpiy5v-R.cjs");
-const require_LoadingShimmer = require("../../LoadingShimmer-uG2UzYQd.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-let styled_components$1 = require_chunk.__toESM(styled_components, 1);
-styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_aria_components = require("react-aria-components");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_icons = require("@persona/icons");
-let react_error_boundary = require("react-error-boundary");
-//#region components/CardV2/SectionHeading.tsx
-const CardLoadingShimmer$1 = (0, styled_components$1.default)(require_LoadingShimmer.LoadingShimmer)`
-  border-radius: ${({ theme }) => theme.card.borderRadius};
-`;
-const StickerContainer = styled_components$1.default.div`
-  display: flex;
-  max-width: 180px;
-`;
-const AccordionContainer = styled_components$1.default.div`
-  transition: opacity ${"150ms"};
-  position: absolute;
-  opacity: 0;
-
-  height: 12px;
-  width: 12px;
-  display: flex;
-  align-items: center;
-  /* Because of padding in the top section heading we need to offset differently. */
-  /* We want a 12px icon to be off-center in 24px padding, 4px on the right and 8px on the left */
-  left: ${({ $isTopSection }) => $isTopSection ? "8px" : "-16px"};
-  /* center the icon vertically */
-  top: calc(50% - 6px);
-
-  border-radius: 1px;
-
-  & svg {
-    transition: transform ${"150ms"} ease-out;
-    transform: rotate(${({ $expanded }) => $expanded ? "0" : "-90deg"});
-  }
-`;
-const HeaderButton = (0, styled_components$1.default)(require_lib_HeadlessAriaButton.HeadlessAriaButton)`
-  min-width: 0;
-  flex: 1;
-
-  &:hover ~ ${AccordionContainer} {
-    opacity: 1;
-  }
-
-  &:focus-visible ~ ${AccordionContainer} {
-    opacity: 1;
-    ${require_mixins_focus.focusStyle}
-  }
-`;
-const HeadingContainer = (0, styled_components$1.default)(require_Stack.HStack)`
-  position: relative;
-
-  ${({ $isTopSection }) => $isTopSection && styled_components$1.css`
-      padding: ${_persona_design_tokens.Spacing[4]} ${_persona_design_tokens.Spacing[5]};
-    `}
-  ${({ $divider }) => $divider && styled_components$1.css`
-      border-bottom: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-    `}
-  ${({ $isTopSection, $hasFooter, $isExpanded }) => $isTopSection && !$hasFooter && !$isExpanded && styled_components$1.css`
-      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer
-      // when being scrolled and still appears inside the card. Here we adjust, subtracting
-      // 4px from the 16px padding.
-      padding-bottom: ${_persona_design_tokens.Spacing[3]};
-    `}
-`;
-const StyledHeading = (0, styled_components$1.default)(require_Text.Heading)`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[2]};
-  line-height: 24px; // We want an adjusted line-height to hit the target header size.
-  overflow: hidden;
-
-  ${({ $isCollapsible }) => $isCollapsible && "cursor: pointer;"}
-  ${({ $isTopSection }) => !$isTopSection && styled_components$1.css`
-      ${_persona_design_tokens.Typography.TextLargeBold};
-    `}
-`;
-const isIconAction = (action) => "icon" in action;
-const ButtonRow = ({ actions, menuActions }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, { children: [actions.filter((action) => !action.hidden).map((action, i) => {
-		const key = isIconAction(action) ? action.id ?? action.ariaLabel ?? `action-${i}` : action.id ?? action.label ?? `action-${i}`;
-		const button = isIconAction(action) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-			id: action.id,
-			to: action.to,
-			onClick: (e) => {
-				e.stopPropagation();
-				return action.onClick?.(e);
-			},
-			disabled: action.disabled,
-			"aria-label": action.ariaLabel,
-			size: "sm",
-			children: action.icon
-		}, key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-			id: action.id,
-			"aria-label": action.ariaLabel,
-			to: action.to,
-			onClick: (e) => {
-				e.stopPropagation();
-				return action.onClick?.(e);
-			},
-			disabled: action.disabled,
-			variant: action.variant ?? "basic",
-			size: "sm",
-			width: "auto",
-			prefixIcon: action.prefixIcon,
-			suffixIcon: action.suffixIcon,
-			children: action.label
-		}, key);
-		return action.tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
-			...action.tooltipProps,
-			trigger: button,
-			children: action.tooltip
-		}, key) : button;
-	}), menuActions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownButton.DropdownButton, {
-		variant: "text",
-		width: "icon",
-		size: "sm",
-		suffixIcon: void 0,
-		style: { justifySelf: "flex-end" },
-		"aria-label": "More actions",
-		menuProps: { portal: true },
-		menuItems: menuActions.filter((action) => !action.hidden).map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-			id: action.id ?? action.label,
-			onClick: action.onClick,
-			disabled: action.disabled,
-			children: action.label
-		}, action.id ?? action.label)),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
-	})] });
-};
-/**
-* Private component for rendering the heading of a section, both the primary card heading and
-* section headings.
-*/
-const SectionHeading = ({ isTopSection, sectionHasContent, hasFooter, loading, title, actions = [], menuActions = [], headerActionsRowContent, sticker, leftDecorativeIcon, toggle, isExpanded, headingProps }) => {
-	const renderButtonRow = actions.length > 0 || menuActions.length > 0;
-	const { as: headingAs, ...restHeadingProps } = headingProps ?? {};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingContainer, {
-		$isTopSection: isTopSection,
-		$hasFooter: hasFooter,
-		$isExpanded: isExpanded,
-		$divider: isTopSection && isExpanded && sectionHasContent,
-		align: "center",
-		justify: "space-between",
-		spacing: _persona_design_tokens.Spacing[2],
-		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardLoadingShimmer$1, {
-			height: "24px",
-			width: "200px"
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderButton, {
-				slot: "trigger",
-				isDisabled: !toggle,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledHeading, {
-					forwardedAs: headingAs ?? (isTopSection ? "h2" : "h3"),
-					size: "xsm",
-					$isCollapsible: !!toggle,
-					$isTopSection: isTopSection,
-					"aria-label": title,
-					...restHeadingProps,
-					children: [
-						leftDecorativeIcon,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_TruncatedText.TruncatedText, { children: title }),
-						sticker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StickerContainer, { children: sticker })
-					]
-				})
-			}),
-			headerActionsRowContent,
-			renderButtonRow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonRow, {
-				actions: actions.filter((action) => action != null),
-				menuActions: menuActions.filter((action) => action != null)
-			}),
-			toggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionContainer, {
-				$isTopSection: isTopSection,
-				$expanded: isExpanded,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronDownIcon, {})
-			})
-		] })
-	});
-};
-//#endregion
-//#region lib/intersperse.ts
-/**
-* @name intersperse
-*
-* Inserts an element between array items using a separator function. The
-* separator function is passed the previous index, the previous element, and
-* the next element.
-*
-* ```typescript
-* const nodeList: React.ReactNode[] = [...]
-* const commaSeparatedList = intersperse(nodeList, () => ', ')
-* const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)
-* ```
-*/
-function intersperse(arr, separator) {
-	return arr.flatMap((a, i) => i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]);
-}
-//#endregion
-//#region components/CardV2/Section.tsx
-const FooterParagraph = (0, styled_components$1.default)(require_Text.Paragraph)`
-  line-height: 16px;
-`;
-const FooterContainer = styled_components$1.default.div`
-  ${({ $divider }) => $divider && styled_components$1.css`
-      border-top: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-    `}
-  padding: ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[5]} ${_persona_design_tokens.Spacing[2]};
-`;
-const MaybeStickyContainer = styled_components$1.default.div`
-  ${({ $enabled }) => $enabled && styled_components$1.css`
-      // We are using sticky positioning here to have consistent scrollbar behavior between
-      // different card configurations. Usage of sticky allows us to keep the scroll container at
-      // the top of the card DOM structure regardless of whether the heading or footer is sticky.
-      //
-      // This also afaict helps eliminate the need to carry height values through the card DOM
-      // structure to the content container (and possibly needing to adjust heights for heading and footer).
-      position: sticky;
-      top: 0;
-      background-color: ${({ theme }) => theme.color.background.primary};
-      z-index: ${require_lib_zindex.Z_INDICES.sticky};
-    `}
-
-  ${({ $bottom = false }) => $bottom && styled_components$1.css`
-      top: unset;
-      bottom: 0;
-    `}
-`;
-const StyledDisclosure = (0, styled_components$1.default)(react_aria_components.Disclosure)`
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  ${({ $fullHeight }) => $fullHeight && styled_components$1.css`
-      height: 100%;
-    `}
-`;
-const StyledDisclosurePanel = (0, styled_components$1.default)(react_aria_components.DisclosurePanel)`
-  flex: 1;
-  ${({ $isTopSection }) => $isTopSection && styled_components$1.css`
-      // Safari does not support hidden='until-found' so react-aria uses display: none instead.
-      // Since react-aria is using display to hide content we need to not set display ourselves.
-      &:not([aria-hidden='true']) {
-        display: flex;
-      }
-    `}
-`;
-const CardLoadingShimmer = (0, styled_components$1.default)(require_LoadingShimmer.LoadingShimmer)`
-  border-radius: ${({ theme }) => theme.card.borderRadius};
-`;
-const SectionContentContainer = styled_components$1.default.div`
-  ${({ $isTopSection }) => $isTopSection && styled_components$1.css`
-      padding: ${_persona_design_tokens.Spacing[5]};
-      display: flex;
-      flex-direction: column;
-      gap: ${_persona_design_tokens.Spacing[5]};
-      flex: 1;
-      /* Prevent grid blowout https://css-tricks.com/preventing-a-grid-blowout/ */
-      min-width: 0;
-    `}
-
-  ${({ $isTopSection, $hasHeading }) => !$isTopSection && $hasHeading && styled_components$1.css`
-      padding-top: ${_persona_design_tokens.Spacing[3]};
-    `}
-
-    ${({ $isTopSection, $hasFooter }) => $isTopSection && !$hasFooter && styled_components$1.css`
-      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer
-      // when being scrolled and still appears inside the card. Here we adjust, subtracting
-      // 4px from the 24px padding.
-      padding-bottom: 20px;
-    `}
-`;
-/**
-* Private component for rendering sections of the card, both the primary card section and
-* individual sections.
-*/
-const Section = ({ children, isTopSection, heading, footer, footerContent, loading = false, loadingProps, empty = false, emptyProps, defaultCollapsed = false, collapsible = false, sticky = false, fullHeight = false }) => {
-	let content;
-	if (loading) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardLoadingShimmer, {
-		height: loadingProps?.height ?? "200px",
-		width: "100%"
-	});
-	else if (empty) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: emptyProps?.message ?? "No data collected" });
-	else content = children;
-	const hasFooter = !!(footer || footerContent);
-	const hasContent = !!content;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledDisclosure, {
-		defaultExpanded: !defaultCollapsed,
-		$fullHeight: fullHeight,
-		children: ({ isExpanded, state }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			heading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MaybeStickyContainer, {
-				$enabled: sticky,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeading, {
-					isTopSection,
-					hasFooter,
-					sectionHasContent: hasContent,
-					loading,
-					toggle: collapsible ? state.toggle : void 0,
-					isExpanded,
-					...heading
-				})
-			}),
-			hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledDisclosurePanel, {
-				$isTopSection: isTopSection,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionContentContainer, {
-					$isTopSection: isTopSection,
-					$hasHeading: !!heading,
-					$hasFooter: hasFooter,
-					children: content
-				})
-			}),
-			hasFooter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MaybeStickyContainer, {
-				$enabled: sticky,
-				$bottom: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterContainer, {
-					$divider: hasContent,
-					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardLoadingShimmer, {
-						height: "16px",
-						width: "120px"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardLoadingShimmer, {
-						height: "16px",
-						width: "120px"
-					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterParagraph, {
-						size: "sm",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.HStack, {
-							spacing: _persona_design_tokens.Spacing[1],
-							children: intersperse(footer.filter((item) => item != null).map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item }, `footer-item-${i}`)), (i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "•" }, i))
-						})
-					}), footerContent] })
-				})
-			})
-		] })
-	});
-};
-//#endregion
-//#region components/CardV2/Card.tsx
-const CardContainer = styled_components.default.div`
-  border-radius: ${({ theme }) => theme.card.borderRadius};
-  background-color: ${({ theme }) => theme.color.background.primary};
-  // Height has been tricky here.
-  // inherit seems to work well for both grid and flexbox layouts. In a grid we want this
-  // container to receive the full cell height, In a flexbox we want this container to flex, maintaining
-  // the minimum height for it's content.
-  height: inherit;
-  overflow-y: auto;
-
-  box-sizing: border-box;
-  // Small buffer so that content is not scrolling right on the edge of the card.
-  border-bottom: 4px solid ${({ theme }) => theme.color.background.primary};
-`;
-const CardContext = (0, react.createContext)({});
-const Divider = styled_components.default.hr`
-  margin: 0;
-  border: none;
-  border-top: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-`;
-/**
-* Renders a card section.
-*/
-const PublicSection = (props) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
-		isTopSection: false,
-		...props
-	});
-};
-/**
-* Render the card in a "stacked" mode. Used for rendering multiple cards on top of each other
-* that appear visually as a single card.
-*/
-const Stacked = ({ children }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContext.Provider, {
-		value: { isStacked: true },
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, { children: intersperse(children, (i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {}, i)) })
-	});
-};
-const DEFAULT_ERROR_MESSAGE = "🔍 Oops, something went wrong loading this card.";
-/**
-* Renders a PDS Card.
-*
-* To render sections of the card use `<Card.Section>...</Card.Section>`
-*/
-const Card = ({ children, errored, erroredProps, containerProps, sticky = true, ...sectionProps }) => {
-	const { isStacked = false } = (0, react.useContext)(CardContext);
-	const { captureException } = (0, react.useContext)(require_lib_ConfigContext);
-	const errorFallback = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
-		isTopSection: true,
-		...sectionProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: erroredProps?.message ?? DEFAULT_ERROR_MESSAGE })
-	});
-	const section = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
-		isTopSection: true,
-		sticky,
-		...sectionProps,
-		children
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_error_boundary.ErrorBoundary, {
-		fallback: isStacked ? errorFallback : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, {
-			...containerProps,
-			children: errorFallback
-		}),
-		onError: erroredProps?.onError ?? ((error) => captureException(error)),
-		children: isStacked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: errored ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: errorFallback }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: section }) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, {
-			...containerProps,
-			children: errored ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: errorFallback }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: section })
-		})
-	});
-};
-var Card_default = Object.assign(Card, {
-	Section: PublicSection,
-	Stacked
-});
-//#endregion
-exports.Card = Card_default;
-exports.default = Card_default;
-
-//# sourceMappingURL=index.cjs.map
+const require_CardV2 = require("../../CardV2-DJXgFomd.cjs");
+exports.Card = require_CardV2.Card_default;
+exports.default = require_CardV2.Card_default;

package/dist/components/CardV2/index.d.cts

@@ -1,3 +1,3 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-uduFOh2m.cjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-E90Wvqmc.cjs";
 import _default from "../../Card2.cjs";
 export { _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };

package/dist/components/CardV2/index.d.mts

@@ -1,3 +1,3 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-DSg3yZck.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-CVtzREhU.mjs";
 import _default from "../../Card2.mjs";
 export { _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };