cetec-design-system 1.1.0 → 1.2.0

package/dist/index.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { forwardRef, useMemo, createElement, createContext, useContext, useLayoutEffect, useState, useRef, useId as useId$1, useEffect, Children, isValidElement, cloneElement, useReducer, useSyncExternalStore, useCallback } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
-import { b as breakpoints, c as containerSizes } from "./cetec-preset-BCioTXu9.js";
-import { a } from "./cetec-preset-BCioTXu9.js";
+import { b as breakpoints, c as containerSizes } from "./cetec-preset-kUkA_FyU.js";
+import { a } from "./cetec-preset-kUkA_FyU.js";
 function isObject(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
 }
@@ -709,8 +709,81 @@ const heading = /* @__PURE__ */ Object.assign(memo(headingFn.recipeFn), {
   },
   getVariantProps: headingFn.getVariantProps
 });
-const iconFn = /* @__PURE__ */ createRecipe("icon", {}, []);
-const iconVariantMap = {};
+const highlightTextFn = /* @__PURE__ */ createRecipe("highlightText", {}, []);
+const highlightTextVariantMap = {};
+const highlightTextVariantKeys = Object.keys(highlightTextVariantMap);
+const highlightText = /* @__PURE__ */ Object.assign(memo(highlightTextFn.recipeFn), {
+  __recipe__: true,
+  __name__: "highlightText",
+  __getCompoundVariantCss__: highlightTextFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: highlightTextVariantKeys,
+  variantMap: highlightTextVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, highlightTextVariantKeys);
+  },
+  getVariantProps: highlightTextFn.getVariantProps
+});
+const iconFn = /* @__PURE__ */ createRecipe("icon", {
+  "size": "24"
+}, []);
+const iconVariantMap = {
+  "size": [
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "12",
+    "14",
+    "16",
+    "20",
+    "22",
+    "24",
+    "28",
+    "32",
+    "40",
+    "48",
+    "56",
+    "64",
+    "72",
+    "80",
+    "88",
+    "96",
+    "104",
+    "112",
+    "120",
+    "128",
+    "136",
+    "144",
+    "152",
+    "160",
+    "168",
+    "176",
+    "184",
+    "192",
+    "200",
+    "208",
+    "216",
+    "224",
+    "232",
+    "240",
+    "248",
+    "256",
+    "264",
+    "272",
+    "280"
+  ]
+};
 const iconVariantKeys = Object.keys(iconVariantMap);
 const icon = /* @__PURE__ */ Object.assign(memo(iconFn.recipeFn), {
   __recipe__: true,
@@ -859,201 +932,474 @@ const link = /* @__PURE__ */ Object.assign(memo(linkFn.recipeFn), {
   },
   getVariantProps: linkFn.getVariantProps
 });
-const preFn = /* @__PURE__ */ createRecipe("pre", {}, []);
-const preVariantMap = {};
-const preVariantKeys = Object.keys(preVariantMap);
-const pre = /* @__PURE__ */ Object.assign(memo(preFn.recipeFn), {
-  __recipe__: true,
-  __name__: "pre",
-  __getCompoundVariantCss__: preFn.__getCompoundVariantCss__,
-  raw: (props) => props,
-  variantKeys: preVariantKeys,
-  variantMap: preVariantMap,
-  merge(recipe) {
-    return mergeRecipes(this, recipe);
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, preVariantKeys);
-  },
-  getVariantProps: preFn.getVariantProps
+const listItemGroupDefaultVariants = {
+  "density": "compact"
+};
+const listItemGroupCompoundVariants = [];
+const listItemGroupSlotNames = [
+  [
+    "wrapper",
+    "listItemGroup__wrapper"
+  ],
+  [
+    "groupLabel",
+    "listItemGroup__groupLabel"
+  ],
+  [
+    "divider",
+    "listItemGroup__divider"
+  ]
+];
+const listItemGroupSlotFns = /* @__PURE__ */ listItemGroupSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, listItemGroupDefaultVariants, getSlotCompoundVariant(listItemGroupCompoundVariants, slotName))]);
+const listItemGroupFn = memo((props = {}) => {
+  return Object.fromEntries(listItemGroupSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
-const radioInputFn = /* @__PURE__ */ createRecipe("radioInput", {}, []);
-const radioInputVariantMap = {};
-const radioInputVariantKeys = Object.keys(radioInputVariantMap);
-const radioInput = /* @__PURE__ */ Object.assign(memo(radioInputFn.recipeFn), {
-  __recipe__: true,
-  __name__: "radioInput",
-  __getCompoundVariantCss__: radioInputFn.__getCompoundVariantCss__,
+const listItemGroupVariantKeys = [
+  "density"
+];
+const getVariantProps$g = (variants) => ({ ...listItemGroupDefaultVariants, ...compact(variants) });
+const listItemGroup = /* @__PURE__ */ Object.assign(listItemGroupFn, {
+  __recipe__: false,
+  __name__: "listItemGroup",
   raw: (props) => props,
-  variantKeys: radioInputVariantKeys,
-  variantMap: radioInputVariantMap,
-  merge(recipe) {
-    return mergeRecipes(this, recipe);
+  classNameMap: {},
+  variantKeys: listItemGroupVariantKeys,
+  variantMap: {
+    "density": [
+      "compact",
+      "comfortable",
+      "spacious"
+    ]
   },
   splitVariantProps(props) {
-    return splitProps$1(props, radioInputVariantKeys);
+    return splitProps$1(props, listItemGroupVariantKeys);
   },
-  getVariantProps: radioInputFn.getVariantProps
+  getVariantProps: getVariantProps$g
 });
-const tagFn = /* @__PURE__ */ createRecipe("tag", {
+const listItemDefaultVariants = {
   "variant": "default",
-  "hue": "slate"
-}, [
-  {
-    "hue": "slate",
-    "variant": "default",
-    "css": {
-      "color": {
-        "base": "slate.70",
-        "_dark": "slate.20"
-      },
-      "bg": {
-        "base": "slate.10",
-        "_dark": "slate.70"
-      }
-    }
-  },
-  {
-    "hue": "slate",
-    "variant": "bold",
-    "css": {
-      "color": {
-        "base": "slate.0",
-        "_dark": "slate.80"
-      },
-      "bg": {
-        "base": "slate.50",
-        "_dark": "slate.20"
-      }
-    }
-  },
+  "density": "compact",
+  "selected": false
+};
+const listItemCompoundVariants = [
   {
-    "hue": "tan",
-    "variant": "default",
+    "density": "compact",
+    "iconBefore": true,
     "css": {
-      "color": {
-        "base": "tan.70",
-        "_dark": "tan.20"
-      },
-      "bg": {
-        "base": "tan.10",
-        "_dark": "tan.70"
+      "wrapper": {
+        "ps": "5"
       }
     }
   },
   {
-    "hue": "tan",
-    "variant": "bold",
+    "density": "compact",
+    "iconAfter": true,
     "css": {
-      "color": {
-        "base": "slate.0",
-        "_dark": "tan.80"
-      },
-      "bg": {
-        "base": "tan.50",
-        "_dark": "tan.20"
+      "wrapper": {
+        "pe": "5"
       }
     }
   },
   {
-    "hue": "red",
-    "variant": "default",
+    "density": "compact",
+    "variant": "checkbox",
     "css": {
-      "color": {
-        "base": "red.70",
-        "_dark": "red.10"
-      },
-      "bg": {
-        "base": "red.10",
-        "_dark": "red.70"
+      "wrapper": {
+        "ps": "5"
       }
     }
   },
   {
-    "hue": "red",
-    "variant": "bold",
+    "density": "comfortable",
+    "iconBefore": true,
     "css": {
-      "color": {
-        "base": "slate.0",
-        "_dark": "red.80"
-      },
-      "bg": {
-        "base": "red.50",
-        "_dark": "red.20"
+      "wrapper": {
+        "ps": "7"
       }
     }
   },
   {
-    "hue": "tomato",
-    "variant": "default",
+    "density": "comfortable",
+    "iconAfter": true,
     "css": {
-      "color": {
-        "base": "tomato.70",
-        "_dark": "tomato.20"
-      },
-      "bg": {
-        "base": "tomato.10",
-        "_dark": "tomato.70"
+      "wrapper": {
+        "pe": "7"
       }
     }
   },
   {
-    "hue": "tomato",
-    "variant": "bold",
+    "density": "comfortable",
+    "variant": "checkbox",
     "css": {
-      "color": {
-        "base": "slate.0",
-        "_dark": "tomato.80"
-      },
-      "bg": {
-        "base": "tomato.50",
-        "_dark": "tomato.20"
+      "wrapper": {
+        "ps": "7"
       }
     }
   },
   {
-    "hue": "orange",
-    "variant": "default",
+    "density": "spacious",
+    "iconBefore": true,
     "css": {
-      "color": {
-        "base": "orange.70",
-        "_dark": "orange.20"
-      },
-      "bg": {
-        "base": "orange.10",
-        "_dark": "orange.70"
+      "wrapper": {
+        "ps": "9"
       }
     }
   },
   {
-    "hue": "orange",
-    "variant": "bold",
+    "density": "spacious",
+    "iconAfter": true,
     "css": {
-      "color": {
-        "base": "orange.5",
-        "_dark": "orange.80"
-      },
-      "bg": {
-        "base": "orange.60",
-        "_dark": "orange.20"
+      "wrapper": {
+        "pe": "9"
       }
     }
   },
   {
-    "hue": "yellow",
-    "variant": "default",
+    "density": "spacious",
+    "variant": "checkbox",
     "css": {
-      "color": {
-        "base": "yellow.60",
-        "_dark": "yellow.10"
-      },
-      "bg": {
-        "base": "yellow.10",
-        "_dark": "yellow.60"
+      "wrapper": {
+        "ps": "9"
       }
     }
-  },
-  {
+  }
+];
+const listItemSlotNames = [
+  [
+    "wrapper",
+    "listItem__wrapper"
+  ],
+  [
+    "icon",
+    "listItem__icon"
+  ],
+  [
+    "itemMain",
+    "listItem__itemMain"
+  ],
+  [
+    "itemLabel",
+    "listItem__itemLabel"
+  ],
+  [
+    "itemDescription",
+    "listItem__itemDescription"
+  ],
+  [
+    "divider",
+    "listItem__divider"
+  ]
+];
+const listItemSlotFns = /* @__PURE__ */ listItemSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, listItemDefaultVariants, getSlotCompoundVariant(listItemCompoundVariants, slotName))]);
+const listItemFn = memo((props = {}) => {
+  return Object.fromEntries(listItemSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const listItemVariantKeys = [
+  "variant",
+  "density",
+  "selected",
+  "iconBefore",
+  "iconAfter"
+];
+const getVariantProps$f = (variants) => ({ ...listItemDefaultVariants, ...compact(variants) });
+const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
+  __recipe__: false,
+  __name__: "listItem",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: listItemVariantKeys,
+  variantMap: {
+    "variant": [
+      "default",
+      "checkbox",
+      "toggle",
+      "divider"
+    ],
+    "density": [
+      "compact",
+      "comfortable",
+      "spacious"
+    ],
+    "selected": [
+      "true",
+      "false"
+    ],
+    "iconBefore": [
+      "true",
+      "false"
+    ],
+    "iconAfter": [
+      "true",
+      "false"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, listItemVariantKeys);
+  },
+  getVariantProps: getVariantProps$f
+});
+const listFn = /* @__PURE__ */ createRecipe("list", {}, []);
+const listVariantMap = {};
+const listVariantKeys = Object.keys(listVariantMap);
+const list = /* @__PURE__ */ Object.assign(memo(listFn.recipeFn), {
+  __recipe__: true,
+  __name__: "list",
+  __getCompoundVariantCss__: listFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: listVariantKeys,
+  variantMap: listVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, listVariantKeys);
+  },
+  getVariantProps: listFn.getVariantProps
+});
+const preFn = /* @__PURE__ */ createRecipe("pre", {}, []);
+const preVariantMap = {};
+const preVariantKeys = Object.keys(preVariantMap);
+const pre = /* @__PURE__ */ Object.assign(memo(preFn.recipeFn), {
+  __recipe__: true,
+  __name__: "pre",
+  __getCompoundVariantCss__: preFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: preVariantKeys,
+  variantMap: preVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, preVariantKeys);
+  },
+  getVariantProps: preFn.getVariantProps
+});
+const radioInputFn = /* @__PURE__ */ createRecipe("radioInput", {}, []);
+const radioInputVariantMap = {};
+const radioInputVariantKeys = Object.keys(radioInputVariantMap);
+const radioInput = /* @__PURE__ */ Object.assign(memo(radioInputFn.recipeFn), {
+  __recipe__: true,
+  __name__: "radioInput",
+  __getCompoundVariantCss__: radioInputFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: radioInputVariantKeys,
+  variantMap: radioInputVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, radioInputVariantKeys);
+  },
+  getVariantProps: radioInputFn.getVariantProps
+});
+const spinnerDefaultVariants = {
+  "size": "md"
+};
+const spinnerCompoundVariants = [];
+const spinnerSlotNames = [
+  [
+    "container",
+    "spinner__container"
+  ],
+  [
+    "spinnerDiv",
+    "spinner__spinnerDiv"
+  ]
+];
+const spinnerSlotFns = /* @__PURE__ */ spinnerSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, spinnerDefaultVariants, getSlotCompoundVariant(spinnerCompoundVariants, slotName))]);
+const spinnerFn = memo((props = {}) => {
+  return Object.fromEntries(spinnerSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const spinnerVariantKeys = [
+  "size",
+  "inverse",
+  "centered"
+];
+const getVariantProps$e = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
+  __recipe__: false,
+  __name__: "spinner",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: spinnerVariantKeys,
+  variantMap: {
+    "size": [
+      "xs",
+      "sm",
+      "md",
+      "lg"
+    ],
+    "inverse": [
+      "true"
+    ],
+    "centered": [
+      "true"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, spinnerVariantKeys);
+  },
+  getVariantProps: getVariantProps$e
+});
+const tagFn = /* @__PURE__ */ createRecipe("tag", {
+  "variant": "default",
+  "hue": "slate"
+}, [
+  {
+    "hue": "slate",
+    "variant": "default",
+    "css": {
+      "color": {
+        "base": "slate.70",
+        "_dark": "slate.20"
+      },
+      "bg": {
+        "base": "slate.10",
+        "_dark": "slate.70"
+      }
+    }
+  },
+  {
+    "hue": "slate",
+    "variant": "bold",
+    "css": {
+      "color": {
+        "base": "slate.0",
+        "_dark": "slate.80"
+      },
+      "bg": {
+        "base": "slate.50",
+        "_dark": "slate.20"
+      }
+    }
+  },
+  {
+    "hue": "tan",
+    "variant": "default",
+    "css": {
+      "color": {
+        "base": "tan.70",
+        "_dark": "tan.20"
+      },
+      "bg": {
+        "base": "tan.10",
+        "_dark": "tan.70"
+      }
+    }
+  },
+  {
+    "hue": "tan",
+    "variant": "bold",
+    "css": {
+      "color": {
+        "base": "slate.0",
+        "_dark": "tan.80"
+      },
+      "bg": {
+        "base": "tan.50",
+        "_dark": "tan.20"
+      }
+    }
+  },
+  {
+    "hue": "red",
+    "variant": "default",
+    "css": {
+      "color": {
+        "base": "red.70",
+        "_dark": "red.10"
+      },
+      "bg": {
+        "base": "red.10",
+        "_dark": "red.70"
+      }
+    }
+  },
+  {
+    "hue": "red",
+    "variant": "bold",
+    "css": {
+      "color": {
+        "base": "slate.0",
+        "_dark": "red.80"
+      },
+      "bg": {
+        "base": "red.50",
+        "_dark": "red.20"
+      }
+    }
+  },
+  {
+    "hue": "tomato",
+    "variant": "default",
+    "css": {
+      "color": {
+        "base": "tomato.70",
+        "_dark": "tomato.20"
+      },
+      "bg": {
+        "base": "tomato.10",
+        "_dark": "tomato.70"
+      }
+    }
+  },
+  {
+    "hue": "tomato",
+    "variant": "bold",
+    "css": {
+      "color": {
+        "base": "slate.0",
+        "_dark": "tomato.80"
+      },
+      "bg": {
+        "base": "tomato.50",
+        "_dark": "tomato.20"
+      }
+    }
+  },
+  {
+    "hue": "orange",
+    "variant": "default",
+    "css": {
+      "color": {
+        "base": "orange.70",
+        "_dark": "orange.20"
+      },
+      "bg": {
+        "base": "orange.10",
+        "_dark": "orange.70"
+      }
+    }
+  },
+  {
+    "hue": "orange",
+    "variant": "bold",
+    "css": {
+      "color": {
+        "base": "orange.5",
+        "_dark": "orange.80"
+      },
+      "bg": {
+        "base": "orange.60",
+        "_dark": "orange.20"
+      }
+    }
+  },
+  {
+    "hue": "yellow",
+    "variant": "default",
+    "css": {
+      "color": {
+        "base": "yellow.60",
+        "_dark": "yellow.10"
+      },
+      "bg": {
+        "base": "yellow.10",
+        "_dark": "yellow.60"
+      }
+    }
+  },
+  {
     "hue": "yellow",
     "variant": "bold",
     "css": {
@@ -1536,203 +1882,101 @@ const toggleInput = /* @__PURE__ */ Object.assign(memo(toggleInputFn.recipeFn),
   },
   getVariantProps: toggleInputFn.getVariantProps
 });
-const listFn = /* @__PURE__ */ createRecipe("list", {}, []);
-const listVariantMap = {};
-const listVariantKeys = Object.keys(listVariantMap);
-const list = /* @__PURE__ */ Object.assign(memo(listFn.recipeFn), {
-  __recipe__: true,
-  __name__: "list",
-  __getCompoundVariantCss__: listFn.__getCompoundVariantCss__,
+const toggleDefaultVariants = {};
+const toggleCompoundVariants = [];
+const toggleSlotNames = [
+  [
+    "container",
+    "toggle__container"
+  ],
+  [
+    "input",
+    "toggle__input"
+  ],
+  [
+    "indicator",
+    "toggle__indicator"
+  ]
+];
+const toggleSlotFns = /* @__PURE__ */ toggleSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toggleDefaultVariants, getSlotCompoundVariant(toggleCompoundVariants, slotName))]);
+const toggleFn = memo((props = {}) => {
+  return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const toggleVariantKeys = [];
+const getVariantProps$d = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
+  __recipe__: false,
+  __name__: "toggle",
   raw: (props) => props,
-  variantKeys: listVariantKeys,
-  variantMap: listVariantMap,
-  merge(recipe) {
-    return mergeRecipes(this, recipe);
-  },
+  classNameMap: {},
+  variantKeys: toggleVariantKeys,
+  variantMap: {},
   splitVariantProps(props) {
-    return splitProps$1(props, listVariantKeys);
+    return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: listFn.getVariantProps
+  getVariantProps: getVariantProps$d
 });
-const listItemDefaultVariants = {
-  "variant": "default",
-  "density": "compact",
-  "selected": false
+const avatarDefaultVariants = {
+  "size": "md",
+  "shape": "circle"
 };
-const listItemCompoundVariants = [
-  {
-    "density": "compact",
-    "iconBefore": true,
-    "css": {
-      "wrapper": {
-        "ps": "5"
-      }
-    }
-  },
-  {
-    "density": "compact",
-    "iconAfter": true,
-    "css": {
-      "wrapper": {
-        "pe": "5"
-      }
-    }
-  },
-  {
-    "density": "compact",
-    "variant": "checkbox",
-    "css": {
-      "wrapper": {
-        "ps": "5"
-      }
-    }
-  },
-  {
-    "density": "comfortable",
-    "iconBefore": true,
-    "css": {
-      "wrapper": {
-        "ps": "7"
-      }
-    }
-  },
-  {
-    "density": "comfortable",
-    "iconAfter": true,
-    "css": {
-      "wrapper": {
-        "pe": "7"
-      }
-    }
-  },
-  {
-    "density": "comfortable",
-    "variant": "checkbox",
-    "css": {
-      "wrapper": {
-        "ps": "7"
-      }
-    }
-  },
-  {
-    "density": "spacious",
-    "iconBefore": true,
-    "css": {
-      "wrapper": {
-        "ps": "9"
-      }
-    }
-  },
-  {
-    "density": "spacious",
-    "iconAfter": true,
-    "css": {
-      "wrapper": {
-        "pe": "9"
-      }
-    }
-  },
-  {
-    "density": "spacious",
-    "variant": "checkbox",
-    "css": {
-      "wrapper": {
-        "ps": "9"
-      }
-    }
-  }
-];
-const listItemSlotNames = [
-  [
-    "wrapper",
-    "listItem__wrapper"
-  ],
+const avatarCompoundVariants = [];
+const avatarSlotNames = [
   [
-    "icon",
-    "listItem__icon"
+    "root",
+    "avatar__root"
   ],
   [
-    "itemMain",
-    "listItem__itemMain"
+    "image",
+    "avatar__image"
   ],
   [
-    "itemLabel",
-    "listItem__itemLabel"
+    "fallback",
+    "avatar__fallback"
   ],
   [
-    "itemDescription",
-    "listItem__itemDescription"
+    "presence",
+    "avatar__presence"
   ],
   [
-    "divider",
-    "listItem__divider"
+    "status",
+    "avatar__status"
   ]
 ];
-const listItemSlotFns = /* @__PURE__ */ listItemSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, listItemDefaultVariants, getSlotCompoundVariant(listItemCompoundVariants, slotName))]);
-const listItemFn = memo((props = {}) => {
-  return Object.fromEntries(listItemSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+const avatarSlotFns = /* @__PURE__ */ avatarSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarDefaultVariants, getSlotCompoundVariant(avatarCompoundVariants, slotName))]);
+const avatarFn = memo((props = {}) => {
+  return Object.fromEntries(avatarSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
-const listItemVariantKeys = [
-  "variant",
-  "density",
-  "selected",
-  "iconBefore",
-  "iconAfter"
+const avatarVariantKeys = [
+  "size",
+  "shape"
 ];
-const getVariantProps$g = (variants) => ({ ...listItemDefaultVariants, ...compact(variants) });
-const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
-  __recipe__: false,
-  __name__: "listItem",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: listItemVariantKeys,
-  variantMap: {
-    "variant": [
-      "default",
-      "checkbox",
-      "toggle",
-      "divider"
-    ],
-    "density": [
-      "compact",
-      "comfortable",
-      "spacious"
-    ],
-    "selected": [
-      "true",
-      "false"
-    ],
-    "iconBefore": [
-      "true",
-      "false"
-    ],
-    "iconAfter": [
-      "true",
-      "false"
-    ]
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, listItemVariantKeys);
-  },
-  getVariantProps: getVariantProps$g
-});
-const highlightTextFn = /* @__PURE__ */ createRecipe("highlightText", {}, []);
-const highlightTextVariantMap = {};
-const highlightTextVariantKeys = Object.keys(highlightTextVariantMap);
-const highlightText = /* @__PURE__ */ Object.assign(memo(highlightTextFn.recipeFn), {
-  __recipe__: true,
-  __name__: "highlightText",
-  __getCompoundVariantCss__: highlightTextFn.__getCompoundVariantCss__,
+const getVariantProps$c = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
+  __recipe__: false,
+  __name__: "avatar",
   raw: (props) => props,
-  variantKeys: highlightTextVariantKeys,
-  variantMap: highlightTextVariantMap,
-  merge(recipe) {
-    return mergeRecipes(this, recipe);
+  classNameMap: {},
+  variantKeys: avatarVariantKeys,
+  variantMap: {
+    "size": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "2xl"
+    ],
+    "shape": [
+      "circle",
+      "square",
+      "hexagon"
+    ]
   },
   splitVariantProps(props) {
-    return splitProps$1(props, highlightTextVariantKeys);
+    return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: highlightTextFn.getVariantProps
+  getVariantProps: getVariantProps$c
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1790,7 +2034,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$f = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$b = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1825,7 +2069,45 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$f
+  getVariantProps: getVariantProps$b
+});
+const breadcrumbsDefaultVariants = {};
+const breadcrumbsCompoundVariants = [];
+const breadcrumbsSlotNames = [
+  [
+    "wrapper",
+    "breadcrumbs__wrapper"
+  ],
+  [
+    "slash",
+    "breadcrumbs__slash"
+  ],
+  [
+    "linkSegment",
+    "breadcrumbs__linkSegment"
+  ],
+  [
+    "currentSegment",
+    "breadcrumbs__currentSegment"
+  ]
+];
+const breadcrumbsSlotFns = /* @__PURE__ */ breadcrumbsSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, breadcrumbsDefaultVariants, getSlotCompoundVariant(breadcrumbsCompoundVariants, slotName))]);
+const breadcrumbsFn = memo((props = {}) => {
+  return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const breadcrumbsVariantKeys = [];
+const getVariantProps$a = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
+  __recipe__: false,
+  __name__: "breadcrumbs",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: breadcrumbsVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps$1(props, breadcrumbsVariantKeys);
+  },
+  getVariantProps: getVariantProps$a
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -1908,333 +2190,94 @@ const buttonCompoundVariants = [
 const buttonSlotNames = [
   [
     "container",
-    "button__container"
-  ],
-  [
-    "icon",
-    "button__icon"
-  ]
-];
-const buttonSlotFns = /* @__PURE__ */ buttonSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, buttonDefaultVariants, getSlotCompoundVariant(buttonCompoundVariants, slotName))]);
-const buttonFn = memo((props = {}) => {
-  return Object.fromEntries(buttonSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
-});
-const buttonVariantKeys = [
-  "variant",
-  "size",
-  "iconBefore",
-  "iconAfter"
-];
-const getVariantProps$e = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
-const button = /* @__PURE__ */ Object.assign(buttonFn, {
-  __recipe__: false,
-  __name__: "button",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: buttonVariantKeys,
-  variantMap: {
-    "variant": [
-      "standard",
-      "primary",
-      "hollow",
-      "ghost",
-      "cta",
-      "danger",
-      "selected",
-      "selectedBold"
-    ],
-    "size": [
-      "md",
-      "xl",
-      "lg",
-      "sm"
-    ],
-    "iconBefore": [
-      "true"
-    ],
-    "iconAfter": [
-      "true"
-    ]
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, buttonVariantKeys);
-  },
-  getVariantProps: getVariantProps$e
-});
-const iconButtonDefaultVariants = {
-  "variant": "standard",
-  "size": "md"
-};
-const iconButtonCompoundVariants = [];
-const iconButtonSlotNames = [
-  [
-    "container",
-    "iconButton__container"
-  ],
-  [
-    "icon",
-    "iconButton__icon"
-  ]
-];
-const iconButtonSlotFns = /* @__PURE__ */ iconButtonSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, iconButtonDefaultVariants, getSlotCompoundVariant(iconButtonCompoundVariants, slotName))]);
-const iconButtonFn = memo((props = {}) => {
-  return Object.fromEntries(iconButtonSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
-});
-const iconButtonVariantKeys = [
-  "variant",
-  "size"
-];
-const getVariantProps$d = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
-const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
-  __recipe__: false,
-  __name__: "iconButton",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: iconButtonVariantKeys,
-  variantMap: {
-    "variant": [
-      "standard",
-      "primary",
-      "hollow",
-      "ghost",
-      "cta",
-      "danger",
-      "selected",
-      "selectedBold"
-    ],
-    "size": [
-      "md",
-      "xl",
-      "lg",
-      "sm"
-    ]
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, iconButtonVariantKeys);
-  },
-  getVariantProps: getVariantProps$d
-});
-const checkboxDefaultVariants = {};
-const checkboxCompoundVariants = [];
-const checkboxSlotNames = [
-  [
-    "container",
-    "checkbox__container"
-  ],
-  [
-    "input",
-    "checkbox__input"
-  ],
-  [
-    "indicator",
-    "checkbox__indicator"
-  ],
-  [
-    "checkBg",
-    "checkbox__checkBg"
-  ]
-];
-const checkboxSlotFns = /* @__PURE__ */ checkboxSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, checkboxDefaultVariants, getSlotCompoundVariant(checkboxCompoundVariants, slotName))]);
-const checkboxFn = memo((props = {}) => {
-  return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
-});
-const checkboxVariantKeys = [];
-const getVariantProps$c = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
-const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
-  __recipe__: false,
-  __name__: "checkbox",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: checkboxVariantKeys,
-  variantMap: {},
-  splitVariantProps(props) {
-    return splitProps$1(props, checkboxVariantKeys);
-  },
-  getVariantProps: getVariantProps$c
-});
-const radioDefaultVariants = {};
-const radioCompoundVariants = [];
-const radioSlotNames = [
-  [
-    "container",
-    "radio__container"
-  ],
-  [
-    "input",
-    "radio__input"
-  ],
-  [
-    "indicator",
-    "radio__indicator"
-  ],
-  [
-    "radioBg",
-    "radio__radioBg"
-  ]
-];
-const radioSlotFns = /* @__PURE__ */ radioSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, radioDefaultVariants, getSlotCompoundVariant(radioCompoundVariants, slotName))]);
-const radioFn = memo((props = {}) => {
-  return Object.fromEntries(radioSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
-});
-const radioVariantKeys = [];
-const getVariantProps$b = (variants) => ({ ...radioDefaultVariants, ...compact(variants) });
-const radio = /* @__PURE__ */ Object.assign(radioFn, {
-  __recipe__: false,
-  __name__: "radio",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: radioVariantKeys,
-  variantMap: {},
-  splitVariantProps(props) {
-    return splitProps$1(props, radioVariantKeys);
-  },
-  getVariantProps: getVariantProps$b
-});
-const tooltipDefaultVariants = {
-  "size": "md",
-  "hasTitle": false
-};
-const tooltipCompoundVariants = [];
-const tooltipSlotNames = [
-  [
-    "tooltipContent",
-    "tooltip__tooltipContent"
-  ],
-  [
-    "title",
-    "tooltip__title"
+    "button__container"
   ],
   [
-    "text",
-    "tooltip__text"
+    "icon",
+    "button__icon"
   ]
 ];
-const tooltipSlotFns = /* @__PURE__ */ tooltipSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tooltipDefaultVariants, getSlotCompoundVariant(tooltipCompoundVariants, slotName))]);
-const tooltipFn = memo((props = {}) => {
-  return Object.fromEntries(tooltipSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+const buttonSlotFns = /* @__PURE__ */ buttonSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, buttonDefaultVariants, getSlotCompoundVariant(buttonCompoundVariants, slotName))]);
+const buttonFn = memo((props = {}) => {
+  return Object.fromEntries(buttonSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
-const tooltipVariantKeys = [
+const buttonVariantKeys = [
+  "variant",
   "size",
-  "hasTitle"
+  "iconBefore",
+  "iconAfter"
 ];
-const getVariantProps$a = (variants) => ({ ...tooltipDefaultVariants, ...compact(variants) });
-const tooltip = /* @__PURE__ */ Object.assign(tooltipFn, {
+const getVariantProps$9 = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
-  __name__: "tooltip",
+  __name__: "button",
   raw: (props) => props,
   classNameMap: {},
-  variantKeys: tooltipVariantKeys,
+  variantKeys: buttonVariantKeys,
   variantMap: {
+    "variant": [
+      "standard",
+      "primary",
+      "hollow",
+      "ghost",
+      "cta",
+      "danger",
+      "selected",
+      "selectedBold"
+    ],
     "size": [
-      "sm",
       "md",
-      "lg"
+      "xl",
+      "lg",
+      "sm"
     ],
-    "hasTitle": [
-      "true",
-      "false"
-    ]
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, tooltipVariantKeys);
-  },
-  getVariantProps: getVariantProps$a
-});
-const menuDefaultVariants = {
-  "density": "compact"
-};
-const menuCompoundVariants = [];
-const menuSlotNames = [
-  [
-    "wrapper",
-    "menu__wrapper"
-  ],
-  [
-    "backHeader",
-    "menu__backHeader"
-  ],
-  [
-    "levelsViewport",
-    "menu__levelsViewport"
-  ],
-  [
-    "levelsTrack",
-    "menu__levelsTrack"
-  ],
-  [
-    "level",
-    "menu__level"
-  ],
-  [
-    "sizeProbe",
-    "menu__sizeProbe"
-  ],
-  [
-    "noResults",
-    "menu__noResults"
-  ]
-];
-const menuSlotFns = /* @__PURE__ */ menuSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, menuDefaultVariants, getSlotCompoundVariant(menuCompoundVariants, slotName))]);
-const menuFn = memo((props = {}) => {
-  return Object.fromEntries(menuSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
-});
-const menuVariantKeys = [
-  "density",
-  "panel"
-];
-const getVariantProps$9 = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
-const menu = /* @__PURE__ */ Object.assign(menuFn, {
-  __recipe__: false,
-  __name__: "menu",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: menuVariantKeys,
-  variantMap: {
-    "density": [
-      "compact",
-      "comfortable",
-      "spacious"
+    "iconBefore": [
+      "true"
     ],
-    "panel": [
+    "iconAfter": [
       "true"
     ]
   },
   splitVariantProps(props) {
-    return splitProps$1(props, menuVariantKeys);
+    return splitProps$1(props, buttonVariantKeys);
   },
   getVariantProps: getVariantProps$9
 });
-const toggleDefaultVariants = {};
-const toggleCompoundVariants = [];
-const toggleSlotNames = [
+const checkboxDefaultVariants = {};
+const checkboxCompoundVariants = [];
+const checkboxSlotNames = [
   [
     "container",
-    "toggle__container"
+    "checkbox__container"
   ],
   [
     "input",
-    "toggle__input"
+    "checkbox__input"
   ],
   [
     "indicator",
-    "toggle__indicator"
+    "checkbox__indicator"
+  ],
+  [
+    "checkBg",
+    "checkbox__checkBg"
   ]
 ];
-const toggleSlotFns = /* @__PURE__ */ toggleSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toggleDefaultVariants, getSlotCompoundVariant(toggleCompoundVariants, slotName))]);
-const toggleFn = memo((props = {}) => {
-  return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+const checkboxSlotFns = /* @__PURE__ */ checkboxSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, checkboxDefaultVariants, getSlotCompoundVariant(checkboxCompoundVariants, slotName))]);
+const checkboxFn = memo((props = {}) => {
+  return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
-const toggleVariantKeys = [];
-const getVariantProps$8 = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
-const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
+const checkboxVariantKeys = [];
+const getVariantProps$8 = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
-  __name__: "toggle",
+  __name__: "checkbox",
   raw: (props) => props,
   classNameMap: {},
-  variantKeys: toggleVariantKeys,
+  variantKeys: checkboxVariantKeys,
   variantMap: {},
   splitVariantProps(props) {
-    return splitProps$1(props, toggleVariantKeys);
+    return splitProps$1(props, checkboxVariantKeys);
   },
   getVariantProps: getVariantProps$8
 });
