@persona/design-system 0.1.5-pre.4

package/dist/Menu-DNRHo2i_.mjs

@@ -0,0 +1,167 @@
+import { darkTheme } from "./theme.mjs";
+import { isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import PDSProvider from "./lib/PDSProvider.mjs";
+import { t as Card_default } from "./Card-DeJSt5ys.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import "./variables/text.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DismissButton } from "react-aria";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+//#region components/Menu/Menu.tsx
+const FloatingCard = styled(Card_default)`
+  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);
+  outline: none;
+  z-index: ${Z_INDICES.tooltip};
+`;
+const MenuList = styled.div.attrs(({ role, doNotSetRole = false }) => ({ role: doNotSetRole ? void 0 : role ?? "menu" }))`
+  list-style: none;
+  margin: 0;
+  padding: ${({ padding }) => padding || Spacing[2]};
+  outline: none;
+`;
+const ListItem = styled.li`
+  ${({ size }) => size === "sm" ? paragraphMixins.sm : paragraphMixins.md};
+  display: flex;
+  align-items: center;
+  padding: ${({ size }) => size === "sm" ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`};
+  border-radius: 4px;
+  list-style: none;
+  text-decoration: none;
+  color: ${({ theme }) => theme.color.text.primary};
+  cursor: pointer;
+  ${({ focused, selected, theme }) => focused && !selected && css`
+      outline: none;
+      color: ${theme.color.text.primary};
+      background-color: ${theme.color.background.secondary};
+    `}
+
+  &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {
+    ${({ selected }) => !selected && css`
+        outline: none;
+        color: ${({ theme }) => theme.color.text.primary};
+        background-color: ${({ theme }) => theme.color.background.secondary};
+      `}
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${Color.BorderFocus};
+    outline-offset: 1px;
+  }
+
+  ${({ selected, theme }) => selected && css`
+      outline: none;
+      color: ${theme.color.text.brand};
+      background-color: ${theme.color.background.highlight};
+    `}
+
+  &${isDisabled} {
+    color: ${({ theme }) => theme.color.text.disabled};
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* Variant Styling */
+  ${({ theme, variant }) => variant === "danger" && css`
+      color: ${theme.color.variants[variant].default};
+
+      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {
+        color: ${Color.CoreRed900};
+        background-color: ${theme.color.variants[variant].highlightLight};
+      }
+
+      &${isDisabled} {
+        color: ${({ theme }) => theme.color.variants[variant].disabled};
+      }
+    `}
+`;
+const IconContainer = styled("div")`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: ${Spacing[2]};
+  line-height: 1;
+
+  ${({ suffix }) => suffix && css`
+      margin-left: ${Spacing[2]};
+    `}
+`;
+const LabelContainer = styled("div")`
+  line-height: 16px;
+  ${({ stretchLabel }) => stretchLabel && css`
+      width: 100%;
+    `}
+`;
+const MenuItem = forwardRef(function MenuItem({ children, disabled, variant, prefixIcon, suffixIcon, stretchLabel, selected, size, ...elemProps }, ref) {
+	return /* @__PURE__ */ jsxs(ListItem, {
+		disabled,
+		variant,
+		selected,
+		ref,
+		"aria-disabled": disabled,
+		"aria-current": selected ? "true" : void 0,
+		role: "menuitem",
+		tabIndex: disabled ? -1 : 0,
+		size,
+		...elemProps,
+		children: [
+			prefixIcon && /* @__PURE__ */ jsx(IconContainer, { children: prefixIcon }),
+			/* @__PURE__ */ jsx(LabelContainer, {
+				stretchLabel: !!stretchLabel,
+				children
+			}),
+			suffixIcon && /* @__PURE__ */ jsx(IconContainer, {
+				suffix: true,
+				children: suffixIcon
+			})
+		]
+	});
+});
+const StyledMenuDivider = styled.hr`
+  height: 0px;
+  padding: 0px;
+  font-size: 0;
+  margin: ${Spacing[2]} -${Spacing[2]};
+  border: none;
+  border-top: 1px solid ${({ theme }) => theme.color.border.primary};
+`;
+const MenuDivider = (props) => /* @__PURE__ */ jsx(DropdownMenu.Separator, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx(StyledMenuDivider, { ...props })
+});
+const MenuHeading = styled.li`
+  ${paragraphMixins.sm};
+  text-transform: uppercase;
+  padding: ${({ size }) => size === "sm" ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2]};
+  display: block;
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-weight: ${400};
+  letter-spacing: 0.1em;
+`;
+const Menu = ({ children, variant, containerProps, itemProps, listRef, className, onClose, as, ...props }) => {
+	const menu = /* @__PURE__ */ jsx(FloatingCard, {
+		...containerProps,
+		className,
+		children: /* @__PURE__ */ jsxs(MenuList, {
+			...props,
+			as,
+			ref: listRef,
+			children: [children, /* @__PURE__ */ jsx(DismissButton, { onDismiss: onClose })]
+		})
+	});
+	if (variant === "dark") return /* @__PURE__ */ jsx(PDSProvider, {
+		theme: darkTheme,
+		children: menu
+	});
+	return menu;
+};
+Menu.Heading = MenuHeading;
+Menu.Divider = MenuDivider;
+Menu.Item = MenuItem;
+//#endregion
+export { MenuDivider as a, MenuList as c, Menu as i, IconContainer as n, MenuHeading as o, ListItem as r, MenuItem as s, FloatingCard as t };
+
+//# sourceMappingURL=Menu-DNRHo2i_.mjs.map

package/dist/Menu-DNRHo2i_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu-DNRHo2i_.mjs","names":["Card"],"sources":["../components/Menu/Menu.tsx"],"sourcesContent":["import PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type StyledComponent,\n  type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport Card from 'design-system/components/Card';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { darkTheme } from 'design-system/theme';\nimport { FontWeight } from 'design-system/variables/text';\n\nexport const FloatingCard: StyledComponent<\n  ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n  DefaultTheme\n> = styled(Card)`\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  outline: none;\n  z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n  ({ role, doNotSetRole = false }) => ({\n    role: doNotSetRole ? undefined : (role ?? 'menu'),\n  }),\n)<{ padding?: Spacing }>`\n  list-style: none;\n  margin: 0;\n  padding: ${({ padding }) => padding || Spacing[2]};\n  outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n  children: ReactNode;\n  prefixIcon?: ReactNode;\n  suffixIcon?: ReactNode;\n  disabled?: boolean;\n  variant?: 'basic' | 'danger';\n  as?: T;\n  stretchLabel?: boolean;\n  subtitle?: string;\n  focused?: boolean;\n  selected?: boolean;\n  size?: 'sm' | 'md';\n}\n\nexport const ListItem = styled.li<\n  Pick<MenuItemProps, 'variant' | 'disabled' | 'focused' | 'selected' | 'size'>\n>`\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  display: flex;\n  align-items: center;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n  border-radius: 4px;\n  list-style: none;\n  text-decoration: none;\n  color: ${({ theme }) => theme.color.text.primary};\n  cursor: pointer;\n  ${({ focused, selected, theme }) =>\n    focused &&\n    !selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.primary};\n      background-color: ${theme.color.background.secondary};\n    `}\n\n  &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n    ${({ selected }) =>\n      !selected &&\n      css`\n        outline: none;\n        color: ${({ theme }) => theme.color.text.primary};\n        background-color: ${({ theme }) => theme.color.background.secondary};\n      `}\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${Color.BorderFocus};\n    outline-offset: 1px;\n  }\n\n  ${({ selected, theme }) =>\n    selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.brand};\n      background-color: ${theme.color.background.highlight};\n    `}\n\n  &${isDisabled} {\n    color: ${({ theme }) => theme.color.text.disabled};\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Variant Styling */\n  ${({ theme, variant }) =>\n    variant === 'danger' &&\n    css`\n      color: ${theme.color.variants[variant].default};\n\n      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n        color: ${Color.CoreRed900};\n        background-color: ${theme.color.variants[variant].highlightLight};\n      }\n\n      &${isDisabled} {\n        color: ${({ theme }) => theme.color.variants[variant].disabled};\n      }\n    `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ${Spacing[2]};\n  line-height: 1;\n\n  ${({ suffix }) =>\n    suffix &&\n    css`\n      margin-left: ${Spacing[2]};\n    `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n  line-height: 16px;\n  ${({ stretchLabel }) =>\n    stretchLabel &&\n    css`\n      width: 100%;\n    `}\n`;\n\n/**\n * https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n  MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n  {\n    children,\n    disabled,\n    variant,\n    prefixIcon,\n    suffixIcon,\n    stretchLabel,\n    selected,\n    size,\n    ...elemProps\n  },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <ListItem\n      disabled={disabled}\n      variant={variant}\n      selected={selected}\n      ref={ref}\n      aria-disabled={disabled}\n      // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n      aria-current={selected ? 'true' : undefined}\n      role='menuitem'\n      tabIndex={disabled ? -1 : 0}\n      size={size}\n      {...elemProps}\n    >\n      {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n      <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n      {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n    </ListItem>\n  );\n});\n\nconst StyledMenuDivider = styled.hr`\n  height: 0px;\n  padding: 0px;\n  font-size: 0;\n  margin: ${Spacing[2]} -${Spacing[2]};\n  border: none;\n  border-top: 1px solid ${({ theme }) => theme.color.border.primary};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n  <DropdownMenu.Separator asChild>\n    <StyledMenuDivider {...props} />\n  </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n  size?: 'sm' | 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n  ${paragraphMixins.sm};\n  text-transform: uppercase;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n  display: block;\n  color: ${({ theme }) => theme.color.text.secondary};\n  font-weight: ${FontWeight.Regular};\n  letter-spacing: 0.1em;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n  children?: ReactNode;\n  className?: string;\n  variant?: 'light' | 'dark';\n  as?: T;\n  doNotSetRole?: boolean;\n  containerProps?: ComponentPropsWithRef<'div'>;\n  listRef?: RefObject<T>;\n  itemProps?:\n    | ComponentPropsWithoutRef<'li'>\n    | ((\n        props: ComponentPropsWithoutRef<'li'>,\n        index: number,\n      ) => Partial<ComponentPropsWithRef<'li'>>);\n  onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n  children,\n  variant,\n  containerProps,\n  itemProps,\n  listRef,\n  className,\n  onClose,\n  as,\n  ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n  const menu = (\n    <FloatingCard {...containerProps} className={className}>\n      <MenuList {...props} as={as as any} ref={listRef}>\n        {children}\n        <DismissButton onDismiss={onClose} />\n      </MenuList>\n    </FloatingCard>\n  );\n\n  if (variant === 'dark') {\n    return <PDSProvider theme={darkTheme}>{menu}</PDSProvider>;\n  }\n\n  return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}

package/dist/Menu-DPrNMatb.d.cts

@@ -0,0 +1,70 @@
+import { r as _default } from "./Card-CrQL0hXm.cjs";
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, ElementType, FC, ReactNode, RefObject } from "react";
+import { DefaultTheme, StyledComponent, StyledComponentPropsWithRef } from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Spacing } from "@persona/design-tokens";
+
+//#region components/Menu/Menu.d.ts
+declare const FloatingCard: StyledComponent<ComponentType<StyledComponentPropsWithRef<typeof _default>>, DefaultTheme>;
+declare const MenuList: StyledComponent<"div", any, {
+  padding?: Spacing;
+}, never>;
+interface MenuItemProps<T extends ElementType = 'div'> {
+  children: ReactNode;
+  prefixIcon?: ReactNode;
+  suffixIcon?: ReactNode;
+  disabled?: boolean;
+  variant?: 'basic' | 'danger';
+  as?: T;
+  stretchLabel?: boolean;
+  subtitle?: string;
+  focused?: boolean;
+  selected?: boolean;
+  size?: 'sm' | 'md';
+}
+declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "disabled" | "size" | "selected" | "variant" | "focused">, never>;
+declare const IconContainer: StyledComponent<"div", any, {
+  suffix?: boolean;
+}, never>;
+/**
+ * https://stackoverflow.com/a/73795494
+ */
+interface MenuItemType<T extends ElementType = 'div'> extends FC<MenuItemProps<T> & ComponentPropsWithRef<T>> {
+  <T extends ElementType = 'div'>(props: MenuItemProps<T> & ComponentPropsWithoutRef<T>): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;
+}
+declare const MenuItem: MenuItemType;
+declare const MenuDivider: (props: ComponentPropsWithoutRef<"hr">) => _$react_jsx_runtime0.JSX.Element;
+interface MenuHeadingProps {
+  size?: 'sm' | 'md';
+}
+declare const MenuHeading: StyledComponent<"li", any, MenuHeadingProps, never>;
+interface MenuProps<T extends ElementType = 'div'> {
+  children?: ReactNode;
+  className?: string;
+  variant?: 'light' | 'dark';
+  as?: T;
+  doNotSetRole?: boolean;
+  containerProps?: ComponentPropsWithRef<'div'>;
+  listRef?: RefObject<T>;
+  itemProps?: ComponentPropsWithoutRef<'li'> | ((props: ComponentPropsWithoutRef<'li'>, index: number) => Partial<ComponentPropsWithRef<'li'>>);
+  onClose?: VoidFunction;
+}
+declare const Menu: {
+  <T extends ElementType = "div">({
+    children,
+    variant,
+    containerProps,
+    itemProps,
+    listRef,
+    className,
+    onClose,
+    as,
+    ...props
+  }: MenuProps<T> & ComponentPropsWithoutRef<T>): _$react_jsx_runtime0.JSX.Element;
+  Heading: StyledComponent<"li", any, MenuHeadingProps, never>;
+  Divider: (props: ComponentPropsWithoutRef<"hr">) => _$react_jsx_runtime0.JSX.Element;
+  Item: MenuItemType<"div">;
+};
+//#endregion
+export { MenuDivider as a, MenuItem as c, MenuList as d, MenuProps as f, Menu as i, MenuItemProps as l, IconContainer as n, MenuHeading as o, ListItem as r, MenuHeadingProps as s, FloatingCard as t, MenuItemType as u };
+//# sourceMappingURL=Menu-DPrNMatb.d.cts.map

