@cerberus-design/react 0.17.2 → 0.18.1

package/build/modern/{chunk-NR5XDIJ7.js → chunk-D4BVNWAY.js}

@@ -3,10 +3,8 @@ import {
   Combobox
 } from "@ark-ui/react/combobox";
 import { ark } from "@ark-ui/react/factory";
-import {
-  combobox
-} from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
+import { combobox } from "styled-system/recipes";
+import { cx } from "styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function ComboboxRoot(props) {
   const { size, ...rootProps } = props;
@@ -145,4 +143,4 @@ export {
   ComboboxStartIcon,
   ComboItemText
 };
-//# sourceMappingURL=chunk-NR5XDIJ7.js.map
+//# sourceMappingURL=chunk-D4BVNWAY.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/combobox/primitives.tsx"],"sourcesContent":["import {\n  Combobox,\n  type ComboboxClearTriggerProps,\n  type ComboboxContentProps,\n  type ComboboxControlProps,\n  type ComboboxInputProps,\n  type ComboboxItemGroupLabelProps,\n  type ComboboxItemGroupProps,\n  type ComboboxItemIndicatorProps,\n  type ComboboxItemProps,\n  type ComboboxItemTextProps,\n  type ComboboxLabelProps,\n  type ComboboxPositionerProps,\n  type ComboboxRootProps,\n  type ComboboxTriggerProps,\n} from '@ark-ui/react/combobox'\nimport { ark } from '@ark-ui/react/factory'\nimport type { SelectCollectionItem } from '../select/select'\nimport { combobox, type ComboboxVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module contains the primitives of the Combobox.\n * @module 'combobox/primitives'\n */\n\n/**\n * The ComboboxRoot component is the context provider for the Combobox\n * component.\n */\nexport function ComboboxRoot(\n  props: ComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps,\n) {\n  const { size, ...rootProps } = props\n  const styles = combobox({ size })\n  return (\n    <Combobox.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The label that appears above the combobox input.\n */\nexport function ComboboxLabel(props: ComboboxLabelProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Label {...props} className={cx(styles.label, props.className)} />\n  )\n}\n\n/**\n * The control that wraps the combobox input.\n */\nexport function ComboboxControl(props: ComboboxControlProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Control\n      {...props}\n      className={cx(styles.control, props.className)}\n    />\n  )\n}\n\n/**\n * The input of the combobox.\n */\nexport function ComboboxInput(props: ComboboxInputProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Input {...props} className={cx(styles.input, props.className)} />\n  )\n}\n\n/**\n * The trigger that opens the dropdown.\n */\nexport function ComboboxTrigger(props: ComboboxTriggerProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger to clear the combobox input.\n */\nexport function ComboboxClearTrigger(props: ComboboxClearTriggerProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ClearTrigger\n      {...props}\n      className={cx(styles.clearTrigger, props.className)}\n    />\n  )\n}\n\n/**\n * The positioner that wraps the content.\n */\nexport function ComboboxPositioner(props: ComboboxPositionerProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The content of the combobox component.\n */\nexport function ComboboxContent(\n  props: ComboboxContentProps & ComboboxVariantProps,\n) {\n  const { size, ...contentProps } = props\n  const styles = combobox({ size })\n  return (\n    <Combobox.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * A group of items in the combobox component.\n */\nexport function ComboboxItemGroup(props: ComboboxItemGroupProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemGroup\n      {...props}\n      className={cx(styles.itemGroup, props.className)}\n    />\n  )\n}\n\n/**\n * The label for a group of items in the combobox component.\n */\nexport function ComboboxItemGroupLabel(props: ComboboxItemGroupLabelProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemGroupLabel\n      {...props}\n      className={cx(styles.itemGroupLabel, props.className)}\n    />\n  )\n}\n\n/**\n * An individual item in the combobox component.\n */\nexport function ComboboxItem(props: ComboboxItemProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Item {...props} className={cx(styles.item, props.className)} />\n  )\n}\n\n/**\n * The text that labels a single item of the combobox.\n */\nexport function ComboboxItemText(props: ComboboxItemTextProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemText\n      {...props}\n      className={cx(styles.itemText, props.className)}\n    />\n  )\n}\n\n/**\n * The indicator that appears when the item has been selected.\n */\nexport function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemIndicator\n      {...props}\n      className={cx(styles.itemIndicator, props.className)}\n    />\n  )\n}\n\n/**\n * The icon that appears at the start of the combobox input.\n */\nexport function ComboboxStartIcon(props: PropsWithChildren) {\n  const styles = combobox()\n  return <ark.span {...props} className={styles.startIcon} />\n}\n\n// We are only doing this to make the API consistent\nexport const ComboItemText = ComboboxItemText\n\nexport type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails\n"],"mappings":"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","names":[]}

