@cerberus-design/react 0.16.0-next-d049636 → 0.17.0-next-e7f9956

package/build/modern/chunk-SXLPDPOZ.js

@@ -1,105 +0,0 @@
-import {
-  useCerberusContext
-} from "./chunk-GITT5645.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
-
-// src/components/Avatar.tsx
-import { css, cx } from "@cerberus/styled-system/css";
-import { circle } from "@cerberus/styled-system/patterns";
-import {
-  avatar
-} from "@cerberus/styled-system/recipes";
-import { jsx } from "react/jsx-runtime";
-function Avatar(props) {
-  const {
-    ariaLabel,
-    as,
-    gradient,
-    size,
-    src,
-    width,
-    height,
-    icon,
-    ...nativeProps
-  } = props;
-  const { icons } = useCerberusContext();
-  const { avatar: AvatarIcon } = icons;
-  const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...nativeProps,
-      className: cx(
-        nativeProps.className,
-        avatar({ gradient, size }),
-        circle()
-      ),
-      children: /* @__PURE__ */ jsx(
-        Show,
-        {
-          when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ jsx(
-            Show,
-            {
-              when: Boolean(initials),
-              fallback: /* @__PURE__ */ jsx(
-                Show,
-                {
-                  when: Boolean(icon),
-                  fallback: /* @__PURE__ */ jsx(
-                    AvatarIcon,
-                    {
-                      size: iconSizeMap[size]
-                    }
-                  ),
-                  children: icon
-                }
-              ),
-              children: initials
-            }
-          ),
-          children: /* @__PURE__ */ jsx(
-            Show,
-            {
-              when: Boolean(as),
-              fallback: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  alt: props.ariaLabel,
-                  className: css({
-                    h: "full",
-                    objectFit: "cover",
-                    w: "full"
-                  }),
-                  decoding: "async",
-                  loading: "lazy",
-                  src,
-                  height,
-                  width
-                }
-              ),
-              children: as
-            }
-          )
-        }
-      )
-    }
-  );
-}
-var iconSizeMap = {
-  xs: 16,
-  sm: 16,
-  md: 20,
-  lg: 34,
-  xl: 32,
-  "2xl": 32,
-  "3xl": 32,
-  "4xl": 32
-};
-
-export {
-  Avatar
-};
-//# sourceMappingURL=chunk-SXLPDPOZ.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { icons } = useCerberusContext()\n  const { avatar: AvatarIcon } = icons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AA2GW;AAtCX,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,QAAQ,WAAW,IAAI;AAC/B,QAAM,YAAY,aAAa,IAC5B,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,MAAM,GAAG,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO,EAAE,UAAU,KAAK,CAAC;AAAA,QACzB,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ,GAAG,KAAK,QAAQ,EAAE;AAAA,UAChC,UACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,QAAQ;AAAA,cACtB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,IAAI;AAAA,kBAClB,UACE;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,YAAY,IAAgC;AAAA;AAAA,kBACpD;AAAA,kBAGD;AAAA;AAAA,cACH;AAAA,cAGD;AAAA;AAAA,UACH;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,EAAE;AAAA,cAChB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK,MAAM;AAAA,kBACX,WAAW,IAAI;AAAA,oBACb,GAAG;AAAA,oBACH,WAAW;AAAA,oBACX,GAAG;AAAA,kBACL,CAAC;AAAA,kBACD,UAAS;AAAA,kBACT,SAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cAGD;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}

package/build/modern/chunk-TM6TVO2D.js

