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

package/build/modern/chunk-IOLYX3SY.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-IOLYX3SY.js.map

package/build/modern/{chunk-EQPYRZ3X.js → chunk-IP3O6AIC.js}

@@ -7,12 +7,12 @@ import {
   DialogHeading,
   DialogProvider
 } from "./chunk-D7UIWAFO.js";
-import {
-  Avatar
-} from "./chunk-SXLPDPOZ.js";
 import {
   Button
-} from "./chunk-6KZVE4HC.js";
+} from "./chunk-RD2YPFRA.js";
+import {
+  Avatar
+} from "./chunk-N4RPMT6J.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -89,19 +89,15 @@ function ConfirmModal(props) {
                 fallback: /* @__PURE__ */ jsx(
                   Avatar,
                   {
-                    ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
                   }
                 ),
                 children: /* @__PURE__ */ jsx(
                   Avatar,
                   {
-                    ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
                   }
                 )
               }
@@ -157,4 +153,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-EQPYRZ3X.js.map
+//# sourceMappingURL=chunk-IP3O6AIC.js.map

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

@@ -0,0 +1 @@
+{"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 { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/avatar/avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogCloseTrigger,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/dialog'\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 [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const kind = content?.kind ?? 'non-destructive'\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: ConfirmIcon } = icons\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      setOpen(false)\n    },\n    [setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen, setContent],\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      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      gradient=\"charon-light\"\n                      fallback={<ConfirmIcon size={24} />}\n                    />\n                  }\n                >\n                  <Avatar\n                    gradient=\"hades-dark\"\n                    fallback={<ConfirmIcon size={24} />}\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\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              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </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-2BIHLH4V.js → chunk-JAAMD5EH.js}

@@ -1,7 +1,7 @@
 import {
   Button,
   ButtonIcon
-} from "./chunk-6KZVE4HC.js";
+} from "./chunk-RD2YPFRA.js";
 
 // src/components/button/parts.ts
 var ButtonParts = {
@@ -12,4 +12,4 @@ var ButtonParts = {
 export {
   ButtonParts
 };
-//# sourceMappingURL=chunk-2BIHLH4V.js.map
+//# sourceMappingURL=chunk-JAAMD5EH.js.map

package/build/modern/{chunk-OVHCXBBI.js → chunk-JOM5AAVW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-CAZ3EICD.js";
 import {
   SwitchParts
-} from "./chunk-KQQPZJEI.js";
+} from "./chunk-HUN7VQBT.js";
 
 // src/components/switch/switch.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,4 +19,4 @@ function Switch(props) {
 export {
   Switch
 };
-//# sourceMappingURL=chunk-OVHCXBBI.js.map
+//# sourceMappingURL=chunk-JOM5AAVW.js.map

package/build/modern/{chunk-6OJ27QWV.js → chunk-JWF7FK7T.js}

@@ -1,9 +1,9 @@
-import {
-  useCerberusContext
-} from "./chunk-GITT5645.js";
 import {
   AccordionParts
 } from "./chunk-XBDEIBW2.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
 
 // src/components/accordion/item-indicator.tsx
 import { jsx } from "react/jsx-runtime";
@@ -18,4 +18,4 @@ function AccordionChevronItemIndicator(props) {
 export {
   AccordionChevronItemIndicator
 };
-//# sourceMappingURL=chunk-6OJ27QWV.js.map
+//# sourceMappingURL=chunk-JWF7FK7T.js.map

package/build/modern/chunk-K2TZB3I4.js

@@ -0,0 +1,22 @@
+import {
+  DatePickerParts
+} from "./chunk-WVFEJCUN.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+import {
+  IconButton
+} from "./chunk-SRNDDY5D.js";
+
+// src/components/date-picker/trigger.tsx
+import { jsx } from "react/jsx-runtime";
+function DatePickerTrigger(props) {
+  const { icons } = useCerberusContext();
+  const { calendar: CalendarIcon } = icons;
+  return /* @__PURE__ */ jsx(DatePickerParts.Trigger, { ...props, asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Open calendar", size: "sm", usage: "ghost", children: /* @__PURE__ */ jsx(CalendarIcon, {}) }) });
+}
+
+export {
+  DatePickerTrigger
+};
+//# sourceMappingURL=chunk-K2TZB3I4.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/trigger.tsx"],"sourcesContent":["'use client'\n\nimport type { DatePickerTriggerProps } from '@ark-ui/react/date-picker'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../IconButton'\nimport { DatePickerParts } from './parts'\n\n/**\n * This private module contains the DatePicker trigger component.\n * @module DatePickerTrigger\n */\n\n/**\n * An abstraction of the DatePickerTrigger that toggles the calender open.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function DatePickerTrigger(props: DatePickerTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { calendar: CalendarIcon } = icons\n\n  return (\n    <DatePickerParts.Trigger {...props} asChild>\n      <IconButton ariaLabel=\"Open calendar\" size=\"sm\" usage=\"ghost\">\n        <CalendarIcon />\n      </IconButton>\n    </DatePickerParts.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAuBQ;AAPD,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,UAAU,aAAa,IAAI;AAEnC,SACE,oBAAC,gBAAgB,SAAhB,EAAyB,GAAG,OAAO,SAAO,MACzC,8BAAC,cAAW,WAAU,iBAAgB,MAAK,MAAK,OAAM,SACpD,8BAAC,gBAAa,GAChB,GACF;AAEJ;","names":[]}

package/build/modern/chunk-KB52N3HJ.js

@@ -0,0 +1,27 @@
+import {
+  DatePickerTrigger
+} from "./chunk-K2TZB3I4.js";
+import {
+  DatePickerParts
+} from "./chunk-WVFEJCUN.js";
+
+// src/components/date-picker/input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DatePickerInput(props) {
+  return /* @__PURE__ */ jsxs(DatePickerParts.Control, { children: [
+    /* @__PURE__ */ jsx(DatePickerTrigger, {}),
+    /* @__PURE__ */ jsx(
+      DatePickerParts.Input,
+      {
+        ...props,
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11
+      }
+    )
+  ] });
+}
+
+export {
+  DatePickerInput
+};
+//# sourceMappingURL=chunk-KB52N3HJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/input.tsx"],"sourcesContent":["import type { DatePickerInputProps } from '@ark-ui/react/date-picker'\nimport { DatePickerTrigger } from './trigger'\nimport { DatePickerParts } from './parts'\n\n/**\n * This module contains an abstraction of the DatePickerInputEl primitive.\n * @module 'date-picker/input'\n */\n\n/**\n * An abstraction of the DatePicker input that wraps the input and the\n * triggers to open the DatePicker and clear the value.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n  return (\n    <DatePickerParts.Control>\n      <DatePickerTrigger />\n      <DatePickerParts.Input\n        {...props}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n      />\n    </DatePickerParts.Control>\n  )\n}\n"],"mappings":";;;;;;;;AAgBI,SACE,KADF;AAFG,SAAS,gBAAgB,OAA6B;AAC3D,SACE,qBAAC,gBAAgB,SAAhB,EACC;AAAA,wBAAC,qBAAkB;AAAA,IACnB;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,aAAa,MAAM,eAAe;AAAA,QAClC,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-WZJ5UQNM.js → chunk-KJMCUYWV.js}

@@ -1,4 +1,5 @@
 // src/components/ProgressBar.tsx
+import { ark } from "@ark-ui/react/factory";
 import { cx } from "@cerberus/styled-system/css";
 import {
   progressBar
@@ -12,7 +13,7 @@ function ProgressBar(props) {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    ark.div,
     {
       ...nativeProps,
       "aria-label": label,
@@ -22,7 +23,7 @@ function ProgressBar(props) {
       className: cx(nativeProps.className, styles.root),
       role: "progressbar",
       children: /* @__PURE__ */ jsx(
-        "div",
+        ark.div,
         {
           ...indeterminate && { "data-indeterminate": true },
           "data-complete": nowClamped === 100,
@@ -37,4 +38,4 @@ function ProgressBar(props) {
 export {
   ProgressBar
 };
-//# sourceMappingURL=chunk-WZJ5UQNM.js.map
+//# sourceMappingURL=chunk-KJMCUYWV.js.map

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

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

package/build/modern/chunk-KZDEDAIK.js

@@ -0,0 +1,21 @@
+import {
+  NotificationActionTrigger,
+  NotificationCloseTrigger,
+  NotificationDescription,
+  NotificationHeading,
+  NotificationRoot
+} from "./chunk-7JHQVQPS.js";
+
+// src/components/notifications/parts.ts
+var NotificationParts = {
+  Root: NotificationRoot,
+  Heading: NotificationHeading,
+  Description: NotificationDescription,
+  CloseTrigger: NotificationCloseTrigger,
+  ActionTrigger: NotificationActionTrigger
+};
+
+export {
+  NotificationParts
+};
+//# sourceMappingURL=chunk-KZDEDAIK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/notifications/parts.ts"],"sourcesContent":["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":";;;;;;;;;AA8CO,IAAM,oBAA4C;AAAA,EACvD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AACjB;","names":[]}

package/build/modern/chunk-LLZE2RBB.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/admonition/match-avatar.tsx"],"sourcesContent":["'use client'\n\nimport type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'\nimport { useRef, type ReactNode } from 'react'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Avatar } from '../avatar/avatar'\n\n/**\n * This module provides a component for creating the admonition indicator.\n * @module 'admonition/match-avatar'\n */\n\ninterface AvatarRefProps {\n  page: ReactNode\n  info: ReactNode\n  success: ReactNode\n  warning: ReactNode\n  danger: ReactNode\n}\n\ntype MatchAvatarProps = AdmonitionVariantProps\n\nexport function MatchAvatar(props: MatchAvatarProps) {\n  const { palette = 'page' } = props\n\n  const { icons } = useCerberusContext()\n  const {\n    infoNotification: InfoIcon,\n    successNotification: SuccessIcon,\n    warningNotification: WarningIcon,\n    dangerNotification: DangerIcon,\n  } = icons\n\n  // cache the el since the result is static and the component is client side\n  const elRef = useRef<AvatarRefProps>({\n    page: <Avatar gradient=\"charon-light\" fallback={<InfoIcon />} size=\"sm\" />,\n    info: (\n      <Avatar gradient=\"amphiaraus-dark\" fallback={<InfoIcon />} size=\"sm\" />\n    ),\n    success: (\n      <Avatar gradient=\"thanatos-dark\" fallback={<SuccessIcon />} size=\"sm\" />\n    ),\n    warning: (\n      <Avatar gradient=\"asphodel-light\" fallback={<WarningIcon />} size=\"sm\" />\n    ),\n    danger: (\n      <Avatar gradient=\"hades-light\" fallback={<DangerIcon />} size=\"sm\" />\n    ),\n  })\n\n  return <>{elRef.current[palette]}</>\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,cAA8B;AAgCa,SAe3C,UAf2C;AAb7C,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,UAAU,OAAO,IAAI;AAE7B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,EACtB,IAAI;AAGJ,QAAM,QAAQ,OAAuB;AAAA,IACnC,MAAM,oBAAC,UAAO,UAAS,gBAAe,UAAU,oBAAC,YAAS,GAAI,MAAK,MAAK;AAAA,IACxE,MACE,oBAAC,UAAO,UAAS,mBAAkB,UAAU,oBAAC,YAAS,GAAI,MAAK,MAAK;AAAA,IAEvE,SACE,oBAAC,UAAO,UAAS,iBAAgB,UAAU,oBAAC,eAAY,GAAI,MAAK,MAAK;AAAA,IAExE,SACE,oBAAC,UAAO,UAAS,kBAAiB,UAAU,oBAAC,eAAY,GAAI,MAAK,MAAK;AAAA,IAEzE,QACE,oBAAC,UAAO,UAAS,eAAc,UAAU,oBAAC,cAAW,GAAI,MAAK,MAAK;AAAA,EAEvE,CAAC;AAED,SAAO,gCAAG,gBAAM,QAAQ,OAAO,GAAE;AACnC;","names":[]}

package/build/modern/chunk-M6WOFFOA.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-M6WOFFOA.js.map

package/build/modern/{chunk-5SNLQZYP.js → chunk-M7T3MBFB.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3PAEB7Y.js";
 import {
   AnimatingUploadIcon
-} from "./chunk-IW3LIRDG.js";
+} from "./chunk-VV2G62UD.js";
 
 // src/config/defineIcons.ts
 var defaultIcons = {
@@ -22,4 +22,4 @@ function defineIcons(icons) {
 export {
   defineIcons
 };
-//# sourceMappingURL=chunk-5SNLQZYP.js.map
+//# sourceMappingURL=chunk-M7T3MBFB.js.map

package/build/modern/{chunk-XYDJ5TRW.js → chunk-MPS6BAJ2.js}

@@ -6,6 +6,12 @@ import {
   DialogHeading,
   DialogProvider
 } from "./chunk-D7UIWAFO.js";
+import {
+  Button
+} from "./chunk-RD2YPFRA.js";
+import {
+  Text
+} from "./chunk-RU5LOXWI.js";
 import {
   FieldLabel,
   FieldRoot,
@@ -13,13 +19,7 @@ import {
 } from "./chunk-VSTOSLFS.js";
 import {
   Avatar
-} from "./chunk-SXLPDPOZ.js";
-import {
-  Button
-} from "./chunk-6KZVE4HC.js";
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
+} from "./chunk-N4RPMT6J.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -107,19 +107,15 @@ function PromptModal(props) {
                 fallback: /* @__PURE__ */ jsx(
                   Avatar,
                   {
-                    ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
                   }
                 ),
                 children: /* @__PURE__ */ jsx(
                   Avatar,
                   {
-                    ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
                   }
                 )
               }
@@ -211,4 +207,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-XYDJ5TRW.js.map
+//# sourceMappingURL=chunk-MPS6BAJ2.js.map

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

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

package/build/modern/chunk-MV2AU6UV.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-MV2AU6UV.js.map

package/build/modern/chunk-N4RPMT6J.js

@@ -0,0 +1,35 @@
+import {
+  AvatarParts
+} from "./chunk-SYPAA5YF.js";
+import {
+  splitProps
+} from "./chunk-BL7G3577.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
+// src/components/avatar/avatar.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Avatar(props) {
+  const [imgProps, { fallback, children }, rootProps] = splitProps(
+    props,
+    ["alt", "src"],
+    ["fallback", "children"]
+  );
+  return /* @__PURE__ */ jsx(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: Boolean(children),
+      fallback: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AvatarParts.Fallback, { children: fallback }),
+        /* @__PURE__ */ jsx(AvatarParts.Image, { ...imgProps })
+      ] }),
+      children
+    }
+  ) });
+}
+
+export {
+  Avatar
+};
+//# sourceMappingURL=chunk-N4RPMT6J.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/avatar/avatar.tsx"],"sourcesContent":["import type { AvatarRootProps } from '@ark-ui/react/avatar'\nimport type { AvatarVariantProps } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils'\nimport { Show } from '../Show'\nimport { AvatarParts } from './parts'\n\n/**\n * This module provides an abstraction of the Avatar primitives.\n * @module 'avatar'\n */\n\nexport interface AvatarWithoutImage\n  extends AvatarRootProps,\n    AvatarVariantProps {\n  alt?: never\n  src?: never\n  fallback?: ReactNode\n}\n\nexport interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {\n  alt: string\n  src: string\n  fallback?: ReactNode\n}\n\n/**\n * Avatar component is an abstraction of the primitives that displays a\n * avatar or it's fallback when the image fails to load.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)\n */\nexport function Avatar(props: AvatarWithoutImage | AvatarWithImage) {\n  const [imgProps, { fallback, children }, rootProps] = splitProps(\n    props,\n    ['alt', 'src'],\n    ['fallback', 'children'],\n  )\n\n  return (\n    <AvatarParts.Root {...rootProps}>\n      <Show\n        when={Boolean(children)}\n        fallback={\n          <>\n            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>\n            <AvatarParts.Image {...imgProps} />\n          </>\n        }\n      >\n        {children}\n      </Show>\n    </AvatarParts.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA4CU,mBACE,KADF;AAZH,SAAS,OAAO,OAA6C;AAClE,QAAM,CAAC,UAAU,EAAE,UAAU,SAAS,GAAG,SAAS,IAAI;AAAA,IACpD;AAAA,IACA,CAAC,OAAO,KAAK;AAAA,IACb,CAAC,YAAY,UAAU;AAAA,EACzB;AAEA,SACE,oBAAC,YAAY,MAAZ,EAAkB,GAAG,WACpB;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,QAAQ;AAAA,MACtB,UACE,iCACE;AAAA,4BAAC,YAAY,UAAZ,EAAsB,oBAAS;AAAA,QAChC,oBAAC,YAAY,OAAZ,EAAmB,GAAG,UAAU;AAAA,SACnC;AAAA,MAGD;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-UNRQAXLJ.js → chunk-NHBL7NNP.js}

@@ -1,12 +1,12 @@
 import {
   CheckboxIcon
 } from "./chunk-EL4MX2PG.js";
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
 import {
   CheckboxParts
 } from "./chunk-KWZ3CEG6.js";
+import {
+  Text
+} from "./chunk-RU5LOXWI.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -28,4 +28,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-UNRQAXLJ.js.map
+//# sourceMappingURL=chunk-NHBL7NNP.js.map

package/build/modern/chunk-NOXZZHDH.js

@@ -0,0 +1,27 @@
+import {
+  DatePickerYearView
+} from "./chunk-QG4NDPST.js";
+import {
+  DatePickerContent
+} from "./chunk-BJJ4XAVO.js";
+import {
+  DatePickerDayView
+} from "./chunk-6MNFE6U6.js";
+import {
+  DatePickerMonthView
+} from "./chunk-E7FVTKUT.js";
+
+// src/components/date-picker/calendar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DatePickerCalendar(props) {
+  return /* @__PURE__ */ jsxs(DatePickerContent, { withModal: props.withModal, children: [
+    /* @__PURE__ */ jsx(DatePickerDayView, {}),
+    /* @__PURE__ */ jsx(DatePickerMonthView, {}),
+    /* @__PURE__ */ jsx(DatePickerYearView, {})
+  ] });
+}
+
+export {
+  DatePickerCalendar
+};
+//# sourceMappingURL=chunk-NOXZZHDH.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/calendar.tsx"],"sourcesContent":["import { DatePickerContent } from './content'\nimport { DatePickerDayView } from './day-view'\nimport { DatePickerMonthView } from './month-view'\nimport { DatePickerYearView } from './year-view'\n\n/**\n * This module contains an abstraction of the DatePicker component.\n * @module 'date-picker/calendar'\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(props: { withModal?: boolean }) {\n  return (\n    <DatePickerContent withModal={props.withModal}>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BI,SACE,KADF;AAFG,SAAS,mBAAmB,OAAgC;AACjE,SACE,qBAAC,qBAAkB,WAAW,MAAM,WAClC;AAAA,wBAAC,qBAAkB;AAAA,IACnB,oBAAC,uBAAoB;AAAA,IACrB,oBAAC,sBAAmB;AAAA,KACtB;AAEJ;","names":[]}

package/build/modern/{chunk-MISIUX63.js → chunk-QD4TL3L6.js}

@@ -1,16 +1,17 @@
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  IconButton
+} from "./chunk-SRNDDY5D.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
 
 // src/components/Tag.tsx
+import { ark } from "@ark-ui/react/factory";
 import { css, cx } from "@cerberus/styled-system/css";
-import {
-  iconButton,
-  tag
-} from "@cerberus/styled-system/recipes";
+import { tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
@@ -21,7 +22,7 @@ function Tag(props) {
   const { icons } = useCerberusContext();
   const { close: Close } = icons;
   return /* @__PURE__ */ jsxs(
-    "span",
+    ark.span,
     {
       ...nativeProps,
       className: cx(
@@ -37,15 +38,13 @@ function Tag(props) {
       children: [
         props.children,
         /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(
-          "button",
+          IconButton,
           {
-            "aria-label": "Close",
-            className: iconButton({
-              palette: "action",
-              usage: "filled",
-              size: "sm"
-            }),
+            ariaLabel: "Close",
             onClick,
+            palette: "action",
+            usage: "filled",
+            size: "sm",
             children: /* @__PURE__ */ jsx(Close, {})
           }
         ) })
@@ -62,4 +61,4 @@ var closableCss = css({
 export {
   Tag
 };
-//# sourceMappingURL=chunk-MISIUX63.js.map
+//# sourceMappingURL=chunk-QD4TL3L6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { MouseEventHandler, PropsWithChildren } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { tag, type TagVariantProps } from '@cerberus/styled-system/recipes'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Show } from './Show'\nimport { IconButton } from './IconButton'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type StaticTagProps = HTMLArkProps<'span'> &\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 = HTMLArkProps<'span'> & {\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>) {\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 { icons } = useCerberusContext()\n  const { close: Close } = icons\n\n  return (\n    <ark.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        <IconButton\n          ariaLabel=\"Close\"\n          onClick={onClick}\n          palette=\"action\"\n          usage=\"filled\"\n          size=\"sm\"\n        >\n          <Close />\n        </IconButton>\n      </Show>\n    </ark.span>\n  )\n}\n\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,WAA8B;AAEvC,SAAS,KAAK,UAAU;AACxB,SAAS,WAAiC;AAoEtC,SAuBM,KAvBN;AAVG,SAAS,IAAI,OAAoC;AACtD,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,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,MAAM,IAAI;AAEzB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;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,WAAU;AAAA,YACV;AAAA,YACA,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YAEL,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-QG4NDPST.js

@@ -0,0 +1,20 @@
+import {
+  DatePickerViewControlGroup
+} from "./chunk-BD4UH5GS.js";
+import {
+  DatePickerParts
+} from "./chunk-WVFEJCUN.js";
+
+// src/components/date-picker/year-view.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DatePickerYearView(props) {
+  return /* @__PURE__ */ jsx(DatePickerParts.View, { ...props, view: "year", children: /* @__PURE__ */ jsx(DatePickerParts.Context, { children: (datePicker) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ jsx(DatePickerParts.Table, { children: /* @__PURE__ */ jsx(DatePickerParts.TableBody, { children: datePicker.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ jsx(DatePickerParts.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePickerParts.TableCell, { value: year.value, children: /* @__PURE__ */ jsx(DatePickerParts.TableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  ] }) }) });
+}
+
+export {
+  DatePickerYearView
+};
+//# sourceMappingURL=chunk-QG4NDPST.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/year-view.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  DatePickerViewProps,\n  UseDatePickerContext,\n} from '@ark-ui/react/date-picker'\nimport { DatePickerParts } from './parts'\nimport { DatePickerViewControlGroup } from './view-control-group'\n\n/**\n * This private module contains an abstraction of the DatePickerYearView\n * component.\n * @module 'date-picker/year-view'\n */\n\n/**\n * An abstraction of the DatePickerYearView that renders the year view of the\n * DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <DatePickerParts.View {...props} view=\"year\">\n      <DatePickerParts.Context>\n        {(datePicker: UseDatePickerContext) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerParts.Table>\n              <DatePickerParts.TableBody>\n                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n                  <DatePickerParts.TableRow key={id}>\n                    {years.map((year, id) => (\n                      <DatePickerParts.TableCell key={id} value={year.value}>\n                        <DatePickerParts.TableCellTrigger>\n                          {year.label}\n                        </DatePickerParts.TableCellTrigger>\n                      </DatePickerParts.TableCell>\n                    ))}\n                  </DatePickerParts.TableRow>\n                ))}\n              </DatePickerParts.TableBody>\n            </DatePickerParts.Table>\n          </>\n        )}\n      </DatePickerParts.Context>\n    </DatePickerParts.View>\n  )\n}\n"],"mappings":";;;;;;;;AAyBU,mBACE,KADF;AALH,SAAS,mBAAmB,OAA0C;AAC3E,SACE,oBAAC,gBAAgB,MAAhB,EAAsB,GAAG,OAAO,MAAK,QACpC,8BAAC,gBAAgB,SAAhB,EACE,WAAC,eACA,iCACE;AAAA,wBAAC,8BAA2B;AAAA,IAE5B,oBAAC,gBAAgB,OAAhB,EACC,8BAAC,gBAAgB,WAAhB,EACE,qBAAW,aAAa,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,OACnD,oBAAC,gBAAgB,UAAhB,EACE,gBAAM,IAAI,CAAC,MAAMA,QAChB,oBAAC,gBAAgB,WAAhB,EAAmC,OAAO,KAAK,OAC9C,8BAAC,gBAAgB,kBAAhB,EACE,eAAK,OACR,KAH8BA,GAIhC,CACD,KAP4B,EAQ/B,CACD,GACH,GACF;AAAA,KACF,GAEJ,GACF;AAEJ;","names":["id"]}

package/build/modern/{chunk-UXY3KCC3.js → chunk-QJ3CJ4CR.js}

@@ -1,4 +1,4 @@
-// src/components/NotificationDescription.tsx
+// src/components/deprecated/NotificationDescription.tsx
 import { cx } from "@cerberus/styled-system/css";
 import {
   notification
@@ -19,4 +19,4 @@ function NotificationDescription(props) {
 export {
   NotificationDescription
 };
-//# sourceMappingURL=chunk-UXY3KCC3.js.map
+//# sourceMappingURL=chunk-QJ3CJ4CR.js.map

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

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