@cerberus-design/react 0.18.4 → 0.19.0

package/build/modern/chunk-EALORWDQ.js

@@ -0,0 +1,126 @@
+import {
+  For
+} from "./chunk-D2TQPEZQ.js";
+import {
+  CTAModalContext
+} from "./chunk-4LSTU6WU.js";
+import {
+  TriggerItem
+} from "./chunk-6QWS7HII.js";
+import {
+  DialogCloseIconTrigger
+} from "./chunk-NZBKI6AF.js";
+import {
+  Dialog
+} from "./chunk-KUTKPR3G.js";
+import {
+  DialogDescription,
+  DialogHeading,
+  DialogProvider
+} from "./chunk-L3V6I7YH.js";
+import {
+  Avatar
+} from "./chunk-WJHG3ZFR.js";
+import {
+  Show
+} from "./chunk-NUXMADXV.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+
+// src/components/cta-dialog/provider.tsx
+import {
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { HStack, VStack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CTAModal(props) {
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState(null);
+  const confirmIcon = content?.icon;
+  const { icons } = useCerberusContext();
+  const { confirmModal: FallbackIcon } = icons;
+  const handleShow = useCallback(
+    (options) => {
+      setContent({ ...options });
+      setOpen(true);
+    },
+    [setOpen]
+  );
+  const handleActionClick = useCallback(
+    (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]
+  );
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(CTAModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        size: "sm",
+        style: {
+          "--dialog-content-min-h": "auto"
+        },
+        children: [
+          /* @__PURE__ */ jsx(DialogCloseIconTrigger, {}),
+          /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
+            /* @__PURE__ */ jsx(VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  gradient: "charon-light",
+                  fallback: /* @__PURE__ */ jsx(
+                    Show,
+                    {
+                      when: confirmIcon,
+                      fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
+                      children: confirmIcon
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
+              /* @__PURE__ */ jsx(DialogDescription, { children: content?.description })
+            ] }) }),
+            /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(For, { each: content?.actions._actions, children: (action, index) => /* @__PURE__ */ jsx(
+              Show,
+              {
+                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
+            ) }) })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+function useCTAModal() {
+  const context = useContext(CTAModalContext);
+  if (context === null) {
+    throw new Error("useCTAModal must be used within a CTAModal Provider");
+  }
+  return context;
+}
+
+export {
+  CTAModal,
+  useCTAModal
+};
+//# sourceMappingURL=chunk-EALORWDQ.js.map

package/build/modern/chunk-EALORWDQ.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 'styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../show/index'\nimport { For } from '../for/index'\nimport { Avatar } from '../avatar/avatar'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../dialog'\nimport { DialogCloseIconTrigger } from '../dialog/close-icon-trigger'\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\n          size=\"sm\"\n          style={{\n            '--dialog-content-min-h': 'auto',\n          }}\n        >\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                  gradient=\"charon-light\"\n                  fallback={\n                    <Show\n                      when={confirmIcon}\n                      fallback={<FallbackIcon size={24} />}\n                    >\n                      {confirmIcon}\n                    </Show>\n                  }\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;AAsGrB,cAII,YAJJ;AA7CH,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;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,UACL,0BAA0B;AAAA,QAC5B;AAAA,QAEA;AAAA,8BAAC,0BAAuB;AAAA,UAExB,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,gCAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAS;AAAA,kBACT,UACE;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM;AAAA,sBACN,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,sBAEjC;AAAA;AAAA,kBACH;AAAA;AAAA,cAEJ;AAAA,cACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,cACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,eAC3C,GACF;AAAA,YAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,OAAI,MAAM,SAAS,QAAQ,UACzB,WAAC,QAAQ,UACR;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAM,SAAS,SAAS,SAAS;AAAA,gBACjC,UACE,oBAAC,eAAY,SAAO,MAAE,kBAAoB;AAAA,gBAG5C,8BAAC,eAAY,cAAY,OAAO,SAAS,mBACrC,kBAA4B,MAChC;AAAA;AAAA,cARK;AAAA,YASP,GAEJ,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF,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-EPIO6H3A.js

@@ -0,0 +1,18 @@
+import {
+  ComboboxParts
+} from "./chunk-NZZS2A53.js";
+
+// src/components/combobox/item-group.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ComboItemGroup(props) {
+  const { label, children, ...groupProps } = props;
+  return /* @__PURE__ */ jsxs(ComboboxParts.ItemGroup, { ...groupProps, children: [
+    /* @__PURE__ */ jsx(ComboboxParts.ItemGroupLabel, { children: label }),
+    children
+  ] });
+}
+
+export {
+  ComboItemGroup
+};
+//# sourceMappingURL=chunk-EPIO6H3A.js.map

package/build/modern/chunk-EZTDGHEX.js

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

package/build/modern/chunk-F45WBSRP.js

@@ -0,0 +1,215 @@
+import {
+  Text
+} from "./chunk-VPD3PPBW.js";
+import {
+  Dialog
+} from "./chunk-KUTKPR3G.js";
+import {
+  DialogDescription,
+  DialogHeading,
+  DialogProvider
+} from "./chunk-L3V6I7YH.js";
+import {
+  Button
+} from "./chunk-RIBBTTT4.js";
+import {
+  Avatar
+} from "./chunk-WJHG3ZFR.js";
+import {
+  Show
+} from "./chunk-NUXMADXV.js";
+import {
+  FieldLabel,
+  FieldRoot,
+  Input
+} from "./chunk-MBZHMWPR.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+
+// src/context/prompt-modal.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { DialogCloseTrigger } from "@ark-ui/react/dialog";
+import { HStack, VStack } from "styled-system/jsx";
+import { css } from "styled-system/css";
+import { hstack } from "styled-system/patterns";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PromptModalContext = createContext(null);
+function PromptModal(props) {
+  const resolveRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const { icons } = useCerberusContext();
+  const { promptModal: PromptIcon } = icons;
+  const isValid = useMemo(
+    () => inputValue === content?.key,
+    [inputValue, content]
+  );
+  const palette = useMemo(
+    () => content?.kind === "destructive" ? "danger" : "action",
+    [content]
+  );
+  const handleChange = useCallback((e) => {
+    setInputValue(e.currentTarget.value);
+  }, []);
+  const handleChoice = useCallback(
+    (e) => {
+      const target = e.currentTarget;
+      if (target.value === "true") {
+        resolveRef.current?.(inputValue);
+      }
+      setOpen(false);
+    },
+    [inputValue, setOpen]
+  );
+  const handleShow = useCallback(
+    (options) => {
+      return new Promise((resolve) => {
+        setContent({ ...options, kind: options.kind || "non-destructive" });
+        setOpen(true);
+        resolveRef.current = resolve;
+      });
+    },
+    [setOpen]
+  );
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(PromptModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        size: "sm",
+        style: {
+          "--dialog-content-min-h": "auto"
+        },
+        children: /* @__PURE__ */ jsxs(
+          VStack,
+          {
+            alignItems: "flex-start",
+            h: "full",
+            justify: "space-between",
+            w: "full",
+            children: [
+              /* @__PURE__ */ jsx(
+                HStack,
+                {
+                  alignSelf: "center",
+                  justify: "center",
+                  paddingBlockEnd: "md",
+                  w: "full",
+                  children: /* @__PURE__ */ jsx(
+                    Show,
+                    {
+                      when: palette === "danger",
+                      fallback: /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          gradient: "charon-light",
+                          fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
+                        }
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          gradient: "hades-dark",
+                          fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
+              /* @__PURE__ */ jsx(DialogDescription, { children: content?.description }),
+              /* @__PURE__ */ jsx(
+                VStack,
+                {
+                  alignItems: "flex-start",
+                  marginBlockStart: "md",
+                  marginBlockEnd: "lg",
+                  w: "full",
+                  children: /* @__PURE__ */ jsxs(FieldRoot, { invalid: !isValid, children: [
+                    /* @__PURE__ */ jsxs(
+                      FieldLabel,
+                      {
+                        className: hstack({
+                          gap: "xs",
+                          justify: "flex-start",
+                          marginBlockEnd: "xs",
+                          textStyle: "label-md",
+                          w: "initial"
+                        }),
+                        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: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    autoFocus: true,
+                    className: css({
+                      w: "1/2"
+                    }),
+                    disabled: !isValid,
+                    name: "confirm",
+                    onClick: handleChoice,
+                    palette,
+                    value: "true",
+                    children: content?.actionText
+                  }
+                ),
+                /* @__PURE__ */ jsx(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: css({
+                      w: "1/2"
+                    }),
+                    name: "cancel",
+                    onClick: handleChoice,
+                    usage: "outlined",
+                    value: "false",
+                    children: content?.cancelText
+                  }
+                ) })
+              ] })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function usePromptModal() {
+  const context = useContext(PromptModalContext);
+  if (context === null) {
+    throw new Error("usePromptModal must be used within a PromptModal Provider");
+  }
+  return context;
+}
+
+export {
+  PromptModal,
+  usePromptModal
+};
+//# sourceMappingURL=chunk-F45WBSRP.js.map

package/build/modern/chunk-F45WBSRP.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/dialog'\nimport { HStack, VStack } from 'styled-system/jsx'\nimport { css } from 'styled-system/css'\nimport { hstack } from 'styled-system/patterns'\nimport { FieldLabel, FieldRoot, Input } from '../components/field/index'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/show/index'\nimport { Avatar } from '../components/avatar/avatar'\nimport { Text } from '../components/text/index'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/dialog'\nimport { useCerberusContext } from './cerberus'\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((e: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(e.currentTarget.value)\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\n          size=\"sm\"\n          style={{\n            '--dialog-content-min-h': 'auto',\n          }}\n        >\n          <VStack\n            alignItems=\"flex-start\"\n            h=\"full\"\n            justify=\"space-between\"\n            w=\"full\"\n          >\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\n            <DialogHeading>{content?.heading}</DialogHeading>\n            <DialogDescription>{content?.description}</DialogDescription>\n\n            <VStack\n              alignItems=\"flex-start\"\n              marginBlockStart=\"md\"\n              marginBlockEnd=\"lg\"\n              w=\"full\"\n            >\n              <FieldRoot invalid={!isValid}>\n                <FieldLabel\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start',\n                    marginBlockEnd: 'xs',\n                    textStyle: 'label-md',\n                    w: 'initial',\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;AAsLO,cAqBd,YArBc;AAjH9B,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,YAAY,CAAC,MAAqC;AACrE,kBAAc,EAAE,cAAc,KAAK;AAAA,EACrC,GAAG,CAAC,CAAC;AAEL,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;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,UACL,0BAA0B;AAAA,QAC5B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,GAAE;AAAA,YACF,SAAQ;AAAA,YACR,GAAE;AAAA,YAEF;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAQ;AAAA,kBACR,iBAAgB;AAAA,kBAChB,GAAE;AAAA,kBAEF;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,YAAY;AAAA,sBAClB,UACE;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAS;AAAA,0BACT,UAAU,oBAAC,cAAW,MAAM,IAAI;AAAA;AAAA,sBAClC;AAAA,sBAGF;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAS;AAAA,0BACT,UAAU,oBAAC,cAAW,MAAM,IAAI;AAAA;AAAA,sBAClC;AAAA;AAAA,kBACF;AAAA;AAAA,cACF;AAAA,cAEA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,cACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,cAEzC;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAW;AAAA,kBACX,kBAAiB;AAAA,kBACjB,gBAAe;AAAA,kBACf,GAAE;AAAA,kBAEF,+BAAC,aAAU,SAAS,CAAC,SACnB;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAW,OAAO;AAAA,0BAChB,KAAK;AAAA,0BACL,SAAS;AAAA,0BACT,gBAAgB;AAAA,0BAChB,WAAW;AAAA,0BACX,GAAG;AAAA,wBACL,CAAC;AAAA,wBACF;AAAA;AAAA,0BAEC,oBAAC,QAAK,IAAG,UAAS,eAAc,aAC7B,mBAAS,KACZ;AAAA,0BAAO;AAAA;AAAA;AAAA,oBAET;AAAA,oBACA,oBAAC,SAAM,MAAK,WAAU,UAAU,cAAc,MAAK,QAAO;AAAA,qBAC5D;AAAA;AAAA,cACF;AAAA,cAEA,qBAAC,UAAO,KAAI,MAAK,SAAQ,WAAU,GAAE,QACnC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAS;AAAA,oBACT,WAAW,IAAI;AAAA,sBACb,GAAG;AAAA,oBACL,CAAC;AAAA,oBACD,UAAU,CAAC;AAAA,oBACX,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT;AAAA,oBACA,OAAM;AAAA,oBAEL,mBAAS;AAAA;AAAA,gBACZ;AAAA,gBAEA,oBAAC,sBAAmB,SAAO,MACzB;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,IAAI;AAAA,sBACb,GAAG;AAAA,oBACL,CAAC;AAAA,oBACD,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,OAAM;AAAA,oBACN,OAAM;AAAA,oBAEL,mBAAS;AAAA;AAAA,gBACZ,GACF;AAAA,iBACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,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-FRT3VY4M.js

@@ -0,0 +1,22 @@
+import {
+  DatePickerParts
+} from "./chunk-RJGEKVHZ.js";
+import {
+  IconButton
+} from "./chunk-G4CDF7LY.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.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-FRT3VY4M.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/trigger.tsx"],"sourcesContent":["'use client'\n\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../icon-button/index'\nimport { DatePickerParts } from './parts'\nimport type { DatePickerTriggerProps } from './primitives'\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-G4CDF7LY.js

@@ -0,0 +1,15 @@
+import {
+  IconButtonRoot
+} from "./chunk-TVSVKDWV.js";
+
+// src/components/icon-button/button.tsx
+import { jsx } from "react/jsx-runtime";
+function IconButton(props) {
+  const { ariaLabel, ...rootProps } = props;
+  return /* @__PURE__ */ jsx(IconButtonRoot, { ...rootProps, "aria-label": ariaLabel ?? "Icon Button" });
+}
+
+export {
+  IconButton
+};
+//# sourceMappingURL=chunk-G4CDF7LY.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/icon-button/button.tsx"],"sourcesContent":["import { IconButtonRoot, type IconButtonRootProps } from './primitives'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonProps extends IconButtonRootProps {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps) {\n  const { ariaLabel, ...rootProps } = props\n  return (\n    <IconButtonRoot {...rootProps} aria-label={ariaLabel ?? 'Icon Button'} />\n  )\n}\n"],"mappings":";;;;;AAqBI;AAHG,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SACE,oBAAC,kBAAgB,GAAG,WAAW,cAAY,aAAa,eAAe;AAE3E;","names":[]}

package/build/modern/chunk-GPGFQNJ6.js

@@ -0,0 +1,21 @@
+import {
+  AccordionParts
+} from "./chunk-4NW7Q2VS.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+
+// src/components/accordion/item-indicator.tsx
+import { jsx } from "react/jsx-runtime";
+function AccordionChevronItemIndicator(props) {
+  const { size, ...indicatorProps } = props;
+  const iconSize = size === "sm" ? 16 : "24";
+  const { icons } = useCerberusContext();
+  const { accordionIndicator: ChevronDown } = icons;
+  return /* @__PURE__ */ jsx(AccordionParts.ItemIndicator, { ...indicatorProps, children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize }) });
+}
+
+export {
+  AccordionChevronItemIndicator
+};
+//# sourceMappingURL=chunk-GPGFQNJ6.js.map

package/build/modern/chunk-GZ6T3352.js

@@ -0,0 +1,109 @@
+// src/system/primitive-factory.tsx
+import { css, cx } from "styled-system/css";
+import { jsx } from "react/jsx-runtime";
+var CerberusPrimitive = class {
+  recipe;
+  constructor(recipe) {
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
+    }
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
+    }
+  }
+  /**
+   * Creates a Cerberus component with bare features and no recipe.
+   * @param Component - The React component to enhance with Cerberus features.
+   * @returns A new React component that applies Cerberus features to the
+   * original component.
+   * @example
+   * ```typescript
+   * const { withNoRecipe } = createCerberusPrimitive(button)
+   * const Button = withNoRecipe(RawButton)
+   * ```
+   */
+  withNoRecipe = (Component, options) => {
+    const { defaultProps } = options || {};
+    this.validateComponent(Component);
+    const CerbComponent = (props) => {
+      const { css: customCss, className, ...nativeProps } = props;
+      const styles = this.hasStyles(cx(className, css(customCss)));
+      return /* @__PURE__ */ jsx(Component, { ...defaultProps, ...styles, ...nativeProps });
+    };
+    CerbComponent.displayName = Component.displayName || Component.name;
+    return CerbComponent;
+  };
+  /**
+   * Creates a Cerberus component with the given recipe.
+   * @param Component - The React component to enhance with the recipe.
+   * @param options - Options for the recipe.
+   * @returns A new React component that applies the recipe to the original
+   * component.
+   */
+  withRecipe = (Component, options) => {
+    const { defaultProps } = options || {};
+    const recipe = this.recipe;
+    this.validateComponent(Component);
+    const CerbComponent = (internalProps) => {
+      const { css: customCss, className, ...nativeProps } = internalProps;
+      const [variantOptions] = recipe.splitVariantProps(nativeProps);
+      const recipeStyles = recipe(variantOptions);
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...defaultProps,
+          ...nativeProps,
+          className: cx(className, recipeStyles, css(customCss))
+        }
+      );
+    };
+    CerbComponent.displayName = Component.displayName || Component.name;
+    return CerbComponent;
+  };
+  /**
+   * Creates a Cerberus component with a slot recipe applied.
+   * @param Component - The React component to enhance with Cerberus features.
+   * @param recipe - The slot recipe to apply to the component.
+   * @returns A new React component that applies Cerberus features and the
+   * specified slot recipe to the original component.
+   * @example
+   * ```typescript
+   * const { withSlotRecipe } = createCerberusPrimitive(field)
+   * const Field = withSlotRecipe(RawField, field)
+   * ```
+   */
+  withSlotRecipe = (Component, slot, options) => {
+    const { defaultProps } = options || {};
+    const recipe = this.recipe;
+    this.validateComponent(Component);
+    const CerbComponent = (internalProps) => {
+      const { css: customCss, className, ...nativeProps } = internalProps;
+      const [variantOptions] = recipe.splitVariantProps(nativeProps);
+      const styles = recipe(variantOptions);
+      const slotStyles = styles[slot];
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...defaultProps,
+          ...nativeProps,
+          className: cx(className, slotStyles, css(customCss))
+        }
+      );
+    };
+    CerbComponent.displayName = Component.displayName || Component.name;
+    return CerbComponent;
+  };
+};
+
+export {
+  CerberusPrimitive
+};
+//# sourceMappingURL=chunk-GZ6T3352.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/system/primitive-factory.tsx"],"sourcesContent":["import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n"],"mappings":";AAAA,SAAS,KAAK,UAAU;AAmEX;AA9CN,IAAM,oBAAN,MAAwB;AAAA,EAC7B;AAAA,EAEA,YAAY,QAAkC;AAC5C,SAAK,SAAS,UAAU;AAAA,EAC1B;AAAA,EAEQ,UAAU,QAAqD;AACrE,QAAI,QAAQ;AACV,aAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AACA,WAAO,CAAC;AAAA,EACV;AAAA,EAEQ,kBACN,WACA;AACA,QAAI,OAAO,cAAc,cAAc,OAAO,cAAc,UAAU;AACpE,YAAM,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,eAAe,CACb,WACA,YAC2B;AAC3B,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AAErC,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,UAA0C;AAC/D,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AACtD,YAAM,SAAS,KAAK,UAAU,GAAG,WAAW,IAAI,SAAS,CAAC,CAAC;AAC3D,aAAO,oBAAC,aAAW,GAAG,cAAe,GAAG,QAAS,GAAI,aAAmB;AAAA,IAC1E;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa,CACX,WACA,YAC+D;AAC/D,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,YAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,YAAM,eAAe,OAAO,cAAc;AAE1C,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,cAAc,IAAI,SAAS,CAAC;AAAA;AAAA,MACvD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,iBAAiB,CACf,WACA,MACA,YACG;AACH,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,YAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,YAAM,SAAS,OAAO,cAAc;AACpC,YAAM,aAAa,OAAO,IAA2B;AAErD,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,YAAY,IAAI,SAAS,CAAC;AAAA;AAAA,MACrD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AACF;","names":[]}

package/build/modern/chunk-GZXW3JIW.js

@@ -0,0 +1,41 @@
+import {
+  SelectClearTrigger,
+  SelectContent,
+  SelectControl,
+  SelectHiddenSelect,
+  SelectIndicator,
+  SelectItem,
+  SelectItemGroup,
+  SelectItemGroupLabel,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText
+} from "./chunk-JPWFSCTC.js";
+
+// src/components/select/parts.ts
+var SelectParts = {
+  Root: SelectRoot,
+  Label: SelectLabel,
+  Control: SelectControl,
+  Trigger: SelectTrigger,
+  ClearTrigger: SelectClearTrigger,
+  ValueText: SelectValueText,
+  Indicator: SelectIndicator,
+  Positioner: SelectPositioner,
+  Content: SelectContent,
+  ItemGroup: SelectItemGroup,
+  ItemGroupLabel: SelectItemGroupLabel,
+  Item: SelectItem,
+  ItemText: SelectItemText,
+  ItemIndicator: SelectItemIndicator,
+  HiddenSelect: SelectHiddenSelect
+};
+
+export {
+  SelectParts
+};
+//# sourceMappingURL=chunk-GZXW3JIW.js.map