@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-5d7dc1e

package/build/legacy/components/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Radio.tsx","../../../src/context/field.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\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /**\n   * A unique identifier for the radio button. Required for accessibility.\n   */\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\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 * <Field>\n *  <fieldset name=\"fruit\">\n *    <Radio id=\"radio-1\" name=\"fruit\" value=\"1\">\n *     Option 1\n *    </Radio>\n *    <Radio id=\"radio-2\" name=\"fruit\" value=\"2\">\n *     Option 2\n *    </Radio>\n *    <Radio id=\"radio-3\" name=\"fruit\" value=\"3\">\n *     Option 3\n *    </Radio>\n *   </fieldset>\n * </Field>\n * ```\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\n      className={cx(\n        'group',\n        hstack({\n          gap: 'sm',\n        }),\n        styles.root,\n      )}\n      tabIndex={0}\n    >\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","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;AACvB,qBAAsB;;;ACFtB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ADnBI,IAAAA,sBAAA;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,YACA,wBAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,YACjD,UAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACP;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/Radio.tsx"],"sourcesContent":["import { Field } from '@ark-ui/react/field'\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'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /**\n   * A unique identifier for the radio button. Required for accessibility.\n   */\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\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 * <Field>\n *  <fieldset name=\"fruit\">\n *    <Radio id=\"radio-1\" name=\"fruit\" value=\"1\">\n *     Option 1\n *    </Radio>\n *    <Radio id=\"radio-2\" name=\"fruit\" value=\"2\">\n *     Option 2\n *    </Radio>\n *    <Radio id=\"radio-3\" name=\"fruit\" value=\"3\">\n *     Option 3\n *    </Radio>\n *   </fieldset>\n * </Field>\n * ```\n */\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n  const { children, size, ...nativeProps } = props\n  const styles = radio({ size })\n\n  return (\n    <div\n      className={cx(\n        'group',\n        hstack({\n          gap: 'sm',\n        }),\n        styles.root,\n      )}\n      tabIndex={0}\n    >\n      <Field.Input\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.input)}\n        tabIndex={-1}\n        type=\"radio\"\n      />\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,iBAAmB;AACnB,sBAAuB;AACvB,qBAAsB;AA6ClB;AALG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,YACA,wBAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC,mBAAM;AAAA,UAAN;AAAA,YACE,GAAG;AAAA,YACJ,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,YACjD,UAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACP;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/build/legacy/components/Select.cjs

@@ -31,7 +31,7 @@ module.exports = __toCommonJS(Select_exports);
 var import_select2 = require("@ark-ui/react/select");
 var import_recipes = require("@cerberus/styled-system/recipes");
 var import_css = require("@cerberus/styled-system/css");
-var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_jsx = require("@cerberus/styled-system/jsx");
 
 // src/context/cerberus.tsx
 var import_react = require("react");
@@ -60,45 +60,14 @@ function Show(props) {
   }, [condition, children, fallback]);
 }
 
-// src/components/Text.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Text(props) {
-  const { as = "p", ...pandaJSXProps } = props;
-  switch (as) {
-    case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H1, { ...pandaJSXProps });
-    case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H2, { ...pandaJSXProps });
-    case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H3, { ...pandaJSXProps });
-    case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H4, { ...pandaJSXProps });
-    case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H5, { ...pandaJSXProps });
-    case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H6, { ...pandaJSXProps });
-    case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Strong, { ...pandaJSXProps });
-    case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Em, { ...pandaJSXProps });
-    case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Small, { ...pandaJSXProps });
-    case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Span, { ...pandaJSXProps });
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.P, { ...pandaJSXProps });
-  }
-}
-
 // src/components/Select.server.tsx
 var import_select = require("@ark-ui/react/select");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function SelectRoot(props) {
   const { children, ...rootProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_select.Select.Root, { ...rootProps, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_select.Select.Root, { ...rootProps, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.HiddenSelect, {})
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.HiddenSelect, {})
   ] });
 }
 var SelectLabel = import_select.Select.Label;