package/build/modern/{chunk-QDXU6G3X.js → chunk-D6PFYSIP.js}

@@ -1,9 +1,9 @@
 import {
   DatePickerViewControlGroup
-} from "./chunk-OSAYA6GH.js";
+} from "./chunk-INVZVMY4.js";
 import {
   DatePickerParts
-} from "./chunk-WVFEJCUN.js";
+} from "./chunk-J76SGDYP.js";
 
 // src/components/date-picker/month-view.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -17,4 +17,4 @@ function DatePickerMonthView(props) {
 export {
   DatePickerMonthView
 };
-//# sourceMappingURL=chunk-QDXU6G3X.js.map
+//# sourceMappingURL=chunk-D6PFYSIP.js.map

package/build/modern/{chunk-JLUIGY2U.js → chunk-D7QIPJQC.js}

@@ -1,17 +1,17 @@
 import {
   Avatar
-} from "./chunk-N4RPMT6J.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
+} from "./chunk-CF4TCMJI.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  Show
+} from "./chunk-VEAC4I3F.js";
 
 // src/components/FileUploader.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { vstack } from "@cerberus/styled-system/patterns";
-import { fileUploader } from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { vstack } from "styled-system/patterns";
+import { fileUploader } from "styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function FileUploader(props) {
   const { icons } = useCerberusContext();
@@ -40,7 +40,7 @@ function FileUploader(props) {
             ),
             htmlFor: props.name,
             children: [
-              /* @__PURE__ */ jsx(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ jsx("p", { className: styles.heading, children: props.heading }) }),
+              /* @__PURE__ */ jsx(Show, { when: props.heading, children: /* @__PURE__ */ jsx("p", { className: styles.heading, children: props.heading }) }),
               "Import ",
               props.accept?.replace(",", ", "),
               " files",
@@ -64,4 +64,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-JLUIGY2U.js.map
+//# sourceMappingURL=chunk-D7QIPJQC.js.map

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

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

package/build/modern/{chunk-CYSLIGNU.js → chunk-DHKSNGQX.js}

@@ -1,24 +1,24 @@
 import {
   Dialog
-} from "./chunk-MH6CIBDU.js";
+} from "./chunk-Z2KBUTCO.js";
 import {
   DialogCloseTrigger,
   DialogDescription,
   DialogHeading,
   DialogProvider
-} from "./chunk-D7UIWAFO.js";
-import {
-  Avatar
-} from "./chunk-N4RPMT6J.js";
+} from "./chunk-SSR3CWJZ.js";
 import {
   Button
-} from "./chunk-RD2YPFRA.js";
+} from "./chunk-GB7W3YNU.js";
 import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
