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

package/build/legacy/context/notification-center.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/NotificationHeading.tsx","../../../src/components/NotificationDescription.tsx","../../../src/components/Notification.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/context/cerberus.tsx","../../../src/components/Portal.tsx","../../../src/components/button/button.tsx","../../../src/context/notification-center/store.ts"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { Button } from '../components/button/button'\nimport {\n  addNotification,\n  clearNotificationState,\n  notificationCenterReducer,\n  removeNotification,\n  updateNotificationState,\n} from './notification-center/store'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n  /**\n   * The duration in milliseconds to show the notification.\n   * @default 6000\n   */\n  duration?: number\n}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [state, dispatch] = useReducer(notificationCenterReducer, [])\n  const styles = notification()\n\n  const timeout = useMemo<number>(\n    () => props.duration || 6000,\n    [props.duration],\n  )\n\n  const closeNotification = useCallback(\n    (id: string) => {\n      updateNotificationState(dispatch, {\n        id,\n        state: 'closed',\n      })\n      window.setTimeout(() => {\n        removeNotification(dispatch, id)\n      }, 150)\n    },\n    [dispatch],\n  )\n\n  const handleNotify = useCallback(\n    (options: NotifyOptions) => {\n      const id = `${options.palette}:${state.length + 1}`\n      addNotification(dispatch, {\n        ...options,\n        id,\n        state: 'open',\n      })\n\n      window.setTimeout(() => {\n        closeNotification(id)\n      }, timeout)\n    },\n    [dispatch, state, timeout, closeNotification],\n  )\n\n  const handleClose = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      closeNotification(target.value)\n    },\n    [closeNotification],\n  )\n\n  const handleCloseAll = useCallback(() => {\n    state.forEach((item) => {\n      if (item.onClose) item.onClose()\n    })\n    // we don't want to animate out for this one\n    clearNotificationState(dispatch)\n  }, [state, dispatch])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={state.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={state.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {state.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                  open={option.state}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  open: 'open' | 'closed'\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description, open } = props\n  const sharedProps = useMemo(\n    () => ({\n      id: id!,\n      open: true,\n      onClose,\n      'data-state': open,\n    }),\n    [id, open, onClose],\n  )\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification {...sharedProps} palette=\"success\">\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification {...sharedProps} palette=\"warning\">\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification {...sharedProps} palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification {...sharedProps} palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","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 NotificationHeading component.\n * @module\n */\n\nexport type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * Used to render the heading 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 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","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","'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 { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const { icons } = useCerberusContext()\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof icons\n  const Icon = icons[key]\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\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <dialog\n      {...nativeProps}\n      data-placement=\"left\"\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","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","import type { Dispatch } from 'react'\nimport type {\n  AddNotifyAction,\n  ClearNotifyAction,\n  NotificationsStore,\n  RemoveNotifyAction,\n  UpdateNotifyAction,\n} from './types'\n\n/**\n * This module contains the reducer store and actions for the notification\n * center.\n * @module notification-center/store\n */\n\n/**\n * The reducer for the notification center.\n * @param state An array of notifications.\n * @param action An action to take on the notifications.\n * @returns The new state of the notifications.\n */\nexport function notificationCenterReducer(\n  state: NotificationsStore,\n  action:\n    | AddNotifyAction\n    | RemoveNotifyAction\n    | UpdateNotifyAction\n    | ClearNotifyAction,\n): NotificationsStore {\n  switch (action.type) {\n    case 'ADD_NOTIFICATION':\n      return [...state, action.payload]\n    case 'REMOVE_NOTIFICATION':\n      return state.filter((n) => n.id !== action.payload.id)\n    case 'UPDATE_NOTIFICATION':\n      return state.map((n) =>\n        n.id === action.payload.id ? { ...n, ...action.payload } : n,\n      )\n    case 'CLEAR_NOTIFICATIONS':\n      return []\n    default:\n      return state\n  }\n}\n\n/**\n * Adds a notification to the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function addNotification(\n  dispatch: Dispatch<AddNotifyAction>,\n  options: AddNotifyAction['payload'],\n) {\n  dispatch({ type: 'ADD_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Removes a notification from the notification center.\n * @param dispatch The dispatch function.\n * @param id The id of the notification to remove.\n */\nexport function removeNotification(\n  dispatch: Dispatch<RemoveNotifyAction>,\n  id: RemoveNotifyAction['payload']['id'],\n) {\n  dispatch({ type: 'REMOVE_NOTIFICATION', payload: { id } })\n}\n\n/**\n * Updates a notification in the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function updateNotificationState(\n  dispatch: Dispatch<UpdateNotifyAction>,\n  options: UpdateNotifyAction['payload'],\n) {\n  dispatch({ type: 'UPDATE_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Clears the notification state.\n * @param dispatch The dispatch function.\n */\nexport function clearNotificationState(dispatch: Dispatch<ClearNotifyAction>) {\n  dispatch({ type: 'CLEAR_NOTIFICATIONS' })\n}\n"],"mappings":"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","names":["import_react","import_patterns","import_recipes","import_css","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_react","ArkPortal","import_react","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/deprecated/NotificationHeading.tsx","../../../src/components/deprecated/NotificationDescription.tsx","../../../src/components/deprecated/Notification.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/context/cerberus.tsx","../../../src/components/Portal.tsx","../../../src/components/button/button.tsx","../../../src/context/notification-center/store.ts"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/deprecated/NotificationHeading'\nimport { NotificationDescription } from '../components/deprecated/NotificationDescription'\nimport { Notification } from '../components/deprecated/Notification'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { Button } from '../components/button/button'\nimport {\n  addNotification,\n  clearNotificationState,\n  notificationCenterReducer,\n  removeNotification,\n  updateNotificationState,\n} from './notification-center/store'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n  /**\n   * The duration in milliseconds to show the notification.\n   * @default 6000\n   */\n  duration?: number\n}\n\n/**\n * @deprecated\n */\nexport function NotificationCenter_deprecated(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [state, dispatch] = useReducer(notificationCenterReducer, [])\n  const styles = notification()\n\n  const timeout = useMemo<number>(\n    () => props.duration || 6000,\n    [props.duration],\n  )\n\n  const closeNotification = useCallback(\n    (id: string) => {\n      updateNotificationState(dispatch, {\n        id,\n        state: 'closed',\n      })\n      window.setTimeout(() => {\n        removeNotification(dispatch, id)\n      }, 150)\n    },\n    [dispatch],\n  )\n\n  const handleNotify = useCallback(\n    (options: NotifyOptions) => {\n      const id = `${options.palette}:${state.length + 1}`\n      addNotification(dispatch, {\n        ...options,\n        id,\n        state: 'open',\n      })\n\n      window.setTimeout(() => {\n        closeNotification(id)\n      }, timeout)\n    },\n    [dispatch, state, timeout, closeNotification],\n  )\n\n  const handleClose = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      closeNotification(target.value)\n    },\n    [closeNotification],\n  )\n\n  const handleCloseAll = useCallback(() => {\n    state.forEach((item) => {\n      if (item.onClose) item.onClose()\n    })\n    // we don't want to animate out for this one\n    clearNotificationState(dispatch)\n  }, [state, dispatch])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={state.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={state.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {state.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                  open={option.state}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  open: 'open' | 'closed'\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description, open } = props\n  const sharedProps = useMemo(\n    () => ({\n      id: id!,\n      open: true,\n      onClose,\n      'data-state': open,\n    }),\n    [id, open, onClose],\n  )\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification {...sharedProps} palette=\"success\">\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification {...sharedProps} palette=\"warning\">\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification {...sharedProps} palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification {...sharedProps} palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\nexport function useNotificationCenter_deprecated(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","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 NotificationHeading component.\n * @module\n */\n\nexport type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * @deprecated use `NotificationParts` instead\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","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 * @deprecated use `NotificationParts` instead\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","'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 { trapFocus } from '../../aria-helpers/trap-focus.aria'\nimport { useCerberusContext } from '../../context/cerberus'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const { icons } = useCerberusContext()\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof icons\n  const Icon = icons[key]\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 * @deprecated use `NotificationParts` instead\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <dialog\n      {...nativeProps}\n      data-placement=\"left\"\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","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","import type { Dispatch } from 'react'\nimport type {\n  AddNotifyAction,\n  ClearNotifyAction,\n  NotificationsStore,\n  RemoveNotifyAction,\n  UpdateNotifyAction,\n} from './types'\n\n/**\n * This module contains the reducer store and actions for the notification\n * center.\n * @module notification-center/store\n */\n\n/**\n * The reducer for the notification center.\n * @param state An array of notifications.\n * @param action An action to take on the notifications.\n * @returns The new state of the notifications.\n */\nexport function notificationCenterReducer(\n  state: NotificationsStore,\n  action:\n    | AddNotifyAction\n    | RemoveNotifyAction\n    | UpdateNotifyAction\n    | ClearNotifyAction,\n): NotificationsStore {\n  switch (action.type) {\n    case 'ADD_NOTIFICATION':\n      return [...state, action.payload]\n    case 'REMOVE_NOTIFICATION':\n      return state.filter((n) => n.id !== action.payload.id)\n    case 'UPDATE_NOTIFICATION':\n      return state.map((n) =>\n        n.id === action.payload.id ? { ...n, ...action.payload } : n,\n      )\n    case 'CLEAR_NOTIFICATIONS':\n      return []\n    default:\n      return state\n  }\n}\n\n/**\n * Adds a notification to the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function addNotification(\n  dispatch: Dispatch<AddNotifyAction>,\n  options: AddNotifyAction['payload'],\n) {\n  dispatch({ type: 'ADD_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Removes a notification from the notification center.\n * @param dispatch The dispatch function.\n * @param id The id of the notification to remove.\n */\nexport function removeNotification(\n  dispatch: Dispatch<RemoveNotifyAction>,\n  id: RemoveNotifyAction['payload']['id'],\n) {\n  dispatch({ type: 'REMOVE_NOTIFICATION', payload: { id } })\n}\n\n/**\n * Updates a notification in the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function updateNotificationState(\n  dispatch: Dispatch<UpdateNotifyAction>,\n  options: UpdateNotifyAction['payload'],\n) {\n  dispatch({ type: 'UPDATE_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Clears the notification state.\n * @param dispatch The dispatch function.\n */\nexport function clearNotificationState(dispatch: Dispatch<ClearNotifyAction>) {\n  dispatch({ type: 'CLEAR_NOTIFICATIONS' })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBASO;AACP,IAAAC,mBAAkC;AAClC,IAAAC,kBAA6B;AAC7B,IAAAC,cAAmB;;;ACZnB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACtCA,iBAAmB;AACnB,qBAGO;AAmBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AACvC,SACE,4CAAC,OAAE,eAAW,eAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;;;ACzBA,IAAAC,cAAmB;AACnB,IAAAC,kBAGO;AAoBH,IAAAC,sBAAA;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,8BAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;;;AC3BA,IAAAC,cAAmB;AACnB,sBAA+B;AAC/B,IAAAC,kBAGO;AACP,IAAAC,gBAKO;;;ACXA,SAAS,UACd,UACyC;AAJ3C;AAKE,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,MACtB,cAAS,YAAT,mBAAkB,iBAAiB,uBAAsB,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;;;AC1BA,IAAAC,gBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,6BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AFZS,IAAAC,sBAAA;AATT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,UAAW,MAAM,WAAW;AAKlC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,MAAM,GAAG;AACtB,SAAO,6CAAC,QAAK;AACf;AAkBO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,UAAM,sBAA0B,IAAI;AAE1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,aAAS,8BAAa,EAAE,QAAQ,CAAC;AAEvC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,kBAAe;AAAA,MACf,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,wBAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,qDAAC,UAAK,WAAW,OAAO,MACtB,uDAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,wBAAO;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,uDAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;;;AGnGA,IAAAC,gBAGO;AA2BA,IAAM,SAAS,cAAAC;;;AC5BtB,qBAAuC;AACvC,IAAAC,gBAKO;AACP,IAAAC,cAAmB;AACnB,IAAAC,kBAGO;AACP,iBAAoB;AAgCd,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,mBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,wBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;;;ACxCO,SAAS,0BACd,OACA,QAKoB;AACpB,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,CAAC,GAAG,OAAO,OAAO,OAAO;AAAA,IAClC,KAAK;AACH,aAAO,MAAM,OAAO,CAAC,MAAM,EAAE,OAAO,OAAO,QAAQ,EAAE;AAAA,IACvD,KAAK;AACH,aAAO,MAAM;AAAA,QAAI,CAAC,MAChB,EAAE,OAAO,OAAO,QAAQ,KAAK,EAAE,GAAG,GAAG,GAAG,OAAO,QAAQ,IAAI;AAAA,MAC7D;AAAA,IACF,KAAK;AACH,aAAO,CAAC;AAAA,IACV;AACE,aAAO;AAAA,EACX;AACF;AAOO,SAAS,gBACd,UACA,SACA;AACA,WAAS,EAAE,MAAM,oBAAoB,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;AAChE;AAOO,SAAS,mBACd,UACA,IACA;AACA,WAAS,EAAE,MAAM,uBAAuB,SAAS,EAAE,GAAG,EAAE,CAAC;AAC3D;AAOO,SAAS,wBACd,UACA,SACA;AACA,WAAS,EAAE,MAAM,uBAAuB,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;AACnE;AAMO,SAAS,uBAAuB,UAAuC;AAC5E,WAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1C;;;AT4DU,IAAAC,sBAAA;AArFV,IAAM,2BAAuB,6BAAyC,IAAI;AAanE,SAAS,8BACd,OACA;AACA,QAAM,CAAC,OAAO,QAAQ,QAAI,0BAAW,2BAA2B,CAAC,CAAC;AAClE,QAAM,aAAS,8BAAa;AAE5B,QAAM,cAAU;AAAA,IACd,MAAM,MAAM,YAAY;AAAA,IACxB,CAAC,MAAM,QAAQ;AAAA,EACjB;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,OAAe;AACd,8BAAwB,UAAU;AAAA,QAChC;AAAA,QACA,OAAO;AAAA,MACT,CAAC;AACD,aAAO,WAAW,MAAM;AACtB,2BAAmB,UAAU,EAAE;AAAA,MACjC,GAAG,GAAG;AAAA,IACR;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,YAA2B;AAC1B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,MAAM,SAAS,CAAC;AACjD,sBAAgB,UAAU;AAAA,QACxB,GAAG;AAAA,QACH;AAAA,QACA,OAAO;AAAA,MACT,CAAC;AAED,aAAO,WAAW,MAAM;AACtB,0BAAkB,EAAE;AAAA,MACtB,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,OAAO,SAAS,iBAAiB;AAAA,EAC9C;AAEA,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,wBAAkB,OAAO,KAAK;AAAA,IAChC;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,qBAAiB,2BAAY,MAAM;AACvC,UAAM,QAAQ,CAAC,SAAS;AACtB,UAAI,KAAK,QAAS,MAAK,QAAQ;AAAA,IACjC,CAAC;AAED,2BAAuB,QAAQ;AAAA,EACjC,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,8CAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,6CAAC,QAAK,MAAM,MAAM,SAAS,GACzB,uDAAC,UAAO,WAAW,MAAM,WACvB,wDAAC,SAAI,WAAW,OAAO,QACrB;AAAA,mDAAC,QAAK,MAAM,MAAM,UAAU,GAC1B;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,gBAAG,OAAO,cAAU,4BAAU,CAAC;AAAA,UAC1C,SAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACP;AAAA;AAAA,MAED,GACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,yBAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC,gBAAM,IAAI,CAAC,WACV;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,cACJ,SAAS;AAAA,cACT,MAAM,OAAO;AAAA;AAAA,YAHR,OAAO;AAAA,UAId,CACD;AAAA;AAAA,MACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAQA,SAAS,kBAAkB,OAA+B;AACxD,QAAM,EAAE,SAAS,IAAI,SAAS,SAAS,aAAa,KAAK,IAAI;AAC7D,QAAM,kBAAc;AAAA,IAClB,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,CAAC,IAAI,MAAM,OAAO;AAAA,EACpB;AAEA,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aACE,8CAAC,gBAAc,GAAG,aAAa,SAAQ,WACrC;AAAA,qDAAC,uBAAoB,SAAQ,WAAW,mBAAQ;AAAA,QAChD,6CAAC,2BAAwB,SAAQ,WAC9B,uBACH;AAAA,SACF;AAAA,IAGJ,KAAK;AACH,aACE,8CAAC,gBAAc,GAAG,aAAa,SAAQ,WACrC;AAAA,qDAAC,uBAAoB,SAAQ,WAAW,mBAAQ;AAAA,QAChD,6CAAC,2BAAwB,SAAQ,WAC9B,uBACH;AAAA,SACF;AAAA,IAGJ,KAAK;AACH,aACE,8CAAC,gBAAc,GAAG,aAAa,SAAQ,UACrC;AAAA,qDAAC,uBAAoB,SAAQ,UAAU,mBAAQ;AAAA,QAC/C,6CAAC,2BAAwB,SAAQ,UAC9B,uBACH;AAAA,SACF;AAAA,IAGJ,KAAK;AAAA,IACL;AACE,aACE,8CAAC,gBAAc,GAAG,aAAa,SAAQ,QACrC;AAAA,qDAAC,uBAAoB,SAAQ,QAAQ,mBAAQ;AAAA,QAC7C,6CAAC,2BAAwB,SAAQ,QAC9B,uBACH;AAAA,SACF;AAAA,EAEN;AACF;AAEO,SAAS,mCAAuD;AACrE,QAAM,cAAU,0BAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":["import_react","import_patterns","import_recipes","import_css","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_react","ArkPortal","import_react","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/context/notification-center.d.cts

@@ -0,0 +1,5 @@
+export { NotificationCenter_deprecated } from '../_tsup-dts-rollup.cjs';
+export { useNotificationCenter_deprecated } from '../_tsup-dts-rollup.cjs';
+export { NotifyOptions_alias_3 as NotifyOptions } from '../_tsup-dts-rollup.cjs';
+export { NotificationsValue } from '../_tsup-dts-rollup.cjs';
+export { NotificationsProviderProps } from '../_tsup-dts-rollup.cjs';

package/build/legacy/context/prompt-modal.cjs

@@ -29,7 +29,27 @@ var import_react6 = require("react");
 var import_react7 = require("@ark-ui/react");
 var import_jsx3 = require("@cerberus/styled-system/jsx");
 var import_css7 = require("@cerberus/styled-system/css");
-var import_patterns2 = require("@cerberus/styled-system/patterns");
+var import_patterns = require("@cerberus/styled-system/patterns");
+
+// src/utils/index.ts
+function splitProps(props, ...keyGroups) {
+  const result = keyGroups.map(() => ({}));
+  const rest = {};
+  for (const key in props) {
+    let assigned = false;
+    for (let i = 0; i < keyGroups.length; i++) {
+      if (keyGroups[i].includes(key)) {
+        result[i][key] = props[key];
+        assigned = true;
+        break;
+      }
+    }
+    if (!assigned) {
+      rest[key] = props[key];
+    }
+  }
+  return [...result, rest];
+}
 
 // src/components/field/primitives.tsx
 var import_field = require("@ark-ui/react/field");
@@ -154,6 +174,7 @@ function Show(props) {
 }
 
 // src/components/button/button.tsx
+var import_factory = require("@ark-ui/react/factory");
 var import_react4 = require("react");
 var import_css4 = require("@cerberus/styled-system/css");
 var import_recipes4 = require("@cerberus/styled-system/recipes");
@@ -166,7 +187,7 @@ function Button(props) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
   const value = (0, import_react4.useMemo)(() => ({ pending }), [pending]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "button",
+    import_factory.ark.button,
     {
       ...nativeProps,
       disabled: pending || nativeProps.disabled,
@@ -183,126 +204,93 @@ function Button(props) {
   ) });
 }
 
-// src/components/Avatar.tsx
-var import_css5 = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
+// src/components/avatar/primitives.tsx
+var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_css5 = require("@cerberus/styled-system/css");
 var import_jsx_runtime6 = require("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);
+function AvatarRoot(props) {
+  const { gradient, shape, size, ...rootProps } = props;
+  const styles = (0, import_recipes5.avatar)({ gradient, shape, size });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "div",
+    import_avatar.Avatar.Root,
     {
-      ...nativeProps,
-      className: (0, import_css5.cx)(
-        nativeProps.className,
-        (0, import_recipes5.avatar)({ gradient, size }),
-        (0, import_patterns.circle)()
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        Show,
-        {
-          when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Show,
-            {
-              when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                Show,
-                {
-                  when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    AvatarIcon,
-                    {
-                      size: iconSizeMap[size]
-                    }
-                  ),
-                  children: icon
-                }
-              ),
-              children: initials
-            }
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Show,
-            {
-              when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                "img",
-                {
-                  alt: props.ariaLabel,
-                  className: (0, import_css5.css)({
-                    h: "full",
-                    objectFit: "cover",
-                    w: "full"
-                  }),
-                  decoding: "async",
-                  loading: "lazy",
-                  src,
-                  height,
-                  width
-                }
-              ),
-              children: as
-            }
-          )
-        }
-      )
+      ...rootProps,
+      className: (0, import_css5.cx)(styles.root, rootProps.className)
     }
   );
 }
