@persona/design-system 0.1.5-pre.4

package/dist/PageSizeSelector.d.mts

@@ -0,0 +1,22 @@
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Pagination/PageSizeSelector.d.ts
+interface PageSizeOptionProps {
+  currentPageSize: number;
+  pageSizeOption: number;
+}
+declare const PageSizeOption: _$styled_components0.StyledComponent<"div", any, PageSizeOptionProps, never>;
+interface PageSizeSelectorProps {
+  pageSize: number;
+  pageSizeOptions: number[];
+  handlePageSizeClick: (pageSize: number) => void;
+}
+declare const PageSizeSelector: ({
+  pageSize,
+  pageSizeOptions,
+  handlePageSizeClick
+}: PageSizeSelectorProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageSizeOption, PageSizeSelector as default };
+//# sourceMappingURL=PageSizeSelector.d.mts.map

package/dist/Pagination.d.cts

@@ -0,0 +1,33 @@
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { PaginationParams } from "lib/interfaces/api";
+
+//#region components/Pagination/Pagination.d.ts
+declare const PaginationInfo: _$styled_components0.StyledComponent<"div", any, {}, never>;
+interface PaginationProps {
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  paginationParams?: PaginationParams;
+  handlePageSizeClick: (pageSize: number) => void;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  showPageSizeSelector?: boolean;
+  /**
+   * Called with the new page number after the page changes. Lets the consumer
+   * react to page changes -- e.g. scroll the page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare const Pagination: ({
+  pageSize,
+  pageSizeOptions,
+  paginationParams,
+  handlePageSizeClick,
+  handlePageLinkClick,
+  isLoading,
+  showPageSizeSelector,
+  onPageChange
+}: PaginationProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PaginationInfo, Pagination as default };
+//# sourceMappingURL=Pagination.d.cts.map

package/dist/Pagination.d.mts

@@ -0,0 +1,33 @@
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { PaginationParams } from "lib/interfaces/api";
+
+//#region components/Pagination/Pagination.d.ts
+declare const PaginationInfo: _$styled_components0.StyledComponent<"div", any, {}, never>;
+interface PaginationProps {
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  paginationParams?: PaginationParams;
+  handlePageSizeClick: (pageSize: number) => void;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  showPageSizeSelector?: boolean;
+  /**
+   * Called with the new page number after the page changes. Lets the consumer
+   * react to page changes -- e.g. scroll the page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare const Pagination: ({
+  pageSize,
+  pageSizeOptions,
+  paginationParams,
+  handlePageSizeClick,
+  handlePageLinkClick,
+  isLoading,
+  showPageSizeSelector,
+  onPageChange
+}: PaginationProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PaginationInfo, Pagination as default };
+//# sourceMappingURL=Pagination.d.mts.map

package/dist/Pii.d.cts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Pii/Pii.d.ts
+interface PiiProps {
+  children?: ReactNode;
+  isRedacted: boolean;
+  hideOnRedacted?: boolean;
+}
+declare const Pii: ({
+  children,
+  isRedacted,
+  hideOnRedacted
+}: PiiProps) => _$react_jsx_runtime0.JSX.Element | null;
+export = Pii;
+//# sourceMappingURL=Pii.d.cts.map

package/dist/Pii.d.mts

@@ -0,0 +1,17 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/Pii/Pii.d.ts
+interface PiiProps {
+  children?: ReactNode;
+  isRedacted: boolean;
+  hideOnRedacted?: boolean;
+}
+declare const Pii: ({
+  children,
+  isRedacted,
+  hideOnRedacted
+}: PiiProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Pii as default };
+//# sourceMappingURL=Pii.d.mts.map

package/dist/Popover-BSdyxuja.mjs

@@ -0,0 +1,124 @@
+import { t as Card_default } from "./Card-DeJSt5ys.mjs";
+import { i as Paragraph } from "./Text-DOTYjIt0.mjs";
+import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement } from "react";
+import { XIcon } from "@persona/icons";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region components/Popover/Popover.tsx
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverPortal = PopoverPrimitive.Portal;
+const PopoverContent = PopoverPrimitive.PopoverContent;
+const PopoverContentStyled = styled(PopoverContent)`
+  z-index: ${({ zIndex }) => zIndex || "inherit"};
+  ${({ $maxHeight }) => $maxHeight && css`
+      max-height: ${$maxHeight};
+      overflow: auto;
+    `}
+`;
+const PopoverCloseButton = styled(PopoverPrimitive.Close)`
+  ${({ isHeader }) => !isHeader && css`
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    `}
+  ${({ isHeader }) => isHeader && css`
+      height: 16px;
+    `}
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+`;
+const HeadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const PopoverClose = (props) => {
+	return /* @__PURE__ */ jsx(PopoverCloseButton, {
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	});
+};
+/**
+* Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.
+*/
+const PopoverCard = forwardRef(function PopoverCard({ children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props }, ref) {
+	const header = heading && /* @__PURE__ */ jsxs(HeadingContainer, { children: [/* @__PURE__ */ jsx(Paragraph, {
+		size: "md",
+		weight: "bold",
+		color: "primary",
+		children: heading
+	}), showCloseButton && /* @__PURE__ */ jsx(PopoverClose, {
+		"aria-label": "Close",
+		isHeader: true
+	})] });
+	return /* @__PURE__ */ jsx(PopoverContentStyled, {
+		asChild: true,
+		sideOffset: 8,
+		collisionPadding: 8,
+		zIndex,
+		$maxHeight: maxHeight,
+		...props,
+		ref,
+		children: /* @__PURE__ */ jsxs(Card_default, {
+			elevated: true,
+			children: [!heading && showCloseButton && /* @__PURE__ */ jsx(PopoverClose, { "aria-label": "Close" }), noPadding ? /* @__PURE__ */ jsxs(Fragment, { children: [heading && header, children] }) : /* @__PURE__ */ jsxs(Card_default.Body, {
+				padding,
+				children: [heading && header, children]
+			})]
+		})
+	});
+});
+const Popover = ({ children, trigger, triggerProps, contentProps, anchor, portal = true, portalProps, ...props }) => {
+	let triggerElem;
+	let contentElem;
+	let anchorElem = anchor;
+	const renderChildren = Children.toArray(children).filter((child) => {
+		if (isValidElement(child)) switch (child.type) {
+			case PopoverPrimitive.Trigger:
+				triggerElem = child;
+				return false;
+			case PopoverCard:
+			case PopoverPrimitive.Content:
+				contentElem = child;
+				break;
+			case PopoverPrimitive.Anchor:
+				anchorElem = child;
+				return false;
+		}
+		return true;
+	});
+	const content = contentElem || /* @__PURE__ */ jsx(PopoverCard, {
+		...contentProps,
+		children: renderChildren
+	});
+	return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
+		...props,
+		children: [
+			triggerElem || trigger && /* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				...triggerProps,
+				children: trigger
+			}),
+			anchorElem,
+			portal ? /* @__PURE__ */ jsx(PopoverPortal, {
+				...portalProps,
+				children: content
+			}) : content
+		]
+	});
+};
+var Popover_default = Object.assign(Popover, {
+	Trigger: PopoverTrigger,
+	Anchor: PopoverAnchor,
+	Portal: PopoverPortal,
+	Content: PopoverContent,
+	Card: PopoverCard,
+	Close: PopoverClose
+});
+//#endregion
+export { PopoverPortal as a, PopoverContent as i, PopoverCard as n, PopoverTrigger as o, PopoverClose as r, Popover_default as s, PopoverAnchor as t };
+
+//# sourceMappingURL=Popover-BSdyxuja.mjs.map

