@cerberus-design/react 0.11.1 → 0.12.0

package/build/legacy/utils/index.cjs

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  formatNotifyCount: () => formatNotifyCount
+});
+module.exports = __toCommonJS(utils_exports);
+function formatNotifyCount(count) {
+  if (count > 99) return "99+";
+  return count.toString();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatNotifyCount
+});
+//# sourceMappingURL=index.cjs.map

package/build/legacy/utils/index.cjs.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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;","names":[]}

package/build/modern/_tsup-dts-rollup.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import { Activator } from '@dnd-kit/core';
 import { Activators } from '@dnd-kit/core';
 import { Active } from '@dnd-kit/core';
@@ -80,9 +82,11 @@ import { LabelVariantProps } from '@cerberus/styled-system/recipes';
 import { MeasuringConfiguration } from '@dnd-kit/core';
 import { MeasuringFrequency } from '@dnd-kit/core';
 import { MeasuringStrategy } from '@dnd-kit/core';
+import { Menu as Menu_2 } from '@ark-ui/react';
 import { Modifier } from '@dnd-kit/core';
 import { Modifiers } from '@dnd-kit/core';
 import { MouseEvent as MouseEvent_2 } from 'react';
+import type { MouseEventHandler } from 'react';
 import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
 import { MutableRefObject } from 'react';
@@ -443,19 +447,19 @@ declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
     /**
      * The action to be performed when the tag is clicked.
      */
-    onClick: () => void;
+    onClick: MouseEventHandler<HTMLSpanElement>;
     /**
      * The shape of the tag. Not available when the onClick prop is provided.
      * @type 'pill' | 'rounded'
      * @default 'pill'
      */
-    shape: 'pill';
+    shape?: never;
     /**
      * The usage of the tag. Not available when the onClick prop is provided.
      * @type 'filled' | 'outlined'
      * @default 'filled'
      */
-    usage: 'filled';
+    usage?: never;
 };
 export { ClickableTagProps }
 export { ClickableTagProps as ClickableTagProps_alias_1 }
@@ -520,6 +524,53 @@ declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTrigger
 export { createNavTriggerProps }
 export { createNavTriggerProps as createNavTriggerProps_alias_1 }
 
+/**
+ * Provides a CTA modal to the app.
+ * @see https://cerberus.digitalu.design/react/cta-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <CTAModal>
+ *   <SomeFeatureSection />
+ * </CTAModal>
+ *
+ * // Use the hook to show the cta modal.
+ * const cta = useCTAModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await cta.show({
+ *   heading: 'Create or copy a Cohort',
+ *  description:
+ *   'Create a new cohort or copy and existing one.',
+ *  icon: <Copy size={24} />,
+ *  actions: [
+ *  {
+ *   text: 'Create Cohort',
+ *   onClick: () => {},
+ *  {
+ *   text: 'Copy Cohort',
+ *   onClick: () => {}
+ *  }
+ * })
+ * setConsent(userConsent)
+ * }, [cta])
+ * ```
+ */
+declare function CTAModal(props: PropsWithChildren<CTAModalProviderProps>): JSX_2.Element;
+export { CTAModal }
+export { CTAModal as CTAModal_alias_1 }
+
+declare interface CTAModalProviderProps {
+}
+export { CTAModalProviderProps }
+export { CTAModalProviderProps as CTAModalProviderProps_alias_1 }
+
+declare interface CTAModalValue {
+    show: (options: ShowCTAModalOptions) => void;
+}
+export { CTAModalValue }
+export { CTAModalValue as CTAModalValue_alias_1 }
+
 declare type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K;
 export { CustomThemes }
 export { CustomThemes as CustomThemes_alias_1 }
@@ -964,14 +1015,30 @@ declare interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement
 export { FileUploaderProps }
 export { FileUploaderProps as FileUploaderProps_alias_1 }
 
+/**
+ * This module contains utility functions that are used across your app.
+ * @module Utils
+ */
+/**
+ * Formats the count of notifications to be displayed in the notification badge.
+ * @param count - The number of notifications.
+ * @returns The formatted count of notifications.
+ * @example
+ * ```tsx
+ * const count = formatNotifyCount(100)
+ * console.log(count) // '99+'
+ * ```
+ */
+declare function formatNotifyCount(count: number): string;
+export { formatNotifyCount }
+export { formatNotifyCount as formatNotifyCount_alias_1 }
+
 export { getClientRect }
 
 export { getFirstCollision }
 
 /**
- * Returns the position of the NavMenuList based on the position prop.
- * @param position - The position of the NavMenuList.
- * @returns The position of the NavMenuList.
+ * @deprecated use the {@link Menu} family instead
  */
 declare function getPosition(position: Positions): GetPositionResult;
 export { getPosition }
