@cerberus-design/react 0.11.1 → 0.12.0

package/build/modern/{chunk-UJKS4DDN.js → chunk-NKM6PISB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-UJKS4DDN.js.map
+//# sourceMappingURL=chunk-NKM6PISB.js.map

package/build/modern/{chunk-YWCTMLLO.js → chunk-NMNONSHU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UZDVOIW5.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-YWCTMLLO.js.map
+//# sourceMappingURL=chunk-NMNONSHU.js.map

package/build/modern/{chunk-OWKN5IV7.js → chunk-PM7CWT3N.js}

@@ -1,6 +1,6 @@
 import {
   useNavMenuContext
-} from "./chunk-O75QAT4Z.js";
+} from "./chunk-6WS765J3.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -78,4 +78,4 @@ function NavMenuTrigger(props) {
 export {
   NavMenuTrigger
 };
-//# sourceMappingURL=chunk-OWKN5IV7.js.map
+//# sourceMappingURL=chunk-PM7CWT3N.js.map

package/build/modern/chunk-PM7CWT3N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n  createNavTriggerProps,\n  type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuTrigger component.\n * @module\n */\n\nexport interface NavMenuTriggerProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonProps,\n    NavTriggerAriaValues {\n  /**\n   * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.\n   * @default 'button'\n   * @example\n   * ```tsx\n   * <NavMenuTrigger as={IconButton} href=\"/home\" />\n   * ```\n   */\n  as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n  const {\n    as,\n    palette,\n    usage,\n    shape,\n    controls,\n    expanded: propsExpanded,\n    onClick,\n    ...nativeProps\n  } = props\n  const { triggerRef, onToggle, expanded } = useNavMenuContext()\n  const ariaProps = createNavTriggerProps({\n    controls,\n    expanded: propsExpanded ?? expanded,\n  })\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) return onClick(e)\n      onToggle()\n    },\n    [onClick, onToggle],\n  )\n\n  return (\n    <Show\n      when={hasAs}\n      fallback={\n        <button\n          {...nativeProps}\n          {...ariaProps}\n          className={cx(\n            nativeProps.className,\n            button({\n              palette,\n              usage,\n              shape,\n            }),\n          )}\n          onClick={handleClick}\n          ref={triggerRef}\n        >\n          {props.children}\n        </button>\n      }\n    >\n      {hasAs && (\n        <AsSub\n          {...nativeProps}\n          {...ariaProps}\n          onClick={handleClick}\n          ref={triggerRef}\n        />\n      )}\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AA+Df;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,QAAS,QAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/build/modern/chunk-RUR5MV54.js

@@ -0,0 +1,52 @@
+// src/components/Menu.tsx
+import { Menu as ArkMenu } from "@ark-ui/react";
+import { menu } from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+var menuStyles = menu();
+var Menu = ArkMenu.Root;
+function MenuTrigger(props) {
+  return /* @__PURE__ */ jsx(ArkMenu.Trigger, { ...props, asChild: true });
+}
+function MenuContent(props) {
+  return /* @__PURE__ */ jsx(ArkMenu.Positioner, { children: /* @__PURE__ */ jsx(
+    ArkMenu.Content,
+    {
+      ...props,
+      className: cx(props.className, menuStyles.content)
+    }
+  ) });
+}
+function MenuItem(props) {
+  return /* @__PURE__ */ jsx(ArkMenu.Item, { ...props, className: cx(props.className, menuStyles.item) });
+}
+var MenuItemGroup = ArkMenu.ItemGroup;
+function MenuGroupLabel(props) {
+  return /* @__PURE__ */ jsx(
+    ArkMenu.ItemGroupLabel,
+    {
+      ...props,
+      className: cx(props.className, menuStyles.itemGroupLabel)
+    }
+  );
+}
+function MenuSeparator(props) {
+  return /* @__PURE__ */ jsx(
+    ArkMenu.Separator,
+    {
+      ...props,
+      className: cx(props.className, menuStyles.separator)
+    }
+  );
+}
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuContent,
+  MenuItem,
+  MenuItemGroup,
+  MenuGroupLabel,
+  MenuSeparator
+};
+//# sourceMappingURL=chunk-RUR5MV54.js.map

