@cerberus-design/react 0.7.1 → 0.7.2-next-702616b

package/build/legacy/index.js

@@ -1,29 +1,29 @@
 import {
   Toggle
-} from "./chunk-TAZI77TP.js";
+} from "./chunk-JWQJLOX4.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-D3ZXZA3U.js";
+} from "./chunk-XGNAFSMG.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-DGPLSWFJ.js";
+} from "./chunk-7CZ3NIGH.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
 import {
   Radio
-} from "./chunk-WE3JNSNO.js";
+} from "./chunk-PH64POOB.js";
 import {
   Tab
-} from "./chunk-JI4YTPEJ.js";
+} from "./chunk-NE5NHILF.js";
 import {
   TabList
-} from "./chunk-X2JMXTBH.js";
+} from "./chunk-ISPTI4GC.js";
 import {
   TabPanel
-} from "./chunk-67S42J4B.js";
+} from "./chunk-U72VPIZA.js";
 import {
   Tag
 } from "./chunk-EVEEQRH6.js";
@@ -32,19 +32,19 @@ import {
 } from "./chunk-TCO46FK7.js";
 import {
   Modal
-} from "./chunk-TPFNVGYA.js";
+} from "./chunk-2UFNQM55.js";
 import {
   ModalDescription
-} from "./chunk-UPODPCRD.js";
+} from "./chunk-4M4LCQ43.js";
 import {
   ModalHeader
-} from "./chunk-2F5TB2EV.js";
+} from "./chunk-QU7UV5DB.js";
 import {
   ModalHeading
-} from "./chunk-OGSAAB6K.js";
+} from "./chunk-JB7IQ2BM.js";
 import {
   ModalIcon
-} from "./chunk-G3JEWPLM.js";
+} from "./chunk-JJP2TFTU.js";
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
@@ -104,12 +104,12 @@ import {
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-KFUXGX33.js";
+} from "./chunk-GKUDLVOV.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "./chunk-7KJIZIAU.js";
+} from "./chunk-KF24CS4S.js";
 import {
   trapFocus
 } from "./chunk-KESKDLX6.js";

package/build/modern/_tsup-dts-rollup.d.ts

@@ -14,22 +14,21 @@ import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import type { KeyboardEventHandler } from 'react';
 import { label } from '@cerberus/styled-system/recipes';
-import { ModalIconVariantProps } from '@cerberus-design/styled-system/recipes';
+import { ModalIconVariantProps } from '@cerberus/styled-system/recipes';
 import { MutableRefObject } from 'react';
-import type { Pretty } from '@cerberus-design/styled-system/types';
+import type { Pretty } from '@cerberus/styled-system/types';
 import { PropsWithChildren } from 'react';
-import { radio } from '@cerberus-design/styled-system/recipes';
+import { radio } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RecipeVariantProps } from '@cerberus/styled-system/css';
-import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
-import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
+import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus/styled-system/types';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
-import { TabsVariantProps } from '@cerberus-design/styled-system/recipes';
+import { TabsVariantProps } from '@cerberus/styled-system/recipes';
 import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
-import { ToggleVariantProps } from '@cerberus-design/styled-system/recipes';
+import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
 
 declare let $cerberusIcons: Required<DefinedIcons>;
 export { $cerberusIcons }
@@ -809,7 +808,7 @@ export { TagProps as TagProps_alias_1 }
  * This module contains the tag component.
  * @module
  */
-declare type TagRecipeProps = RecipeVariantProps_3<typeof tag>;
+declare type TagRecipeProps = RecipeVariantProps_2<typeof tag>;
 export { TagRecipeProps }
 export { TagRecipeProps as TagRecipeProps_alias_1 }
 

package/build/modern/aria-helpers/tabs.aria.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-KFUXGX33.js";
-import "../chunk-7KJIZIAU.js";
+} from "../chunk-GKUDLVOV.js";
+import "../chunk-KF24CS4S.js";
 export {
   useTabsKeyboardNavigation
 };

package/build/{legacy/chunk-TPFNVGYA.js → modern/chunk-2UFNQM55.js}