package/dist/Menu.d.cts

@@ -0,0 +1,2 @@
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-DPrNMatb.cjs";
+export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/Menu.d.mts

@@ -0,0 +1,2 @@
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-DIFkRQ6x.mjs";
+export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/Modal.d.cts

@@ -0,0 +1,141 @@
+import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import * as _$react_aria_components0 from "react-aria-components";
+import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
+
+//#region components/Modal/Modal.d.ts
+declare const ModalTrigger: typeof DialogTrigger;
+declare const ModalContent: _$styled_components0.StyledComponent<(props: _$react_aria_components0.ModalOverlayProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null, any, {}, never>;
+declare const ModalClose: (props: ButtonProps) => _$react_jsx_runtime0.JSX.Element;
+interface ModalTitleProps {
+  children: ReactNode;
+  className?: string;
+}
+interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
+  /**
+   * Display X button to close popover
+   */
+  showCloseButton?: boolean;
+  /**
+   * Max width of the modal
+   */
+  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
+  /**
+   * Footer content
+   */
+  footer?: ReactNode;
+  /**
+   * Renders tabs within the modal.
+   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
+   * Overrides `children`.
+   */
+  tabs?: TabView[];
+  /**
+   * Title of the modal
+   */
+  title?: ReactNode;
+  /**
+   * Children content
+   */
+  children?: ReactNode;
+  /**
+   * When true, removes horizontal and vertical padding from the body. Defaults to false.
+   */
+  noBodyPadding?: boolean;
+  /**
+   * Additional props for the Dialog element
+   */
+  className?: string;
+}
+interface TabView {
+  name: string;
+  contents: JSX.Element;
+  badge?: React.ReactElement;
+  disabled?: boolean;
+  'data-tour-target'?: string;
+}
+interface ModalProps {
+  /**
+   * Title of the Card
+   */
+  title?: string;
+  /**
+   * Component to use as trigger. React Aria trigger props will be merged with this element.
+   */
+  trigger?: ComponentProps<typeof Pressable>['children'];
+  /**
+   * Props to apply to Modal.Card within
+   */
+  contentProps?: ModalCardProps;
+  /**
+   * Max width of the modal
+   */
+  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
+  /**
+   * Footer section intended for actions.
+   * You can pass in Buttons directly and they will render in a HStack.
+   */
+  footer?: ReactNode;
+  /**
+   * Renders tabs within the modal.
+   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
+   * Overrides `children`.
+   */
+  tabs?: TabView[];
+  /**
+   * Children content
+   */
+  children?: ReactNode | ((props: {
+    portalContainer: HTMLDivElement | null;
+  }) => ReactNode);
+  /**
+   * When true, removes horizontal and vertical padding from the body. Defaults to false.
+   * Can also be set via contentProps.noBodyPadding.
+   */
+  noBodyPadding?: boolean;
+  /**
+   * Controls whether the modal is open (controlled)
+   */
+  open?: boolean;
+  /**
+   * Default open state (uncontrolled)
+   */
+  defaultOpen?: boolean;
+  /**
+   * Handler called when open state changes
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Whether the modal can be dismissed by clicking outside or pressing escape
+   */
+  isDismissable?: boolean;
+  /**
+   * Whether pressing the escape key closes the modal
+   */
+  isKeyboardDismissDisabled?: boolean;
+}
+declare const _default: (({
+  children,
+  trigger,
+  contentProps,
+  noBodyPadding,
+  size,
+  title,
+  footer,
+  tabs,
+  defaultOpen,
+  onOpenChange,
+  isDismissable,
+  isKeyboardDismissDisabled,
+  open
+}: ModalProps) => _$react_jsx_runtime0.JSX.Element) & {
+  Title: ({
+    children,
+    ...props
+  }: ModalTitleProps) => _$react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+//# sourceMappingURL=Modal.d.cts.map

package/dist/Modal.d.mts

@@ -0,0 +1,141 @@
+import { r as ButtonProps } from "./Button-DqDLGURJ.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$react_aria_components0 from "react-aria-components";
+import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
+
+//#region components/Modal/Modal.d.ts
+declare const ModalTrigger: typeof DialogTrigger;
+declare const ModalContent: _$styled_components0.StyledComponent<(props: _$react_aria_components0.ModalOverlayProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null, any, {}, never>;
+declare const ModalClose: (props: ButtonProps) => _$react_jsx_runtime0.JSX.Element;
+interface ModalTitleProps {
+  children: ReactNode;
+  className?: string;
+}
+interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
+  /**
+   * Display X button to close popover
+   */
+  showCloseButton?: boolean;
+  /**
+   * Max width of the modal
+   */
+  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
+  /**
+   * Footer content
+   */
+  footer?: ReactNode;
+  /**
+   * Renders tabs within the modal.
+   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
+   * Overrides `children`.
+   */
+  tabs?: TabView[];
+  /**
+   * Title of the modal
+   */
+  title?: ReactNode;
+  /**
+   * Children content
+   */
+  children?: ReactNode;
+  /**
+   * When true, removes horizontal and vertical padding from the body. Defaults to false.
+   */
+  noBodyPadding?: boolean;
+  /**
+   * Additional props for the Dialog element
+   */
+  className?: string;
+}
+interface TabView {
+  name: string;
+  contents: JSX.Element;
+  badge?: React.ReactElement;
+  disabled?: boolean;
+  'data-tour-target'?: string;
+}
+interface ModalProps {
+  /**
+   * Title of the Card
+   */
+  title?: string;
+  /**
+   * Component to use as trigger. React Aria trigger props will be merged with this element.
+   */
+  trigger?: ComponentProps<typeof Pressable>['children'];
+  /**
+   * Props to apply to Modal.Card within
+   */
+  contentProps?: ModalCardProps;
+  /**
+   * Max width of the modal
+   */
+  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
+  /**
+   * Footer section intended for actions.
+   * You can pass in Buttons directly and they will render in a HStack.
+   */
+  footer?: ReactNode;
+  /**
+   * Renders tabs within the modal.
+   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
+   * Overrides `children`.
+   */
+  tabs?: TabView[];
+  /**
+   * Children content
+   */
+  children?: ReactNode | ((props: {
+    portalContainer: HTMLDivElement | null;
+  }) => ReactNode);
+  /**
+   * When true, removes horizontal and vertical padding from the body. Defaults to false.
+   * Can also be set via contentProps.noBodyPadding.
+   */
+  noBodyPadding?: boolean;
+  /**
+   * Controls whether the modal is open (controlled)
+   */
+  open?: boolean;
+  /**
+   * Default open state (uncontrolled)
+   */
+  defaultOpen?: boolean;
+  /**
+   * Handler called when open state changes
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Whether the modal can be dismissed by clicking outside or pressing escape
+   */
+  isDismissable?: boolean;
+  /**
+   * Whether pressing the escape key closes the modal
+   */
+  isKeyboardDismissDisabled?: boolean;
+}
+declare const _default: (({
+  children,
+  trigger,
+  contentProps,
+  noBodyPadding,
+  size,
+  title,
+  footer,
+  tabs,
+  defaultOpen,
+  onOpenChange,
+  isDismissable,
+  isKeyboardDismissDisabled,
+  open
+}: ModalProps) => _$react_jsx_runtime0.JSX.Element) & {
+  Title: ({
+    children,
+    ...props
+  }: ModalTitleProps) => _$react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+//# sourceMappingURL=Modal.d.mts.map

package/dist/PageHeader.d.cts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/PageHeader/PageHeader.d.ts
+declare const PageHeaderContainer: _$styled_components0.StyledComponent<"header", any, {}, never>;
+interface PageHeaderProps {
+  title: ReactNode;
+  level?: 'product' | 'detail';
+  subtitle?: ReactNode;
+  prepend?: ReactNode;
+  append?: ReactNode;
+  children?: ReactNode;
+}
+declare const PageHeader: ({
+  title,
+  subtitle,
+  level,
+  prepend,
+  append,
+  children,
+  ...props
+}: PageHeaderProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageHeaderContainer, PageHeaderProps, PageHeader as default };
+//# sourceMappingURL=PageHeader.d.cts.map

package/dist/PageHeader.d.mts

@@ -0,0 +1,26 @@
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/PageHeader/PageHeader.d.ts
+declare const PageHeaderContainer: _$styled_components0.StyledComponent<"header", any, {}, never>;
+interface PageHeaderProps {
+  title: ReactNode;
+  level?: 'product' | 'detail';
+  subtitle?: ReactNode;
+  prepend?: ReactNode;
+  append?: ReactNode;
+  children?: ReactNode;
+}
+declare const PageHeader: ({
+  title,
+  subtitle,
+  level,
+  prepend,
+  append,
+  children,
+  ...props
+}: PageHeaderProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageHeaderContainer, PageHeaderProps, PageHeader as default };
+//# sourceMappingURL=PageHeader.d.mts.map

package/dist/PageSelector.d.cts

@@ -0,0 +1,30 @@
+import { n as HStackProps } from "./Stack-toDRLy--.cjs";
+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/PageSelector.d.ts
+declare const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
+declare const PageInput: _$styled_components0.StyledComponent<(props: HStackProps) => _$react_jsx_runtime0.JSX.Element, any, {
+  align: "center";
+}, "align">;
+interface PageSelectorProps {
+  paginationParams: PaginationParams;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  /**
+   * Called with the new page number after the page changes (next, prev, or
+   * typed input). Lets the consumer react to page changes -- e.g. scroll the
+   * page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare function PageSelector({
+  paginationParams,
+  handlePageLinkClick,
+  isLoading,
+  onPageChange
+}: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };
+//# sourceMappingURL=PageSelector.d.cts.map

package/dist/PageSelector.d.mts

@@ -0,0 +1,30 @@
+import { n as HStackProps } from "./Stack-BntgUvsW.mjs";
+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/PageSelector.d.ts
+declare const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
+declare const PageInput: _$styled_components0.StyledComponent<(props: HStackProps) => _$react_jsx_runtime0.JSX.Element, any, {
+  align: "center";
+}, "align">;
+interface PageSelectorProps {
+  paginationParams: PaginationParams;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  /**
+   * Called with the new page number after the page changes (next, prev, or
+   * typed input). Lets the consumer react to page changes -- e.g. scroll the
+   * page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare function PageSelector({
+  paginationParams,
+  handlePageLinkClick,
+  isLoading,
+  onPageChange
+}: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };
+//# sourceMappingURL=PageSelector.d.mts.map