package/build/modern/chunk-RUR5MV54.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Menu.tsx"],"sourcesContent":["import { Menu as ArkMenu } from '@ark-ui/react'\nimport { menu } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module contains the Menu component family.\n * @module Menu\n */\n\nconst menuStyles = menu()\n\n/**\n * The root Menu component which controls the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>Trigger</MenuTrigger>\n * </Menu>\n */\nexport const Menu = ArkMenu.Root\n\n/**\n * The MenuTrigger component opens/closes the Menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n * </Menu>\n */\nexport function MenuTrigger(props: ArkMenu.TriggerProps) {\n  return <ArkMenu.Trigger {...props} asChild />\n}\n\n/**\n * The MenuContent component is the container for the menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuContent(props: ArkMenu.ContentProps) {\n  return (\n    <ArkMenu.Positioner>\n      <ArkMenu.Content\n        {...props}\n        className={cx(props.className, menuStyles.content)}\n      />\n    </ArkMenu.Positioner>\n  )\n}\n\n/**\n * The MenuItem component is a single item in the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuItem(props: ArkMenu.ItemProps) {\n  return (\n    <ArkMenu.Item {...props} className={cx(props.className, menuStyles.item)} />\n  )\n}\n\n/**\n * The MenuItemGroup component is a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItemGroup = ArkMenu.ItemGroup\n\n/**\n * The MenuItemGroupLabel component is the label for a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuGroupLabel(props: ArkMenu.ItemGroupLabelProps) {\n  return (\n    <ArkMenu.ItemGroupLabel\n      {...props}\n      className={cx(props.className, menuStyles.itemGroupLabel)}\n    />\n  )\n}\n\n/**\n * The MenuSeparator component is a visual divider between menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *    <MenuItemGroup>\n *      <MenuGroupLabel>Group Label</MenuGroupLabel>\n *      <MenuSeparator />\n *      <MenuItem value=\"item_1\">Item 1</MenuItem>\n *      <MenuItem value=\"item_2\">Item 2</MenuItem>\n *    </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuSeparator(props: ArkMenu.SeparatorProps) {\n  return (\n    <ArkMenu.Separator\n      {...props}\n      className={cx(props.className, menuStyles.separator)}\n    />\n  )\n}\n\n/**\n * The MenuCheckboxItem component is a menu item with a checkbox.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuCheckboxItem\n *     checked={checked}\n *     onCheckedChange={setChecked}\n *     value=\"checked\"\n *   >\n *    <MenuItemIndicator>✅</MenuItemIndicator>\n *    <MenuItemText>Check me</MenuItemText>\n *   </MenuCheckboxItem>\n * </MenuContent>\n */\n// export function MenuCheckboxItem(props: ArkMenu.CheckboxItemProps) {\n//   return (\n//     <ArkMenu.CheckboxItem\n//       {...props}\n//       className={cx(props.className, menuStyles.item)}\n//     />\n//   )\n// }\n\n/**\n * The MenuItemText component is the text for a grouped menu item.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuCheckboxItem\n *     checked={checked}\n *     onCheckedChange={setChecked}\n *     value=\"checked\"\n *   >\n *    <MenuItemText>Item 1</MenuItemText>\n *   </MenuCheckboxItem>\n *  </MenuContent>\n * </Menu>\n */\n// export function MenuItemText(props: ArkMenu.ItemTextProps) {\n//   return (\n//     <ArkMenu.ItemText\n//       {...props}\n//       className={cx(props.className, menuStyles.itemText)}\n//     />\n//   )\n// }\n\n/**\n * The MenuItemIndicator component is the indicator for a grouped menu item.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuCheckboxItem\n *    checked={checked}\n *    onCheckedChange={setChecked}\n *    value=\"checked\"\n *   >\n *    <MenuItemIndicator>✅</MenuItemIndicator>\n *    <MenuItemText>Check me</MenuItemText>\n *   </MenuCheckboxItem>\n *  </MenuContent>\n */\n// export function MenuItemIndicator(props: ArkMenu.ItemIndicatorProps) {\n//   return (\n//     <ArkMenu.ItemIndicator\n//       {...props}\n//       className={cx(props.className, menuStyles.itemIndicator)}\n//     />\n//   )\n// }\n"],"mappings":";AAAA,SAAS,QAAQ,eAAe;AAChC,SAAS,YAAY;AACrB,SAAS,UAAU;AAgCV;AAzBT,IAAM,aAAa,KAAK;AAWjB,IAAM,OAAO,QAAQ;AAarB,SAAS,YAAY,OAA6B;AACvD,SAAO,oBAAC,QAAQ,SAAR,EAAiB,GAAG,OAAO,SAAO,MAAC;AAC7C;AAiBO,SAAS,YAAY,OAA6B;AACvD,SACE,oBAAC,QAAQ,YAAR,EACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,WAAW,OAAO;AAAA;AAAA,EACnD,GACF;AAEJ;AAiBO,SAAS,SAAS,OAA0B;AACjD,SACE,oBAAC,QAAQ,MAAR,EAAc,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,WAAW,IAAI,GAAG;AAE9E;AAmBO,IAAM,gBAAgB,QAAQ;AAoB9B,SAAS,eAAe,OAAoC;AACjE,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,WAAW,cAAc;AAAA;AAAA,EAC1D;AAEJ;AAqBO,SAAS,cAAc,OAA+B;AAC3D,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA,EACrD;AAEJ;","names":[]}