@@ -116,26 +85,22 @@ var SelectItemText = import_select.Select.ItemText;
 var SelectItemIndicator = import_select.Select.ItemIndicator;
 
 // src/components/Select.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Select(props) {
-  const { collection, label, placeholder, size, ...rootProps } = props;
+  const { collection, placeholder, size, ...rootProps } = props;
   const { icons } = useCerberusContext();
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
   const styles = (0, import_recipes.select)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectRoot, { className: styles.root, collection, ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectLabel, { className: styles.label, children: [
-      label,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: props.required, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { as: "span", color: "page.text.100", children: "(required)" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectControl, { className: styles.control, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectTrigger, { className: styles.trigger, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectValueText, { placeholder }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx2.HStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: props.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InvalidIcon, { "data-part": "invalid-icon" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectIndicator, { className: styles.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectArrow, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectRoot, { className: styles.root, collection, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectControl, { className: styles.control, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectTrigger, { className: styles.trigger, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectValueText, { placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx.HStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: props.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InvalidIcon, { "data-part": "invalid-icon" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectIndicator, { className: styles.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectArrow, {}) })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectContent, { className: styles.content, children: props.children }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select2.Select.HiddenSelect, {})
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectContent, { className: styles.content, children: props.children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select2.Select.HiddenSelect, {})
   ] });
 }
 function Option(props) {
@@ -143,17 +108,17 @@ function Option(props) {
   const { icons } = useCerberusContext();
   const { selectChecked: CheckedIcon } = icons;
   const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectItem, { ...itemProps, item, className: styles.item, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectItemText, { className: styles.itemText, children: item == null ? void 0 : item.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckedIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectItem, { ...itemProps, item, className: styles.item, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectItemText, { className: styles.itemText, children: item == null ? void 0 : item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckedIcon, {}) })
   ] });
 }
 function OptionGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectItemGroup, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectItemGroup, { ...props });
 }
 function OptionGroupLabel(props) {
   const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     SelectItemGroupLabel,
     {
       ...props,

package/build/legacy/components/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select.tsx","../../../src/context/cerberus.tsx","../../../src/components/Portal.tsx","../../../src/components/Show.tsx","../../../src/components/Text.tsx","../../../src/components/Select.server.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Select as ArkSelect,\n  createListCollection,\n  type SelectRootProps,\n  type SelectItemProps,\n  type SelectItemGroupProps,\n  type SelectItemGroupLabelProps,\n  type ListCollection,\n  type SelectValueChangeDetails,\n} from '@ark-ui/react/select'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Portal } from './Portal'\nimport { Show } from './Show'\nimport { Text } from './Text'\nimport {\n  SelectContent,\n  SelectControl,\n  SelectIndicator,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectPositioner,\n  SelectRoot,\n  SelectTrigger,\n  SelectValueText,\n} from './Select.server'\n\n/**\n * This module contains the Select components.\n * @module 'react/select'\n */\n\nexport interface SelectCollectionItem {\n  /**\n   * What is displayed in the dropdown list.\n   */\n  label: string\n  /**\n   * The value of the selected item used in the form.\n   */\n  value: string\n  /**\n   * If the item is disabled.\n   */\n  disabled?: boolean\n}\n\nexport interface SelectCollection {\n  /**\n   * The items to be displayed in the dropdown list.\n   */\n  items: SelectCollectionItem[]\n}\n\nexport interface BaseSelectProps {\n  /**\n   * The placeholder text when no option is selected.\n   */\n  placeholder?: string\n  /**\n   * The label of the select.\n   */\n  label: string\n}\n\nexport type SelectProps = SelectRootProps<SelectCollectionItem> &\n  BaseSelectProps &\n  SelectVariantProps\n\n/**\n * The Select component is a dropdown list that allows users to select an\n * option from a list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * import { Select, Option, createListCollection } from '@cerberus-design/react'\n *\n * export function SelectBasicPreview() {\n *  const collection = createListCollection({\n *   items: [\n *    { label: 'Hades', value: 'hades' },\n *    { label: 'Persephone', value: 'persephone' },\n *    { label: 'Zeus', value: 'zeus', disabled: true },\n *   ]\n *  })\n *\n *  return (\n *   <Select\n *    collection={collection}\n *    label=\"Select Relative\"\n *    placeholder=\"Choose option\"\n *   >\n *   {collection.items.map((item) => (\n *    <Option key={item.value} item={item} />\n *   ))}\n *  </Select>\n *  )\n * }\n */\nexport function Select(props: SelectProps) {\n  const { collection, label, placeholder, size, ...rootProps } = props\n  const { icons } = useCerberusContext()\n  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons\n\n  const styles = select({ size })\n\n  return (\n    <SelectRoot className={styles.root} collection={collection} {...rootProps}>\n      <SelectLabel className={styles.label}>\n        {label}\n        <Show when={props.required}>\n          <Text as=\"span\" color=\"page.text.100\">\n            (required)\n          </Text>\n        </Show>\n      </SelectLabel>\n\n      <SelectControl className={styles.control}>\n        <SelectTrigger className={styles.trigger}>\n          <SelectValueText placeholder={placeholder} />\n\n          <HStack>\n            <Show when={props.invalid}>\n              <InvalidIcon data-part=\"invalid-icon\" />\n            </Show>\n            <SelectIndicator className={styles.indicator}>\n              <SelectArrow />\n            </SelectIndicator>\n          </HStack>\n        </SelectTrigger>\n      </SelectControl>\n\n      <Portal>\n        <SelectPositioner className={styles.positioner}>\n          <SelectContent className={styles.content}>\n            {props.children}\n          </SelectContent>\n        </SelectPositioner>\n      </Portal>\n\n      <ArkSelect.HiddenSelect />\n    </SelectRoot>\n  )\n}\n\nexport interface OptionProps extends SelectItemProps {\n  /**\n   * The CollectionListItem to be displayed in the dropdown list.\n   */\n  item: SelectCollectionItem\n}\n\nexport function Option(props: OptionProps) {\n  const { item, ...itemProps } = props\n\n  const { icons } = useCerberusContext()\n  const { selectChecked: CheckedIcon } = icons\n\n  const styles = select()\n\n  return (\n    <SelectItem {...itemProps} item={item} className={styles.item}>\n      <SelectItemText className={styles.itemText}>{item?.label}</SelectItemText>\n      <SelectItemIndicator className={styles.itemIndicator}>\n        <CheckedIcon />\n      </SelectItemIndicator>\n    </SelectItem>\n  )\n}\n\n/**\n * The OptionGroup component is a group of options in the dropdown list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroup>\n *  <OptionGroupLabel>Greek gods</OptionGroupLabel>\n *  ...\n * </OptionGroup>\n * ```\n */\nexport function OptionGroup(props: SelectItemGroupProps) {\n  return <SelectItemGroup {...props} />\n}\n\n/**\n * The OptionGroupLabel component is the label of the OptionGroup.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ```\n */\nexport function OptionGroupLabel(props: SelectItemGroupLabelProps) {\n  const styles = select()\n  return (\n    <SelectItemGroupLabel\n      {...props}\n      className={cx(props.className, styles.itemGroupLabel)}\n    />\n  )\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import {\n  Em,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  P,\n  Small,\n  Span,\n  Strong,\n  type PProps,\n} from '@cerberus/styled-system/jsx'\nimport { type HTMLAttributes, type PropsWithChildren } from 'react'\n\n/**\n * This module exports a component for rendering text utilizing the styled-system JSX utility.\n * @module @cerberus/react/Text\n */\n\nexport type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'\n\n// For some reason we have to use the HTMLParagraphElement type here\n// or else TS will fail for non-style props like 'id' or 'className'\nexport interface TextProps\n  extends PProps,\n    HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * The element to render as. Defaults to 'p'.\n   */\n  as?: TextElements | Headings\n}\n\n/**\n * A component for rendering text utilizing the styled-system JSX utility.\n * @definition [Text docs](https://cerberus.digitalu.design/react/text)\n * @example\n * ```tsx\n * <Text as=\"h1\" color=\"page.text.100\" textStyle={{\n *   base: 'heading-md',\n *   md: 'heading-lg',\n * }}>\n *  Hello, world!\n * </Text>\n */\nexport function Text(props: PropsWithChildren<TextProps>) {\n  const { as = 'p', ...pandaJSXProps } = props\n  switch (as) {\n    case 'h1':\n      return <H1 {...pandaJSXProps} />\n    case 'h2':\n      return <H2 {...pandaJSXProps} />\n    case 'h3':\n      return <H3 {...pandaJSXProps} />\n    case 'h4':\n      return <H4 {...pandaJSXProps} />\n    case 'h5':\n      return <H5 {...pandaJSXProps} />\n    case 'h6':\n      return <H6 {...pandaJSXProps} />\n    case 'strong':\n      return <Strong {...pandaJSXProps} />\n    case 'em':\n      return <Em {...pandaJSXProps} />\n    case 'small':\n      return <Small {...pandaJSXProps} />\n    case 'span':\n      return <Span {...pandaJSXProps} />\n    default:\n      return <P {...pandaJSXProps} />\n  }\n}\n","import { Select as ArkSelect, type SelectRootProps } from '@ark-ui/react/select'\nimport type { SelectCollectionItem } from './Select'\n\n/**\n * Select Primitive: The context provider for the Select family\n */\nexport function SelectRoot(props: SelectRootProps<SelectCollectionItem>) {\n  const { children, ...rootProps } = props\n  return (\n    <ArkSelect.Root {...rootProps}>\n      {children}\n      <ArkSelect.HiddenSelect />\n    </ArkSelect.Root>\n  )\n}\n\n/**\n * Select Primitive: The label that appears above the select input\n */\nexport const SelectLabel = ArkSelect.Label\n\n/**\n * Select Primitive: The wrapper to the select trigger that opens the dropdown\n */\nexport const SelectControl = ArkSelect.Control\n\n/**\n * Select Primitive: The trigger that opens the dropdown\n */\nexport const SelectTrigger = ArkSelect.Trigger\n\n/**\n * Select Primitive: The text that appears in the trigger\n */\nexport const SelectValueText = ArkSelect.ValueText\n\n/**\n * Select Primitive: The indicator that appears in the trigger\n */\nexport const SelectIndicator = ArkSelect.Indicator\n\n/**\n * Select Primitive: The trigger that clears the selected value\n */\nexport const SelectClearTrigger = ArkSelect.ClearTrigger\n\n/**\n * Select Primitive: The positioner that contains the dropdown\n */\nexport const SelectPositioner = ArkSelect.Positioner\n\n/**\n * Select Primitive: The content of the dropdown (i.e. the container itself)\n */\nexport const SelectContent = ArkSelect.Content\n\n/**\n * Select Primitive: The container for a group of item options\n */\nexport const SelectItemGroup = ArkSelect.ItemGroup\n\n/**\n * Select Primitive: The label for a group of item options\n */\nexport const SelectItemGroupLabel = ArkSelect.ItemGroupLabel\n\n/**\n * Select Primitive: The container for an item option\n */\nexport const SelectItem = ArkSelect.Item\n\n/**\n * Select Primitive: The text for an item option\n */\nexport const SelectItemText = ArkSelect.ItemText\n\n/**\n * Select Primitive: The indicator for an item option\n */\nexport const SelectItemIndicator = ArkSelect.ItemIndicator\n"],"mappings":"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","names":["import_select","import_jsx","import_react","ArkPortal","import_react","import_jsx_runtime","import_jsx_runtime","ArkSelect","import_jsx_runtime","ArkSelect"]}
+{"version":3,"sources":["../../../src/components/Select.tsx","../../../src/context/cerberus.tsx","../../../src/components/Portal.tsx","../../../src/components/Show.tsx","../../../src/components/Select.server.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Select as ArkSelect,\n  createListCollection,\n  type SelectRootProps,\n  type SelectItemProps,\n  type SelectItemGroupProps,\n  type SelectItemGroupLabelProps,\n  type ListCollection,\n  type SelectValueChangeDetails,\n} from '@ark-ui/react/select'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Portal } from './Portal'\nimport { Show } from './Show'\nimport {\n  SelectContent,\n  SelectControl,\n  SelectIndicator,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPositioner,\n  SelectRoot,\n  SelectTrigger,\n  SelectValueText,\n} from './Select.server'\n\n/**\n * This module contains the Select components.\n * @module 'react/select'\n */\n\nexport interface SelectCollectionItem {\n  /**\n   * What is displayed in the dropdown list.\n   */\n  label: string\n  /**\n   * The value of the selected item used in the form.\n   */\n  value: string\n  /**\n   * If the item is disabled.\n   */\n  disabled?: boolean\n}\n\nexport interface SelectCollection {\n  /**\n   * The items to be displayed in the dropdown list.\n   */\n  items: SelectCollectionItem[]\n}\n\nexport interface BaseSelectProps {\n  /**\n   * The placeholder text when no option is selected.\n   */\n  placeholder?: string\n}\n\nexport type SelectProps = SelectRootProps<SelectCollectionItem> &\n  BaseSelectProps &\n  SelectVariantProps\n\n/**\n * The Select component is a dropdown list that allows users to select an\n * option from a list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * import { Select, Option, createListCollection } from '@cerberus-design/react'\n *\n * export function SelectBasicPreview() {\n *  const collection = createListCollection({\n *   items: [\n *    { label: 'Hades', value: 'hades' },\n *    { label: 'Persephone', value: 'persephone' },\n *    { label: 'Zeus', value: 'zeus', disabled: true },\n *   ]\n *  })\n *\n *  return (\n *   <Select\n *    collection={collection}\n *    label=\"Select Relative\"\n *    placeholder=\"Choose option\"\n *   >\n *   {collection.items.map((item) => (\n *    <Option key={item.value} item={item} />\n *   ))}\n *  </Select>\n *  )\n * }\n */\nexport function Select(props: SelectProps) {\n  const { collection, placeholder, size, ...rootProps } = props\n  const { icons } = useCerberusContext()\n  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons\n\n  const styles = select({ size })\n\n  return (\n    <SelectRoot className={styles.root} collection={collection} {...rootProps}>\n      <SelectControl className={styles.control}>\n        <SelectTrigger className={styles.trigger}>\n          <SelectValueText placeholder={placeholder} />\n\n          <HStack>\n            <Show when={props.invalid}>\n              <InvalidIcon data-part=\"invalid-icon\" />\n            </Show>\n            <SelectIndicator className={styles.indicator}>\n              <SelectArrow />\n            </SelectIndicator>\n          </HStack>\n        </SelectTrigger>\n      </SelectControl>\n\n      <Portal>\n        <SelectPositioner className={styles.positioner}>\n          <SelectContent className={styles.content}>\n            {props.children}\n          </SelectContent>\n        </SelectPositioner>\n      </Portal>\n\n      <ArkSelect.HiddenSelect />\n    </SelectRoot>\n  )\n}\n\nexport interface OptionProps extends SelectItemProps {\n  /**\n   * The CollectionListItem to be displayed in the dropdown list.\n   */\n  item: SelectCollectionItem\n}\n\nexport function Option(props: OptionProps) {\n  const { item, ...itemProps } = props\n\n  const { icons } = useCerberusContext()\n  const { selectChecked: CheckedIcon } = icons\n\n  const styles = select()\n\n  return (\n    <SelectItem {...itemProps} item={item} className={styles.item}>\n      <SelectItemText className={styles.itemText}>{item?.label}</SelectItemText>\n      <SelectItemIndicator className={styles.itemIndicator}>\n        <CheckedIcon />\n      </SelectItemIndicator>\n    </SelectItem>\n  )\n}\n\n/**\n * The OptionGroup component is a group of options in the dropdown list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroup>\n *  <OptionGroupLabel>Greek gods</OptionGroupLabel>\n *  ...\n * </OptionGroup>\n * ```\n */\nexport function OptionGroup(props: SelectItemGroupProps) {\n  return <SelectItemGroup {...props} />\n}\n\n/**\n * The OptionGroupLabel component is the label of the OptionGroup.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ```\n */\nexport function OptionGroupLabel(props: SelectItemGroupLabelProps) {\n  const styles = select()\n  return (\n    <SelectItemGroupLabel\n      {...props}\n      className={cx(props.className, styles.itemGroupLabel)}\n    />\n  )\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import { Select as ArkSelect, type SelectRootProps } from '@ark-ui/react/select'\nimport type { SelectCollectionItem } from './Select'\n\n/**\n * Select Primitive: The context provider for the Select family\n */\nexport function SelectRoot(props: SelectRootProps<SelectCollectionItem>) {\n  const { children, ...rootProps } = props\n  return (\n    <ArkSelect.Root {...rootProps}>\n      {children}\n      <ArkSelect.HiddenSelect />\n    </ArkSelect.Root>\n  )\n}\n\n/**\n * Select Primitive: The label that appears above the select input\n */\nexport const SelectLabel = ArkSelect.Label\n\n/**\n * Select Primitive: The wrapper to the select trigger that opens the dropdown\n */\nexport const SelectControl = ArkSelect.Control\n\n/**\n * Select Primitive: The trigger that opens the dropdown\n */\nexport const SelectTrigger = ArkSelect.Trigger\n\n/**\n * Select Primitive: The text that appears in the trigger\n */\nexport const SelectValueText = ArkSelect.ValueText\n\n/**\n * Select Primitive: The indicator that appears in the trigger\n */\nexport const SelectIndicator = ArkSelect.Indicator\n\n/**\n * Select Primitive: The trigger that clears the selected value\n */\nexport const SelectClearTrigger = ArkSelect.ClearTrigger\n\n/**\n * Select Primitive: The positioner that contains the dropdown\n */\nexport const SelectPositioner = ArkSelect.Positioner\n\n/**\n * Select Primitive: The content of the dropdown (i.e. the container itself)\n */\nexport const SelectContent = ArkSelect.Content\n\n/**\n * Select Primitive: The container for a group of item options\n */\nexport const SelectItemGroup = ArkSelect.ItemGroup\n\n/**\n * Select Primitive: The label for a group of item options\n */\nexport const SelectItemGroupLabel = ArkSelect.ItemGroupLabel\n\n/**\n * Select Primitive: The container for an item option\n */\nexport const SelectItem = ArkSelect.Item\n\n/**\n * Select Primitive: The text for an item option\n */\nexport const SelectItemText = ArkSelect.ItemText\n\n/**\n * Select Primitive: The indicator for an item option\n */\nexport const SelectItemIndicator = ArkSelect.ItemIndicator\n"],"mappings":"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","names":["import_select","import_react","ArkPortal","import_react","import_jsx_runtime","ArkSelect","import_jsx_runtime","ArkSelect"]}

package/build/legacy/components/Toggle.cjs

@@ -24,28 +24,17 @@ __export(Toggle_exports, {
   Toggle: () => Toggle
 });
 module.exports = __toCommonJS(Toggle_exports);
+var import_field = require("@ark-ui/react/field");
 var import_css = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
 var import_recipes = require("@cerberus/styled-system/recipes");
 
-// src/context/field.tsx
+// src/context/cerberus.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var FieldContext = (0, import_react.createContext)(null);
-function useFieldContext() {
-  const context = (0, import_react.useContext)(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
-}
-
-// src/context/cerberus.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react2.createContext)(null);
+var CerberusContext = (0, import_react.createContext)(null);
 function useCerberusContext() {
-  const context = (0, import_react2.useContext)(CerberusContext);
+  const context = (0, import_react.useContext)(CerberusContext);
   if (!context) {
     throw new Error("useCerberus must be used within a CerberusProvider");
   }
@@ -53,32 +42,36 @@ function useCerberusContext() {
 }
 
 // src/components/Toggle.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Toggle(props) {
-  const { size, describedBy, ...nativeProps } = props;
+  const { size, ...nativeProps } = props;
   const styles = (0, import_recipes.toggle)({ size });
-  const { invalid, ...state } = useFieldContext();
+  const { invalid, disabled, readOnly, required, ariaDescribedby } = (0, import_field.useFieldContext)();
   const { icons } = useCerberusContext();
   const CheckedIcon = icons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "span",
     {
       className: (0, import_css.cx)("group", styles.track, (0, import_patterns.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "input",
           {
             ...nativeProps,
-            ...state,
-            ...describedBy && { "aria-describedby": describedBy },
+            ...disabled && { disabled: true },
+            ...readOnly && { readOnly: true },
+            ...required && { required: true },
+            ...ariaDescribedby && {
+              "aria-describedby": ariaDescribedby
+            },
             ...invalid && { "aria-invalid": true },
             className: (0, import_css.cx)("peer", styles.input),
             role: "switch",
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
             className: (0, import_css.cx)(
@@ -87,7 +80,7 @@ function Toggle(props) {
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckedIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckedIcon, {})
           }
         )
       ]

package/build/legacy/components/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Toggle.tsx","../../../src/context/field.tsx","../../../src/context/cerberus.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 { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'id' | 'value'\n> & {\n  /**\n   * The FieldMessage providing context for the Toggle.\n   */\n  describedBy?: string\n  /**\n   * A unique identifier for the Toggle. Required for accessibility.\n   */\n  id: string\n  /**\n   * The value of the Toggle.\n   */\n  value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n *  <Field>\n *    <Label htmlFor=\"toggle\">Show notifications</Label>\n *    <Toggle\n *     checked={checked === 'toggle'}\n *     id=\"toggle\"\n *     onChange={handleChange}\n *     value=\"toggle\"\n *    />\n *  </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n  const { size, describedBy, ...nativeProps } = props\n  const styles = toggle({ size })\n  const { invalid, ...state } = useFieldContext()\n  const { icons } = useCerberusContext()\n  const CheckedIcon = icons.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        <CheckedIcon />\n      </span>\n    </span>\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAA+B;AAC/B,qBAGO;;;ACLP,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAA,gBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,6BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AFsBI,IAAAC,sBAAA;AARG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,aAAa,GAAG,YAAY,IAAI;AAC9C,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,cAAc,MAAM;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,eAAG,SAAS,OAAO,WAAO,wBAAO,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,eAAW,eAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT,OAAO;AAAA,kBACP,wBAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,uDAAC,eAAY;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/Toggle.tsx","../../../src/context/cerberus.tsx"],"sourcesContent":["'use client'\n\nimport { useFieldContext } from '@ark-ui/react/field'\nimport type { InputHTMLAttributes } from 'react'\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 { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'id' | 'value'\n> & {\n  /**\n   * @deprecated\n   */\n  describedBy?: string\n  /**\n   * A unique identifier for the Toggle. Required for accessibility.\n   */\n  id: string\n  /**\n   * The value of the Toggle.\n   */\n  value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n *  <Field>\n *    <Label htmlFor=\"toggle\">Show notifications</Label>\n *    <Toggle\n *     checked={checked === 'toggle'}\n *     id=\"toggle\"\n *     onChange={handleChange}\n *     value=\"toggle\"\n *    />\n *  </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n  const { size, ...nativeProps } = props\n  const styles = toggle({ size })\n\n  const { invalid, disabled, readOnly, required, ariaDescribedby } =\n    useFieldContext()\n\n  const { icons } = useCerberusContext()\n  const CheckedIcon = icons.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        {...(disabled && { disabled: true })}\n        {...(readOnly && { readOnly: true })}\n        {...(required && { required: true })}\n        {...(ariaDescribedby && {\n          'aria-describedby': ariaDescribedby,\n        })}\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        <CheckedIcon />\n      </span>\n    </span>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAgC;AAEhC,iBAAmB;AACnB,sBAA+B;AAC/B,qBAGO;;;ACPP,mBAAkE;AAyB9D;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ADyBI,IAAAA,sBAAA;AAXG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAE9B,QAAM,EAAE,SAAS,UAAU,UAAU,UAAU,gBAAgB,QAC7D,8BAAgB;AAElB,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,cAAc,MAAM;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,eAAG,SAAS,OAAO,WAAO,wBAAO,CAAC;AAAA,MAC7C,gBAAc,MAAM,WAAW,MAAM;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,mBAAmB;AAAA,cACtB,oBAAoB;AAAA,YACtB;AAAA,YACC,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,eAAW,eAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT,OAAO;AAAA,kBACP,wBAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,uDAAC,eAAY;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/button/button.cjs

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(button_exports);
 var import_react2 = require("react");
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
 
 // src/components/Show.tsx
 var import_react = require("react");
@@ -117,7 +118,6 @@ function Spinner(props) {
 }
 
 // src/components/button/button.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ButtonContext = (0, import_react2.createContext)({
   pending: false

package/build/legacy/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\nimport { Box } from '@cerberus/styled-system/jsx'\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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAMO;AACP,iBAAmB;AACnB,qBAGO;;;ACXP,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFjEA,iBAAoB;AA8Bd,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;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,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAMO;AACP,iBAAmB;AACnB,qBAGO;AACP,iBAAoB;;;ACZpB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFnCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;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,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;","names":["import_react","import_jsx_runtime"]}

package/build/legacy/components/button/index.cjs

@@ -30,6 +30,7 @@ module.exports = __toCommonJS(button_exports);
 var import_react2 = require("react");
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
 
 // src/components/Show.tsx
 var import_react = require("react");
@@ -119,7 +120,6 @@ function Spinner(props) {
 }
 
 // src/components/button/button.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ButtonContext = (0, import_react2.createContext)({
   pending: false

package/build/legacy/components/button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/index.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx","../../../../src/components/button/parts.ts"],"sourcesContent":["export * from './button'\nexport * from './parts'\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\nimport { Box } from '@cerberus/styled-system/jsx'\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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n","import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  Root: ElementType\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAAA,gBAMO;AACP,iBAAmB;AACnB,qBAGO;;;ACXP,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFjEA,iBAAoB;AA8Bd,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;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,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;AGtDO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/button/index.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx","../../../../src/components/button/parts.ts"],"sourcesContent":["export * from './button'\nexport * from './parts'\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n","import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  /**\n   * The context provider of the button.\n   */\n  Root: ElementType\n  /**\n   * The icon of the button.\n   */\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAAA,gBAMO;AACP,iBAAmB;AACnB,qBAGO;AACP,iBAAoB;;;ACZpB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFnCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;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,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;AGhDO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_react","import_jsx_runtime"]}

package/build/legacy/components/button/parts.cjs

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(parts_exports);
 var import_react2 = require("react");
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
 
 // src/components/Show.tsx
 var import_react = require("react");
@@ -117,7 +118,6 @@ function Spinner(props) {
 }
 
 // src/components/button/button.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ButtonContext = (0, import_react2.createContext)({
   pending: false

package/build/legacy/components/button/parts.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/parts.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  Root: ElementType\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\nimport { Box } from '@cerberus/styled-system/jsx'\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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAAA,gBAMO;AACP,iBAAmB;AACnB,qBAGO;;;ACXP,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFjEA,iBAAoB;AA8Bd,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;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,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;ADtDO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/button/parts.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  /**\n   * The context provider of the button.\n   */\n  Root: ElementType\n  /**\n   * The icon of the button.\n   */\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAAA,gBAMO;AACP,iBAAmB;AACnB,qBAGO;AACP,iBAAoB;;;ACZpB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFnCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;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,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;ADhDO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_react","import_jsx_runtime"]}