@cerberus-design/react 0.15.0 → 0.16.0-next-feeb186

package/build/modern/{chunk-SD3OVTHT.js → chunk-O542MPR7.js}

@@ -1,15 +1,6 @@
 import {
   Text
 } from "./chunk-RU5LOXWI.js";
-import {
-  Input
-} from "./chunk-MZ3UCDUL.js";
-import {
-  Label
-} from "./chunk-NMF2HYWO.js";
-import {
-  Field
-} from "./chunk-UZDVOIW5.js";
 import {
   Dialog,
   DialogDescription,
@@ -18,16 +9,21 @@ import {
 } from "./chunk-TFL56AYR.js";
 import {
   Avatar
-} from "./chunk-GCQMH4QA.js";
+} from "./chunk-SXLPDPOZ.js";
 import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
+  FieldLabel,
+  FieldRoot,
+  Input
+} from "./chunk-VSTOSLFS.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
 import {
   Button
-} from "./chunk-EXGKZGML.js";
+} from "./chunk-6KZVE4HC.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
 
 // src/context/prompt-modal.tsx
 import {
@@ -38,10 +34,10 @@ import {
   useRef,
   useState
 } from "react";
+import { DialogCloseTrigger } from "@ark-ui/react";
+import { HStack, VStack } from "@cerberus/styled-system/jsx";
 import { css } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
-import { HStack, VStack } from "@cerberus/styled-system/jsx";
-import { DialogCloseTrigger } from "@ark-ui/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PromptModalContext = createContext(null);
 function PromptModal(props) {
@@ -138,33 +134,34 @@ function PromptModal(props) {
           marginBlockStart: "md",
           marginBlockEnd: "lg",
           w: "full",
-          children: /* @__PURE__ */ jsxs(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ jsxs(
-              Label,
-              {
-                className: hstack({
-                  gap: "xs",
-                  justify: "flex-start !important"
-                }),
-                htmlFor: "confirm",
-                size: "md",
-                children: [
-                  "Type",
-                  /* @__PURE__ */ jsx(Text, { as: "strong", textTransform: "uppercase", children: content?.key }),
-                  "to confirm"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "confirm",
-                name: "confirm",
-                onChange: handleChange,
-                type: "text"
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            FieldRoot,
+            {
+              ids: {
+                control: "confirm"
+              },
+              invalid: !isValid,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  FieldLabel,
+                  {
+                    className: hstack({
+                      gap: "xs",
+                      justify: "flex-start !important",
+                      marginBlockEnd: "xs",
+                      textStyle: "label-md"
+                    }),
+                    children: [
+                      "Type",
+                      /* @__PURE__ */ jsx(Text, { as: "strong", textTransform: "uppercase", children: content?.key }),
+                      "to confirm"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Input, { name: "confirm", onChange: handleChange, type: "text" })
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsxs(HStack, { gap: "md", justify: "stretch", w: "full", children: [
@@ -212,4 +209,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-SD3OVTHT.js.map
+//# sourceMappingURL=chunk-O542MPR7.js.map

package/build/modern/chunk-O542MPR7.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'\nimport { Text } from '../components/Text'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/Dialog'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n  /**\n   * The kind of prompt modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'destructive' | 'non-destructive'\n  /**\n   * The heading of the prompt modal.\n   */\n  heading: string\n  /**\n   * The description of the prompt modal.\n   */\n  description?: string\n  /**\n   * The key to confirm the action.\n   */\n  key: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\nexport type PromptShowResult =\n  | ((value: string | PromiseLike<string>) => void)\n  | null\n\nexport interface PromptModalValue {\n  /**\n   * The method to trigger the prompt modal.\n   * @returns the value of the key if the action is confirmed.\n   * @example\n   * ```tsx\n   * const accepted = await prompt.show({\n   *  kind: 'destructive',\n   *  heading: 'Delete channel?',\n   *  description:\n   *   'This will permanently delete a channel on your account. There is no going back.',\n   *  key: CHANNEL_NAME,\n   *  actionText: 'Yes, delete channel',\n   *  cancelText: 'No, cancel',\n   * })\n   */\n  show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n *   <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n *  const accepted = await prompt.show({\n *   kind: 'destructive',\n *   heading: 'Delete channel?',\n *  description:\n *   'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n  props: PropsWithChildren<PromptModalProviderProps>,\n) {\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n\n  const { icons } = useCerberusContext()\n  const { promptModal: PromptIcon } = icons\n\n  const isValid = useMemo(\n    () => inputValue === content?.key,\n    [inputValue, content],\n  )\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.currentTarget.value)\n    },\n    [content],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(inputValue)\n      }\n      setOpen(false)\n    },\n    [inputValue, setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <PromptModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<PromptIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<PromptIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <VStack\n              alignItems=\"flex-start\"\n              marginBlockStart=\"md\"\n              marginBlockEnd=\"lg\"\n              w=\"full\"\n            >\n              <FieldRoot\n                ids={{\n                  control: 'confirm',\n                }}\n                invalid={!isValid}\n              >\n                <FieldLabel\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start !important',\n                    marginBlockEnd: 'xs',\n                    textStyle: 'label-md',\n                  })}\n                >\n                  Type\n                  <Text as=\"strong\" textTransform=\"uppercase\">\n                    {content?.key}\n                  </Text>\n                  to confirm\n                </FieldLabel>\n                <Input name=\"confirm\" onChange={handleChange} type=\"text\" />\n              </FieldRoot>\n            </VStack>\n\n            <HStack gap=\"md\" justify=\"stretch\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                disabled={!isValid}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </PromptModalContext.Provider>\n  )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n  const context = useContext(PromptModalContext)\n  if (context === null) {\n    throw new Error('usePromptModal must be used within a PromptModal Provider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,0BAA0B;AACnC,SAAS,QAAQ,cAAc;AAC/B,SAAS,WAAW;AACpB,SAAS,cAAc;AAoKX,SAagB,KAbhB;AA/FZ,IAAM,qBAAqB,cAAuC,IAAI;AA+B/D,SAAS,YACd,OACA;AACA,QAAM,aAAa,OAAyB,IAAI;AAChD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AAEvD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,QAAM,UAAU;AAAA,IACd,MAAM,eAAe,SAAS;AAAA,IAC9B,CAAC,YAAY,OAAO;AAAA,EACtB;AAEA,QAAM,UAAU;AAAA,IACd,MAAO,SAAS,SAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAW,UAAU,UAAU;AAAA,MACjC;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,YAAY,OAAO;AAAA,EACtB;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAoC;AACnC,aAAO,IAAI,QAAgB,CAAC,YAAY;AACtC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,gBAAQ,IAAI;AACZ,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAC1B;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D,8BAAC,UAAO,MAAK,MACX,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,2BAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,iBAAgB;AAAA,YAChB,GAAE;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,YAAY;AAAA,gBAClB,UACE;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,UAAS;AAAA,oBACT,MAAM,oBAAC,cAAW,MAAM,IAAI;AAAA,oBAC5B,KAAI;AAAA;AAAA,gBACN;AAAA,gBAGF;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,UAAS;AAAA,oBACT,MAAM,oBAAC,cAAW,MAAM,IAAI;AAAA,oBAC5B,KAAI;AAAA;AAAA,gBACN;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,QACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,SAC3C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,kBAAiB;AAAA,UACjB,gBAAe;AAAA,UACf,GAAE;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,gBACH,SAAS;AAAA,cACX;AAAA,cACA,SAAS,CAAC;AAAA,cAEV;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,OAAO;AAAA,sBAChB,KAAK;AAAA,sBACL,SAAS;AAAA,sBACT,gBAAgB;AAAA,sBAChB,WAAW;AAAA,oBACb,CAAC;AAAA,oBACF;AAAA;AAAA,sBAEC,oBAAC,QAAK,IAAG,UAAS,eAAc,aAC7B,mBAAS,KACZ;AAAA,sBAAO;AAAA;AAAA;AAAA,gBAET;AAAA,gBACA,oBAAC,SAAM,MAAK,WAAU,UAAU,cAAc,MAAK,QAAO;AAAA;AAAA;AAAA,UAC5D;AAAA;AAAA,MACF;AAAA,MAEA,qBAAC,UAAO,KAAI,MAAK,SAAQ,WAAU,GAAE,QACnC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAS;AAAA,YACT,WAAW,IAAI;AAAA,cACb,GAAG;AAAA,YACL,CAAC;AAAA,YACD,UAAU,CAAC;AAAA,YACX,MAAK;AAAA,YACL,SAAS;AAAA,YACT;AAAA,YACA,OAAM;AAAA,YAEL,mBAAS;AAAA;AAAA,QACZ;AAAA,QAEA,oBAAC,sBAAmB,SAAO,MACzB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,GAAG;AAAA,YACL,CAAC;AAAA,YACD,MAAK;AAAA,YACL,SAAS;AAAA,YACT,OAAM;AAAA,YACN,OAAM;AAAA,YAEL,mBAAS;AAAA;AAAA,QACZ,GACF;AAAA,SACF;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAKO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-OGYMMATX.js

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

package/build/modern/chunk-OVHCXBBI.js

@@ -0,0 +1,22 @@
+import {
+  SwitchIndicator
+} from "./chunk-CAZ3EICD.js";
+import {
+  SwitchParts
+} from "./chunk-KQQPZJEI.js";
+
+// src/components/switch/switch.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Switch(props) {
+  const { children, ...rootProps } = props;
+  return /* @__PURE__ */ jsxs(SwitchParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(SwitchParts.Control, { children: /* @__PURE__ */ jsx(SwitchParts.Thumb, { children: /* @__PURE__ */ jsx(SwitchIndicator, {}) }) }),
+    /* @__PURE__ */ jsx(SwitchParts.Label, { children }),
+    /* @__PURE__ */ jsx(SwitchParts.HiddenInput, {})
+  ] });
+}
+
+export {
+  Switch
+};
+//# sourceMappingURL=chunk-OVHCXBBI.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import type { SwitchRootProps } from '@ark-ui/react'\nimport type { SwitchRecipeVariantProps } from '@cerberus/styled-system/recipes'\nimport { SwitchParts } from './parts'\nimport { SwitchIndicator } from './switch-indicator'\n\nexport type SwitchProps = SwitchRootProps & SwitchRecipeVariantProps\n\n/**\n * The Switch component is a and abstraction of the primitives that displays a\n * controlled Switch with a label.\n * @description [Cerberus Docs] https://cerberus.digitalu.design/react/switch\n * @description [Ark Docs] https://ark-ui.com/docs/components/switch\n */\nexport function Switch(props: SwitchProps) {\n  const { children, ...rootProps } = props\n\n  return (\n    <SwitchParts.Root {...rootProps}>\n      <SwitchParts.Control>\n        <SwitchParts.Thumb>\n          <SwitchIndicator />\n        </SwitchParts.Thumb>\n      </SwitchParts.Control>\n\n      <SwitchParts.Label>{children}</SwitchParts.Label>\n\n      <SwitchParts.HiddenInput />\n    </SwitchParts.Root>\n  )\n}\n"],"mappings":";;;;;;;;AAiBI,SAGM,KAHN;AAJG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AAEnC,SACE,qBAAC,YAAY,MAAZ,EAAkB,GAAG,WACpB;AAAA,wBAAC,YAAY,SAAZ,EACC,8BAAC,YAAY,OAAZ,EACC,8BAAC,mBAAgB,GACnB,GACF;AAAA,IAEA,oBAAC,YAAY,OAAZ,EAAmB,UAAS;AAAA,IAE7B,oBAAC,YAAY,aAAZ,EAAwB;AAAA,KAC3B;AAEJ;","names":[]}

package/build/modern/chunk-PLHYOCY3.js

@@ -0,0 +1,23 @@
+// src/components/cta-dialog/utils.ts
+function createCTAModalActions(providedActions) {
+  if (providedActions.length !== 2) {
+    throw new Error("CTAModal must include 2 actions");
+  }
+  if (providedActions.every(
+    (action) => action?.handleClick
+  )) {
+    return {
+      type: "btnAction",
+      _actions: providedActions
+    };
+  }
+  return {
+    type: "reactNode",
+    _actions: providedActions
+  };
+}
+
+export {
+  createCTAModalActions
+};
+//# sourceMappingURL=chunk-PLHYOCY3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/cta-dialog/utils.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react'\n\n/**\n * This module provide utility functions for the cta modal.\n * @module 'react/cta-modal/utils'\n */\n\nexport type CTAButtonAction = {\n  /**\n   * The text of the button.\n   */\n  text: string\n  /**\n   * The onClick handler for the button.\n   */\n  handleClick: MouseEventHandler<HTMLButtonElement>\n}\n\nexport type CTAModalAction = (CTAButtonAction | ReactNode)[]\n\nexport interface CTAModalActionReturn {\n  /**\n   * The type of the action content.\n   */\n  type: 'reactNode' | 'btnAction'\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  _actions: CTAModalAction\n}\n\n/**\n * Creates the action data to pass to the cta modal `show` method.\n */\nexport function createCTAModalActions(\n  providedActions: CTAModalAction,\n): CTAModalActionReturn {\n  if (providedActions.length !== 2) {\n    throw new Error('CTAModal must include 2 actions')\n  }\n\n  if (\n    providedActions.every(\n      (action) => (action as unknown as CTAButtonAction)?.handleClick,\n    )\n  ) {\n    return {\n      type: 'btnAction',\n      _actions: providedActions as CTAButtonAction[],\n    }\n  }\n\n  return {\n    type: 'reactNode',\n    _actions: providedActions as ReactNode[],\n  }\n}\n"],"mappings":";AAkCO,SAAS,sBACd,iBACsB;AACtB,MAAI,gBAAgB,WAAW,GAAG;AAChC,UAAM,IAAI,MAAM,iCAAiC;AAAA,EACnD;AAEA,MACE,gBAAgB;AAAA,IACd,CAAC,WAAY,QAAuC;AAAA,EACtD,GACA;AACA,WAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;","names":[]}

package/build/modern/{chunk-JIRW4XOJ.js → chunk-Q3I4H6EC.js}

@@ -1,4 +1,4 @@
-// src/components/Modal.tsx
+// src/components/deprecated/Modal.tsx
 import { cx } from "@cerberus/styled-system/css";
 import { modal } from "@cerberus/styled-system/recipes";
 import { forwardRef } from "react";
@@ -18,4 +18,4 @@ var Modal = forwardRef(ModalEl);
 export {
   Modal
 };
-//# sourceMappingURL=chunk-JIRW4XOJ.js.map
+//# sourceMappingURL=chunk-Q3I4H6EC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * @deprecated use `Dialog` instead\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAKO,IAAM,QAAQ,WAAW,OAAO;","names":[]}

package/build/modern/chunk-QCBLRACK.js

@@ -0,0 +1,133 @@
+// src/components/select/primitives.tsx
+import {
+  createListCollection,
+  Select
+} from "@ark-ui/react/select";
+import {
+  select
+} from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function SelectRoot(props) {
+  const { size, ...rootProps } = props;
+  const styles = select({ size });
+  return /* @__PURE__ */ jsx(
+    Select.Root,
+    {
+      ...rootProps,
+      className: cx(styles.root, rootProps.className)
+    }
+  );
+}
+function SelectLabel(props) {
+  const styles = select();
+  return /* @__PURE__ */ jsx(Select.Label, { ...props, className: cx(styles.label, props.className) });
+}
+function SelectControl(props) {
+  return /* @__PURE__ */ jsx(Select.Control, { ...props });
+}
+function SelectTrigger(props) {
+  const styles = select();
+  return /* @__PURE__ */ jsx(
+    Select.Trigger,
+    {
+      ...props,
+      className: cx(styles.trigger, props.className)
+    }
+  );
+}
+function SelectValueText(props) {
+  return /* @__PURE__ */ jsx(Select.ValueText, { ...props });
+}
+function SelectIndicator(props) {
+  const styles = select();
+  return /* @__PURE__ */ jsx(
+    Select.Indicator,
+    {
+      ...props,
+      className: cx(styles.indicator, props.className)
+    }
+  );
+}
+function SelectClearTrigger(props) {
+  return /* @__PURE__ */ jsx(Select.ClearTrigger, { ...props });
+}
+function SelectPositioner(props) {
+  const styles = select();
+  return /* @__PURE__ */ jsx(
+    Select.Positioner,
+    {
+      ...props,
+      className: cx(styles.positioner, props.className)
+    }
+  );
+}
+function SelectContent(props) {
+  const { size, ...contentProps } = props;
+  const styles = select({ size });
+  return /* @__PURE__ */ jsx(
+    Select.Content,
+    {
+      ...contentProps,
+      className: cx(styles.content, contentProps.className)
+    }
+  );
+}
+function SelectItemGroup(props) {
+  return /* @__PURE__ */ jsx(Select.ItemGroup, { ...props });
+}
+function SelectItemGroupLabel(props) {
+  const styles = select();
+  return /* @__PURE__ */ jsx(
+    Select.ItemGroupLabel,
+    {
+      ...props,
+      className: cx(styles.itemGroupLabel, props.className)
+    }
+  );
+}
+function SelectItem(props) {
+  const styles = select();
+  return /* @__PURE__ */ jsx(Select.Item, { ...props, className: cx(styles.item, props.className) });
+}
+function SelectItemText(props) {
+  return /* @__PURE__ */ jsx(Select.ItemText, { ...props });
+}
+function SelectItemIndicator(props) {
+  const styles = select();
+  return /* @__PURE__ */ jsx(
+    Select.ItemIndicator,
+    {
+      ...props,
+      className: cx(styles.itemIndicator, props.className)
+    }
+  );
+}
+function SelectHiddenSelect(props) {
+  return /* @__PURE__ */ jsx(Select.HiddenSelect, { ...props });
+}
+function createSelectCollection(collection) {
+  return createListCollection({
+    items: collection
+  });
+}
+
+export {
+  SelectRoot,
+  SelectLabel,
+  SelectControl,
+  SelectTrigger,
+  SelectValueText,
+  SelectIndicator,
+  SelectClearTrigger,
+  SelectPositioner,
+  SelectContent,
+  SelectItemGroup,
+  SelectItemGroupLabel,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  SelectHiddenSelect,
+  createSelectCollection
+};
+//# sourceMappingURL=chunk-QCBLRACK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/select/primitives.tsx"],"sourcesContent":["import {\n  createListCollection,\n  Select,\n  type ListCollection,\n  type SelectClearTriggerProps,\n  type SelectContentProps,\n  type SelectControlProps,\n  type SelectHiddenSelectProps,\n  type SelectIndicatorProps,\n  type SelectItemGroupLabelProps,\n  type SelectItemGroupProps,\n  type SelectItemIndicatorProps,\n  type SelectItemProps,\n  type SelectItemTextProps,\n  type SelectLabelProps,\n  type SelectPositionerProps,\n  type SelectRootProps,\n  type SelectTriggerProps,\n  type SelectValueChangeDetails,\n  type SelectValueTextProps,\n} from '@ark-ui/react/select'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { SelectCollectionItem } from './select'\n\n/**\n * This module contains the Select primitives\n * @module 'react/select'\n */\n\n/**\n * The SelectRoot component is the context provider for the Select component.\n */\nexport function SelectRoot(\n  props: SelectRootProps<SelectCollectionItem> & SelectVariantProps,\n) {\n  const { size, ...rootProps } = props\n  const styles = select({ size })\n  return (\n    <Select.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The label that appears above the select input.\n */\nexport function SelectLabel(props: SelectLabelProps) {\n  const styles = select()\n  return (\n    <Select.Label {...props} className={cx(styles.label, props.className)} />\n  )\n}\n\n/**\n * The control that wraps the select trigger.\n */\nexport function SelectControl(props: SelectControlProps) {\n  return <Select.Control {...props} />\n}\n\n/**\n * The trigger that opens the dropdown.\n */\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const styles = select()\n  return (\n    <Select.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The text that appears in the trigger.\n */\nexport function SelectValueText(props: SelectValueTextProps) {\n  return <Select.ValueText {...props} />\n}\n\n/**\n * The indicator that appears in the trigger.\n */\nexport function SelectIndicator(props: SelectIndicatorProps) {\n  const styles = select()\n  return (\n    <Select.Indicator\n      {...props}\n      className={cx(styles.indicator, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that clears the selected value.\n */\nexport function SelectClearTrigger(props: SelectClearTriggerProps) {\n  return <Select.ClearTrigger {...props} />\n}\n\n/**\n * The positioner that contains the dropdown.\n */\nexport function SelectPositioner(props: SelectPositionerProps) {\n  const styles = select()\n  return (\n    <Select.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The content of the dropdown (i.e. the container itself).\n */\nexport function SelectContent(props: SelectContentProps & SelectVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = select({ size })\n  return (\n    <Select.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The container for a group of item options.\n */\nexport function SelectItemGroup(props: SelectItemGroupProps) {\n  return <Select.ItemGroup {...props} />\n}\n\n/**\n * The label for a group of item options.\n */\nexport function SelectItemGroupLabel(props: SelectItemGroupLabelProps) {\n  const styles = select()\n  return (\n    <Select.ItemGroupLabel\n      {...props}\n      className={cx(styles.itemGroupLabel, props.className)}\n    />\n  )\n}\n\n/**\n * The container for an item in the select content.\n */\nexport function SelectItem(props: SelectItemProps) {\n  const styles = select()\n  return <Select.Item {...props} className={cx(styles.item, props.className)} />\n}\n\n/**\n * The text for an item option.\n */\nexport function SelectItemText(props: SelectItemTextProps) {\n  return <Select.ItemText {...props} />\n}\n\n/**\n * The indicator for an item option shown when it is selected.\n */\nexport function SelectItemIndicator(props: SelectItemIndicatorProps) {\n  const styles = select()\n  return (\n    <Select.ItemIndicator\n      {...props}\n      className={cx(styles.itemIndicator, props.className)}\n    />\n  )\n}\n\n/**\n * The native input for a select item.\n */\nexport function SelectHiddenSelect(props: SelectHiddenSelectProps) {\n  return <Select.HiddenSelect {...props} />\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAkBK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AAiBf;AANG,SAAS,WACd,OACA;AACA,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAC/B,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAAyB;AACnD,QAAM,SAAS,OAAO;AACtB,SACE,oBAAC,OAAO,OAAP,EAAc,GAAG,OAAO,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,cAAc,OAA2B;AACvD,SAAO,oBAAC,OAAO,SAAP,EAAgB,GAAG,OAAO;AACpC;AAKO,SAAS,cAAc,OAA2B;AACvD,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,gBAAgB,OAA6B;AAC3D,SAAO,oBAAC,OAAO,WAAP,EAAkB,GAAG,OAAO;AACtC;AAKO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAKO,SAAS,mBAAmB,OAAgC;AACjE,SAAO,oBAAC,OAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cAAc,OAAgD;AAC5E,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;AAKO,SAAS,gBAAgB,OAA6B;AAC3D,SAAO,oBAAC,OAAO,WAAP,EAAkB,GAAG,OAAO;AACtC;AAKO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,gBAAgB,MAAM,SAAS;AAAA;AAAA,EACtD;AAEJ;AAKO,SAAS,WAAW,OAAwB;AACjD,QAAM,SAAS,OAAO;AACtB,SAAO,oBAAC,OAAO,MAAP,EAAa,GAAG,OAAO,WAAW,GAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAC9E;AAKO,SAAS,eAAe,OAA4B;AACzD,SAAO,oBAAC,OAAO,UAAP,EAAiB,GAAG,OAAO;AACrC;AAKO,SAAS,oBAAoB,OAAiC;AACnE,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,eAAe,MAAM,SAAS;AAAA;AAAA,EACrD;AAEJ;AAKO,SAAS,mBAAmB,OAAgC;AACjE,SAAO,oBAAC,OAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;AAUO,SAAS,uBACd,YACsC;AACtC,SAAO,qBAAqB;AAAA,IAC1B,OAAO;AAAA,EACT,CAAC;AACH;","names":[]}

package/build/modern/{chunk-FGCO27TC.js → chunk-QEM3M4N3.js}

@@ -1,3 +1,12 @@
+import {
+  CTAModalContext
+} from "./chunk-4LSTU6WU.js";
+import {
+  TriggerItem
+} from "./chunk-MVO2GNUA.js";
+import {
+  For
+} from "./chunk-DXOKSZVQ.js";
 import {
   DialogCloseIconTrigger
 } from "./chunk-6BN3XKQF.js";
@@ -9,30 +18,23 @@ import {
 } from "./chunk-TFL56AYR.js";
 import {
   Avatar
-} from "./chunk-GCQMH4QA.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
+} from "./chunk-SXLPDPOZ.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
 import {
-  Button
-} from "./chunk-EXGKZGML.js";
+  Show
+} from "./chunk-BUVVRQLZ.js";
 
-// src/context/cta-modal.tsx
+// src/components/cta-dialog/provider.tsx
 import {
-  createContext,
   useCallback,
   useContext,
   useMemo,
   useState
 } from "react";
-import { HStack } from "@cerberus/styled-system/jsx";
-import { css } from "@cerberus/styled-system/css";
-import { VStack } from "@cerberus/styled-system/jsx";
+import { HStack, VStack } from "@cerberus/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-var CTAModalContext = createContext(null);
 function CTAModal(props) {
   const [open, setOpen] = useState(false);
   const [content, setContent] = useState(null);
@@ -41,12 +43,6 @@ function CTAModal(props) {
   const { confirmModal: FallbackIcon } = icons;
   const handleShow = useCallback(
     (options) => {
-      const maxActions = 2;
-      if (options.actions.length > maxActions) {
-        throw new Error(
-          `CTA Modal only supports a maximum of ${maxActions} actions.`
-        );
-      }
       setContent({ ...options });
       setOpen(true);
     },
@@ -54,10 +50,10 @@ function CTAModal(props) {
   );
   const handleActionClick = useCallback(
     (event) => {
-      const index = event.currentTarget.getAttribute("data-index");
-      const action = content?.actions[Number(index)];
-      const { onClick } = action || {};
-      onClick?.(event);
+      const index = Number(event.currentTarget.getAttribute("data-index"));
+      const contentActions = content?.actions;
+      const action = contentActions._actions[index];
+      action?.handleClick?.(event);
       setOpen(false);
     },
     [content, setOpen]
@@ -93,20 +89,15 @@ function CTAModal(props) {
           /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
           /* @__PURE__ */ jsx(DialogDescription, { children: content?.description })
         ] }) }),
-        /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(Show, { when: Boolean(content?.actions?.length), children: content?.actions?.map((action, index) => /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(For, { each: content?.actions._actions, children: (action, index) => /* @__PURE__ */ jsx(
+          Show,
           {
-            "data-index": index,
-            className: css({
-              w: "1/2"
-            }),
-            onClick: handleActionClick,
-            shape: "rounded",
-            usage: "outlined",
-            children: action.text
+            when: content?.actions?.type === "btnAction",
+            fallback: /* @__PURE__ */ jsx(TriggerItem, { asChild: true, children: action }),
+            children: /* @__PURE__ */ jsx(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action?.text })
           },
           index
-        )) }) })
+        ) }) })
       ] })
     ] }) })
   ] });
