@cerberus-design/react 0.18.4 → 0.19.0

package/build/legacy/components/notifications/center.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/notifications/center.tsx","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx","../../../../src/components/notifications/primitives.tsx","../../../../src/components/notifications/parts.ts","../../../../src/components/notifications/match-icon.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/notifications/close-trigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createToaster,\n  Toaster,\n  type CreateToasterReturn,\n} from '@ark-ui/react/toast'\nimport { Box } from 'styled-system/jsx'\nimport { Button, type ButtonProps } from '../button/button'\nimport { Show } from '../Show'\nimport { NotificationParts } from './parts'\nimport type { NotifyOptions, UseNotificationCenterReturn } from './types'\nimport { MatchNotificationIcon } from './match-icon'\nimport { ToastCloseTrigger } from './close-trigger'\n\n/**\n * This module contains an abstraction of the Notification parts.\n * @module 'notification/center'\n */\n\nexport const toaster: CreateToasterReturn = createToaster({\n  gap: 16,\n  overlap: true,\n  placement: 'top-end',\n})\n\n/**\n * The NotificationCenter component is an abstraction for the Notification\n * component. It manages displaying all the toasts in the center.\n */\nexport function NotificationCenter() {\n  return (\n    <Toaster toaster={toaster}>\n      {(toast) => (\n        <NotificationParts.Root key={toast.id}>\n          <MatchNotificationIcon\n            type={toast.type as NotifyOptions['palette']}\n          />\n\n          <Box flex=\"1\" paddingBlock=\"sm\">\n            <NotificationParts.Heading>{toast.title}</NotificationParts.Heading>\n            <NotificationParts.Description>\n              {toast.description}\n            </NotificationParts.Description>\n            <Show when={toast.action}>\n              <NotificationParts.ActionTrigger asChild>\n                <Button\n                  palette={toast.type as ButtonProps['palette']}\n                  usage=\"ghost\"\n                  size=\"sm\"\n                >\n                  {toast.action?.label}\n                </Button>\n              </NotificationParts.ActionTrigger>\n            </Show>\n          </Box>\n\n          <ToastCloseTrigger />\n        </NotificationParts.Root>\n      )}\n    </Toaster>\n  )\n}\n\n/**\n * @deprecated use `toaster` instead\n */\nexport function useNotificationCenter(): UseNotificationCenterReturn {\n  function notify(options: NotifyOptions) {\n    toaster.create({\n      title: options.heading,\n      description: options.description,\n      type: options.palette,\n      action: options.action,\n    })\n  }\n  return { ...toaster, notify }\n}\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 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from '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 PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport interface SpinnerProps {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      data-scope=\"spinner\"\n      data-part=\"root\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n","import {\n  Toast,\n  Toaster,\n  type ToastActionTriggerProps,\n  type ToastCloseTriggerProps,\n  type ToasterProps,\n  type ToastRootProps,\n  type ToastTitleProps,\n} from '@ark-ui/react/toast'\nimport { cx } from 'styled-system/css'\nimport { toast } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Notification component.\n * @module 'notification/primitives'\n */\n\nexport function NotificationProvider(props: ToasterProps) {\n  return <Toaster {...props} />\n}\n\n/**\n * The context provider for the Notification component.\n */\nexport function NotificationRoot(props: ToastRootProps) {\n  const styles = toast()\n  return <Toast.Root {...props} className={cx(styles.root, props.className)} />\n}\n\n/**\n * The title heading of the Notification component.\n */\nexport function NotificationHeading(props: ToastTitleProps) {\n  const styles = toast()\n  return (\n    <Toast.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the Notification component.\n */\nexport function NotificationDescription(props: ToastTitleProps) {\n  const styles = toast()\n  return (\n    <Toast.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The close button of the Notification component.\n */\nexport function NotificationCloseTrigger(props: ToastCloseTriggerProps) {\n  const styles = toast()\n  return (\n    <Toast.CloseTrigger\n      {...props}\n      className={cx(styles.closeTrigger, props.className)}\n    />\n  )\n}\n\n/**\n * The action trigger of the Notification component.\n */\nexport function NotificationActionTrigger(props: ToastActionTriggerProps) {\n  const styles = toast()\n  return (\n    <Toast.ActionTrigger\n      {...props}\n      className={cx(styles.actionTrigger, props.className)}\n    />\n  )\n}\n","import type { ElementType } from 'react'\nimport {\n  NotificationActionTrigger,\n  NotificationCloseTrigger,\n  NotificationDescription,\n  NotificationHeading,\n  NotificationRoot,\n} from './primitives'\n\n/**\n * This module contains the parts of the Notification parts.\n * @module 'notification/parts'\n */\n\ninterface NotificationPartsValue {\n  /**\n   * The context provider of the notification.\n   */\n  Root: ElementType\n  /**\n   * The title heading of the notification.\n   */\n  Heading: ElementType\n  /**\n   * The description of the notification.\n   */\n  Description: ElementType\n  /**\n   * The close button of the notification.\n   */\n  CloseTrigger: ElementType\n  /**\n   * The action trigger of the notification.\n   */\n  ActionTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the Notification components. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the NotificationParts object and\n * the entire family of components vs. only what you use.\n */\nexport const NotificationParts: NotificationPartsValue = {\n  Root: NotificationRoot,\n  Heading: NotificationHeading,\n  Description: NotificationDescription,\n  CloseTrigger: NotificationCloseTrigger,\n  ActionTrigger: NotificationActionTrigger,\n}\n","'use client'\n\nimport { toast } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Spinner } from '../Spinner'\nimport type { NotifyOptions } from './types'\nimport { ark } from '@ark-ui/react/factory'\n\n/**\n * This private module contains a component that returns the correct icon for a\n * notification based on the palette. If there is no result, it is assumed to\n * be a 'loading' type.\n * @module 'notification/match-icon'\n */\n\ninterface MatchNotificationIconProps {\n  type?: NotifyOptions['palette']\n}\n\nexport function MatchNotificationIcon(props: MatchNotificationIconProps) {\n  const { icons } = useCerberusContext()\n  const type = props.type || 'info'\n  const styles = toast()\n\n  const key = `${type}Notification` as keyof typeof icons\n  const Icon = icons[key] || ToastLoadingIcon\n\n  return (\n    <ark.div className={styles.icon}>\n      <Icon />\n    </ark.div>\n  )\n}\n\nfunction ToastLoadingIcon() {\n  return <Spinner size=\"1rem\" />\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","'use client'\n\nimport type { ToastCloseTriggerProps } from '@ark-ui/react/toast'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { NotificationParts } from './parts'\n\n/**\n * This private module contains a abstraction of the close trigger primitive.\n * @module 'notification/close-trigger'\n */\n\nexport function ToastCloseTrigger(props: ToastCloseTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <NotificationParts.CloseTrigger {...props}>\n      <CloseIcon />\n    </NotificationParts.CloseTrigger>\n  )\n}\n"],"mappings":"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","names":["import_toast","import_jsx","import_jsx_runtime","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_recipes","import_react","import_jsx_runtime","import_factory","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","toast"]}
+{"version":3,"sources":["../../../../src/components/notifications/center.tsx","../../../../src/components/button/button.tsx","../../../../src/components/show/show.tsx","../../../../src/components/spinner/spinner.tsx","../../../../src/components/button/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/notifications/primitives.tsx","../../../../src/components/notifications/parts.ts","../../../../src/components/notifications/match-icon.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/notifications/close-trigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createToaster,\n  Toaster,\n  type CreateToasterReturn,\n} from '@ark-ui/react/toast'\nimport { Box } from 'styled-system/jsx'\nimport { Button, type ButtonProps } from '../button/button'\nimport { Show } from '../show/index'\nimport { NotificationParts } from './parts'\nimport type { NotifyOptions, UseNotificationCenterReturn } from './types'\nimport { MatchNotificationIcon } from './match-icon'\nimport { ToastCloseTrigger } from './close-trigger'\n\n/**\n * This module contains an abstraction of the Notification parts.\n * @module 'notification/center'\n */\n\nexport const toaster: CreateToasterReturn = createToaster({\n  gap: 16,\n  overlap: true,\n  placement: 'top-end',\n})\n\n/**\n * The NotificationCenter component is an abstraction for the Notification\n * component. It manages displaying all the toasts in the center.\n */\nexport function NotificationCenter() {\n  return (\n    <Toaster toaster={toaster}>\n      {(toast) => (\n        <NotificationParts.Root key={toast.id}>\n          <MatchNotificationIcon\n            type={toast.type as NotifyOptions['palette']}\n          />\n\n          <Box flex=\"1\" paddingBlock=\"sm\">\n            <NotificationParts.Heading>{toast.title}</NotificationParts.Heading>\n            <NotificationParts.Description>\n              {toast.description}\n            </NotificationParts.Description>\n            <Show when={toast.action}>\n              <NotificationParts.ActionTrigger asChild>\n                <Button\n                  palette={toast.type as ButtonProps['palette']}\n                  usage=\"ghost\"\n                  size=\"sm\"\n                >\n                  {toast.action?.label}\n                </Button>\n              </NotificationParts.ActionTrigger>\n            </Show>\n          </Box>\n\n          <ToastCloseTrigger />\n        </NotificationParts.Root>\n      )}\n    </Toaster>\n  )\n}\n\n/**\n * @deprecated use `toaster` instead\n */\nexport function useNotificationCenter(): UseNotificationCenterReturn {\n  function notify(options: NotifyOptions) {\n    toaster.create({\n      title: options.heading,\n      description: options.description,\n      type: options.palette,\n      action: options.action,\n    })\n  }\n  return { ...toaster, notify }\n}\n","'use client'\n\nimport { type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport type { CerberusPrimitiveProps } from '../../system/types'\nimport { Show } from '../show/index'\nimport { Spinner } from '../spinner/index'\nimport { ButtonRoot } from './primitives'\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 = CerberusPrimitiveProps<\n  HTMLArkProps<'button'> &\n    ButtonVariantProps & {\n      pending?: boolean\n    }\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 { pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n  return (\n    <ButtonContext.Provider value={value}>\n      <ButtonRoot {...nativeProps} disabled={pending || nativeProps.disabled} />\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 PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport interface SpinnerProps {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      data-scope=\"spinner\"\n      data-part=\"root\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n","import { ark } from '@ark-ui/react/factory'\nimport { button } from 'styled-system/recipes'\nimport { createCerberusPrimitive } from '../../system/index'\n\n/**\n * This module contains the Button component primitives.\n * @module @cerberus-design/react/components/button/primitives\n */\n\nconst { withRecipe } = createCerberusPrimitive(button)\n\n/**\n * The root element of the Button component.\n */\nexport const ButtonRoot = withRecipe(ark.button)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n","import {\n  Toast,\n  Toaster,\n  type ToastActionTriggerProps,\n  type ToastCloseTriggerProps,\n  type ToastDescriptionProps,\n  type ToasterProps,\n  type ToastRootProps,\n  type ToastTitleProps,\n} from '@ark-ui/react/toast'\nimport { toast } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Notification component.\n * @module 'notification/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(toast)\n\n// Toaster\n\nexport type NotificationProviderProps = ToasterProps\nexport const NotificationProvider = Toaster\n\n// Root\n\nexport type NotificationRootProps = CerberusPrimitiveProps<ToastRootProps>\nexport const NotificationRoot = withSlotRecipe<NotificationRootProps>(\n  Toast.Root,\n  'root',\n)\n\n// Heading\n\nexport type NotificationHeadingProps = CerberusPrimitiveProps<ToastTitleProps>\nexport const NotificationHeading = withSlotRecipe<NotificationHeadingProps>(\n  Toast.Title,\n  'title',\n)\n\n// Description\n\nexport type NotificationDescriptionProps =\n  CerberusPrimitiveProps<ToastDescriptionProps>\nexport const NotificationDescription =\n  withSlotRecipe<NotificationDescriptionProps>(Toast.Description, 'description')\n\n// Close Trigger\n\nexport type NotificationCloseTriggerProps =\n  CerberusPrimitiveProps<ToastCloseTriggerProps>\nexport const NotificationCloseTrigger =\n  withSlotRecipe<NotificationCloseTriggerProps>(\n    Toast.CloseTrigger,\n    'closeTrigger',\n  )\n\n// Action Trigger\n\nexport type NotificationActionTriggerProps =\n  CerberusPrimitiveProps<ToastActionTriggerProps>\nexport const NotificationActionTrigger =\n  withSlotRecipe<NotificationActionTriggerProps>(\n    Toast.ActionTrigger,\n    'actionTrigger',\n  )\n","import type { ElementType } from 'react'\nimport {\n  NotificationActionTrigger,\n  NotificationCloseTrigger,\n  NotificationDescription,\n  NotificationHeading,\n  NotificationRoot,\n} from './primitives'\n\n/**\n * This module contains the parts of the Notification parts.\n * @module 'notification/parts'\n */\n\ninterface NotificationPartsValue {\n  /**\n   * The context provider of the notification.\n   */\n  Root: ElementType\n  /**\n   * The title heading of the notification.\n   */\n  Heading: ElementType\n  /**\n   * The description of the notification.\n   */\n  Description: ElementType\n  /**\n   * The close button of the notification.\n   */\n  CloseTrigger: ElementType\n  /**\n   * The action trigger of the notification.\n   */\n  ActionTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the Notification components. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the NotificationParts object and\n * the entire family of components vs. only what you use.\n */\nexport const NotificationParts: NotificationPartsValue = {\n  Root: NotificationRoot,\n  Heading: NotificationHeading,\n  Description: NotificationDescription,\n  CloseTrigger: NotificationCloseTrigger,\n  ActionTrigger: NotificationActionTrigger,\n}\n","'use client'\n\nimport { ark } from '@ark-ui/react/factory'\nimport { toast } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Spinner } from '../spinner/index'\nimport type { NotifyOptions } from './types'\n\n/**\n * This private module contains a component that returns the correct icon for a\n * notification based on the palette. If there is no result, it is assumed to\n * be a 'loading' type.\n * @module 'notification/match-icon'\n */\n\ninterface MatchNotificationIconProps {\n  type?: NotifyOptions['palette']\n}\n\nexport function MatchNotificationIcon(props: MatchNotificationIconProps) {\n  const { icons } = useCerberusContext()\n  const type = props.type || 'info'\n  const styles = toast()\n\n  const key = `${type}Notification` as keyof typeof icons\n  const Icon = icons[key] || ToastLoadingIcon\n\n  return (\n    <ark.div className={styles.icon}>\n      <Icon />\n    </ark.div>\n  )\n}\n\nfunction ToastLoadingIcon() {\n  return <Spinner size=\"1rem\" />\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","'use client'\n\nimport { useCerberusContext } from '../../context/cerberus'\nimport { NotificationParts } from './parts'\nimport type { NotificationCloseTriggerProps } from './primitives'\n\n/**\n * This private module contains a abstraction of the close trigger primitive.\n * @module 'notification/close-trigger'\n */\n\nexport function ToastCloseTrigger(props: NotificationCloseTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <NotificationParts.CloseTrigger {...props}>\n      <CloseIcon />\n    </NotificationParts.CloseTrigger>\n  )\n}\n"],"mappings":"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","names":["import_toast","import_jsx","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_recipes","import_factory","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","toast"]}

package/build/legacy/components/notifications/close-trigger.cjs

@@ -4,6 +4,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/notifications/close-trigger.tsx
 var close_trigger_exports = {};
@@ -39,48 +41,138 @@ function useCerberusContext() {
 
 // src/components/notifications/primitives.tsx
 var import_toast = require("@ark-ui/react/toast");
-var import_css = require("styled-system/css");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
+var import_css = require("styled-system/css");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function NotificationRoot(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_toast.Toast.Root, { ...props, className: (0, import_css.cx)(styles.root, props.className) });
-}
-function NotificationHeading(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_toast.Toast.Title, { ...props, className: (0, import_css.cx)(styles.title, props.className) });
-}
-function NotificationDescription(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_toast.Toast.Description,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.description, props.className)
-    }
-  );
-}
-function NotificationCloseTrigger(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_toast.Toast.CloseTrigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.closeTrigger, props.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function NotificationActionTrigger(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_toast.Toast.ActionTrigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.actionTrigger, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/notifications/primitives.tsx
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes.toast);
+var NotificationRoot = withSlotRecipe(
+  import_toast.Toast.Root,
+  "root"
+);
+var NotificationHeading = withSlotRecipe(
+  import_toast.Toast.Title,
+  "title"
+);
+var NotificationDescription = withSlotRecipe(import_toast.Toast.Description, "description");
+var NotificationCloseTrigger = withSlotRecipe(
+  import_toast.Toast.CloseTrigger,
+  "closeTrigger"
+);
+var NotificationActionTrigger = withSlotRecipe(
+  import_toast.Toast.ActionTrigger,
+  "actionTrigger"
+);
+
 // src/components/notifications/parts.ts
 var NotificationParts = {
   Root: NotificationRoot,

package/build/legacy/components/notifications/close-trigger.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/notifications/close-trigger.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/notifications/primitives.tsx","../../../../src/components/notifications/parts.ts"],"sourcesContent":["'use client'\n\nimport type { ToastCloseTriggerProps } from '@ark-ui/react/toast'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { NotificationParts } from './parts'\n\n/**\n * This private module contains a abstraction of the close trigger primitive.\n * @module 'notification/close-trigger'\n */\n\nexport function ToastCloseTrigger(props: ToastCloseTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <NotificationParts.CloseTrigger {...props}>\n      <CloseIcon />\n    </NotificationParts.CloseTrigger>\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  Toast,\n  Toaster,\n  type ToastActionTriggerProps,\n  type ToastCloseTriggerProps,\n  type ToasterProps,\n  type ToastRootProps,\n  type ToastTitleProps,\n} from '@ark-ui/react/toast'\nimport { cx } from 'styled-system/css'\nimport { toast } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Notification component.\n * @module 'notification/primitives'\n */\n\nexport function NotificationProvider(props: ToasterProps) {\n  return <Toaster {...props} />\n}\n\n/**\n * The context provider for the Notification component.\n */\nexport function NotificationRoot(props: ToastRootProps) {\n  const styles = toast()\n  return <Toast.Root {...props} className={cx(styles.root, props.className)} />\n}\n\n/**\n * The title heading of the Notification component.\n */\nexport function NotificationHeading(props: ToastTitleProps) {\n  const styles = toast()\n  return (\n    <Toast.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the Notification component.\n */\nexport function NotificationDescription(props: ToastTitleProps) {\n  const styles = toast()\n  return (\n    <Toast.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The close button of the Notification component.\n */\nexport function NotificationCloseTrigger(props: ToastCloseTriggerProps) {\n  const styles = toast()\n  return (\n    <Toast.CloseTrigger\n      {...props}\n      className={cx(styles.closeTrigger, props.className)}\n    />\n  )\n}\n\n/**\n * The action trigger of the Notification component.\n */\nexport function NotificationActionTrigger(props: ToastActionTriggerProps) {\n  const styles = toast()\n  return (\n    <Toast.ActionTrigger\n      {...props}\n      className={cx(styles.actionTrigger, props.className)}\n    />\n  )\n}\n","import type { ElementType } from 'react'\nimport {\n  NotificationActionTrigger,\n  NotificationCloseTrigger,\n  NotificationDescription,\n  NotificationHeading,\n  NotificationRoot,\n} from './primitives'\n\n/**\n * This module contains the parts of the Notification parts.\n * @module 'notification/parts'\n */\n\ninterface NotificationPartsValue {\n  /**\n   * The context provider of the notification.\n   */\n  Root: ElementType\n  /**\n   * The title heading of the notification.\n   */\n  Heading: ElementType\n  /**\n   * The description of the notification.\n   */\n  Description: ElementType\n  /**\n   * The close button of the notification.\n   */\n  CloseTrigger: ElementType\n  /**\n   * The action trigger of the notification.\n   */\n  ActionTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the Notification components. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the NotificationParts object and\n * the entire family of components vs. only what you use.\n */\nexport const NotificationParts: NotificationPartsValue = {\n  Root: NotificationRoot,\n  Heading: NotificationHeading,\n  Description: NotificationDescription,\n  CloseTrigger: NotificationCloseTrigger,\n  ActionTrigger: NotificationActionTrigger,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAkE;AAyB9D;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AC3CA,mBAQO;AACP,iBAAmB;AACnB,qBAAsB;AAQb,IAAAA,sBAAA;AAMF,SAAS,iBAAiB,OAAuB;AACtD,QAAM,aAAS,sBAAM;AACrB,SAAO,6CAAC,mBAAM,MAAN,EAAY,GAAG,OAAO,eAAW,eAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAC7E;AAKO,SAAS,oBAAoB,OAAwB;AAC1D,QAAM,aAAS,sBAAM;AACrB,SACE,6CAAC,mBAAM,OAAN,EAAa,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE1E;AAKO,SAAS,wBAAwB,OAAwB;AAC9D,QAAM,aAAS,sBAAM;AACrB,SACE;AAAA,IAAC,mBAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAa,MAAM,SAAS;AAAA;AAAA,EACnD;AAEJ;AAKO,SAAS,yBAAyB,OAA+B;AACtE,QAAM,aAAS,sBAAM;AACrB,SACE;AAAA,IAAC,mBAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,cAAc,MAAM,SAAS;AAAA;AAAA,EACpD;AAEJ;AAKO,SAAS,0BAA0B,OAAgC;AACxE,QAAM,aAAS,sBAAM;AACrB,SACE;AAAA,IAAC,mBAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,eAAe,MAAM,SAAS;AAAA;AAAA,EACrD;AAEJ;;;AC9BO,IAAM,oBAA4C;AAAA,EACvD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AACjB;;;AHnCM,IAAAC,sBAAA;AANC,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE,6CAAC,kBAAkB,cAAlB,EAAgC,GAAG,OAClC,uDAAC,aAAU,GACb;AAEJ;","names":["import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/notifications/close-trigger.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/notifications/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/notifications/parts.ts"],"sourcesContent":["'use client'\n\nimport { useCerberusContext } from '../../context/cerberus'\nimport { NotificationParts } from './parts'\nimport type { NotificationCloseTriggerProps } from './primitives'\n\n/**\n * This private module contains a abstraction of the close trigger primitive.\n * @module 'notification/close-trigger'\n */\n\nexport function ToastCloseTrigger(props: NotificationCloseTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <NotificationParts.CloseTrigger {...props}>\n      <CloseIcon />\n    </NotificationParts.CloseTrigger>\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  Toast,\n  Toaster,\n  type ToastActionTriggerProps,\n  type ToastCloseTriggerProps,\n  type ToastDescriptionProps,\n  type ToasterProps,\n  type ToastRootProps,\n  type ToastTitleProps,\n} from '@ark-ui/react/toast'\nimport { toast } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Notification component.\n * @module 'notification/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(toast)\n\n// Toaster\n\nexport type NotificationProviderProps = ToasterProps\nexport const NotificationProvider = Toaster\n\n// Root\n\nexport type NotificationRootProps = CerberusPrimitiveProps<ToastRootProps>\nexport const NotificationRoot = withSlotRecipe<NotificationRootProps>(\n  Toast.Root,\n  'root',\n)\n\n// Heading\n\nexport type NotificationHeadingProps = CerberusPrimitiveProps<ToastTitleProps>\nexport const NotificationHeading = withSlotRecipe<NotificationHeadingProps>(\n  Toast.Title,\n  'title',\n)\n\n// Description\n\nexport type NotificationDescriptionProps =\n  CerberusPrimitiveProps<ToastDescriptionProps>\nexport const NotificationDescription =\n  withSlotRecipe<NotificationDescriptionProps>(Toast.Description, 'description')\n\n// Close Trigger\n\nexport type NotificationCloseTriggerProps =\n  CerberusPrimitiveProps<ToastCloseTriggerProps>\nexport const NotificationCloseTrigger =\n  withSlotRecipe<NotificationCloseTriggerProps>(\n    Toast.CloseTrigger,\n    'closeTrigger',\n  )\n\n// Action Trigger\n\nexport type NotificationActionTriggerProps =\n  CerberusPrimitiveProps<ToastActionTriggerProps>\nexport const NotificationActionTrigger =\n  withSlotRecipe<NotificationActionTriggerProps>(\n    Toast.ActionTrigger,\n    'actionTrigger',\n  )\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n","import type { ElementType } from 'react'\nimport {\n  NotificationActionTrigger,\n  NotificationCloseTrigger,\n  NotificationDescription,\n  NotificationHeading,\n  NotificationRoot,\n} from './primitives'\n\n/**\n * This module contains the parts of the Notification parts.\n * @module 'notification/parts'\n */\n\ninterface NotificationPartsValue {\n  /**\n   * The context provider of the notification.\n   */\n  Root: ElementType\n  /**\n   * The title heading of the notification.\n   */\n  Heading: ElementType\n  /**\n   * The description of the notification.\n   */\n  Description: ElementType\n  /**\n   * The close button of the notification.\n   */\n  CloseTrigger: ElementType\n  /**\n   * The action trigger of the notification.\n   */\n  ActionTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the Notification components. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the NotificationParts object and\n * the entire family of components vs. only what you use.\n */\nexport const NotificationParts: NotificationPartsValue = {\n  Root: NotificationRoot,\n  Heading: NotificationHeading,\n  Description: NotificationDescription,\n  CloseTrigger: NotificationCloseTrigger,\n  ActionTrigger: NotificationActionTrigger,\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/notifications/index.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/notifications/index.ts
 var notifications_exports = {};
@@ -35,51 +37,139 @@ module.exports = __toCommonJS(notifications_exports);
 
 // src/components/notifications/primitives.tsx
 var import_toast = require("@ark-ui/react/toast");
-var import_css = require("styled-system/css");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
+var import_css = require("styled-system/css");
 var import_jsx_runtime = require("react/jsx-runtime");
-function NotificationProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toaster, { ...props });
-}
-function NotificationRoot(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Root, { ...props, className: (0, import_css.cx)(styles.root, props.className) });
-}
-function NotificationHeading(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Title, { ...props, className: (0, import_css.cx)(styles.title, props.className) });
-}
-function NotificationDescription(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_toast.Toast.Description,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.description, props.className)
-    }
-  );
-}
-function NotificationCloseTrigger(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_toast.Toast.CloseTrigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.closeTrigger, props.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function NotificationActionTrigger(props) {
-  const styles = (0, import_recipes.toast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_toast.Toast.ActionTrigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.actionTrigger, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/notifications/primitives.tsx
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes.toast);
+var NotificationProvider = import_toast.Toaster;
+var NotificationRoot = withSlotRecipe(
+  import_toast.Toast.Root,
+  "root"
+);
+var NotificationHeading = withSlotRecipe(
+  import_toast.Toast.Title,
+  "title"
+);
+var NotificationDescription = withSlotRecipe(import_toast.Toast.Description, "description");
+var NotificationCloseTrigger = withSlotRecipe(
+  import_toast.Toast.CloseTrigger,
+  "closeTrigger"
+);
+var NotificationActionTrigger = withSlotRecipe(
+  import_toast.Toast.ActionTrigger,
+  "actionTrigger"
+);
+
 // src/components/notifications/parts.ts
 var NotificationParts = {
   Root: NotificationRoot,
@@ -94,13 +184,10 @@ var import_toast2 = require("@ark-ui/react/toast");
 var import_jsx2 = require("styled-system/jsx");
 
 // src/components/button/button.tsx
-var import_factory = require("@ark-ui/react/factory");
 var import_react = require("react");
-var import_css2 = require("styled-system/css");
-var import_recipes2 = require("styled-system/recipes");
 var import_jsx = require("styled-system/jsx");
 
-// src/components/Show.tsx
+// src/components/show/show.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
@@ -113,7 +200,7 @@ function Show(props) {
   return null;
 }
 
-// src/components/Spinner.tsx
+// src/components/spinner/spinner.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Spinner(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -190,33 +277,25 @@ function Spinner(props) {
   );
 }
 
+// src/components/button/primitives.tsx
+var import_factory = require("@ark-ui/react/factory");
+var import_recipes2 = require("styled-system/recipes");
+var { withRecipe } = createCerberusPrimitive(import_recipes2.button);
+var ButtonRoot = withRecipe(import_factory.ark.button);
+
 // src/components/button/button.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ButtonContext = (0, import_react.createContext)({
   pending: false
 });
 function Button(props) {
-  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const { pending = false, ...nativeProps } = props;
   const value = (0, import_react.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_factory.ark.button,
-    {
-      ...nativeProps,
-      disabled: pending || nativeProps.disabled,
-      className: (0, import_css2.cx)(
-        nativeProps.className,
-        (0, import_recipes2.button)({
-          palette,
-          usage,
-          shape,
-          size
-        })
-      )
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
 }
 
 // src/components/notifications/match-icon.tsx
+var import_factory2 = require("@ark-ui/react/factory");
 var import_recipes3 = require("styled-system/recipes");
 
 // src/context/cerberus.tsx
@@ -232,7 +311,6 @@ function useCerberusContext() {
 }
 
 // src/components/notifications/match-icon.tsx
-var import_factory2 = require("@ark-ui/react/factory");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function MatchNotificationIcon(props) {
   const { icons } = useCerberusContext();