@@ -1,6 +1,6 @@
 // src/components/Modal.tsx
-import { cx } from "@cerberus-design/styled-system/css";
-import { modal } from "@cerberus-design/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { modal } from "@cerberus/styled-system/recipes";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 function ModalEl(props, ref) {
@@ -18,4 +18,4 @@ var Modal = forwardRef(ModalEl);
 export {
   Modal
 };
-//# sourceMappingURL=chunk-TPFNVGYA.js.map
+//# sourceMappingURL=chunk-2UFNQM55.js.map

package/build/modern/chunk-2UFNQM55.js.map

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

package/build/{legacy/chunk-UPODPCRD.js → modern/chunk-4M4LCQ43.js}

@@ -1,6 +1,6 @@
 // src/components/ModalDescription.tsx
-import { cx } from "@cerberus-design/styled-system/css";
-import { modal } from "@cerberus-design/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { modal } from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function ModalDescription(props) {
   return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().description) });
@@ -9,4 +9,4 @@ function ModalDescription(props) {
 export {
   ModalDescription
 };
-//# sourceMappingURL=chunk-UPODPCRD.js.map
+//# sourceMappingURL=chunk-4M4LCQ43.js.map

package/build/modern/chunk-4M4LCQ43.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalDescription component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n  return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}

package/build/modern/{chunk-WWG5QWXY.js → chunk-FAXDUWAU.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-4CAT3FHV.js";
 import {
   Modal
-} from "./chunk-TPFNVGYA.js";
+} from "./chunk-2UFNQM55.js";
 import {
   ModalDescription
-} from "./chunk-UPODPCRD.js";
+} from "./chunk-4M4LCQ43.js";
 import {
   ModalHeader
-} from "./chunk-2F5TB2EV.js";
+} from "./chunk-QU7UV5DB.js";
 import {
   ModalHeading
-} from "./chunk-OGSAAB6K.js";
+} from "./chunk-JB7IQ2BM.js";
 import {
   ModalIcon
-} from "./chunk-G3JEWPLM.js";
+} from "./chunk-JJP2TFTU.js";
 import {
   Button
 } from "./chunk-2ATICEW3.js";
@@ -50,8 +50,8 @@ import {
   useRef,
   useState
 } from "react";