@@ -1194,6 +1261,138 @@ export { MeasuringFrequency }
 
 export { MeasuringStrategy }
 
+/**
+ * The root Menu component which controls the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>Trigger</MenuTrigger>
+ * </Menu>
+ */
+declare const Menu: (props: Menu_2.RootProps) => JSX_2.Element;
+export { Menu }
+export { Menu as Menu_alias_1 }
+
+/**
+ * The MenuContent component is the container for the menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+declare function MenuContent(props: Menu_2.ContentProps): JSX_2.Element;
+export { MenuContent }
+export { MenuContent as MenuContent_alias_1 }
+
+/**
+ * The MenuItemGroupLabel component is the label for a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+declare function MenuGroupLabel(props: Menu_2.ItemGroupLabelProps): JSX_2.Element;
+export { MenuGroupLabel }
+export { MenuGroupLabel as MenuGroupLabel_alias_1 }
+
+/**
+ * The MenuItem component is a single item in the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+declare function MenuItem(props: Menu_2.ItemProps): JSX_2.Element;
+export { MenuItem }
+export { MenuItem as MenuItem_alias_1 }
+
+/**
+ * The MenuItemGroup component is a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+declare const MenuItemGroup: ForwardRefExoticComponent<Menu_2.ItemGroupProps & RefAttributes<HTMLDivElement>>;
+export { MenuItemGroup }
+export { MenuItemGroup as MenuItemGroup_alias_1 }
+
+/**
+ * The MenuSeparator component is a visual divider between menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *    <MenuItemGroup>
+ *      <MenuGroupLabel>Group Label</MenuGroupLabel>
+ *      <MenuSeparator />
+ *      <MenuItem value="item_1">Item 1</MenuItem>
+ *      <MenuItem value="item_2">Item 2</MenuItem>
+ *    </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+declare function MenuSeparator(props: Menu_2.SeparatorProps): JSX_2.Element;
+export { MenuSeparator }
+export { MenuSeparator as MenuSeparator_alias_1 }
+
+/**
+ * The MenuTrigger component opens/closes the Menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ * </Menu>
+ */
+declare function MenuTrigger(props: Menu_2.TriggerProps): JSX_2.Element;
+export { MenuTrigger }
+export { MenuTrigger as MenuTrigger_alias_1 }
+
 /**
  * The Modal component is the root element for a customizable modal.
  * @see https://cerberus.digitalu.design/react/modal
@@ -1305,8 +1504,7 @@ export { MouseSensor }
 export { MouseSensorOptions }
 
 /**
- * Provides the nav menu state for all the NavMenu family components.
- * @see https://cerberus.digitalu.design/react/nav-menu
+ * @deprecated use the {@link Menu} family instead
  */
 declare function NavMenu(props: PropsWithChildren): JSX.Element;
 export { NavMenu }
@@ -1334,17 +1532,7 @@ export { NavMenuContextValue }
 export { NavMenuContextValue as NavMenuContextValue_alias_1 }
 
 /**
- * The NavMenuLink component is a link element that is used within the NavMenu.
- * @see https://cerberus.digitalu.design/react/nav-menu
- * @example
- * ```tsx
- * <NavMenu>
- *  <NavMenuList id="nav-menu-list" position="bottom">
- *   <NavMenuLink href="/home">Home</NavMenuLink>
- *   <NavMenuLink href="/about">About</NavMenuLink>
- *  </NavMenuList>
- * </NavMenu>
- * ```
+ * @deprecated use the {@link Menu} family instead
  */
 declare function NavMenuLink(props: NavMenuLinkProps): JSX.Element;
 export { NavMenuLink }
@@ -1403,16 +1591,7 @@ export { NavMenuRef }
 export { NavMenuRef as NavMenuRef_alias_1 }
 
 /**
- * A component that allows the user to trigger a navigation menu.
- * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
- * @example
- * ```tsx
- * <NavMenu>
- *   <NavMenuTrigger controls="nav-menu-list">
- *     Menu
- *   </NavMenuTrigger>
- * </NavMenu>
- * ```
+ * @deprecated use the {@link Menu} family instead
  */
 declare function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element;
 export { NavMenuTrigger }
