@cerberus-design/react 0.7.4 → 0.8.0-next-a23daaf

package/build/modern/chunk-3C2DJSEE.js

@@ -0,0 +1,16 @@
+// src/components/NotificationHeading.tsx
+import { cx } from "@cerberus/styled-system/css";
+import {
+  notification
+} from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function NotificationHeading(props) {
+  const { palette, ...nativeProps } = props;
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsx("p", { className: cx(nativeProps.className, styles.heading), ...nativeProps });
+}
+
+export {
+  NotificationHeading
+};
+//# sourceMappingURL=chunk-3C2DJSEE.js.map

package/build/modern/chunk-3C2DJSEE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NotificationHeading.tsx"],"sourcesContent":["/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationHeadingProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * The NotificationHeading component is used to render the heading of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}

package/build/modern/chunk-3GXISGPS.js

@@ -0,0 +1,47 @@
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/components/Th.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { th } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function Th(props) {
+  const { size, onClick, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: Boolean(onClick),
+      fallback: /* @__PURE__ */ jsx(
+        "th",
+        {
+          ...nativeProps,
+          className: cx(nativeProps.className, th({ size }))
+        }
+      ),
+      children: /* @__PURE__ */ jsx("th", { ...nativeProps, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx(
+            nativeProps.className,
+            th({ size }),
+            css({
+              alignItems: "center",
+              display: "inline-flex",
+              justifyContent: "space-between",
+              userSelect: "none",
+              w: "full"
+            })
+          ),
+          onClick,
+          children: props.children
+        }
+      ) })
+    }
+  );
+}
+
+export {
+  Th
+};
+//# sourceMappingURL=chunk-3GXISGPS.js.map

package/build/modern/chunk-3GXISGPS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</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            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AA4BhC;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,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-4N2L357B.js

