@cerberus-design/react 0.14.2-next-a928afd → 0.14.2-next-0052cda

package/src/config/index.ts

@@ -0,0 +1,28 @@
+import type { SystemConfig } from './types'
+
+/**
+ * Create a system configuration object to be used on the CerberusProvider.
+ * @param options The system configuration options you want to customize.
+ * @returns A CerberusProvider-compatible system configuration object.
+ * @example
+ * ```tsx
+ * const icons = defineIcons({
+ *  accordionIndicator: MyAccordionIndicatorIcon,
+ *  ...
+ * })
+ * const config = makeSystemConfig({
+ *   icons,
+ * })
+ *
+ * // In your app
+ * <CerberusProvider config={config}>
+ *  <App />
+ * </CerberusProvider>
+ * ```
+ */
+export function makeSystemConfig(options: SystemConfig): SystemConfig {
+  return options
+}
+
+export * from './defineIcons'
+export * from './types'

package/src/config/types.ts

@@ -0,0 +1,42 @@
+import type { ElementType } from 'react'
+
+/**
+ * This module contains the types for the Cerberus React configuration.
+ * @module config.types
+ */
+
+export interface SystemConfig {
+  /**
+   * The icons that will be used in Cerberus React components.
+   */
+  icons: Required<DefinedIcons>
+}
+
+export interface DefinedIcons<T extends IconType = IconType> {
+  accordionIndicator: T
+  avatar: T
+  calendar: T
+  calendarPrev: T
+  calendarNext: T
+  checkbox?: T
+  close: T
+  confirmModal: T
+  delete: T
+  promptModal: T
+  waitingFileUploader: T
+  fileUploader?: T
+  indeterminate?: T
+  infoNotification: T
+  successNotification: T
+  warningNotification: T
+  dangerNotification: T
+  invalid: T
+  invalidAlt: T
+  redo: T
+  selectArrow: T
+  toggleChecked: T
+}
+
+// types
+
+export type IconType = ElementType

package/src/context/cerberus.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { createContext, useContext, type PropsWithChildren } from 'react'
+import type { SystemConfig } from '../config'
+
+/**
+ * This  module contains the Cerberus configuration context and helpers.
+ * @module context/cerberus
+ */
+
+type CerberusContextValue = SystemConfig
+
+const CerberusContext = createContext<CerberusContextValue | null>(null)
+
+interface CerberusProviderProps {
+  config: SystemConfig
+}
+
+/**
+ * Cerberus configuration provider.
+ * @param props.config The Cerberus configuration created with
+ * `makeSystemConfig` helper.
+ */
+export function CerberusProvider(
+  props: PropsWithChildren<CerberusProviderProps>,
+) {
+  return (
+    <CerberusContext.Provider value={props.config}>
+      {props.children}
+    </CerberusContext.Provider>
+  )
+}
+
+/**
+ * Returns the Cerberus configuration context.
+ * @returns The Cerberus configuration context.
+ */
+export function useCerberusContext() {
+  const context = useContext(CerberusContext)
+  if (!context) {
+    throw new Error('useCerberus must be used within a CerberusProvider')
+  }
+  return context
+}

package/src/context/confirm-modal.tsx

@@ -15,7 +15,6 @@ import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
 import { css } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
-import { $cerberusIcons } from '../config/defineIcons'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
 import { Show } from '../components/Show'
 import { Modal } from '../components/Modal'
@@ -25,6 +24,7 @@ import { ModalHeading } from '../components/ModalHeading'
 import { ModalDescription } from '../components/ModalDescription'
 import { Avatar } from '../components/Avatar'
 import { HStack, VStack } from '@cerberus/styled-system/jsx'