@@ -123,4 +114,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-FGCO27TC.js.map
+//# sourceMappingURL=chunk-QEM3M4N3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/cta-dialog/provider.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../Show'\nimport { For } from '../for'\nimport { Avatar } from '../Avatar'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../Dialog'\nimport { DialogCloseIconTrigger } from '../Dialog.client'\nimport type { CTAButtonAction, CTAModalActionReturn } from './utils'\nimport {\n  CTAModalContext,\n  type CTAModalValue,\n  type ShowCTAModalOptions,\n} from './context'\nimport { TriggerItem } from './trigger-item'\n\n/**\n * This module provides the provider and hook for the cta modal.\n * @module 'react/cta-modal/provider'\n */\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<object>) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const confirmIcon = content?.icon\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: FallbackIcon } = icons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      setContent({ ...options })\n      setOpen(true)\n    },\n    [setOpen],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = Number(event.currentTarget.getAttribute('data-index'))\n      const contentActions = content?.actions as CTAModalActionReturn\n      const action = contentActions._actions[index] as CTAButtonAction\n      action?.handleClick?.(event)\n      setOpen(false)\n    },\n    [content, setOpen],\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      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <DialogCloseIconTrigger />\n\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\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                <DialogHeading>{content?.heading}</DialogHeading>\n                <DialogDescription>{content?.description}</DialogDescription>\n              </VStack>\n            </VStack>\n\n            <HStack gap=\"md\" w=\"full\">\n              <For each={content?.actions._actions}>\n                {(action, index) => (\n                  <Show\n                    key={index}\n                    when={content?.actions?.type === 'btnAction'}\n                    fallback={\n                      <TriggerItem asChild>{action as ReactNode}</TriggerItem>\n                    }\n                  >\n                    <TriggerItem data-index={index} onClick={handleActionClick}>\n                      {(action as CTAButtonAction)?.text}\n                    </TriggerItem>\n                  </Show>\n                )}\n              </For>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,QAAQ,cAAc;AAiGrB,cAII,YAJJ;AAxCH,SAAS,SAAS,OAAkC;AACzD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAqC,IAAI;AACvE,QAAM,cAAc,SAAS;AAE7B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,cAAc,aAAa,IAAI;AAEvC,QAAM,aAAa;AAAA,IACjB,CAAC,YAAiC;AAChC,iBAAW,EAAE,GAAG,QAAQ,CAAC;AACzB,cAAQ,IAAI;AAAA,IACd;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAAyC;AACxC,YAAM,QAAQ,OAAO,MAAM,cAAc,aAAa,YAAY,CAAC;AACnE,YAAM,iBAAiB,SAAS;AAChC,YAAM,SAAS,eAAe,SAAS,KAAK;AAC5C,cAAQ,cAAc,KAAK;AAC3B,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OACvB;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D,+BAAC,UAAO,MAAK,MACX;AAAA,0BAAC,0BAAuB;AAAA,MAExB,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,4BAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,UAAS;AAAA,cACT,MACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,WAAW;AAAA,kBACzB,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,kBAEjC;AAAA;AAAA,cACH;AAAA,cAEF,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,UACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,WAC3C,GACF;AAAA,QAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,OAAI,MAAM,SAAS,QAAQ,UACzB,WAAC,QAAQ,UACR;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,SAAS,SAAS,SAAS;AAAA,YACjC,UACE,oBAAC,eAAY,SAAO,MAAE,kBAAoB;AAAA,YAG5C,8BAAC,eAAY,cAAY,OAAO,SAAS,mBACrC,kBAA4B,MAChC;AAAA;AAAA,UARK;AAAA,QASP,GAEJ,GACF;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,cAA6B;AAC3C,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-ILQW5VZT.js → chunk-RBNOEAWJ.js}