@@ -0,0 +1,76 @@
+import {
+  trapFocus
+} from "./chunk-JIZQFTW6.js";
+import {
+  $cerberusIcons
+} from "./chunk-BEYPMC73.js";
+
+// src/components/Notification.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { hstack, vstack } from "@cerberus/styled-system/patterns";
+import {
+  notification
+} from "@cerberus/styled-system/recipes";
+import {
+  useRef
+} from "react";
+import { Close } from "@cerberus/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MatchNotificationIcon(props) {
+  const palette = props.palette || "info";
+  const key = `${palette}Notification`;
+  const Icon = $cerberusIcons[key];
+  return /* @__PURE__ */ jsx(Icon, {});
+}
+function Notification(props) {
+  const { children, palette, onClose, ...nativeProps } = props;
+  const ref = useRef(null);
+  const onKeyDown = trapFocus(ref);
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        hstack({
+          position: "relative",
+          gap: "4"
+        }),
+        styles.dialog
+      ),
+      onKeyDown,
+      ref,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: vstack({
+              alignItems: "flex-start",
+              gap: "0",
+              py: "2"
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            className: styles.close,
+            onClick: onClose,
+            value: props.id,
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Notification
+};
+//# sourceMappingURL=chunk-4N2L357B.js.map

package/build/modern/chunk-4N2L357B.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 { Close } from '@cerberus/icons'\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  id: string\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * The info notification component.\n * @param props - The component props.\n * @returns The info notification component.\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\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      role=\"alert\"\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        <Close />\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;AACP,SAAS,aAAa;AAcb,cA+BL,YA/BK;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;AAuBO,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;AAEvC,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,MACA,MAAK;AAAA,MAEL;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,SAAM;AAAA;AAAA,QACT;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-2ATICEW3.js → chunk-6F34A7NZ.js}

@@ -1,6 +1,8 @@
 // src/components/Button.tsx
 import { cx } from "@cerberus/styled-system/css";
-import { button } from "@cerberus/styled-system/recipes";
+import {
+  button
+} from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function Button(props) {
   const { palette, usage, shape, ...nativeProps } = props;
@@ -23,4 +25,4 @@ function Button(props) {
 export {
   Button
 };
-//# sourceMappingURL=chunk-2ATICEW3.js.map
+//# sourceMappingURL=chunk-6F34A7NZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAiBH;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-7VJOPJVX.js

@@ -0,0 +1,29 @@
+// src/components/Droppable.tsx
+import { useDroppable } from "@dnd-kit/core";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+function Droppable(props) {
+  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
+  const uuid = useId();
+  const { isOver, setNodeRef } = useDroppable({
+    data,
+    disabled,
+    id: id || uuid,
+    resizeObserverConfig
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      "data-over": isOver,
+      "data-dropped": dropped,
+      ref: setNodeRef,
+      children: props.children
+    }
+  );
+}
+
+export {
+  Droppable
+};
+//# sourceMappingURL=chunk-7VJOPJVX.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Droppable.tsx"],"sourcesContent":["'use client'\n\nimport { useDroppable, type UseDroppableArguments } from '@dnd-kit/core'\nimport { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'\n\nexport interface DroppableProps\n  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,\n    UseDroppableArguments {\n  dropped?: boolean\n}\n\nexport function Droppable(props: PropsWithChildren<DroppableProps>) {\n  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =\n    props\n  const uuid = useId()\n  const { isOver, setNodeRef } = useDroppable({\n    data,\n    disabled,\n    id: id || uuid,\n    resizeObserverConfig,\n  })\n\n  return (\n    <div\n      {...nativeProps}\n      data-over={isOver}\n      data-dropped={dropped}\n      ref={setNodeRef}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":";AAEA,SAAS,oBAAgD;AACzD,SAAS,aAA8D;AAoBnE;AAZG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,IAAI,UAAU,MAAM,sBAAsB,GAAG,YAAY,IACxE;AACF,QAAM,OAAO,MAAM;AACnB,QAAM,EAAE,QAAQ,WAAW,IAAI,aAAa;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,IAAI,MAAM;AAAA,IACV;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW;AAAA,MACX,gBAAc;AAAA,MACd,KAAK;AAAA,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/build/modern/chunk-A5WYZVUR.js

@@ -0,0 +1,28 @@
+// src/components/Table.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { table } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Table(props) {
+  const { caption, children, ...nativeProps } = props;
+  const styles = table();
+  return /* @__PURE__ */ jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      ...nativeProps,
+      className: cx(nativeProps.className, styles.table),
+      children: [
+        /* @__PURE__ */ jsx("caption", { className: styles.caption, children: caption }),
+        children
+      ]
+    }
+  ) });
+}
+function Tr(props) {
+  return /* @__PURE__ */ jsx("tr", { ...props });
+}
+
+export {
+  Table,
+  Tr
+};
+//# sourceMappingURL=chunk-A5WYZVUR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Table.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { table } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren, TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the table component.\n * @module\n */\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  caption: string\n}\n\n/**\n * The Table component is used to render a table.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @prop caption - An easy to understand description of the table.\n * @example\n * ```tsx\n * <Table caption=\"Basic Table\">\n *  {children}\n * </Table>\n * ```\n */\nexport function Table(props: PropsWithChildren<TableProps>) {\n  const { caption, children, ...nativeProps } = props\n  const styles = table()\n\n  return (\n    <div className={styles.container}>\n      <table\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.table)}\n      >\n        <caption className={styles.caption}>{caption}</caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n// We only provide this for consistency with the rest of the components\n\nexport type TrProps = TableHTMLAttributes<HTMLTableRowElement>\n\n/**\n * The Tr component is used to render a table row.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Tr>\n *  {children}\n * </Tr>\n * ```\n */\nexport function Tr(props: PropsWithChildren<TrProps>) {\n  return <tr {...props} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AA6BhB,SAIE,KAJF;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,MAAM;AAErB,SACE,oBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,4BAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,oBAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}

package/build/{legacy/chunk-6TXQZ3PB.js → modern/chunk-BEYPMC73.js}

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

package/build/modern/chunk-GVNPFXKL.js

@@ -0,0 +1,26 @@
+// src/config/cerbIcons.ts
+import {
+  Checkmark,
+  CheckmarkFilled,
+  CloudUpload,
+  ErrorFilled,
+  Information,
+  InformationFilled,
+  WarningFilled
+} from "@cerberus/icons";
+var defaultIcons = {
+  confirmModal: Information,
+  promptModal: Information,
+  fileUploader: CloudUpload,
+  infoNotification: InformationFilled,
+  successNotification: CheckmarkFilled,
+  warningNotification: WarningFilled,
+  dangerNotification: ErrorFilled,
+  invalid: WarningFilled,
+  toggleChecked: Checkmark
+};
+
+export {
+  defaultIcons
+};
+//# sourceMappingURL=chunk-GVNPFXKL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  confirmModal?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAiBA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

package/build/modern/chunk-HW76XVA3.js

