@cerberus-design/react 0.17.2 → 0.18.1

package/build/modern/{chunk-6QHOKCV3.js → chunk-IE2HWT3I.js}

@@ -1,17 +1,22 @@
 import {
   Show
-} from "./chunk-BUVVRQLZ.js";
+} from "./chunk-VEAC4I3F.js";
 
 // src/components/CircularProgress.tsx
-import { cq } from "@cerberus/styled-system/patterns";
-import { css } from "@cerberus/styled-system/css";
+import { circularProgress } from "styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function CircularProgress(props) {
+  const { size = "1.1em" } = props;
+  const sizeProps = props.size ? {
+    height: size,
+    width: size
+  } : {};
   const strokeW = 14;
   const radius = `calc(50% * (1 - ${strokeW}/100))`;
   const status = props.syntax ?? "Done";
   const now = props.now >= 100 ? 100 : props.now;
   const bgStyle = props.bgStyle ?? "filled";
+  const styles = circularProgress();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -20,27 +25,19 @@ function CircularProgress(props) {
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": now,
-      className: cq({
-        alignSelf: "stretch",
-        flex: 1,
-        m: "4px",
-        position: "relative"
-      }),
+      className: styles.root,
       role: "progressbar",
       children: /* @__PURE__ */ jsxs(
         "svg",
         {
           "data-complete": now === 100,
-          className: css({
-            display: "block",
-            rounded: "full",
-            transition: "all 0.5s ease"
-          }),
+          className: styles.group,
           fill: "none",
           strokeLinecap: "round",
           strokeWidth: strokeW,
           viewBox: "0 0 100 100",
           xmlns: "http://www.w3.org/2000/svg",
+          ...sizeProps,
           children: [
             /* @__PURE__ */ jsx("title", { children: props.title }),
             /* @__PURE__ */ jsx("desc", { children: `${now}% ${status}` }),
@@ -63,9 +60,7 @@ function CircularProgress(props) {
             /* @__PURE__ */ jsx(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ jsx(
               "circle",
               {
-                className: css({
-                  fill: "page.surface.initial"
-                }),
+                className: styles.base,
                 cx: "50%",
                 cy: "50%",
                 r: `calc(50% * (1 - ${strokeW}/100))`,
@@ -75,9 +70,7 @@ function CircularProgress(props) {
             /* @__PURE__ */ jsx(
               "circle",
               {
-                className: css({
-                  stroke: "page.bg.100"
-                }),
+                className: styles.track,
                 cx: "50%",
                 cy: "50%",
                 r: radius,
@@ -88,13 +81,7 @@ function CircularProgress(props) {
               "circle",
               {
                 "data-complete": now === 100,
-                className: css({
-                  stroke: "url(#gradient)",
-                  transition: "stroke-dashoffset, stroke 0.5s ease",
-                  _isComplete: {
-                    stroke: "success.bg.initial"
-                  }
-                }),
+                className: styles.path,
                 cx: "50%",
                 cy: "50%",
                 fill: "none",
@@ -109,11 +96,7 @@ function CircularProgress(props) {
               /* @__PURE__ */ jsxs(
                 "text",
                 {
-                  className: css({
-                    fill: "page.text.initial",
-                    fontFamily: "mono",
-                    textStyle: "1.25rem"
-                  }),
+                  className: styles.title,
                   x: "50%",
                   y: "47%",
                   dominantBaseline: "middle",
@@ -127,11 +110,7 @@ function CircularProgress(props) {
               /* @__PURE__ */ jsx(
                 "text",
                 {
-                  className: css({
-                    fill: "page.text.100",
-                    fontSize: "0.5rem",
-                    fontWeight: 600
-                  }),
+                  className: styles.description,
                   x: "50%",
                   y: "59%",
                   dominantBaseline: "middle",
@@ -150,4 +129,4 @@ function CircularProgress(props) {
 export {
   CircularProgress
 };
-//# sourceMappingURL=chunk-6QHOKCV3.js.map
+//# sourceMappingURL=chunk-IE2HWT3I.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["import { circularProgress } from 'styled-system/recipes'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  syntax?: string\n  /**\n   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\n  /**\n   * The size of the CircularProgress\n   * @default '1.1em'\n   */\n  size?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const { size = '1.1em' } = props\n  const sizeProps = props.size\n    ? {\n        height: size,\n        width: size,\n      }\n    : {}\n\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n  const bgStyle: string = props.bgStyle ?? 'filled'\n\n  const styles = circularProgress()\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={styles.root}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={styles.group}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...sizeProps}\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\n          <circle\n            className={styles.base}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={`calc(50% * (1 - ${strokeW}/100))`}\n            pathLength=\"100\"\n          />\n        </Show>\n\n        <circle\n          className={styles.track}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n\n        <circle\n          data-complete={now === 100}\n          className={styles.path}\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          r={radius}\n          pathLength=\"100\"\n          strokeDasharray=\"100\"\n          strokeDashoffset={100 - now}\n          transform=\"rotate(-90 50 50)\"\n        />\n\n        <g>\n          <text\n            className={styles.title}\n            x=\"50%\"\n            y=\"47%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {now}%\n          </text>\n          <text\n            className={styles.description}\n            x=\"50%\"\n            y=\"59%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,wBAAwB;AA0FzB,cAGE,YAHF;AArCD,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,EAAE,OAAO,QAAQ,IAAI;AAC3B,QAAM,YAAY,MAAM,OACpB;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IACA,CAAC;AAEL,QAAM,UAAkB;AACxB,QAAM,SAAS,mBAAmB,OAAO;AACzC,QAAM,SAAiB,MAAM,UAAU;AACvC,QAAM,MAAc,MAAM,OAAO,MAAM,MAAM,MAAM;AACnD,QAAM,UAAkB,MAAM,WAAW;AAEzC,QAAM,SAAS,iBAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,MAAM;AAAA,MACV,cAAY,MAAM;AAAA,MAClB,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,OAAO;AAAA,MAClB,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,iBAAe,QAAQ;AAAA,UACvB,WAAW,OAAO;AAAA,UAClB,MAAK;AAAA,UACL,eAAc;AAAA,UACd,aAAa;AAAA,UACb,SAAQ;AAAA,UACR,OAAM;AAAA,UACL,GAAG;AAAA,UAEJ;AAAA,gCAAC,WAAO,gBAAM,OAAM;AAAA,YACpB,oBAAC,UAAM,aAAG,GAAG,KAAK,MAAM,IAAG;AAAA,YAC3B,oBAAC,UACC,+BAAC,oBAAe,IAAG,YACjB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,eACF,GACF;AAAA,YAEA,oBAAC,QAAK,MAAM,YAAY,UACtB;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,OAAO;AAAA,gBAClB,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,mBAAmB,OAAO;AAAA,gBAC7B,YAAW;AAAA;AAAA,YACb,GACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,OAAO;AAAA,gBAClB,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG;AAAA,gBACH,YAAW;AAAA;AAAA,YACb;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAe,QAAQ;AAAA,gBACvB,WAAW,OAAO;AAAA,gBAClB,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAG;AAAA,gBACH,YAAW;AAAA,gBACX,iBAAgB;AAAA,gBAChB,kBAAkB,MAAM;AAAA,gBACxB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEA,qBAAC,OACC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,OAAO;AAAA,kBAClB,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,oBAAI;AAAA;AAAA;AAAA,cACP;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,OAAO;AAAA,kBAClB,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,cACH;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-DRDNNRU3.js → chunk-IIH4VDQA.js}

@@ -1,6 +1,6 @@
 // src/components/deprecated/FieldsetLabel.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { label } from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { label } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function FieldsetLabel(props) {
   const { size, usage, ...nativeProps } = props;
@@ -22,4 +22,4 @@ function FieldsetLabel(props) {
 export {
   FieldsetLabel
 };
-//# sourceMappingURL=chunk-DRDNNRU3.js.map
+//# sourceMappingURL=chunk-IIH4VDQA.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/FieldsetLabel.tsx"],"sourcesContent":["import { cx } from 'styled-system/css'\nimport { label, type LabelVariantProps } from 'styled-system/recipes'\nimport type { LabelProps } from './Label'\n\n/**\n * This module contains the FieldsetLabel component.\n * @module FieldsetLabel\n */\n\nexport type FieldsetLabelProps = LabelProps &\n  LabelVariantProps & {\n    htmlFor?: string\n  }\n\n/**\n * @deprecated\n */\nexport function FieldsetLabel(props: FieldsetLabelProps) {\n  const { size, usage, ...nativeProps } = props\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({\n          size,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAqC;AAmB1C;AAHG,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,OAAO,GAAG,YAAY,IAAI;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-W47QEZD5.js → chunk-IL677ECW.js}

@@ -2,10 +2,10 @@
 import {
   RatingGroup
 } from "@ark-ui/react/rating-group";
-import { cx } from "@cerberus/styled-system/css";
+import { cx } from "styled-system/css";
 import {
   ratingGroup
-} from "@cerberus/styled-system/recipes";
+} from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function RatingRoot(props) {
   const { orientation, size, ...rootProps } = props;
@@ -68,4 +68,4 @@ export {
   RatingItemContext,
   RatingHiddenInput
 };
-//# sourceMappingURL=chunk-W47QEZD5.js.map
+//# sourceMappingURL=chunk-IL677ECW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/rating/primitives.tsx"],"sourcesContent":["import {\n  RatingGroup,\n  type RatingGroupContextProps,\n  type RatingGroupControlProps,\n  type RatingGroupHiddenInputProps,\n  type RatingGroupItemContextProps,\n  type RatingGroupItemProps,\n  type RatingGroupLabelProps,\n  type RatingGroupRootProps,\n} from '@ark-ui/react/rating-group'\nimport { cx } from 'styled-system/css'\nimport {\n  ratingGroup,\n  type RatingGroupVariantProps,\n} from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Rating component.\n * @module 'rating/primitives'\n */\n\n/**\n * The root primitive of the Rating component.\n */\nexport function RatingRoot(\n  props: RatingGroupRootProps & RatingGroupVariantProps,\n) {\n  const { orientation, size, ...rootProps } = props\n  const styles = ratingGroup({ orientation, size })\n  return (\n    <RatingGroup.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The label primitive of the Rating component.\n */\nexport function RatingLabel(props: RatingGroupLabelProps) {\n  const styles = ratingGroup()\n  return (\n    <RatingGroup.Label\n      {...props}\n      className={cx(styles.label, props.className)}\n    />\n  )\n}\n\n/**\n * The control primitive of the Rating component.\n */\nexport function RatingControl(props: RatingGroupControlProps) {\n  const styles = ratingGroup()\n  return (\n    <RatingGroup.Control\n      {...props}\n      className={cx(styles.control, props.className)}\n    />\n  )\n}\n\n/**\n * The context primitive of the Rating component.\n */\nexport function RatingContext(props: RatingGroupContextProps) {\n  return <RatingGroup.Context {...props} />\n}\n\n/**\n * The item primitive of the Rating component.\n */\nexport function RatingItem(\n  props: RatingGroupItemProps & RatingGroupVariantProps,\n) {\n  const { palette, ...itemProps } = props\n  const styles = ratingGroup({ palette })\n  return (\n    <RatingGroup.Item\n      {...itemProps}\n      className={cx(styles.item, itemProps.className)}\n    />\n  )\n}\n\n/**\n * The item context primitive of the Rating component.\n */\nexport function RatingItemContext(props: RatingGroupItemContextProps) {\n  return <RatingGroup.ItemContext {...props} />\n}\n\n/**\n * The hidden input primitive of the Rating component.\n */\nexport function RatingHiddenInput(props: RatingGroupHiddenInputProps) {\n  return <RatingGroup.HiddenInput {...props} />\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAQK;AACP,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AANG,SAAS,WACd,OACA;AACA,QAAM,EAAE,aAAa,MAAM,GAAG,UAAU,IAAI;AAC5C,QAAM,SAAS,YAAY,EAAE,aAAa,KAAK,CAAC;AAChD,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAA8B;AACxD,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS;AAAA;AAAA,EAC7C;AAEJ;AAKO,SAAS,cAAc,OAAgC;AAC5D,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,cAAc,OAAgC;AAC5D,SAAO,oBAAC,YAAY,SAAZ,EAAqB,GAAG,OAAO;AACzC;AAKO,SAAS,WACd,OACA;AACA,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI;AAClC,QAAM,SAAS,YAAY,EAAE,QAAQ,CAAC;AACtC,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,kBAAkB,OAAoC;AACpE,SAAO,oBAAC,YAAY,aAAZ,EAAyB,GAAG,OAAO;AAC7C;AAKO,SAAS,kBAAkB,OAAoC;AACpE,SAAO,oBAAC,YAAY,aAAZ,EAAyB,GAAG,OAAO;AAC7C;","names":[]}

package/build/modern/{chunk-32M5JS5F.js → chunk-ILROS7ST.js}

@@ -6,13 +6,13 @@ import {
   FieldRequiredIndicator,
   FieldRoot,
   FieldTextarea
-} from "./chunk-VNPLKMEM.js";
-import {
-  FieldStatusIndicator
-} from "./chunk-CNA2VKAH.js";
+} from "./chunk-WEL43I6Y.js";
 import {
   FieldStartIndicator
-} from "./chunk-Z52R6ABJ.js";
+} from "./chunk-EMDNETC7.js";
+import {
+  FieldStatusIndicator
+} from "./chunk-VIKVLJGG.js";
 
 // src/components/field/parts.ts
 var FieldParts = {
@@ -30,4 +30,4 @@ var FieldParts = {
 export {
   FieldParts
 };
-//# sourceMappingURL=chunk-32M5JS5F.js.map
+//# sourceMappingURL=chunk-ILROS7ST.js.map

package/build/modern/{chunk-OSAYA6GH.js → chunk-INVZVMY4.js}

@@ -1,18 +1,18 @@
 import {
   DatePickerParts
-} from "./chunk-WVFEJCUN.js";
-import {
-  IconButton
-} from "./chunk-SRNDDY5D.js";
+} from "./chunk-J76SGDYP.js";
 import {
   Button
-} from "./chunk-RD2YPFRA.js";
+} from "./chunk-GB7W3YNU.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  IconButton
+} from "./chunk-UH6XSYYD.js";
 
 // src/components/date-picker/view-control-group.tsx
-import { css } from "@cerberus/styled-system/css";
+import { css } from "styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 function DatePickerViewControlGroup(props) {
   const { icons } = useCerberusContext();
@@ -39,4 +39,4 @@ function DatePickerViewControlGroup(props) {
 export {
   DatePickerViewControlGroup
 };
-//# sourceMappingURL=chunk-OSAYA6GH.js.map
+//# sourceMappingURL=chunk-INVZVMY4.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/view-control-group.tsx"],"sourcesContent":["'use client'\n\nimport type { DatePickerViewControlProps } from '@ark-ui/react/date-picker'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../IconButton'\nimport { DatePickerParts } from './parts'\nimport { Button } from '../button/button'\nimport { css } from 'styled-system/css'\n\n/**\n * This private module contains an abstraction of the DatePickerViewControl\n * primitive.\n * @module 'date-picker/view-control-group'\n */\n\n/**\n * An abstraction of the DatePicker control that contains the prev, view, and\n * next triggers which control the calendar output.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function DatePickerViewControlGroup(props: DatePickerViewControlProps) {\n  const { icons } = useCerberusContext()\n  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons\n\n  return (\n    <DatePickerParts.ViewControl {...props}>\n      <DatePickerParts.PrevTrigger asChild>\n        <IconButton ariaLabel=\"Previous\" size=\"sm\">\n          <PrevIcon />\n        </IconButton>\n      </DatePickerParts.PrevTrigger>\n\n      <DatePickerParts.ViewTrigger asChild>\n        <Button\n          className={css({\n            h: '2rem',\n            paddingInline: 'md',\n          })}\n          shape=\"rounded\"\n          size=\"sm\"\n          usage=\"ghost\"\n        >\n          <DatePickerParts.RangeText />\n        </Button>\n      </DatePickerParts.ViewTrigger>\n\n      <DatePickerParts.NextTrigger asChild>\n        <IconButton ariaLabel=\"Next\" size=\"sm\">\n          <NextIcon />\n        </IconButton>\n      </DatePickerParts.NextTrigger>\n    </DatePickerParts.ViewControl>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAOA,SAAS,WAAW;AAkBhB,SAGM,KAHN;AALG,SAAS,2BAA2B,OAAmC;AAC5E,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,cAAc,UAAU,cAAc,SAAS,IAAI;AAE3D,SACE,qBAAC,gBAAgB,aAAhB,EAA6B,GAAG,OAC/B;AAAA,wBAAC,gBAAgB,aAAhB,EAA4B,SAAO,MAClC,8BAAC,cAAW,WAAU,YAAW,MAAK,MACpC,8BAAC,YAAS,GACZ,GACF;AAAA,IAEA,oBAAC,gBAAgB,aAAhB,EAA4B,SAAO,MAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,IAAI;AAAA,UACb,GAAG;AAAA,UACH,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,8BAAC,gBAAgB,WAAhB,EAA0B;AAAA;AAAA,IAC7B,GACF;AAAA,IAEA,oBAAC,gBAAgB,aAAhB,EAA4B,SAAO,MAClC,8BAAC,cAAW,WAAU,QAAO,MAAK,MAChC,8BAAC,YAAS,GACZ,GACF;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-SYPAA5YF.js → chunk-IUF74GEL.js}

@@ -2,7 +2,7 @@ import {
   AvatarFallback,
   AvatarImage,
   AvatarRoot
-} from "./chunk-2FRF57EU.js";
+} from "./chunk-UGFSACHC.js";
 
 // src/components/avatar/parts.ts
 var AvatarParts = {
@@ -14,4 +14,4 @@ var AvatarParts = {
 export {
   AvatarParts
 };
-//# sourceMappingURL=chunk-SYPAA5YF.js.map
+//# sourceMappingURL=chunk-IUF74GEL.js.map

package/build/modern/{chunk-WVFEJCUN.js → chunk-J76SGDYP.js}

@@ -23,7 +23,7 @@ import {
   DatePickerViewControl,
   DatePickerViewTrigger,
   DatePickerYearSelect
-} from "./chunk-D7MAAGNA.js";
+} from "./chunk-RW3YEBDW.js";
 
 // src/components/date-picker/parts.ts
 var DatePickerParts = {
@@ -56,4 +56,4 @@ var DatePickerParts = {
 export {
   DatePickerParts
 };
-//# sourceMappingURL=chunk-WVFEJCUN.js.map
+//# sourceMappingURL=chunk-J76SGDYP.js.map

package/build/modern/{chunk-RQCJKDXU.js → chunk-JQYW4IOC.js}

@@ -4,7 +4,7 @@ import {
   AdmonitionHeading,
   AdmonitionIndicator,
   AdmonitionRoot
-} from "./chunk-RKGFPKKK.js";
+} from "./chunk-OY33UHBG.js";
 
 // src/components/admonition/parts.ts
 var AdmonitionParts = {
@@ -18,4 +18,4 @@ var AdmonitionParts = {
 export {
   AdmonitionParts
 };
-//# sourceMappingURL=chunk-RQCJKDXU.js.map
+//# sourceMappingURL=chunk-JQYW4IOC.js.map

package/build/modern/{chunk-DYQBRCZC.js → chunk-KABRV6TB.js}

@@ -1,32 +1,30 @@
-import {
-  ProgressBar
-} from "./chunk-KJMCUYWV.js";
 import {
   Field
-} from "./chunk-6WEW5OGL.js";
-import {
-  Avatar
-} from "./chunk-N4RPMT6J.js";
-import {
-  IconButton
-} from "./chunk-SRNDDY5D.js";
+} from "./chunk-LEBDLXJE.js";
 import {
   FieldHelperText
-} from "./chunk-VNPLKMEM.js";
+} from "./chunk-WEL43I6Y.js";
+import {
+  Avatar
+} from "./chunk-CF4TCMJI.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  IconButton
+} from "./chunk-UH6XSYYD.js";
+import {
+  ProgressBar
+} from "./chunk-Q737W5KJ.js";
 
 // src/components/FileStatus.tsx
 import {
   useCallback,
   useMemo
 } from "react";
-import {
-  fileStatus
-} from "@cerberus/styled-system/recipes";
-import { css, cx } from "@cerberus/styled-system/css";
-import { hstack, vstack } from "@cerberus/styled-system/patterns";
+import { fileStatus } from "styled-system/recipes";
+import { css, cx } from "styled-system/css";
+import { hstack, vstack } from "styled-system/patterns";
 import { jsx, jsxs } from "react/jsx-runtime";
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
@@ -225,4 +223,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-DYQBRCZC.js.map
+//# sourceMappingURL=chunk-KABRV6TB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FileStatus.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useMemo,\n  type HTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { fileStatus, type FileStatusVariantProps } from 'styled-system/recipes'\nimport { css, cx } from 'styled-system/css'\nimport { hstack, vstack } from 'styled-system/patterns'\nimport { useCerberusContext } from '../context/cerberus'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './avatar/avatar'\nimport { Field, FieldHelperText } from './field/index'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * A unique identifier for the file status. Required for accessibility.\n   */\n  id: string\n  /**\n   * The name of the file.\n   */\n  file: string\n  /**\n   * The percentage of the file that has been processed.\n   */\n  now: ProgressBarProps['now']\n  /**\n   * The status of the file.\n   */\n  status: processStatus\n  /**\n   * The action to perform on the file when a user clicks the\n   * button located at the end of the status card.\n   * @param status - The status of the file.\n   * @param e - The event object.\n   * @example\n   * ```tsx\n   * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n   * ```\n   * @default () => {}\n   */\n  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n  TODO = 'todo',\n  PROCESSING = 'processing',\n  DONE = 'done',\n  ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n  const { file, now, status, onClick, ...nativeProps } = props\n  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n  const palette = useMemo(() => getPalette(status), [status])\n  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n  const styles = useMemo(() => {\n    switch (status) {\n      case processStatus.TODO:\n        return fileStatus({ status: 'todo' })\n      case processStatus.PROCESSING:\n        return fileStatus({ status: 'processing' })\n      case processStatus.DONE:\n        return fileStatus({ status: 'done' })\n      case processStatus.ERROR:\n        return fileStatus({ status: 'error' })\n      default:\n        return fileStatus()\n    }\n  }, [status])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const actionStatus = getStatusActionLabel(\n        status,\n      ).toLocaleLowerCase() as FileStatusActions\n      onClick(actionStatus, e)\n    },\n    [onClick],\n  )\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(nativeProps.className, styles.root, hstack())}\n    >\n      <Avatar\n        gradient={modalIconPalette}\n        fallback={<MatchFileStatusIcon size={24} status={status} />}\n      />\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0.12rem',\n          w: 'full',\n        })}\n      >\n        <small\n          className={css({\n            color: 'page.text.initial',\n            textStyle: 'label-sm',\n          })}\n        >\n          {file}\n        </small>\n        <ProgressBar\n          id={props.id}\n          label=\"File upload status\"\n          now={now}\n          size=\"sm\"\n        />\n        <Field label=\"\" invalid={modalIconPalette === 'hades-dark'}>\n          <FieldHelperText\n            className={css({\n              color: 'page.text.100',\n            })}\n            id={`help:${file}`}\n          >\n            <MatchFileStatusText status={status} now={now} />\n          </FieldHelperText>\n        </Field>\n      </div>\n\n      <IconButton\n        ariaLabel={actionLabel}\n        onClick={handleClick}\n        palette={palette}\n        size=\"sm\"\n      >\n        <MatchStatusAction status={status} />\n      </IconButton>\n    </div>\n  )\n}\n\ninterface FileStatusElProps {\n  status: FileStatusProps['status']\n  size?: 16 | 20 | 24 | 32\n  now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n  const { icons } = useCerberusContext()\n  const {\n    waitingFileUploader: TodoIcon,\n    fileUploader: FileUploaderIcon,\n    invalidAlt: InvalidIcon,\n    successNotification: DoneIcon,\n  } = icons\n\n  switch (props.status) {\n    case processStatus.TODO:\n      return <TodoIcon size={props.size} />\n    case processStatus.PROCESSING:\n      return <FileUploaderIcon size={props.size} />\n    case processStatus.DONE:\n      return <DoneIcon size={props.size} />\n    case processStatus.ERROR:\n      return <InvalidIcon size={props.size} />\n    default:\n      throw new Error('Unknown status')\n  }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n  switch (props.status) {\n    case processStatus.TODO:\n      return 'Waiting to upload'\n    case processStatus.PROCESSING:\n      return `${props.now}% Complete`\n    case processStatus.DONE:\n      return 'File uploaded successfully'\n    case processStatus.ERROR:\n      return 'There was an error uploading the file'\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <CloseIcon />\n    case processStatus.ERROR:\n      return <RedoIcon />\n    case processStatus.DONE:\n      return <TrashIcon />\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'Cancel'\n    case processStatus.ERROR:\n      return 'Retry'\n    case processStatus.DONE:\n      return 'Delete'\n    default:\n      return ''\n  }\n}\n\nfunction getPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'danger'\n    case processStatus.ERROR:\n      return 'action'\n    case processStatus.DONE:\n      return 'danger'\n    default:\n      return 'action'\n  }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'charon-light'\n    case processStatus.ERROR:\n      return 'hades-dark'\n    case processStatus.DONE:\n      return 'thanatos-light'\n    default:\n      return 'charon-light'\n  }\n}\n"],"mappings":"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","names":["processStatus"]}

package/build/modern/{chunk-JQJTQVPI.js → chunk-KEGLWDD6.js}

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

package/build/modern/{chunk-EB37HRCN.js → chunk-KOLNLCMZ.js}

@@ -28,4 +28,4 @@ export {
   ThemeProvider,
   useThemeContext
 };
-//# sourceMappingURL=chunk-EB37HRCN.js.map
+//# sourceMappingURL=chunk-KOLNLCMZ.js.map

package/build/modern/{chunk-EB37HRCN.js.map → chunk-KOLNLCMZ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/theme.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport { useTheme, type UseThemeOptions } from '../hooks/useTheme'\n\n/**\n * This module provides a context and hook for the theme.\n * @module Theme\n */\n\nexport type DefaultThemes = 'cerberus' | 'acheron'\nexport type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K\nexport type ColorModes = 'light' | 'dark' | 'system'\n\nexport interface ThemeContextValue<T extends string = DefaultThemes> {\n  /**\n   * The current theme.\n   */\n  theme: CustomThemes<T>\n  /**\n   * The current color mode.\n   */\n  mode: ColorModes\n  /**\n   * Called when the theme is updated.\n   */\n  updateTheme: (theme: T) => void\n  /**\n   * Called when the color mode is updated.\n   */\n  updateMode: (mode: ColorModes) => void\n}\n\nconst ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(\n  null,\n)\n\nexport interface ThemeProviderProps extends UseThemeOptions {\n  /**\n   * The default theme.\n   */\n  defaultTheme?: DefaultThemes\n  /**\n   * The default color mode.\n   */\n  defaultColorMode?: ColorModes\n}\n\n/**\n * A context provider that allows the user to set the theme and mode of the\n * application.\n * @see https://cerberus.digitalu.design/react/use-theme-context\n * @example\n * ```tsx\n * <ThemeProvider>\n *  <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider(\n  props: PropsWithChildren<ThemeProviderProps>,\n): JSX.Element {\n  const state = useTheme(props.defaultTheme, props.defaultColorMode, {\n    cache: props.cache,\n    updateMode: props.updateMode,\n    updateTheme: props.updateTheme,\n  }) as ThemeContextValue<DefaultThemes>\n\n  return (\n    <ThemeContext.Provider value={state}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Used to access the theme context.\n */\nexport function useThemeContext(): ThemeContextValue<DefaultThemes> {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;AAEA,SAAS,eAAe,kBAA0C;AAmE9D;AApCJ,IAAM,eAAe;AAAA,EACnB;AACF;AAwBO,SAAS,cACd,OACa;AACb,QAAM,QAAQ,SAAS,MAAM,cAAc,MAAM,kBAAkB;AAAA,IACjE,OAAO,MAAM;AAAA,IACb,YAAY,MAAM;AAAA,IAClB,aAAa,MAAM;AAAA,EACrB,CAAC;AAED,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAKO,SAAS,kBAAoD;AAClE,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/context/theme.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport { useTheme, type UseThemeOptions } from '../hooks/useTheme'\n\n/**\n * This module provides a context and hook for the theme.\n * @module Theme\n */\n\nexport type DefaultThemes = 'cerberus' | 'acheron'\nexport type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K\nexport type ColorModes = 'light' | 'dark' | 'system'\n\nexport interface ThemeContextValue<T extends string = DefaultThemes> {\n  /**\n   * The current theme.\n   */\n  theme: CustomThemes<T>\n  /**\n   * The current color mode.\n   */\n  mode: ColorModes\n  /**\n   * Called when the theme is updated.\n   */\n  updateTheme: (theme: T) => void\n  /**\n   * Called when the color mode is updated.\n   */\n  updateMode: (mode: ColorModes) => void\n}\n\nconst ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(\n  null,\n)\n\nexport interface ThemeProviderProps extends UseThemeOptions {\n  /**\n   * The default theme.\n   */\n  defaultTheme?: DefaultThemes\n  /**\n   * The default color mode.\n   */\n  defaultColorMode?: ColorModes\n}\n\n/**\n * A context provider that allows the user to set the theme and mode of the\n * application.\n * @see https://cerberus.digitalu.design/react/use-theme-context\n * @example\n * ```tsx\n * <ThemeProvider>\n *  <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>) {\n  const state = useTheme(props.defaultTheme, props.defaultColorMode, {\n    cache: props.cache,\n    updateMode: props.updateMode,\n    updateTheme: props.updateTheme,\n  }) as ThemeContextValue<DefaultThemes>\n\n  return (\n    <ThemeContext.Provider value={state}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Used to access the theme context.\n */\nexport function useThemeContext(): ThemeContextValue<DefaultThemes> {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;AAEA,SAAS,eAAe,kBAA0C;AAiE9D;AAlCJ,IAAM,eAAe;AAAA,EACnB;AACF;AAwBO,SAAS,cAAc,OAA8C;AAC1E,QAAM,QAAQ,SAAS,MAAM,cAAc,MAAM,kBAAkB;AAAA,IACjE,OAAO,MAAM;AAAA,IACb,YAAY,MAAM;AAAA,IAClB,aAAa,MAAM;AAAA,EACrB,CAAC;AAED,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAKO,SAAS,kBAAoD;AAClE,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-Z3FDG263.js → chunk-KV4NRGKW.js}

@@ -2,10 +2,8 @@
 import {
   Fieldset
 } from "@ark-ui/react/fieldset";
-import { cx } from "@cerberus/styled-system/css";
-import {
-  fieldset
-} from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { fieldset } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function FieldsetRoot(props) {
   const styles = fieldset();
@@ -50,4 +48,4 @@ export {
   FieldsetHelperText,
   FieldsetErrorText
 };
-//# sourceMappingURL=chunk-Z3FDG263.js.map
+//# sourceMappingURL=chunk-KV4NRGKW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/fieldset/primitives.tsx"],"sourcesContent":["import {\n  Fieldset,\n  type FieldsetHelperTextProps,\n  type FieldsetLegendProps,\n  type FieldsetRootProps,\n} from '@ark-ui/react/fieldset'\nimport { cx } from 'styled-system/css'\nimport { fieldset, type FieldsetVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains all the primitives of the Fieldset component.\n * @module 'react/fieldset'\n */\n\n/**\n * The context & container for the Fieldset components.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetRoot(props: FieldsetRootProps) {\n  const styles = fieldset()\n  return (\n    <Fieldset.Root {...props} className={cx(styles.root, props.className)} />\n  )\n}\n\n/**\n * The legend element for the Fieldset group.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetLegend(\n  props: FieldsetLegendProps & FieldsetVariantProps,\n) {\n  const { usage, ...legendProps } = props\n  const styles = fieldset({ usage })\n  return (\n    <Fieldset.Legend\n      {...legendProps}\n      className={cx(styles.legend, legendProps.className)}\n    />\n  )\n}\n\n/**\n * The description element for the Fieldset group.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetHelperText(\n  props: FieldsetHelperTextProps & FieldsetVariantProps,\n) {\n  const { usage, ...helperTextProps } = props\n  const styles = fieldset({ usage })\n  return (\n    <Fieldset.HelperText\n      {...helperTextProps}\n      className={cx(styles.helperText, helperTextProps.className)}\n    />\n  )\n}\n\n/**\n * The error text element for the Fieldset group.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetErrorText(props: FieldsetHelperTextProps) {\n  const styles = fieldset()\n  return (\n    <Fieldset.ErrorText\n      {...props}\n      className={cx(styles.errorText, props.className)}\n    />\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB,SAAS,gBAA2C;AAehD;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,SAAS;AACxB,SACE,oBAAC,SAAS,MAAT,EAAe,GAAG,OAAO,WAAW,GAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAE3E;AAOO,SAAS,eACd,OACA;AACA,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,SAAS,SAAS,EAAE,MAAM,CAAC;AACjC,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,QAAQ,YAAY,SAAS;AAAA;AAAA,EACpD;AAEJ;AAOO,SAAS,mBACd,OACA;AACA,QAAM,EAAE,OAAO,GAAG,gBAAgB,IAAI;AACtC,QAAM,SAAS,SAAS,EAAE,MAAM,CAAC;AACjC,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,gBAAgB,SAAS;AAAA;AAAA,EAC5D;AAEJ;AAOO,SAAS,kBAAkB,OAAgC;AAChE,QAAM,SAAS,SAAS;AACxB,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;","names":[]}

package/build/modern/{chunk-LPALHB6R.js → chunk-L2EGF5AV.js}

@@ -2,8 +2,8 @@
 import {
   Tooltip as ArkTooltip
 } from "@ark-ui/react/tooltip";
-import { cx } from "@cerberus/styled-system/css";
-import { tooltip } from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { tooltip } from "styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tooltip(props) {
   const { content, children, asChild, ...nativeProps } = props;
@@ -30,4 +30,4 @@ function Tooltip(props) {
 export {
   Tooltip
 };
-//# sourceMappingURL=chunk-LPALHB6R.js.map
+//# sourceMappingURL=chunk-L2EGF5AV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n  Tooltip as ArkTooltip,\n  type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from 'styled-system/css'\nimport { tooltip } from 'styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n  /**\n   * The text content to display in the tooltip.\n   */\n  content: ReactNode\n  /**\n   * The position of the tooltip relative to the trigger element.\n   */\n  position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n *   <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n  const { content, children, asChild, ...nativeProps } = props\n  const styles = tooltip()\n  const position = {\n    placement: props.position || 'top',\n  }\n\n  return (\n    <ArkTooltip.Root openDelay={400} positioning={position}>\n      <ArkTooltip.Trigger className={styles.trigger} asChild={asChild}>\n        {children}\n      </ArkTooltip.Trigger>\n\n      <ArkTooltip.Positioner>\n        <ArkTooltip.Content\n          {...nativeProps}\n          className={cx(nativeProps.className, styles.content)}\n        >\n          <ArkTooltip.Arrow className={styles.arrow}>\n            <ArkTooltip.ArrowTip className={styles.arrowTip} />\n          </ArkTooltip.Arrow>\n\n          {content}\n        </ArkTooltip.Content>\n      </ArkTooltip.Positioner>\n    </ArkTooltip.Root>\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE,WAAW;AAAA,OAEN;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AAqClB,cAKE,YALF;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,SAAS,QAAQ;AACvB,QAAM,WAAW;AAAA,IACf,WAAW,MAAM,YAAY;AAAA,EAC/B;AAEA,SACE,qBAAC,WAAW,MAAX,EAAgB,WAAW,KAAK,aAAa,UAC5C;AAAA,wBAAC,WAAW,SAAX,EAAmB,WAAW,OAAO,SAAS,SAC5C,UACH;AAAA,IAEA,oBAAC,WAAW,YAAX,EACC;AAAA,MAAC,WAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO;AAAA,QAEnD;AAAA,8BAAC,WAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,8BAAC,WAAW,UAAX,EAAoB,WAAW,OAAO,UAAU,GACnD;AAAA,UAEC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-4GFEWP76.js → chunk-L5FYGWAZ.js}

@@ -2,8 +2,8 @@
 import {
   Tabs
 } from "@ark-ui/react/tabs";
-import { cx } from "@cerberus/styled-system/css";
-import { tabs } from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { tabs } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function TabsRoot(props) {
   const { palette, ...rootProps } = props;
@@ -46,4 +46,4 @@ export {
   TabsContent,
   TabsIndicator
 };
-//# sourceMappingURL=chunk-4GFEWP76.js.map
+//# sourceMappingURL=chunk-L5FYGWAZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/tabs/primitives.tsx"],"sourcesContent":["import {\n  Tabs,\n  type TabContentProps,\n  type TabIndicatorProps,\n  type TabListProps,\n  type TabsRootProps,\n  type TabTriggerProps,\n} from '@ark-ui/react/tabs'\nimport { cx } from 'styled-system/css'\nimport { tabs, type TabsVariantProps } from 'styled-system/recipes'\n\n/**\n * This module provides the primitives for the Tabs component.\n * @module 'tabs/primitives'\n */\n\n/**\n * The container and context provider of the tabs.\n */\nexport function TabsRoot(props: TabsRootProps & TabsVariantProps) {\n  const { palette, ...rootProps } = props\n  const styles = tabs({ palette })\n  return (\n    <Tabs.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The tab list container for the Tabs group.\n */\nexport function TabsList(props: TabListProps) {\n  const styles = tabs()\n  return <Tabs.List {...props} className={cx(styles.list, props.className)} />\n}\n\n/**\n * The tab element.\n */\nexport function TabsTrigger(props: TabTriggerProps) {\n  const styles = tabs()\n  return (\n    <Tabs.Trigger {...props} className={cx(styles.trigger, props.className)} />\n  )\n}\n\n/**\n * The tab content element.\n */\nexport function TabsContent(props: TabContentProps) {\n  const styles = tabs()\n  return (\n    <Tabs.Content {...props} className={cx(styles.content, props.className)} />\n  )\n}\n\n/**\n * The tab indicator element.\n */\nexport function TabsIndicator(props: TabIndicatorProps) {\n  const styles = tabs()\n  return (\n    <Tabs.Indicator\n      {...props}\n      className={cx(styles.indicator, props.className)}\n    />\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAMK;AACP,SAAS,UAAU;AACnB,SAAS,YAAmC;AAcxC;AAJG,SAAS,SAAS,OAAyC;AAChE,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI;AAClC,QAAM,SAAS,KAAK,EAAE,QAAQ,CAAC;AAC/B,SACE;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,SAAS,OAAqB;AAC5C,QAAM,SAAS,KAAK;AACpB,SAAO,oBAAC,KAAK,MAAL,EAAW,GAAG,OAAO,WAAW,GAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAC5E;AAKO,SAAS,YAAY,OAAwB;AAClD,QAAM,SAAS,KAAK;AACpB,SACE,oBAAC,KAAK,SAAL,EAAc,GAAG,OAAO,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS,GAAG;AAE7E;AAKO,SAAS,YAAY,OAAwB;AAClD,QAAM,SAAS,KAAK;AACpB,SACE,oBAAC,KAAK,SAAL,EAAc,GAAG,OAAO,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS,GAAG;AAE7E;AAKO,SAAS,cAAc,OAA0B;AACtD,QAAM,SAAS,KAAK;AACpB,SACE;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;","names":[]}

package/build/modern/{chunk-RU5LOXWI.js → chunk-L64HQGLQ.js}

@@ -11,7 +11,7 @@ import {
   Small,
   Span,
   Strong
-} from "@cerberus/styled-system/jsx";
+} from "styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
@@ -44,4 +44,4 @@ function Text(props) {
 export {
   Text
 };
-//# sourceMappingURL=chunk-RU5LOXWI.js.map
+//# sourceMappingURL=chunk-L64HQGLQ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Text.tsx"],"sourcesContent":["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 'styled-system/jsx'\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 extends PProps {\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: 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"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAmCM;AAJN,SAAS,KAAK,OAAkB;AACrC,QAAM,EAAE,KAAK,KAAK,GAAG,cAAc,IAAI;AACvC,UAAQ,IAAI;AAAA,IACV,KAAK;AACH,aAAO,oBAAC,MAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,oBAAC,MAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,oBAAC,MAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,oBAAC,MAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,oBAAC,MAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,oBAAC,MAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,oBAAC,UAAQ,GAAG,eAAe;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,MAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,oBAAC,SAAO,GAAG,eAAe;AAAA,IACnC,KAAK;AACH,aAAO,oBAAC,QAAM,GAAG,eAAe;AAAA,IAClC;AACE,aAAO,oBAAC,KAAG,GAAG,eAAe;AAAA,EACjC;AACF;","names":[]}

package/build/modern/{chunk-6WEW5OGL.js → chunk-LEBDLXJE.js}

@@ -1,18 +1,18 @@
-import {
-  splitProps
-} from "./chunk-BL7G3577.js";
 import {
   FieldErrorText,
   FieldHelperText,
   FieldLabel,
   FieldRoot
-} from "./chunk-VNPLKMEM.js";
+} from "./chunk-WEL43I6Y.js";
+import {
+  splitProps
+} from "./chunk-BL7G3577.js";
 import {
   Show
-} from "./chunk-BUVVRQLZ.js";
+} from "./chunk-VEAC4I3F.js";
 
 // src/components/field/field.tsx
-import { HStack } from "@cerberus/styled-system/jsx";
+import { HStack } from "styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Field(props) {
   const [statusProps, fieldProps, rootProps] = splitProps(
@@ -21,11 +21,11 @@ function Field(props) {
     ["label", "helperText", "secondaryHelperText", "errorText", "children"]
   );
   return /* @__PURE__ */ jsxs(FieldRoot, { ...statusProps, ...rootProps, children: [
-    /* @__PURE__ */ jsx(Show, { when: Boolean(fieldProps.label), children: /* @__PURE__ */ jsx(FieldLabel, { children: fieldProps.label }) }),
+    /* @__PURE__ */ jsx(Show, { when: fieldProps.label, children: /* @__PURE__ */ jsx(FieldLabel, { children: fieldProps.label }) }),
     fieldProps.children,
-    /* @__PURE__ */ jsx(Show, { when: Boolean(fieldProps.helperText && !statusProps.invalid), children: /* @__PURE__ */ jsxs(HStack, { justifyContent: "space-between", w: "full", children: [
+    /* @__PURE__ */ jsx(Show, { when: fieldProps.helperText && !statusProps.invalid, children: /* @__PURE__ */ jsxs(HStack, { justifyContent: "space-between", w: "full", children: [
       /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.helperText }),
-      /* @__PURE__ */ jsx(Show, { when: Boolean(fieldProps.secondaryHelperText), children: /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
+      /* @__PURE__ */ jsx(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
     ] }) }),
     /* @__PURE__ */ jsx(FieldErrorText, { children: fieldProps.errorText })
   ] });
@@ -34,4 +34,4 @@ function Field(props) {
 export {
   Field
 };
-//# sourceMappingURL=chunk-6WEW5OGL.js.map
+//# sourceMappingURL=chunk-LEBDLXJE.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { type FieldRootProps } from '@ark-ui/react/field'\nimport { splitProps } from '../../utils/index'\nimport {\n  FieldErrorText,\n  FieldHelperText,\n  FieldLabel,\n  FieldRoot,\n} from './primitives'\nimport { HStack } from 'styled-system/jsx'\nimport { Show } from '../Show'\n\nexport interface FieldProps extends FieldRootProps {\n  /**\n   * The label of the field.\n   */\n  label?: string\n  /**\n   * The helper text of the field.\n   */\n  helperText?: string\n  /**\n   * A helper text positioned at the end of the field. Good for Textarea fields.\n   */\n  secondaryHelperText?: string\n  /**\n   * The error text of the field. Shown when the field is invalid.\n   */\n  errorText?: string\n}\n\n/**\n * The Field component is the context provider for all FieldParts and displays\n * the label, helperText, and ErrorText.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <Field\n *  ids={{\n *   control: 'firstName',\n *  }}\n *  label=\"Label\"\n *  helperText=\"This is what people will see on your profile.\"\n *  errorText=\"A first name is required to create an account.\"\n *  required\n * >\n *   <Input name=\"firstName\" type=\"text\" />\n * </Field>\n * ```\n */\nexport function Field(props: FieldProps) {\n  const [statusProps, fieldProps, rootProps] = splitProps(\n    props,\n    ['disabled', 'required', 'readOnly', 'invalid'],\n    ['label', 'helperText', 'secondaryHelperText', 'errorText', 'children'],\n  )\n\n  return (\n    <FieldRoot {...statusProps} {...rootProps}>\n      <Show when={fieldProps.label}>\n        <FieldLabel>{fieldProps.label}</FieldLabel>\n      </Show>\n\n      {fieldProps.children}\n\n      <Show when={fieldProps.helperText && !statusProps.invalid}>\n        <HStack justifyContent=\"space-between\" w=\"full\">\n          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>\n          <Show when={fieldProps.secondaryHelperText}>\n            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>\n          </Show>\n        </HStack>\n      </Show>\n\n      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>\n    </FieldRoot>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAQA,SAAS,cAAc;AAmDf,cAMA,YANA;AAVD,SAAS,MAAM,OAAmB;AACvC,QAAM,CAAC,aAAa,YAAY,SAAS,IAAI;AAAA,IAC3C;AAAA,IACA,CAAC,YAAY,YAAY,YAAY,SAAS;AAAA,IAC9C,CAAC,SAAS,cAAc,uBAAuB,aAAa,UAAU;AAAA,EACxE;AAEA,SACE,qBAAC,aAAW,GAAG,aAAc,GAAG,WAC9B;AAAA,wBAAC,QAAK,MAAM,WAAW,OACrB,8BAAC,cAAY,qBAAW,OAAM,GAChC;AAAA,IAEC,WAAW;AAAA,IAEZ,oBAAC,QAAK,MAAM,WAAW,cAAc,CAAC,YAAY,SAChD,+BAAC,UAAO,gBAAe,iBAAgB,GAAE,QACvC;AAAA,0BAAC,mBAAiB,qBAAW,YAAW;AAAA,MACxC,oBAAC,QAAK,MAAM,WAAW,qBACrB,8BAAC,mBAAiB,qBAAW,qBAAoB,GACnD;AAAA,OACF,GACF;AAAA,IAEA,oBAAC,kBAAgB,qBAAW,WAAU;AAAA,KACxC;AAEJ;","names":[]}

package/build/modern/{chunk-A464YKEL.js → chunk-MDXJ6MGF.js}

@@ -1,7 +1,7 @@
 // src/components/table/primitives.tsx
 import { ark } from "@ark-ui/react/factory";
-import { cx } from "@cerberus/styled-system/css";
-import { table } from "@cerberus/styled-system/recipes";
+import { cx } from "styled-system/css";
+import { table } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function TableRoot(props) {
   const { decoration, size, ...rootProps } = props;
@@ -140,4 +140,4 @@ export {
   Tfoot,
   TableTrigger
 };
-//# sourceMappingURL=chunk-A464YKEL.js.map
+//# sourceMappingURL=chunk-MDXJ6MGF.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/table/primitives.tsx"],"sourcesContent":["import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { cx } from 'styled-system/css'\nimport { table, type TableVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Table component.\n * @module 'table/primitives'\n */\n\n/**\n * The root element is the container of the Table.\n */\nexport function TableRoot(props: HTMLArkProps<'div'> & TableVariantProps) {\n  const { decoration, size, ...rootProps } = props\n  const styles = table({\n    decoration,\n    size,\n  })\n\n  return (\n    <ark.div\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n      data-scope=\"table\"\n      data-part=\"root\"\n    />\n  )\n}\n\n/**\n * The table element is the table itself.\n */\nexport function TableEl(props: HTMLArkProps<'table'>) {\n  const styles = table()\n  return (\n    <ark.table\n      {...props}\n      className={cx(styles.table, props.className)}\n      data-scope=\"table\"\n      data-part=\"table\"\n    />\n  )\n}\n\n/**\n * The table caption element is the caption of the table.\n */\nexport function Caption(props: HTMLArkProps<'caption'>) {\n  const styles = table()\n  return (\n    <ark.caption\n      {...props}\n      className={cx(styles.caption, props.className)}\n      data-scope=\"table\"\n      data-part=\"caption\"\n    />\n  )\n}\n\n/**\n * The table head element is the head of the table.\n */\nexport function Thead(props: HTMLArkProps<'thead'>) {\n  const styles = table()\n  return (\n    <ark.thead\n      {...props}\n      className={cx(styles.thead, props.className)}\n      data-scope=\"table\"\n      data-part=\"header\"\n    />\n  )\n}\n\n/**\n * The table header cell element is the header cell of the table.\n */\nexport function Th(props: HTMLArkProps<'th'>) {\n  const styles = table()\n  return (\n    <ark.th\n      {...props}\n      className={cx(styles.th, props.className)}\n      data-scope=\"table\"\n      data-part=\"header-col\"\n    />\n  )\n}\n\n/**\n * The table body element is the body of the table.\n */\nexport function Tbody(props: HTMLArkProps<'tbody'>) {\n  const styles = table()\n  return (\n    <ark.tbody\n      {...props}\n      className={cx(styles.tbody, props.className)}\n      data-scope=\"table\"\n      data-part=\"body\"\n    />\n  )\n}\n\n/**\n * The table row element is the row of the table.\n */\nexport function Tr(props: HTMLArkProps<'tr'>) {\n  const styles = table()\n  return (\n    <ark.tr\n      {...props}\n      className={cx(styles.tr, props.className)}\n      data-scope=\"table\"\n      data-part=\"row\"\n    />\n  )\n}\n\n/**\n * The table cell element is the cell of the table.\n */\nexport function Td(props: HTMLArkProps<'td'>) {\n  const styles = table()\n  return (\n    <ark.td\n      {...props}\n      className={cx(styles.td, props.className)}\n      data-scope=\"table\"\n      data-part=\"cell\"\n    />\n  )\n}\n\n/**\n * The table footer element is the footer of the table.\n */\nexport function Tfoot(props: HTMLArkProps<'tfoot'>) {\n  const styles = table()\n  return (\n    <ark.tfoot\n      {...props}\n      className={cx(styles.tfoot, props.className)}\n      data-scope=\"table\"\n      data-part=\"footer\"\n    />\n  )\n}\n\n/**\n * The table trigger element is the trigger of an actionable th cell.\n */\nexport function TableTrigger(props: HTMLArkProps<'button'>) {\n  const styles = table()\n  return (\n    <ark.button\n      {...props}\n      className={cx(styles.trigger, props.className)}\n      data-scope=\"table\"\n      data-part=\"trigger\"\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,aAAqC;AAkB1C;AARG,SAAS,UAAU,OAAgD;AACxE,QAAM,EAAE,YAAY,MAAM,GAAG,UAAU,IAAI;AAC3C,QAAM,SAAS,MAAM;AAAA,IACnB;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,UAAU,SAAS;AAAA,MAC9C,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,QAAQ,OAA8B;AACpD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS;AAAA,MAC3C,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,QAAQ,OAAgC;AACtD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS;AAAA,MAC7C,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,MAAM,OAA8B;AAClD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS;AAAA,MAC3C,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,GAAG,OAA2B;AAC5C,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,IAAI,MAAM,SAAS;AAAA,MACxC,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,MAAM,OAA8B;AAClD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS;AAAA,MAC3C,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,GAAG,OAA2B;AAC5C,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,IAAI,MAAM,SAAS;AAAA,MACxC,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,GAAG,OAA2B;AAC5C,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,IAAI,MAAM,SAAS;AAAA,MACxC,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,MAAM,OAA8B;AAClD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS;AAAA,MAC3C,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;AAKO,SAAS,aAAa,OAA+B;AAC1D,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS;AAAA,MAC7C,cAAW;AAAA,MACX,aAAU;AAAA;AAAA,EACZ;AAEJ;","names":[]}