@@ -1,78 +0,0 @@
-import {
-  Avatar
-} from "./chunk-SXLPDPOZ.js";
-import {
-  useCerberusContext
-} from "./chunk-GITT5645.js";
-
-// src/components/admonition/match-avatar.tsx
-import { useRef } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-function MatchAvatar(props) {
-  const { palette = "page" } = props;
-  const { icons } = useCerberusContext();
-  const {
-    infoNotification: InfoIcon,
-    successNotification: SuccessIcon,
-    warningNotification: WarningIcon,
-    dangerNotification: DangerIcon
-  } = icons;
-  const elRef = useRef({
-    page: /* @__PURE__ */ jsx(
-      Avatar,
-      {
-        gradient: "charon-light",
-        ariaLabel: "",
-        icon: /* @__PURE__ */ jsx(InfoIcon, {}),
-        size: "sm",
-        src: ""
-      }
-    ),
-    info: /* @__PURE__ */ jsx(
-      Avatar,
-      {
-        gradient: "amphiaraus-dark",
-        ariaLabel: "",
-        icon: /* @__PURE__ */ jsx(InfoIcon, {}),
-        size: "sm",
-        src: ""
-      }
-    ),
-    success: /* @__PURE__ */ jsx(
-      Avatar,
-      {
-        gradient: "thanatos-dark",
-        ariaLabel: "",
-        icon: /* @__PURE__ */ jsx(SuccessIcon, {}),
-        size: "sm",
-        src: ""
-      }
-    ),
-    warning: /* @__PURE__ */ jsx(
-      Avatar,
-      {
-        gradient: "asphodel-light",
-        ariaLabel: "",
-        icon: /* @__PURE__ */ jsx(WarningIcon, {}),
-        size: "sm",
-        src: ""
-      }
-    ),
-    danger: /* @__PURE__ */ jsx(
-      Avatar,
-      {
-        gradient: "hades-light",
-        ariaLabel: "",
-        icon: /* @__PURE__ */ jsx(DangerIcon, {}),
-        size: "sm",
-        src: ""
-      }
-    )
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: elRef.current[palette] });
-}
-
-export {
-  MatchAvatar
-};
-//# sourceMappingURL=chunk-TM6TVO2D.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/admonition/match-avatar.tsx"],"sourcesContent":["'use client'\n\nimport type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Avatar } from '../Avatar'\nimport { useRef, type ReactNode } from 'react'\n\n/**\n * This module provides a component for creating the admonition indicator.\n * @module 'admonition/match-avatar'\n */\n\ninterface AvatarRefProps {\n  page: ReactNode\n  info: ReactNode\n  success: ReactNode\n  warning: ReactNode\n  danger: ReactNode\n}\n\ntype MatchAvatarProps = AdmonitionVariantProps\n\nexport function MatchAvatar(props: MatchAvatarProps) {\n  const { palette = 'page' } = props\n\n  const { icons } = useCerberusContext()\n  const {\n    infoNotification: InfoIcon,\n    successNotification: SuccessIcon,\n    warningNotification: WarningIcon,\n    dangerNotification: DangerIcon,\n  } = icons\n\n  // cache the el since the result is static and the component is client side\n  const elRef = useRef<AvatarRefProps>({\n    page: (\n      <Avatar\n        gradient=\"charon-light\"\n        ariaLabel=\"\"\n        icon={<InfoIcon />}\n        size=\"sm\"\n        src=\"\"\n      />\n    ),\n    info: (\n      <Avatar\n        gradient=\"amphiaraus-dark\"\n        ariaLabel=\"\"\n        icon={<InfoIcon />}\n        size=\"sm\"\n        src=\"\"\n      />\n    ),\n    success: (\n      <Avatar\n        gradient=\"thanatos-dark\"\n        ariaLabel=\"\"\n        icon={<SuccessIcon />}\n        size=\"sm\"\n        src=\"\"\n      />\n    ),\n    warning: (\n      <Avatar\n        gradient=\"asphodel-light\"\n        ariaLabel=\"\"\n        icon={<WarningIcon />}\n        size=\"sm\"\n        src=\"\"\n      />\n    ),\n    danger: (\n      <Avatar\n        gradient=\"hades-light\"\n        ariaLabel=\"\"\n        icon={<DangerIcon />}\n        size=\"sm\"\n        src=\"\"\n      />\n    ),\n  })\n\n  return <>{elRef.current[palette]}</>\n}\n"],"mappings":";;;;;;;;AAKA,SAAS,cAA8B;AAkCzB,SA2CL,UA3CK;AAjBP,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,UAAU,OAAO,IAAI;AAE7B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,EACtB,IAAI;AAGJ,QAAM,QAAQ,OAAuB;AAAA,IACnC,MACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,WAAU;AAAA,QACV,MAAM,oBAAC,YAAS;AAAA,QAChB,MAAK;AAAA,QACL,KAAI;AAAA;AAAA,IACN;AAAA,IAEF,MACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,WAAU;AAAA,QACV,MAAM,oBAAC,YAAS;AAAA,QAChB,MAAK;AAAA,QACL,KAAI;AAAA;AAAA,IACN;AAAA,IAEF,SACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,WAAU;AAAA,QACV,MAAM,oBAAC,eAAY;AAAA,QACnB,MAAK;AAAA,QACL,KAAI;AAAA;AAAA,IACN;AAAA,IAEF,SACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,WAAU;AAAA,QACV,MAAM,oBAAC,eAAY;AAAA,QACnB,MAAK;AAAA,QACL,KAAI;AAAA;AAAA,IACN;AAAA,IAEF,QACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,WAAU;AAAA,QACV,MAAM,oBAAC,cAAW;AAAA,QAClB,MAAK;AAAA,QACL,KAAI;AAAA;AAAA,IACN;AAAA,EAEJ,CAAC;AAED,SAAO,gCAAG,gBAAM,QAAQ,OAAO,GAAE;AACnC;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NotificationDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport type BaseNotificationDescriptionProps =\n  HTMLAttributes<HTMLParagraphElement>\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\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":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAuBH;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-WZJ5UQNM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  progressBar,\n  type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport type ProgressBarBaseProps = HTMLAttributes<HTMLDivElement>\nexport type NonIndeterminateProgressBarProps = {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: never\n  /**\n   * The current value of the progress bar.\n   */\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: true\n  /**\n   * The current value of the progress bar.\n   */\n  now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n  ProgressBarVariantProps &\n  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, label, ...nativeProps } = props\n  const styles = progressBar({ size, usage })\n  const nowClamped = Math.min(100, Math.max(0, now || 0))\n  const width = {\n    width: indeterminate ? '50%' : `${nowClamped}%`,\n  }\n\n  return (\n    <div\n      {...nativeProps}\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? 0 : nowClamped}\n      className={cx(nativeProps.className, styles.root)}\n      role=\"progressbar\"\n    >\n      <div\n        {...(indeterminate && { 'data-indeterminate': true })}\n        data-complete={nowClamped === 100}\n        className={styles.bar}\n        style={width}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AA2ED;AAlBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,OAAO,GAAG,YAAY,IAAI;AACnE,QAAM,SAAS,YAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,WAAW,GAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { DialogCloseTrigger } from '@ark-ui/react'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { FieldLabel, FieldRoot, Input } from '../components/field/index'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { Text } from '../components/Text'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/dialog'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n  /**\n   * The kind of prompt modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'destructive' | 'non-destructive'\n  /**\n   * The heading of the prompt modal.\n   */\n  heading: string\n  /**\n   * The description of the prompt modal.\n   */\n  description?: string\n  /**\n   * The key to confirm the action.\n   */\n  key: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\nexport type PromptShowResult =\n  | ((value: string | PromiseLike<string>) => void)\n  | null\n\nexport interface PromptModalValue {\n  /**\n   * The method to trigger the prompt modal.\n   * @returns the value of the key if the action is confirmed.\n   * @example\n   * ```tsx\n   * const accepted = await prompt.show({\n   *  kind: 'destructive',\n   *  heading: 'Delete channel?',\n   *  description:\n   *   'This will permanently delete a channel on your account. There is no going back.',\n   *  key: CHANNEL_NAME,\n   *  actionText: 'Yes, delete channel',\n   *  cancelText: 'No, cancel',\n   * })\n   */\n  show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n *   <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n *  const accepted = await prompt.show({\n *   kind: 'destructive',\n *   heading: 'Delete channel?',\n *  description:\n *   'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n  props: PropsWithChildren<PromptModalProviderProps>,\n) {\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n\n  const { icons } = useCerberusContext()\n  const { promptModal: PromptIcon } = icons\n\n  const isValid = useMemo(\n    () => inputValue === content?.key,\n    [inputValue, content],\n  )\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.currentTarget.value)\n    },\n    [content],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(inputValue)\n      }\n      setOpen(false)\n    },\n    [inputValue, setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <PromptModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<PromptIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<PromptIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <VStack\n              alignItems=\"flex-start\"\n              marginBlockStart=\"md\"\n              marginBlockEnd=\"lg\"\n              w=\"full\"\n            >\n              <FieldRoot\n                ids={{\n                  control: 'confirm',\n                }}\n                invalid={!isValid}\n              >\n                <FieldLabel\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start !important',\n                    marginBlockEnd: 'xs',\n                    textStyle: 'label-md',\n                  })}\n                >\n                  Type\n                  <Text as=\"strong\" textTransform=\"uppercase\">\n                    {content?.key}\n                  </Text>\n                  to confirm\n                </FieldLabel>\n                <Input name=\"confirm\" onChange={handleChange} type=\"text\" />\n              </FieldRoot>\n            </VStack>\n\n            <HStack gap=\"md\" justify=\"stretch\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                disabled={!isValid}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </PromptModalContext.Provider>\n  )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n  const context = useContext(PromptModalContext)\n  if (context === null) {\n    throw new Error('usePromptModal must be used within a PromptModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/chunk-Y6QQCRQV.js