package/dist/Popover-BSdyxuja.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-BSdyxuja.mjs","names":["Card"],"sources":["../components/Popover/Popover.tsx"],"sourcesContent":["import type { Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Children, forwardRef, isValidElement, type ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Card from 'design-system/components/Card';\nimport { Paragraph } from 'design-system/components/Text';\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverPortal = PopoverPrimitive.Portal;\n\n// TODO: Investigate how we can get date popovers to work properly with the new date  picker\nexport const PopoverContent = PopoverPrimitive.PopoverContent;\n\nconst PopoverContentStyled = styled(PopoverContent)<{ zIndex?: number; $maxHeight?: string }>`\n  z-index: ${({ zIndex }) => zIndex || 'inherit'};\n  ${({ $maxHeight }) =>\n    $maxHeight &&\n    css`\n      max-height: ${$maxHeight};\n      overflow: auto;\n    `}\n`;\n\nconst PopoverCloseButton = styled(PopoverPrimitive.Close)<{ isHeader?: boolean }>`\n  ${({ isHeader }) =>\n    !isHeader &&\n    css`\n      position: absolute;\n      top: 8px;\n      right: 8px;\n    `}\n  ${({ isHeader }) =>\n    isHeader &&\n    css`\n      height: 16px;\n    `}\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n`;\n\nconst HeadingContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nexport const PopoverClose = (\n  props: PopoverPrimitive.PopoverCloseProps & { isHeader?: boolean },\n) => {\n  return (\n    <PopoverCloseButton {...props}>\n      <XIcon />\n    </PopoverCloseButton>\n  );\n};\n\nexport interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Remove padding from Card\n   */\n  noPadding?: boolean;\n\n  padding?: Spacing;\n\n  /**\n   * Text to display in the header of the card\n   */\n  heading?: string;\n\n  /**\n   * Z-index to apply to the popover content\n   */\n  zIndex?: number;\n\n  /**\n   * Maximum height for the popover content.\n   */\n  maxHeight?: string;\n}\n\n/**\n * Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.\n */\nexport const PopoverCard = forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverCardProps\n>(function PopoverCard(\n  { children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props },\n  ref,\n) {\n  const header = heading && (\n    <HeadingContainer>\n      <Paragraph size='md' weight='bold' color='primary'>\n        {heading}\n      </Paragraph>\n      {showCloseButton && <PopoverClose aria-label='Close' isHeader />}\n    </HeadingContainer>\n  );\n  return (\n    <PopoverContentStyled\n      asChild\n      sideOffset={8}\n      collisionPadding={8}\n      zIndex={zIndex}\n      $maxHeight={maxHeight}\n      {...props}\n      ref={ref}\n    >\n      <Card elevated>\n        {!heading && showCloseButton && <PopoverClose aria-label='Close' />}\n        {noPadding ? (\n          <>\n            {heading && header}\n            {children}\n          </>\n        ) : (\n          <Card.Body padding={padding}>\n            {heading && header}\n            {children}\n          </Card.Body>\n        )}\n      </Card>\n    </PopoverContentStyled>\n  );\n});\n\ninterface PopoverProps extends PopoverPrimitive.PopoverProps {\n  /**\n   * Component to use as trigger. Radix UI trigger component props will be merged with this element.\n   */\n  trigger?: ReactElement;\n\n  /**\n   * Props to apply to Popover.Trigger within\n   */\n  triggerProps?: PopoverPrimitive.PopoverTriggerProps;\n\n  /**\n   * An optional element to position the Popover.Content against.\n   * If this part is not used, the content will position alongside the trigger.\n   */\n  anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;\n\n  /**\n   * Props to apply to Popover.Card within\n   */\n  contentProps?: PopoverCardProps;\n\n  /**\n   * Render content within a portal\n   */\n  portal?: boolean;\n\n  /**\n   * Props applied to Radix UI Portal component\n   */\n  portalProps?: PopoverPrimitive.PopoverPortalProps;\n}\n\nconst Popover = ({\n  children,\n  trigger,\n  triggerProps,\n  contentProps,\n  anchor,\n  portal = true,\n  portalProps,\n  ...props\n}: PopoverProps) => {\n  let triggerElem;\n  let contentElem;\n  let anchorElem = anchor;\n\n  const renderChildren = Children.toArray(children).filter((child) => {\n    if (isValidElement(child)) {\n      switch (child.type) {\n        case PopoverPrimitive.Trigger:\n          triggerElem = child;\n          return false;\n        case PopoverCard:\n        case PopoverPrimitive.Content:\n          contentElem = child;\n          break;\n        case PopoverPrimitive.Anchor:\n          /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n          anchorElem = child;\n          return false;\n      }\n    }\n\n    return true;\n  });\n\n  const content = contentElem || <PopoverCard {...contentProps}>{renderChildren}</PopoverCard>;\n\n  return (\n    <PopoverPrimitive.Root {...props}>\n      {triggerElem ||\n        (trigger && (\n          <PopoverTrigger asChild {...triggerProps}>\n            {trigger}\n          </PopoverTrigger>\n        ))}\n      {anchorElem}\n      {portal ? <PopoverPortal {...portalProps}>{content}</PopoverPortal> : content}\n    </PopoverPrimitive.Root>\n  );\n};\n\nexport default Object.assign(Popover, {\n  Trigger: PopoverTrigger,\n  Anchor: PopoverAnchor,\n  Portal: PopoverPortal,\n  Content: PopoverContent,\n  Card: PopoverCard,\n  Close: PopoverClose,\n});\n"],"mappings":";;;;;;;;AASA,MAAa,iBAAiB,iBAAiB;AAC/C,MAAa,gBAAgB,iBAAiB;AAC9C,MAAa,gBAAgB,iBAAiB;AAG9C,MAAa,iBAAiB,iBAAiB;AAE/C,MAAM,uBAAuB,OAAO,eAAe;cACrC,EAAE,aAAa,UAAU,UAAU;KAC5C,EAAE,iBACH,cACA,GAAG;oBACa,WAAW;;MAEzB;;AAGN,MAAM,qBAAqB,OAAO,iBAAiB,MAAM;KACpD,EAAE,eACH,CAAC,YACD,GAAG;;;;MAID;KACD,EAAE,eACH,YACA,GAAG;;MAED;;;;;AAMN,MAAM,mBAAmB,OAAO,GAAG;;;;;AAMnC,MAAa,gBACX,UACG;AACH,QACE,oBAAC,oBAAD;EAAoB,GAAI;YACtB,oBAAC,OAAD,EAAS,CAAA;EACU,CAAA;;;;;AAoCzB,MAAa,cAAc,WAGzB,SAAS,YACT,EAAE,UAAU,iBAAiB,SAAS,WAAW,SAAS,QAAQ,WAAW,GAAG,SAChF,KACA;CACA,MAAM,SAAS,WACb,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;EAAW,MAAK;EAAK,QAAO;EAAO,OAAM;YACtC;EACS,CAAA,EACX,mBAAmB,oBAAC,cAAD;EAAc,cAAW;EAAQ,UAAA;EAAW,CAAA,CAC/C,EAAA,CAAA;AAErB,QACE,oBAAC,sBAAD;EACE,SAAA;EACA,YAAY;EACZ,kBAAkB;EACV;EACR,YAAY;EACZ,GAAI;EACC;YAEL,qBAACA,cAAD;GAAM,UAAA;aAAN,CACG,CAAC,WAAW,mBAAmB,oBAAC,cAAD,EAAc,cAAW,SAAU,CAAA,EAClE,YACC,qBAAA,UAAA,EAAA,UAAA,CACG,WAAW,QACX,SACA,EAAA,CAAA,GAEH,qBAACA,aAAK,MAAN;IAAoB;cAApB,CACG,WAAW,QACX,SACS;MAET;;EACc,CAAA;EAEzB;AAmCF,MAAM,WAAW,EACf,UACA,SACA,cACA,cACA,QACA,SAAS,MACT,aACA,GAAG,YACe;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI,aAAa;CAEjB,MAAM,iBAAiB,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAClE,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK,iBAAiB;AACpB,kBAAc;AACd,WAAO;GACT,KAAK;GACL,KAAK,iBAAiB;AACpB,kBAAc;AACd;GACF,KAAK,iBAAiB;AAEpB,iBAAa;AACb,WAAO;;AAIb,SAAO;GACP;CAEF,MAAM,UAAU,eAAe,oBAAC,aAAD;EAAa,GAAI;YAAe;EAA6B,CAAA;AAE5F,QACE,qBAAC,iBAAiB,MAAlB;EAAuB,GAAI;YAA3B;GACG,eACE,WACC,oBAAC,gBAAD;IAAgB,SAAA;IAAQ,GAAI;cACzB;IACc,CAAA;GAEpB;GACA,SAAS,oBAAC,eAAD;IAAe,GAAI;cAAc;IAAwB,CAAA,GAAG;GAChD;;;AAI5B,IAAA,kBAAe,OAAO,OAAO,SAAS;CACpC,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,OAAO;CACR,CAAC"}

package/dist/Popover-C2dBSwiU.cjs

@@ -0,0 +1,168 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_Card = require("./Card-CyCKL-M5.cjs");
+const require_Text = require("./Text-DVz8erdF.cjs");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _persona_icons = require("@persona/icons");
+let _radix_ui_react_popover = require("@radix-ui/react-popover");
+_radix_ui_react_popover = require_chunk.__toESM(_radix_ui_react_popover);
+//#region components/Popover/Popover.tsx
+const PopoverTrigger = _radix_ui_react_popover.Trigger;
+const PopoverAnchor = _radix_ui_react_popover.Anchor;
+const PopoverPortal = _radix_ui_react_popover.Portal;
+const PopoverContent = _radix_ui_react_popover.PopoverContent;
+const PopoverContentStyled = (0, styled_components.default)(PopoverContent)`
+  z-index: ${({ zIndex }) => zIndex || "inherit"};
+  ${({ $maxHeight }) => $maxHeight && styled_components.css`
+      max-height: ${$maxHeight};
+      overflow: auto;
+    `}
+`;
+const PopoverCloseButton = (0, styled_components.default)(_radix_ui_react_popover.Close)`
+  ${({ isHeader }) => !isHeader && styled_components.css`
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    `}
+  ${({ isHeader }) => isHeader && styled_components.css`
+      height: 16px;
+    `}
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+`;
+const HeadingContainer = styled_components.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const PopoverClose = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverCloseButton, {
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.XIcon, {})
+	});
+};
+/**
+* Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.
+*/
+const PopoverCard = (0, react.forwardRef)(function PopoverCard({ children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props }, ref) {
+	const header = heading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeadingContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+		size: "md",
+		weight: "bold",
+		color: "primary",
+		children: heading
+	}), showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverClose, {
+		"aria-label": "Close",
+		isHeader: true
+	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContentStyled, {
+		asChild: true,
+		sideOffset: 8,
+		collisionPadding: 8,
+		zIndex,
+		$maxHeight: maxHeight,
+		...props,
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.Card_default, {
+			elevated: true,
+			children: [!heading && showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverClose, { "aria-label": "Close" }), noPadding ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [heading && header, children] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.Card_default.Body, {
+				padding,
+				children: [heading && header, children]
+			})]
+		})
+	});
+});
+const Popover = ({ children, trigger, triggerProps, contentProps, anchor, portal = true, portalProps, ...props }) => {
+	let triggerElem;
+	let contentElem;
+	let anchorElem = anchor;
+	const renderChildren = react.Children.toArray(children).filter((child) => {
+		if ((0, react.isValidElement)(child)) switch (child.type) {
+			case _radix_ui_react_popover.Trigger:
+				triggerElem = child;
+				return false;
+			case PopoverCard:
+			case _radix_ui_react_popover.Content:
+				contentElem = child;
+				break;
+			case _radix_ui_react_popover.Anchor:
+				anchorElem = child;
+				return false;
+		}
+		return true;
+	});
+	const content = contentElem || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverCard, {
+		...contentProps,
+		children: renderChildren
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_popover.Root, {
+		...props,
+		children: [
+			triggerElem || trigger && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
+				asChild: true,
+				...triggerProps,
+				children: trigger
+			}),
+			anchorElem,
+			portal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPortal, {
+				...portalProps,
+				children: content
+			}) : content
+		]
+	});
+};
+var Popover_default = Object.assign(Popover, {
+	Trigger: PopoverTrigger,
+	Anchor: PopoverAnchor,
+	Portal: PopoverPortal,
+	Content: PopoverContent,
+	Card: PopoverCard,
+	Close: PopoverClose
+});
+//#endregion
+Object.defineProperty(exports, "PopoverAnchor", {
+	enumerable: true,
+	get: function() {
+		return PopoverAnchor;
+	}
+});
+Object.defineProperty(exports, "PopoverCard", {
+	enumerable: true,
+	get: function() {
+		return PopoverCard;
+	}
+});
+Object.defineProperty(exports, "PopoverClose", {
+	enumerable: true,
+	get: function() {
+		return PopoverClose;
+	}
+});
+Object.defineProperty(exports, "PopoverContent", {
+	enumerable: true,
+	get: function() {
+		return PopoverContent;
+	}
+});
+Object.defineProperty(exports, "PopoverPortal", {
+	enumerable: true,
+	get: function() {
+		return PopoverPortal;
+	}
+});
+Object.defineProperty(exports, "PopoverTrigger", {
+	enumerable: true,
+	get: function() {
+		return PopoverTrigger;
+	}
+});
+Object.defineProperty(exports, "Popover_default", {
+	enumerable: true,
+	get: function() {
+		return Popover_default;
+	}
+});
+
+//# sourceMappingURL=Popover-C2dBSwiU.cjs.map