-var iconSizeMap = {
-  xs: 16,
-  sm: 16,
-  md: 20,
-  lg: 34,
-  xl: 32,
-  "2xl": 32,
-  "3xl": 32,
-  "4xl": 32
+function AvatarImage(props) {
+  const styles = (0, import_recipes5.avatar)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css5.cx)(styles.image, props.className) });
+}
+function AvatarFallback(props) {
+  const styles = (0, import_recipes5.avatar)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_avatar.Avatar.Fallback,
+    {
+      ...props,
+      className: (0, import_css5.cx)(styles.fallback, props.className)
+    }
+  );
+}
+
+// src/components/avatar/parts.ts
+var AvatarParts = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
 };
 
+// src/components/avatar/avatar.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Avatar2(props) {
+  const [imgProps, { fallback, children }, rootProps] = splitProps(
+    props,
+    ["alt", "src"],
+    ["fallback", "children"]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Show,
+    {
+      when: Boolean(children),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvatarParts.Fallback, { children: fallback }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvatarParts.Image, { ...imgProps })
+      ] }),
+      children
+    }
+  ) });
+}
+
 // src/components/Text.tsx
 var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
   switch (as) {
     case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H1, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.H1, { ...pandaJSXProps });
     case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H2, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.H2, { ...pandaJSXProps });
     case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H3, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.H3, { ...pandaJSXProps });
     case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H4, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.H4, { ...pandaJSXProps });
     case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H5, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.H5, { ...pandaJSXProps });
     case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H6, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.H6, { ...pandaJSXProps });
     case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Strong, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.Strong, { ...pandaJSXProps });
     case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Em, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.Em, { ...pandaJSXProps });
     case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Small, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.Small, { ...pandaJSXProps });
     case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Span, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.Span, { ...pandaJSXProps });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.P, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.P, { ...pandaJSXProps });
   }
 }
 