-import { css } from "@cerberus-design/styled-system/css";
-import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
+import { css } from "@cerberus/styled-system/css";
+import { hstack, vstack } from "@cerberus/styled-system/patterns";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PromptModalContext = createContext(null);
 function PromptModal(props) {
@@ -204,4 +204,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-WWG5QWXY.js.map
+//# sourceMappingURL=chunk-FAXDUWAU.js.map

package/build/modern/chunk-FAXDUWAU.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 { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module\n */\n\nexport interface ShowPromptModalOptions {\n  kind?: 'destructive' | 'non-destructive'\n  heading: string\n  description?: string\n  key: string\n  actionText: string\n  cancelText: string\n}\nexport type PromptShowResult =\n  | ((value: string | PromiseLike<string>) => void)\n  | null\n\nexport interface PromptModalValue {\n  show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport interface PromptModalProviderProps {}\n\n/**\n * Provides a prompt modal to the app.\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 { modalRef, show, close } = useModal()\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n  const focusTrap = trapFocus(modalRef)\n  const PromptIcon = $cerberusIcons.promptModal\n\n  const isValid = useMemo(\n    () => inputValue === content?.key,\n    [inputValue, content],\n  )\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.currentTarget.value)\n    },\n    [content],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(inputValue)\n      }\n      close()\n    },\n    [inputValue, close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <PromptModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\n            <Show\n              when={palette === 'danger'}\n              fallback={\n                <ModalIcon palette=\"action\">\n                  <PromptIcon size={24} />\n                </ModalIcon>\n              }\n            >\n              <ModalIcon palette=\"danger\">\n                <PromptIcon size={24} />\n              </ModalIcon>\n            </Show>\n            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\n\n          <div\n            className={vstack({\n              alignItems: 'flex-start',\n              mt: '4',\n              mb: '8',\n            })}\n          >\n            <Field invalid={!isValid}>\n              <Label htmlFor=\"confirm\" size=\"md\">\n                Type\n                <strong\n                  className={css({\n                    textTransform: 'uppercase',\n                  })}\n                >\n                  {content?.key}\n                </strong>\n                to confirm\n              </Label>\n              <Input\n                id=\"confirm\"\n                name=\"confirm\"\n                onChange={handleChange}\n                type=\"text\"\n              />\n            </Field>\n          </div>\n\n          <div\n            className={hstack({\n              justifyContent: 'stretch',\n              gap: '4',\n            })}\n          >\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            <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          </div>\n        </Modal>\n      </Portal>\n    </PromptModalContext.Provider>\n  )\n}\n\nexport function usePromptModal(): PromptModalValue {\n  const context = useContext(PromptModalContext)\n  if (context === null) {\n    throw new Error('usePromptModal must be used within a PromptModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/{chunk-KFUXGX33.js → chunk-GKUDLVOV.js}

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-7KJIZIAU.js";
+} from "./chunk-KF24CS4S.js";
 
 // src/aria-helpers/tabs.aria.ts
 import { useEffect, useState } from "react";
@@ -61,4 +61,4 @@ function useTabsKeyboardNavigation() {
 export {
   useTabsKeyboardNavigation
 };
-//# sourceMappingURL=chunk-KFUXGX33.js.map
+//# sourceMappingURL=chunk-GKUDLVOV.js.map

package/build/{legacy/chunk-X2JMXTBH.js → modern/chunk-ISPTI4GC.js}

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-7KJIZIAU.js";
+} from "./chunk-KF24CS4S.js";
 
 // src/components/TabList.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -29,4 +29,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-X2JMXTBH.js.map
+//# sourceMappingURL=chunk-ISPTI4GC.js.map

package/build/modern/{chunk-OGSAAB6K.js → chunk-JB7IQ2BM.js}

@@ -1,6 +1,6 @@
 // src/components/ModalHeading.tsx
-import { cx } from "@cerberus-design/styled-system/css";
-import { modal } from "@cerberus-design/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { modal } from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function ModalHeading(props) {
   return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().heading) });
@@ -9,4 +9,4 @@ function ModalHeading(props) {
 export {
   ModalHeading
 };
-//# sourceMappingURL=chunk-OGSAAB6K.js.map
+//# sourceMappingURL=chunk-JB7IQ2BM.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalHeading component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

package/build/{legacy/chunk-G3JEWPLM.js → modern/chunk-JJP2TFTU.js}

@@ -1,9 +1,9 @@
 // src/components/ModalIcon.tsx
-import { cx } from "@cerberus-design/styled-system/css";
-import { circle } from "@cerberus-design/styled-system/patterns";
+import { cx } from "@cerberus/styled-system/css";
+import { circle } from "@cerberus/styled-system/patterns";
 import {
   modalIcon
-} from "@cerberus-design/styled-system/recipes";
+} from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function ModalIcon(props) {
   const { palette, ...nativeProps } = props;
@@ -26,4 +26,4 @@ function ModalIcon(props) {
 export {
   ModalIcon
 };
-//# sourceMappingURL=chunk-G3JEWPLM.js.map
+//# sourceMappingURL=chunk-JJP2TFTU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalIcon.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  modalIcon,\n  type ModalIconVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nexport type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>\nexport type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps\n\nexport function ModalIcon(props: PropsWithChildren<ModalIconProps>) {\n  const { palette, ...nativeProps } = props\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        modalIcon({\n          palette,\n        }),\n        circle(),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AASH;AAHG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/build/{legacy/chunk-TAZI77TP.js → modern/chunk-JWQJLOX4.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk-6TXQZ3PB.js";
 
 // src/components/Toggle.tsx
-import { cx } from "@cerberus-design/styled-system/css";
-import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
+import { cx } from "@cerberus/styled-system/css";
+import { hstack, vstack } from "@cerberus/styled-system/patterns";
 import {
   toggle
-} from "@cerberus-design/styled-system/recipes";
+} from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-TAZI77TP.js.map
+//# sourceMappingURL=chunk-JWQJLOX4.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  toggle,\n  type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\nexport type ToggleBase = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'id' | 'value'\n> & {\n  describedBy?: string\n  id: string\n  value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\nexport function Toggle(props: ToggleProps) {\n  const { size, describedBy, ...nativeProps } = props\n  const styles = toggle({ size })\n  const { invalid, ...state } = useFieldContext()\n  const Icon = $cerberusIcons.toggleChecked\n\n  return (\n    <span\n      className={cx('group', styles.track, hstack())}\n      data-checked={props.checked || props.defaultChecked}\n    >\n      <input\n        {...nativeProps}\n        {...state}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', styles.input)}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        className={cx(\n          styles.thumb,\n          vstack({\n            justify: 'center',\n          }),\n        )}\n      >\n        <Icon />\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AAsBH,SAIE,KAJF;AAPG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,aAAa,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS,OAAO,OAAO,OAAO,CAAC;AAAA,MAC7C,gBAAc,MAAM,WAAW,MAAM;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-7KJIZIAU.js → chunk-KF24CS4S.js}

@@ -1,7 +1,5 @@
 // src/context/tabs.tsx
-import {
-  tabs
-} from "@cerberus-design/styled-system/recipes";
+import { tabs } from "@cerberus/styled-system/recipes";
 import {
   createContext,
   useContext,
@@ -57,4 +55,4 @@ export {
   Tabs,
   useTabsContext
 };
-//# sourceMappingURL=chunk-7KJIZIAU.js.map
+//# sourceMappingURL=chunk-KF24CS4S.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module\n */\n\nexport interface TabsContextValue {\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  id: string\n  active: string\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  id?: string\n  active?: string\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @param id - the id of the tabs component,\n * @param active - the default active tab id,\n * @param cache - whether to cache the active tab state in local storage\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";AAEA,SAAS,YAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAiFH;AAlEG,IAAM,cAAc,cAAuC,IAAI;AA2B/D,SAAS,KACd,OACa;AACb,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAQ,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,WAAW,OAA4B,CAAC,CAAC;AAC/C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ,KAAK,EAAE,QAAQ,CAAC;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,SAAS,MAAM,QAAQ;AAAA,EACnD;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/{legacy/chunk-WE3JNSNO.js → modern/chunk-PH64POOB.js}

@@ -3,9 +3,9 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 
 // src/components/Radio.tsx
-import { cx } from "@cerberus-design/styled-system/css";
-import { hstack } from "@cerberus-design/styled-system/patterns";
-import { radio } from "@cerberus-design/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { hstack } from "@cerberus/styled-system/patterns";
+import { radio } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Radio(props) {
   const { children, size, ...nativeProps } = props;
@@ -30,4 +30,4 @@ function Radio(props) {
 export {
   Radio
 };
-//# sourceMappingURL=chunk-WE3JNSNO.js.map
+//# sourceMappingURL=chunk-PH64POOB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Radio.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n  const { children, size, ...nativeProps } = props\n  const { invalid, ...state } = useFieldContext()\n  const styles = radio({ size })\n\n  return (\n    <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n      <input\n        {...nativeProps}\n        {...state}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx(nativeProps.className, styles.input)}\n        tabIndex={-1}\n        type=\"radio\"\n      />\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AAkBlB,SACE,KADF;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAE7B,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,OAAO,GAAG,OAAO,IAAI,GAAG,UAAU,GAC5D;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,QACjD,UAAU;AAAA,QACV,MAAK;AAAA;AAAA,IACP;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/build/modern/{chunk-2F5TB2EV.js → chunk-QU7UV5DB.js}

@@ -1,6 +1,6 @@
 // src/components/ModalHeader.tsx
-import { cx } from "@cerberus-design/styled-system/css";
-import { vstack } from "@cerberus-design/styled-system/patterns";
+import { cx } from "@cerberus/styled-system/css";
+import { vstack } from "@cerberus/styled-system/patterns";
 import { jsx } from "react/jsx-runtime";
 function ModalHeader(props) {
   return /* @__PURE__ */ jsx(
@@ -22,4 +22,4 @@ function ModalHeader(props) {
 export {
   ModalHeader
 };
-//# sourceMappingURL=chunk-2F5TB2EV.js.map
+//# sourceMappingURL=chunk-QU7UV5DB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: '4',\n          mb: '8',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAuBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-HBEEHHON.js → chunk-SONHHNYQ.js}

@@ -1,9 +1,9 @@
 import {
   useTabsKeyboardNavigation
-} from "./chunk-KFUXGX33.js";
+} from "./chunk-GKUDLVOV.js";
 import {
   useTabsContext
-} from "./chunk-7KJIZIAU.js";
+} from "./chunk-KF24CS4S.js";
 
 // src/components/Tab.tsx
 import {
@@ -43,4 +43,4 @@ function Tab(props) {
 export {
   Tab
 };
-//# sourceMappingURL=chunk-HBEEHHON.js.map
+//# sourceMappingURL=chunk-SONHHNYQ.js.map

package/build/modern/{chunk-TAVCJ54A.js → chunk-TPRGGEVJ.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-4CAT3FHV.js";
 import {
   Modal
-} from "./chunk-TPFNVGYA.js";
+} from "./chunk-2UFNQM55.js";
 import {
   ModalDescription
-} from "./chunk-UPODPCRD.js";
+} from "./chunk-4M4LCQ43.js";
 import {
   ModalHeader
-} from "./chunk-2F5TB2EV.js";
+} from "./chunk-QU7UV5DB.js";
 import {
   ModalHeading
-} from "./chunk-OGSAAB6K.js";
+} from "./chunk-JB7IQ2BM.js";
 import {
   ModalIcon
-} from "./chunk-G3JEWPLM.js";
+} from "./chunk-JJP2TFTU.js";
 import {
   Button
 } from "./chunk-2ATICEW3.js";
@@ -41,8 +41,8 @@ import {
   useRef,
   useState
 } from "react";
-import { css } from "@cerberus-design/styled-system/css";
-import { hstack } from "@cerberus-design/styled-system/patterns";
+import { css } from "@cerberus/styled-system/css";
+import { hstack } from "@cerberus/styled-system/patterns";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConfirmModalContext = createContext(null);
 function ConfirmModal(props) {
@@ -151,4 +151,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-TAVCJ54A.js.map
+//# sourceMappingURL=chunk-TPRGGEVJ.js.map

package/build/modern/chunk-TPRGGEVJ.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} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n  kind?: 'destructive' | 'non-destructive'\n  heading: string\n  description?: string\n  actionText: string\n  cancelText: string\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 interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const { modalRef, show, close } = useModal()\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const ConfirmIcon = $cerberusIcons.confirmModal\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      close()\n    },\n    [close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\n            <Show\n              when={palette === 'danger'}\n              fallback={\n                <ModalIcon palette=\"action\">\n                  <ConfirmIcon size={24} />\n                </ModalIcon>\n              }\n            >\n              <ModalIcon palette=\"danger\">\n                <ConfirmIcon size={24} />\n              </ModalIcon>\n            </Show>\n            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\n\n          <div\n            className={hstack({\n              gap: '4',\n            })}\n          >\n            <Button\n              autoFocus\n              className={css({\n                w: '1/2',\n              })}\n              name=\"confirm\"\n              onClick={handleChoice}\n              palette={palette}\n              value=\"true\"\n            >\n              {content?.actionText}\n            </Button>\n            <Button\n              className={css({\n                w: '1/2',\n              })}\n              name=\"cancel\"\n              onClick={handleChoice}\n              usage=\"outlined\"\n              value=\"false\"\n            >\n              {content?.cancelText}\n            </Button>\n          </div>\n        </Modal>\n      </Portal>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,WAAW;AACpB,SAAS,cAAc;AA6Gb,SAKQ,KALR;AA9EV,IAAM,sBAAsB,cAAwC,IAAI;AA4BjE,SAAS,aACd,OACA;AACA,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI,SAAS;AAC3C,QAAM,aAAa,OAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyC,IAAI;AAC3E,QAAM,YAAY,UAAU,QAAQ;AACpC,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU;AAAA,IACd,MAAO,SAAS,SAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAW,UAAU,IAAI;AAAA,MAC3B;AACA,iBAAW,UAAU,KAAK;AAC1B,YAAM;AAAA,IACR;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAqC;AACpC,aAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,aAAK;AACL,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,oBAAoB,UAApB,EAA6B,OAC3B;AAAA,UAAM;AAAA,IAEP,oBAAC,UACC,+BAAC,SAAM,WAAW,WAAW,KAAK,UAChC;AAAA,2BAAC,eACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,YAAY;AAAA,YAClB,UACE,oBAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA,YAGF,8BAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,gBAAc,mBAAS,SAAQ;AAAA,QAChC,oBAAC,oBAAkB,mBAAS,aAAY;AAAA,SAC1C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,KAAK;AAAA,UACP,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAS;AAAA,gBACT,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT;AAAA,gBACA,OAAM;AAAA,gBAEL,mBAAS;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,OAAM;AAAA,gBACN,OAAM;AAAA,gBAEL,mBAAS;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,mBAAmB;AAC9C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-67S42J4B.js → chunk-U72VPIZA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   useTabsContext
-} from "./chunk-7KJIZIAU.js";
+} from "./chunk-KF24CS4S.js";
 
 // src/components/TabPanel.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -29,4 +29,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-67S42J4B.js.map
+//# sourceMappingURL=chunk-U72VPIZA.js.map

package/build/modern/components/Modal.js

@@ -1,6 +1,6 @@
 import {
   Modal
-} from "../chunk-TPFNVGYA.js";
+} from "../chunk-2UFNQM55.js";
 export {
   Modal
 };

package/build/modern/components/ModalDescription.js

@@ -1,6 +1,6 @@
 import {
   ModalDescription
-} from "../chunk-UPODPCRD.js";
+} from "../chunk-4M4LCQ43.js";
 export {
   ModalDescription
 };

package/build/modern/components/ModalHeader.js

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "../chunk-2F5TB2EV.js";
+} from "../chunk-QU7UV5DB.js";
 export {
   ModalHeader
 };

package/build/modern/components/ModalHeading.js

@@ -1,6 +1,6 @@
 import {
   ModalHeading
-} from "../chunk-OGSAAB6K.js";
+} from "../chunk-JB7IQ2BM.js";
 export {
   ModalHeading
 };