+  Avatar
+} from "./chunk-CF4TCMJI.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  Show
+} from "./chunk-VEAC4I3F.js";
 
 // src/context/confirm-modal.tsx
 import {
@@ -29,8 +29,8 @@ import {
   useRef,
   useState
 } from "react";
-import { css } from "@cerberus/styled-system/css";
-import { HStack, VStack } from "@cerberus/styled-system/jsx";
+import { css } from "styled-system/css";
+import { HStack, VStack } from "styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConfirmModalContext = createContext(null);
 function ConfirmModal(props) {
@@ -153,4 +153,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-CYSLIGNU.js.map
+//# sourceMappingURL=chunk-DHKSNGQX.js.map

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

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

package/build/modern/{chunk-Z52R6ABJ.js → chunk-EMDNETC7.js}

@@ -1,6 +1,6 @@
 // src/components/field/start-indicator.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { field } from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { field } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function FieldStartIndicator(props) {
   const styles = field();
@@ -18,4 +18,4 @@ function FieldStartIndicator(props) {
 export {
   FieldStartIndicator
 };
-//# sourceMappingURL=chunk-Z52R6ABJ.js.map
+//# sourceMappingURL=chunk-EMDNETC7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/start-indicator.tsx"],"sourcesContent":["import { cx } from 'styled-system/css'\nimport { field } from 'styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>\n\n/**\n * The start indicator displays an indicator at the start of the Input.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n */\nexport function FieldStartIndicator(props: FieldIndicatorProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <span\n      {...props}\n      data-part=\"start-indicator\"\n      className={cx(props.className, styles.startIndicator)}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAelB;AANG,SAAS,oBAAoB,OAA4B;AAC9D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAU;AAAA,MACV,WAAW,GAAG,MAAM,WAAW,OAAO,cAAc;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/build/modern/{chunk-BPRF34DU.js → chunk-ENJUQNVT.js}

@@ -2,10 +2,8 @@
 import {
   Checkbox
 } from "@ark-ui/react";
-import { cx } from "@cerberus/styled-system/css";
-import {
-  checkbox
-} from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { checkbox } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function CheckboxRoot(props) {
   const styles = checkbox();
@@ -59,4 +57,4 @@ export {
   CheckboxHiddenInput,
   CheckboxGroup
 };
-//# sourceMappingURL=chunk-BPRF34DU.js.map
+//# sourceMappingURL=chunk-ENJUQNVT.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/checkbox/primitives.tsx"],"sourcesContent":["import {\n  Checkbox,\n  type CheckboxControlProps,\n  type CheckboxGroupProps,\n  type CheckboxIndicatorProps,\n  type CheckboxLabelProps,\n  type CheckboxRootProps,\n} from '@ark-ui/react'\nimport { cx } from 'styled-system/css'\nimport { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Checkbox primitives.\n * @module 'react/checkbox'\n */\n\n/**\n * Checkbox Root component used to provide the context to all other checkbox\n * primitives.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxRoot(props: CheckboxRootProps) {\n  const styles = checkbox()\n  return (\n    <Checkbox.Root {...props} className={cx(styles.root, props.className)} />\n  )\n}\n\n/**\n * Checkbox Label component used to display the label of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxLabel(\n  props: CheckboxLabelProps & CheckboxVariantProps,\n) {\n  const { size, ...labelProps } = props\n  const styles = checkbox({ size })\n  return (\n    <Checkbox.Label\n      {...labelProps}\n      className={cx(styles.label, labelProps.className)}\n    />\n  )\n}\n\n/**\n * Checkbox Control component used to display the control of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxControl(\n  props: CheckboxControlProps & CheckboxVariantProps,\n) {\n  const { size, ...controlProps } = props\n  const styles = checkbox({ size })\n  return (\n    <Checkbox.Control\n      {...controlProps}\n      className={cx(styles.control, controlProps.className)}\n    />\n  )\n}\n\n/**\n * Checkbox Indicator component used to display the indicator of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxIndicator(props: CheckboxIndicatorProps) {\n  const styles = checkbox()\n  return (\n    <Checkbox.Indicator\n      {...props}\n      className={cx(styles.indicator, props.className)}\n    />\n  )\n}\n\n/**\n * Checkbox HiddenInput component used to provide the native checkbox input.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxHiddenInput(props: CheckboxControlProps) {\n  return <Checkbox.HiddenInput {...props} />\n}\n\n/**\n * Checkbox Group is used to group checkboxes together in a consistently styled\n * way.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxGroup(props: CheckboxGroupProps) {\n  const styles = checkbox()\n  return (\n    <Checkbox.Group {...props} className={cx(styles.group, props.className)} />\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAMK;AACP,SAAS,UAAU;AACnB,SAAS,gBAA2C;AAgBhD;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,SAAS;AACxB,SACE,oBAAC,SAAS,MAAT,EAAe,GAAG,OAAO,WAAW,GAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAE3E;AAOO,SAAS,cACd,OACA;AACA,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,OAAO,WAAW,SAAS;AAAA;AAAA,EAClD;AAEJ;AAOO,SAAS,gBACd,OACA;AACA,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,SAAS,SAAS;AACxB,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAOO,SAAS,oBAAoB,OAA6B;AAC/D,SAAO,oBAAC,SAAS,aAAT,EAAsB,GAAG,OAAO;AAC1C;AAQO,SAAS,cAAc,OAA2B;AACvD,QAAM,SAAS,SAAS;AACxB,SACE,oBAAC,SAAS,OAAT,EAAgB,GAAG,OAAO,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE7E;","names":[]}

package/build/modern/{chunk-YOTXFCCC.js → chunk-F2MWSSK2.js}

@@ -1,9 +1,9 @@
 import {
   Show
-} from "./chunk-BUVVRQLZ.js";
+} from "./chunk-VEAC4I3F.js";
 
 // src/components/deprecated/NavMenuLink.tsx
-import { css, cx } from "@cerberus/styled-system/css";
+import { css, cx } from "styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function NavMenuLink(props) {
   const { as, ...nativeProps } = props;
@@ -45,4 +45,4 @@ function NavMenuLink(props) {
 export {
   NavMenuLink
 };
-//# sourceMappingURL=chunk-YOTXFCCC.js.map
+//# sourceMappingURL=chunk-F2MWSSK2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from 'styled-system/css'\nimport { Show } from '../Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The element type to render as. Recommended to use for Next apps with the\n   * `Link` component.\n   */\n  as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenuLink(props: NavMenuLinkProps) {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAkCd;AAdH,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-XVOEBY5S.js → chunk-F3XFJHGR.js}

@@ -1,16 +1,16 @@
 import {
   DialogCloseTrigger
-} from "./chunk-D7UIWAFO.js";
-import {
-  IconButton
-} from "./chunk-SRNDDY5D.js";
+} from "./chunk-SSR3CWJZ.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  IconButton
+} from "./chunk-UH6XSYYD.js";
 
 // src/components/dialog/close-icon-trigger.tsx
-import { dialog } from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
+import { dialog } from "styled-system/recipes";
+import { cx } from "styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function DialogCloseIconTrigger(props) {
   const styles = dialog();
@@ -39,4 +39,4 @@ function DialogCloseIconTrigger(props) {
 export {
   DialogCloseIconTrigger
 };
-//# sourceMappingURL=chunk-XVOEBY5S.js.map
+//# sourceMappingURL=chunk-F3XFJHGR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialog/close-icon-trigger.tsx"],"sourcesContent":["'use client'\n\nimport { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../IconButton'\nimport { DialogCloseTrigger } from './primitives'\nimport { dialog } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module contains the close trigger for the dialog.\n * @module react/dialog\n */\n\nexport function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {\n  const styles = dialog()\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <DialogCloseTrigger\n      {...props}\n      className={cx(styles.closeTrigger, props.className)}\n      asChild\n    >\n      <IconButton\n        ariaLabel=\"Close dialog\"\n        palette=\"action\"\n        size=\"lg\"\n        usage=\"ghost\"\n      >\n        <CloseIcon />\n      </IconButton>\n    </DialogCloseTrigger>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,cAAc;AACvB,SAAS,UAAU;AAyBX;AAlBD,SAAS,uBAAuB,OAAgC;AACrE,QAAM,SAAS,OAAO;AAEtB,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,cAAc,MAAM,SAAS;AAAA,MAClD,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN,8BAAC,aAAU;AAAA;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-EH36PXVP.js → chunk-FAQ3F72W.js}

@@ -1,6 +1,6 @@
 import {
   TabsParts
-} from "./chunk-YUNLWTUB.js";
+} from "./chunk-W337WQTU.js";
 
 // src/components/tabs/tabs.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,4 +21,4 @@ var Tabs = {
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-EH36PXVP.js.map
+//# sourceMappingURL=chunk-FAQ3F72W.js.map

package/build/modern/{chunk-JIZQFTW6.js → chunk-FHNT274F.js}

@@ -26,4 +26,4 @@ function trapFocus(modalRef) {
 export {
   trapFocus
 };
-//# sourceMappingURL=chunk-JIZQFTW6.js.map
+//# sourceMappingURL=chunk-FHNT274F.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\n/**\n * @deprecated will be removed in a future release\n */\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement | null>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":";AAKO,SAAS,UACd,UACyC;AACzC,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,IACtB,SAAS,SAAS,iBAAiB,iBAAiB,KAAK,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/build/modern/{chunk-JF76VIL3.js → chunk-FUTYPCHZ.js}

@@ -9,4 +9,4 @@ function createNavTriggerProps(values) {
 export {
   createNavTriggerProps
 };
-//# sourceMappingURL=chunk-JF76VIL3.js.map
+//# sourceMappingURL=chunk-FUTYPCHZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n  controls: string\n  expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n  ['aria-controls']: string\n  ['aria-expanded']: boolean\n}\n\n/**\n * @deprecated will be removed in a future release\n */\nexport function createNavTriggerProps(\n  values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n  return {\n    ['aria-controls']: values.controls,\n    ['aria-expanded']: values.expanded ?? false,\n  }\n}\n"],"mappings":";AAaO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}

package/build/modern/{chunk-6WS765J3.js → chunk-FXWN3SPS.js}

@@ -1,5 +1,5 @@
 // src/context/navMenu.tsx
-import { css } from "@cerberus/styled-system/css";
+import { css } from "styled-system/css";
 import {
   createContext,
   useCallback,
@@ -48,4 +48,4 @@ export {
   NavMenu,
   useNavMenuContext
 };
-//# sourceMappingURL=chunk-6WS765J3.js.map
+//# sourceMappingURL=chunk-FXWN3SPS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from 'styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement | null>\nexport type NavMenuRef = RefObject<HTMLUListElement | null>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenu(props: PropsWithChildren) {\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const menuRef = useRef<HTMLUListElement | null>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n"],"mappings":";AAEA,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAuDD;AA1BN,IAAM,iBAAiB,cAA0C,IAAI;AAK9D,SAAS,QAAQ,OAA0B;AAChD,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,UAAU,OAAgC,IAAI;AACpD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,oBAAyC;AACvD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-RD2YPFRA.js → chunk-GB7W3YNU.js}

@@ -1,9 +1,9 @@
 import {
   Spinner
-} from "./chunk-7SYJFI5E.js";
+} from "./chunk-AUI74W7J.js";
 import {
   Show
-} from "./chunk-BUVVRQLZ.js";
+} from "./chunk-VEAC4I3F.js";
 
 // src/components/button/button.tsx
 import { ark } from "@ark-ui/react/factory";
@@ -12,11 +12,9 @@ import {
   useContext,
   useMemo
 } from "react";
-import { cx } from "@cerberus/styled-system/css";
-import {
-  button
-} from "@cerberus/styled-system/recipes";
-import { Box } from "@cerberus/styled-system/jsx";
+import { cx } from "styled-system/css";
+import { button } from "styled-system/recipes";
+import { Box } from "styled-system/jsx";
 import { Fragment, jsx } from "react/jsx-runtime";
 var ButtonContext = createContext({
   pending: false
@@ -50,4 +48,4 @@ export {
   Button,
   ButtonIcon
 };
-//# sourceMappingURL=chunk-RD2YPFRA.js.map
+//# sourceMappingURL=chunk-GB7W3YNU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/button/button.tsx"],"sourcesContent":["'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,WAA8B;AACvC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,cAAuC;AAChD,SAAS,WAAW;AAgCd,SAwB6B,UAxB7B;AAnBN,IAAM,gBAAgB,cAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,QAAQ,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,oBAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAC5C,SACE,oBAAC,QAAK,MAAM,SAAS,UAAU,gCAAG,gBAAM,UAAS,GAC/C,8BAAC,OAAI,GAAE,KACL,8BAAC,WAAQ,GACX,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-R7IDIIST.js → chunk-GBCF6DOS.js}

@@ -1,10 +1,10 @@
 import {
   FieldLabel
-} from "./chunk-VNPLKMEM.js";
+} from "./chunk-WEL43I6Y.js";
 
 // src/components/deprecated/Label.tsx
-import { label } from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
+import { label } from "styled-system/recipes";
+import { cx } from "styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function Label(props) {
   const { size, ...nativeProps } = props;
@@ -20,4 +20,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-R7IDIIST.js.map
+//# sourceMappingURL=chunk-GBCF6DOS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/Label.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label, type LabelVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\nimport { FieldLabel } from '../field'\n\n/**\n * This module contains the Label component.\n * @module\n */\nexport type LabelBaseProps = HTMLAttributes<HTMLLabelElement>\nexport type LabelProps = LabelBaseProps & LabelVariantProps\n\n/**\n * @deprecated Use FieldLabel or FieldParts.Label instead.\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { size, ...nativeProps } = props\n  return (\n    <FieldLabel\n      {...nativeProps}\n      className={cx(label({ size }), props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAgBf;AAHG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;","names":[]}

package/build/modern/{chunk-2CVGNLIM.js → chunk-GC6JUHVS.js}

@@ -1,7 +1,7 @@
 import {
   ToggleIndicator,
   ToggleRoot
-} from "./chunk-CIMY2U22.js";
+} from "./chunk-RP6DNLP3.js";
 
 // src/components/toggle/parts.ts
 var ToggleParts = {
@@ -12,4 +12,4 @@ var ToggleParts = {
 export {
   ToggleParts
 };
-//# sourceMappingURL=chunk-2CVGNLIM.js.map
+//# sourceMappingURL=chunk-GC6JUHVS.js.map

package/build/modern/{chunk-IASVL7CW.js → chunk-GUAF4FXQ.js}

@@ -1,7 +1,7 @@
 import {
   SelectItemGroup,
   SelectItemGroupLabel
-} from "./chunk-QCBLRACK.js";
+} from "./chunk-5MUUKSLF.js";
 
 // src/components/select/option-group.tsx
 import { jsx } from "react/jsx-runtime";
@@ -16,4 +16,4 @@ export {
   OptionGroup,
   OptionGroupLabel
 };
-//# sourceMappingURL=chunk-IASVL7CW.js.map
+//# sourceMappingURL=chunk-GUAF4FXQ.js.map

package/build/modern/{chunk-OS73F4SR.js → chunk-GYUCW2QK.js}

@@ -6,7 +6,7 @@ import {
   RatingItemContext,
   RatingLabel,
   RatingRoot
-} from "./chunk-W47QEZD5.js";
+} from "./chunk-IL677ECW.js";
 
 // src/components/rating/parts.tsx
 var RatingParts = {
@@ -22,4 +22,4 @@ var RatingParts = {
 export {
   RatingParts
 };
-//# sourceMappingURL=chunk-OS73F4SR.js.map
+//# sourceMappingURL=chunk-GYUCW2QK.js.map

package/build/modern/{chunk-STLN7BMJ.js → chunk-H2VYN32T.js}

@@ -3,7 +3,7 @@ import {
   RadioGroupItemControl,
   RadioGroupItemHiddenInput,
   RadioGroupItemText
-} from "./chunk-5RTNSVYU.js";
+} from "./chunk-HJ7MAPDD.js";
 
 // src/components/radio/radio.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,4 +19,4 @@ function Radio(props) {
 export {
   Radio
 };
-//# sourceMappingURL=chunk-STLN7BMJ.js.map
+//# sourceMappingURL=chunk-H2VYN32T.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import type { RadioGroupItemProps } from '@ark-ui/react'\nimport { type RadioGroupVariantProps } from 'styled-system/recipes'\nimport {\n  RadioGroupItem,\n  RadioGroupItemControl,\n  RadioGroupItemHiddenInput,\n  RadioGroupItemText,\n} from './primitives'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioProps = RadioGroupVariantProps & RadioGroupItemProps\n\n/**\n * The Radio component is used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/radio\n * @memberof module:Field\n * @example\n * ```tsx\n * <Radio value=\"option1\">Option 1</Radio>\n * ```\n */\nexport function Radio(props: RadioProps) {\n  const { size, children, ...groupProps } = props\n  return (\n    <RadioGroupItem {...groupProps}>\n      <RadioGroupItemControl size={size} />\n      <RadioGroupItemText size={size}>{children}</RadioGroupItemText>\n      <RadioGroupItemHiddenInput />\n    </RadioGroupItem>\n  )\n}\n"],"mappings":";;;;;;;;AA4BI,SACE,KADF;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,MAAM,UAAU,GAAG,WAAW,IAAI;AAC1C,SACE,qBAAC,kBAAgB,GAAG,YAClB;AAAA,wBAAC,yBAAsB,MAAY;AAAA,IACnC,oBAAC,sBAAmB,MAAa,UAAS;AAAA,IAC1C,oBAAC,6BAA0B;AAAA,KAC7B;AAEJ;","names":[]}

package/build/modern/{chunk-BIDE4IJG.js → chunk-H4SH6ORP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-CJFW36DZ.js";
 import {
   Show
-} from "./chunk-BUVVRQLZ.js";
+} from "./chunk-VEAC4I3F.js";
 
 // src/components/FeatureFlag.tsx
 import { jsx } from "react/jsx-runtime";
@@ -15,4 +15,4 @@ function FeatureFlag(props) {
 export {
   FeatureFlag
 };
-//# sourceMappingURL=chunk-BIDE4IJG.js.map
+//# sourceMappingURL=chunk-H4SH6ORP.js.map

package/build/modern/{chunk-5RTNSVYU.js → chunk-HJ7MAPDD.js}

@@ -2,10 +2,8 @@
 import {
   RadioGroup as ArkRadioGroup
 } from "@ark-ui/react/radio-group";
-import { cx } from "@cerberus/styled-system/css";
-import {
-  radioGroup
-} from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { radioGroup } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function RadioGroupRoot(props) {
   const { size, orientation, ...rootProps } = props;
@@ -85,4 +83,4 @@ export {
   RadioGroupItemHiddenInput,
   RadioGroup
 };
-//# sourceMappingURL=chunk-5RTNSVYU.js.map
+//# sourceMappingURL=chunk-HJ7MAPDD.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/radio/primitives.tsx"],"sourcesContent":["import {\n  RadioGroup as ArkRadioGroup,\n  type RadioGroupIndicatorProps,\n  type RadioGroupItemControlProps,\n  type RadioGroupItemHiddenInputProps,\n  type RadioGroupItemProps,\n  type RadioGroupItemTextProps,\n  type RadioGroupLabelProps,\n  type RadioGroupRootProps,\n} from '@ark-ui/react/radio-group'\nimport { cx } from 'styled-system/css'\nimport { radioGroup, type RadioGroupVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Radio primitives\n * @module 'react/radio'\n */\n\n/**\n * The RadioGroupRoot component is used to group radio buttons together.\n */\nexport function RadioGroupRoot(\n  props: RadioGroupRootProps & RadioGroupVariantProps,\n) {\n  const { size, orientation, ...rootProps } = props\n  const styles = radioGroup({ size, orientation })\n  return (\n    <ArkRadioGroup.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The RadioGroupLabel component is used to label a group of radio buttons.\n */\nexport function RadioGroupLabel(props: RadioGroupLabelProps) {\n  const styles = radioGroup()\n  return (\n    <ArkRadioGroup.Label\n      {...props}\n      className={cx(styles.label, props.className)}\n    />\n  )\n}\n\n/**\n * The RadioGroupIndicator component is used to indicate the selected radio\n * button in a group.\n */\nexport function RadioGroupIndicator(props: RadioGroupIndicatorProps) {\n  const styles = radioGroup()\n  return (\n    <ArkRadioGroup.Indicator\n      {...props}\n      className={cx(styles.indicator, props.className)}\n    />\n  )\n}\n\n/**\n * The RadioGroupItem component is used to render a single radio button in a\n * group.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const styles = radioGroup()\n  return (\n    <ArkRadioGroup.Item\n      {...props}\n      className={cx(styles.item, props.className)}\n    />\n  )\n}\n\n/**\n * The RadioGroupItemText component is used to render the text label for a\n * single radio button in a group.\n */\nexport function RadioGroupItemText(\n  props: RadioGroupItemTextProps & RadioGroupVariantProps,\n) {\n  const { size, orientation, ...itemTextProps } = props\n  const styles = radioGroup({ size, orientation })\n  return (\n    <ArkRadioGroup.ItemText\n      {...itemTextProps}\n      className={cx(styles.itemText, itemTextProps.className)}\n    />\n  )\n}\n\n/**\n * The RadioGroupItemControl component is used to render the control for a\n * single radio button in a group.\n */\nexport function RadioGroupItemControl(\n  props: RadioGroupItemControlProps & RadioGroupVariantProps,\n) {\n  const { size, orientation, ...itemControlProps } = props\n  const styles = radioGroup({ size, orientation })\n  return (\n    <ArkRadioGroup.ItemControl\n      {...itemControlProps}\n      className={cx(styles.itemControl, itemControlProps.className)}\n    />\n  )\n}\n\n/**\n * The RadioGroupItemHiddenInput component is used to render the hidden input\n * for a single radio button in a group.\n */\nexport function RadioGroupItemHiddenInput(\n  props: RadioGroupItemHiddenInputProps,\n) {\n  return <ArkRadioGroup.ItemHiddenInput {...props} />\n}\n\nexport const RadioGroup = RadioGroupRoot\n"],"mappings":";AAAA;AAAA,EACE,cAAc;AAAA,OAQT;AACP,SAAS,UAAU;AACnB,SAAS,kBAA+C;AAgBpD;AANG,SAAS,eACd,OACA;AACA,QAAM,EAAE,MAAM,aAAa,GAAG,UAAU,IAAI;AAC5C,QAAM,SAAS,WAAW,EAAE,MAAM,YAAY,CAAC;AAC/C,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,SAAS,WAAW;AAC1B,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS;AAAA;AAAA,EAC7C;AAEJ;AAMO,SAAS,oBAAoB,OAAiC;AACnE,QAAM,SAAS,WAAW;AAC1B,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAMO,SAAS,eAAe,OAA4B;AACzD,QAAM,SAAS,WAAW;AAC1B,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,MAAM,SAAS;AAAA;AAAA,EAC5C;AAEJ;AAMO,SAAS,mBACd,OACA;AACA,QAAM,EAAE,MAAM,aAAa,GAAG,cAAc,IAAI;AAChD,QAAM,SAAS,WAAW,EAAE,MAAM,YAAY,CAAC;AAC/C,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,UAAU,cAAc,SAAS;AAAA;AAAA,EACxD;AAEJ;AAMO,SAAS,sBACd,OACA;AACA,QAAM,EAAE,MAAM,aAAa,GAAG,iBAAiB,IAAI;AACnD,QAAM,SAAS,WAAW,EAAE,MAAM,YAAY,CAAC;AAC/C,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,aAAa,iBAAiB,SAAS;AAAA;AAAA,EAC9D;AAEJ;AAMO,SAAS,0BACd,OACA;AACA,SAAO,oBAAC,cAAc,iBAAd,EAA+B,GAAG,OAAO;AACnD;AAEO,IAAM,aAAa;","names":[]}

package/build/modern/{chunk-HUN7VQBT.js → chunk-I4EGYD24.js}

@@ -4,7 +4,7 @@ import {
   SwitchLabel,
   SwitchRoot,
   SwitchThumb
-} from "./chunk-LZWNHXRP.js";
+} from "./chunk-3DZW23OX.js";
 
 // src/components/switch/parts.ts
 var SwitchParts = {
@@ -18,4 +18,4 @@ var SwitchParts = {
 export {
   SwitchParts
 };
-//# sourceMappingURL=chunk-HUN7VQBT.js.map
+//# sourceMappingURL=chunk-I4EGYD24.js.map

package/build/modern/chunk-I5RGBB57.js

@@ -0,0 +1,13 @@
+// src/components/for.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+function For(props) {
+  if (!props.each || !props.each.length) {
+    return props.fallback || null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.each?.map(props.children) });
+}
+
+export {
+  For
+};
+//# sourceMappingURL=chunk-I5RGBB57.js.map

package/build/modern/{chunk-DXOKSZVQ.js.map → chunk-I5RGBB57.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/for.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n  /**\n   * The array to iterate over.\n   */\n  each: T | undefined | null | false\n  /**\n   * The fallback to render when the array is empty.\n   */\n  fallback?: JSX.Element\n  /**\n   * The children to render for each item in the array.\n   */\n  children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n *   {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n  props: ForProps<T, U>,\n) {\n  if (!props.each || !props.each.length) {\n    return props.fallback || null\n  }\n\n  return props.each?.map(props.children) as ReactNode\n}\n"],"mappings":";AA6BO,SAAS,IACd,OACA;AACA,MAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,KAAK,QAAQ;AACrC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SAAO,MAAM,MAAM,IAAI,MAAM,QAAQ;AACvC;","names":[]}
+{"version":3,"sources":["../../src/components/for.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n  /**\n   * The array to iterate over.\n   */\n  each: T | undefined | null | false\n  /**\n   * The fallback to render when the array is empty.\n   */\n  fallback?: JSX.Element\n  /**\n   * The children to render for each item in the array.\n   */\n  children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n *   {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n  props: ForProps<T, U>,\n) {\n  if (!props.each || !props.each.length) {\n    return props.fallback || null\n  }\n\n  return <>{props.each?.map(props.children) as ReactNode}</>\n}\n"],"mappings":";AAoCS;AAPF,SAAS,IACd,OACA;AACA,MAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,KAAK,QAAQ;AACrC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SAAO,gCAAG,gBAAM,MAAM,IAAI,MAAM,QAAQ,GAAe;AACzD;","names":[]}