package/dist/Popover-C2dBSwiU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-C2dBSwiU.cjs","names":["PopoverPrimitive","XIcon","Paragraph","Card","Children"],"sources":["../components/Popover/Popover.tsx"],"sourcesContent":["import type { Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Children, forwardRef, isValidElement, type ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Card from 'design-system/components/Card';\nimport { Paragraph } from 'design-system/components/Text';\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverPortal = PopoverPrimitive.Portal;\n\n// TODO: Investigate how we can get date popovers to work properly with the new date  picker\nexport const PopoverContent = PopoverPrimitive.PopoverContent;\n\nconst PopoverContentStyled = styled(PopoverContent)<{ zIndex?: number; $maxHeight?: string }>`\n  z-index: ${({ zIndex }) => zIndex || 'inherit'};\n  ${({ $maxHeight }) =>\n    $maxHeight &&\n    css`\n      max-height: ${$maxHeight};\n      overflow: auto;\n    `}\n`;\n\nconst PopoverCloseButton = styled(PopoverPrimitive.Close)<{ isHeader?: boolean }>`\n  ${({ isHeader }) =>\n    !isHeader &&\n    css`\n      position: absolute;\n      top: 8px;\n      right: 8px;\n    `}\n  ${({ isHeader }) =>\n    isHeader &&\n    css`\n      height: 16px;\n    `}\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n`;\n\nconst HeadingContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nexport const PopoverClose = (\n  props: PopoverPrimitive.PopoverCloseProps & { isHeader?: boolean },\n) => {\n  return (\n    <PopoverCloseButton {...props}>\n      <XIcon />\n    </PopoverCloseButton>\n  );\n};\n\nexport interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Remove padding from Card\n   */\n  noPadding?: boolean;\n\n  padding?: Spacing;\n\n  /**\n   * Text to display in the header of the card\n   */\n  heading?: string;\n\n  /**\n   * Z-index to apply to the popover content\n   */\n  zIndex?: number;\n\n  /**\n   * Maximum height for the popover content.\n   */\n  maxHeight?: string;\n}\n\n/**\n * Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.\n */\nexport const PopoverCard = forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverCardProps\n>(function PopoverCard(\n  { children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props },\n  ref,\n) {\n  const header = heading && (\n    <HeadingContainer>\n      <Paragraph size='md' weight='bold' color='primary'>\n        {heading}\n      </Paragraph>\n      {showCloseButton && <PopoverClose aria-label='Close' isHeader />}\n    </HeadingContainer>\n  );\n  return (\n    <PopoverContentStyled\n      asChild\n      sideOffset={8}\n      collisionPadding={8}\n      zIndex={zIndex}\n      $maxHeight={maxHeight}\n      {...props}\n      ref={ref}\n    >\n      <Card elevated>\n        {!heading && showCloseButton && <PopoverClose aria-label='Close' />}\n        {noPadding ? (\n          <>\n            {heading && header}\n            {children}\n          </>\n        ) : (\n          <Card.Body padding={padding}>\n            {heading && header}\n            {children}\n          </Card.Body>\n        )}\n      </Card>\n    </PopoverContentStyled>\n  );\n});\n\ninterface PopoverProps extends PopoverPrimitive.PopoverProps {\n  /**\n   * Component to use as trigger. Radix UI trigger component props will be merged with this element.\n   */\n  trigger?: ReactElement;\n\n  /**\n   * Props to apply to Popover.Trigger within\n   */\n  triggerProps?: PopoverPrimitive.PopoverTriggerProps;\n\n  /**\n   * An optional element to position the Popover.Content against.\n   * If this part is not used, the content will position alongside the trigger.\n   */\n  anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;\n\n  /**\n   * Props to apply to Popover.Card within\n   */\n  contentProps?: PopoverCardProps;\n\n  /**\n   * Render content within a portal\n   */\n  portal?: boolean;\n\n  /**\n   * Props applied to Radix UI Portal component\n   */\n  portalProps?: PopoverPrimitive.PopoverPortalProps;\n}\n\nconst Popover = ({\n  children,\n  trigger,\n  triggerProps,\n  contentProps,\n  anchor,\n  portal = true,\n  portalProps,\n  ...props\n}: PopoverProps) => {\n  let triggerElem;\n  let contentElem;\n  let anchorElem = anchor;\n\n  const renderChildren = Children.toArray(children).filter((child) => {\n    if (isValidElement(child)) {\n      switch (child.type) {\n        case PopoverPrimitive.Trigger:\n          triggerElem = child;\n          return false;\n        case PopoverCard:\n        case PopoverPrimitive.Content:\n          contentElem = child;\n          break;\n        case PopoverPrimitive.Anchor:\n          /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n          anchorElem = child;\n          return false;\n      }\n    }\n\n    return true;\n  });\n\n  const content = contentElem || <PopoverCard {...contentProps}>{renderChildren}</PopoverCard>;\n\n  return (\n    <PopoverPrimitive.Root {...props}>\n      {triggerElem ||\n        (trigger && (\n          <PopoverTrigger asChild {...triggerProps}>\n            {trigger}\n          </PopoverTrigger>\n        ))}\n      {anchorElem}\n      {portal ? <PopoverPortal {...portalProps}>{content}</PopoverPortal> : content}\n    </PopoverPrimitive.Root>\n  );\n};\n\nexport default Object.assign(Popover, {\n  Trigger: PopoverTrigger,\n  Anchor: PopoverAnchor,\n  Portal: PopoverPortal,\n  Content: PopoverContent,\n  Card: PopoverCard,\n  Close: PopoverClose,\n});\n"],"mappings":"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"}

package/dist/Popover.d.cts

@@ -0,0 +1,90 @@
+import * as _$react from "react";
+import { ReactElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Spacing } from "@persona/design-tokens";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+//#region components/Popover/Popover.d.ts
+declare const PopoverTrigger: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const PopoverPortal: _$react.FC<PopoverPrimitive.PopoverPortalProps>;
+declare const PopoverContent: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverContentProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: (props: PopoverPrimitive.PopoverCloseProps & {
+  isHeader?: boolean;
+}) => _$react_jsx_runtime0.JSX.Element;
+interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {
+  /**
+   * Display X button to close popover
+   */
+  showCloseButton?: boolean;
+  /**
+   * Remove padding from Card
+   */
+  noPadding?: boolean;
+  padding?: Spacing;
+  /**
+   * Text to display in the header of the card
+   */
+  heading?: string;
+  /**
+   * Z-index to apply to the popover content
+   */
+  zIndex?: number;
+  /**
+   * Maximum height for the popover content.
+   */
+  maxHeight?: string;
+}
+/**
+ * Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.
+ */
+declare const PopoverCard: _$react.ForwardRefExoticComponent<PopoverCardProps & _$react.RefAttributes<HTMLDivElement>>;
+interface PopoverProps extends PopoverPrimitive.PopoverProps {
+  /**
+   * Component to use as trigger. Radix UI trigger component props will be merged with this element.
+   */
+  trigger?: ReactElement;
+  /**
+   * Props to apply to Popover.Trigger within
+   */
+  triggerProps?: PopoverPrimitive.PopoverTriggerProps;
+  /**
+   * An optional element to position the Popover.Content against.
+   * If this part is not used, the content will position alongside the trigger.
+   */
+  anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;
+  /**
+   * Props to apply to Popover.Card within
+   */
+  contentProps?: PopoverCardProps;
+  /**
+   * Render content within a portal
+   */
+  portal?: boolean;
+  /**
+   * Props applied to Radix UI Portal component
+   */
+  portalProps?: PopoverPrimitive.PopoverPortalProps;
+}
+declare const _default: (({
+  children,
+  trigger,
+  triggerProps,
+  contentProps,
+  anchor,
+  portal,
+  portalProps,
+  ...props
+}: PopoverProps) => _$react_jsx_runtime0.JSX.Element) & {
+  Trigger: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+  Anchor: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & _$react.RefAttributes<HTMLDivElement>>;
+  Portal: _$react.FC<PopoverPrimitive.PopoverPortalProps>;
+  Content: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverContentProps & _$react.RefAttributes<HTMLDivElement>>;
+  Card: _$react.ForwardRefExoticComponent<PopoverCardProps & _$react.RefAttributes<HTMLDivElement>>;
+  Close: (props: PopoverPrimitive.PopoverCloseProps & {
+    isHeader?: boolean;
+  }) => _$react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { PopoverAnchor, PopoverCard, PopoverCardProps, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, _default as default };
+//# sourceMappingURL=Popover.d.cts.map

package/dist/Popover.d.mts

@@ -0,0 +1,90 @@
+import { Spacing } from "@persona/design-tokens";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import { ReactElement } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+//#region components/Popover/Popover.d.ts
+declare const PopoverTrigger: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const PopoverPortal: _$react.FC<PopoverPrimitive.PopoverPortalProps>;
+declare const PopoverContent: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverContentProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: (props: PopoverPrimitive.PopoverCloseProps & {
+  isHeader?: boolean;
+}) => _$react_jsx_runtime0.JSX.Element;
+interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {
+  /**
+   * Display X button to close popover
+   */
+  showCloseButton?: boolean;
+  /**
+   * Remove padding from Card
+   */
+  noPadding?: boolean;
+  padding?: Spacing;
+  /**
+   * Text to display in the header of the card
+   */
+  heading?: string;
+  /**
+   * Z-index to apply to the popover content
+   */
+  zIndex?: number;
+  /**
+   * Maximum height for the popover content.
+   */
+  maxHeight?: string;
+}
+/**
+ * Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.
+ */
+declare const PopoverCard: _$react.ForwardRefExoticComponent<PopoverCardProps & _$react.RefAttributes<HTMLDivElement>>;
+interface PopoverProps extends PopoverPrimitive.PopoverProps {
+  /**
+   * Component to use as trigger. Radix UI trigger component props will be merged with this element.
+   */
+  trigger?: ReactElement;
+  /**
+   * Props to apply to Popover.Trigger within
+   */
+  triggerProps?: PopoverPrimitive.PopoverTriggerProps;
+  /**
+   * An optional element to position the Popover.Content against.
+   * If this part is not used, the content will position alongside the trigger.
+   */
+  anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;
+  /**
+   * Props to apply to Popover.Card within
+   */
+  contentProps?: PopoverCardProps;
+  /**
+   * Render content within a portal
+   */
+  portal?: boolean;
+  /**
+   * Props applied to Radix UI Portal component
+   */
+  portalProps?: PopoverPrimitive.PopoverPortalProps;
+}
+declare const _default: (({
+  children,
+  trigger,
+  triggerProps,
+  contentProps,
+  anchor,
+  portal,
+  portalProps,
+  ...props
+}: PopoverProps) => _$react_jsx_runtime0.JSX.Element) & {
+  Trigger: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+  Anchor: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & _$react.RefAttributes<HTMLDivElement>>;
+  Portal: _$react.FC<PopoverPrimitive.PopoverPortalProps>;
+  Content: _$react.ForwardRefExoticComponent<PopoverPrimitive.PopoverContentProps & _$react.RefAttributes<HTMLDivElement>>;
+  Card: _$react.ForwardRefExoticComponent<PopoverCardProps & _$react.RefAttributes<HTMLDivElement>>;
+  Close: (props: PopoverPrimitive.PopoverCloseProps & {
+    isHeader?: boolean;
+  }) => _$react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { PopoverAnchor, PopoverCard, PopoverCardProps, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, _default as default };
+//# sourceMappingURL=Popover.d.mts.map