@@ -2341,67 +2384,173 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   },
   getVariantProps: getVariantProps$7
 });
-const avatarDefaultVariants = {
-  "size": "md",
-  "shape": "circle"
+const formFieldDefaultVariants = {
+  "layout": "default",
+  "size": "md"
 };
-const avatarCompoundVariants = [];
-const avatarSlotNames = [
+const formFieldCompoundVariants = [];
+const formFieldSlotNames = [
+  [
+    "container",
+    "formField__container"
+  ],
+  [
+    "inputs",
+    "formField__inputs"
+  ],
+  [
+    "labelWrapper",
+    "formField__labelWrapper"
+  ]
+];
+const formFieldSlotFns = /* @__PURE__ */ formFieldSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, formFieldDefaultVariants, getSlotCompoundVariant(formFieldCompoundVariants, slotName))]);
+const formFieldFn = memo((props = {}) => {
+  return Object.fromEntries(formFieldSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const formFieldVariantKeys = [
+  "layout",
+  "size"
+];
+const getVariantProps$6 = (variants) => ({ ...formFieldDefaultVariants, ...compact(variants) });
+const formField = /* @__PURE__ */ Object.assign(formFieldFn, {
+  __recipe__: false,
+  __name__: "formField",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: formFieldVariantKeys,
+  variantMap: {
+    "layout": [
+      "default",
+      "inline"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg",
+      "xl"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, formFieldVariantKeys);
+  },
+  getVariantProps: getVariantProps$6
+});
+const iconButtonDefaultVariants = {
+  "variant": "standard",
+  "size": "md"
+};
+const iconButtonCompoundVariants = [];
+const iconButtonSlotNames = [
+  [
+    "container",
+    "iconButton__container"
+  ],
+  [
+    "icon",
+    "iconButton__icon"
+  ]
+];
+const iconButtonSlotFns = /* @__PURE__ */ iconButtonSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, iconButtonDefaultVariants, getSlotCompoundVariant(iconButtonCompoundVariants, slotName))]);
+const iconButtonFn = memo((props = {}) => {
+  return Object.fromEntries(iconButtonSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const iconButtonVariantKeys = [
+  "variant",
+  "size"
+];
+const getVariantProps$5 = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
+const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
+  __recipe__: false,
+  __name__: "iconButton",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: iconButtonVariantKeys,
+  variantMap: {
+    "variant": [
+      "standard",
+      "primary",
+      "hollow",
+      "ghost",
+      "cta",
+      "danger",
+      "selected",
+      "selectedBold"
+    ],
+    "size": [
+      "md",
+      "xl",
+      "lg",
+      "sm"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, iconButtonVariantKeys);
+  },
+  getVariantProps: getVariantProps$5
+});
+const menuDefaultVariants = {
+  "density": "compact"
+};
+const menuCompoundVariants = [];
+const menuSlotNames = [
+  [
+    "wrapper",
+    "menu__wrapper"
+  ],
+  [
+    "backHeader",
+    "menu__backHeader"
+  ],
   [
-    "root",
-    "avatar__root"
+    "levelsViewport",
+    "menu__levelsViewport"
   ],
   [
-    "image",
-    "avatar__image"
+    "levelsTrack",
+    "menu__levelsTrack"
   ],
   [
-    "fallback",
-    "avatar__fallback"
+    "level",
+    "menu__level"
   ],
   [
-    "presence",
-    "avatar__presence"
+    "sizeProbe",
+    "menu__sizeProbe"
   ],
   [
-    "status",
-    "avatar__status"
+    "noResults",
+    "menu__noResults"
   ]
 ];
-const avatarSlotFns = /* @__PURE__ */ avatarSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarDefaultVariants, getSlotCompoundVariant(avatarCompoundVariants, slotName))]);
-const avatarFn = memo((props = {}) => {
-  return Object.fromEntries(avatarSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+const menuSlotFns = /* @__PURE__ */ menuSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, menuDefaultVariants, getSlotCompoundVariant(menuCompoundVariants, slotName))]);
+const menuFn = memo((props = {}) => {
+  return Object.fromEntries(menuSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
-const avatarVariantKeys = [
-  "size",
-  "shape"
+const menuVariantKeys = [
+  "density",
+  "panel"
 ];
-const getVariantProps$6 = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
-const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
+const getVariantProps$4 = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
+const menu = /* @__PURE__ */ Object.assign(menuFn, {
   __recipe__: false,
-  __name__: "avatar",
+  __name__: "menu",
   raw: (props) => props,
   classNameMap: {},
-  variantKeys: avatarVariantKeys,
+  variantKeys: menuVariantKeys,
   variantMap: {
-    "size": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl",
-      "2xl"
+    "density": [
+      "compact",
+      "comfortable",
+      "spacious"
     ],
-    "shape": [
-      "circle",
-      "square",
-      "hexagon"
+    "panel": [
+      "true"
     ]
   },
   splitVariantProps(props) {
-    return splitProps$1(props, avatarVariantKeys);
+    return splitProps$1(props, menuVariantKeys);
   },
-  getVariantProps: getVariantProps$6
+  getVariantProps: getVariantProps$4
 });
 const modalDefaultVariants = {
   "variant": "default",
@@ -2446,7 +2595,7 @@ const modalVariantKeys = [
   "size",
   "variant"
 ];
-const getVariantProps$5 = (variants) => ({ ...modalDefaultVariants, ...compact(variants) });
+const getVariantProps$3 = (variants) => ({ ...modalDefaultVariants, ...compact(variants) });
 const modal = /* @__PURE__ */ Object.assign(modalFn, {
   __recipe__: false,
   __name__: "modal",
@@ -2470,107 +2619,45 @@ const modal = /* @__PURE__ */ Object.assign(modalFn, {
   splitVariantProps(props) {
     return splitProps$1(props, modalVariantKeys);
   },
-  getVariantProps: getVariantProps$5
+  getVariantProps: getVariantProps$3
 });
-const formFieldDefaultVariants = {
-  "layout": "default",
-  "size": "md"
-};
-const formFieldCompoundVariants = [];
-const formFieldSlotNames = [
+const radioDefaultVariants = {};
+const radioCompoundVariants = [];
+const radioSlotNames = [
   [
     "container",
-    "formField__container"
+    "radio__container"
   ],
   [
-    "inputs",
-    "formField__inputs"
+    "input",
+    "radio__input"
   ],
   [
-    "labelWrapper",
-    "formField__labelWrapper"
-  ]
-];
-const formFieldSlotFns = /* @__PURE__ */ formFieldSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, formFieldDefaultVariants, getSlotCompoundVariant(formFieldCompoundVariants, slotName))]);
-const formFieldFn = memo((props = {}) => {
-  return Object.fromEntries(formFieldSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
-});
-const formFieldVariantKeys = [
-  "layout",
-  "size"
-];
-const getVariantProps$4 = (variants) => ({ ...formFieldDefaultVariants, ...compact(variants) });
-const formField = /* @__PURE__ */ Object.assign(formFieldFn, {
-  __recipe__: false,
-  __name__: "formField",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: formFieldVariantKeys,
-  variantMap: {
-    "layout": [
-      "default",
-      "inline"
-    ],
-    "size": [
-      "sm",
-      "md",
-      "lg",
-      "xl"
-    ]
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, formFieldVariantKeys);
-  },
-  getVariantProps: getVariantProps$4
-});
-const spinnerDefaultVariants = {
-  "size": "md"
-};
-const spinnerCompoundVariants = [];
-const spinnerSlotNames = [
-  [
-    "container",
-    "spinner__container"
+    "indicator",
+    "radio__indicator"
   ],
   [
-    "spinnerDiv",
-    "spinner__spinnerDiv"
+    "radioBg",
+    "radio__radioBg"
   ]
 ];
-const spinnerSlotFns = /* @__PURE__ */ spinnerSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, spinnerDefaultVariants, getSlotCompoundVariant(spinnerCompoundVariants, slotName))]);
-const spinnerFn = memo((props = {}) => {
-  return Object.fromEntries(spinnerSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+const radioSlotFns = /* @__PURE__ */ radioSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, radioDefaultVariants, getSlotCompoundVariant(radioCompoundVariants, slotName))]);
+const radioFn = memo((props = {}) => {
+  return Object.fromEntries(radioSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
-const spinnerVariantKeys = [
-  "size",
-  "inverse",
-  "centered"
-];
-const getVariantProps$3 = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
-const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
+const radioVariantKeys = [];
+const getVariantProps$2 = (variants) => ({ ...radioDefaultVariants, ...compact(variants) });
+const radio = /* @__PURE__ */ Object.assign(radioFn, {
   __recipe__: false,
-  __name__: "spinner",
+  __name__: "radio",
   raw: (props) => props,
   classNameMap: {},
-  variantKeys: spinnerVariantKeys,
-  variantMap: {
-    "size": [
-      "xs",
-      "sm",
-      "md",
-      "lg"
-    ],
-    "inverse": [
-      "true"
-    ],
-    "centered": [
-      "true"
-    ]
-  },
+  variantKeys: radioVariantKeys,
+  variantMap: {},
   splitVariantProps(props) {
-    return splitProps$1(props, spinnerVariantKeys);
+    return splitProps$1(props, radioVariantKeys);
   },
-  getVariantProps: getVariantProps$3
+  getVariantProps: getVariantProps$2
 });
 const textInputDefaultVariants = {
   "size": "md"
@@ -2673,7 +2760,7 @@ const textInputVariantKeys = [
   "iconAfter",
   "autoSize"
 ];
-const getVariantProps$2 = (variants) => ({ ...textInputDefaultVariants, ...compact(variants) });
+const getVariantProps$1 = (variants) => ({ ...textInputDefaultVariants, ...compact(variants) });
 const textInput = /* @__PURE__ */ Object.assign(textInputFn, {
   __recipe__: false,
   __name__: "textInput",
@@ -2700,87 +2787,55 @@ const textInput = /* @__PURE__ */ Object.assign(textInputFn, {
   splitVariantProps(props) {
     return splitProps$1(props, textInputVariantKeys);
   },
-  getVariantProps: getVariantProps$2
-});
-const breadcrumbsDefaultVariants = {};
-const breadcrumbsCompoundVariants = [];
-const breadcrumbsSlotNames = [
-  [
-    "wrapper",
-    "breadcrumbs__wrapper"
-  ],
-  [
-    "slash",
-    "breadcrumbs__slash"
-  ],
-  [
-    "linkSegment",
-    "breadcrumbs__linkSegment"
-  ],
-  [
-    "currentSegment",
-    "breadcrumbs__currentSegment"
-  ]
-];
-const breadcrumbsSlotFns = /* @__PURE__ */ breadcrumbsSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, breadcrumbsDefaultVariants, getSlotCompoundVariant(breadcrumbsCompoundVariants, slotName))]);
-const breadcrumbsFn = memo((props = {}) => {
-  return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
-});
-const breadcrumbsVariantKeys = [];
-const getVariantProps$1 = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
-const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
-  __recipe__: false,
-  __name__: "breadcrumbs",
-  raw: (props) => props,
-  classNameMap: {},
-  variantKeys: breadcrumbsVariantKeys,
-  variantMap: {},
-  splitVariantProps(props) {
-    return splitProps$1(props, breadcrumbsVariantKeys);
-  },
   getVariantProps: getVariantProps$1
 });
-const listItemGroupDefaultVariants = {
-  "density": "compact"
+const tooltipDefaultVariants = {
+  "size": "md",
+  "hasTitle": false
 };
-const listItemGroupCompoundVariants = [];
-const listItemGroupSlotNames = [
+const tooltipCompoundVariants = [];
+const tooltipSlotNames = [
   [
-    "wrapper",
-    "listItemGroup__wrapper"
+    "tooltipContent",
+    "tooltip__tooltipContent"
   ],
   [
-    "groupLabel",
-    "listItemGroup__groupLabel"
+    "title",
+    "tooltip__title"
   ],
   [
-    "divider",
-    "listItemGroup__divider"
+    "text",
+    "tooltip__text"
   ]
 ];
-const listItemGroupSlotFns = /* @__PURE__ */ listItemGroupSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, listItemGroupDefaultVariants, getSlotCompoundVariant(listItemGroupCompoundVariants, slotName))]);
-const listItemGroupFn = memo((props = {}) => {
-  return Object.fromEntries(listItemGroupSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+const tooltipSlotFns = /* @__PURE__ */ tooltipSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tooltipDefaultVariants, getSlotCompoundVariant(tooltipCompoundVariants, slotName))]);
+const tooltipFn = memo((props = {}) => {
+  return Object.fromEntries(tooltipSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
-const listItemGroupVariantKeys = [
-  "density"
+const tooltipVariantKeys = [
+  "size",
+  "hasTitle"
 ];
-const getVariantProps = (variants) => ({ ...listItemGroupDefaultVariants, ...compact(variants) });
-const listItemGroup = /* @__PURE__ */ Object.assign(listItemGroupFn, {
+const getVariantProps = (variants) => ({ ...tooltipDefaultVariants, ...compact(variants) });
+const tooltip = /* @__PURE__ */ Object.assign(tooltipFn, {
   __recipe__: false,
-  __name__: "listItemGroup",
+  __name__: "tooltip",
   raw: (props) => props,
   classNameMap: {},
-  variantKeys: listItemGroupVariantKeys,
+  variantKeys: tooltipVariantKeys,
   variantMap: {
-    "density": [
-      "compact",
-      "comfortable",
-      "spacious"
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "hasTitle": [
+      "true",
+      "false"
     ]
   },
   splitVariantProps(props) {
-    return splitProps$1(props, listItemGroupVariantKeys);
+    return splitProps$1(props, tooltipVariantKeys);
   },
   getVariantProps
 });
@@ -3036,9 +3091,8 @@ const Icon = (props) => {
       name,
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
-      ...size2 && { width: size2 },
       fill,
-      className: cx(icon(), className),
+      className: cx(icon({ size: size2 }), className),
       ...otherProps,
       children: /* @__PURE__ */ jsx("use", { xlinkHref: spriteHref })
     }
@@ -14511,6 +14565,8 @@ const TextInput = (props) => {
     iconAfter,
     error: error2,
     disabled,
+    valid,
+    invalid,
     type = "text",
     size: size2,
     autoSize = false,
@@ -14531,6 +14587,8 @@ const TextInput = (props) => {
       "aria-disabled": disabled,
       "data-disabled": disabled || void 0,
       "data-error": error2,
+      "data-valid": valid,
+      "data-invalid": invalid,
       children: [
         iconBefore && /* @__PURE__ */ jsx(Icon, { name: iconBefore, className: classes.icon }),
         /* @__PURE__ */ jsx(
@@ -14542,6 +14600,8 @@ const TextInput = (props) => {
             type,
             disabled,
             "data-error": error2,
+            "data-valid": valid,
+            "data-invalid": invalid,
             className: cx(classes.input, className),
             autoComplete,
             ...otherProps
@@ -15207,8 +15267,10 @@ const Menu = (props) => {
   const isOpen = isControlled ? open : uncontrolledOpen;
   const isMenuVisible = hasReference ? isOpen : true;
   const setOpenState = (nextOpen, _event, reason) => {
-    if (triggerInteraction === "hover" && !nextOpen && (reason === "hover" || reason === "safe-polygon")) {
-      return;
+    if (!nextOpen && (reason === "hover" || reason === "safe-polygon")) {
+      if (triggerInteraction === "hover" || triggerInteraction === "click-and-hover") {
+        return;
+      }
     }
     if (!isControlled) {
       setUncontrolledOpen(nextOpen);
@@ -15240,7 +15302,7 @@ const Menu = (props) => {
   const labelsRef = useRef([]);
   const [activeIndex, setActiveIndex] = useState(null);
   const hover = useHover(floating.context, {
-    enabled: hasReference && triggerInteraction === "hover",
+    enabled: hasReference && (triggerInteraction === "hover" || triggerInteraction === "click-and-hover"),
     delay: {
       open: triggerOpenDelay,
       close: triggerCloseDelay
@@ -15250,7 +15312,7 @@ const Menu = (props) => {
     })
   });
   const click = useClick(floating.context, {
-    enabled: hasReference && triggerInteraction === "click"
+    enabled: hasReference && (triggerInteraction === "click" || triggerInteraction === "click-and-hover")
   });
   const dismiss = useDismiss(floating.context, { enabled: hasReference });
   const role = useRole(floating.context, { role: "menu" });