@@ -1,12 +0,0 @@
-// 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-Y6QQCRQV.js.map

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

@@ -1 +0,0 @@
-{"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-ZR37P4NZ.js

@@ -1,24 +0,0 @@
-// 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-ZR37P4NZ.js.map

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

@@ -1 +0,0 @@
-{"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/Avatar.js

@@ -1,10 +0,0 @@
-"use client";
-import {
-  Avatar
-} from "../chunk-SXLPDPOZ.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Avatar
-};
-//# sourceMappingURL=Avatar.js.map

package/build/modern/components/DatePicker.client.js

@@ -1,33 +0,0 @@
-"use client";
-import {
-  DatePicker,
-  DatePickerCalendar,
-  DatePickerContent,
-  DatePickerDayView,
-  DatePickerInput,
-  DatePickerMonthView,
-  DatePickerTrigger,
-  DatePickerViewControlGroup,
-  DatePickerYearView,
-  RangePickerInput
-} from "../chunk-2KPSUYFL.js";
-import "../chunk-5EWCH7AI.js";
-import "../chunk-APD6IX5R.js";
-import "../chunk-6KZVE4HC.js";
-import "../chunk-7SYJFI5E.js";
-import "../chunk-IQJDVFPP.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  DatePicker,
-  DatePickerCalendar,
-  DatePickerContent,
-  DatePickerDayView,
-  DatePickerInput,
-  DatePickerMonthView,
-  DatePickerTrigger,
-  DatePickerViewControlGroup,
-  DatePickerYearView,
-  RangePickerInput
-};
-//# sourceMappingURL=DatePicker.client.js.map