+import { useCerberusContext } from './cerberus'
 
 /**
  * This module provides a context and hook for the confirm modal.
@@ -120,9 +120,11 @@ export function ConfirmModal(
   const resolveRef = useRef<ShowResult>(null)
   const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)
   const focusTrap = trapFocus(modalRef)
-  const ConfirmIcon = $cerberusIcons.confirmModal
   const kind = content?.kind ?? 'non-destructive'
 
+  const { icons } = useCerberusContext()
+  const { confirmModal: ConfirmIcon } = icons
+
   const palette = useMemo(
     () => (kind === 'destructive' ? 'danger' : 'action'),
     [kind],

package/src/context/cta-modal.tsx

@@ -13,7 +13,6 @@ import {
 } from 'react'
 import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
-import { $cerberusIcons } from '../config/defineIcons'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
 import { Show } from '../components/Show'
 import { Modal } from '../components/Modal'
@@ -22,8 +21,9 @@ import { ModalHeader } from '../components/ModalHeader'
 import { ModalHeading } from '../components/ModalHeading'
 import { ModalDescription } from '../components/ModalDescription'
 import { Avatar } from '../components/Avatar'
-import { HStack } from '@cerberus/styled-system/jsx'
 import { IconButton } from '../components/IconButton'
+import { useCerberusContext } from './cerberus'
+import { HStack } from '@cerberus/styled-system/jsx'
 import { css } from '@cerberus/styled-system/css'
 import { VStack } from '@cerberus/styled-system/jsx'
 
@@ -98,9 +98,10 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
   const { modalRef, show, close } = useModal()
   const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
   const focusTrap = trapFocus(modalRef)
-  const FallbackIcon = $cerberusIcons.confirmModal
   const confirmIcon = content?.icon
-  const { close: CloseIcon } = $cerberusIcons
+
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon, confirmModal: FallbackIcon } = icons
 
   const handleShow = useCallback(
     (options: ShowCTAModalOptions) => {

package/src/context/prompt-modal.tsx

@@ -19,7 +19,6 @@ import { trapFocus } from '../aria-helpers/trap-focus.aria'
 import { Input } from '../components/Input'
 import { Field } from './field'
 import { Label } from '../components/Label'
-import { $cerberusIcons } from '../config/defineIcons'
 import { Show } from '../components/Show'
 import { useModal } from '../hooks/useModal'
 import { Modal } from '../components/Modal'
@@ -27,6 +26,7 @@ import { ModalHeader } from '../components/ModalHeader'
 import { ModalHeading } from '../components/ModalHeading'
 import { ModalDescription } from '../components/ModalDescription'
 import { Avatar } from '../components/Avatar'
+import { useCerberusContext } from './cerberus'
 
 /**
  * This module provides a context and hook for the prompt modal.
@@ -122,7 +122,9 @@ export function PromptModal(
   const [content, setContent] = useState<ShowPromptModalOptions | null>(null)
   const [inputValue, setInputValue] = useState<string>('')
   const focusTrap = trapFocus(modalRef)
-  const PromptIcon = $cerberusIcons.promptModal
+
+  const { icons } = useCerberusContext()
+  const { promptModal: PromptIcon } = icons
 
   const isValid = useMemo(
     () => inputValue === content?.key,

package/src/index.ts

@@ -6,6 +6,7 @@
 // components
 
 export * from './components/Accordion'
+export * from './components/Accordion.client'
 export * from './components/AccordionItemGroup'
 export * from './components/Admonition'
 export * from './components/Avatar'
@@ -56,6 +57,7 @@ export * from './components/Show'
 
 // context
 
+export * from './context/cerberus'
 export * from './context/confirm-modal'
 export * from './context/cta-modal'
 export * from './context/feature-flags'
@@ -81,7 +83,7 @@ export * from './aria-helpers/trap-focus.aria'
 
 // utils
 
-export * from './config/defineIcons'
+export * from './config/index'
 export * from './utils/index'
 
 // shared types

package/build/legacy/config/cerbIcons.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import {\n  Calendar,\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  accordionIndicator?: IconType\n  avatar?: IconType\n  calendar?: IconType\n  calendarPrev?: IconType\n  calendarNext?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  accordionIndicator: ChevronDown,\n  avatar: UserFilled,\n  calendar: Calendar,\n  calendarPrev: ChevronLeft,\n  calendarNext: ChevronRight,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/build/modern/chunk-5OVH3INN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { IconButton } from '../components/IconButton'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: MouseEventHandler<HTMLButtonElement>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport type CTAModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const { modalRef, show, close } = useModal()\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const FallbackIcon = $cerberusIcons.confirmModal\n  const confirmIcon = content?.icon\n  const { close: CloseIcon } = $cerberusIcons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      show()\n    },\n    [show],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      const { onClick } = action || {}\n      onClick?.(event)\n      close()\n    },\n    [content, close],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <span\n            className={css({\n              padding: 'md',\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 'decorator',\n            })}\n          >\n            <IconButton ariaLabel=\"Close modal\" onClick={close}>\n              <CloseIcon />\n            </IconButton>\n          </span>\n\n          <VStack gap=\"xl\" w=\"full\">\n            <ModalHeader>\n              <VStack gap=\"lg\" w=\"full\">\n                <Avatar\n                  ariaLabel=\"\"\n                  gradient=\"charon-light\"\n                  icon={\n                    <Show\n                      when={Boolean(confirmIcon)}\n                      fallback={<FallbackIcon size={24} />}\n                    >\n                      {confirmIcon}\n                    </Show>\n                  }\n                  src=\"\"\n                />\n                <ModalHeading>{content?.heading}</ModalHeading>\n                <ModalDescription>{content?.description}</ModalDescription>\n              </VStack>\n            </ModalHeader>\n\n            <HStack gap=\"md\" w=\"full\">\n              <Show when={Boolean(content?.actions?.length)}>\n                {content?.actions?.map((action, index) => (\n                  <Button\n                    data-index={index}\n                    className={css({\n                      w: '1/2',\n                    })}\n                    key={index}\n                    onClick={handleActionClick}\n                    shape=\"rounded\"\n                    usage=\"outlined\"\n                  >\n                    {action.text}\n                  </Button>\n                ))}\n              </Show>\n            </HStack>\n          </VStack>\n        </Modal>\n      </Portal>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\n\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const { modalRef, show, close } = useModal()\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const ConfirmIcon = $cerberusIcons.confirmModal\n  const kind = content?.kind ?? 'non-destructive'\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      close()\n    },\n    [close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <VStack gap=\"xl\" w=\"full\">\n            <ModalHeader>\n              <div\n                className={hstack({\n                  justify: 'center',\n                  w: 'full',\n                })}\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<ConfirmIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<ConfirmIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </div>\n              <ModalHeading>{content?.heading}</ModalHeading>\n              <ModalDescription>{content?.description}</ModalDescription>\n            </ModalHeader>\n\n            <HStack gap=\"4\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n              <Button\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"cancel\"\n                onClick={handleChoice}\n                usage=\"outlined\"\n                value=\"false\"\n              >\n                {content?.cancelText}\n              </Button>\n            </HStack>\n          </VStack>\n        </Modal>\n      </Portal>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/chunk-BC5SZDYY.js

@@ -1,132 +0,0 @@
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
-import {
-  $cerberusIcons
-} from "./chunk-QMF5ZNDG.js";
-
-// src/components/DatePicker.server.tsx
-import {
-  DatePicker as ArkDP
-} from "@ark-ui/react";
-import { css, cx } from "@cerberus/styled-system/css";
-import { datePicker, iconButton, label } from "@cerberus/styled-system/recipes";
-import { jsx, jsxs } from "react/jsx-runtime";
-var datePickerStyles = datePicker();
-function DatePickerLabel(props) {
-  const { className, ...arkProps } = props;
-  return /* @__PURE__ */ jsx(
-    ArkDP.Label,
-    {
-      ...arkProps,
-      className: cx(
-        className,
-        label({
-          size: "sm"
-        })
-      )
-    }
-  );
-}
-function DatePickerTrigger(props) {
-  const { calendar: CalendarIcon } = $cerberusIcons;
-  return /* @__PURE__ */ jsx(
-    ArkDP.Trigger,
-    {
-      ...props,
-      className: cx(
-        props.className,
-        iconButton({
-          size: "sm",
-          usage: "ghost"
-        }),
-        datePickerStyles.trigger
-      ),
-      children: /* @__PURE__ */ jsx(CalendarIcon, {})
-    }
-  );
-}
-function DatePickerViewControl(props) {
-  return /* @__PURE__ */ jsx(
-    ArkDP.Control,
-    {
-      ...props,
-      className: cx(props.className, datePickerStyles.viewControl)
-    }
-  );
-}
-function DatePickerViewControlGroup(props) {
-  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons;
-  return /* @__PURE__ */ jsxs(DatePickerViewControl, { ...props, children: [
-    /* @__PURE__ */ jsx(ArkDP.PrevTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ jsx(PrevIcon, {}) }) }),
-    /* @__PURE__ */ jsx(ArkDP.ViewTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: css({
-          h: "2rem",
-          paddingInline: "md"
-        }),
-        shape: "rounded",
-        size: "sm",
-        usage: "ghost",
-        children: /* @__PURE__ */ jsx(ArkDP.RangeText, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsx(ArkDP.NextTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ jsx(NextIcon, {}) }) })
-  ] });
-}
-function DatePickerTable(props) {
-  return /* @__PURE__ */ jsx(
-    ArkDP.Table,
-    {
-      ...props,
-      className: cx(props.className, datePickerStyles.table)
-    }
-  );
-}
-function DatePickerTableHeader(props) {
-  return /* @__PURE__ */ jsx(
-    ArkDP.TableHeader,
-    {
-      ...props,
-      className: cx(props.className, datePickerStyles.tableHeader)
-    }
-  );
-}
-function DatePickerTableCell(props) {
-  return /* @__PURE__ */ jsx(
-    ArkDP.TableCell,
-    {
-      ...props,
-      className: cx(props.className, datePickerStyles.tableCell)
-    }
-  );
-}
-function DatePickerTableCellTrigger(props) {
-  return /* @__PURE__ */ jsx(
-    ArkDP.TableCellTrigger,
-    {
-      ...props,
-      className: cx(props.className, datePickerStyles.tableCellTrigger)
-    }
-  );
-}
-var DatePickerView = ArkDP.View;
-var DatePickerContext = ArkDP.Context;
-
-export {
-  DatePickerLabel,
-  DatePickerTrigger,
-  DatePickerViewControl,
-  DatePickerViewControlGroup,
-  DatePickerTable,
-  DatePickerTableHeader,
-  DatePickerTableCell,
-  DatePickerTableCellTrigger,
-  DatePickerView,
-  DatePickerContext
-};
-//# sourceMappingURL=chunk-BC5SZDYY.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/DatePicker.server.tsx"],"sourcesContent":["import {\n  DatePicker as ArkDP,\n  type DatePickerLabelProps,\n  type DatePickerTableCellProps,\n  type DatePickerTableCellTriggerProps,\n  type DatePickerTableHeaderProps,\n  type DatePickerTableProps,\n  type DatePickerTriggerProps,\n  type DatePickerViewControlProps,\n} from '@ark-ui/react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { datePicker, iconButton, label } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { IconButton } from './IconButton'\nimport { Button } from './Button'\n\n/**\n * This module contains the DatePicker server family components.\n * @module DatePicker\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The label component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerLabel>\n *   <DatePickerLabel.Label>...</DatePickerLabel.Label>\n * </DatePickerLabel>\n * ```\n */\nexport function DatePickerLabel(props: DatePickerLabelProps) {\n  const { className, ...arkProps } = props\n  return (\n    <ArkDP.Label\n      {...arkProps}\n      className={cx(\n        className,\n        label({\n          size: 'sm',\n        }),\n      )}\n    />\n  )\n}\n\n/**\n * The trigger component for the DatePicker which opens the calendar.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTrigger />\n * ```\n */\nexport function DatePickerTrigger(props: DatePickerTriggerProps) {\n  const { calendar: CalendarIcon } = $cerberusIcons\n  return (\n    <ArkDP.Trigger\n      {...props}\n      className={cx(\n        props.className,\n        iconButton({\n          size: 'sm',\n          usage: 'ghost',\n        }),\n        datePickerStyles.trigger,\n      )}\n    >\n      <CalendarIcon />\n    </ArkDP.Trigger>\n  )\n}\n\n/**\n * The control component for the DatePicker which wraps the triggers to switch\n * between calendar views.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControl>\n *   <PrevTrigger />\n *   <ViewTrigger />\n *   <NextTrigger />\n * </DatePickerViewControl>\n * ```\n */\nexport function DatePickerViewControl(props: DatePickerViewControlProps) {\n  return (\n    <ArkDP.Control\n      {...props}\n      className={cx(props.className, datePickerStyles.viewControl)}\n    />\n  )\n}\n\n/**\n * An abstraction of the DatePicker control that contains the prev, view, and\n * next triggers which control the calendar output.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControlGroup />\n * ```\n */\nexport function DatePickerViewControlGroup(props: DatePickerViewControlProps) {\n  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons\n  return (\n    <DatePickerViewControl {...props}>\n      <ArkDP.PrevTrigger asChild>\n        <IconButton ariaLabel=\"Previous\" size=\"sm\">\n          <PrevIcon />\n        </IconButton>\n      </ArkDP.PrevTrigger>\n\n      <ArkDP.ViewTrigger asChild>\n        <Button\n          className={css({\n            h: '2rem',\n            paddingInline: 'md',\n          })}\n          shape=\"rounded\"\n          size=\"sm\"\n          usage=\"ghost\"\n        >\n          <ArkDP.RangeText />\n        </Button>\n      </ArkDP.ViewTrigger>\n\n      <ArkDP.NextTrigger asChild>\n        <IconButton ariaLabel=\"Next\" size=\"sm\">\n          <NextIcon />\n        </IconButton>\n      </ArkDP.NextTrigger>\n    </DatePickerViewControl>\n  )\n}\n\n/**\n * The table component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTable />\n * ```\n */\nexport function DatePickerTable(props: DatePickerTableProps) {\n  return (\n    <ArkDP.Table\n      {...props}\n      className={cx(props.className, datePickerStyles.table)}\n    />\n  )\n}\n\n/**\n * The header component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableHeader />\n * ```\n */\nexport function DatePickerTableHeader(props: DatePickerTableHeaderProps) {\n  return (\n    <ArkDP.TableHeader\n      {...props}\n      className={cx(props.className, datePickerStyles.tableHeader)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCell(props: DatePickerTableCellProps) {\n  return (\n    <ArkDP.TableCell\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCell)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCellTrigger(\n  props: DatePickerTableCellTriggerProps,\n) {\n  return (\n    <ArkDP.TableCellTrigger\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCellTrigger)}\n    />\n  )\n}\n\n/**\n * The view container which wraps the control and content components.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerView />\n * ```\n */\nexport const DatePickerView = ArkDP.View\n\n/**\n * The context component for the DatePicker which provides the DatePicker state.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerContext />\n * ```\n */\nexport const DatePickerContext = ArkDP.Context\n"],"mappings":";;;;;;;;;;;AAAA;AAAA,EACE,cAAc;AAAA,OAQT;AACP,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,YAAY,aAAa;AA0B1C,cAyEA,YAzEA;AAfJ,IAAM,mBAAmB,WAAW;AAY7B,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,EAAE,WAAW,GAAG,SAAS,IAAI;AACnC,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,MAAM;AAAA,UACJ,MAAM;AAAA,QACR,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,EAAE,UAAU,aAAa,IAAI;AACnC,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,UACT,MAAM;AAAA,UACN,OAAO;AAAA,QACT,CAAC;AAAA,QACD,iBAAiB;AAAA,MACnB;AAAA,MAEA,8BAAC,gBAAa;AAAA;AAAA,EAChB;AAEJ;AAeO,SAAS,sBAAsB,OAAmC;AACvE,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,WAAW;AAAA;AAAA,EAC7D;AAEJ;AAWO,SAAS,2BAA2B,OAAmC;AAC5E,QAAM,EAAE,cAAc,UAAU,cAAc,SAAS,IAAI;AAC3D,SACE,qBAAC,yBAAuB,GAAG,OACzB;AAAA,wBAAC,MAAM,aAAN,EAAkB,SAAO,MACxB,8BAAC,cAAW,WAAU,YAAW,MAAK,MACpC,8BAAC,YAAS,GACZ,GACF;AAAA,IAEA,oBAAC,MAAM,aAAN,EAAkB,SAAO,MACxB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,IAAI;AAAA,UACb,GAAG;AAAA,UACH,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,8BAAC,MAAM,WAAN,EAAgB;AAAA;AAAA,IACnB,GACF;AAAA,IAEA,oBAAC,MAAM,aAAN,EAAkB,SAAO,MACxB,8BAAC,cAAW,WAAU,QAAO,MAAK,MAChC,8BAAC,YAAS,GACZ,GACF;AAAA,KACF;AAEJ;AAUO,SAAS,gBAAgB,OAA6B;AAC3D,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,KAAK;AAAA;AAAA,EACvD;AAEJ;AAUO,SAAS,sBAAsB,OAAmC;AACvE,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,WAAW;AAAA;AAAA,EAC7D;AAEJ;AAUO,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,SAAS;AAAA;AAAA,EAC3D;AAEJ;AAUO,SAAS,2BACd,OACA;AACA,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,gBAAgB;AAAA;AAAA,EAClE;AAEJ;AAUO,IAAM,iBAAiB,MAAM;AAU7B,IAAM,oBAAoB,MAAM;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FileUploader.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Avatar } from './Avatar'\n\nexport interface FileUploaderProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * The optional heading to display in the FileUploader component.\n   */\n  heading?: string\n  /**\n   * The name of the file input element.\n   */\n  name: string\n  /**\n   * Disable the FileUploader component. Good for single-use file uploads.\n   */\n  disabled?: boolean\n}\n\n/**\n * A component that allows the user to upload files.\n * @see https://cerberus.digitalu.design/react/file-uploader\n */\nexport function FileUploader(props: FileUploaderProps) {\n  const styles = fileUploader()\n  const { waitingFileUploader: Icon } = $cerberusIcons\n\n  return (\n    <div\n      {...(props.disabled ? { 'aria-disabled': true } : {})}\n      className={cx(\n        vstack({\n          justify: 'center',\n        }),\n        styles.container,\n      )}\n    >\n      <div className={styles.icon}>\n        <Avatar\n          gradient=\"charon-light\"\n          ariaLabel=\"\"\n          icon={<Icon />}\n          size=\"md\"\n          src=\"\"\n        />\n      </div>\n\n      <label\n        className={cx(\n          vstack({\n            justify: 'center',\n          }),\n          styles.label,\n        )}\n        htmlFor={props.name}\n      >\n        <Show when={Boolean(props.heading)}>\n          <p className={styles.heading}>{props.heading}</p>\n        </Show>\n        Import {props.accept?.replace(',', ', ')} files\n        <p className={styles.description}>Click to select files</p>\n        <input\n          {...props}\n          className={cx(props.className, styles.input)}\n          type=\"file\"\n        />\n      </label>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AAGvB,SAAS,oBAAoB;AA0Cb,cAMV,YANU;AAlBT,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,aAAa;AAC5B,QAAM,EAAE,qBAAqB,KAAK,IAAI;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,MAAM,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAAA,MACnD,WAAW;AAAA,QACT,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,OAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,WAAU;AAAA,YACV,MAAM,oBAAC,QAAK;AAAA,YACZ,MAAK;AAAA,YACL,KAAI;AAAA;AAAA,QACN,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,cACD,OAAO;AAAA,YACT;AAAA,YACA,SAAS,MAAM;AAAA,YAEf;AAAA,kCAAC,QAAK,MAAM,QAAQ,MAAM,OAAO,GAC/B,8BAAC,OAAE,WAAW,OAAO,SAAU,gBAAM,SAAQ,GAC/C;AAAA,cAAO;AAAA,cACC,MAAM,QAAQ,QAAQ,KAAK,IAAI;AAAA,cAAE;AAAA,cACzC,oBAAC,OAAE,WAAW,OAAO,aAAa,mCAAqB;AAAA,cACvD;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,WAAW,GAAG,MAAM,WAAW,OAAO,KAAK;AAAA,kBAC3C,MAAK;AAAA;AAAA,cACP;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-CRII2HNX.js