@@ -1942,6 +2121,34 @@ declare interface ShowConfirmModalOptions {
 export { ShowConfirmModalOptions }
 export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
 
+/**
+ * This module provides a context and hook for the cta modal.
+ * @module
+ */
+declare interface ShowCTAModalOptions {
+    /**
+     * The heading of the cta modal.
+     */
+    heading: string;
+    /**
+     * The description of the cta modal.
+     */
+    description?: string;
+    /**
+     * The icon used for the modal Avatar.
+     */
+    icon?: ReactNode;
+    /**
+     * The actions for the cta modal. Max of 2 actions.
+     */
+    actions: {
+        text: string;
+        onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>;
+    }[];
+}
+export { ShowCTAModalOptions }
+export { ShowCTAModalOptions as ShowCTAModalOptions_alias_1 }
+
 /**
  * This module provides a context and hook for the prompt modal.
  * @module PromptModal
@@ -2268,7 +2475,7 @@ export { Tbody as Tbody_alias_1 }
  * This module provides a TBody component.
  * @module
  */
-declare type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>;
+declare type TbodyBaseProps = JSX.IntrinsicElements['tbody'];
 export { TbodyBaseProps }
 export { TbodyBaseProps as TbodyBaseProps_alias_1 }
 
@@ -2293,7 +2500,7 @@ export { Td as Td_alias_1 }
  * Th component for the Td component
  * @module
  */
-declare type TdBaseProps = TableHTMLAttributes<HTMLTableCellElement>;
+declare type TdBaseProps = JSX.IntrinsicElements['td'];
 export { TdBaseProps }
 export { TdBaseProps as TdBaseProps_alias_1 }
 
@@ -2354,7 +2561,7 @@ export { Th as Th_alias_1 }
  * Th component for the Table component
  * @module
  */
-declare type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+declare type ThBaseProps = JSX.IntrinsicElements['th'] & {
     /**
      * Converts the Th into a actionable button. Called when the user clicks on
      * the Th.
@@ -2383,7 +2590,7 @@ export { Thead as Thead_alias_1 }
  * This module contains the Thead component.
  * @module
  */
-declare type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>;
+declare type TheadProps = JSX.IntrinsicElements['thead'];
 export { TheadProps }
 export { TheadProps as TheadProps_alias_1 }
 
@@ -2547,6 +2754,10 @@ declare function useConfirmModal(): ConfirmModalValue;
 export { useConfirmModal }
 export { useConfirmModal as useConfirmModal_alias_1 }
 
+declare function useCTAModal(): CTAModalValue;
+export { useCTAModal }
+export { useCTAModal as useCTAModal_alias_1 }
+
 export { useDndContext }
 
 export { UseDndContextReturnValue }

package/build/modern/{chunk-HPM2XRWT.js → chunk-3R4TIF2X.js}

@@ -21,4 +21,4 @@ function Td(props) {
 export {
   Td
 };
-//# sourceMappingURL=chunk-HPM2XRWT.js.map
+//# sourceMappingURL=chunk-3R4TIF2X.js.map

package/build/modern/{chunk-HPM2XRWT.js.map → chunk-3R4TIF2X.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Td.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { td, type TdVariantProps } from '@cerberus/styled-system/recipes'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * Th component for the Td component\n * @module\n */\n\nexport type TdBaseProps = TableHTMLAttributes<HTMLTableCellElement>\nexport type TdProps = TdBaseProps & TdVariantProps\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 * <Td>Data cell</Td>\n * ```\n */\nexport function Td(props: TdProps) {\n  const { size, ...nativeProps } = props\n  return (\n    <td\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        td({\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,UAA+B;AAuBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,GAAG;AAAA,UACD;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Td.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { td, type TdVariantProps } from '@cerberus/styled-system/recipes'\n\n/**\n * Th component for the Td component\n * @module\n */\n\nexport type TdBaseProps = JSX.IntrinsicElements['td']\nexport type TdProps = TdBaseProps & TdVariantProps\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 * <Td>Data cell</Td>\n * ```\n */\nexport function Td(props: TdProps) {\n  const { size, ...nativeProps } = props\n  return (\n    <td\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        td({\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,UAA+B;AAsBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,GAAG;AAAA,UACD;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-RDQHHCFR.js → chunk-5OSUZUR4.js}

@@ -1,6 +1,6 @@
 import {
   Notification
-} from "./chunk-KLUBAM4U.js";
+} from "./chunk-7SGPJM66.js";
 import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-RDQHHCFR.js.map
+//# sourceMappingURL=chunk-5OSUZUR4.js.map

package/build/modern/{chunk-O75QAT4Z.js → chunk-6WS765J3.js}

@@ -48,4 +48,4 @@ export {
   NavMenu,
   useNavMenuContext
 };
-//# sourceMappingURL=chunk-O75QAT4Z.js.map
+//# sourceMappingURL=chunk-6WS765J3.js.map

package/build/modern/chunk-6WS765J3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef | null\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef | null\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n"],"mappings":";AAEA,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAuDD;AA1BN,IAAM,iBAAiB,cAA0C,IAAI;AAK9D,SAAS,QAAQ,OAAuC;AAC7D,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,UAAU,OAAyB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,oBAAyC;AACvD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-KLUBAM4U.js → chunk-7SGPJM66.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Notification.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -14,7 +14,6 @@ import {
 import {
   useRef
 } from "react";
-import { Close } from "@cerberus/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 function MatchNotificationIcon(props) {
   const palette = props.palette || "info";
@@ -27,6 +26,7 @@ function Notification(props) {
   const ref = useRef(null);
   const onKeyDown = trapFocus(ref);
   const styles = notification({ palette });
+  const { close: CloseIcon } = $cerberusIcons;
   return /* @__PURE__ */ jsxs(
     "dialog",
     {
@@ -61,7 +61,7 @@ function Notification(props) {
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ jsx(Close, {})
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
           }
         )
       ]
@@ -72,4 +72,4 @@ function Notification(props) {
 export {
   Notification
 };
-//# sourceMappingURL=chunk-KLUBAM4U.js.map
+//# sourceMappingURL=chunk-7SGPJM66.js.map

package/build/modern/chunk-7SGPJM66.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = props.palette || 'info'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[key] as IconType\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n *  <NotificationDescription>\n *   This is a description with a <a href=\"#\">link</a> in the message.\n *  </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n  const { close: CloseIcon } = $cerberusIcons\n\n  return (\n    <dialog\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <CloseIcon />\n      </button>\n    </dialog>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAcE,cAuCL,YAvCK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AA8BO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-X4Y4WTRU.js → chunk-CSEHDNMJ.js}

@@ -1,3 +1,6 @@
+import {
+  ModalHeading
+} from "./chunk-2UXE5PDG.js";
 import {
   Portal
 } from "./chunk-GLY7GU5S.js";
@@ -9,13 +12,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";
@@ -27,7 +27,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 import {
   useModal
 } from "./chunk-7T3JIGM7.js";
@@ -176,4 +176,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-X4Y4WTRU.js.map
+//# sourceMappingURL=chunk-CSEHDNMJ.js.map

package/build/modern/{chunk-TMR7JGMP.js → chunk-F27AAKQ3.js}

@@ -11,7 +11,7 @@ import {
   Checkmark,
   CheckmarkOutline,
   ChevronDown,
-  CloseFilled,
+  Close,
   CloudUpload,
   Information,
   Restart,
@@ -24,7 +24,7 @@ import {
 var defaultIcons = {
   avatar: UserFilled,
   checkbox: CheckmarkIcon,
-  close: CloseFilled,
+  close: Close,
   confirmModal: Information,
   delete: TrashCan,
   promptModal: Information,
@@ -45,4 +45,4 @@ var defaultIcons = {
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-TMR7JGMP.js.map
+//# sourceMappingURL=chunk-F27AAKQ3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4BA,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

package/build/modern/{chunk-243VUIA6.js → chunk-F72ZABKX.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Tag.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -61,4 +61,4 @@ var closableCss = css({
 export {
   Tag
 };
-//# sourceMappingURL=chunk-243VUIA6.js.map
+//# sourceMappingURL=chunk-F72ZABKX.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type {\n  HTMLAttributes,\n  MouseEventHandler,\n  PropsWithChildren,\n} from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  tag,\n  type TagVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagVariantProps & {\n    /**\n     * The action to be performed when the tag is clicked. Not available when\n     * the palette or gradient props are provided.\n     */\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  /**\n   * The gradient to apply to the tag. Not available when the onClick prop is\n   * provided.\n   */\n  gradient?: never\n  /**\n   * The palette to use for the tag. Not available when the onClick prop is\n   * provided.\n   */\n  palette?: never\n  /**\n   * The action to be performed when the tag is clicked.\n   */\n  onClick: MouseEventHandler<HTMLSpanElement>\n  /**\n   * The shape of the tag. Not available when the onClick prop is provided.\n   * @type 'pill' | 'rounded'\n   * @default 'pill'\n   */\n  shape?: never\n  /**\n   * The usage of the tag. Not available when the onClick prop is provided.\n   * @type 'filled' | 'outlined'\n   * @default 'filled'\n   */\n  usage?: never\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'page'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n  const { close: Close } = $cerberusIcons\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;;;;AAMA,SAAS,KAAK,UAAU;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAiEH,SAyBM,KAzBN;AATG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAClD,QAAM,EAAE,OAAO,MAAM,IAAI;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/modern/{chunk-KF6V5JLW.js → chunk-N4QTLDVM.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/Admonition.tsx
 import {
@@ -135,4 +135,4 @@ export {
   AdmonitionHeading,
   AdmonitionDescription
 };
-//# sourceMappingURL=chunk-KF6V5JLW.js.map
+//# sourceMappingURL=chunk-N4QTLDVM.js.map

package/build/modern/{chunk-MDIUFBDX.js → chunk-NB6DV4VA.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Checkbox.tsx
 import {
@@ -53,4 +53,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-MDIUFBDX.js.map
+//# sourceMappingURL=chunk-NB6DV4VA.js.map