@@ -0,0 +1,22 @@
+// src/components/NotificationDescription.tsx
+import { cx } from "@cerberus/styled-system/css";
+import {
+  notification
+} from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function NotificationDescription(props) {
+  const { palette, ...nativeProps } = props;
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cx(nativeProps.className, styles.description),
+      ...nativeProps
+    }
+  );
+}
+
+export {
+  NotificationDescription
+};
+//# sourceMappingURL=chunk-HW76XVA3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NotificationDescription.tsx"],"sourcesContent":["/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationDescriptionProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * The NotificationDescription component is used to render the description of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p\n      className={cx(nativeProps.className, styles.description)}\n      {...nativeProps}\n    />\n  )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/build/modern/{chunk-JWQJLOX4.js → chunk-IL5ELPTT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-6TXQZ3PB.js";
+} from "./chunk-BEYPMC73.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-JWQJLOX4.js.map
+//# sourceMappingURL=chunk-IL5ELPTT.js.map

package/build/modern/chunk-IOG6XIR5.js

@@ -0,0 +1,62 @@
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  $cerberusIcons
+} from "./chunk-BEYPMC73.js";
+
+// src/components/FileUploader.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { circle, vstack } from "@cerberus/styled-system/patterns";
+import { fileUploader, modalIcon } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FileUploader(props) {
+  const styles = fileUploader();
+  const Icon = $cerberusIcons.fileUploader;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        vstack({
+          justify: "center"
+        }),
+        styles.container
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cx(styles.icon, modalIcon(), circle()), children: /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cx(
+              vstack({
+                justify: "center"
+              }),
+              styles.label
+            ),
+            htmlFor: props.name,
+            children: [
+              /* @__PURE__ */ jsx(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ jsx("p", { className: styles.heading, children: props.heading }) }),
+              "Import ",
+              props.accept?.replace(",", ", "),
+              " files",
+              /* @__PURE__ */ jsx("p", { className: styles.description, children: "Or click to upload" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...props,
+                  className: cx(props.className, styles.input),
+                  type: "file"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  FileUploader
+};
+//# sourceMappingURL=chunk-IOG6XIR5.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FileUploader.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { circle, vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader, modalIcon } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\nexport interface FileUploaderProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  heading?: string\n  name: string\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const styles = fileUploader()\n  const Icon = $cerberusIcons.fileUploader\n\n  return (\n    <div\n      className={cx(\n        vstack({\n          justify: 'center',\n        }),\n        styles.container,\n      )}\n    >\n      <span className={cx(styles.icon, modalIcon(), circle())}>\n        <Icon />\n      </span>\n\n      <label\n        className={cx(\n          vstack({\n            justify: 'center',\n          }),\n          styles.label,\n        )}\n        htmlFor={props.name}\n      >\n        <Show when={Boolean(props.heading)}>\n          <p className={styles.heading}>{props.heading}</p>\n        </Show>\n        Import {props.accept?.replace(',', ', ')} files\n        <p className={styles.description}>Or click to upload</p>\n        <input\n          {...props}\n          className={cx(props.className, styles.input)}\n          type=\"file\"\n        />\n      </label>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAG/B,SAAS,cAAc,iBAAiB;AAuBhC,cAGF,YAHE;AAdD,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,aAAa;AAC5B,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,GAAG,OAAO,MAAM,UAAU,GAAG,OAAO,CAAC,GACpD,8BAAC,QAAK,GACR;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,cACD,OAAO;AAAA,YACT;AAAA,YACA,SAAS,MAAM;AAAA,YAEf;AAAA,kCAAC,QAAK,MAAM,QAAQ,MAAM,OAAO,GAC/B,8BAAC,OAAE,WAAW,OAAO,SAAU,gBAAM,SAAQ,GAC/C;AAAA,cAAO;AAAA,cACC,MAAM,QAAQ,QAAQ,KAAK,IAAI;AAAA,cAAE;AAAA,cACzC,oBAAC,OAAE,WAAW,OAAO,aAAa,gCAAkB;AAAA,cACpD;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,WAAW,GAAG,MAAM,WAAW,OAAO,KAAK;AAAA,kBAC3C,MAAK;AAAA;AAAA,cACP;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-CU7HXAKM.js → chunk-JJGZRBIR.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -46,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-CU7HXAKM.js.map
+//# sourceMappingURL=chunk-JJGZRBIR.js.map

package/build/modern/{chunk-FAXDUWAU.js → chunk-LTDNZRUY.js}

@@ -1,6 +1,12 @@
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  Input
+} from "./chunk-XB4ZRAH4.js";
+import {
+  Label
+} from "./chunk-JJGZRBIR.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
@@ -18,25 +24,19 @@ import {
 } from "./chunk-JJP2TFTU.js";
 import {
   Button
-} from "./chunk-2ATICEW3.js";
-import {
-  Input
-} from "./chunk-5GEC53G7.js";
+} from "./chunk-6F34A7NZ.js";
 import {
-  Label
-} from "./chunk-CU7HXAKM.js";
+  Field
+} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  Field
-} from "./chunk-ZAU4JVLL.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-6TXQZ3PB.js";
+} from "./chunk-BEYPMC73.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -204,4 +204,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-FAXDUWAU.js.map
+//# sourceMappingURL=chunk-LTDNZRUY.js.map