@@ -1,55 +0,0 @@
-import {
-  CheckmarkIcon,
-  IndeterminateIcon
-} from "./chunk-E3PAEB7Y.js";
-import {
-  AnimatingUploadIcon
-} from "./chunk-HVKM54BA.js";
-
-// src/config/cerbIcons.ts
-import {
-  Calendar,
-  Checkmark,
-  CheckmarkOutline,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Close,
-  CloudUpload,
-  Information,
-  Restart,
-  TrashCan,
-  UserFilled,
-  Warning,
-  WarningAlt,
-  WarningFilled
-} from "@cerberus/icons";
-var defaultIcons = {
-  accordionIndicator: ChevronDown,
-  avatar: UserFilled,
-  calendar: Calendar,
-  calendarPrev: ChevronLeft,
-  calendarNext: ChevronRight,
-  checkbox: CheckmarkIcon,
-  close: Close,
-  confirmModal: Information,
-  delete: TrashCan,
-  promptModal: Information,
-  waitingFileUploader: CloudUpload,
-  fileUploader: AnimatingUploadIcon,
-  indeterminate: IndeterminateIcon,
-  infoNotification: Information,
-  successNotification: CheckmarkOutline,
-  warningNotification: WarningAlt,
-  dangerNotification: WarningFilled,
-  invalid: WarningFilled,
-  invalidAlt: Warning,
-  redo: Restart,
-  selectArrow: ChevronDown,
-  toggleChecked: Checkmark
-};
-
-export {
-  defaultIcons
-};
-//# sourceMappingURL=chunk-CRII2HNX.js.map

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

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

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FileStatus.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useMemo,\n  type HTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport {\n  fileStatus,\n  type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Field } from '../context/field'\nimport { FieldMessage } from './FieldMessage'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * A unique identifier for the file status. Required for accessibility.\n   */\n  id: string\n  /**\n   * The name of the file.\n   */\n  file: string\n  /**\n   * The percentage of the file that has been processed.\n   */\n  now: ProgressBarProps['now']\n  /**\n   * The status of the file.\n   */\n  status: processStatus\n  /**\n   * The action to perform on the file when a user clicks the\n   * button located at the end of the status card.\n   * @param status - The status of the file.\n   * @param e - The event object.\n   * @example\n   * ```tsx\n   * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n   * ```\n   * @default () => {}\n   */\n  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n  TODO = 'todo',\n  PROCESSING = 'processing',\n  DONE = 'done',\n  ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n  const { file, now, status, onClick, ...nativeProps } = props\n  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n  const palette = useMemo(() => getPalette(status), [status])\n  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n  const styles = useMemo(() => {\n    switch (status) {\n      case processStatus.TODO:\n        return fileStatus({ status: 'todo' })\n      case processStatus.PROCESSING:\n        return fileStatus({ status: 'processing' })\n      case processStatus.DONE:\n        return fileStatus({ status: 'done' })\n      case processStatus.ERROR:\n        return fileStatus({ status: 'error' })\n      default:\n        return fileStatus()\n    }\n  }, [status])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const actionStatus = getStatusActionLabel(\n        status,\n      ).toLocaleLowerCase() as FileStatusActions\n      onClick(actionStatus, e)\n    },\n    [onClick],\n  )\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(nativeProps.className, styles.root, hstack())}\n    >\n      <Avatar\n        ariaLabel=\"\"\n        gradient={modalIconPalette}\n        icon={<MatchFileStatusIcon size={24} status={status} />}\n        src=\"\"\n      />\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0.12rem',\n          w: 'full',\n        })}\n      >\n        <small\n          className={css({\n            color: 'page.text.initial',\n            textStyle: 'label-sm',\n          })}\n        >\n          {file}\n        </small>\n        <ProgressBar\n          id={props.id}\n          label=\"File upload status\"\n          now={now}\n          size=\"sm\"\n        />\n        <Field invalid={modalIconPalette === 'hades-dark'}>\n          <FieldMessage\n            className={css({\n              color: 'page.text.100',\n            })}\n            id={`help:${file}`}\n          >\n            <MatchFileStatusText status={status} now={now} />\n          </FieldMessage>\n        </Field>\n      </div>\n\n      <IconButton\n        ariaLabel={actionLabel}\n        onClick={handleClick}\n        palette={palette}\n        size=\"sm\"\n      >\n        <MatchStatusAction status={status} />\n      </IconButton>\n    </div>\n  )\n}\n\ninterface FileStatusElProps {\n  status: FileStatusProps['status']\n  size?: 16 | 20 | 24 | 32\n  now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n  const {\n    waitingFileUploader: TodoIcon,\n    fileUploader: FileUploaderIcon,\n    invalidAlt: InvalidIcon,\n    successNotification: DoneIcon,\n  } = $cerberusIcons\n\n  switch (props.status) {\n    case processStatus.TODO:\n      return <TodoIcon size={props.size} />\n    case processStatus.PROCESSING:\n      return <FileUploaderIcon size={props.size} />\n    case processStatus.DONE:\n      return <DoneIcon size={props.size} />\n    case processStatus.ERROR:\n      return <InvalidIcon size={props.size} />\n    default:\n      throw new Error('Unknown status')\n  }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n  switch (props.status) {\n    case processStatus.TODO:\n      return 'Waiting to upload'\n    case processStatus.PROCESSING:\n      return `${props.now}% Complete`\n    case processStatus.DONE:\n      return 'File uploaded successfully'\n    case processStatus.ERROR:\n      return 'There was an error uploading the file'\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <CloseIcon />\n    case processStatus.ERROR:\n      return <RedoIcon />\n    case processStatus.DONE:\n      return <TrashIcon />\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'Cancel'\n    case processStatus.ERROR:\n      return 'Retry'\n    case processStatus.DONE:\n      return 'Delete'\n    default:\n      return ''\n  }\n}\n\nfunction getPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'danger'\n    case processStatus.ERROR:\n      return 'action'\n    case processStatus.DONE:\n      return 'danger'\n    default:\n      return 'action'\n  }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'charon-light'\n    case processStatus.ERROR:\n      return 'hades-dark'\n    case processStatus.DONE:\n      return 'thanatos-light'\n    default:\n      return 'charon-light'\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,KAAK,UAAU;AACxB,SAAS,QAAQ,cAAc;AAyHjB,cAIR,YAJQ;AArDP,IAAW,gBAAX,kBAAWA,mBAAX;AACL,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,gBAAa;AACb,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,WAAQ;AAJQ,SAAAA;AAAA,GAAA;AAeX,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,MAAM,KAAK,QAAQ,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,cAAc,QAAQ,MAAM,qBAAqB,MAAM,GAAG,CAAC,MAAM,CAAC;AACxE,QAAM,UAAU,QAAQ,MAAM,WAAW,MAAM,GAAG,CAAC,MAAM,CAAC;AAC1D,QAAM,mBAAmB,QAAQ,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAC5E,QAAM,SAAS,QAAQ,MAAM;AAC3B,YAAQ,QAAQ;AAAA,MACd,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,OAAO,CAAC;AAAA,MACtC,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,aAAa,CAAC;AAAA,MAC5C,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,OAAO,CAAC;AAAA,MACtC,KAAK;AACH,eAAO,WAAW,EAAE,QAAQ,QAAQ,CAAC;AAAA,MACvC;AACE,eAAO,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,YAAM,eAAe;AAAA,QACnB;AAAA,MACF,EAAE,kBAAkB;AACpB,cAAQ,cAAc,CAAC;AAAA,IACzB;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,MAAM,OAAO,CAAC;AAAA,MAE1D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,UAAU;AAAA,YACV,MAAM,oBAAC,uBAAoB,MAAM,IAAI,QAAgB;AAAA,YACrD,KAAI;AAAA;AAAA,QACN;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,GAAG;AAAA,YACL,CAAC;AAAA,YAED;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,IAAI;AAAA,oBACb,OAAO;AAAA,oBACP,WAAW;AAAA,kBACb,CAAC;AAAA,kBAEA;AAAA;AAAA,cACH;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAI,MAAM;AAAA,kBACV,OAAM;AAAA,kBACN;AAAA,kBACA,MAAK;AAAA;AAAA,cACP;AAAA,cACA,oBAAC,SAAM,SAAS,qBAAqB,cACnC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,IAAI;AAAA,oBACb,OAAO;AAAA,kBACT,CAAC;AAAA,kBACD,IAAI,QAAQ,IAAI;AAAA,kBAEhB,8BAAC,uBAAoB,QAAgB,KAAU;AAAA;AAAA,cACjD,GACF;AAAA;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,SAAS;AAAA,YACT;AAAA,YACA,MAAK;AAAA,YAEL,8BAAC,qBAAkB,QAAgB;AAAA;AAAA,QACrC;AAAA;AAAA;AAAA,EACF;AAEJ;AAQA,SAAS,oBAAoB,OAA0B;AACrD,QAAM;AAAA,IACJ,qBAAqB;AAAA,IACrB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,qBAAqB;AAAA,EACvB,IAAI;AAEJ,UAAQ,MAAM,QAAQ;AAAA,IACpB,KAAK;AACH,aAAO,oBAAC,YAAS,MAAM,MAAM,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,oBAAC,oBAAiB,MAAM,MAAM,MAAM;AAAA,IAC7C,KAAK;AACH,aAAO,oBAAC,YAAS,MAAM,MAAM,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,oBAAC,eAAY,MAAM,MAAM,MAAM;AAAA,IACxC;AACE,YAAM,IAAI,MAAM,gBAAgB;AAAA,EACpC;AACF;AAEA,SAAS,oBAAoB,OAA0B;AACrD,UAAQ,MAAM,QAAQ;AAAA,IACpB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO,GAAG,MAAM,GAAG;AAAA,IACrB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,YAAM,IAAI,MAAM,gBAAgB;AAAA,EACpC;AACF;AAEA,SAAS,kBAAkB,OAA0B;AACnD,QAAM,EAAE,OAAO,WAAW,MAAM,UAAU,QAAQ,UAAU,IAAI;AAChE,UAAQ,MAAM,QAAQ;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,oBAAC,aAAU;AAAA,IACpB,KAAK;AACH,aAAO,oBAAC,YAAS;AAAA,IACnB,KAAK;AACH,aAAO,oBAAC,aAAU;AAAA,IACpB;AACE,YAAM,IAAI,MAAM,gBAAgB;AAAA,EACpC;AACF;AAEA,SAAS,qBAAqB,QAAuB;AACnD,UAAQ,QAAQ;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,WAAW,QAAuB;AACzC,UAAQ,QAAQ;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,oBAAoB,QAAuB;AAClD,UAAQ,QAAQ;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;","names":["processStatus"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";AAkBM,SAaI,KAbJ;AATC,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAgB;AAAA,gBAChB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,aAAY;AAAA,oBACZ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,OAAM;AAAA,oBACN,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,GAAE;AAAA,gBACF,GAAE;AAAA,gBACF,SAAQ;AAAA,gBAER;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAa;AAAA,oBACb,SAAQ;AAAA,oBACR,QAAO;AAAA,oBAEP;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAK;AAAA,wBACL,eAAc;AAAA,wBACd,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,aAAY;AAAA;AAAA,oBACb;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[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  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n  const { close: CloseIcon } = $cerberusIcons\n\n  return (\n    <dialog\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <CloseIcon />\n      </button>\n    </dialog>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAiBE,cAuCL,YAvCK;AART,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAW,MAAM,WAAW;AAKlC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AA8BO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/DatePicker.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n  DatePicker as ArkDP,\n  type DatePickerContentProps,\n  type DatePickerInputProps,\n  type DatePickerRootProps,\n  type DatePickerViewProps,\n  // type DateValue,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\n// import { useCallback } from 'react'\nimport { datePicker } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport {\n  DatePickerTrigger,\n  DatePickerView,\n  DatePickerContext,\n  DatePickerViewControlGroup,\n  DatePickerTable,\n  DatePickerTableHeader,\n  DatePickerTableCellTrigger,\n  DatePickerTableCell,\n} from './DatePicker.server'\n// import { formatISOToMilitary } from '../hooks/useDate'\n\n/**\n * This module contains the DatePicker client family components.\n * @module DatePicker:client\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The main context provider for the DatePicker family components.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePicker(props: DatePickerRootProps) {\n  const states = useFieldContext()\n\n  // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112\n\n  // There is a bug with the Root component that causes random date selection\n  // onBlur after the first selection if the format prop is used.\n  // const handleFormat = useCallback((value: DateValue) => {\n  //   return formatISOToMilitary(value.toString())\n  // }, [])\n\n  return (\n    <ArkDP.Root\n      {...props}\n      {...states}\n      positioning={{\n        placement: 'bottom-start',\n      }}\n    />\n  )\n}\n\n/**\n * The input component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n  const { invalid, ...fieldStates } = useFieldContext()\n  return (\n    <ArkDP.Control className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n      />\n    </ArkDP.Control>\n  )\n}\n\n/**\n * The input component for the DatePicker that uses ranges.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\" selection=\"range\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <RangePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function RangePickerInput(props: DatePickerInputProps) {\n  const { invalid, ...fieldStates } = useFieldContext()\n  return (\n    <ArkDP.Control data-range className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={0}\n      />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\n        data-range-end-input\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={1}\n      />\n    </ArkDP.Control>\n  )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(props: DatePickerContentProps) {\n  const { children, ...contentProps } = props\n  return (\n    <Portal>\n      <ArkDP.Positioner className={datePickerStyles.positioner}>\n        <ArkDP.Content\n          {...contentProps}\n          className={cx(contentProps.className, datePickerStyles.content)}\n        >\n          {children}\n        </ArkDP.Content>\n      </ArkDP.Positioner>\n    </Portal>\n  )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n  function isToday(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const formatted = today.toISOString().split('T')[0]\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return formatted === arkDate\n  }\n\n  function isPastDay(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return new Date(arkDate) < today\n  }\n\n  function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n    if (isToday(date)) return 'today'\n    if (isPastDay(date)) return 'past'\n    return 'future'\n  }\n\n  return (\n    <DatePickerView {...props} view=\"day\">\n      <DatePickerContext>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableHead>\n                <ArkDP.TableRow>\n                  {datePicker.weekDays.map((weekDay, id) => (\n                    <DatePickerTableHeader key={id}>\n                      {weekDay.narrow}\n                    </DatePickerTableHeader>\n                  ))}\n                </ArkDP.TableRow>\n              </ArkDP.TableHead>\n\n              <ArkDP.TableBody>\n                {datePicker.weeks.map((week, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {week.map((day, id) => (\n                      <DatePickerTableCell key={id} value={day}>\n                        <DatePickerTableCellTrigger\n                          data-date={getDayValue(day)}\n                        >\n                          {day.day}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </DatePickerContext>\n    </DatePickerView>\n  )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"month\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker\n                  .getMonthsGrid({ columns: 4, format: 'short' })\n                  .map((months, id) => (\n                    <ArkDP.TableRow key={id}>\n                      {months.map((month, id) => (\n                        <DatePickerTableCell key={id} value={month.value}>\n                          <DatePickerTableCellTrigger>\n                            {month.label}\n                          </DatePickerTableCellTrigger>\n                        </DatePickerTableCell>\n                      ))}\n                    </ArkDP.TableRow>\n                  ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"year\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {years.map((year, id) => (\n                      <DatePickerTableCell key={id} value={year.value}>\n                        <DatePickerTableCellTrigger>\n                          {year.label}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar() {\n  return (\n    <DatePickerContent>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n"],"mappings":"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","names":["datePicker","id"]}