@@ -1,6 +1,3 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -9,15 +6,15 @@ import {
 import { css, cx } from "@cerberus/styled-system/css";
 import { label } from "@cerberus/styled-system/recipes";
 import { hstack } from "@cerberus/styled-system/patterns";
+import { useFieldContext } from "@ark-ui/react/field";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Legend(props) {
   const { size, ...nativeProps } = props;
-  const { invalid, ...formState } = useFieldContext();
+  const { invalid, required } = useFieldContext();
   return /* @__PURE__ */ jsxs(
     "legend",
     {
       ...nativeProps,
-      ...formState,
       ...invalid && { "aria-invalid": true },
       className: cx(
         nativeProps.className,
@@ -31,7 +28,7 @@ function Legend(props) {
       ),
       children: [
         nativeProps.children,
-        /* @__PURE__ */ jsx(Show, { when: formState.required, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
           "span",
           {
             className: css({
@@ -49,4 +46,4 @@ function Legend(props) {
 export {
   Legend
 };
-//# sourceMappingURL=chunk-ILQW5VZT.js.map
+//# sourceMappingURL=chunk-RBNOEAWJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Legend.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { type HTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '@ark-ui/react/field'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps\n\n/**\n * A component to provide a global label for a group of related elements in a form (for accessibility).\n * @memberof Fieldset\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <Label htmlFor=\"yes\">Yes</Label>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <Label htmlFor=\"no\">No</Label>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n * ```\n */\nexport function Legend(props: LegendProps) {\n  const { size, ...nativeProps } = props\n  const { invalid, required } = useFieldContext()\n\n  return (\n    <legend\n      {...nativeProps}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          justify: 'space-between',\n          w: 'full',\n        }),\n        label({\n          size,\n        }),\n      )}\n    >\n      {nativeProps.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'page.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </legend>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,aAAqC;AAC9C,SAAS,cAAc;AAGvB,SAAS,uBAAuB;AAgD5B,SAgBI,KAhBJ;AALG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,QAAM,EAAE,SAAS,SAAS,IAAI,gBAAgB;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,QACD,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,oBAAY;AAAA,QACb,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-YKKNWILF.js → chunk-RHCTPSKT.js}

@@ -1,6 +1,3 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
 import {
   DatePickerContext,
   DatePickerTable,
@@ -21,7 +18,7 @@ import {
 } from "./chunk-GITT5645.js";
 import {
   Button
-} from "./chunk-EXGKZGML.js";
+} from "./chunk-6KZVE4HC.js";
 
 // src/components/DatePicker.client.tsx
 import {
@@ -33,12 +30,10 @@ import { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var datePickerStyles = datePicker();
 function DatePicker(props) {
-  const states = useFieldContext();
   return /* @__PURE__ */ jsx(
     ArkDP.Root,
     {
       ...props,
-      ...states,
       positioning: {
         placement: "bottom-start"
       }
@@ -86,15 +81,12 @@ function DatePickerTrigger(props) {
   );
 }
 function DatePickerInput(props) {
-  const { invalid, ...fieldStates } = useFieldContext();
   return /* @__PURE__ */ jsxs(ArkDP.Control, { className: datePickerStyles.control, children: [
     /* @__PURE__ */ jsx(DatePickerTrigger, {}),
     /* @__PURE__ */ jsx(
       ArkDP.Input,
       {
         ...props,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         className: cx(props.className, datePickerStyles.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11
@@ -103,7 +95,6 @@ function DatePickerInput(props) {
   ] });
 }
 function RangePickerInput(props) {
-  const { invalid, ...fieldStates } = useFieldContext();
   const { defaultValue, ...nativeProps } = props;
   const startDate = useMemo(() => defaultValue?.[0], [defaultValue]);
   const endDate = useMemo(() => defaultValue?.[1], [defaultValue]);
@@ -113,8 +104,6 @@ function RangePickerInput(props) {
       ArkDP.Input,
       {
         ...nativeProps,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         "data-range-input": true,
         defaultValue: startDate,
         className: cx(props.className, datePickerStyles.input),
@@ -127,8 +116,6 @@ function RangePickerInput(props) {
       ArkDP.Input,
       {
         ...nativeProps,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         "data-range-input": true,
         defaultValue: endDate,
         "data-range-end-input": true,
@@ -214,4 +201,4 @@ export {
   DatePickerYearView,
   DatePickerCalendar
 };
-//# sourceMappingURL=chunk-YKKNWILF.js.map
+//# sourceMappingURL=chunk-RHCTPSKT.js.map