@@ -310,13 +298,13 @@ function Text(props) {
 var import_dialog = require("@ark-ui/react/dialog");
 var import_css6 = require("@cerberus/styled-system/css");
 var import_recipes6 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function DialogRoot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog.Dialog.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dialog.Dialog.Root, { ...props });
 }
 function DialogBackdrop(props) {
   const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_dialog.Dialog.Backdrop,
     {
       ...props,
@@ -326,7 +314,7 @@ function DialogBackdrop(props) {
 }
 function DialogPositioner(props) {
   const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_dialog.Dialog.Positioner,
     {
       ...props,
@@ -337,7 +325,7 @@ function DialogPositioner(props) {
 function DialogContent(props) {
   const { size, ...contentProps } = props;
   const styles = (0, import_recipes6.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_dialog.Dialog.Content,
     {
       ...contentProps,
@@ -347,11 +335,11 @@ function DialogContent(props) {
 }
 function DialogHeading(props) {
   const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css6.cx)(styles.title, props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css6.cx)(styles.title, props.className) });
 }
 function DialogDescription(props) {
   const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_dialog.Dialog.Description,
     {
       ...props,
@@ -366,16 +354,16 @@ var import_react5 = require("@ark-ui/react");
 var Portal = import_react5.Portal;
 
 // src/components/dialog/dialog.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Dialog2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogBackdrop, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogContent, { ...props }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogContent, { ...props }) })
   ] });
 }
 
 // src/context/prompt-modal.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react6.createContext)(null);
 function PromptModal(props) {
   const resolveRef = (0, import_react6.useRef)(null);
@@ -425,54 +413,50 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx3.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx3.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           import_jsx3.HStack,
           {
             alignSelf: "center",
             justify: "center",
             paddingBlockEnd: "md",
             w: "full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  Avatar,
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Avatar2,
                   {
-                    ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PromptIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 })
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  Avatar,
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Avatar2,
                   {
-                    ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PromptIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 })
                   }
                 )
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_jsx3.VStack,
         {
           alignItems: "flex-start",
           marginBlockStart: "md",
           marginBlockEnd: "lg",
           w: "full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             FieldRoot,
             {
               ids: {
@@ -480,10 +464,10 @@ function PromptModal(props) {
               },
               invalid: !isValid,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   FieldLabel,
                   {
-                    className: (0, import_patterns2.hstack)({
+                    className: (0, import_patterns.hstack)({
                       gap: "xs",
                       justify: "flex-start !important",
                       marginBlockEnd: "xs",
@@ -491,19 +475,19 @@ function PromptModal(props) {
                     }),
                     children: [
                       "Type",
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
                       "to confirm"
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx3.HStack, { gap: "md", justify: "stretch", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx3.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Button,
           {
             autoFocus: true,
@@ -518,7 +502,7 @@ function PromptModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react7.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react7.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Button,
           {
             className: (0, import_css7.css)({