package/build/modern/components/DatePicker.server.js

@@ -1,21 +0,0 @@
-import {
-  DatePickerContext,
-  DatePickerLabel,
-  DatePickerTable,
-  DatePickerTableCell,
-  DatePickerTableCellTrigger,
-  DatePickerTableHeader,
-  DatePickerView,
-  DatePickerViewControl
-} from "../chunk-5EWCH7AI.js";
-export {
-  DatePickerContext,
-  DatePickerLabel,
-  DatePickerTable,
-  DatePickerTableCell,
-  DatePickerTableCellTrigger,
-  DatePickerTableHeader,
-  DatePickerView,
-  DatePickerViewControl
-};
-//# sourceMappingURL=DatePicker.server.js.map

package/build/modern/components/Legend.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  Legend
-} from "../chunk-RBNOEAWJ.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Legend
-};
-//# sourceMappingURL=Legend.js.map

package/build/modern/components/Notification.js

@@ -1,10 +0,0 @@
-"use client";
-import {
-  Notification
-} from "../chunk-RDRD6ACD.js";
-import "../chunk-GITT5645.js";
-import "../chunk-JIZQFTW6.js";
-export {
-  Notification
-};
-//# sourceMappingURL=Notification.js.map

package/build/modern/components/NotificationDescription.js

@@ -1,7 +0,0 @@
-import {
-  NotificationDescription
-} from "../chunk-UXY3KCC3.js";
-export {
-  NotificationDescription
-};
-//# sourceMappingURL=NotificationDescription.js.map

package/build/modern/components/NotificationHeading.js

@@ -1,7 +0,0 @@
-import {
-  NotificationHeading
-} from "../chunk-SLHYBPJ5.js";
-export {
-  NotificationHeading
-};
-//# sourceMappingURL=NotificationHeading.js.map

package/build/modern/components/Table.js

@@ -1,9 +0,0 @@
-import {
-  Table,
-  Tr
-} from "../chunk-B4CVET74.js";
-export {
-  Table,
-  Tr
-};
-//# sourceMappingURL=Table.js.map

package/build/modern/components/Tabs.client.js

@@ -1,18 +0,0 @@
-"use client";
-import {
-  Tab,
-  TabIndicator,
-  TabList,
-  TabPanel,
-  TabsList
-} from "../chunk-N7O6D7BW.js";
-import "../chunk-RZ7NG77U.js";
-import "../chunk-FQLMPEYX.js";
-export {
-  Tab,
-  TabIndicator,
-  TabList,
-  TabPanel,
-  TabsList
-};
-//# sourceMappingURL=Tabs.client.js.map

package/build/modern/components/Tbody.js

@@ -1,7 +0,0 @@
-import {
-  Tbody
-} from "../chunk-ZR37P4NZ.js";
-export {
-  Tbody
-};
-//# sourceMappingURL=Tbody.js.map

package/build/modern/components/Td.js

@@ -1,7 +0,0 @@
-import {
-  Td
-} from "../chunk-3R4TIF2X.js";
-export {
-  Td
-};
-//# sourceMappingURL=Td.js.map