package/build/modern/{chunk-CO4BKT7K.js → chunk-SGKHA4EB.js}

@@ -47,4 +47,4 @@ function Th(props) {
 export {
   Th
 };
-//# sourceMappingURL=chunk-CO4BKT7K.js.map
+//# sourceMappingURL=chunk-SGKHA4EB.js.map

package/build/modern/chunk-SGKHA4EB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = JSX.IntrinsicElements['th'] & {\n  /**\n   * Converts the Th into a actionable button. Called when the user clicks on\n   * the Th.\n   */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n * @example\n * ```tsx\n * <Th onClick={handleClick}>\n *   Names\n *   <SortIcon />\n * </Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n              _hover: {\n                bgColor: 'page.bg.100',\n              },\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AAwChC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,cACH,QAAQ;AAAA,gBACN,SAAS;AAAA,cACX;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-ZX6DBC2Z.js → chunk-SPZYPRZ6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Avatar.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -101,4 +101,4 @@ var iconSizeMap = {
 export {
   Avatar
 };
-//# sourceMappingURL=chunk-ZX6DBC2Z.js.map
+//# sourceMappingURL=chunk-SPZYPRZ6.js.map

package/build/modern/chunk-T6LS5P5W.js

@@ -0,0 +1,155 @@
+import {
+  ModalHeading
+} from "./chunk-2UXE5PDG.js";
+import {
+  Portal
+} from "./chunk-GLY7GU5S.js";
+import {
+  Modal
+} from "./chunk-BE4EOU2P.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
+import {
+  ModalHeader
+} from "./chunk-ZFAIE47A.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  Avatar
+} from "./chunk-SPZYPRZ6.js";
+import {
+  Button
+} from "./chunk-EXGKZGML.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+import {
+  trapFocus
+} from "./chunk-JIZQFTW6.js";
+import {
+  $cerberusIcons
+} from "./chunk-VERRHMW4.js";
+import {
+  useModal
+} from "./chunk-7T3JIGM7.js";
+
+// src/context/cta-modal.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { HStack } from "@cerberus/styled-system/jsx";
+import { css } from "@cerberus/styled-system/css";
+import { VStack } from "@cerberus/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CTAModalContext = createContext(null);
+function CTAModal(props) {
+  const { modalRef, show, close } = useModal();
+  const [content, setContent] = useState(null);
+  const focusTrap = trapFocus(modalRef);
+  const FallbackIcon = $cerberusIcons.confirmModal;
+  const confirmIcon = content?.icon;
+  const { close: CloseIcon } = $cerberusIcons;
+  const handleShow = useCallback(
+    (options) => {
+      const maxActions = 2;
+      if (options.actions.length > maxActions) {
+        throw new Error(
+          `CTA Modal only supports a maximum of ${maxActions} actions.`
+        );
+      }
+      setContent({ ...options });
+      show();
+    },
+    [show]
+  );
+  const handleActionClick = useCallback(
+    (event) => {
+      const index = event.currentTarget.getAttribute("data-index");
+      const action = content?.actions[Number(index)];
+      if (typeof action?.onClick === "function") {
+        action.onClick(event);
+      }
+      close();
+    },
+    [content, close]
+  );
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(CTAModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: css({
+            padding: "md",
+            position: "absolute",
+            right: 0,
+            top: 0,
+            zIndex: "decorator"
+          }),
+          children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsxs(ModalHeader, { children: [
+        /* @__PURE__ */ jsx(HStack, { justify: "center", w: "full", children: /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            ariaLabel: "",
+            gradient: "charon-light",
+            icon: /* @__PURE__ */ jsx(
+              Show,
+              {
+                when: Boolean(confirmIcon),
+                fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
+                children: confirmIcon
+              }
+            ),
+            src: ""
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
+          /* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ jsx(Show, { when: Boolean(content?.actions?.length), children: content?.actions?.map((action, index) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          "data-index": index,
+          className: css({
+            w: "1/2"
+          }),
+          onClick: handleActionClick,
+          shape: "rounded",
+          usage: "outlined",
+          children: action.text
+        },
+        index
+      )) }) })
+    ] }) })
+  ] });
+}
+function useCTAModal() {
+  const context = useContext(CTAModalContext);
+  if (context === null) {
+    throw new Error("useCTAModal must be used within a CTAModal Provider");
+  }
+  return context;
+}
+
+export {
+  CTAModal,
+  useCTAModal
+};
+//# sourceMappingURL=chunk-T6LS5P5W.js.map

package/build/modern/chunk-T6LS5P5W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { IconButton } from '../components/IconButton'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport interface CTAModalProviderProps {}\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const { modalRef, show, close } = useModal()\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const FallbackIcon = $cerberusIcons.confirmModal\n  const confirmIcon = content?.icon as ReactNode\n  const { close: CloseIcon } = $cerberusIcons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      show()\n    },\n    [show],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      if (typeof action?.onClick === 'function') {\n        action.onClick(event)\n      }\n      close()\n    },\n    [content, close],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <span\n            className={css({\n              padding: 'md',\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 'decorator',\n            })}\n          >\n            <IconButton ariaLabel=\"Close modal\" onClick={close}>\n              <CloseIcon />\n            </IconButton>\n          </span>\n\n          <ModalHeader>\n            <HStack justify=\"center\" w=\"full\">\n              <Avatar\n                ariaLabel=\"\"\n                gradient=\"charon-light\"\n                icon={\n                  <Show\n                    when={Boolean(confirmIcon)}\n                    fallback={<FallbackIcon size={24} />}\n                  >\n                    {confirmIcon}\n                  </Show>\n                }\n                src=\"\"\n              />\n            </HStack>\n            <VStack gap=\"lg\" w=\"full\">\n              <ModalHeading>{content?.heading}</ModalHeading>\n              <ModalDescription>{content?.description}</ModalDescription>\n            </VStack>\n          </ModalHeader>\n\n          <HStack gap=\"md\" pt=\"sm\" w=\"full\">\n            <Show when={Boolean(content?.actions?.length)}>\n              {content?.actions?.map((action, index) => (\n                <Button\n                  data-index={index}\n                  className={css({\n                    w: '1/2',\n                  })}\n                  key={index}\n                  onClick={handleActionClick}\n                  shape=\"rounded\"\n                  usage=\"outlined\"\n                >\n                  {action.text}\n                </Button>\n              ))}\n            </Show>\n          </HStack>\n        </Modal>\n      </Portal>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/chunk-UTGEFJ3L.js

@@ -0,0 +1,10 @@
+// src/utils/index.ts
+function formatNotifyCount(count) {
+  if (count > 99) return "99+";
+  return count.toString();
+}
+
+export {
+  formatNotifyCount
+};
+//# sourceMappingURL=chunk-UTGEFJ3L.js.map

package/build/modern/chunk-UTGEFJ3L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n"],"mappings":";AAeO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;","names":[]}

package/build/modern/{chunk-5V5MBSM3.js → chunk-UZVQ4INR.js}

@@ -1,6 +1,6 @@
 import {
   useNavMenuContext
-} from "./chunk-O75QAT4Z.js";
+} from "./chunk-6WS765J3.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -83,4 +83,4 @@ export {
   getPosition,
   NavMenuList
 };
-//# sourceMappingURL=chunk-5V5MBSM3.js.map
+//# sourceMappingURL=chunk-UZVQ4INR.js.map

package/build/modern/chunk-UZVQ4INR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n  /**\n   * The left position of the element.\n   */\n  left: string\n  /**\n   * The right position of the element.\n   */\n  right: string\n  /**\n   * The top position of the element.\n   */\n  top: string\n  /**\n   * The bottom position of the element.\n   */\n  bottom: string\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  /**\n   * The unique identifier for the NavMenuList. Required for accessibility.\n   */\n  id: string\n  /**\n   * The position of the NavMenuList.\n   * @type 'top' | 'right' | 'bottom' | 'left'\n   * @default 'bottom'\n   */\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n *  <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *   <NavMenuLink href=\"/home\">Home</NavMenuLink>\n *   <NavMenuLink href=\"/about\">About</NavMenuLink>\n *  </NavMenuList>\n * </NavMenu>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA0HjB;AA1FC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-FT7DFRHQ.js → chunk-VERRHMW4.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-TMR7JGMP.js";
+} from "./chunk-F27AAKQ3.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-FT7DFRHQ.js.map
+//# sourceMappingURL=chunk-VERRHMW4.js.map

package/build/modern/{chunk-3NE6C66J.js → chunk-VP5ERLAY.js}

@@ -1,9 +1,12 @@
+import {
+  ModalHeading
+} from "./chunk-2UXE5PDG.js";
 import {
   Portal
 } from "./chunk-GLY7GU5S.js";
 import {
   Input
-} from "./chunk-UJKS4DDN.js";
+} from "./chunk-NKM6PISB.js";
 import {
   Label
 } from "./chunk-NMF2HYWO.js";
@@ -15,13 +18,10 @@ import {
 } from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
-} from "./chunk-ULYQLKWA.js";
-import {
-  ModalHeading
-} from "./chunk-2UXE5PDG.js";
+} from "./chunk-ZFAIE47A.js";
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 import {
   useModal
 } from "./chunk-7T3JIGM7.js";
@@ -240,4 +240,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-3NE6C66J.js.map
+//# sourceMappingURL=chunk-VP5ERLAY.js.map

package/build/modern/{chunk-HCB5NQ5J.js → chunk-W4DXACNV.js}

@@ -1,12 +1,12 @@
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -72,4 +72,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-HCB5NQ5J.js.map
+//# sourceMappingURL=chunk-W4DXACNV.js.map

package/build/modern/{chunk-KBBASJIY.js → chunk-WPVDQRRF.js}

@@ -45,4 +45,4 @@ function NavMenuLink(props) {
 export {
   NavMenuLink
 };
-//# sourceMappingURL=chunk-KBBASJIY.js.map
+//# sourceMappingURL=chunk-WPVDQRRF.js.map

package/build/modern/chunk-WPVDQRRF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The element type to render as. Recommended to use for Next apps with the\n   * `Link` component.\n   */\n  as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAkCd;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-PA5EB7EO.js → chunk-XL4JREDT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Select.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -65,4 +65,4 @@ export {
   Select,
   Option
 };
-//# sourceMappingURL=chunk-PA5EB7EO.js.map
+//# sourceMappingURL=chunk-XL4JREDT.js.map

package/build/modern/{chunk-PKY46RRA.js → chunk-Y6QQCRQV.js}

@@ -9,4 +9,4 @@ function Thead(props) {
 export {
   Thead
 };
-//# sourceMappingURL=chunk-PKY46RRA.js.map
+//# sourceMappingURL=chunk-Y6QQCRQV.js.map

package/build/modern/{chunk-PKY46RRA.js.map → chunk-Y6QQCRQV.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the Thead component.\n * @module\n */\n\nexport type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>\n\n/**\n * The Thead component is used to render a table header.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Thead>\n *  {children}\n * </Thead>\n * ```\n */\nexport function Thead(props: TheadProps) {\n  return <thead {...props} className={cx(props.className, thead())} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAsBb;AADF,SAAS,MAAM,OAAmB;AACvC,SAAO,oBAAC,WAAO,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,CAAC,GAAG;AACpE;","names":[]}
+{"version":3,"sources":["../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Thead component.\n * @module\n */\n\nexport type TheadProps = JSX.IntrinsicElements['thead']\n\n/**\n * The Thead component is used to render a table header.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Thead>\n *  {children}\n * </Thead>\n * ```\n */\nexport function Thead(props: TheadProps) {\n  return <thead {...props} className={cx(props.className, thead())} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAqBb;AADF,SAAS,MAAM,OAAmB;AACvC,SAAO,oBAAC,WAAO,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,CAAC,GAAG;AACpE;","names":[]}

package/build/modern/{chunk-YMJMB6OP.js → chunk-ZBMA5G54.js}

@@ -1,21 +1,21 @@
 import {
   ProgressBar
 } from "./chunk-KCANMM64.js";
-import {
-  FieldMessage
-} from "./chunk-JWIJHSI6.js";
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
+import {
+  FieldMessage
+} from "./chunk-JWIJHSI6.js";
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Field
 } from "./chunk-UZDVOIW5.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/FileStatus.tsx
 import {
@@ -225,4 +225,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-YMJMB6OP.js.map
+//# sourceMappingURL=chunk-ZBMA5G54.js.map

package/build/modern/{chunk-ULYQLKWA.js → chunk-ZFAIE47A.js}

@@ -12,7 +12,8 @@ function ModalHeader(props) {
         vstack({
           alignItems: "flex-start",
           gap: "md",
-          mb: "md"
+          mb: "md",
+          position: "relative"
         })
       )
     }
@@ -22,4 +23,4 @@ function ModalHeader(props) {
 export {
   ModalHeader
 };
-//# sourceMappingURL=chunk-ULYQLKWA.js.map
+//# sourceMappingURL=chunk-ZFAIE47A.js.map

package/build/modern/{chunk-ULYQLKWA.js.map → chunk-ZFAIE47A.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          mb: 'md',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAwBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          mb: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAwBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-PKQTTFWA.js → chunk-ZR37P4NZ.js}

@@ -21,4 +21,4 @@ function Tbody(props) {
 export {
   Tbody
 };
-//# sourceMappingURL=chunk-PKQTTFWA.js.map
+//# sourceMappingURL=chunk-ZR37P4NZ.js.map

package/build/modern/{chunk-PKQTTFWA.js.map → chunk-ZR37P4NZ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Tbody.tsx"],"sourcesContent":["import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * This module provides a TBody component.\n * @module\n */\n\nexport type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>\nexport type TbodyProps = TbodyBaseProps & TbodyVariantProps\n\n/**\n * The TBody component is used to render a table body.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <TBody>\n *  {children}\n * </TBody>\n * ```\n */\nexport function Tbody(props: TbodyProps) {\n  const { decoration, ...nativeProps } = props\n  return (\n    <tbody\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tbody({\n          decoration,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAyBf;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,YAAY,GAAG,YAAY,IAAI;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Tbody.tsx"],"sourcesContent":["import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a TBody component.\n * @module\n */\n\nexport type TbodyBaseProps = JSX.IntrinsicElements['tbody']\nexport type TbodyProps = TbodyBaseProps & TbodyVariantProps\n\n/**\n * The TBody component is used to render a table body.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <TBody>\n *  {children}\n * </TBody>\n * ```\n */\nexport function Tbody(props: TbodyProps) {\n  const { decoration, ...nativeProps } = props\n  return (\n    <tbody\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tbody({\n          decoration,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAwBf;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,YAAY,GAAG,YAAY,IAAI;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/Admonition.js

@@ -2,11 +2,11 @@ import {
   Admonition,
   AdmonitionDescription,
   AdmonitionHeading
-} from "../chunk-KF6V5JLW.js";
-import "../chunk-ZX6DBC2Z.js";
+} from "../chunk-N4QTLDVM.js";
+import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-FT7DFRHQ.js";
-import "../chunk-TMR7JGMP.js";
+import "../chunk-VERRHMW4.js";
+import "../chunk-F27AAKQ3.js";
 import "../chunk-CP7OUC2Q.js";
 import "../chunk-HVKM54BA.js";
 export {

package/build/modern/components/Avatar.js

@@ -1,9 +1,9 @@
 import {
   Avatar
-} from "../chunk-ZX6DBC2Z.js";
+} from "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-FT7DFRHQ.js";
-import "../chunk-TMR7JGMP.js";
+import "../chunk-VERRHMW4.js";
+import "../chunk-F27AAKQ3.js";
 import "../chunk-CP7OUC2Q.js";
 import "../chunk-HVKM54BA.js";
 export {

package/build/modern/components/Checkbox.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Checkbox
-} from "../chunk-MDIUFBDX.js";
+} from "../chunk-NB6DV4VA.js";
 import "../chunk-UZDVOIW5.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-FT7DFRHQ.js";
-import "../chunk-TMR7JGMP.js";
+import "../chunk-VERRHMW4.js";
+import "../chunk-F27AAKQ3.js";
 import "../chunk-CP7OUC2Q.js";
 import "../chunk-HVKM54BA.js";
 export {