package/build/modern/components/ModalIcon.js

@@ -1,6 +1,6 @@
 import {
   ModalIcon
-} from "../chunk-G3JEWPLM.js";
+} from "../chunk-JJP2TFTU.js";
 export {
   ModalIcon
 };

package/build/modern/components/Radio.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Radio
-} from "../chunk-WE3JNSNO.js";
+} from "../chunk-PH64POOB.js";
 import "../chunk-ZAU4JVLL.js";
 export {
   Radio

package/build/modern/components/Tab.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Tab
-} from "../chunk-HBEEHHON.js";
-import "../chunk-KFUXGX33.js";
-import "../chunk-7KJIZIAU.js";
+} from "../chunk-SONHHNYQ.js";
+import "../chunk-GKUDLVOV.js";
+import "../chunk-KF24CS4S.js";
 export {
   Tab
 };

package/build/modern/components/TabList.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   TabList
-} from "../chunk-X2JMXTBH.js";
-import "../chunk-7KJIZIAU.js";
+} from "../chunk-ISPTI4GC.js";
+import "../chunk-KF24CS4S.js";
 export {
   TabList
 };

package/build/modern/components/TabPanel.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   TabPanel
-} from "../chunk-67S42J4B.js";
+} from "../chunk-U72VPIZA.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-7KJIZIAU.js";
+import "../chunk-KF24CS4S.js";
 export {
   TabPanel
 };

package/build/modern/components/Toggle.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Toggle
-} from "../chunk-TAZI77TP.js";
+} from "../chunk-JWQJLOX4.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-6TXQZ3PB.js";
 import "../chunk-C45DY4VE.js";