package/build/modern/components/Th.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  Th
-} from "../chunk-SGKHA4EB.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Th
-};
-//# sourceMappingURL=Th.js.map

package/build/modern/components/Thead.js

@@ -1,7 +0,0 @@
-import {
-  Thead
-} from "../chunk-Y6QQCRQV.js";
-export {
-  Thead
-};
-//# sourceMappingURL=Thead.js.map

package/build/modern/context/tabs.js

@@ -1,13 +0,0 @@
-"use client";
-import {
-  Tabs,
-  TabsContext,
-  useTabsContext
-} from "../chunk-RZ7NG77U.js";
-import "../chunk-FQLMPEYX.js";
-export {
-  Tabs,
-  TabsContext,
-  useTabsContext
-};
-//# sourceMappingURL=tabs.js.map

package/build/modern/noExternals.d.ts

@@ -1 +0,0 @@
-export {};

package/src/components/Avatar.tsx

@@ -1,162 +0,0 @@
-'use client'
-
-import { css, cx } from '@cerberus/styled-system/css'
-import { circle } from '@cerberus/styled-system/patterns'
-import {
-  avatar,
-  type AvatarVariantProps,
-} from '@cerberus/styled-system/recipes'
-import type { HtmlHTMLAttributes, ReactNode } from 'react'
-import { Show } from './Show'
-import { useCerberusContext } from '../context/cerberus'
-
-/**
- * This module contains the Avatar component.
- * @module
- */
-
-export type SharedAvatarProps = {
-  /**
-   * An optional icon to show when no src or ariaLabel is provided.
-   */
-  icon?: ReactNode
-  /**
-   * The size of the avatar.
-   */
-  width?: number
-  /**
-   * The size of the avatar.
-   */
-  height?: number
-}
-export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &
-  SharedAvatarProps & {
-    /**
-     * The aria-label for the avatar needed for accessibility.
-     */
-    ariaLabel: string
-    /**
-     * An optional element to replace the image. Recommended for Next.js Image component.
-     */
-    as?: never
-    /**
-     * The source of the image.
-     */
-    src: string
-  }
-export type AvatarAsProps = SharedAvatarProps & {
-  /**
-   * An optional element to replace the image. Recommended for Next.js Image component.
-   */
-  as: ReactNode
-  /**
-   * The aria-label for the avatar needed for accessibility.
-   */
-  ariaLabel?: never
-  /**
-   * The source of the image.
-   */
-  src?: never
-}
-
-export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
-  AvatarVariantProps) &
-  (AvatarImageProps | AvatarAsProps)
-
-/**
- * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.
- * @see https://cerberus.digitalu.design/react/avatar
- * @example
- * ```tsx
- * <Avatar
- *   ariaLabel="Protector Cerberus"
- *   src="https://cerberus.digitalu.design/logo.svg"
- * />
- * ```
- */
-export function Avatar(props: AvatarProps) {
-  const {
-    ariaLabel,
-    as,
-    gradient,
-    size,
-    src,
-    width,
-    height,
-    icon,
-    ...nativeProps
-  } = props
-  const { icons } = useCerberusContext()
-  const { avatar: AvatarIcon } = icons
-  const initials = (ariaLabel || '')
-    .split(' ')
-    .map((word) => word[0])
-    .join('')
-    .slice(0, 2)
-
-  return (
-    <div
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        avatar({ gradient, size }),
-        circle(),
-      )}
-    >
-      <Show
-        when={Boolean(src) || Boolean(as)}
-        fallback={
-          <Show
-            when={Boolean(initials)}
-            fallback={
-              <Show
-                when={Boolean(icon)}
-                fallback={
-                  <AvatarIcon
-                    size={iconSizeMap[size as keyof typeof iconSizeMap]}
-                  />
-                }
-              >
-                {icon}
-              </Show>
-            }
-          >
-            {initials}
-          </Show>
-        }
-      >
-        <Show
-          when={Boolean(as)}
-          fallback={
-            <img
-              alt={props.ariaLabel}
-              className={css({
-                h: 'full',
-                objectFit: 'cover',
-                w: 'full',
-              })}
-              decoding="async"
-              loading="lazy"
-              src={src}
-              height={height}
-              width={width}
-            />
-          }
-        >
-          {as}
-        </Show>
-      </Show>
-    </div>
-  )
-}
-
-const iconSizeMap = {
-  xs: 16,
-  sm: 16,
-  md: 20,
-  lg: 34,
-  xl: 32,
-  '2xl': 32,
-  '3xl': 32,
-  '4xl': 32,
-}