package/build/modern/chunk-N3FUF4TB.js

@@ -0,0 +1,12 @@
+// src/components/Thead.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { thead } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function Thead(props) {
+  return /* @__PURE__ */ jsx("thead", { ...props, className: cx(props.className, thead()) });
+}
+
+export {
+  Thead
+};
+//# sourceMappingURL=chunk-N3FUF4TB.js.map

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

@@ -0,0 +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 * @definition [Table docs](https://cerberus.digitalu.design/react/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-PJ3744I6.js

@@ -0,0 +1,24 @@
+// src/components/Tbody.tsx
+import { tbody } from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function Tbody(props) {
+  const { decoration, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        tbody({
+          decoration
+        })
+      )
+    }
+  );
+}
+
+export {
+  Tbody
+};
+//# sourceMappingURL=chunk-PJ3744I6.js.map

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

@@ -0,0 +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\nexport type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>\nexport type TbodyProps = TbodyBaseProps & TbodyVariantProps\n\n/**\n * The TBody component is used to render a table body.\n * @definition [Table docs](https://cerberus.digitalu.design/react/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;AAmBf;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/chunk-QO2UXGW4.js

@@ -0,0 +1,122 @@
+import {
+  Notification
+} from "./chunk-4N2L357B.js";
+import {
+  NotificationDescription
+} from "./chunk-HW76XVA3.js";
+import {
+  NotificationHeading
+} from "./chunk-3C2DJSEE.js";
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
+import {
+  Button
+} from "./chunk-6F34A7NZ.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/context/notification-center.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { animateIn, vstack } from "@cerberus/styled-system/patterns";
+import { notification } from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationsContext = createContext(null);
+function NotificationCenter(props) {
+  const [activeNotifications, setActiveNotifications] = useState([]);
+  const styles = notification();
+  const handleNotify = useCallback((options) => {
+    setActiveNotifications((prev) => {
+      const id = `${options.palette}:${prev.length + 1}`;
+      return [...prev, { ...options, id }];
+    });
+  }, []);
+  const handleClose = useCallback((e) => {
+    const target = e.currentTarget;
+    setActiveNotifications((prev) => {
+      const item = prev.find((option) => option.id === target.value);
+      if (item?.onClose) item.onClose();
+      return prev.filter((option) => option.id !== target.value);
+    });
+  }, []);
+  const handleCloseAll = useCallback(() => {
+    setActiveNotifications((prev) => {
+      prev.forEach((item) => {
+        if (item.onClose) item.onClose();
+      });
+      return [];
+    });
+  }, []);
+  const value = useMemo(
+    () => ({
+      notify: handleNotify
+    }),
+    [handleNotify]
+  );
+  return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsxs("div", { className: styles.center, children: [
+      /* @__PURE__ */ jsx(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: cx(styles.closeAll, animateIn()),
+          onClick: handleCloseAll,
+          palette: "action",
+          shape: "rounded",
+          size: "sm",
+          usage: "text",
+          children: "Close all"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: vstack({
+            alignItems: "flex-end",
+            gap: "4"
+          }),
+          style: {
+            alignItems: "flex-end"
+          },
+          children: activeNotifications.map((option) => /* @__PURE__ */ jsxs(
+            Notification,
+            {
+              id: option.id,
+              onClose: handleClose,
+              open: true,
+              palette: option.palette,
+              children: [
+                /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
+                /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
+              ]
+            },
+            option.id
+          ))
+        }
+      )
+    ] }) }) })
+  ] });
+}
+function useNotificationCenter() {
+  const context = useContext(NotificationsContext);
+  if (!context) {
+    throw new Error(
+      "useNotificationCenter must be used within a NotificationsProvider"
+    );
+  }
+  return context;
+}
+
+export {
+  NotificationCenter,
+  useNotificationCenter
+};
+//# sourceMappingURL=chunk-QO2UXGW4.js.map