@axzydev/axzy_ui_system 1.7.3 → 1.8.0

package/dist/index.cjs

@@ -59,7 +59,7 @@ __export(index_exports, {
   ITDropfile: () => dropfile_default,
   ITEmptyState: () => ITEmptyState,
   ITField: () => ITField,
-  ITFlex: () => ITFlex,
+  ITFlex: () => flex_default,
   ITFormBuilder: () => ITFormBuilder,
   ITFormHeader: () => ITFormHeader,
   ITGrid: () => ITGrid,
@@ -96,7 +96,7 @@ __export(index_exports, {
   ITTable: () => ITTable,
   ITTabs: () => tabs_default,
   ITText: () => ITText,
-  ITTextarea: () => ITTextarea,
+  ITTextarea: () => textarea_default,
   ITThemeProvider: () => ITThemeProvider,
   ITTimePicker: () => ITTimePicker,
   ITToast: () => ITToast,
@@ -108,13 +108,16 @@ __export(index_exports, {
   auditTree: () => auditTree,
   axzyCatalog: () => axzyCatalog,
   axzyCatalogTypes: () => axzyCatalogTypes,
+  buildNavigationTree: () => buildNavigationTree,
   buildVocabularyContract: () => buildVocabularyContract,
   countPendingNodes: () => countPendingNodes,
+  createBindingResolver: () => createBindingResolver,
   createCatalog: () => createCatalog,
   createLimitTracker: () => createLimitTracker,
   createValidationSchema: () => createValidationSchema,
   enMessages: () => en_default,
   esMessages: () => es_default,
+  flattenRoutes: () => flattenRoutes,
   formatPath: () => formatPath,
   formatVocabularyForPrompt: () => formatVocabularyForPrompt,
   getCatalogEntry: () => getCatalogEntry,
@@ -125,7 +128,10 @@ __export(index_exports, {
   isLightColor: () => isLightColor,
   isNodePending: () => isNodePending,
   issue: () => issue,
+  joinRoutePath: () => joinRoutePath,
+  matchRoute: () => matchRoute,
   migrateSchema: () => migrateSchema,
+  navContainsRoute: () => navContainsRoute,
   parsePartialSchema: () => parsePartialSchema,
   parsePath: () => parsePath,
   propPath: () => propPath,
@@ -135,16 +141,20 @@ __export(index_exports, {
   resolveCssColor: () => resolveCssColor,
   resolveLimits: () => resolveLimits,
   resolveNode: () => resolveNode,
+  routeHref: () => routeHref,
   useClickOutside: () => useClickOutside_default,
   useDebouncedSearch: () => useDebouncedSearch,
   useEditableRow: () => useEditableRow,
   useFloatingPanel: () => useFloatingPanel,
+  useITAppearance: () => useITAppearance,
   useITFlatAppearance: () => useITFlatAppearance,
   useITTheme: () => useITTheme,
   useITThemeSafe: () => useITThemeSafe,
   useITTranslation: () => useITTranslation,
   useJsonRender: () => useJsonRender_default,
+  useSchemaStream: () => useSchemaStream,
   useTableState: () => useTableState,
+  validateRoutes: () => validateRoutes,
   validateSchema: () => validateSchema
 });
 module.exports = __toCommonJS(index_exports);
@@ -476,10 +486,10 @@ function useTableState({
 }
 
 // src/hooks/useJsonRender.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/molecules/json-renderer/json-renderer.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/types/button.types.ts
 var buttonVariants = {
@@ -511,7 +521,7 @@ var buttonIconPadding = {
 
 // src/components/atoms/button/button.tsx
 var import_clsx = __toESM(require("clsx"), 1);
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/theme/theme.ts
 var inputSizeTokens = {
@@ -850,7 +860,7 @@ var components = {
   input: {
     backgroundColor: "var(--it-input-bg, #ffffff)",
     borderColor: `var(--it-input-border, ${semanticColors.gray[300]})`,
-    borderRadius: "var(--radius-md)",
+    borderRadius: "var(--it-input-radius, var(--radius-md))",
     focus: {
       borderColor: `var(--it-input-focus-border, ${semanticColors.primary[500]})`,
       ring: `var(--it-input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`
@@ -1019,6 +1029,26 @@ function ITText({
   );
 }
 
+// src/theme/theme-context.ts
+var import_react6 = require("react");
+var ITThemeContext = (0, import_react6.createContext)(void 0);
+var useITTheme = () => {
+  const context = (0, import_react6.useContext)(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var useITThemeSafe = () => {
+  return (0, import_react6.useContext)(ITThemeContext);
+};
+var useITAppearance = () => {
+  return (0, import_react6.useContext)(ITThemeContext)?.appearance ?? "soft";
+};
+var useITFlatAppearance = () => {
+  return useITAppearance() === "flat";
+};
+
 // src/components/atoms/button/button.tsx
 var import_jsx_runtime2 = (
   // Icono solo: sin wrapper con `gap` ni `ITText` vacío, que lo desplazaban a la izquierda.
@@ -1038,8 +1068,9 @@ function ITButton({
   ariaLabel,
   title
 }) {
-  const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const bento = useITAppearance() === "bento";
   const isIconOnly = variant === "icon-only";
   const isIconOnlyContent = isIconOnly && Boolean(icon) && !children;
   const themeBtn = theme.button;
@@ -1059,6 +1090,9 @@ function ITButton({
       // Default from theme
       transition: themeConfig.transition || "all 0.2s"
     };
+    if (bento) {
+      style.borderRadius = `var(--it-bento-pill-radius, ${themeConfig.borderRadius})`;
+    }
     if (variant === "rounded") {
       style.borderRadius = "9999px";
     }
@@ -1124,23 +1158,6 @@ function ITButton({
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_react11 = require("react");
 
-// src/theme/theme-context.ts
-var import_react7 = require("react");
-var ITThemeContext = (0, import_react7.createContext)(void 0);
-var useITTheme = () => {
-  const context = (0, import_react7.useContext)(ITThemeContext);
-  if (!context) {
-    throw new Error("useITTheme must be used within an ITThemeProvider");
-  }
-  return context;
-};
-var useITThemeSafe = () => {
-  return (0, import_react7.useContext)(ITThemeContext);
-};
-var useITFlatAppearance = () => {
-  return (0, import_react7.useContext)(ITThemeContext)?.appearance === "flat";
-};
-
 // src/i18n/provider.tsx
 var import_react9 = require("react");
 
@@ -1352,7 +1369,13 @@ var es = {
   "jsonEditor.kindString": "texto",
   "jsonEditor.kindNumber": "n\xFAmero",
   "jsonEditor.kindBoolean": "booleano",
-  "jsonEditor.kindNull": "nulo"
+  "jsonEditor.kindNull": "nulo",
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Campo obligatorio.",
+  "jsonRenderer.form.email": "Escribe un correo v\xE1lido.",
+  "jsonRenderer.form.minLength": "Escribe al menos {min} caracteres.",
+  "jsonRenderer.form.maxLength": "Escribe como m\xE1ximo {max} caracteres.",
+  "jsonRenderer.form.submit": "Enviar"
 };
 var es_default = es;
 
@@ -1558,7 +1581,13 @@ var en = {
   "jsonEditor.kindString": "string",
   "jsonEditor.kindNumber": "number",
   "jsonEditor.kindBoolean": "boolean",
-  "jsonEditor.kindNull": "null"
+  "jsonEditor.kindNull": "null",
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Required field.",
+  "jsonRenderer.form.email": "Enter a valid email address.",
+  "jsonRenderer.form.minLength": "Enter at least {min} characters.",
+  "jsonRenderer.form.maxLength": "Enter at most {max} characters.",
+  "jsonRenderer.form.submit": "Submit"
 };
 var en_default = en;
 
@@ -1635,6 +1664,8 @@ function useITTranslation() {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ITCard({
   title,
+  tone,
+  headerActions,
   image,
   alt,
   children,
@@ -1648,26 +1679,35 @@ function ITCard({
 }) {
   const { t } = useITTranslation();
   const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   const resolvedAlt = alt ?? t("card.imageAlt");
   const containerStyle = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
-    borderColor: flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
-    borderWidth: "1px",
+    borderColor: bento ? "transparent" : flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
+    borderWidth: bento ? "0px" : "1px",
     borderStyle: "solid",
-    borderRadius: flat ? "var(--it-card-radius, var(--radius-lg))" : "var(--it-card-radius, var(--radius-2xl))",
+    borderRadius: bento ? "var(--it-card-radius, var(--it-bento-card-radius, var(--radius-2xl)))" : flat ? "var(--it-card-radius, var(--radius-lg))" : "var(--it-card-radius, var(--radius-2xl))",
     // Soft depth: every card floats a little at rest; interactive cards
     // gain visual weight on hover instead of appearing flat until clicked.
     // Flat appearance: the hairline border carries the surface, so a card
     // only gets a shadow as hover feedback when it is clickable.
-    boxShadow: flat ? onClick && isHovered ? "var(--shadow-sm)" : "none" : onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
+    // Bento: borderless, a diffuse shadow at rest and a stronger one on hover.
+    boxShadow: bento ? onClick && isHovered ? "var(--it-bento-card-shadow-hover, var(--shadow-lg))" : "var(--it-bento-card-shadow, var(--shadow-sm))" : flat ? onClick && isHovered ? "var(--shadow-sm)" : "none" : onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
     transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
-    transform: onClick && isHovered && !flat ? "translateY(-2px)" : "translateY(0)",
+    transform: onClick && isHovered && !flat && !bento ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default"
   };
+  if (tone) {
+    const soft = `var(--color-${tone}-soft)`;
+    containerStyle.backgroundImage = `linear-gradient(${soft}, ${soft})`;
+    if (!bento) containerStyle.borderColor = `var(--color-${tone}-soft-border)`;
+  }
   const bodyStyle = {
-    padding: "1.25rem"
+    padding: bento ? "var(--it-bento-card-padding, 1.5rem)" : "1.25rem"
   };
+  const titleTypography = bento ? "text-lg font-bold" : flat ? "text-base font-semibold" : "text-xl font-semibold";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -1694,14 +1734,24 @@ function ITCard({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx2.default)(contentClassName), style: bodyStyle, children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          headerActions ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              ITText,
+              {
+                as: "h3",
+                className: (0, import_clsx2.default)(titleTypography, titleClassName),
+                children: title
+              }
+            ),
+            headerActions
+          ] }) : title ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             ITText,
             {
               as: "h3",
-              className: (0, import_clsx2.default)(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName),
+              className: (0, import_clsx2.default)(titleTypography, flat ? "mb-3" : bento ? "mb-4" : "mb-2", titleClassName),
               children: title
             }
-          ),
+          ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ITText, { as: "div", className: "text-secondary-600", children })
         ] }),
         actions && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1721,6 +1771,7 @@ function ITCard({
 
 // src/components/atoms/flex/flex.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
+var import_react12 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var directionMap = {
   row: "flex-row",
@@ -1748,7 +1799,7 @@ var wrapMap = {
   wrap: "flex-wrap",
   "wrap-reverse": "flex-wrap-reverse"
 };
-function ITFlex({
+var ITFlex = (0, import_react12.forwardRef)(function ITFlex2({
   children,
   direction = "row",
   align,
@@ -1761,8 +1812,9 @@ function ITFlex({
   className,
   style,
   as: Component = "div",
-  onClick
-}) {
+  onClick,
+  onScroll
+}, ref) {
   const resolvedStyle = {
     gap: gap > 0 ? `${gap * 0.25}rem` : void 0,
     flexGrow: typeof grow === "boolean" ? grow ? 1 : 0 : grow,
@@ -1773,6 +1825,7 @@ function ITFlex({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Component,
     {
+      ref,
       className: (0, import_clsx3.default)(
         "flex",
         directionMap[direction],
@@ -1783,14 +1836,17 @@ function ITFlex({
       ),
       style: resolvedStyle,
       onClick,
+      onScroll,
       children
     }
   );
-}
+});
+ITFlex.displayName = "ITFlex";
+var flex_default = ITFlex;
 
 // src/components/atoms/stack/stack.tsx
 var import_clsx4 = __toESM(require("clsx"), 1);
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var directionMap2 = {
   row: "flex-row",
@@ -1831,7 +1887,7 @@ function ITStack({
   as: Component = "div"
 }) {
   const hasDivider = divider !== void 0;
-  const items = import_react12.Children.toArray(children);
+  const items = import_react13.Children.toArray(children);
   const resolvedStyle = {
     gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
     ...style
@@ -1848,9 +1904,9 @@ function ITStack({
         className
       ),
       style: resolvedStyle,
-      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react12.Fragment, { children: [
+      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react13.Fragment, { children: [
         child,
-        index < items.length - 1 && (0, import_react12.isValidElement)(divider) ? (0, import_react12.cloneElement)(divider, { key: `divider-${index}` }) : null
+        index < items.length - 1 && (0, import_react13.isValidElement)(divider) ? (0, import_react13.cloneElement)(divider, { key: `divider-${index}` }) : null
       ] }, index)) : children
     }
   );
@@ -1985,11 +2041,11 @@ function ITJsonRenderer({
     if (typeof node === "string" || typeof node === "number") {
       return node;
     }
-    if (import_react13.default.isValidElement(node)) {
+    if (import_react14.default.isValidElement(node)) {
       return node;
     }
     if (Array.isArray(node)) {
-      return node.map((child, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react13.default.Fragment, { children: renderNode2(child) }, idx));
+      return node.map((child, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.default.Fragment, { children: renderNode2(child) }, idx));
     }
     const { type, props = {}, children, text } = node;
     const childContent = children !== void 0 ? renderNode2(children) : text;
@@ -2001,7 +2057,7 @@ function ITJsonRenderer({
       case "card":
         return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ITCard, { ...props, children: childContent });
       case "flex":
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ITFlex, { ...props, children: childContent });
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(flex_default, { ...props, children: childContent });
       case "stack":
         return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ITStack, { ...props, children: childContent });
       case "grid":
@@ -2014,7 +2070,7 @@ function ITJsonRenderer({
     }
   };
   if (Array.isArray(json)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx7.default)(className), children: json.map((n, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react13.default.Fragment, { children: renderNode2(n) }, idx)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx7.default)(className), children: json.map((n, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.default.Fragment, { children: renderNode2(n) }, idx)) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx7.default)(className), children: renderNode2(json) });
 }
@@ -2022,13 +2078,13 @@ function ITJsonRenderer({
 // src/hooks/useJsonRender.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function useJsonRender(json) {
-  return (0, import_react14.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ITJsonRenderer, { json }), [json]);
+  return (0, import_react15.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ITJsonRenderer, { json }), [json]);
 }
 var useJsonRender_default = useJsonRender;
 
 // src/components/molecules/accordion/accordion.tsx
 var import_clsx8 = __toESM(require("clsx"), 1);
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_fa2 = require("react-icons/fa");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ITAccordion({
@@ -2041,7 +2097,7 @@ function ITAccordion({
   className,
   itemClassName
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react15.useState)(defaultOpenIds);
+  const [internalOpen, setInternalOpen] = (0, import_react16.useState)(defaultOpenIds);
   const isControlled = openIds !== void 0;
   const currentOpen = isControlled ? openIds : internalOpen;
   const toggle = (id) => {
@@ -2264,7 +2320,7 @@ function ITBreadcrumbs({
 }
 
 // src/components/molecules/calendar/calendar.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var import_date_fns = require("date-fns");
 var import_clsx12 = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -2296,8 +2352,8 @@ var ITCalendar = ({
 }) => {
   const { t, dateLocale } = useITTranslation();
   const mode = modeProp || (onChange ? "month" : "week");
-  const [currentDate, setCurrentDate] = (0, import_react16.useState)(value || /* @__PURE__ */ new Date());
-  const [view, setView] = (0, import_react16.useState)("calendar");
+  const [currentDate, setCurrentDate] = (0, import_react17.useState)(value || /* @__PURE__ */ new Date());
+  const [view, setView] = (0, import_react17.useState)("calendar");
   const getVariantStyles = () => {
     const v = variant || "primary";
     return {
@@ -2307,7 +2363,7 @@ var ITCalendar = ({
       "--calendar-today-text": `var(--color-${v})`
     };
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (value) setCurrentDate(value);
   }, [value]);
   const shiftYear = (yearDelta) => {
@@ -2363,7 +2419,7 @@ var ITCalendar = ({
     setCurrentDate(/* @__PURE__ */ new Date());
     setView("calendar");
   };
-  const viewDays = (0, import_react16.useMemo)(() => {
+  const viewDays = (0, import_react17.useMemo)(() => {
     if (mode === "day") {
       return [currentDate];
     }
@@ -2382,13 +2438,13 @@ var ITCalendar = ({
       height: `${duration / 60 * 80}px`
     };
   };
-  const weekEvents = (0, import_react16.useMemo)(() => {
+  const weekEvents = (0, import_react17.useMemo)(() => {
     return events.filter((event) => {
       const eventStart = typeof event.start === "string" ? (0, import_date_fns.parseISO)(event.start) : event.start;
       return viewDays.some((day) => (0, import_date_fns.isSameDay)(day, eventStart));
     });
   }, [events, viewDays]);
-  const monthDays = (0, import_react16.useMemo)(() => {
+  const monthDays = (0, import_react17.useMemo)(() => {
     const start = (0, import_date_fns.startOfWeek)((0, import_date_fns.startOfMonth)(currentDate), { weekStartsOn: 1 });
     const end = (0, import_date_fns.endOfWeek)((0, import_date_fns.endOfMonth)(currentDate), { weekStartsOn: 1 });
     return (0, import_date_fns.eachDayOfInterval)({ start, end });
@@ -2398,9 +2454,9 @@ var ITCalendar = ({
     if (maxDate && (0, import_date_fns.isAfter)(date, (0, import_date_fns.startOfDay)(maxDate))) return true;
     return false;
   };
-  const [dragStart, setDragStart] = (0, import_react16.useState)(null);
-  const [dragCurrent, setDragCurrent] = (0, import_react16.useState)(null);
-  const isDraggingRef = import_react16.default.useRef(false);
+  const [dragStart, setDragStart] = (0, import_react17.useState)(null);
+  const [dragCurrent, setDragCurrent] = (0, import_react17.useState)(null);
+  const isDraggingRef = import_react17.default.useRef(false);
   const handleMouseDown = (date, e) => {
     if (!onSelectRange) return;
     e.stopPropagation();
@@ -2984,7 +3040,7 @@ function ITChip({
 
 // src/components/molecules/chip-input/chip-input.tsx
 var import_clsx16 = __toESM(require("clsx"), 1);
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/utils/styles.ts
 var import_clsx15 = __toESM(require("clsx"), 1);
@@ -3117,11 +3173,11 @@ function ITChipInput({
   className
 }) {
   const { t } = useITTranslation();
-  const [inputValue, setInputValue] = (0, import_react17.useState)("");
-  const [localTouched, setLocalTouched] = (0, import_react17.useState)(false);
-  const [localError, setLocalError] = (0, import_react17.useState)(void 0);
-  const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
-  const inputRef = (0, import_react17.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react18.useState)("");
+  const [localTouched, setLocalTouched] = (0, import_react18.useState)(false);
+  const [localError, setLocalError] = (0, import_react18.useState)(void 0);
+  const [isFocused, setIsFocused] = (0, import_react18.useState)(false);
+  const inputRef = (0, import_react18.useRef)(null);
   const inputTheme = theme.input || {};
   const isTouched = touched !== void 0 ? touched : localTouched;
   const externalError = error !== void 0 && error !== false ? error === true ? t("field.required") : error : required && value.length === 0 ? t("field.required") : void 0;
@@ -3134,6 +3190,7 @@ function ITChipInput({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -3262,7 +3319,7 @@ function ITChipInput({
 
 // src/components/molecules/dropdown-menu/dropdown-menu.tsx
 var import_clsx17 = __toESM(require("clsx"), 1);
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 var import_fa6 = require("react-icons/fa");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -3278,20 +3335,20 @@ function ITDropdownMenu({
 }) {
   const { t } = useITTranslation();
   const resolvedTriggerLabel = triggerLabel ?? t("dropdownMenu.open");
-  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react18.useState)(-1);
-  const triggerRef = (0, import_react18.useRef)(null);
-  const itemRefs = (0, import_react18.useRef)([]);
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react19.useState)(-1);
+  const triggerRef = (0, import_react19.useRef)(null);
+  const itemRefs = (0, import_react19.useRef)([]);
   const { panelRef, style: panelStyle } = useFloatingPanel(triggerRef, isOpen, {
     estimatedHeight: Math.max(items.length * 40, 120),
     matchWidth: false,
     align: placement.endsWith("end") ? "end" : "start"
   });
-  const enabledIndexes = (0, import_react18.useMemo)(
+  const enabledIndexes = (0, import_react19.useMemo)(
     () => items.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0),
     [items]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isOpen) return;
     function handleClickOutside(event) {
       const target = event.target;
@@ -3302,7 +3359,7 @@ function ITDropdownMenu({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, panelRef]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isOpen) {
       setActiveIndex(enabledIndexes[0] ?? -1);
       requestAnimationFrame(() => {
@@ -3475,12 +3532,12 @@ function ITField({
 }
 
 // src/components/molecules/masked-input/masked-input.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_clsx20 = __toESM(require("clsx"), 1);
 
 // src/components/atoms/input/input.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function ITInput({
   name,
@@ -3521,15 +3578,18 @@ function ITInput({
   const isNumberType = type === "number";
   const isTextArea = type === "textarea";
   const decimalPlaces = decimals ?? (currencyFormat ? 2 : 0);
-  const [displayValue, setDisplayValue] = (0, import_react19.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
-  const [hasSelectedAll, setHasSelectedAll] = (0, import_react19.useState)(false);
-  const [showPassword, setShowPassword] = (0, import_react19.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react19.useState)(false);
-  const inputRef = (0, import_react19.useRef)(null);
+  const [displayValue, setDisplayValue] = (0, import_react20.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react20.useState)(false);
+  const [hasSelectedAll, setHasSelectedAll] = (0, import_react20.useState)(false);
+  const [showPassword, setShowPassword] = (0, import_react20.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react20.useState)(false);
+  const inputRef = (0, import_react20.useRef)(null);
   const inputTheme = theme.input || {};
   const getStyle = () => {
     const style = inputFieldStyle(inputTheme, size);
+    if (isTextArea) {
+      style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
+    }
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -3565,7 +3625,7 @@ function ITInput({
       setHasSelectedAll(true);
     }
   };
-  const formatValue = (0, import_react19.useCallback)(
+  const formatValue = (0, import_react20.useCallback)(
     (val) => {
       const num = typeof val === "string" ? parseFloat(val.replace(/,/g, "")) : val;
       if (num == null || isNaN(num)) {
@@ -3584,14 +3644,14 @@ function ITInput({
     },
     [currencyFormat, decimalPlaces, formatNumberLocale]
   );
-  const unformatValue = (0, import_react19.useCallback)(
+  const unformatValue = (0, import_react20.useCallback)(
     (val) => {
       if (val == null) return "";
       return String(val).replace(/,/g, "");
     },
     []
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isFocused) {
       if (isNumberType) {
         if (formatNumber) {
@@ -4061,15 +4121,15 @@ function ITMaskedInput({
   autoFocus = false
 }) {
   const { t } = useITTranslation();
-  const containerRef = (0, import_react20.useRef)(null);
-  const rawRef = (0, import_react20.useRef)(value ?? "");
+  const containerRef = (0, import_react21.useRef)(null);
+  const rawRef = (0, import_react21.useRef)(value ?? "");
   const isControlled = value !== void 0;
-  const [internalRaw, setInternalRaw] = (0, import_react20.useState)(value ?? "");
-  const [invalidPattern, setInvalidPattern] = (0, import_react20.useState)(false);
-  const rules = (0, import_react20.useMemo)(() => parseMask(mask), [mask]);
-  const tokenCount = (0, import_react20.useMemo)(() => rules.filter((r) => r.type === "token").length, [rules]);
+  const [internalRaw, setInternalRaw] = (0, import_react21.useState)(value ?? "");
+  const [invalidPattern, setInvalidPattern] = (0, import_react21.useState)(false);
+  const rules = (0, import_react21.useMemo)(() => parseMask(mask), [mask]);
+  const tokenCount = (0, import_react21.useMemo)(() => rules.filter((r) => r.type === "token").length, [rules]);
   const raw = isControlled ? value ?? "" : internalRaw;
-  const display = (0, import_react20.useMemo)(() => format2(raw, rules, placeholderChar), [raw, rules, placeholderChar]);
+  const display = (0, import_react21.useMemo)(() => format2(raw, rules, placeholderChar), [raw, rules, placeholderChar]);
   const scheduleCaret = (caret) => {
     const inputEl = containerRef.current?.querySelector("input");
     if (!inputEl) return;
@@ -4133,7 +4193,7 @@ function ITMaskedInput({
 
 // src/components/molecules/multi-select/multi-select.tsx
 var import_clsx21 = __toESM(require("clsx"), 1);
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_fa7 = require("react-icons/fa");
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -4163,32 +4223,32 @@ function ITMultiSelect({
   className
 }) {
   const { t } = useITTranslation();
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react21.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react21.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react21.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react21.useState)(-1);
-  const containerRef = (0, import_react21.useRef)(null);
-  const controlRef = (0, import_react21.useRef)(null);
-  const inputRef = (0, import_react21.useRef)(null);
-  const optionRefs = (0, import_react21.useRef)([]);
-  const timeoutRef = (0, import_react21.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react22.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react22.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react22.useState)(-1);
+  const containerRef = (0, import_react22.useRef)(null);
+  const controlRef = (0, import_react22.useRef)(null);
+  const inputRef = (0, import_react22.useRef)(null);
+  const optionRefs = (0, import_react22.useRef)([]);
+  const timeoutRef = (0, import_react22.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(controlRef, isOpen, {
     estimatedHeight: 260,
     matchWidth: true
   });
-  const selectedOptions = (0, import_react21.useMemo)(
+  const selectedOptions = (0, import_react22.useMemo)(
     () => options.filter((opt) => value.includes(opt[valueField])),
     [options, value, valueField]
   );
-  const filteredOptions = (0, import_react21.useMemo)(() => {
+  const filteredOptions = (0, import_react22.useMemo)(() => {
     if (onSearch) return options;
     if (!searchTerm) return options;
     return options.filter(
       (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [options, searchTerm, onSearch, labelField]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     function handleClickOutside(event) {
       const target = event.target;
       if (!containerRef.current?.contains(target) && !panelRef.current?.contains(target)) {
@@ -4212,6 +4272,7 @@ function ITMultiSelect({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -4492,11 +4553,11 @@ function ITConfirmDialog({
 }
 
 // src/hooks/useElementSize.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 function useElementSize() {
-  const ref = (0, import_react22.useRef)(null);
-  const [size, setSize] = (0, import_react22.useState)({ width: 0, height: 0 });
-  (0, import_react22.useLayoutEffect)(() => {
+  const ref = (0, import_react23.useRef)(null);
+  const [size, setSize] = (0, import_react23.useState)({ width: 0, height: 0 });
+  (0, import_react23.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element) return;
     const update = () => {
@@ -4512,7 +4573,7 @@ function useElementSize() {
 }
 
 // src/hooks/useVirtualRows.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function useVirtualRows({
   count,
   rowHeight,
@@ -4520,15 +4581,15 @@ function useVirtualRows({
   enabled = true,
   resetKey
 }) {
-  const scrollRef = (0, import_react23.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react23.useState)(0);
-  const [viewportHeight, setViewportHeight] = (0, import_react23.useState)(0);
-  const scrollToTop = (0, import_react23.useCallback)(() => {
+  const scrollRef = (0, import_react24.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react24.useState)(0);
+  const [viewportHeight, setViewportHeight] = (0, import_react24.useState)(0);
+  const scrollToTop = (0, import_react24.useCallback)(() => {
     setScrollTop(0);
     const element = scrollRef.current;
     if (element) element.scrollTop = 0;
   }, []);
-  (0, import_react23.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (!enabled) return;
     const element = scrollRef.current;
     if (!element) return;
@@ -4544,7 +4605,7 @@ function useVirtualRows({
       observer.disconnect();
     };
   }, [enabled]);
-  (0, import_react23.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (!enabled) return;
     const element = scrollRef.current;
     if (element) element.scrollTop = 0;
@@ -4572,18 +4633,18 @@ function useVirtualRows({
 
 // src/components/organisms/data-table/dataTable.tsx
 var import_clsx27 = __toESM(require("clsx"), 1);
-var import_react28 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var import_fa13 = require("react-icons/fa");
 var import_md = require("react-icons/md");
 
 // src/components/molecules/pagination/pagination.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 var import_clsx24 = __toESM(require("clsx"), 1);
 var import_fa10 = require("react-icons/fa");
 
 // src/components/molecules/select/select.tsx
 var import_clsx23 = __toESM(require("clsx"), 1);
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_fa9 = require("react-icons/fa");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function ITSelect({
@@ -4605,8 +4666,8 @@ function ITSelect({
   size = "md"
 }) {
   const { t } = useITTranslation();
-  const [isFocused, setIsFocused] = (0, import_react24.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react24.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react25.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react25.useState)(false);
   const inputTheme = theme.input || {};
   const isTouched = touched !== void 0 ? touched : localTouched;
   const isEmpty = value === void 0 || value === null || String(value).trim() === "";
@@ -4700,7 +4761,7 @@ var usePagination = ({
   currentPage,
   siblingCount = 1
 }) => {
-  return import_react25.default.useMemo(() => {
+  return import_react26.default.useMemo(() => {
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPages) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -4877,7 +4938,7 @@ function ITPagination({
 }
 
 // src/components/molecules/search-select/search-select.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_clsx25 = __toESM(require("clsx"), 1);
 var import_fa11 = require("react-icons/fa");
@@ -4907,26 +4968,26 @@ function ITSearchSelect({
   onClear
 }) {
   const { t } = useITTranslation();
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react26.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react26.useState)(false);
-  const [localTouched, setLocalTouched] = (0, import_react26.useState)(false);
-  const containerRef = (0, import_react26.useRef)(null);
-  const inputWrapperRef = (0, import_react26.useRef)(null);
-  const timeoutRef = (0, import_react26.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react27.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react27.useState)(false);
+  const [localTouched, setLocalTouched] = (0, import_react27.useState)(false);
+  const containerRef = (0, import_react27.useRef)(null);
+  const inputWrapperRef = (0, import_react27.useRef)(null);
+  const timeoutRef = (0, import_react27.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(inputWrapperRef, isOpen, {
     estimatedHeight: 260,
     matchWidth: true
   });
-  const selectedOption = (0, import_react26.useMemo)(() => {
+  const selectedOption = (0, import_react27.useMemo)(() => {
     return options.find((opt) => opt[valueField] === value);
   }, [options, value, valueField]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!isFocused) {
       setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
     }
   }, [selectedOption, isFocused, labelField]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     function handleClickOutside(event) {
       const target = event.target;
       const inContainer = containerRef.current?.contains(target);
@@ -4939,7 +5000,7 @@ function ITSearchSelect({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const selectedLabel = selectedOption ? String(selectedOption[labelField]) : "";
-  const filteredOptions = (0, import_react26.useMemo)(() => {
+  const filteredOptions = (0, import_react27.useMemo)(() => {
     if (onSearch) return options;
     if (!searchTerm || !isFocused || searchTerm === selectedLabel) return options;
     return options.filter(
@@ -5110,7 +5171,7 @@ function ITSearchSelect({
 
 // src/components/molecules/date-picker/datePicker.tsx
 var import_clsx26 = __toESM(require("clsx"), 1);
-var import_react27 = __toESM(require("react"), 1);
+var import_react28 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 var import_fa12 = require("react-icons/fa");
 var import_date_fns2 = require("date-fns");
@@ -5135,16 +5196,16 @@ function ITDatePicker({
   range = false
 }) {
   const { t, formatDate: formatDateLocale } = useITTranslation();
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react27.useState)("");
-  const [isValidDate, setIsValidDate] = (0, import_react27.useState)(true);
-  const [internalRange, setInternalRange] = (0, import_react27.useState)([null, null]);
-  const wrapperRef = (0, import_react27.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react28.useState)("");
+  const [isValidDate, setIsValidDate] = (0, import_react28.useState)(true);
+  const [internalRange, setInternalRange] = (0, import_react28.useState)([null, null]);
+  const wrapperRef = (0, import_react28.useRef)(null);
   const { panelRef, style: panelStyle } = useFloatingPanel(wrapperRef, isOpen, {
     estimatedHeight: 360,
     matchWidth: false
   });
-  const dateRange = import_react27.default.useMemo(() => {
+  const dateRange = import_react28.default.useMemo(() => {
     if (range) {
       if (Array.isArray(value)) return value;
       return internalRange;
@@ -5152,7 +5213,7 @@ function ITDatePicker({
     return [value instanceof Date ? value : null, null];
   }, [value, range, internalRange]);
   const [startDate, endDate] = dateRange;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (range) {
       if (startDate && endDate) {
         setInputValue(`${formatDate(startDate)} - ${formatDate(endDate)}`);
@@ -5169,7 +5230,7 @@ function ITDatePicker({
       }
     }
   }, [startDate, endDate, range]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       const inWrapper = wrapperRef.current?.contains(target);
@@ -5464,11 +5525,11 @@ function ITDataTable({
   footerStyle
 }) {
   const { t, locale } = useITTranslation();
-  const [viewMode, setViewMode] = (0, import_react28.useState)(defaultView || "table");
+  const [viewMode, setViewMode] = (0, import_react29.useState)(defaultView || "table");
   const { ref: rootRef, width: containerWidth } = useElementSize();
-  const [data, setData] = (0, import_react28.useState)([]);
-  const [totalItems, setTotalItems] = (0, import_react28.useState)(0);
-  const [isLoading, setIsLoading] = (0, import_react28.useState)(fetchOnMount);
+  const [data, setData] = (0, import_react29.useState)([]);
+  const [totalItems, setTotalItems] = (0, import_react29.useState)(0);
+  const [isLoading, setIsLoading] = (0, import_react29.useState)(fetchOnMount);
   const colorVars = {
     ...colors?.headerBg ? { "--color-table-headerBg": colors.headerBg } : {},
     ...colors?.headerText ? { "--color-table-headerText": colors.headerText } : {},
@@ -5489,7 +5550,7 @@ function ITDataTable({
   const isStickyHeader = stickyHeader && isTableVirtual;
   const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
   const columnCount = columns.length;
-  const pinnedMeta = import_react28.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
+  const pinnedMeta = import_react29.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
   const scrollOuterClass = isTableVirtual ? "relative min-h-[200px]" : "overflow-x-auto relative min-h-[200px]";
   const {
     currentPage,
@@ -5515,15 +5576,15 @@ function ITDataTable({
     resetKey: `${currentPage}-${itemsPerPage}`
   });
   const windowData = isTableVirtual ? data.slice(startIndex, endIndex + 1) : data;
-  const debounceTimerRef = (0, import_react28.useRef)(null);
-  const hasFetchedRef = (0, import_react28.useRef)(false);
-  const fetchDataRef = (0, import_react28.useRef)(fetchData);
+  const debounceTimerRef = (0, import_react29.useRef)(null);
+  const hasFetchedRef = (0, import_react29.useRef)(false);
+  const fetchDataRef = (0, import_react29.useRef)(fetchData);
   fetchDataRef.current = fetchData;
-  const externalFiltersRef = (0, import_react28.useRef)(externalFilters);
+  const externalFiltersRef = (0, import_react29.useRef)(externalFilters);
   externalFiltersRef.current = externalFilters;
   const externalKey = JSON.stringify(externalFilters);
   const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
-  const performFetch = (0, import_react28.useCallback)(async () => {
+  const performFetch = (0, import_react29.useCallback)(async () => {
     setIsLoading(true);
     try {
       const response = await fetchDataRef.current({
@@ -5544,9 +5605,9 @@ function ITDataTable({
       setIsLoading(false);
     }
   }, [currentPage, itemsPerPage, filters, sortConfig]);
-  const performFetchRef = (0, import_react28.useRef)(performFetch);
+  const performFetchRef = (0, import_react29.useRef)(performFetch);
   performFetchRef.current = performFetch;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!fetchOnMount && !hasFetchedRef.current) return;
     if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
@@ -5985,7 +6046,7 @@ function ITDataTable({
 
 // src/components/organisms/dialog/dialog.tsx
 var import_react_dom5 = require("react-dom");
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_fa15 = require("react-icons/fa");
 
 // src/components/molecules/form-header/form-header.tsx
@@ -6111,9 +6172,9 @@ function ITDialog({
   padded = true
 }) {
   const { t } = useITTranslation();
-  const modalRef = (0, import_react29.useRef)(null);
+  const modalRef = (0, import_react30.useRef)(null);
   useClickOutside_default(modalRef, onClose);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -6195,7 +6256,7 @@ function ITDivider({
 // src/components/organisms/drawer/drawer.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
 var import_fa16 = require("react-icons/fa");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function ITDrawer({
   isOpen,
@@ -6208,7 +6269,7 @@ function ITDrawer({
   style
 }) {
   const { t } = useITTranslation();
-  const panelRef = (0, import_react30.useRef)(null);
+  const panelRef = (0, import_react31.useRef)(null);
   useClickOutside_default(panelRef, onClose);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fixed inset-0 z-[50] flex", children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }),
@@ -6263,36 +6324,36 @@ function ITEmptyState({
 }
 
 // src/components/organisms/form-builder/formBuilder.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/organisms/form-builder/formBuilder.context.tsx
-var import_react31 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var ITFormBuilderContext = (0, import_react31.createContext)(void 0);
+var ITFormBuilderContext = (0, import_react32.createContext)(void 0);
 var ITFormBuilderProvider = ({
   children,
   value
 }) => {
-  const [fieldRegistry, setFieldRegistry] = (0, import_react31.useState)({});
-  const registerField = import_react31.default.useCallback((name, config2) => {
+  const [fieldRegistry, setFieldRegistry] = (0, import_react32.useState)({});
+  const registerField = import_react32.default.useCallback((name, config2) => {
     setFieldRegistry((prev) => ({ ...prev, [name]: config2 }));
   }, []);
-  const unregisterField = import_react31.default.useCallback((name) => {
+  const unregisterField = import_react32.default.useCallback((name) => {
     setFieldRegistry((prev) => {
       const next = { ...prev };
       delete next[name];
       return next;
     });
   }, []);
-  const getFieldConfig = import_react31.default.useCallback(
+  const getFieldConfig = import_react32.default.useCallback(
     (name) => fieldRegistry[name],
     [fieldRegistry]
   );
-  const getAllFieldConfigs = import_react31.default.useCallback(
+  const getAllFieldConfigs = import_react32.default.useCallback(
     () => Object.values(fieldRegistry),
     [fieldRegistry]
   );
-  const contextValue = import_react31.default.useMemo(
+  const contextValue = import_react32.default.useMemo(
     () => ({
       ...value,
       registerField,
@@ -6305,7 +6366,7 @@ var ITFormBuilderProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ITFormBuilderContext.Provider, { value: contextValue, children });
 };
 var useITFormBuilderContext = () => {
-  const context = (0, import_react31.useContext)(ITFormBuilderContext);
+  const context = (0, import_react32.useContext)(ITFormBuilderContext);
   if (!context) {
     throw new Error("useITFormBuilderContext must be used within an ITFormBuilderProvider");
   }
@@ -6313,12 +6374,12 @@ var useITFormBuilderContext = () => {
 };
 
 // src/components/organisms/form-builder/fieldRenderer.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_clsx32 = __toESM(require("clsx"), 1);
 
 // src/components/molecules/time-picker/timePicker.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_react_dom6 = require("react-dom");
 var import_fa18 = require("react-icons/fa");
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -6339,12 +6400,12 @@ function ITTimePicker({
   color = "primary"
 }) {
   const { t } = useITTranslation();
-  const [isOpen, setIsOpen] = (0, import_react32.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react32.useState)(value || "");
-  const [isValidTime, setIsValidTime] = (0, import_react32.useState)(true);
-  const wrapperRef = (0, import_react32.useRef)(null);
-  const hoursRef = (0, import_react32.useRef)(null);
-  const minutesRef = (0, import_react32.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react33.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react33.useState)(value || "");
+  const [isValidTime, setIsValidTime] = (0, import_react33.useState)(true);
+  const wrapperRef = (0, import_react33.useRef)(null);
+  const hoursRef = (0, import_react33.useRef)(null);
+  const minutesRef = (0, import_react33.useRef)(null);
   const { panelRef: dropdownRef, style: panelStyle } = useFloatingPanel(
     wrapperRef,
     isOpen && !disabled,
@@ -6358,7 +6419,7 @@ function ITTimePicker({
   const isThemeColor = color in theme.colors;
   const highlightColor = isThemeColor ? theme.colors[color][50] : "#f3f4f6";
   const activeColor = isThemeColor ? theme.colors[color][100] : "#e5e7eb";
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     setInputValue(value || "");
   }, [value]);
   const validateTime = (timeString) => {
@@ -6367,7 +6428,7 @@ function ITTimePicker({
   };
   const currentHour = validateTime(inputValue) ? inputValue.split(":")[0] : null;
   const currentMinute = validateTime(inputValue) ? inputValue.split(":")[1] : null;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (isOpen) {
       setTimeout(() => {
         if (hoursRef.current && currentHour) {
@@ -6574,26 +6635,26 @@ function ITTimePicker({
 }
 
 // src/components/organisms/form-builder/useFormBuilder.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 var useFieldRules = (config2, dependentValues) => {
   const { getFieldConfig } = useITFormBuilderContext();
   const fieldConfig = getFieldConfig(config2.name) || config2;
-  const isVisible = (0, import_react33.useMemo)(() => {
+  const isVisible = (0, import_react34.useMemo)(() => {
     if (!fieldConfig.renderWhen) return true;
     return fieldConfig.renderWhen(dependentValues);
   }, [fieldConfig, dependentValues]);
-  const dynamicProps = (0, import_react33.useMemo)(() => {
+  const dynamicProps = (0, import_react34.useMemo)(() => {
     if (!fieldConfig.dynamicProps) return {};
     return fieldConfig.dynamicProps(dependentValues);
   }, [fieldConfig, dependentValues]);
-  const isRequired = (0, import_react33.useMemo)(() => {
+  const isRequired = (0, import_react34.useMemo)(() => {
     if (typeof dynamicProps.required !== "undefined") return dynamicProps.required;
     if (typeof fieldConfig.required === "function") {
       return fieldConfig.required(dependentValues);
     }
     return !!fieldConfig.required;
   }, [fieldConfig, dynamicProps.required, dependentValues]);
-  const isDisabled = (0, import_react33.useMemo)(() => {
+  const isDisabled = (0, import_react34.useMemo)(() => {
     if (typeof dynamicProps.disabled !== "undefined") return dynamicProps.disabled;
     if (typeof fieldConfig.disabled === "function") {
       return fieldConfig.disabled(dependentValues);
@@ -6607,11 +6668,11 @@ var useFieldRules = (config2, dependentValues) => {
 var import_fa19 = require("react-icons/fa");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function useAsyncOptions(options, deps) {
-  const [resolved, setResolved] = (0, import_react34.useState)([]);
-  const [loading, setLoading] = (0, import_react34.useState)(false);
-  const optionsRef = (0, import_react34.useRef)(options);
+  const [resolved, setResolved] = (0, import_react35.useState)([]);
+  const [loading, setLoading] = (0, import_react35.useState)(false);
+  const optionsRef = (0, import_react35.useRef)(options);
   optionsRef.current = options;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const opts = optionsRef.current;
     let cancelled = false;
     if (typeof opts === "function") {
@@ -6655,13 +6716,13 @@ var ITFieldRenderer = ({
     config2,
     dependentValues
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     context.registerField(config2.name, config2);
     return () => {
       context.unregisterField(config2.name);
     };
   }, [config2.name]);
-  const activeConfig = (0, import_react34.useMemo)(
+  const activeConfig = (0, import_react35.useMemo)(
     () => ({
       ...config2,
       ...dynamicProps,
@@ -6687,7 +6748,7 @@ var ITFieldRenderer = ({
     options,
     [options, dependentValues]
   );
-  const handleChangeWrapper = (0, import_react34.useCallback)(
+  const handleChangeWrapper = (0, import_react35.useCallback)(
     async (val) => {
       const finalValue = val && typeof val === "object" && "target" in val ? val.target.value : val;
       await context.setFieldValue(name, finalValue);
@@ -6898,7 +6959,7 @@ var ITFieldRenderer = ({
     }
   );
 };
-var fieldRenderer_default = (0, import_react34.memo)(ITFieldRenderer);
+var fieldRenderer_default = (0, import_react35.memo)(ITFieldRenderer);
 
 // src/components/organisms/form-builder/formBuilder.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -6929,7 +6990,7 @@ function ITFormBuilder({
   isSubmitting = false,
   children
 }) {
-  const providerValue = (0, import_react35.useMemo)(
+  const providerValue = (0, import_react36.useMemo)(
     () => ({
       config: config2 || [],
       values: values || {},
@@ -7081,7 +7142,7 @@ function ITFormBuilder({
 }
 
 // src/components/atoms/image/image.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var ITImage = ({
   src,
@@ -7090,7 +7151,7 @@ var ITImage = ({
   fallback = "",
   fit = "cover"
 }) => {
-  const [imageError, setImageError] = (0, import_react36.useState)(false);
+  const [imageError, setImageError] = (0, import_react37.useState)(false);
   const { t } = useITTranslation();
   const handleImageError = () => {
     setImageError(true);
@@ -7165,7 +7226,7 @@ function ITInputNumber({
 }
 
 // src/components/organisms/navbar/navbar.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_fa20 = require("react-icons/fa");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function ITNavbar({
@@ -7181,9 +7242,9 @@ function ITNavbar({
   sidebarItems
 }) {
   const { t } = useITTranslation();
-  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react37.useState)(false);
-  const [expandedItems, setExpandedItems] = (0, import_react37.useState)(/* @__PURE__ */ new Set());
-  const userMenuRef = (0, import_react37.useRef)(null);
+  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react38.useState)(false);
+  const [expandedItems, setExpandedItems] = (0, import_react38.useState)(/* @__PURE__ */ new Set());
+  const userMenuRef = (0, import_react38.useRef)(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   const toggleUserMenu = () => {
     setIsUserMenuOpen(!isUserMenuOpen);
@@ -7433,7 +7494,9 @@ function ITPageHeader({
 }) {
   const { t } = useITTranslation();
   const showTopRow = breadcrumbs?.length || backAction;
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `${className} space-y-3`, children: [
     showTopRow && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -7441,7 +7504,8 @@ function ITPageHeader({
           "button",
           {
             onClick: backAction,
-            className: "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0",
+            className: bento ? "flex items-center justify-center w-10 h-10 rounded-full hover:opacity-80 transition-opacity duration-200 flex-shrink-0" : "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0",
+            style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", color: "var(--it-bento-control-text, #475569)" } : void 0,
             "aria-label": t("pageHeader.back"),
             children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa21.FaChevronLeft, { size: 14 })
           }
@@ -7452,7 +7516,7 @@ function ITPageHeader({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-start justify-between gap-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-start gap-4 min-w-0", children: [
-        icon && !flat && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        icon && !flat && !bento && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             className: "flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm",
@@ -7465,7 +7529,7 @@ function ITPageHeader({
             ITText,
             {
               as: "h1",
-              className: flat ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight" : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
+              className: bento ? "text-3xl font-bold text-slate-900 dark:text-white tracking-tighter leading-tight" : flat ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight" : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
               children: title
             }
           ),
@@ -7473,7 +7537,7 @@ function ITPageHeader({
             ITText,
             {
               as: "p",
-              className: flat ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed" : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
+              className: bento ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed" : flat ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed" : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
               children: description
             }
           )
@@ -7618,7 +7682,7 @@ function ITPage(props) {
 }
 
 // src/components/atoms/popover/popover.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_clsx35 = __toESM(require("clsx"), 1);
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var positionClasses = {
@@ -7635,10 +7699,10 @@ function ITPopover({
   onClose,
   className
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react38.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react39.useState)(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const ref = (0, import_react38.useRef)(null);
+  const ref = (0, import_react39.useRef)(null);
   useClickOutside_default(ref, () => {
     if (isControlled) onClose?.();
     else setInternalOpen(false);
@@ -7766,7 +7830,7 @@ function ITRadioGroup({
 
 // src/components/organisms/searchTable/searchTable.tsx
 var import_clsx39 = __toESM(require("clsx"), 1);
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/organisms/searchTable/components/SearchInput.tsx
 var import_fa22 = require("react-icons/fa");
@@ -8257,7 +8321,7 @@ function ITSearchTable({
   onCancel
 }) {
   const { t } = useITTranslation();
-  const [itemsPerPage, setItemsPerPage] = (0, import_react39.useState)(defaultItemsPerPage);
+  const [itemsPerPage, setItemsPerPage] = (0, import_react40.useState)(defaultItemsPerPage);
   const { searchTerm, handleSearchChange, handleClearSearch } = useDebouncedSearch({
     initialValue: searchTermInitial,
     onSearch: (value) => {
@@ -8385,16 +8449,19 @@ function ITSegmentedControl({
   disabled = false
 }) {
   const { button, container } = sizeMap3[size];
+  const bento = useITAppearance() === "bento";
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       role: "group",
       className: (0, import_clsx40.default)(
-        "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
+        "inline-flex",
+        bento ? "rounded-full" : "rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
+      style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)" } : void 0,
       children: options.map((opt) => {
         const isActive = opt.value === value;
         return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
@@ -8406,10 +8473,14 @@ function ITSegmentedControl({
             disabled,
             className: (0, import_clsx40.default)(
               button,
-              "rounded-lg font-semibold transition-all flex items-center gap-1.5",
-              isActive ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
+              "font-semibold transition-all flex items-center gap-1.5",
+              bento ? "rounded-full border border-transparent" : isActive ? "rounded-lg bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600" : "rounded-lg text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
               disabled && "pointer-events-none"
             ),
+            style: bento ? {
+              backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+              color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+            } : void 0,
             children: [
               opt.icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: opt.icon }),
               /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "span", children: opt.label })
@@ -8423,7 +8494,7 @@ function ITSegmentedControl({
 }
 
 // src/components/organisms/sidebar/sidebar.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_clsx41 = __toESM(require("clsx"), 1);
 var import_fa26 = require("react-icons/fa");
 var import_jsx_runtime60 = require("react/jsx-runtime");
@@ -8462,14 +8533,16 @@ function ITSidebar({
   onToggleCollapse,
   expandOnHover = true
 }) {
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
-  const [expandedItems, setExpandedItems] = (0, import_react40.useState)(/* @__PURE__ */ new Set());
-  const [isHovering, setIsHovering] = (0, import_react40.useState)(false);
-  const sidebarRef = (0, import_react40.useRef)(null);
-  const hoverTimeoutRef = (0, import_react40.useRef)(null);
-  const leaveTimeoutRef = (0, import_react40.useRef)(null);
-  (0, import_react40.useEffect)(() => {
+  const [expandedItems, setExpandedItems] = (0, import_react41.useState)(/* @__PURE__ */ new Set());
+  const [isHovering, setIsHovering] = (0, import_react41.useState)(false);
+  const sidebarRef = (0, import_react41.useRef)(null);
+  const hoverTimeoutRef = (0, import_react41.useRef)(null);
+  const leaveTimeoutRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(() => {
     const hoverTimer = hoverTimeoutRef.current;
     const leaveTimer = leaveTimeoutRef.current;
     const handleMouseEnter = () => {
@@ -8496,7 +8569,7 @@ function ITSidebar({
       if (leaveTimer) clearTimeout(leaveTimer);
     };
   }, [isCollapsed]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const activeParents = /* @__PURE__ */ new Set();
     navigationItems.forEach((item) => {
       if (item.subitems && flattenSubItems(item.subitems).some((sub) => sub.isActive)) {
@@ -8554,7 +8627,7 @@ function ITSidebar({
         color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
         backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
         fontSize: flat ? "0.84rem" : "0.78rem",
-        fontWeight: subitem.isActive ? 600 : 500,
+        fontWeight: subitem.isActive ? bento ? 700 : 600 : 500,
         letterSpacing: "0.01em",
         marginLeft: subitemConnector === "|" ? "-1px" : "0"
       },
@@ -8711,7 +8784,7 @@ function ITSidebar({
       style: {
         zIndex: 50,
         backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
+        borderRight: bento ? "none" : "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
         ...flat ? {} : { WebkitBackdropFilter: "blur(12px)", backdropFilter: "blur(12px)" }
       },
       children: [
@@ -8805,7 +8878,7 @@ function ITSidebar({
                         style: {
                           color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
                           fontSize: flat ? "0.875rem" : "0.8rem",
-                          fontWeight: active ? "600" : "500"
+                          fontWeight: active ? bento ? "700" : "600" : "500"
                         },
                         children: item.label
                       }
@@ -8911,7 +8984,7 @@ function ITSidebar({
 }
 
 // src/components/atoms/slide/slide.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_clsx42 = __toESM(require("clsx"), 1);
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function ITSlideToggle({
@@ -8928,8 +9001,8 @@ function ITSlideToggle({
   className = ""
 }) {
   const isControlled = controlledIsOn !== void 0;
-  const [internalIsOn, setInternalIsOn] = (0, import_react41.useState)(initialState);
-  (0, import_react41.useEffect)(() => {
+  const [internalIsOn, setInternalIsOn] = (0, import_react42.useState)(initialState);
+  (0, import_react42.useEffect)(() => {
     if (isControlled) {
       setInternalIsOn(controlledIsOn);
     }
@@ -9113,7 +9186,7 @@ function ITStatCard({
 }
 
 // src/components/molecules/line-bar-chart/line-bar-chart.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function ITLineBarChart({
   data,
@@ -9122,6 +9195,8 @@ function ITLineBarChart({
   barLabel,
   lineColor = "#10b981",
   barColor = "#3b82f6",
+  showLine = true,
+  showBars = true,
   height = 240,
   formatValue,
   formatAxis,
@@ -9132,15 +9207,18 @@ function ITLineBarChart({
   const resolvedBarLabel = barLabel ?? t("lineBarChart.barLabel");
   const resolvedFormatAxis = formatAxis ?? ((value) => formatNumber(value, { notation: "compact", maximumFractionDigits: 1 }));
   const resolvedFormatValue = formatValue ?? ((value) => formatNumber(value));
-  const gradientId = (0, import_react42.useId)().replace(/[:]/g, "");
-  const [hover, setHover] = (0, import_react42.useState)(null);
+  const gradientId = (0, import_react43.useId)().replace(/[:]/g, "");
+  const [hover, setHover] = (0, import_react43.useState)(null);
   const width = 720;
   const padding = { top: 16, right: 16, bottom: 28, left: 52 };
   const plotWidth = width - padding.left - padding.right;
   const plotHeight = height - padding.top - padding.bottom;
-  const max = (0, import_react42.useMemo)(
-    () => Math.max(...data.flatMap((d) => [d.line, d.bar]), 1),
-    [data]
+  const max = (0, import_react43.useMemo)(
+    () => Math.max(
+      ...data.flatMap((d) => [showLine ? d.line : 0, showBars ? d.bar : 0]),
+      1
+    ),
+    [data, showLine, showBars]
   );
   const gridValues = [0, 0.25, 0.5, 0.75, 1].map((f) => max * f);
   const step = data.length > 0 ? plotWidth / data.length : plotWidth;
@@ -9184,7 +9262,7 @@ function ITLineBarChart({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("text", { x: padding.left - 8, y: y(value) + 3, textAnchor: "end", fontSize: 10, fill: "#94a3b8", children: resolvedFormatAxis(Math.round(value)) })
           ] }, i)),
-          data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          showBars && data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "rect",
             {
               x: x(i) - barWidth / 2,
@@ -9197,8 +9275,8 @@ function ITLineBarChart({
             },
             `bar-${d.label}`
           )),
-          areaPath && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: areaPath, fill: `url(#area-${gradientId})` }),
-          data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          showLine && areaPath && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: areaPath, fill: `url(#area-${gradientId})` }),
+          showLine && data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "polyline",
             {
               points: linePoints,
@@ -9209,7 +9287,7 @@ function ITLineBarChart({
               strokeLinejoin: "round"
             }
           ),
-          data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          showLine && data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "circle",
             {
               cx: x(i),
@@ -9236,12 +9314,12 @@ function ITLineBarChart({
         role: "status",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-[10px] font-semibold", style: { color: "#e2e8f0" }, children: active.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "text-[11px] tabular-nums", style: { color: lineColor }, children: [
+          showLine && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "text-[11px] tabular-nums", style: { color: lineColor }, children: [
             resolvedLineLabel,
             ": ",
             resolvedFormatValue(active.line)
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "text-[11px] tabular-nums", style: { color: "#93c5fd" }, children: [
+          showBars && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "text-[11px] tabular-nums", style: { color: "#93c5fd" }, children: [
             resolvedBarLabel,
             ": ",
             resolvedFormatValue(active.bar)
@@ -9250,11 +9328,11 @@ function ITLineBarChart({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("ul", { className: "flex flex-wrap items-center gap-4 text-[11px]", style: { color: "#475569" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { children: [
+      showLine && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "h-2.5 w-2.5 rounded-sm", style: { background: lineColor }, "aria-hidden": true }),
         resolvedLineLabel
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { children: [
+      showBars && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "h-2.5 w-2.5 rounded-sm", style: { background: barColor }, "aria-hidden": true }),
         resolvedBarLabel
       ] })
@@ -9265,7 +9343,7 @@ var line_bar_chart_default = ITLineBarChart;
 
 // src/components/molecules/table/table.tsx
 var import_clsx45 = __toESM(require("clsx"), 1);
-var import_react43 = __toESM(require("react"), 1);
+var import_react44 = __toESM(require("react"), 1);
 var import_fa27 = require("react-icons/fa");
 var import_md2 = require("react-icons/md");
 var import_date_fns3 = require("date-fns");
@@ -9314,7 +9392,7 @@ function ITTable({
   footerStyle
 }) {
   const { t, locale } = useITTranslation();
-  const [viewMode, setViewMode] = (0, import_react43.useState)(defaultView);
+  const [viewMode, setViewMode] = (0, import_react44.useState)(defaultView);
   const { ref: rootRef, width: containerWidth } = useElementSize();
   const colorVars = {
     ...colors?.headerBg ? { "--color-table-headerBg": colors.headerBg } : {},
@@ -9342,7 +9420,7 @@ function ITTable({
     handleSort,
     handleItemsPerPageChange
   } = useTableState({ defaultItemsPerPage });
-  const sortedData = import_react43.default.useMemo(() => {
+  const sortedData = import_react44.default.useMemo(() => {
     const safeData = Array.isArray(data) ? data : [];
     if (!sortConfig) return safeData;
     return [...safeData].sort((a, b) => {
@@ -9432,7 +9510,7 @@ function ITTable({
   const isStickyHeader = stickyHeader && isTableVirtual;
   const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
   const columnCount = columns.length;
-  const pinnedMeta = import_react43.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
+  const pinnedMeta = import_react44.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
   const {
     scrollRef,
     startIndex,
@@ -9897,6 +9975,7 @@ function ITTable({
 
 // src/components/atoms/textarea/textarea.tsx
 var import_clsx46 = __toESM(require("clsx"), 1);
+var import_react45 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var resizeMap = {
   none: "resize-none",
@@ -9904,7 +9983,7 @@ var resizeMap = {
   horizontal: "resize-x",
   both: "resize"
 };
-function ITTextarea({
+var ITTextarea = (0, import_react45.forwardRef)(function ITTextarea2({
   value,
   onChange,
   label,
@@ -9915,13 +9994,16 @@ function ITTextarea({
   className,
   name,
   maxLength,
-  resize = "vertical"
-}) {
+  resize = "vertical",
+  onKeyDown,
+  autoFocus = false
+}, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx46.default)("flex flex-col gap-1.5", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ITText, { as: "label", className: inputLabel(!!error), htmlFor: name, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "textarea",
       {
+        ref,
         id: name,
         name,
         value,
@@ -9930,6 +10012,8 @@ function ITTextarea({
         rows,
         disabled,
         maxLength,
+        onKeyDown,
+        autoFocus,
         className: (0, import_clsx46.default)(
           "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
           "focus:ring-2",
@@ -9941,10 +10025,12 @@ function ITTextarea({
     ),
     error && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ITText, { as: "span", className: inputError, children: error })
   ] });
-}
+});
+ITTextarea.displayName = "ITTextarea";
+var textarea_default = ITTextarea;
 
 // src/components/molecules/tabs/tabs.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_clsx47 = require("clsx");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var ITTabs = ({
@@ -9955,7 +10041,8 @@ var ITTabs = ({
   className = "",
   containerClassName = ""
 }) => {
-  const [activeId, setActiveId] = (0, import_react44.useState)(defaultActiveId || items[0]?.id);
+  const bento = useITAppearance() === "bento" && variant === "pill";
+  const [activeId, setActiveId] = (0, import_react46.useState)(defaultActiveId || items[0]?.id);
   const handleTabClick = (id, disabled) => {
     if (disabled) return;
     setActiveId(id);
@@ -9963,39 +10050,50 @@ var ITTabs = ({
   };
   const activeContent = items.find((item) => item.id === activeId)?.content;
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx47.clsx)("w-full", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: (0, import_clsx47.clsx)(
-      "flex border-secondary-200 mb-4",
-      variant === "line" ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
-      className
-    ), children: items.map((item) => {
-      const isActive = item.id === activeId;
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
-        "button",
-        {
-          onClick: () => handleTabClick(item.id, item.disabled),
-          disabled: item.disabled,
-          className: (0, import_clsx47.clsx)(
-            "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
-            // LINE VARIANT
-            variant === "line" && [
-              "border-b-2 -mb-[2px]",
-              isActive ? "border-primary-500 text-primary-600" : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300"
-            ],
-            // PILL VARIANT
-            variant === "pill" && [
-              "rounded-md",
-              isActive ? "bg-white text-primary-600 shadow-sm" : "text-secondary-500 hover:text-secondary-700"
-            ],
-            item.disabled && "opacity-50 cursor-not-allowed"
-          ),
-          children: [
-            item.icon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "w-4 h-4", children: item.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ITText, { as: "span", children: item.label })
-          ]
-        },
-        item.id
-      );
-    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "div",
+      {
+        className: (0, import_clsx47.clsx)(
+          "flex border-secondary-200 mb-4",
+          variant === "line" ? "border-b" : bento ? "gap-2 p-1 rounded-full w-fit" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
+          className
+        ),
+        style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", borderColor: "transparent" } : void 0,
+        children: items.map((item) => {
+          const isActive = item.id === activeId;
+          return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+            "button",
+            {
+              onClick: () => handleTabClick(item.id, item.disabled),
+              disabled: item.disabled,
+              className: (0, import_clsx47.clsx)(
+                "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
+                // LINE VARIANT
+                variant === "line" && [
+                  "border-b-2 -mb-[2px]",
+                  isActive ? "border-primary-500 text-primary-600" : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300"
+                ],
+                // PILL VARIANT
+                variant === "pill" && (bento ? "rounded-full" : [
+                  "rounded-md",
+                  isActive ? "bg-white text-primary-600 shadow-sm" : "text-secondary-500 hover:text-secondary-700"
+                ]),
+                item.disabled && "opacity-50 cursor-not-allowed"
+              ),
+              style: bento ? {
+                backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+                color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+              } : void 0,
+              children: [
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "w-4 h-4", children: item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ITText, { as: "span", children: item.label })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "tab-content animate-fadeIn", children: activeContent })
   ] });
 };
@@ -10055,7 +10153,7 @@ var positionStyles = {
 
 // src/components/organisms/toast/toast.tsx
 var import_clsx49 = __toESM(require("clsx"), 1);
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_fa28 = require("react-icons/fa");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 function ITToast({
@@ -10066,8 +10164,8 @@ function ITToast({
   onClose
 }) {
   const { t } = useITTranslation();
-  const [isVisible, setIsVisible] = (0, import_react45.useState)(true);
-  (0, import_react45.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react47.useState)(true);
+  (0, import_react47.useEffect)(() => {
     const timer = setTimeout(() => {
       setIsVisible(false);
       setTimeout(() => {
@@ -10133,7 +10231,7 @@ function ITToast({
 }
 
 // src/components/molecules/wysiwyg/wysiwyg.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 var import_clsx51 = __toESM(require("clsx"), 1);
 var import_fa29 = require("react-icons/fa");
 
@@ -10149,7 +10247,7 @@ var toolbarActions = [
 ];
 
 // src/components/atoms/tooltip/tooltip.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 var import_clsx50 = __toESM(require("clsx"), 1);
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var positionClasses2 = {
@@ -10171,7 +10269,7 @@ function ITTooltip({
   delay = 200,
   className
 }) {
-  const [visible, setVisible] = (0, import_react46.useState)(false);
+  const [visible, setVisible] = (0, import_react48.useState)(false);
   let timeout;
   const handleMouseEnter = () => {
     timeout = setTimeout(() => setVisible(true), delay);
@@ -10234,12 +10332,12 @@ function ITWysiwyg({
   className
 }) {
   const { t } = useITTranslation();
-  const editorRef = (0, import_react47.useRef)(null);
-  const focusedRef = (0, import_react47.useRef)(false);
-  const [active, setActive] = (0, import_react47.useState)({});
+  const editorRef = (0, import_react49.useRef)(null);
+  const focusedRef = (0, import_react49.useRef)(false);
+  const [active, setActive] = (0, import_react49.useState)({});
   const isLocked = disabled || readOnly;
   const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
-  const findAncestor = (0, import_react47.useCallback)(
+  const findAncestor = (0, import_react49.useCallback)(
     (node, predicate) => {
       const editor = editorRef.current;
       if (!editor) return null;
@@ -10252,7 +10350,7 @@ function ITWysiwyg({
     },
     []
   );
-  const isInlineTag = (0, import_react47.useCallback)((el, tag) => {
+  const isInlineTag = (0, import_react49.useCallback)((el, tag) => {
     if (tag === "STRONG" || tag === "B") {
       return el.tagName === "STRONG" || el.tagName === "B";
     }
@@ -10261,7 +10359,7 @@ function ITWysiwyg({
     }
     return el.tagName === tag;
   }, []);
-  const getTextNodesInRange = (0, import_react47.useCallback)((range) => {
+  const getTextNodesInRange = (0, import_react49.useCallback)((range) => {
     const editor = editorRef.current;
     if (!editor) return [];
     const out = [];
@@ -10272,7 +10370,7 @@ function ITWysiwyg({
     }
     return out;
   }, []);
-  const placeCaretAtEnd = (0, import_react47.useCallback)((target) => {
+  const placeCaretAtEnd = (0, import_react49.useCallback)((target) => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     if (!editor || !sel) return;
@@ -10283,11 +10381,11 @@ function ITWysiwyg({
     sel.addRange(range);
     if (document.activeElement !== editor) editor.focus();
   }, []);
-  const emitChange = (0, import_react47.useCallback)(() => {
+  const emitChange = (0, import_react49.useCallback)(() => {
     const editor = editorRef.current;
     if (editor) onChange?.(editor.innerHTML);
   }, [onChange]);
-  const updateActive = (0, import_react47.useCallback)(() => {
+  const updateActive = (0, import_react49.useCallback)(() => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     const node = sel?.anchorNode ?? null;
@@ -10306,13 +10404,13 @@ function ITWysiwyg({
       (prev) => JSON.stringify(prev) === JSON.stringify(next) ? prev : next
     );
   }, [findAncestor, isInlineTag]);
-  const unwrapElement = (0, import_react47.useCallback)((el) => {
+  const unwrapElement = (0, import_react49.useCallback)((el) => {
     const parent = el.parentNode;
     if (!parent) return;
     while (el.firstChild) parent.insertBefore(el.firstChild, el);
     el.remove();
   }, []);
-  const applyInline = (0, import_react47.useCallback)(
+  const applyInline = (0, import_react49.useCallback)(
     (tag, prepare) => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -10394,7 +10492,7 @@ function ITWysiwyg({
       updateActive
     ]
   );
-  const normalizeBlocks = (0, import_react47.useCallback)(() => {
+  const normalizeBlocks = (0, import_react49.useCallback)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     const children = Array.from(editor.childNodes);
@@ -10416,7 +10514,7 @@ function ITWysiwyg({
     }
     flush();
   }, []);
-  const convertLiToDiv = (0, import_react47.useCallback)((li) => {
+  const convertLiToDiv = (0, import_react49.useCallback)((li) => {
     const list = li.parentElement;
     if (!list || !list.parentNode) return;
     const div = document.createElement("div");
@@ -10424,20 +10522,20 @@ function ITWysiwyg({
     list.parentNode.insertBefore(div, list);
     li.remove();
   }, []);
-  const cleanupEmptyLists = (0, import_react47.useCallback)(() => {
+  const cleanupEmptyLists = (0, import_react49.useCallback)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     editor.querySelectorAll("ul, ol").forEach((list) => {
       if (!list.querySelector("li")) list.remove();
     });
   }, []);
-  const retagList = (0, import_react47.useCallback)((list, type) => {
+  const retagList = (0, import_react49.useCallback)((list, type) => {
     if (!list.parentNode) return;
     const nl = document.createElement(type);
     while (list.firstChild) nl.appendChild(list.firstChild);
     list.parentNode.replaceChild(nl, list);
   }, []);
-  const toggleList = (0, import_react47.useCallback)(
+  const toggleList = (0, import_react49.useCallback)(
     (type) => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -10535,7 +10633,7 @@ function ITWysiwyg({
       updateActive
     ]
   );
-  const clearFormatting = (0, import_react47.useCallback)(() => {
+  const clearFormatting = (0, import_react49.useCallback)(() => {
     const editor = editorRef.current;
     const sel = window.getSelection();
     if (!editor || !sel || sel.rangeCount === 0) return;
@@ -10569,7 +10667,7 @@ function ITWysiwyg({
     emitChange,
     updateActive
   ]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     if (!focusedRef.current) {
@@ -10577,7 +10675,7 @@ function ITWysiwyg({
       if (editor.innerHTML !== next) editor.innerHTML = next;
     }
   }, [value]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const onSelectionChange = () => {
       const editor = editorRef.current;
       const sel = window.getSelection();
@@ -10716,12 +10814,12 @@ function ITWysiwyg({
 }
 
 // src/components/molecules/json-editor/json-editor.tsx
-var import_react50 = require("react");
+var import_react52 = require("react");
 var import_clsx53 = __toESM(require("clsx"), 1);
 var import_fa31 = require("react-icons/fa");
 
 // src/components/molecules/json-editor/json-editor-tree.tsx
-var import_react48 = require("react");
+var import_react50 = require("react");
 var import_clsx52 = __toESM(require("clsx"), 1);
 var import_fa30 = require("react-icons/fa");
 
@@ -11206,9 +11304,9 @@ function ITCodeTreeView({
   className
 }) {
   const { t } = useITTranslation();
-  const root = (0, import_react48.useMemo)(() => buildTree(value, "", [], 0), [value]);
-  const [collapsed, setCollapsed] = (0, import_react48.useState)({});
-  const rows = (0, import_react48.useMemo)(() => {
+  const root = (0, import_react50.useMemo)(() => buildTree(value, "", [], 0), [value]);
+  const [collapsed, setCollapsed] = (0, import_react50.useState)({});
+  const rows = (0, import_react50.useMemo)(() => {
     const result = [];
     const isOpen = (node) => {
       const explicit = collapsed[node.key];
@@ -11316,7 +11414,7 @@ function kindLabel(kind, t) {
 }
 
 // src/components/molecules/json-editor/useJsonEditorKeyboard.ts
-var import_react49 = require("react");
+var import_react51 = require("react");
 var PAIRS = { "{": "}", "[": "]", '"': '"' };
 var CLOSERS2 = /* @__PURE__ */ new Set(["}", "]", '"']);
 function useJsonEditorKeyboard({
@@ -11325,7 +11423,7 @@ function useJsonEditorKeyboard({
   readOnly = false,
   applyEdit
 }) {
-  return (0, import_react49.useCallback)(
+  return (0, import_react51.useCallback)(
     (event) => {
       const textarea = textareaRef.current;
       if (!textarea || readOnly) return;
@@ -11570,34 +11668,34 @@ function ITJSONEditor({
   errorLine
 }) {
   const { t, formatNumber } = useITTranslation();
-  const [viewMode, setViewMode] = (0, import_react50.useState)(mode ?? "text");
-  const [wrapLines, setWrapLines] = (0, import_react50.useState)(wrapLinesProp);
-  const [indentSize, setIndentSize] = (0, import_react50.useState)(Math.min(8, Math.max(0, indentSizeProp)));
-  const [withNumbers, setWithNumbers] = (0, import_react50.useState)(showLineNumbers);
-  const [withFolds, setWithFolds] = (0, import_react50.useState)(showFoldGutter);
-  const [copied, setCopied] = (0, import_react50.useState)(false);
-  const [foldedStarts, setFoldedStarts] = (0, import_react50.useState)([]);
-  const [caretLine, setCaretLine] = (0, import_react50.useState)(1);
-  const [lineHeight, setLineHeight] = (0, import_react50.useState)(21);
-  const [notice, setNotice] = (0, import_react50.useState)(null);
-  const canvasRef = (0, import_react50.useRef)(null);
-  const textareaRef = (0, import_react50.useRef)(null);
-  const highlightRef = (0, import_react50.useRef)(null);
-  const fileInputRef = (0, import_react50.useRef)(null);
-  const pendingSelection = (0, import_react50.useRef)(null);
-  const editorId = (0, import_react50.useId)();
-  (0, import_react50.useEffect)(() => {
+  const [viewMode, setViewMode] = (0, import_react52.useState)(mode ?? "text");
+  const [wrapLines, setWrapLines] = (0, import_react52.useState)(wrapLinesProp);
+  const [indentSize, setIndentSize] = (0, import_react52.useState)(Math.min(8, Math.max(0, indentSizeProp)));
+  const [withNumbers, setWithNumbers] = (0, import_react52.useState)(showLineNumbers);
+  const [withFolds, setWithFolds] = (0, import_react52.useState)(showFoldGutter);
+  const [copied, setCopied] = (0, import_react52.useState)(false);
+  const [foldedStarts, setFoldedStarts] = (0, import_react52.useState)([]);
+  const [caretLine, setCaretLine] = (0, import_react52.useState)(1);
+  const [lineHeight, setLineHeight] = (0, import_react52.useState)(21);
+  const [notice, setNotice] = (0, import_react52.useState)(null);
+  const canvasRef = (0, import_react52.useRef)(null);
+  const textareaRef = (0, import_react52.useRef)(null);
+  const highlightRef = (0, import_react52.useRef)(null);
+  const fileInputRef = (0, import_react52.useRef)(null);
+  const pendingSelection = (0, import_react52.useRef)(null);
+  const editorId = (0, import_react52.useId)();
+  (0, import_react52.useEffect)(() => {
     if (mode !== void 0) setViewMode(mode);
   }, [mode]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     setWrapLines(wrapLinesProp);
   }, [wrapLinesProp]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     setIndentSize(Math.min(8, Math.max(0, indentSizeProp)));
   }, [indentSizeProp]);
-  const analysis = (0, import_react50.useMemo)(() => analyzeCode(value), [value]);
-  const folds = (0, import_react50.useMemo)(() => findFoldRegions(value), [value]);
-  const validation = (0, import_react50.useMemo)(() => {
+  const analysis = (0, import_react52.useMemo)(() => analyzeCode(value), [value]);
+  const folds = (0, import_react52.useMemo)(() => findFoldRegions(value), [value]);
+  const validation = (0, import_react52.useMemo)(() => {
     if (!value.trim()) {
       return {
         isValid: true,
@@ -11615,37 +11713,37 @@ function ITJSONEditor({
       };
     }
   }, [value, analysis.lineStarts]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     onParse?.(validation.parsed, validation.isValid, validation.error?.message);
   }, [validation, onParse]);
-  const foldedRegions = (0, import_react50.useMemo)(() => {
+  const foldedRegions = (0, import_react52.useMemo)(() => {
     if (!foldedStarts.length || !folds.length) return [];
     return folds.filter((region) => foldedStarts.includes(region.startLine));
   }, [folds, foldedStarts]);
-  const hiddenLines = (0, import_react50.useMemo)(() => {
+  const hiddenLines = (0, import_react52.useMemo)(() => {
     const hidden = /* @__PURE__ */ new Set();
     for (const region of foldedRegions) {
       for (let line = region.startLine + 1; line <= region.endLine; line++) hidden.add(line);
     }
     return hidden;
   }, [foldedRegions]);
-  const closedByStart = (0, import_react50.useMemo)(() => {
+  const closedByStart = (0, import_react52.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const region of foldedRegions) map.set(region.startLine, region.endLine);
     return map;
   }, [foldedRegions]);
-  const visibleLines = (0, import_react50.useMemo)(
+  const visibleLines = (0, import_react52.useMemo)(
     () => analysis.lines.filter((line) => !hiddenLines.has(line.number)),
     [analysis.lines, hiddenLines]
   );
   const lineStarts = analysis.lineStarts;
-  const nodeCount = (0, import_react50.useMemo)(() => countNodes(validation.parsed), [validation.parsed]);
-  const maxDepth = (0, import_react50.useMemo)(
+  const nodeCount = (0, import_react52.useMemo)(() => countNodes(validation.parsed), [validation.parsed]);
+  const maxDepth = (0, import_react52.useMemo)(
     () => analysis.lines.reduce((deepest, line) => Math.max(deepest, line.depth), 0),
     [analysis.lines]
   );
-  const byteSize = (0, import_react50.useMemo)(() => new Blob([value]).size, [value]);
-  (0, import_react50.useEffect)(() => {
+  const byteSize = (0, import_react52.useMemo)(() => new Blob([value]).size, [value]);
+  (0, import_react52.useEffect)(() => {
     const measure = () => {
       const textarea = textareaRef.current;
       if (!textarea) return;
@@ -11667,14 +11765,14 @@ function ITJSONEditor({
   const contentHeight = visibleLines.length * lineHeight;
   const activeLine = validation.isValid ? caretLine : validation.error?.line ?? errorLine ?? caretLine;
   const treeValue = validation.isValid ? validation.parsed : void 0;
-  const restoreSelection = (0, import_react50.useCallback)(() => {
+  const restoreSelection = (0, import_react52.useCallback)(() => {
     const textarea = textareaRef.current;
     const pending = pendingSelection.current;
     if (!textarea || !pending) return;
     const max = textarea.value.length;
     textarea.setSelectionRange(Math.min(pending[0], max), Math.min(pending[1], max));
   }, []);
-  const consumePendingSelection = (0, import_react50.useCallback)(() => {
+  const consumePendingSelection = (0, import_react52.useCallback)(() => {
     if (!pendingSelection.current) return;
     const pending = pendingSelection.current;
     pendingSelection.current = null;
@@ -11686,10 +11784,10 @@ function ITJSONEditor({
       textarea.setSelectionRange(Math.min(pending[0], max), Math.min(pending[1], max));
     });
   }, [restoreSelection]);
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react52.useLayoutEffect)(() => {
     consumePendingSelection();
   });
-  const applyEdit = (0, import_react50.useCallback)(
+  const applyEdit = (0, import_react52.useCallback)(
     (result) => {
       pendingSelection.current = [result.selectionStart, result.selectionEnd];
       onChange?.(result.value);
@@ -11712,19 +11810,19 @@ function ITJSONEditor({
     readOnly,
     applyEdit
   });
-  const handleKeyDown = (0, import_react50.useCallback)(
+  const handleKeyDown = (0, import_react52.useCallback)(
     (event) => {
       pendingSelection.current = null;
       handleKeyDownRaw(event);
     },
     [handleKeyDownRaw]
   );
-  const syncCaret = (0, import_react50.useCallback)(() => {
+  const syncCaret = (0, import_react52.useCallback)(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
     setCaretLine(caretPosition(value, textarea.selectionStart, lineStarts).line);
   }, [value, lineStarts]);
-  const scrollCaretIntoView = (0, import_react50.useCallback)(() => {
+  const scrollCaretIntoView = (0, import_react52.useCallback)(() => {
     const textarea = textareaRef.current;
     if (!textarea || wrapLines) return;
     const { line } = caretPosition(value, textarea.selectionStart, lineStarts);
@@ -11736,11 +11834,11 @@ function ITJSONEditor({
       if (highlightRef.current) highlightRef.current.scrollTop = textarea.scrollTop;
     }
   }, [value, lineStarts, lineHeight, wrapLines]);
-  const flash = (0, import_react50.useCallback)((message) => {
+  const flash = (0, import_react52.useCallback)((message) => {
     setNotice(message);
     window.setTimeout(() => setNotice(null), 1800);
   }, []);
-  const applyTransform = (0, import_react50.useCallback)(
+  const applyTransform = (0, import_react52.useCallback)(
     (transform) => {
       if (!validation.isValid || validation.parsed === void 0) return;
       try {
@@ -11755,7 +11853,7 @@ function ITJSONEditor({
     },
     [validation, indentSize, value, onChange, flash, t]
   );
-  const handleTransformHotkeys = (0, import_react50.useCallback)(
+  const handleTransformHotkeys = (0, import_react52.useCallback)(
     (event) => {
       if (!(event.altKey && event.shiftKey)) return;
       const key = event.key.toLowerCase();
@@ -11794,7 +11892,7 @@ function ITJSONEditor({
     reader.onerror = () => flash(t("jsonEditor.fileError"));
     reader.readAsText(file);
   };
-  const jumpToLine = (0, import_react50.useCallback)(
+  const jumpToLine = (0, import_react52.useCallback)(
     (line) => {
       const textarea = textareaRef.current;
       if (!textarea) return;
@@ -12279,7 +12377,7 @@ function EditorToggle({
 }
 
 // src/json-renderer/kernel/SchemaRenderer.tsx
-var import_react53 = require("react");
+var import_react56 = require("react");
 
 // src/types/loader.types.ts
 var sizeClasses = {
@@ -12460,6 +12558,11 @@ var AXZY_CATALOG_ENTRIES = [
     summary: "Tarjeta con t\xEDtulo, imagen y contenido.",
     props: {
       title: { kind: "string" },
+      tone: {
+        kind: "enum",
+        values: ["primary", "secondary", "ternary", "success", "info", "warning", "danger"],
+        doc: "Tinte pastel de la tarjeta (token --color-<tone>-soft)."
+      },
       image: { kind: "string", doc: "URL de la imagen de cabecera." },
       alt: { kind: "string" },
       onClick: { kind: "action" },
@@ -12590,7 +12693,7 @@ var AXZY_CATALOG_ENTRIES = [
   },
   {
     type: "ITFlex",
-    component: ITFlex,
+    component: flex_default,
     children: true,
     summary: "Contenedor flex completo.",
     props: {
@@ -12723,52 +12826,6 @@ var AXZY_EXCLUDED_TYPES = {
 var axzyCatalog = createCatalog(AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES);
 var axzyCatalogTypes = Object.keys(axzyCatalog.entries);
 
-// src/json-renderer/shared/limits.ts
-var DEFAULT_LIMITS = {
-  maxNodes: 5e3,
-  maxDepth: 40,
-  maxMsPerChunk: 8,
-  actionTimeoutMs: 15e3,
-  maxEffectChain: 5
-};
-function resolveLimits(overrides = {}) {
-  const merged = { ...DEFAULT_LIMITS, ...overrides };
-  for (const [key, value] of Object.entries(merged)) {
-    if (!Number.isFinite(value) || value < 0) {
-      throw new RangeError(`L\xEDmite inv\xE1lido: ${key} = ${String(value)}`);
-    }
-  }
-  return merged;
-}
-function createLimitTracker(limits = DEFAULT_LIMITS) {
-  let nodes = 0;
-  let deepest = 0;
-  let exceeded = false;
-  return {
-    visit(depth) {
-      if (depth > deepest) deepest = depth;
-      if (nodes >= limits.maxNodes || depth > limits.maxDepth) {
-        exceeded = true;
-        return false;
-      }
-      nodes += 1;
-      return true;
-    },
-    get nodes() {
-      return nodes;
-    },
-    get deepest() {
-      return deepest;
-    },
-    get exceeded() {
-      return exceeded;
-    }
-  };
-}
-
-// src/json-renderer/kernel/NodeBoundary.tsx
-var import_react51 = __toESM(require("react"), 1);
-
 // src/json-renderer/shared/errors.ts
 var JsonEngineError = class extends Error {
   constructor(code, message, path, hint) {
@@ -12805,32 +12862,243 @@ function issue(code, message, path = "", options = {}) {
   };
 }
 
-// src/json-renderer/kernel/NodeBoundary.tsx
-var NodeBoundary = class extends import_react51.default.Component {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "state", { failed: false });
-  }
-  static getDerivedStateFromError() {
-    return { failed: true };
-  }
-  componentDidCatch(error) {
-    this.props.onError?.(error, this.props.path);
+// src/json-renderer/shared/paths.ts
+function pushPath(path, segment) {
+  return [...path, segment];
+}
+function formatPath(path) {
+  let out = "";
+  for (const segment of path) {
+    if (typeof segment === "number") out += `[${segment}]`;
+    else out += out ? `.${segment}` : segment;
   }
-  render() {
-    if (this.state.failed) return this.props.fallback ?? null;
-    return this.props.children;
+  return out;
+}
+function parsePath(rendered) {
+  if (!rendered) return [];
+  return rendered.split(/\.(?![^[]*])/).flatMap((part) => {
+    const match = part.match(/^([^[\]]*)((?:\[\d+\])*)$/);
+    if (!match) return [part];
+    const [, key, indexes] = match;
+    const segments = key ? [key] : [];
+    for (const index of indexes.match(/\d+/g) ?? []) segments.push(Number(index));
+    return segments;
+  });
+}
+function readPath(source, path) {
+  let cursor = source;
+  for (const segment of path) {
+    if (cursor === null || typeof cursor !== "object") return void 0;
+    cursor = cursor[segment];
   }
-};
+  return cursor;
+}
+function hasPath(source, path) {
+  if (path.length === 0) return true;
+  const parent = readPath(source, path.slice(0, -1));
+  if (parent === null || typeof parent !== "object") return false;
+  return Object.prototype.hasOwnProperty.call(parent, path[path.length - 1]);
+}
+function propPath(nodePath, prop) {
+  return pushPath(pushPath(nodePath, "props"), prop);
+}
 
-// src/json-renderer/stream/tolerantParse.ts
-function isPending(value) {
-  return typeof value === "object" && value !== null && value.$pending === true;
+// src/json-renderer/binding/resolveValue.ts
+var CLAVES_DE_RED = ["url", "endpoint", "href", "src"];
+var SUPPORTED_REFERENCES = ["$source", "$state", "$param"];
+function own(record, key) {
+  return record !== void 0 && Object.prototype.hasOwnProperty.call(record, key);
 }
-var TRUNCATED_CONTAINERS = /* @__PURE__ */ new WeakSet();
-function finalize(value, counter) {
-  if (Array.isArray(value)) {
-    return value.map((item) => finalize(item, counter)).filter((item) => item !== void 0);
+function isDollarReference(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  return Object.keys(value).some((key) => key.startsWith("$"));
+}
+function referenceIssue(message, path, hint) {
+  return issue("JR032", message, formatPath(path), { severity: "warning", hint });
+}
+function createBindingResolver(scope) {
+  const readValue = (table, kind, key, path) => {
+    if (own(table, key)) return table[key];
+    scope.report(
+      referenceIssue(
+        `La referencia \`${kind}: "${key}"\` no tiene valor.`,
+        path,
+        kind === "$state" ? "Declara el valor en `state` del esquema." : "El host debe pasar el par\xE1metro en `params`."
+      )
+    );
+    return void 0;
+  };
+  const resolveParams = (declared, path) => {
+    const resolved = {};
+    for (const [name, raw] of Object.entries(declared ?? {})) {
+      if (!isDollarReference(raw)) {
+        resolved[name] = raw;
+        continue;
+      }
+      const [key] = Object.keys(raw).filter((candidate) => candidate.startsWith("$"));
+      if (key === "$state" && typeof raw[key] === "string") {
+        const value = readValue(scope.state, "$state", raw[key], path);
+        if (value !== void 0) resolved[name] = value;
+      } else if (key === "$param" && typeof raw[key] === "string") {
+        const value = readValue(scope.params, "$param", raw[key], path);
+        if (value !== void 0) resolved[name] = value;
+      } else {
+        scope.report(
+          referenceIssue(
+            "Un par\xE1metro de fuente solo admite valores, `$state` o `$param`.",
+            path,
+            "Las fuentes no se encadenan: declara la fuente sin referencias a otras fuentes."
+          )
+        );
+      }
+    }
+    return resolved;
+  };
+  const failingLoader = (message, path, hint) => {
+    scope.report(issue("JR030", message, formatPath(path), { severity: "error", hint }));
+    return () => Promise.reject(new Error(message));
+  };
+  const sourceLoader = (name, path) => {
+    if (!own(scope.data, name)) {
+      return failingLoader(
+        `La fuente \`${name}\` no est\xE1 declarada en \`data\`.`,
+        path,
+        "Decl\xE1rala en `data` del esquema con el `handler` que registra el host."
+      );
+    }
+    const declared = scope.data[name];
+    const claveDeRed = Object.keys(declared).find((clave) => CLAVES_DE_RED.includes(clave));
+    if (claveDeRed) {
+      scope.report(
+        issue("JR031", `El esquema declara \`${claveDeRed}\` en la fuente "${name}": las fuentes no pueden pedir red.`, formatPath(path), {
+          severity: "error",
+          hint: "Una fuente solo nombra un `handler` que registra el host."
+        })
+      );
+      return () => Promise.reject(new Error(`La fuente "${name}" no puede pedir red.`));
+    }
+    const handler = own(scope.handlers, declared.handler) ? scope.handlers[declared.handler] : void 0;
+    if (typeof handler !== "function") {
+      return failingLoader(
+        `El handler \`${declared.handler}\` no est\xE1 registrado por el host.`,
+        path,
+        "El host debe registrarlo en `dataHandlers` del renderizador."
+      );
+    }
+    const params = resolveParams(declared.params, path);
+    return (query) => new Promise((resolve) => resolve(handler(query, params)));
+  };
+  const resolveReference = (ref, path) => {
+    const keys = Object.keys(ref).filter((key2) => key2.startsWith("$"));
+    const [key] = keys;
+    if (keys.length !== 1 || !SUPPORTED_REFERENCES.includes(key) || typeof ref[key] !== "string") {
+      scope.report(
+        referenceIssue(
+          `Referencia no soportada: ${keys.join(", ") || "sin operador"}.`,
+          path,
+          "Soportadas: `$source`, `$state` y `$param`. Los dem\xE1s operadores llegan con las acciones y las tablas."
+        )
+      );
+      return void 0;
+    }
+    const name = ref[key];
+    if (key === "$source") return sourceLoader(name, path);
+    if (key === "$state") return readValue(scope.state, "$state", name, path);
+    return readValue(scope.params, "$param", name, path);
+  };
+  return (value, path) => {
+    if (isDollarReference(value)) return resolveReference(value, path);
+    return scope.host ? scope.host(value, path) : value;
+  };
+}
+
+// src/json-renderer/shared/limits.ts
+var DEFAULT_LIMITS = {
+  maxNodes: 5e3,
+  maxDepth: 40,
+  maxMsPerChunk: 8,
+  actionTimeoutMs: 15e3,
+  maxEffectChain: 5
+};
+function resolveLimits(overrides = {}) {
+  const merged = { ...DEFAULT_LIMITS, ...overrides };
+  for (const [key, value] of Object.entries(merged)) {
+    if (!Number.isFinite(value) || value < 0) {
+      throw new RangeError(`L\xEDmite inv\xE1lido: ${key} = ${String(value)}`);
+    }
+  }
+  return merged;
+}
+function createLimitTracker(limits = DEFAULT_LIMITS) {
+  let nodes = 0;
+  let deepest = 0;
+  let exceeded = false;
+  return {
+    visit(depth) {
+      if (depth > deepest) deepest = depth;
+      if (nodes >= limits.maxNodes || depth > limits.maxDepth) {
+        exceeded = true;
+        return false;
+      }
+      nodes += 1;
+      return true;
+    },
+    get nodes() {
+      return nodes;
+    },
+    get deepest() {
+      return deepest;
+    },
+    get exceeded() {
+      return exceeded;
+    }
+  };
+}
+
+// src/json-renderer/kernel/capabilities.ts
+function capacidadesRequeridas(requires) {
+  if (requires === void 0 || requires === null) return [];
+  if (typeof requires === "string") return requires === "" ? null : [requires];
+  if (Array.isArray(requires) && requires.every((item) => typeof item === "string" && item !== "")) {
+    return requires;
+  }
+  return null;
+}
+function faltanCapacidades(requires, concedidas) {
+  const requeridas = capacidadesRequeridas(requires);
+  if (requeridas === null) return ["(requires no v\xE1lido)"];
+  if (requeridas.length === 0) return [];
+  const conjunto = new Set(concedidas ?? []);
+  return requeridas.filter((capacidad) => !conjunto.has(capacidad));
+}
+
+// src/json-renderer/kernel/NodeBoundary.tsx
+var import_react53 = __toESM(require("react"), 1);
+var NodeBoundary = class extends import_react53.default.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { failed: false });
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError?.(error, this.props.path);
+  }
+  render() {
+    if (this.state.failed) return this.props.fallback ?? null;
+    return this.props.children;
+  }
+};
+
+// src/json-renderer/stream/tolerantParse.ts
+function isPending(value) {
+  return typeof value === "object" && value !== null && value.$pending === true;
+}
+var TRUNCATED_CONTAINERS = /* @__PURE__ */ new WeakSet();
+function finalize(value, counter) {
+  if (Array.isArray(value)) {
+    return value.map((item) => finalize(item, counter)).filter((item) => item !== void 0);
   }
   if (value && typeof value === "object") {
     if (isPending(value)) {
@@ -13153,48 +13421,7 @@ function isNodePending(node) {
 }
 
 // src/json-renderer/kernel/renderNode.tsx
-var import_react52 = __toESM(require("react"), 1);
-
-// src/json-renderer/shared/paths.ts
-function pushPath(path, segment) {
-  return [...path, segment];
-}
-function formatPath(path) {
-  let out = "";
-  for (const segment of path) {
-    if (typeof segment === "number") out += `[${segment}]`;
-    else out += out ? `.${segment}` : segment;
-  }
-  return out;
-}
-function parsePath(rendered) {
-  if (!rendered) return [];
-  return rendered.split(/\.(?![^[]*])/).flatMap((part) => {
-    const match = part.match(/^([^[\]]*)((?:\[\d+\])*)$/);
-    if (!match) return [part];
-    const [, key, indexes] = match;
-    const segments = key ? [key] : [];
-    for (const index of indexes.match(/\d+/g) ?? []) segments.push(Number(index));
-    return segments;
-  });
-}
-function readPath(source, path) {
-  let cursor = source;
-  for (const segment of path) {
-    if (cursor === null || typeof cursor !== "object") return void 0;
-    cursor = cursor[segment];
-  }
-  return cursor;
-}
-function hasPath(source, path) {
-  if (path.length === 0) return true;
-  const parent = readPath(source, path.slice(0, -1));
-  if (parent === null || typeof parent !== "object") return false;
-  return Object.prototype.hasOwnProperty.call(parent, path[path.length - 1]);
-}
-function propPath(nodePath, prop) {
-  return pushPath(pushPath(nodePath, "props"), prop);
-}
+var import_react55 = __toESM(require("react"), 1);
 
 // src/json-renderer/catalog/resolve.ts
 function isSchemaReference(value) {
@@ -13335,11 +13562,457 @@ function resolveNode(node, catalog, path) {
   return { ok: true, entry, props, actions, issues };
 }
 
+// src/json-renderer/kernel/slots.ts
+var SLOT_TYPE = "slot";
+function isSlotNode(node) {
+  return node.type === SLOT_TYPE;
+}
+function slotName(node) {
+  const name = node.props?.name;
+  return typeof name === "string" && name !== "" ? name : void 0;
+}
+
+// src/json-renderer/form/FormNode.tsx
+var import_react54 = require("react");
+
+// src/json-renderer/form/rules.ts
+var FORM_FIELD_KINDS = ["text", "email"];
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function longitudDeclarada(value) {
+  return typeof value === "number" && Number.isInteger(value) && value >= 0 ? value : void 0;
+}
+function readFormFields(declared, fieldsPath) {
+  const issues = [];
+  const fields = [];
+  if (!Array.isArray(declared)) {
+    issues.push(issue("JR021", "El formulario necesita `props.fields` como lista.", formatPath(fieldsPath), { severity: "error" }));
+    return { fields, issues };
+  }
+  const nombres = /* @__PURE__ */ new Set();
+  declared.forEach((raw, index) => {
+    const fieldPath = [...fieldsPath, index];
+    const campo = raw;
+    if (!campo || typeof campo !== "object" || typeof campo.name !== "string" || campo.name === "") {
+      issues.push(issue("JR021", "Un campo del formulario no declara `name`.", formatPath(fieldPath), { severity: "error" }));
+      return;
+    }
+    if (nombres.has(campo.name)) {
+      issues.push(issue("JR021", `El campo "${campo.name}" se repite.`, formatPath(fieldPath), { severity: "error" }));
+      return;
+    }
+    let kind = "text";
+    if (campo.kind !== void 0) {
+      if (typeof campo.kind === "string" && FORM_FIELD_KINDS.includes(campo.kind)) {
+        kind = campo.kind;
+      } else {
+        issues.push(
+          issue("JR011", `Tipo de campo "${String(campo.kind)}" no admitido.`, formatPath(fieldPath), {
+            severity: "warning",
+            hint: `Admitidos: ${FORM_FIELD_KINDS.join(", ")}. Se usa "text".`
+          })
+        );
+      }
+    }
+    const minLength = longitudDeclarada(campo.minLength);
+    const maxLength = longitudDeclarada(campo.maxLength);
+    for (const [clave, valor, declarada] of [["minLength", campo.minLength, minLength], ["maxLength", campo.maxLength, maxLength]]) {
+      if (valor !== void 0 && declarada === void 0) {
+        issues.push(issue("JR011", `\`${clave}\` debe ser un entero no negativo.`, formatPath(fieldPath), { severity: "warning", hint: "Se ignora." }));
+      }
+    }
+    if (minLength !== void 0 && maxLength !== void 0 && minLength > maxLength) {
+      issues.push(issue("JR021", `El campo "${campo.name}" tiene minLength mayor que maxLength.`, formatPath(fieldPath), { severity: "error" }));
+      return;
+    }
+    nombres.add(campo.name);
+    fields.push({ name: campo.name, kind, required: campo.required === true, minLength, maxLength, label: campo.label });
+  });
+  return { fields, issues };
+}
+function validateField(field, value) {
+  const texto = value.trim();
+  if (texto === "") return field.required ? "required" : void 0;
+  if (field.minLength !== void 0 && texto.length < field.minLength) return "minLength";
+  if (field.maxLength !== void 0 && texto.length > field.maxLength) return "maxLength";
+  if (field.kind === "email" && !EMAIL.test(texto)) return "email";
+  return void 0;
+}
+function validateForm(fields, values) {
+  const errores = {};
+  for (const field of fields) {
+    const code = validateField(field, values[field.name] ?? "");
+    if (code) errores[field.name] = code;
+  }
+  return errores;
+}
+
+// src/json-renderer/form/FormNode.tsx
+var import_jsx_runtime75 = require("react/jsx-runtime");
+function valorDe(evento) {
+  if (typeof evento === "string") return evento;
+  return evento?.target?.value?.toString() ?? "";
+}
+function FormNode({ id, fields, submitLabel, onSubmit }) {
+  const { t } = useITTranslation();
+  const [values, setValues] = (0, import_react54.useState)({});
+  const [errors, setErrors] = (0, import_react54.useState)({});
+  const [intentado, setIntentado] = (0, import_react54.useState)(false);
+  const mensaje = (code, campo) => t(`jsonRenderer.form.${code}`, { min: String(campo.minLength ?? 0), max: String(campo.maxLength ?? 0) });
+  const enviar = () => {
+    const encontrados = validateForm(fields, values);
+    setIntentado(true);
+    setErrors(encontrados);
+    if (Object.keys(encontrados).length === 0) onSubmit?.(values);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { id, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(ITStack, { direction: "column", spacing: 3, alignItems: "stretch", children: [
+    fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      ITInput,
+      {
+        name: field.name,
+        label: field.label,
+        type: field.kind === "email" ? "email" : "text",
+        value: values[field.name] ?? "",
+        touched: intentado,
+        error: errors[field.name] ? mensaje(errors[field.name], field) : void 0,
+        onChange: (evento) => {
+          const valor = valorDe(evento);
+          setValues((previo) => ({ ...previo, [field.name]: valor }));
+          setErrors((previo) => {
+            if (!previo[field.name]) return previo;
+            const resto = { ...previo };
+            delete resto[field.name];
+            return resto;
+          });
+        }
+      },
+      field.name
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(flex_default, { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ITButton, { label: submitLabel ?? t("jsonRenderer.form.submit"), size: "sm", onClick: enviar }) })
+  ] }) });
+}
+
+// src/json-renderer/actions/effects.ts
+var MAX_EFFECT_DEPTH = 5;
+var EFFECT_KEYS = ["toast", "navigate", "refresh", "openOverlay", "closeOverlay", "set"];
+var EFFECT_KEYS_DEL_HOST = ["toast", "navigate", "refresh", "openOverlay", "closeOverlay"];
+function leerResultado(ruta, resultado) {
+  return ruta.split(".").reduce(
+    (actual, clave) => actual && typeof actual === "object" ? actual[clave] : void 0,
+    resultado
+  );
+}
+function resolverResultado(valor, resultado) {
+  if (!valor || typeof valor !== "object" || Array.isArray(valor)) return valor;
+  const objeto = valor;
+  if (typeof objeto.$result === "string") return leerResultado(objeto.$result, resultado) ?? "";
+  if (objeto.params && typeof objeto.params === "object") {
+    const params = Object.fromEntries(
+      Object.entries(objeto.params).map(([clave, valorParam]) => [
+        clave,
+        resolverResultado(valorParam, resultado)
+      ])
+    );
+    return { ...objeto, params };
+  }
+  return valor;
+}
+function plantilla(texto, resultado) {
+  return texto.replace(/\{([\w.]+)\}/g, (_, ruta) => {
+    const valor = leerResultado(ruta, resultado);
+    return valor === void 0 ? "" : String(valor);
+  });
+}
+function efectosSueltos(declarada) {
+  const sueltos = {};
+  for (const clave of EFFECT_KEYS) {
+    if (declarada[clave] !== void 0) sueltos[clave] = declarada[clave];
+  }
+  return Object.keys(sueltos).length > 0 ? sueltos : null;
+}
+function comprobarRegistro(efecto, context) {
+  for (const clave of EFFECT_KEYS_DEL_HOST) {
+    if (efecto[clave] === void 0) continue;
+    if (typeof context.effects?.[clave] !== "function") {
+      context.report(
+        issue("JR040", `El host no implementa el efecto \`${clave}\`.`, formatPath(context.path), {
+          severity: "warning",
+          hint: "Reg\xEDstralo en `effects` del renderizador o quita el efecto del esquema."
+        })
+      );
+    }
+  }
+}
+function cumplirEfecto(efecto, context, resultado) {
+  if (efecto.set && context.setState) {
+    const cambios = {};
+    for (const [clave, valor] of Object.entries(efecto.set)) {
+      const conResultado = resolverResultado(valor, resultado);
+      cambios[clave] = context.resolveRaw ? context.resolveRaw(conResultado, context.path) : conResultado;
+    }
+    context.setState(cambios);
+  }
+  const registro = context.effects;
+  if (!registro) return;
+  if (efecto.toast && registro.toast) {
+    registro.toast({
+      variant: efecto.toast.variant ?? "info",
+      message: context.resolveText(resolverResultado(efecto.toast.message, resultado), context.path)
+    });
+  }
+  if (typeof efecto.navigate === "string" && registro.navigate) {
+    registro.navigate(plantilla(efecto.navigate, resultado));
+  }
+  if (typeof efecto.refresh === "string" && registro.refresh) registro.refresh(efecto.refresh);
+  if (typeof efecto.openOverlay === "string" && registro.openOverlay) registro.openOverlay(efecto.openOverlay);
+  if (efecto.closeOverlay !== void 0 && registro.closeOverlay) {
+    registro.closeOverlay(typeof efecto.closeOverlay === "string" ? efecto.closeOverlay : void 0);
+  }
+}
+function pasosDe(efectos, context) {
+  const profundidad = context.depth ?? 0;
+  return efectos.map((efecto) => {
+    if (typeof efecto.action !== "string") {
+      comprobarRegistro(efecto, context);
+      return (resultado) => cumplirEfecto(efecto, context, resultado);
+    }
+    if (profundidad + 1 > MAX_EFFECT_DEPTH) {
+      context.report(
+        issue("JR042", `El encadenado de acciones supera ${MAX_EFFECT_DEPTH} niveles.`, formatPath(context.path), {
+          severity: "error",
+          hint: "Reduce los `then` anidados."
+        })
+      );
+      return () => void 0;
+    }
+    const handler = context.resolveChained?.(efecto.action);
+    if (!handler) {
+      context.report(
+        issue("JR040", `La acci\xF3n encadenada \`${efecto.action}\` no est\xE1 registrada por el host.`, formatPath(context.path), {
+          severity: "error",
+          hint: "Reg\xEDstrala en las acciones del renderizador o cambia el nombre en el esquema."
+        })
+      );
+      return () => void 0;
+    }
+    const encadenada = wrapAction(handler, efecto, { ...context, depth: profundidad + 1 });
+    return () => encadenada(efecto.args);
+  });
+}
+function wrapAction(handler, action, context) {
+  if (!action || typeof action !== "object") return handler;
+  const declarada = action;
+  const sueltos = efectosSueltos(declarada);
+  const alTerminar = [...sueltos ? [sueltos] : [], ...Array.isArray(declarada.then) ? declarada.then : []];
+  const alFallar = declarada.onError;
+  if (alTerminar.length === 0 && !alFallar) return handler;
+  const pasosOk = pasosDe(alTerminar, context);
+  const pasoError = alFallar ? pasosDe([alFallar], context)[0] : void 0;
+  const aplicar = (resultado) => pasosOk.forEach((paso) => paso(resultado));
+  return (...args) => {
+    let resultado;
+    try {
+      resultado = handler(...args);
+    } catch {
+      pasoError?.(void 0);
+      return void 0;
+    }
+    if (resultado && typeof resultado.then === "function") {
+      let resuelta = false;
+      const limite = context.timeoutMs;
+      const temporizador = limite !== void 0 && Number.isFinite(limite) ? setTimeout(() => {
+        if (resuelta) return;
+        resuelta = true;
+        context.reportRuntime?.(
+          issue("JR041", `La acci\xF3n excedi\xF3 ${limite} ms y se considera fallida.`, formatPath(context.path), {
+            severity: "error",
+            hint: "El host debe responder o rechazar la acci\xF3n a tiempo."
+          })
+        );
+        pasoError?.(void 0);
+      }, limite) : void 0;
+      resultado.then(
+        (valor) => {
+          if (resuelta) return;
+          resuelta = true;
+          clearTimeout(temporizador);
+          aplicar(valor);
+        },
+        () => {
+          if (resuelta) return;
+          resuelta = true;
+          clearTimeout(temporizador);
+          pasoError?.(void 0);
+        }
+      );
+      return resultado;
+    }
+    aplicar(resultado);
+    return resultado;
+  };
+}
+
 // src/json-renderer/kernel/renderNode.tsx
+function effectContext(options, path, node) {
+  return {
+    effects: options.effects,
+    path,
+    resolveText: (value, valuePath) => textoDe(options.resolveValue ? options.resolveValue(value, valuePath) : value),
+    report: (aviso) => options.issues.push(aviso),
+    // Una acción encadenada desde un efecto se resuelve con el mismo `resolveAction` del host.
+    resolveChained: (name) => options.resolveAction?.(node, "chain", { action: name }, path),
+    timeoutMs: options.actionTimeoutMs,
+    reportRuntime: options.onIssue,
+    setState: options.setState,
+    resolveRaw: (value, valuePath) => options.resolveValue ? options.resolveValue(value, valuePath) : value
+  };
+}
+function nombreDeAccion(action) {
+  const nombre = action?.action;
+  return typeof nombre === "string" ? nombre : "(sin nombre)";
+}
+function isFormNode(node) {
+  return node.type === "form";
+}
+function textoDe(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
+}
 function childList(node) {
   if (!node || node.children === void 0 || node.children === null) return [];
   return Array.isArray(node.children) ? node.children : [node.children];
 }
+function renderSlot(node, options) {
+  const { path, issues, slots, resolveValue } = options;
+  const name = slotName(node);
+  if (!name) {
+    issues.push(
+      issue("JR011", "El slot no declara `props.name`.", formatPath(propPath(path, "name")), {
+        severity: "error",
+        hint: 'Declara el nombre que el host registr\xF3, por ejemplo { "type": "slot", "props": { "name": "resumen" } }.'
+      })
+    );
+    return null;
+  }
+  const Component = slots && Object.prototype.hasOwnProperty.call(slots, name) ? slots[name] : void 0;
+  if (!Component) {
+    issues.push(
+      issue("JR010", `El slot \`${name}\` no est\xE1 registrado por el host.`, formatPath(path), {
+        severity: "error",
+        hint: "El host debe registrarlo en `slots` del renderizador."
+      })
+    );
+    return null;
+  }
+  const props = {};
+  for (const [key, raw] of Object.entries(node.props ?? {})) {
+    if (key === "name") continue;
+    props[key] = resolveValue ? resolveValue(raw, path) : raw;
+  }
+  return import_react55.default.createElement(Component, { key: node.id ?? path.join("-"), ...props });
+}
+function renderForm(node, options) {
+  const { path, issues, resolveValue, resolveAction } = options;
+  const { fields: declarados, issues: avisos } = readFormFields(node.props?.fields, [...path, "props", "fields"]);
+  issues.push(...avisos);
+  const campos = declarados.map((campo, index) => {
+    const etiqueta = resolveValue ? resolveValue(campo.label, [...path, "props", "fields", index]) : campo.label;
+    return {
+      name: campo.name,
+      kind: campo.kind,
+      required: campo.required,
+      minLength: campo.minLength,
+      maxLength: campo.maxLength,
+      label: textoDe(etiqueta) || campo.name
+    };
+  });
+  const textoEnvio = node.props?.submitLabel;
+  const submitLabel = textoDe(resolveValue ? resolveValue(textoEnvio, path) : textoEnvio) || void 0;
+  const accion = resolveAction?.(node, "onSubmit", node.props?.onSubmit, path);
+  if (node.props?.onSubmit !== void 0 && typeof accion !== "function") {
+    issues.push(
+      issue("JR040", `La acci\xF3n "${nombreDeAccion(node.props.onSubmit)}" no est\xE1 registrada por el host.`, formatPath(propPath(path, "onSubmit")), {
+        severity: "warning",
+        hint: "Reg\xEDstrala en `resolveAction` del host. Sin ella, enviar el formulario no hace nada."
+      })
+    );
+  }
+  const conEfectos = accion ? wrapAction(accion, node.props?.onSubmit, effectContext(options, path, node)) : void 0;
+  return import_react55.default.createElement(FormNode, {
+    key: node.id ?? path.join("-"),
+    id: node.id,
+    fields: campos,
+    submitLabel,
+    onSubmit: conEfectos ? (valores) => conEfectos(valores) : void 0
+  });
+}
+function prepararColumnas(columnas, node, options, path) {
+  if (!Array.isArray(columnas)) return columnas;
+  return columnas.map((columna, indice) => {
+    if (!columna || typeof columna !== "object") return columna;
+    const declarada = columna;
+    if (declarada.type !== "actions" || !Array.isArray(declarada.rowActions)) return columna;
+    const colPath = [...path, "props", "columns", indice];
+    const botones = declarada.rowActions.flatMap((raw, indiceAccion) => {
+      const accion = raw;
+      const rutaAccion = [...colPath, "rowActions", indiceAccion];
+      if (!accion || typeof accion.action !== "string" || accion.action === "") {
+        options.issues.push(issue("JR021", "Un bot\xF3n de fila no declara `action`.", formatPath(rutaAccion), { severity: "error" }));
+        return [];
+      }
+      const faltan = faltanCapacidades(accion.requires, options.capabilities);
+      if (faltan.length > 0) {
+        options.issues.push(
+          issue("JR061", `El bot\xF3n de fila "${accion.action}" exige ${faltan.join(", ")}, que no est\xE1 concedido.`, formatPath(rutaAccion), {
+            severity: "warning",
+            hint: "Concede la capacidad con la prop `capabilities` del renderizador."
+          })
+        );
+        return [];
+      }
+      const handler = options.resolveAction?.(node, `fila:${accion.action}`, accion, rutaAccion);
+      if (typeof handler !== "function") {
+        options.issues.push(
+          issue("JR040", `La acci\xF3n de fila "${accion.action}" no est\xE1 registrada por el host.`, formatPath(rutaAccion), {
+            severity: "warning",
+            hint: "Reg\xEDstrala en `resolveAction` del host, o quita el bot\xF3n del esquema."
+          })
+        );
+        return [];
+      }
+      const etiqueta = textoDe(options.resolveValue ? options.resolveValue(accion.label, rutaAccion) : accion.label);
+      return [
+        {
+          clave: String(indiceAccion),
+          etiqueta: etiqueta || accion.action,
+          color: typeof accion.color === "string" ? accion.color : "secondary",
+          variante: typeof accion.variant === "string" ? accion.variant : "outlined",
+          ejecutar: wrapAction(handler, accion, effectContext(options, rutaAccion, node))
+        }
+      ];
+    });
+    const copia = { ...declarada };
+    delete copia.rowActions;
+    const etiquetaColumna = textoDe(options.resolveValue ? options.resolveValue(copia.label, colPath) : copia.label);
+    const Boton = ITButton;
+    return {
+      ...copia,
+      label: etiquetaColumna || String(copia.key ?? ""),
+      actions: (fila) => import_react55.default.createElement(
+        import_react55.default.Fragment,
+        null,
+        botones.map(
+          (boton) => import_react55.default.createElement(Boton, {
+            key: boton.clave,
+            label: boton.etiqueta,
+            size: "sm",
+            variant: boton.variante,
+            color: boton.color,
+            onClick: () => boton.ejecutar(fila)
+          })
+        )
+      )
+    };
+  });
+}
 function renderNode(node, options) {
   const { catalog, path, issues, renderChildren } = options;
   if (!node || typeof node !== "object") {
@@ -13348,6 +14021,12 @@ function renderNode(node, options) {
   if (isNodePending(node)) {
     return options.pendingFallback ?? null;
   }
+  if (isSlotNode(node)) {
+    return renderSlot(node, options);
+  }
+  if (isFormNode(node)) {
+    return renderForm(node, options);
+  }
   const resolved = resolveNode(node, catalog, path);
   issues.push(...resolved.issues);
   if (!resolved.ok) {
@@ -13358,15 +14037,37 @@ function renderNode(node, options) {
   for (const [name, value] of Object.entries(props)) {
     finalProps[name] = options.resolveValue ? options.resolveValue(value, path) : value;
   }
+  if (node.type === "ITDataTable" && finalProps.columns !== void 0) {
+    finalProps.columns = prepararColumnas(finalProps.columns, node, options, path);
+  }
   for (const [name, action] of Object.entries(actions)) {
+    const faltan = faltanCapacidades(action?.requires, options.capabilities);
+    if (faltan.length > 0) {
+      issues.push(
+        issue("JR061", `La acci\xF3n "${nombreDeAccion(action)}" exige ${faltan.join(", ")}, que no est\xE1 concedido.`, formatPath(propPath(path, name)), {
+          severity: "warning",
+          hint: "Concede la capacidad con la prop `capabilities` del renderizador. Sin ella, la acci\xF3n no se ejecuta."
+        })
+      );
+      continue;
+    }
     const handler = options.resolveAction?.(node, name, action, path);
-    if (typeof handler === "function") finalProps[name] = handler;
+    if (typeof handler === "function") {
+      finalProps[name] = wrapAction(handler, action, effectContext(options, path, node));
+    } else {
+      issues.push(
+        issue("JR040", `La acci\xF3n "${nombreDeAccion(action)}" no est\xE1 registrada por el host.`, formatPath(propPath(path, name)), {
+          severity: "warning",
+          hint: "Reg\xEDstrala en `resolveAction` del host, o quita la prop del esquema."
+        })
+      );
+    }
   }
   const content = renderChildren ? renderChildren(node, path) : null;
   const rawText = entry.text && node.text !== void 0 ? node.text : void 0;
   const text = rawText === void 0 ? void 0 : options.resolveValue ? options.resolveValue(rawText, path) : rawText;
   const children = content ?? text;
-  const element = import_react52.default.createElement(
+  const element = import_react55.default.createElement(
     entry.component,
     { ...finalProps, key: node.id ?? path.join("-"), id: node.id },
     children
@@ -13422,7 +14123,7 @@ function countPendingNodes(schema) {
 }
 
 // src/json-renderer/kernel/SchemaRenderer.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 function renderTree(node, path, context, level) {
   if (!node || typeof node !== "object") return null;
   if (level > context.limits.maxDepth) return null;
@@ -13432,6 +14133,16 @@ function renderTree(node, path, context, level) {
     issues.push(issue2);
     context.onIssue?.(issue2);
   };
+  const faltan = faltanCapacidades(node.requires, context.capabilities);
+  if (faltan.length > 0) {
+    reportIssue(
+      issue("JR060", `Falta la capacidad ${faltan.join(", ")} para pintar \`${node.type}\`.`, formatPath(path), {
+        severity: "warning",
+        hint: "El host debe conceder la capacidad con la prop `capabilities`, o el nodo debe declarar un `fallback`."
+      })
+    );
+    return node.fallback ? renderTree(node.fallback, [...path, "fallback"], context, level + 1) : null;
+  }
   const issuesBefore = issues.length;
   const element = renderNode(node, {
     catalog: context.catalog,
@@ -13440,6 +14151,12 @@ function renderTree(node, path, context, level) {
     resolveValue: context.resolveValue,
     resolveAction: context.resolveAction,
     pendingFallback: context.pendingFallback,
+    slots: context.slots,
+    effects: context.effects,
+    actionTimeoutMs: context.limits.actionTimeoutMs,
+    onIssue: context.onIssue,
+    setState: context.setState,
+    capabilities: context.capabilities,
     renderChildren: (current, currentPath) => {
       const children = childList(current);
       if (children.length === 0) return void 0;
@@ -13452,7 +14169,7 @@ function renderTree(node, path, context, level) {
     context.onIssue?.(issues[index]);
   }
   const fallback = node.fallback ? renderTree(node.fallback, [...path, "fallback"], context, level + 1) : context.pendingFallback ?? null;
-  const wrapped = /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  const wrapped = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     NodeBoundary,
     {
       path: path.join("."),
@@ -13474,43 +14191,84 @@ function ITSchemaRenderer({
   schema,
   catalog = axzyCatalog,
   limits,
+  params,
+  dataHandlers,
+  slots,
+  effects,
+  capabilities,
   resolveValue,
   resolveAction,
   pendingFallback,
   onIssue,
   className
 }) {
-  const resolvedLimits = (0, import_react53.useMemo)(() => resolveLimits(limits), [limits]);
+  const resolvedLimits = (0, import_react56.useMemo)(() => resolveLimits(limits), [limits]);
+  const [escrito, setEscrito] = (0, import_react56.useState)({
+    origen: schema,
+    valores: {}
+  });
+  const valoresPantalla = (0, import_react56.useMemo)(
+    () => ({ ...schema?.state ?? {}, ...escrito.origen === schema ? escrito.valores : {} }),
+    [schema, escrito]
+  );
+  const escribirEstado = (0, import_react56.useCallback)(
+    (cambios) => setEscrito((previo) => ({
+      origen: schema,
+      valores: { ...previo.origen === schema ? previo.valores : {}, ...cambios }
+    })),
+    [schema]
+  );
   const issues = [];
   const nodeIds = /* @__PURE__ */ new Set();
-  const audit = (0, import_react53.useMemo)(
+  const audit = (0, import_react56.useMemo)(
     () => schema ? auditTree(schema, resolvedLimits) : null,
     [schema, resolvedLimits]
   );
-  const context = (0, import_react53.useMemo)(
+  const context = (0, import_react56.useMemo)(
     () => ({
       catalog,
       nodeIds,
       limits: resolvedLimits,
       issues,
       onIssue,
-      resolveValue,
+      // El binding escribe sus avisos (JR030, JR032) en el mismo array que el resto del render.
+      resolveValue: createBindingResolver({
+        data: schema?.data,
+        state: valoresPantalla,
+        params,
+        handlers: dataHandlers,
+        report: (aviso) => issues.push(aviso),
+        host: resolveValue
+      }),
       resolveAction,
-      pendingFallback
+      pendingFallback,
+      slots,
+      effects,
+      capabilities,
+      setState: escribirEstado
     }),
     // `issues` es un array nuevo en cada render a propósito: acumular avisos
     // entre renders duplicaría los avisos de esquemas que no han cambiado.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [catalog, resolvedLimits, onIssue, resolveValue, resolveAction, pendingFallback]
+    [schema, params, valoresPantalla, escribirEstado, dataHandlers, slots, effects, capabilities, catalog, resolvedLimits, onIssue, resolveValue, resolveAction, pendingFallback]
   );
-  const content = schema ? (Array.isArray(schema.content) ? schema.content : [schema.content]).filter(
+  const faltanRaiz = schema ? faltanCapacidades(schema.requires, capabilities) : [];
+  if (faltanRaiz.length > 0) {
+    issues.push(
+      issue("JR060", `Falta la capacidad ${faltanRaiz.join(", ")} para esta pantalla.`, "requires", {
+        severity: "error",
+        hint: "Concede la capacidad con la prop `capabilities` del renderizador."
+      })
+    );
+  }
+  const content = schema && faltanRaiz.length === 0 ? (Array.isArray(schema.content) ? schema.content : [schema.content]).filter(
     (node) => Boolean(node) && typeof node === "object"
   ) : [];
   const children = content.slice(0, resolvedLimits.maxNodes).map((node, index) => renderTree(node, ["content", index], context, 0)).filter(Boolean);
   const collected = [...audit?.issues ?? [], ...issues];
   const signature = collected.map((issue2) => `${issue2.code}:${issue2.path}`).join("|");
-  const reported = (0, import_react53.useRef)("");
-  (0, import_react53.useEffect)(() => {
+  const reported = (0, import_react56.useRef)("");
+  (0, import_react56.useEffect)(() => {
     const all = [...collected];
     for (const id of nodeIds) {
       if (!document.getElementById(id)) {
@@ -13529,7 +14287,159 @@ function ITSchemaRenderer({
     for (const issue2 of all) onIssue(issue2);
   }, [signature, onIssue]);
   if (!schema || children.length === 0) return null;
-  return className ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className, children }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children });
+  return className ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className, children }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children });
+}
+
+// src/json-renderer/routing/routes.ts
+function joinRoutePath(parent, own2) {
+  return [parent, typeof own2 === "string" ? own2 : ""].flatMap((part) => part.split("/")).filter((segment) => segment !== "").join("/");
+}
+var SEGMENT = /^(:[A-Za-z][A-Za-z0-9_]*|[A-Za-z0-9_.-]+)$/;
+function validateRoutes(input) {
+  const errors = [];
+  const document2 = input;
+  if (!document2 || typeof document2 !== "object" || Array.isArray(document2)) {
+    return [issue("JR020", "El documento de rutas debe ser un objeto.", "", { severity: "error" })];
+  }
+  if (typeof document2.version !== "number") {
+    errors.push(issue("JR020", "El documento de rutas no declara `version`.", "version", { severity: "error" }));
+  }
+  if (!Array.isArray(document2.routes)) {
+    errors.push(issue("JR020", "`routes` debe ser una lista.", "routes", { severity: "error" }));
+    return errors;
+  }
+  const seen = /* @__PURE__ */ new Map();
+  const visit = (route, path, parentPath, isRoot) => {
+    if (!route || typeof route !== "object") {
+      errors.push(issue("JR021", "La ruta no es un objeto.", path, { severity: "error" }));
+      return;
+    }
+    if (typeof route.id !== "string" || route.id === "") {
+      errors.push(issue("JR021", "La ruta no declara `id`.", path, { severity: "error" }));
+    }
+    if (route.path !== void 0 && route.path !== "") {
+      const parts = typeof route.path === "string" ? route.path.split("/").filter(Boolean) : [];
+      if (typeof route.path !== "string" || parts.some((segment) => !SEGMENT.test(segment))) {
+        errors.push(issue("JR021", `El path "${String(route.path)}" no es v\xE1lido.`, `${path}.path`, { severity: "error", hint: "Usa segmentos con letras, d\xEDgitos, guiones o `:param`." }));
+      }
+    }
+    const full = joinRoutePath(parentPath, route.path);
+    if (isRoot && full === "") {
+      errors.push(issue("JR021", "Una ruta ra\xEDz necesita `path`.", `${path}.path`, { severity: "error" }));
+    }
+    if (route.children !== void 0) {
+      if (route.page !== void 0) {
+        errors.push(issue("JR020", "Un grupo no lleva `page`: la pantalla va en sus hijos.", path, { severity: "error" }));
+      }
+      if (!Array.isArray(route.children)) {
+        errors.push(issue("JR020", "`children` debe ser una lista.", `${path}.children`, { severity: "error" }));
+      } else {
+        route.children.forEach((child, index) => visit(child, `${path}.children[${index}]`, full, false));
+      }
+    } else {
+      if (typeof route.page !== "string" || route.page === "") {
+        errors.push(issue("JR020", "La ruta no declara `page`.", path, { severity: "error" }));
+      }
+      const key = `${full}?${JSON.stringify(Object.entries(route.query ?? {}).sort())}`;
+      if (seen.has(key)) {
+        errors.push(issue("JR020", `La ruta "${full || "/"}" se repite con la misma query (ya est\xE1 en ${seen.get(key)}).`, path, { severity: "error" }));
+      } else {
+        seen.set(key, path);
+      }
+    }
+    const nav = route.nav;
+    if (nav !== void 0 && (typeof nav !== "object" || nav === null || nav.label === void 0 || nav.label === null)) {
+      errors.push(issue("JR021", "La entrada de men\xFA no declara `label`.", `${path}.nav`, { severity: "error" }));
+    }
+  };
+  document2.routes.forEach((route, index) => visit(route, `routes[${index}]`, "", true));
+  return errors;
+}
+function flattenRoutes(routes) {
+  const flat = [];
+  const visit = (route, parentPath, groups) => {
+    const full = joinRoutePath(parentPath, route.path);
+    if (route.children) {
+      route.children.forEach((child) => visit(child, full, [...groups, route.id]));
+      return;
+    }
+    if (typeof route.page !== "string") return;
+    flat.push({
+      id: route.id,
+      segments: full === "" ? [] : full.split("/"),
+      page: route.page,
+      query: route.query ?? {},
+      nav: route.nav,
+      groups
+    });
+  };
+  routes.forEach((route) => visit(route, "", []));
+  return flat;
+}
+
+// src/json-renderer/routing/match.ts
+function matchRoute(routes, segments, query = {}) {
+  let best = null;
+  let bestStatics = -1;
+  let bestConstraints = -1;
+  for (const route of routes) {
+    if (route.segments.length !== segments.length) continue;
+    const params = {};
+    let statics = 0;
+    let samePath = true;
+    route.segments.forEach((expected, index) => {
+      if (!samePath) return;
+      if (expected.startsWith(":")) {
+        params[expected.slice(1)] = segments[index];
+        return;
+      }
+      statics += 1;
+      samePath = expected === segments[index];
+    });
+    if (!samePath) continue;
+    const constraints = Object.entries(route.query);
+    if (!constraints.every(([key, value]) => query[key] === value)) continue;
+    if (statics > bestStatics || statics === bestStatics && constraints.length > bestConstraints) {
+      best = { route, params };
+      bestStatics = statics;
+      bestConstraints = constraints.length;
+    }
+  }
+  return best;
+}
+function routeHref(route, params = {}) {
+  const path = route.segments.map((segment) => segment.startsWith(":") ? params[segment.slice(1)] ?? segment : segment).join("/");
+  const queryString = Object.entries(route.query).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&");
+  return `/${path}${queryString ? `?${queryString}` : ""}`;
+}
+
+// src/json-renderer/routing/navigation.ts
+function buildNavigationTree(routes) {
+  const hrefs = new Map(flattenRoutes(routes).map((route) => [route.id, routeHref(route)]));
+  const visit = (route, parentPath) => {
+    const full = joinRoutePath(parentPath, route.path);
+    if (route.children) {
+      const children = route.children.flatMap((child) => visit(child, full));
+      if (!route.nav) return children;
+      return [toNode(route.id, route.nav, children, children.find((child) => child.href)?.href)];
+    }
+    if (!route.nav) return [];
+    return [toNode(route.id, route.nav, void 0, hrefs.get(route.id))];
+  };
+  return routes.flatMap((route) => visit(route, ""));
+}
+function toNode(id, nav, children, href) {
+  return {
+    id,
+    label: nav.label,
+    icon: nav.icon,
+    badge: nav.badge,
+    href,
+    ...children ? { children } : {}
+  };
+}
+function navContainsRoute(entry, routeId) {
+  return entry.id === routeId || (entry.children?.some((child) => navContainsRoute(child, routeId)) ?? false);
 }
 
 // src/json-renderer/validation/validate.ts
@@ -13540,6 +14450,17 @@ function validateNodes(node, path, catalog, errors, warnings) {
     return 0;
   }
   if (isNodePending(node)) return 1;
+  if (node.type === "form") {
+    const { issues: avisos } = readFormFields(node.props?.fields, [...path, "props", "fields"]);
+    for (const item of avisos) (item.severity === "error" ? errors : warnings).push(item);
+    return 0;
+  }
+  if (isSlotNode(node)) {
+    if (!slotName(node)) {
+      errors.push(issue("JR011", "El slot no declara `props.name`.", formatPath([...path, "props", "name"]), { severity: "error" }));
+    }
+    return 0;
+  }
   const resolved = resolveNode(node, catalog, path);
   for (const item of resolved.issues) {
     (item.severity === "error" ? errors : warnings).push(item);
@@ -13722,8 +14643,143 @@ function formatVocabularyForPrompt(contract) {
   return lines.join("\n");
 }
 
+// src/json-renderer/stream/useSchemaStream.ts
+var import_react57 = require("react");
+var VACIO = {
+  tree: null,
+  status: "complete",
+  broken: false,
+  pendingNodes: 0,
+  streaming: false,
+  text: "",
+  issues: []
+};
+var grabaciones = /* @__PURE__ */ new WeakMap();
+function esAsyncIterable(value) {
+  return value !== null && typeof value === "object" && typeof value[Symbol.asyncIterator] === "function";
+}
+async function* desdeReadable(readable) {
+  const reader = readable.getReader();
+  try {
+    for (; ; ) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    await reader.cancel().catch(() => void 0);
+  }
+}
+function mensajeDe(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function crearGrabacion(source) {
+  const iterador = typeof source === "string" ? null : esAsyncIterable(source) ? source[Symbol.asyncIterator]() : desdeReadable(source)[Symbol.asyncIterator]();
+  return {
+    texto: typeof source === "string" ? source : "",
+    iterador,
+    terminado: typeof source === "string",
+    error: null,
+    avisos: [],
+    activos: 0,
+    ultimoValido: null,
+    cerrada: false,
+    cancelada: false
+  };
+}
+function estadoDe(grab, streaming) {
+  const parcial = parsePartialSchema(grab.texto);
+  if (!parcial.broken && parcial.tree) grab.ultimoValido = parcial.tree;
+  return {
+    tree: parcial.broken ? grab.ultimoValido : parcial.tree,
+    status: parcial.status,
+    broken: parcial.broken,
+    pendingNodes: parcial.pendingNodes,
+    streaming,
+    text: grab.texto,
+    issues: [...grab.avisos]
+  };
+}
+function cerrarGrabacion(grab) {
+  if (grab.cerrada || grab.cancelada) return;
+  grab.cerrada = true;
+  if (grab.error !== null) {
+    grab.avisos.push(issue("JR080", `El stream fall\xF3: ${grab.error}. Se conserva el \xFAltimo \xE1rbol v\xE1lido.`, "", { severity: "error" }));
+    return;
+  }
+  const parcial = parsePartialSchema(grab.texto);
+  if (parcial.broken || parcial.status !== "complete") {
+    grab.avisos.push(
+      issue("JR080", "El stream termin\xF3 con el JSON sin cerrar. Se conserva el \xFAltimo \xE1rbol v\xE1lido.", "", {
+        severity: "warning",
+        hint: "Revisa que el emisor cierre todas las llaves y corchetes."
+      })
+    );
+  }
+}
+async function consumir(grab, cancelado, onTrozo) {
+  while (!grab.terminado && grab.iterador) {
+    let paso;
+    try {
+      paso = await grab.iterador.next();
+    } catch (error) {
+      grab.error = mensajeDe(error);
+      grab.terminado = true;
+      break;
+    }
+    if (paso.done) {
+      grab.terminado = true;
+      break;
+    }
+    grab.texto += String(paso.value);
+    if (!cancelado()) onTrozo();
+    if (cancelado()) return;
+  }
+  if (grab.terminado) cerrarGrabacion(grab);
+}
+function useSchemaStream(source) {
+  const [estado, setEstado] = (0, import_react57.useState)(VACIO);
+  (0, import_react57.useEffect)(() => {
+    if (source === null || source === void 0) {
+      setEstado(VACIO);
+      return;
+    }
+    let registro;
+    if (typeof source === "string") {
+      registro = crearGrabacion(source);
+    } else {
+      const existente = grabaciones.get(source);
+      registro = existente ?? crearGrabacion(source);
+      if (!existente) grabaciones.set(source, registro);
+    }
+    registro.activos += 1;
+    let cancelado = false;
+    const proceso = consumir(
+      registro,
+      () => cancelado,
+      () => setEstado(estadoDe(registro, true))
+    );
+    setEstado(estadoDe(registro, !registro.terminado));
+    void proceso.then(() => {
+      if (!cancelado) setEstado(estadoDe(registro, false));
+    });
+    return () => {
+      cancelado = true;
+      registro.activos -= 1;
+      setTimeout(() => {
+        if (registro.activos === 0 && !registro.terminado && registro.iterador) {
+          registro.terminado = true;
+          registro.cancelada = true;
+          void registro.iterador.return?.(void 0);
+        }
+      }, 0);
+    };
+  }, [source]);
+  return estado;
+}
+
 // src/components/organisms/dropfile/dropfile.tsx
-var import_react54 = require("react");
+var import_react58 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_clsx54 = __toESM(require("clsx"), 1);
 
@@ -13753,11 +14809,12 @@ var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
 })(UploadStatus || {});
 
 // src/components/organisms/dropfile/dropfile.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var ITDropfile = ({
   onFileSelect,
   onCancel,
   onSubmit,
+  autoUpload = false,
   contentClassName,
   containerClassName,
   acceptedFileTypes = ["application/pdf" /* PDF */, "application/vnd.ms-excel" /* XLS */, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /* XLSX */, "image/jpg" /* JPG */, "image/png" /* PNG */, "image/jpeg" /* JPEG */],
@@ -13770,15 +14827,15 @@ var ITDropfile = ({
   modalTitle
 }) => {
   const { t } = useITTranslation();
-  const [isModalOpen, setIsModalOpen] = (0, import_react54.useState)(false);
-  const [selectedFile, setSelectedFile] = (0, import_react54.useState)(null);
-  const [fileType, setFileType] = (0, import_react54.useState)(null);
-  const [imagePreview, setImagePreview] = (0, import_react54.useState)(initialPreviewUrl || null);
-  const [isConfirmed, setIsConfirmed] = (0, import_react54.useState)(false);
-  const [internalUploadStatus, setInternalUploadStatus] = (0, import_react54.useState)(
+  const [isModalOpen, setIsModalOpen] = (0, import_react58.useState)(false);
+  const [selectedFile, setSelectedFile] = (0, import_react58.useState)(null);
+  const [fileType, setFileType] = (0, import_react58.useState)(null);
+  const [imagePreview, setImagePreview] = (0, import_react58.useState)(initialPreviewUrl || null);
+  const [isConfirmed, setIsConfirmed] = (0, import_react58.useState)(false);
+  const [internalUploadStatus, setInternalUploadStatus] = (0, import_react58.useState)(
     initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
   );
-  (0, import_react54.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (initialPreviewUrl && !selectedFile) {
       setImagePreview(initialPreviewUrl);
       if (externalStatus === void 0) setInternalUploadStatus("subido" /* UPLOADED */);
@@ -13893,11 +14950,23 @@ var ITDropfile = ({
       }
     };
     const { label, color, dotColor } = config2[status];
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { as: "span", className: "text-xs font-medium flex items-center gap-1.5", children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "span", className: "text-xs font-medium flex items-center gap-1.5", children: label })
     ] });
   };
+  const runAutoUpload = async (file) => {
+    setIsConfirmed(true);
+    setUploadStatus("subiendo" /* UPLOADING */);
+    try {
+      onFileSelect(file);
+      await onSubmit?.(file);
+      setUploadStatus("subido" /* UPLOADED */);
+    } catch (error) {
+      setUploadStatus("error" /* ERROR */);
+      console.error("Error al subir archivo:", error);
+    }
+  };
   const onDrop = (acceptedFiles) => {
     const file = acceptedFiles[0];
     if (file) {
@@ -13913,6 +14982,7 @@ var ITDropfile = ({
           const previewUrl = URL.createObjectURL(file);
           setImagePreview(previewUrl);
         }
+        if (autoUpload) void runAutoUpload(file);
       } else {
         alert(t("dropfile.fileTypeNotAllowed"));
         setSelectedFile(null);
@@ -13927,12 +14997,12 @@ var ITDropfile = ({
     accept: getAcceptedFileTypes(),
     maxFiles: 1
   });
-  (0, import_react54.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const renderPDF = async () => {
     };
     renderPDF();
   }, [selectedFile, fileType]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     return () => {
       if (imagePreview) {
         URL.revokeObjectURL(imagePreview);
@@ -13969,7 +15039,7 @@ var ITDropfile = ({
   const handleDelete = () => {
     handleCancel();
   };
-  (0, import_react54.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (view === "button" && isConfirmed && uploadStatus === "subido" /* UPLOADED */) {
       const timeout = setTimeout(() => {
         setIsModalOpen(false);
@@ -13986,21 +15056,21 @@ var ITDropfile = ({
       return () => clearTimeout(timeout);
     }
   }, [view, isConfirmed, uploadStatus, externalStatus, onStatusChange]);
-  const headerRow = /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("label", { className: "block text-sm font-semibold text-secondary-700", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(ITText, { as: "span", children: [
+  const headerRow = /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { className: "block text-sm font-semibold text-secondary-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(ITText, { as: "span", children: [
         t("dropfile.upload"),
         " "
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(ITText, { as: "span", className: "text-secondary-400 font-normal text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(ITText, { as: "span", className: "text-secondary-400 font-normal text-xs", children: [
         "(",
         getFileExtensions(),
         ")"
       ] })
     ] }),
-    showStatusBadge && selectedFile && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(StatusBadge, { status: uploadStatus })
+    showStatusBadge && selectedFile && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(StatusBadge, { status: uploadStatus })
   ] });
-  const dropZoneOrPreview = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  const dropZoneOrPreview = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
     "div",
     {
       ...getRootProps(),
@@ -14010,41 +15080,41 @@ var ITDropfile = ({
             ${isDragActive ? "border-primary-500 bg-primary-50 scale-[1.01]" : "border-secondary-300 bg-white hover:border-primary-400 hover:bg-secondary-50"}
           `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("input", { ...getInputProps() }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-secondary-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("input", { ...getInputProps() }),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-secondary-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "svg",
           {
             className: `w-6 h-6 transition-colors duration-300 ${isDragActive ? "text-primary-600" : "text-secondary-400 group-hover:text-primary-500"}`,
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "text-center space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { as: "p", className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-secondary-700"}`, children: isDragActive ? t("dropfile.dropHere") : t("dropfile.clickOrDrag") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "text-center space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "p", className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-secondary-700"}`, children: isDragActive ? t("dropfile.dropHere") : t("dropfile.clickOrDrag") }) })
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { as: "p", className: "text-xs font-medium text-secondary-900 truncate", title: selectedFile?.name || t("dropfile.imageLoaded"), children: selectedFile?.name || t("dropfile.imageLoaded") }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
+  ) : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "p", className: "text-xs font-medium text-secondary-900 truncate", title: selectedFile?.name || t("dropfile.imageLoaded"), children: selectedFile?.name || t("dropfile.imageLoaded") }),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: (0, import_clsx54.default)("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: (0, import_clsx54.default)("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       "img",
       {
         src: imagePreview,
         alt: t("dropfile.previewAlt"),
         className: "w-full h-full object-contain max-h-[200px]"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "py-8 flex flex-col items-center text-secondary-400", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { as: "span", className: "text-xs", children: t("dropfile.noPreview") })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "py-8 flex flex-col items-center text-secondary-400", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "span", className: "text-xs", children: t("dropfile.noPreview") })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         ITButton,
         {
           type: "button",
@@ -14052,10 +15122,10 @@ var ITDropfile = ({
           color: "secondary",
           size: "sm",
           onClick: handleCancel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { children: t("common.cancel") })
+          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { children: t("common.cancel") })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         ITButton,
         {
           type: "button",
@@ -14063,13 +15133,13 @@ var ITDropfile = ({
           color: "primary",
           size: "sm",
           onClick: handleConfirm,
-          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { children: t("common.confirm") }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { children: t("common.confirm") }),
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
           ] })
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
       ITButton,
       {
         type: "button",
@@ -14078,12 +15148,12 @@ var ITDropfile = ({
         size: "sm",
         onClick: handleDelete,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { children: t("common.delete") })
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { children: t("common.delete") })
         ]
       }
     ) }),
-    uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "w-full bg-secondary-200 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "w-full bg-secondary-200 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       "div",
       {
         className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
@@ -14096,8 +15166,8 @@ var ITDropfile = ({
   ] }) });
   if (view === "button") {
     const hasFile = Boolean(selectedFile || imagePreview);
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: (0, import_clsx54.default)("inline-block", containerClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_clsx54.default)("inline-block", containerClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         ITButton,
         {
           type: "button",
@@ -14105,20 +15175,20 @@ var ITDropfile = ({
           color: hasFile ? "primary" : "secondary",
           size: "sm",
           onClick: () => setIsModalOpen(true),
-          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center gap-2 max-w-[220px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITText, { className: "truncate", children: selectedFile?.name || (hasFile ? t("dropfile.fileLoaded") : buttonLabel ?? t("dropfile.upload")) }),
-            showStatusBadge && hasFile && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(StatusBadge, { status: uploadStatus })
+          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2 max-w-[220px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { className: "truncate", children: selectedFile?.name || (hasFile ? t("dropfile.fileLoaded") : buttonLabel ?? t("dropfile.upload")) }),
+            showStatusBadge && hasFile && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(StatusBadge, { status: uploadStatus })
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ITDialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: modalTitle ?? buttonLabel ?? t("dropfile.upload"), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "w-full transition-all duration-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITDialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: modalTitle ?? buttonLabel ?? t("dropfile.upload"), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "w-full transition-all duration-300", children: [
         headerRow,
         dropZoneOrPreview
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: (0, import_clsx54.default)("w-full transition-all duration-300", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_clsx54.default)("w-full transition-all duration-300", containerClassName), children: [
     headerRow,
     dropZoneOrPreview
   ] });
@@ -14126,13 +15196,13 @@ var ITDropfile = ({
 var dropfile_default = ITDropfile;
 
 // src/components/templates/layout/layout.tsx
-var import_react56 = require("react");
+var import_react60 = require("react");
 var import_clsx55 = __toESM(require("clsx"), 1);
 
 // src/components/organisms/topbar/topbar.tsx
 var import_fa32 = require("react-icons/fa");
-var import_react55 = require("react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_react59 = require("react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 function ITTopBar({
   logo,
   logoText,
@@ -14146,41 +15216,46 @@ function ITTopBar({
   hideBrandOnDesktop = false,
   showDesktopMenuButton = false
 }) {
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const initials = (userMenu?.userName ?? "").trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
-  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react55.useState)(false);
-  const userMenuRef = (0, import_react55.useRef)(null);
+  const userRestBg = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent";
+  const userHoverBg = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
+  const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react59.useState)(false);
+  const userMenuRef = (0, import_react59.useRef)(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "header",
     {
       className: `sticky top-0 z-40 transition-all duration-300 ${flat ? "" : "backdrop-blur-md"}`,
       style: {
-        backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
+        backgroundColor: bento ? "var(--it-layout-bg, #f4f4f6)" : "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: bento ? "none" : "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
         boxShadow: flat ? "none" : "var(--shadow-xs)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-5", children: [
-          showMobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-5", children: [
+          showMobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "button",
             {
               type: "button",
               "aria-label": t("common.menu"),
-              className: `${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`,
+              className: `${showDesktopMenuButton ? "" : "lg:hidden"} ${bento ? "w-10 h-10 flex items-center justify-center rounded-full" : "p-2.5 -ml-2.5 rounded-xl"} transition-colors duration-200`,
               style: {
-                color: "var(--it-topbar-icon, #64748b)"
+                color: bento ? "var(--it-bento-control-text, #475569)" : "var(--it-topbar-icon, #64748b)",
+                backgroundColor: bento ? "var(--it-bento-control-bg, #f1f5f9)" : void 0
               },
-              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)",
-              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)",
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent",
               onClick: onToggleMobileMenu,
-              children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_fa32.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_fa32.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: `items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`, children: [
-            logo && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
-            logoText && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`, children: [
+            logo && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
+            logoText && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               ITText,
               {
                 as: "span",
@@ -14190,57 +15265,70 @@ function ITTopBar({
               }
             )
           ] }),
-          navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-            "button",
+          navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            "nav",
             {
-              onClick: () => onNavItemClick?.(item.id),
-              className: "px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]",
-              style: { color: "var(--it-topbar-text, #475569)" },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.color = "var(--it-topbar-text, #0f172a)";
-                e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.color = "var(--it-topbar-text, #475569)";
-                e.currentTarget.style.backgroundColor = "transparent";
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2", children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "opacity-70", children: item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "span", children: item.label })
-              ] })
-            },
-            item.id
-          )) })
+              className: bento ? "hidden md:flex ml-4 gap-2" : "hidden md:flex ml-8 space-x-1 border-l pl-8",
+              style: bento ? void 0 : { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" },
+              children: navItems.map((item) => {
+                const restBg = bento ? item.isActive ? "var(--it-bento-ink-bg, #0f172a)" : "var(--it-bento-control-bg, #f1f5f9)" : item.isActive ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent";
+                const restColor = bento ? item.isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)" : "var(--it-topbar-text, #475569)";
+                return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                  "button",
+                  {
+                    onClick: () => onNavItemClick?.(item.id),
+                    "aria-current": item.isActive ? "page" : void 0,
+                    className: `px-4 py-2 ${bento ? "rounded-full" : "rounded-lg"} font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]`,
+                    style: { color: restColor, backgroundColor: restBg },
+                    onMouseEnter: (e) => {
+                      if (bento && item.isActive) return;
+                      e.currentTarget.style.color = bento ? "var(--it-bento-control-text, #0f172a)" : "var(--it-topbar-text, #0f172a)";
+                      e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.color = restColor;
+                      e.currentTarget.style.backgroundColor = restBg;
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "opacity-70", children: item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ITText, { as: "span", children: item.label })
+                    ] })
+                  },
+                  item.id
+                );
+              })
+            }
+          )
         ] }),
-        centerContent && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
-        (children || userMenu) && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2", children: [
+        centerContent && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
+        (children || userMenu) && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
           children,
-          userMenu && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+          userMenu && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
               "button",
               {
                 type: "button",
-                className: `flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200 ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`,
+                className: `flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent ${bento ? "" : "hover:border-secondary-200"} ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`,
                 style: {
-                  backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent"
+                  backgroundColor: isUserMenuOpen ? userHoverBg : userRestBg
                 },
                 onMouseEnter: (e) => {
-                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userHoverBg;
                 },
                 onMouseLeave: (e) => {
-                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userRestBg;
                 },
                 onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "relative", children: [
-                    userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "relative", children: [
+                    userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                       "img",
                       {
                         className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
                         src: userMenu.userImage,
                         alt: t("common.userAvatar")
                       }
-                    ) : flat && initials ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+                    ) : flat && initials ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -14251,11 +15339,11 @@ function ITTopBar({
                         },
                         children: initials
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_fa32.FaUserCircle, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
-                    !flat && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_fa32.FaUserCircle, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
+                    !flat && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: `hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                       ITText,
                       {
                         as: "span",
@@ -14264,7 +15352,7 @@ function ITTopBar({
                         children: userMenu.userName
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                       ITText,
                       {
                         as: "span",
@@ -14277,7 +15365,7 @@ function ITTopBar({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
               "div",
               {
                 ref: userMenuRef,
@@ -14290,15 +15378,15 @@ function ITTopBar({
                   border: "1px solid var(--it-topbar-user-dropdown-border, #f1f5f9)"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "px-5 py-4 border-b", style: { borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
-                    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "span", className: "block text-xs font-medium truncate mt-0.5", style: { color: "var(--it-topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "px-5 py-4 border-b", style: { borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ITText, { as: "span", className: "block text-xs font-medium truncate mt-0.5", style: { color: "var(--it-topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
                     const isDestructive = m.label.toLowerCase().includes("salir") || m.label.toLowerCase().includes("cerrar") || m.label.toLowerCase().includes("logout");
-                    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("li", { className: "px-2", children: [
-                      i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("li", { className: "px-2", children: [
+                      i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                         "button",
                         {
                           onClick: () => {
@@ -14313,7 +15401,7 @@ function ITTopBar({
                           onMouseLeave: (e) => {
                             e.currentTarget.style.backgroundColor = "transparent";
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ITText, { as: "span", children: m.label })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ITText, { as: "span", children: m.label })
                         }
                       )
                     ] }, i);
@@ -14329,7 +15417,7 @@ function ITTopBar({
 }
 
 // src/components/templates/layout/layout.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 function ITLayout({
   topBar,
   sidebar,
@@ -14338,9 +15426,9 @@ function ITLayout({
   contentClassName = "",
   sidebarFullHeight = false
 }) {
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react56.useState)(true);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react56.useState)(false);
-  const flat = useITFlatAppearance();
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react60.useState)(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react60.useState)(false);
+  const flat = useITAppearance() !== "soft";
   const isControlled = sidebar.isCollapsed !== void 0;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
   const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
@@ -14353,7 +15441,7 @@ function ITLayout({
     else setMobileSidebarOpen((v) => !v);
   };
   const brand = sidebarFullHeight ? sidebar.brand ?? { logo: topBar.logo, text: topBar.logoText } : sidebar.brand;
-  const topBarNode = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  const topBarNode = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     ITTopBar,
     {
       ...topBar,
@@ -14366,9 +15454,9 @@ function ITLayout({
   const desktopSidebar = (
     // Full-height: the sidebar sits beside the top bar, so it needs to win the
     // stacking order when the collapsed rail expands over the content on hover.
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `${reservedWidth} h-full flex-shrink-0` }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: `hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: `${reservedWidth} h-full flex-shrink-0` }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         ITSidebar,
         {
           ...sidebar,
@@ -14381,17 +15469,17 @@ function ITLayout({
       ) })
     ] })
   );
-  const mobileSidebar = mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  const mobileSidebar = mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
       onClick: () => setMobileSidebarOpen(false),
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "div",
         {
           className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
           onClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
             ITSidebar,
             {
               ...sidebar,
@@ -14408,16 +15496,16 @@ function ITLayout({
       )
     }
   );
-  const main = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_clsx55.default)("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) });
+  const main = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_clsx55.default)("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) });
   if (sidebarFullHeight) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       "div",
       {
         className: `flex h-screen overflow-hidden w-full relative ${className}`,
         style: { backgroundColor: layoutTokens.backgroundColor },
         children: [
           desktopSidebar,
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 overflow-hidden", children: [
             topBarNode,
             main
           ] }),
@@ -14426,9 +15514,9 @@ function ITLayout({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
     topBarNode,
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       "div",
       {
         className: "flex flex-1 overflow-hidden relative",
@@ -14445,9 +15533,9 @@ function ITLayout({
 
 // src/components/molecules/stepper/stepper.tsx
 var import_clsx56 = __toESM(require("clsx"), 1);
-var import_react57 = require("react");
+var import_react61 = require("react");
 var import_fa33 = require("react-icons/fa");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 function ITStepper({
   steps,
   currentStep,
@@ -14463,15 +15551,15 @@ function ITStepper({
   color = "primary"
 }) {
   const { t } = useITTranslation();
-  const [direction, setDirection] = (0, import_react57.useState)("next");
-  const contentRef = (0, import_react57.useRef)(null);
-  const progressRef = (0, import_react57.useRef)(null);
+  const [direction, setDirection] = (0, import_react61.useState)("next");
+  const contentRef = (0, import_react61.useRef)(null);
+  const progressRef = (0, import_react61.useRef)(null);
   const isThemeColor = color in theme.colors;
   const resolvedColor = isThemeColor ? theme.colors[color][500] : color;
-  (0, import_react57.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     onStepChange?.(currentStep);
   }, [currentStep, onStepChange]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const pct = currentStep / Math.max(1, steps.length - 1) * 100;
     if (progressRef.current) {
       progressRef.current.style.width = `${pct}%`;
@@ -14515,23 +15603,23 @@ function ITStepper({
   const renderStepContent = (index, isCompleted) => {
     const step = steps[index];
     if (isCompleted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_fa33.FaCheck, { className: "w-4 h-4" });
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_fa33.FaCheck, { className: "w-4 h-4" });
     }
     if (step.icon && useIcons) {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ITText, { as: "span", className: "text-sm font-semibold", children: index + 1 });
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", className: "text-sm font-semibold", children: index + 1 });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: (0, import_clsx56.default)("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "relative mb-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: (0, import_clsx56.default)("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "relative mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         "div",
         {
           className: "absolute left-6 right-6 top-5 h-1 bg-secondary-200 rounded-full z-0",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         "div",
         {
           ref: progressRef,
@@ -14539,11 +15627,11 @@ function ITStepper({
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
         const isActive = idx === currentStep;
         const isCompleted = idx < currentStep;
         const hasIcon = step.icon && useIcons;
-        return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           "button",
           {
             type: "button",
@@ -14553,8 +15641,8 @@ function ITStepper({
             "aria-label": t("stepper.stepAria", { n: idx + 1, label: step.label }),
             className: "flex-1 group",
             title: step.label,
-            children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 "div",
                 {
                   className: (0, import_clsx56.default)(
@@ -14568,7 +15656,7 @@ function ITStepper({
                   children: renderStepContent(idx, isCompleted)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 ITText,
                 {
                   as: "span",
@@ -14586,7 +15674,7 @@ function ITStepper({
         );
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       "div",
       {
         ref: contentRef,
@@ -14602,32 +15690,32 @@ function ITStepper({
         children: steps[currentStep].content
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex justify-between items-center mt-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex justify-between items-center mt-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         ITButton,
         {
           variant: "outlined",
           color: "secondary",
           disabled: currentStep === 0,
           onClick: prevStep,
-          children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_fa33.FaChevronLeft, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ITText, { as: "span", children: t("common.back") })
+          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_fa33.FaChevronLeft, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", children: t("common.back") })
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ITText, { as: "div", className: "text-sm text-secondary-500 mr-2 hidden sm:block", children: t("stepper.stepOf", { current: currentStep + 1, total: steps.length }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "div", className: "text-sm text-secondary-500 mr-2 hidden sm:block", children: t("stepper.stepOf", { current: currentStep + 1, total: steps.length }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           ITButton,
           {
             variant: "solid",
             color,
             disabled: disableNext,
             onClick: nextStep,
-            children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ITText, { as: "span", children: currentStep === steps.length - 1 ? t("common.finish") : t("common.next") }),
-              currentStep === steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_fa33.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_fa33.FaChevronRight, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", children: currentStep === steps.length - 1 ? t("common.finish") : t("common.next") }),
+              currentStep === steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_fa33.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_fa33.FaChevronRight, {})
             ] })
           }
         )
@@ -14637,7 +15725,7 @@ function ITStepper({
 }
 
 // src/components/theme-provider/themeProvider.tsx
-var import_react58 = require("react");
+var import_react62 = require("react");
 var import_md3 = require("react-icons/md");
 
 // src/components/theme-provider/themePresets.ts
@@ -14815,7 +15903,7 @@ var PRESETS = [
 ];
 
 // src/components/theme-provider/themeProvider.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var STORAGE_KEY = "it-theme-palette";
 var SHADOW_LEVELS = {
   0: {
@@ -14918,7 +16006,7 @@ function ITThemeProvider({
   appearance = "soft"
 }) {
   const { t } = useITTranslation();
-  const [palette2, setPaletteState] = (0, import_react58.useState)(() => {
+  const [palette2, setPaletteState] = (0, import_react62.useState)(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
       ...theme2,
@@ -14944,8 +16032,8 @@ function ITThemeProvider({
     }
     return basePalette;
   });
-  const [isOpen, setIsOpen] = (0, import_react58.useState)(false);
-  const [customPresets, setCustomPresets] = (0, import_react58.useState)(() => {
+  const [isOpen, setIsOpen] = (0, import_react62.useState)(false);
+  const [customPresets, setCustomPresets] = (0, import_react62.useState)(() => {
     try {
       const saved = localStorage.getItem("it-theme-custom-presets");
       return saved ? JSON.parse(saved) : [];
@@ -14954,8 +16042,8 @@ function ITThemeProvider({
       return [];
     }
   });
-  const [newPresetName, setNewPresetName] = (0, import_react58.useState)("");
-  const [isSavingPreset, setIsSavingPreset] = (0, import_react58.useState)(false);
+  const [newPresetName, setNewPresetName] = (0, import_react62.useState)("");
+  const [isSavingPreset, setIsSavingPreset] = (0, import_react62.useState)(false);
   const handleSavePreset = () => {
     if (!newPresetName.trim()) return;
     const newPreset = {
@@ -14974,8 +16062,8 @@ function ITThemeProvider({
     setCustomPresets(updated);
     localStorage.setItem("it-theme-custom-presets", JSON.stringify(updated));
   };
-  const [resolvedTheme, setResolvedTheme] = (0, import_react58.useState)("light");
-  const [darkModeMode, setDarkModeMode] = (0, import_react58.useState)(
+  const [resolvedTheme, setResolvedTheme] = (0, import_react62.useState)("light");
+  const [darkModeMode, setDarkModeMode] = (0, import_react62.useState)(
     () => {
       const saved = localStorage.getItem("it-theme-dark-mode");
       if (saved === "light" || saved === "dark" || saved === "system") {
@@ -14984,7 +16072,7 @@ function ITThemeProvider({
       return "system";
     }
   );
-  (0, import_react58.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     localStorage.setItem("it-theme-dark-mode", darkModeMode);
     const applyDarkMode = (isDark) => {
       if (isDark) {
@@ -15009,7 +16097,7 @@ function ITThemeProvider({
       applyDarkMode(darkModeMode === "dark");
     }
   }, [darkModeMode]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (!showFab) {
       setPaletteState({
         ...DEFAULT_PALETTE,
@@ -15019,7 +16107,7 @@ function ITThemeProvider({
       });
     }
   }, [theme2, showFab]);
-  (0, import_react58.useLayoutEffect)(() => {
+  (0, import_react62.useLayoutEffect)(() => {
     const root = document.documentElement;
     const scale = typeof density === "number" && isFinite(density) ? Math.min(Math.max(density, 0.5), 1.5) : 1;
     root.style.setProperty("--it-density", String(scale));
@@ -15029,12 +16117,12 @@ function ITThemeProvider({
       root.style.fontSize = "";
     };
   }, [density]);
-  (0, import_react58.useLayoutEffect)(() => {
+  (0, import_react62.useLayoutEffect)(() => {
     const root = document.documentElement;
     root.setAttribute("data-it-appearance", appearance);
     return () => root.removeAttribute("data-it-appearance");
   }, [appearance]);
-  (0, import_react58.useLayoutEffect)(() => {
+  (0, import_react62.useLayoutEffect)(() => {
     const root = document.documentElement;
     const radiusTokens = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
     if (typeof radius === "number" && isFinite(radius)) {
@@ -15066,7 +16154,33 @@ function ITThemeProvider({
       surfaceStyle?.remove();
     };
   }, [radius, shadow]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react62.useLayoutEffect)(() => {
+    const STYLE_ID = "it-theme-bento-tokens";
+    let tag = document.getElementById(STYLE_ID);
+    if (appearance !== "bento") {
+      tag?.remove();
+      return;
+    }
+    if (!tag) {
+      tag = document.createElement("style");
+      tag.id = STYLE_ID;
+      document.head.appendChild(tag);
+    }
+    const hasRadius = typeof radius === "number" && isFinite(radius);
+    const hasShadow = shadowLevel(shadow) !== null;
+    const shapeLight = hasRadius ? "" : "--it-bento-card-radius:24px;--it-bento-pill-radius:9999px;--it-bento-field-radius:1rem;--it-input-radius:var(--it-bento-pill-radius);";
+    const shadowLight = hasShadow ? "" : "--it-bento-card-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -16px rgba(16,24,40,.10);--it-bento-card-shadow-hover:0 1px 2px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.18);";
+    const shadowDark = hasShadow ? "" : "--it-bento-card-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.55);--it-bento-card-shadow-hover:0 1px 2px rgba(0,0,0,.5),0 18px 40px -16px rgba(0,0,0,.7);";
+    const navTokens = "--it-sidebar-active-bg:var(--it-bento-nav-active-bg);--it-sidebar-active-color:var(--it-bento-nav-active-text);--it-sidebar-active-icon:var(--it-bento-nav-active-text);";
+    const light = "--it-layout-bg:#f4f4f6;--it-card-bg:#ffffff;--it-bento-card-padding:1.5rem;--it-input-bg:#f1f5f9;--it-input-border:transparent;--it-input-focus-ring:0 0 0 2px color-mix(in srgb,var(--color-primary) 50%,transparent);--it-bento-control-bg:#f1f5f9;--it-bento-control-bg-hover:#e2e8f0;--it-bento-control-text:#475569;--it-bento-ink-bg:#0f172a;--it-bento-ink-text:#ffffff;--it-bento-nav-active-bg:#f1f5f9;--it-bento-nav-active-text:#0f172a;" + navTokens;
+    const dark = "--it-layout-bg:#020617;--it-card-bg:#0f172a;--it-input-bg:#1e293b;--it-input-border:transparent;--it-bento-control-bg:#1e293b;--it-bento-control-bg-hover:#334155;--it-bento-control-text:#cbd5e1;--it-bento-ink-bg:#ffffff;--it-bento-ink-text:#0f172a;--it-bento-nav-active-bg:#1e293b;--it-bento-nav-active-text:#ffffff;" + navTokens;
+    const A = '[data-it-appearance="bento"]';
+    tag.textContent = `:root${A}{${light}${shapeLight}${shadowLight}}:root${A}.dark,:root${A} .dark,:root${A} [data-theme="dark"]{${dark}${shadowDark}}:root${A} [data-theme="light"]{${light}${shadowLight}}`;
+    return () => {
+      tag?.remove();
+    };
+  }, [appearance, radius, shadow]);
+  (0, import_react62.useEffect)(() => {
     const injectStyles = (obj, prefix = "") => {
       Object.entries(obj).forEach(([key, val]) => {
         if (typeof val === "object" && val !== null) {
@@ -16220,14 +17334,14 @@ function ITThemeProvider({
     const isNested = colorKey.includes(".");
     const label = isNested ? colorKey.split(".")[1] : colorKey;
     const value = getNestedValue3(palette2, colorKey);
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       "div",
       {
         className: "flex items-center justify-between p-3 rounded-xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900/50 gap-3 hover:border-slate-200 dark:hover:border-slate-700 transition-colors",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "relative w-10 h-10 rounded-xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden cursor-pointer flex-shrink-0 shadow-sm hover:scale-105 transition-transform", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative w-10 h-10 rounded-xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden cursor-pointer flex-shrink-0 shadow-sm hover:scale-105 transition-transform", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 "input",
                 {
                   type: "color",
@@ -16236,23 +17350,23 @@ function ITThemeProvider({
                   className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "w-full h-full", style: { backgroundColor: value } })
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "w-full h-full", style: { backgroundColor: value } })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", className: "text-xs font-bold text-slate-700 dark:text-slate-300 truncate capitalize", children: label.replace(/([A-Z])/g, " $1").trim() }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITText, { as: "span", className: "text-xs font-bold text-slate-700 dark:text-slate-300 truncate capitalize", children: label.replace(/([A-Z])/g, " $1").trim() }),
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   "span",
                   {
                     className: "w-3 h-3 rounded-full border border-slate-200 dark:border-slate-600",
                     style: { backgroundColor: value }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", className: "font-mono text-[11px] text-slate-400", children: value })
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITText, { as: "span", className: "font-mono text-[11px] text-slate-400", children: value })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             "input",
             {
               type: "text",
@@ -16271,14 +17385,14 @@ function ITThemeProvider({
     isCustom
   }) => {
     const isSelected = JSON.stringify(preset.colors) === JSON.stringify(palette2);
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => applyPreset(preset.colors),
         className: `relative flex flex-col items-start p-2.5 rounded-xl border text-left transition-all group ${isSelected ? "border-primary-500 bg-primary-500/5 shadow-sm ring-1 ring-primary-500/20" : "border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50 hover:border-slate-300 dark:hover:border-slate-600"}`,
         children: [
-          isCustom && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          isCustom && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             "span",
             {
               onClick: (e) => {
@@ -16287,11 +17401,11 @@ function ITThemeProvider({
               },
               className: "absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-danger-500/10 hover:text-danger-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10",
               title: t("themeProvider.designer.deletePreset"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_md3.MdClose, { size: 12 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_md3.MdClose, { size: 12 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", className: "text-xs font-semibold truncate w-full mb-1.5 pr-4 text-slate-700 dark:text-slate-300", children: PRESET_I18N_KEY[preset.name] ? t(PRESET_I18N_KEY[preset.name]) : preset.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex gap-1", children: ["primary", "secondary", "ternary", "success"].map((c) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITText, { as: "span", className: "text-xs font-semibold truncate w-full mb-1.5 pr-4 text-slate-700 dark:text-slate-300", children: PRESET_I18N_KEY[preset.name] ? t(PRESET_I18N_KEY[preset.name]) : preset.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex gap-1", children: ["primary", "secondary", "ternary", "success"].map((c) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             "span",
             {
               className: "w-3 h-3 rounded-full border border-black/10",
@@ -16303,7 +17417,7 @@ function ITThemeProvider({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
     ITThemeContext.Provider,
     {
       value: {
@@ -16320,28 +17434,28 @@ function ITThemeProvider({
       },
       children: [
         children,
-        showFab && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        showFab && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "button",
           {
             onClick: () => setIsOpen((prev) => !prev),
             className: "it-theme-fab it-theme-bounce",
             style: { backgroundColor: "var(--color-primary)" },
             "aria-label": t("themeProvider.fab.ariaLabel"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_md3.MdPalette, { size: 28 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_md3.MdPalette, { size: 28 })
           }
         ),
-        showFab && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        showFab && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           ITDialog,
           {
             isOpen,
             onClose: () => setIsOpen(false),
             title: t("themeProvider.designer.title"),
             useFormHeader: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex gap-6 h-[580px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-64 flex-shrink-0 flex flex-col gap-5 overflow-y-auto pr-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.appearance") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex gap-6 h-[580px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "w-64 flex-shrink-0 flex flex-col gap-5 overflow-y-auto pr-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.appearance") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                     ITSegmentedControl,
                     {
                       options: [
@@ -16355,16 +17469,16 @@ function ITThemeProvider({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex items-center justify-between mb-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500", children: t("themeProvider.designer.presets") }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "grid grid-cols-2 gap-2", children: PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PresetCard, { preset }, preset.name)) })
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex items-center justify-between mb-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500", children: t("themeProvider.designer.presets") }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "grid grid-cols-2 gap-2", children: PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PresetCard, { preset }, preset.name)) })
                 ] }),
-                customPresets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.myThemes") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex flex-col gap-1.5", children: customPresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PresetCard, { preset, isCustom: true }, preset.name)) })
+                customPresets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.myThemes") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex flex-col gap-1.5", children: customPresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PresetCard, { preset, isCustom: true }, preset.name)) })
                 ] }),
-                isSavingPreset && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col gap-2 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                isSavingPreset && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex flex-col gap-2 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                     ITInput,
                     {
                       name: "presetName",
@@ -16382,8 +17496,8 @@ function ITThemeProvider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                       ITButton,
                       {
                         label: t("themeProvider.designer.save"),
@@ -16394,7 +17508,7 @@ function ITThemeProvider({
                         className: "flex-1"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                       ITButton,
                       {
                         label: t("themeProvider.designer.cancelSave"),
@@ -16408,31 +17522,31 @@ function ITThemeProvider({
                     )
                   ] })
                 ] }),
-                !isSavingPreset && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                !isSavingPreset && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   ITButton,
                   {
                     variant: "outlined",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_md3.MdPalette, { size: 14 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_md3.MdPalette, { size: 14 }),
                     label: t("themeProvider.designer.saveCurrent"),
                     onClick: () => setIsSavingPreset(true),
                     size: "sm"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   ITButton,
                   {
                     variant: "outlined",
                     color: "danger",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_md3.MdRefresh, { size: 14 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_md3.MdRefresh, { size: 14 }),
                     label: t("themeProvider.designer.reset"),
                     onClick: resetTheme,
                     size: "sm"
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITDivider, { orientation: "vertical" }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITDivider, { orientation: "vertical" }),
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   tabs_default,
                   {
                     variant: "pill",
@@ -16440,7 +17554,7 @@ function ITThemeProvider({
                       {
                         id: "brand",
                         label: t("themeProvider.tabs.brand"),
-                        content: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
+                        content: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
                           "primary",
                           "secondary",
                           "ternary",
@@ -16449,35 +17563,35 @@ function ITThemeProvider({
                           "info",
                           "alert",
                           "warning"
-                        ].map((key) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ColorRow, { colorKey: key }, key)) })
+                        ].map((key) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ColorRow, { colorKey: key }, key)) })
                       },
                       {
                         id: "layout",
                         label: t("themeProvider.tabs.layout"),
-                        content: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
+                        content: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
                           "layout.sidebarBg",
                           "layout.sidebarText",
                           "layout.navbarBg",
                           "layout.navbarText"
-                        ].map((key) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ColorRow, { colorKey: key }, key)) })
+                        ].map((key) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ColorRow, { colorKey: key }, key)) })
                       },
                       {
                         id: "tables",
                         label: t("themeProvider.tabs.tables"),
-                        content: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
+                        content: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
                           "table.headerBg",
                           "table.headerText",
                           "table.rowBg",
                           "table.rowText",
                           "table.rowHover"
-                        ].map((key) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ColorRow, { colorKey: key }, key)) })
+                        ].map((key) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ColorRow, { colorKey: key }, key)) })
                       }
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center justify-end gap-3 mt-auto pt-4 border-t border-slate-100 dark:border-slate-800", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ITText, { as: "p", className: "text-[11px] text-slate-400 mr-auto", children: t("themeProvider.designer.autosave") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center justify-end gap-3 mt-auto pt-4 border-t border-slate-100 dark:border-slate-800", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ITText, { as: "p", className: "text-[11px] text-slate-400 mr-auto", children: t("themeProvider.designer.autosave") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                     ITButton,
                     {
                       label: t("themeProvider.designer.close"),
@@ -16585,13 +17699,16 @@ var createValidationSchema = (fields) => Yup.object().shape(
   auditTree,
   axzyCatalog,
   axzyCatalogTypes,
+  buildNavigationTree,
   buildVocabularyContract,
   countPendingNodes,
+  createBindingResolver,
   createCatalog,
   createLimitTracker,
   createValidationSchema,
   enMessages,
   esMessages,
+  flattenRoutes,
   formatPath,
   formatVocabularyForPrompt,
   getCatalogEntry,
@@ -16602,7 +17719,10 @@ var createValidationSchema = (fields) => Yup.object().shape(
   isLightColor,
   isNodePending,
   issue,
+  joinRoutePath,
+  matchRoute,
   migrateSchema,
+  navContainsRoute,
   parsePartialSchema,
   parsePath,
   propPath,
@@ -16612,16 +17732,20 @@ var createValidationSchema = (fields) => Yup.object().shape(
   resolveCssColor,
   resolveLimits,
   resolveNode,
+  routeHref,
   useClickOutside,
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITAppearance,
   useITFlatAppearance,
   useITTheme,
   useITThemeSafe,
   useITTranslation,
   useJsonRender,
+  useSchemaStream,
   useTableState,
+  validateRoutes,
   validateSchema
 });
 //# sourceMappingURL=index.cjs.map