@producteca/producteca-ui-kit 1.68.0 → 1.70.0

package/dist/producteca-ui-kit.es.js

@@ -1,9 +1,9 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsxs, jsx as jsx$1, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { jsx as jsx$1, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { isValidElement, cloneElement, Children, forwardRef, useContext, useState, useCallback, useLayoutEffect, useRef, useMemo, createContext, Component, Fragment, useEffect, memo, createElement, useReducer } from "react";
+import React__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useState, useCallback, useLayoutEffect, useRef, useMemo, createContext, Component, Fragment, useEffect, memo, createElement, useReducer } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, unstable_batchedUpdates } from "react-dom";
 function r(e) {
@@ -19,6 +19,57 @@ function clsx() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
+const DEBUG_ENVS = ["local", "development"];
+const readEnv = () => {
+  const proc = globalThis.process;
+  if (proc?.env?.ENV) return proc.env.ENV;
+  const escapeHatch = globalThis.__PRODUCTECA_UI_ENV__;
+  if (typeof escapeHatch === "string") return escapeHatch;
+  return void 0;
+};
+const isDebugEnabled = () => DEBUG_ENVS.indexOf(readEnv() ?? "") !== -1;
+const logHandler = (component, handler, args) => {
+  console.debug(`[producteca-ui-kit] ${component}.${handler} →`, ...args);
+};
+const MAX_DEPTH = 4;
+const isFunction$5 = (value) => typeof value === "function";
+const isHandlerKey = (key) => /^on[A-Z]/.test(key);
+const isReactElement = (value) => typeof value === "object" && value !== null && "$$typeof" in value;
+const isPlainObject$3 = (value) => {
+  if (typeof value !== "object" || value === null || isReactElement(value)) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+};
+const wrapHandler = (fn3, componentName, path) => (...args) => {
+  logHandler(componentName, path, args);
+  return fn3(...args);
+};
+const wrapDeep = (value, componentName, path, depth) => {
+  if (depth > MAX_DEPTH) return value;
+  if (Array.isArray(value)) {
+    return value.map((item2, index2) => wrapDeep(item2, componentName, `${path}[${index2}]`, depth + 1));
+  }
+  if (isPlainObject$3(value)) {
+    const next2 = {};
+    for (const key of Object.keys(value)) {
+      const child = value[key];
+      const childPath = path ? `${path}.${key}` : key;
+      next2[key] = isHandlerKey(key) && isFunction$5(child) ? wrapHandler(child, componentName, childPath) : wrapDeep(child, componentName, childPath, depth + 1);
+    }
+    return next2;
+  }
+  return value;
+};
+function withDebugHandlers(Component2, componentName) {
+  if (!isDebugEnabled()) return Component2;
+  const Wrapped = forwardRef((props, ref) => {
+    const next2 = wrapDeep(props, componentName, "", 0);
+    const Cmp = Component2;
+    return /* @__PURE__ */ jsx$1(Cmp, { ...next2, ...ref ? { ref } : {} });
+  });
+  Wrapped.displayName = `withDebugHandlers(${componentName})`;
+  return Wrapped;
+}
 const btn = "button-module_btn_XFZLT";
 const disabled$9 = "button-module_disabled_tB8LZ";
 const fullwidth$2 = "button-module_fullwidth_03y8a";
@@ -49,7 +100,7 @@ const styles$J = {
   error: error$4,
   outline: outline$1
 };
-const Button$2 = React__default.forwardRef(({
+const ButtonBase$1 = React__default.forwardRef(({
   type = "button",
   variant = "primary",
   size: size2 = "lg",
@@ -79,7 +130,8 @@ const Button$2 = React__default.forwardRef(({
     }
   );
 });
-Button$2.displayName = "Button";
+ButtonBase$1.displayName = "Button";
+const Button$2 = withDebugHandlers(ButtonBase$1, "Button");
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -9980,7 +10032,7 @@ const ColorValues = map$2(allColors, "color");
 const Shades = map$2(Colors["grey"], (color2, shade) => shade);
 const Categories = map$2(Colors, (shades, category) => category);
 const isValidColor = (color2) => includes$1(ColorValues, color2);
-const CustomIcon = ({
+const CustomIconBase = ({
   color: color2 = getColor("grey", "500"),
   size: size2 = "16",
   sx,
@@ -10021,6 +10073,7 @@ const _translateSizeToFontSize = (size2) => {
   };
   return transform[size2] || transform["16"];
 };
+const CustomIcon = withDebugHandlers(CustomIconBase, "CustomIcon");
 const chip = "chip-module_chip_U3kfP";
 const title$8 = "chip-module_title_DARz9";
 const text = "chip-module_text_4xvju";
@@ -10051,7 +10104,7 @@ const styles$H = {
   primary,
   action: action$1
 };
-const Chip$1 = ({ isActive, title: title2, text: text2, content: content2, onRemove = void 0, disabled: disabled2 = false, variant = "primary", size: size2 = "lg" }) => {
+const ChipBase = ({ isActive, title: title2, text: text2, content: content2, onRemove = void 0, disabled: disabled2 = false, variant = "primary", size: size2 = "lg" }) => {
   const canRemove = onRemove && !disabled2;
   return /* @__PURE__ */ jsx$1(Grow, { in: !!text2 || !!title2 || !!content2, unmountOnExit: true, children: /* @__PURE__ */ jsxs("span", { className: clsx(styles$H.chip, styles$H[variant], styles$H[size2], { [styles$H.disabled]: disabled2, [styles$H.active]: isActive }), children: [
     content2,
@@ -10066,6 +10119,7 @@ const Chip$1 = ({ isActive, title: title2, text: text2, content: content2, onRem
     canRemove && /* @__PURE__ */ jsx$1(CustomIcon, { className: styles$H.action, size: "8", onClick: canRemove ? onRemove : void 0, color: getColor("grey", "700"), children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) })
   ] }) });
 };
+const Chip$1 = withDebugHandlers(ChipBase, "Chip");
 const defaultColor$c = getColor("grey", "500");
 const SearchPublication = ({ size: size2 = 100, color: color2 = defaultColor$c }) => {
   const resolvedColor = isValidColor(color2) ? color2 : defaultColor$c;
@@ -19753,7 +19807,7 @@ const columns: TableColumn<MyRow>[] = [
 const tableBodyExample = `
 ## Uso del componente
 
-\`Table.Body\` renderiza las filas de datos. Lee las columnas del contexto provisto por \`Table\`. Cuando \`data\` está vacío muestra un \`EmptyState\` con \`emptyMessage\`.
+\`Table.Body\` renderiza las filas de datos. Lee las columnas del contexto provisto por \`Table\`. Integra \`AsyncContent\` internamente, por lo que acepta las props de estado (\`isLoading\`, \`error\`, \`empty\`, \`success\`) para mostrar el loader, el error o el estado vacío dentro de la tabla.
 
 ### Ejemplo básico:
 
@@ -19763,13 +19817,15 @@ const tableBodyExample = `
 </Table>
 \`\`\`
 
-### Estado vacío personalizado:
+### Con estados asíncronos:
 
 \`\`\`tsx
 <Table columns={columns}>
+  <Table.Header />
   <Table.Body
-    data={[]}
-    emptyMessage="No encontramos resultados para tu búsqueda"
+    data={rows}
+    isLoading={isLoading}
+    empty={{ text: 'No hay datos', actionText: 'Cargar', onClick: loadData }}
   />
 </Table>
 \`\`\`
@@ -19803,6 +19859,28 @@ const columns: TableColumn<MyRow>[] = [
 ]
 \`\`\`
 `;
+const tableAsyncContentExample = `
+\`Table.Body\` integra \`AsyncContent\` internamente: recibe las mismas props de estado (\`isLoading\`, \`error\`, \`empty\`, \`success\`) y resuelve el loader, el error y el estado vacío **dentro** de la tabla, sin desmontar el \`Table.Header\`.
+
+El estado vacío se deriva de \`data\` (no hace falta pasar \`items\`). Cuando hay filas y no hay carga/error, se renderizan las filas normalmente.
+
+### Ejemplo:
+
+\`\`\`tsx
+<Table columns={columns}>
+  <Table.Header />
+  <Table.Body
+    data={rows}
+    isLoading={isLoading}
+    empty={{
+      text: 'No hay datos disponibles',
+      actionText: 'Cargar datos',
+      onClick: loadData,
+    }}
+  />
+</Table>
+\`\`\`
+`;
 const spinnerExample = `
 ## Uso del componente
 
@@ -20081,7 +20159,8 @@ const es$3 = {
       example: spinnerExample
     },
     table: {
-      example: tableExample
+      example: tableExample,
+      asyncContent: tableAsyncContentExample
     },
     tableHeader: {
       example: tableHeaderExample
@@ -20658,7 +20737,7 @@ const ClearComponent = ({
   return isClearable && (isArrayWithSome || hasSelectedValue) ? /* @__PURE__ */ jsx$1("a", { className: styles$B["producteca-select-field__is-clearable"], onClick: () => handleChange(null), children: /* @__PURE__ */ jsx$1(CustomIcon, { children: /* @__PURE__ */ jsx$1(ClearRounded, {}) }) }) : null;
 };
 const _valueGetter = (option, getter) => getter ? getter(option) : option?.value;
-const SelectField = (props) => {
+const SelectFieldBase = (props) => {
   const {
     name,
     label: label2,
@@ -20796,6 +20875,7 @@ const SelectField = (props) => {
     ] })
   ] });
 };
+const SelectField = withDebugHandlers(SelectFieldBase, "SelectField");
 const disabled$7 = "textInput-module_disabled_zmiie";
 const fullwidth = "textInput-module_fullwidth_uG3VU";
 const lg$9 = "textInput-module_lg_rvzUN";
@@ -20821,7 +20901,7 @@ const styles$A = {
   sm: sm$a,
   title: title$7
 };
-const TextInput = (props) => {
+const TextInputBase = (props) => {
   const {
     isValid: isValid2,
     onChange: onChange2,
@@ -20911,6 +20991,7 @@ const TextInput = (props) => {
     }
   );
 };
+const TextInput = withDebugHandlers(TextInputBase, "TextInput");
 const Visibility = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
 }), "Visibility");
@@ -57738,7 +57819,7 @@ const getPickerProps = ({
     }
   }
 });
-const DatePickerInput = (props) => {
+const DatePickerInputBase = (props) => {
   const {
     meta,
     name,
@@ -57872,6 +57953,7 @@ const DatePickerInput = (props) => {
     }
   );
 };
+const DatePickerInput = withDebugHandlers(DatePickerInputBase, "DatePickerInput");
 const DatePicker2 = ({ label: label2, rightAdornment, ...props }) => {
   return /* @__PURE__ */ jsx$1(FormField, { type: "date", label: label2, rightAdornment, ...props });
 };
@@ -65374,7 +65456,7 @@ const styles$u = {
   md: md$5,
   sm: sm$7
 };
-const CheckboxInputGroup = ({
+const CheckboxInputGroupBase = ({
   title: title2,
   name,
   type = "checkbox",
@@ -65423,7 +65505,8 @@ const CheckboxInputGroup = ({
     }) })
   ] });
 };
-const CheckboxInput = ({
+const CheckboxInputGroup = withDebugHandlers(CheckboxInputGroupBase, "CheckboxInputGroup");
+const CheckboxInputBase = ({
   id,
   name,
   checked,
@@ -65451,6 +65534,7 @@ const CheckboxInput = ({
     }
   );
 };
+const CheckboxInput = withDebugHandlers(CheckboxInputBase, "CheckboxInput");
 var baseKeys$1 = _baseKeys, getTag$1 = _getTag, isArguments = isArguments_1, isArray = isArray_1, isArrayLike$2 = isArrayLike_1, isBuffer = isBufferExports, isPrototype = _isPrototype, isTypedArray = isTypedArray_1;
 var mapTag$1 = "[object Map]", setTag$1 = "[object Set]";
 var objectProto = Object.prototype;
@@ -65590,7 +65674,7 @@ const _convertValueToOption = (value) => {
   if (!value) return null;
   return { value, label: value };
 };
-const Searcher = (props) => {
+const SearcherBase = (props) => {
   const {
     name,
     label: label2,
@@ -65780,6 +65864,7 @@ const Searcher = (props) => {
     )
   ] });
 };
+const Searcher = withDebugHandlers(SearcherBase, "Searcher");
 const title$5 = "switchInput-module_title_lBK2p";
 const disabled$4 = "switchInput-module_disabled_yz9dR";
 const lg$5 = "switchInput-module_lg_WMIDO";
@@ -65798,7 +65883,7 @@ const styles$s = {
   md: md$4,
   sm: sm$6
 };
-const SwitchInputGroup = ({
+const SwitchInputGroupBase = ({
   title: title2,
   name,
   items,
@@ -65861,7 +65946,8 @@ const SwitchInputGroup = ({
     }) })
   ] });
 };
-const SwitchInput = ({
+const SwitchInputGroup = withDebugHandlers(SwitchInputGroupBase, "SwitchInputGroup");
+const SwitchInputBase = ({
   id,
   name,
   checked,
@@ -65887,6 +65973,7 @@ const SwitchInput = ({
     }
   );
 };
+const SwitchInput = withDebugHandlers(SwitchInputBase, "SwitchInput");
 const styles$r = {
   "async-content-container": "asyncContent-module_async-content-container_UEl81",
   "state-container": "asyncContent-module_state-container_FgE4I",
@@ -65928,7 +66015,7 @@ const styles$p = {
   "weight-900": "link-module_weight-900_Yxl7i",
   disabled: disabled$3
 };
-const Link = React__default.memo(React__default.forwardRef(({
+const LinkBase = React__default.memo(React__default.forwardRef(({
   size: size2 = "md",
   decoration = "none",
   weight,
@@ -65973,9 +66060,10 @@ const Link = React__default.memo(React__default.forwardRef(({
     }
   );
 }));
-Link.displayName = "Link";
+LinkBase.displayName = "Link";
+const Link = withDebugHandlers(LinkBase, "Link");
 const DefaultIcon$1 = /* @__PURE__ */ jsx$1(EmptyStateIcon, {});
-const EmptyState = ({
+const EmptyStateBase = ({
   onActionClick,
   icon: icon2 = DefaultIcon$1,
   actionText = locale("reloadPage"),
@@ -65996,6 +66084,7 @@ const EmptyState = ({
     ] })
   ] });
 };
+const EmptyState = withDebugHandlers(EmptyStateBase, "EmptyState");
 const ErrorView = memo(({
   text: text2,
   actionText,
@@ -66108,7 +66197,7 @@ const _getStatusComponent = ({
   };
   return statusComponents[status];
 };
-const AsyncContent = memo(({
+const AsyncContentBase = memo(({
   error: error2,
   empty,
   success: success2,
@@ -66129,7 +66218,8 @@ const AsyncContent = memo(({
     success: success2
   }) });
 });
-AsyncContent.displayName = "AsyncContent";
+AsyncContentBase.displayName = "AsyncContent";
+const AsyncContent = withDebugHandlers(AsyncContentBase, "AsyncContent");
 const fullPage = "actionBar-module_fullPage_A4wiw";
 const modal$1 = "actionBar-module_modal_jZfAJ";
 const page = "actionBar-module_page_Oq8Jb";
@@ -66139,7 +66229,7 @@ const styles$o = {
   modal: modal$1,
   page
 };
-const ActionBar = ({ variant = "page", saveProps, cancelProps, previousProps }) => {
+const ActionBarBase = ({ variant = "page", saveProps, cancelProps, previousProps }) => {
   const { onCancel, label: cancelText = locale("cancel") } = cancelProps || {};
   const { onPrevious, label: previousText = locale("previous"), ...previousOtherProps } = previousProps || {};
   const { onSave, label: saveText = locale("save"), ...saveOtherProps } = saveProps || {};
@@ -66149,13 +66239,14 @@ const ActionBar = ({ variant = "page", saveProps, cancelProps, previousProps })
     !!onSave && /* @__PURE__ */ jsx$1(Button$2, { label: saveText, onClick: onSave, ...saveOtherProps })
   ] });
 };
+const ActionBar = withDebugHandlers(ActionBarBase, "ActionBar");
 const Check = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
 }), "Check");
 const ContentCopy = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
 }), "ContentCopy");
-const CopyButton = ({
+const CopyButtonBase = ({
   onClick,
   copyText = locale("copyButton.copy"),
   copiedText = locale("copyButton.copied"),
@@ -66199,6 +66290,7 @@ const Icons = ({ copied }) => /* @__PURE__ */ jsxs("div", { className: "copy-btn
   /* @__PURE__ */ jsx$1("div", { className: `copy-icon ${copied ? "hidden" : ""}`, children: /* @__PURE__ */ jsx$1(ContentCopy, { "data-testid": "ContentCopyIcon" }) }),
   /* @__PURE__ */ jsx$1("div", { className: `check-icon ${!copied ? "hidden" : ""}`, children: /* @__PURE__ */ jsx$1(Check, {}) })
 ] });
+const CopyButton = withDebugHandlers(CopyButtonBase, "CopyButton");
 const dense = "headerSection-module_dense_f1FWn";
 const content = "headerSection-module_content_5y2PB";
 const title$4 = "headerSection-module_title_cabYm";
@@ -66302,7 +66394,7 @@ const _getDefaultOptions = () => [
   { value: VALUE_OR, label: locale("conditionalOperator.or") },
   { value: VALUE_AND, label: locale("conditionalOperator.and") }
 ];
-const ConditionalOperator = ({
+const ConditionalOperatorBase = ({
   name = "conditionalOperator",
   value,
   onChange: onChange2,
@@ -66340,9 +66432,13 @@ const ConditionalOperator = ({
     }
   );
 };
-ConditionalOperator.displayName = "ConditionalOperator";
-ConditionalOperator.VALUE_OR = VALUE_OR;
-ConditionalOperator.VALUE_AND = VALUE_AND;
+ConditionalOperatorBase.displayName = "ConditionalOperator";
+ConditionalOperatorBase.VALUE_OR = VALUE_OR;
+ConditionalOperatorBase.VALUE_AND = VALUE_AND;
+const ConditionalOperator = Object.assign(
+  withDebugHandlers(ConditionalOperatorBase, "ConditionalOperator"),
+  { VALUE_OR, VALUE_AND }
+);
 const AutoStoriesIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "m19 1-5 5v11l5-4.5zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6m22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5z"
 }), "AutoStories");
@@ -67394,7 +67490,7 @@ const styles$f = {
   "fit-content": "modal-module_fit-content_CBdg6"
 };
 const ModalContext = createContext({ isLoading: false });
-const Modal$1 = ({
+const ModalBase = ({
   open,
   onClose,
   children,
@@ -67414,6 +67510,7 @@ const Modal$1 = ({
     children: /* @__PURE__ */ jsx$1(ModalContext.Provider, { value: { isLoading }, children })
   }
 ) });
+const Modal$1 = withDebugHandlers(ModalBase, "Modal");
 const icon$1 = "modalTitle-module_icon_jKB-M";
 const title$3 = "modalTitle-module_title_U2a2X";
 const subtitle = "modalTitle-module_subtitle_DTIpI";
@@ -67473,7 +67570,7 @@ const styles$c = {
   disabled: disabled$2,
   active: active$2
 };
-const Card = ({
+const CardBase = ({
   sx,
   icon: icon2,
   title: title2,
@@ -67503,6 +67600,7 @@ const Card = ({
   },
   title2
 );
+const Card = withDebugHandlers(CardBase, "Card");
 const InsertPhotoRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2M8.9 13.98l2.1 2.53 3.1-3.99c.2-.26.6-.26.8.01l3.51 4.68c.25.33.01.8-.4.8H6.02c-.42 0-.65-.48-.39-.81L8.12 14c.19-.26.57-.27.78-.02"
 }), "InsertPhotoRounded");
@@ -67560,7 +67658,7 @@ const productecaStrategy = {
   clientId: 1,
   iconUrl: "https://imagesproducteca.blob.core.windows.net/producteca/isologo-producteca.svg"
 };
-const PickChannelModal = ({
+const PickChannelModalBase = ({
   open,
   onClose,
   channels,
@@ -67587,6 +67685,7 @@ const PickChannelModal = ({
     ] })
   ] }) })
 ] });
+const PickChannelModal = withDebugHandlers(PickChannelModalBase, "PickChannelModal");
 function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass("MuiLinearProgress", slot);
 }
@@ -68110,7 +68209,7 @@ const styles$9 = {
   warning,
   info
 };
-const Alert = ({
+const AlertBase = ({
   message: message2,
   variant = "success",
   className,
@@ -68146,6 +68245,7 @@ const Alert = ({
     }
   );
 };
+const Alert = withDebugHandlers(AlertBase, "Alert");
 var baseKeys = _baseKeys, getTag = _getTag, isArrayLike$1 = isArrayLike_1, isString = isString_1, stringSize = _stringSize;
 var mapTag = "[object Map]", setTag = "[object Set]";
 function size(collection) {
@@ -68185,13 +68285,14 @@ const BreadcrumbItemComponent = ({ item: item2, index: index2, items }) => {
     " "
   ] });
 };
-const Breadcrumb = ({
+const BreadcrumbBase = ({
   items,
   className,
   ...otherProps
 }) => {
   return /* @__PURE__ */ jsx$1("nav", { className: clsx(styles$8["breadcrumb"], className), "aria-label": "Breadcrumb", ...otherProps, children: map$2(items, (item2, index2) => /* @__PURE__ */ jsx$1(BreadcrumbItemComponent, { item: item2, index: index2, items }, index2)) });
 };
+const Breadcrumb = withDebugHandlers(BreadcrumbBase, "Breadcrumb");
 const MoreVertIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
 }), "MoreVert");
@@ -68259,7 +68360,7 @@ const ItemContent = ({
     ]
   }
 );
-const MenuItemComponent = ({
+const MenuItemComponentBase = ({
   label: label2,
   icon: icon2,
   onClick,
@@ -68297,6 +68398,7 @@ const MenuItemComponent = ({
     }
   );
 };
+const MenuItemComponent = withDebugHandlers(MenuItemComponentBase, "MenuItemComponent");
 const MenuAction = ({
   items,
   id = "menu-action-button",
@@ -68374,7 +68476,7 @@ const styles$6 = {
   "warning-body": "warningModal-module_warning-body_5DHA9"
 };
 const DefaultIcon = /* @__PURE__ */ jsx$1(CustomIcon, { size: "32", color: getColor("secondary", "500"), children: /* @__PURE__ */ jsx$1(ErrorIcon, {}) });
-const WarningModal = ({
+const WarningModalBase = ({
   open,
   icon: icon2,
   onSave,
@@ -68431,6 +68533,7 @@ const WarningModal = ({
     ]
   }
 );
+const WarningModal = withDebugHandlers(WarningModalBase, "WarningModal");
 var baseIteratee$1 = _baseIteratee, isArrayLike = isArrayLike_1, keys = keys_1;
 function createFind$1(findIndexFunc) {
   return function(collection, predicate, fromIndex) {
@@ -68484,7 +68587,7 @@ const styles$5 = {
   active: active$1,
   disabled
 };
-const Tabs2 = ({
+const TabsBase = ({
   sx,
   items,
   value,
@@ -68584,6 +68687,7 @@ const sxTab = {
   padding: 0,
   minHeight: 0
 };
+const Tabs2 = withDebugHandlers(TabsBase, "Tabs");
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -72809,7 +72913,7 @@ const styles$4 = {
   "menu-item-collapsed": "sidebar-module_menu-item-collapsed_-Gz6l",
   active
 };
-const AppSidebar = ({ title: title2, items }) => {
+const AppSidebarBase = ({ title: title2, items }) => {
   const [collapsed2, setCollapsed] = useState(false);
   return /* @__PURE__ */ jsx$1("div", { className: styles$4.wrapper, children: /* @__PURE__ */ jsxs(
     Sidebar,
@@ -72837,6 +72941,7 @@ const AppSidebar = ({ title: title2, items }) => {
     }
   ) });
 };
+const AppSidebar = withDebugHandlers(AppSidebarBase, "AppSidebar");
 const KeyboardArrowDownIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
 }), "KeyboardArrowDown");
@@ -72874,7 +72979,7 @@ const styles$3 = {
   sm,
   "MuiButton-endIcon": "dropdown-module_MuiButton-endIcon_h9XM7"
 };
-const Dropdown = ({
+const DropdownBase = ({
   label: label2,
   items,
   disabled: disabled2 = false,
@@ -72970,6 +73075,7 @@ const Dropdown = ({
     )
   ] });
 };
+const Dropdown = withDebugHandlers(DropdownBase, "Dropdown");
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
@@ -76899,7 +77005,7 @@ const _buildItem = (currentLength) => {
     value: ""
   };
 };
-const DraggableList = ({
+const DraggableListBase = ({
   label: label2,
   addLabel,
   onChange: onChange2,
@@ -77029,6 +77135,7 @@ const DraggableList = ({
     ) })
   ] });
 };
+const DraggableList = withDebugHandlers(DraggableListBase, "DraggableList");
 const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "CheckRounded");
@@ -77117,12 +77224,23 @@ const styles = {
   "header-row": "table-module_header-row_ry6Lv",
   "body-row": "table-module_body-row_OMOX0",
   "header-cell": "table-module_header-cell_0FEWz",
-  "body-cell": "table-module_body-cell_p4019"
+  "body-cell": "table-module_body-cell_p4019",
+  "body-async": "table-module_body-async_21Z7L"
 };
-const TableBody = ({ data, emptyMessage }) => {
+const TableBody = ({ data, isLoading, error: error2, empty, success: success2 }) => {
   const columns = useContext(TableContext);
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsx$1("tbody", { children: /* @__PURE__ */ jsx$1("tr", { children: /* @__PURE__ */ jsx$1("td", { colSpan: columns.length, children: /* @__PURE__ */ jsx$1(EmptyState, { text: emptyMessage }) }) }) });
+  const showContent = !isLoading && !error2?.value && !success2?.value && data.length > 0;
+  if (!showContent) {
+    return /* @__PURE__ */ jsx$1("tbody", { children: /* @__PURE__ */ jsx$1("tr", { children: /* @__PURE__ */ jsx$1("td", { colSpan: columns.length, className: styles["body-async"], children: /* @__PURE__ */ jsx$1(
+      AsyncContent,
+      {
+        isLoading,
+        error: error2,
+        success: success2,
+        empty: { ...empty, items: data },
+        children: /* @__PURE__ */ jsx$1(Fragment$1, {})
+      }
+    ) }) }) });
   }
   return /* @__PURE__ */ jsx$1("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx$1("tr", { className: styles["body-row"], children: columns.map((col) => {
     const value = row[col.key];