@epam/ai-dial-ui-kit 0.5.0-rc.40 → 0.5.0-rc.42

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

@@ -3019,7 +3019,7 @@ const Av = {
   stroke: 2
 }, Vv = "text-primary", Yt = ({
   text: e,
-  cssClass: t,
+  className: t,
   contentClassName: s,
   hideTooltip: o,
   ...i
@@ -3089,7 +3089,7 @@ const Av = {
   disabled: i,
   ariaLabel: n,
   onChange: r,
-  cssClass: a
+  className: a
 }) => {
   const l = k(
     (h) => {
@@ -3107,7 +3107,7 @@ const Av = {
   );
   return /* @__PURE__ */ z("label", { className: c, htmlFor: t, children: [
     o ? /* @__PURE__ */ v(cC, { className: d, ...re }) : s ? /* @__PURE__ */ v(dh, { className: d, ...re }) : null,
-    e && (typeof e == "string" ? /* @__PURE__ */ v(Yt, { text: e, cssClass: "text-primary" }) : e),
+    e && (typeof e == "string" ? /* @__PURE__ */ v(Yt, { text: e, className: "text-primary" }) : e),
     /* @__PURE__ */ v(
       "input",
       {
@@ -3212,11 +3212,11 @@ const Bv = (e, t) => {
   description: o,
   checked: i = !1,
   inputId: n,
-  cssClass: r,
-  labelCssClass: a,
+  className: r,
+  labelClassName: a,
   disabled: l,
   onChange: c,
-  descriptionCssClass: d
+  descriptionClassName: d
 }) => {
   const u = `${n}-desc`, h = Y(
     "dial-small cursor-pointer",
@@ -3226,7 +3226,10 @@ const Bv = (e, t) => {
     "cursor-pointer dial-input-radio",
     s && "mr-2",
     r
-  ), p = Y("flex flex-col", !!o && "mb-2"), f = Y(
+  ), p = Y(
+    "flex flex-col",
+    !!o && "mb-2"
+  ), f = Y(
     "dial-tiny mt-2 ml-[26px] text-secondary",
     d
   );
@@ -3266,10 +3269,10 @@ const Uv = "w-full flex", $v = {
   error: n,
   orientation: r = Vn.Vertical,
   labelVisuallyHidden: a = !1,
-  cssClass: l,
-  labelCssClass: c,
-  errorCssClass: d,
-  childrenCssClass: u,
+  className: l,
+  labelClassName: c,
+  errorClassName: d,
+  childrenClassName: u,
   captionDescription: h,
   readonly: g,
   value: p,
@@ -3353,16 +3356,16 @@ const jv = "flex", Kv = "pb-1 mt-2", qv = {
   [Bn.Row]: "flex-row gap-x-6"
 }, Yv = ({
   fieldTitle: e,
-  radioCssClass: t,
-  containerCssClass: s,
-  selectedItemCssClass: o,
-  selectedLabelCssClass: i,
-  radioGroupCssClass: n,
-  inputContainerCssClass: r,
-  selectedInputContainerCssClass: a,
-  groupLabelCssClass: l,
-  formItemChildrenCssClass: c,
-  labelCssClass: d,
+  radioClassName: t,
+  containerClassName: s,
+  selectedItemClassName: o,
+  selectedLabelClassName: i,
+  radioGroupClassName: n,
+  inputContainerClassName: r,
+  selectedInputContainerClassName: a,
+  groupLabelClassName: l,
+  formItemChildrenClassName: c,
+  labelClassName: d,
   disabled: u,
   elementId: h,
   radioButtons: g,
@@ -3374,9 +3377,9 @@ const jv = "flex", Kv = "pb-1 mt-2", qv = {
   {
     elementId: h,
     label: e,
-    labelCssClass: l || d,
-    cssClass: s,
-    childrenCssClass: c,
+    labelClassName: l || d,
+    className: s,
+    childrenClassName: c,
     children: /* @__PURE__ */ v(
       "div",
       {
@@ -3404,8 +3407,8 @@ const jv = "flex", Kv = "pb-1 mt-2", qv = {
                   value: C.id,
                   inputId: C.id,
                   disabled: u,
-                  cssClass: t,
-                  labelCssClass: be(
+                  className: t,
+                  labelClassName: be(
                     d,
                     C.id === p && i
                   ),
@@ -3464,13 +3467,13 @@ const jv = "flex", Kv = "pb-1 mt-2", qv = {
     ]
   }
 ), $r = 48, Zv = ({
-  containerCssClass: e,
+  containerClassName: e,
   children: t,
   width: s = 280,
   title: o,
   iconSize: i = 24,
   iconStroke: n = 1.5,
-  titleCssClass: r,
+  titleClassName: r,
   additionalButtons: a,
   isOpened: l,
   onToggle: c
@@ -3558,7 +3561,7 @@ const Qv = {
   // TODO: Add other variants here once they are finalized with the UI/UX team
 }, Zl = ({
   tag: e,
-  cssClass: t,
+  className: t,
   remove: s,
   variant: o = Yl.Default,
   iconBefore: i,
@@ -5415,7 +5418,7 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
   extension: e,
   size: t = re.size,
   stroke: s = re.stroke,
-  cssClass: o,
+  className: o,
   decorative: i = !1,
   label: n,
   indicator: r
@@ -5441,7 +5444,7 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
 }, zn = ({
   label: e = "Shared entity",
   size: t = 10,
-  cssClass: s,
+  className: s,
   stroke: o = 2
 }) => /* @__PURE__ */ v(
   Ne,
@@ -5460,7 +5463,7 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
   }
 ), Uh = ({
   name: e,
-  cssClass: t,
+  className: t,
   shared: s = !1,
   iconSize: o = os
 }) => {
@@ -5471,7 +5474,7 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
       {
         extension: i,
         size: o,
-        cssClass: "text-secondary",
+        className: "text-secondary",
         indicator: s ? /* @__PURE__ */ v(zn, {}) : null,
         label: "File type icon"
       }
@@ -5479,14 +5482,14 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
     /* @__PURE__ */ v(
       Yt,
       {
-        cssClass: "text-primary dial-small flex-1 min-w-0",
+        className: "text-primary dial-small flex-1 min-w-0",
         text: e
       }
     )
   ] });
 }, $h = ({
   name: e,
-  cssClass: t,
+  className: t,
   shared: s = !1,
   loading: o = !1,
   iconSize: i = os
@@ -5506,7 +5509,7 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
     /* @__PURE__ */ v(
       Yt,
       {
-        cssClass: "text-primary dial-small flex-1 min-w-0",
+        className: "text-primary dial-small flex-1 min-w-0",
         text: e
       }
     )
@@ -5543,14 +5546,14 @@ const db = ({
   locale: t = ab,
   options: s = lb,
   emptyPlaceholder: o = "—",
-  cssClass: i
+  className: i
 }) => {
   const n = jh(e), r = B(() => n ? new Intl.DateTimeFormat(t, s).format(n) : o, [n, o, t, s]), a = n ? n.toISOString() : void 0;
   return /* @__PURE__ */ v(
     Yt,
     {
       text: a ? /* @__PURE__ */ v("time", { dateTime: a, children: r }) : /* @__PURE__ */ v("span", { children: r }),
-      cssClass: Y(cb, i),
+      className: Y(cb, i),
       hideTooltip: !1
     }
   );
@@ -5592,7 +5595,7 @@ const hb = Y(
   onOpenChange: l,
   closable: c = !1,
   onClose: d,
-  cssClass: u,
+  className: u,
   listClassName: h,
   outsidePressIgnoreRef: g,
   outsideClosable: p = !0,
@@ -5851,7 +5854,7 @@ const hb = Y(
           {
             text: e.label,
             contentClassName: "max-w-[200px]",
-            cssClass: "max-w-[200px]"
+            className: "max-w-[200px]"
           }
         ),
         (s || e.invalid) && /* @__PURE__ */ v("div", { className: "text-error pl-1", children: /* @__PURE__ */ v(Bl, { ...re }) })
@@ -6035,7 +6038,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
     bd,
     Fb,
     o ? "pointer-events-none opacity-75" : ""
-  ), h = typeof e == "string" ? /* @__PURE__ */ v(Yt, { cssClass: l, text: e }) : /* @__PURE__ */ v(
+  ), h = typeof e == "string" ? /* @__PURE__ */ v(Yt, { className: l, text: e }) : /* @__PURE__ */ v(
     "span",
     {
       className: be(
@@ -6175,8 +6178,8 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   value: e,
   textareaId: t,
   placeholder: s,
-  cssClass: o = "",
-  containerCssClass: i = "",
+  className: o = "",
+  containerClassName: i = "",
   disabled: n,
   invalid: r,
   readonly: a,
@@ -6245,8 +6248,8 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   value: o,
   elementId: i,
   placeholder: n = "",
-  cssClass: r = "",
-  containerCssClass: a,
+  className: r = "",
+  containerClassName: a,
   tooltipTriggerClassName: l,
   type: c = "text",
   disabled: d,
@@ -6305,8 +6308,8 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           No,
           {
             hideBorder: !0,
-            containerCssClass: "rounded-r-none border-r-0",
-            cssClass: "overflow-hidden overflow-ellipsis dial-small",
+            containerClassName: "rounded-r-none border-r-0",
+            className: "overflow-hidden overflow-ellipsis dial-small",
             value: w,
             disabled: !0,
             elementId: w + "textBefore"
@@ -6367,7 +6370,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           No,
           {
             hideBorder: !0,
-            containerCssClass: "rounded-l-none border-l-0",
+            containerClassName: "rounded-l-none border-l-0",
             value: b,
             disabled: !0,
             elementId: b + "textAfter"
@@ -6390,9 +6393,9 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   elementId: l,
   fieldTitle: c,
   errorText: d,
-  elementCssClass: u,
-  elementContainerCssClass: h,
-  containerCssClass: g,
+  elementClassName: u,
+  elementContainerClassName: h,
+  containerClassName: g,
   defaultEmptyText: p,
   ...f
 }) => /* @__PURE__ */ v(
@@ -6407,15 +6410,15 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
     readonly: r,
     orientation: a,
     elementId: l,
-    cssClass: g,
+    className: g,
     defaultEmptyText: p,
     value: f.value,
     children: /* @__PURE__ */ v(
       No,
       {
         elementId: l,
-        cssClass: u,
-        containerCssClass: h,
+        className: u,
+        containerClassName: h,
         invalid: d != null,
         ...f
       }
@@ -6448,9 +6451,9 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   fieldTitle: e,
   optional: t,
   elementId: s,
-  elementCssClass: o,
-  containerCssClass: i,
-  elementContainerCssClass: n,
+  elementClassName: o,
+  containerClassName: i,
+  elementContainerClassName: n,
   errorText: r,
   ...a
 }) => /* @__PURE__ */ z("div", { className: be("flex flex-col", i), children: [
@@ -6466,8 +6469,8 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
     Tb,
     {
       textareaId: s,
-      cssClass: o,
-      containerCssClass: n,
+      className: o,
+      containerClassName: n,
       ...a
     }
   ),
@@ -6523,9 +6526,9 @@ const Lb = "z-[52] flex items-center justify-center bg-blackout md:p-4", Ob = "d
   open: e = !1,
   title: t,
   portalId: s,
-  cssClass: o,
-  overlayClass: i,
-  headingClass: n,
+  className: o,
+  overlayClassName: i,
+  headingClassName: n,
   dividers: r = !0,
   children: a,
   footer: l,
@@ -6550,36 +6553,42 @@ const Lb = "z-[52] flex items-center justify-center bg-blackout md:p-4", Ob = "d
       children: /* @__PURE__ */ v(Ts, { tooltip: w, children: w })
     }
   ) : w : /* @__PURE__ */ v("span", {});
-  return /* @__PURE__ */ v(Nl, { id: s, children: /* @__PURE__ */ v(sC, { className: Y(Lb, i), children: /* @__PURE__ */ v(lh, { context: h, children: /* @__PURE__ */ z(
-    "div",
+  return /* @__PURE__ */ v(Nl, { id: s, children: /* @__PURE__ */ v(
+    sC,
     {
-      ref: u.setFloating,
-      ...f(),
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": m,
-      className: Y(
-        "dial-popup",
-        Hb[d],
-        r && Ob,
-        o
-      ),
-      children: [
-        /* @__PURE__ */ z("div", { className: Nb, children: [
-          C(t),
-          /* @__PURE__ */ v(
-            qh,
-            {
-              ariaLabel: "Close dialog",
-              onClose: (w) => c?.(w)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ v("div", { className: "flex-grow overflow-auto", children: a }),
-        l
-      ]
+      className: Y(Lb, i),
+      children: /* @__PURE__ */ v(lh, { context: h, children: /* @__PURE__ */ z(
+        "div",
+        {
+          ref: u.setFloating,
+          ...f(),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": m,
+          className: Y(
+            "dial-popup",
+            Hb[d],
+            r && Ob,
+            o
+          ),
+          children: [
+            /* @__PURE__ */ z("div", { className: Nb, children: [
+              C(t),
+              /* @__PURE__ */ v(
+                qh,
+                {
+                  ariaLabel: "Close dialog",
+                  onClose: (w) => c?.(w)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ v("div", { className: "flex-grow overflow-auto", children: a }),
+            l
+          ]
+        }
+      ) })
     }
-  ) }) }) });
+  ) });
 };
 var Fi = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(Fi || {});
 const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-150 px-6 py-4", Bb = "Cancel", zb = "Ok", Sd = {
@@ -6595,13 +6604,13 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
 }, Wb = ({
   title: e,
   description: t,
-  descriptionCssClass: s,
+  descriptionClassName: s,
   open: o = !1,
   confirmLabel: i = zb,
   cancelLabel: n = Bb,
   isLoading: r = !1,
   disableConfirmButton: a = !1,
-  cssClass: l,
+  className: l,
   confirmClassName: c,
   onClose: d,
   onConfirm: u,
@@ -6643,7 +6652,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
     {
       open: o,
       title: e,
-      cssClass: Y(Sd[f].container, l),
+      className: Y(Sd[f].container, l),
       dividers: p,
       onClose: () => d?.(),
       footer: C ?? w,
@@ -6651,7 +6660,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
       children: b()
     }
   );
-}, eg = ({ selectedItems: e, listCssClass: t, listElementCssClass: s, placeholder: o }) => e?.length ? /* @__PURE__ */ v(
+}, eg = ({ selectedItems: e, listClassName: t, listElementClassName: s, placeholder: o }) => e?.length ? /* @__PURE__ */ v(
   "ul",
   {
     className: Y(
@@ -6663,7 +6672,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
       Zl,
       {
         tag: i,
-        cssClass: Y([s])
+        className: Y([s])
       }
     ) }) }, i))
   }
@@ -6672,8 +6681,8 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
   open: t,
   disabled: s = !1,
   selectedValue: o,
-  valueCssClasses: i,
-  inputCssClasses: n,
+  valueClassNames: i,
+  inputClassNames: n,
   onOpen: r,
   elementId: a,
   errorText: l,
@@ -6762,8 +6771,8 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
   selectedValue: o,
   radioButtons: i,
   customInputValue: n,
-  valueCssClasses: r,
-  inputCssClasses: a,
+  valueClassNames: r,
+  inputClassNames: a,
   emptyValueText: l,
   onClose: c,
   title: d,
@@ -6792,8 +6801,8 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
         disabled: s,
         open: S,
         selectedValue: n ?? i.find((P) => P.id === o)?.name,
-        valueCssClasses: r,
-        inputCssClasses: Y(a, "py-2", "px-3"),
+        valueClassNames: r,
+        inputClassNames: Y(a, "py-2", "px-3"),
         emptyValueText: l,
         onOpen: x,
         children: /* @__PURE__ */ v(
@@ -6827,7 +6836,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
               Yv,
               {
                 radioButtons: i,
-                labelCssClass: "dial-small",
+                labelClassName: "dial-small",
                 activeRadioButton: m,
                 onChange: C,
                 elementId: w,
@@ -6846,7 +6855,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
   cancelLabel: o = $b,
   isLoading: i = !1,
   disableSubmitButton: n = !1,
-  cssClass: r,
+  className: r,
   submitClassName: a,
   onClose: l,
   onSubmit: c,
@@ -6881,7 +6890,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
     {
       open: t,
       title: e,
-      cssClass: r,
+      className: r,
       dividers: h,
       onClose: () => l?.(),
       footer: p ?? f,
@@ -6923,7 +6932,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
 }, V8 = ({
   fieldTitle: e,
   optional: t,
-  elementCssClass: s,
+  elementClassName: s,
   elementId: o,
   errorText: i,
   ...n
@@ -6939,7 +6948,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
   /* @__PURE__ */ v(
     Yb,
     {
-      cssClass: s,
+      className: s,
       elementId: o,
       invalid: !!i,
       ...n
@@ -6950,14 +6959,14 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
 var _n = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(_n || {});
 const Zb = {
   [_n.Small]: {
-    textClass: "text-xs px-1",
-    containerClass: "px-[6px] py-1 h-[22px]",
+    textClassName: "text-xs px-1",
+    containerClassName: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
   [_n.Base]: {
-    textClass: "text-sm px-2",
-    containerClass: "px-3 py-2 h-[38px]",
+    textClassName: "text-sm px-2",
+    containerClassName: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
@@ -6968,8 +6977,8 @@ const Zb = {
   disabled: o,
   readonly: i,
   invalid: n,
-  cssClass: r,
-  containerCssClass: a,
+  className: r,
+  containerClassName: a,
   onChange: l,
   size: c = _n.Base,
   allowClear: d = !0
@@ -6994,7 +7003,7 @@ const Zb = {
         n && "dial-input-error",
         o && "dial-input-disable",
         i && "dial-input-readonly",
-        p.containerClass,
+        p.containerClassName,
         a
       ),
       children: [
@@ -7024,7 +7033,7 @@ const Zb = {
             className: Y(
               "border-0 bg-transparent w-full",
               r,
-              p.textClass
+              p.textClassName
             ),
             onChange: (m) => !i && g(m.currentTarget.value)
           }
@@ -7052,10 +7061,10 @@ const Zb = {
   placeholder: e = "",
   selectedItems: t = [],
   updateSelected: s,
-  listCssClass: o,
-  listElementCssClass: i,
-  containerCssClass: n,
-  inputCssClass: r
+  listClassName: o,
+  listElementClassName: i,
+  containerClassName: n,
+  inputClassName: r
 }) => {
   const [a, l] = I(""), c = k(
     (u) => {
@@ -7080,8 +7089,8 @@ const Zb = {
           eg,
           {
             selectedItems: t,
-            listCssClass: o,
-            listElementCssClass: i
+            listClassName: o,
+            listElementClassName: i
           }
         ),
         /* @__PURE__ */ v(
@@ -7196,7 +7205,7 @@ const Zb = {
       tag: i,
       remove: (r) => s?.(r, o),
       iconBefore: n ? /* @__PURE__ */ v(Ne, { icon: n }) : null,
-      cssClass: "max-w-full"
+      className: "max-w-full"
     },
     o
   );
@@ -7221,7 +7230,7 @@ const o0 = ({
   emptyStateDescription: f,
   emptyStateIcon: m,
   disabled: C = !1,
-  cssClass: w,
+  className: w,
   closable: b = !1,
   header: S,
   footer: y,
@@ -7520,8 +7529,8 @@ const o0 = ({
   fieldTitle: e,
   optional: t,
   captionDescription: s,
-  containerCssClass: o,
-  selectCssClass: i,
+  containerClassName: o,
+  selectClassName: i,
   error: n,
   elementId: r,
   description: a,
@@ -7557,14 +7566,14 @@ const o0 = ({
       description: a,
       error: n,
       captionDescription: s,
-      cssClass: o,
+      className: o,
       readonly: l,
       value: h(),
       defaultEmptyText: d,
       children: /* @__PURE__ */ v(
         o0,
         {
-          cssClass: i,
+          className: i,
           value: c,
           elementId: r,
           ...u
@@ -8240,7 +8249,7 @@ const C0 = function(t, s, o) {
   ] });
 }, w0 = ({
   iconBefore: e,
-  cssClass: t,
+  className: t,
   errorText: s,
   ...o
 }) => {
@@ -8251,7 +8260,7 @@ const C0 = function(t, s, o) {
       ...o,
       iconBefore: /* @__PURE__ */ v("div", { className: "mr-2", children: i ? /* @__PURE__ */ v(Bl, { ...re, className: "text-error" }) : e }),
       tooltipTriggerClassName: "flex-1 min-w-0",
-      cssClass: Y(i ? "text-error" : "", t),
+      className: Y(i ? "text-error" : "", t),
       tooltipText: i && s ? s : void 0,
       hideBorder: !0
     }
@@ -8440,7 +8449,7 @@ const H0 = ({
       {
         ...i,
         extension: r ?? "",
-        cssClass: "text-secondary",
+        className: "text-secondary",
         indicator: s ? /* @__PURE__ */ v(zn, {}) : null,
         label: "File type icon"
       }
@@ -8453,7 +8462,7 @@ const H0 = ({
         icon: /* @__PURE__ */ v(
           zl,
           {
-            className: i.cssClass,
+            className: i.className,
             size: i.size ?? re.size,
             stroke: i.stroke ?? re.stroke
           }
@@ -8468,7 +8477,7 @@ const H0 = ({
   elementId: s,
   loading: o = !1,
   shared: i = !1,
-  iconCssClass: n,
+  iconClassName: n,
   iconIndicator: r,
   iconLabel: a,
   iconSize: l,
@@ -8485,7 +8494,7 @@ const H0 = ({
       name: e,
       type: t,
       label: a,
-      cssClass: n,
+      className: n,
       indicator: r,
       size: l,
       stroke: c,
@@ -8496,7 +8505,7 @@ const H0 = ({
   /* @__PURE__ */ v(
     No,
     {
-      containerCssClass: "!h-6 py-[1px] pl-[7px] pr-[7px]",
+      containerClassName: "!h-6 py-[1px] pl-[7px] pr-[7px]",
       elementId: s,
       defaultValue: e,
       onChange: p,
@@ -8604,7 +8613,7 @@ const dg = ({
       loading: i,
       shared: n,
       iconSize: r,
-      cssClass: "max-w-[428px] truncate"
+      className: "max-w-[428px] truncate"
     }
   ) : /* @__PURE__ */ v(
     Uh,
@@ -8612,7 +8621,7 @@ const dg = ({
       name: e,
       shared: n,
       iconSize: r,
-      cssClass: "max-w-[428px]"
+      className: "max-w-[428px]"
     }
   );
 }, ug = (e) => {
@@ -8690,7 +8699,7 @@ const dg = ({
         Nt,
         {
           trigger: [At.ContextMenu],
-          cssClass: "w-full",
+          className: "w-full",
           anchorToMouse: !0,
           menu: { items: ae },
           children: /* @__PURE__ */ z(
@@ -8749,7 +8758,7 @@ const dg = ({
                     placement: "bottom-start",
                     allowedPlacements: ["top-start", "top-end"],
                     menu: { items: ae },
-                    cssClass: "sticky right-0",
+                    className: "sticky right-0",
                     children: /* @__PURE__ */ v(
                       Ne,
                       {
@@ -8783,8 +8792,8 @@ const dg = ({
   makeHref: i,
   rootItemPath: n,
   rootItemLabel: r,
-  cssClass: a,
-  breadcrumbCssClass: l,
+  className: a,
+  breadcrumbClassName: l,
   searchable: c = !0,
   value: d,
   elementId: u = "fm-search",
@@ -8792,8 +8801,8 @@ const dg = ({
   readonly: g,
   invalid: p,
   onSearchChange: f,
-  searchCssClass: m,
-  searchContainerCssClass: C
+  searchClassName: m,
+  searchContainerClassName: C
 }) => {
   const w = B(() => {
     if (!o) return;
@@ -8854,8 +8863,8 @@ const dg = ({
             disabled: h,
             readonly: g,
             invalid: p,
-            cssClass: m,
-            containerCssClass: C
+            className: m,
+            containerClassName: C
           }
         )
       }
@@ -47516,7 +47525,7 @@ const qA = ({
   rowData: t,
   additionalGridOptions: s,
   getContextMenuItems: o,
-  cssClass: i,
+  className: i,
   ariaLabel: n = "Data grid",
   withSelectionColumn: r = !0,
   wrapCustomCellRenderers: a = !0,
@@ -47569,7 +47578,7 @@ const qA = ({
       ariaLabel: "Select all rows",
       checked: F === "checked",
       indeterminate: F === "indeterminate",
-      cssClass: `dial-header-select ${F}`,
+      className: `dial-header-select ${F}`,
       onChange: M
     }
   ) }), [F, M]), ie = k(
@@ -47583,12 +47592,12 @@ const qA = ({
             menu: { items: ce },
             anchorToMouse: !0,
             matchReferenceWidth: !0,
-            cssClass: "w-full",
+            className: "w-full",
             children: /* @__PURE__ */ v("span", { className: "block min-w-0 h-full max-w-full", children: /* @__PURE__ */ v(
               Yt,
               {
                 text: V,
-                cssClass: "max-w-full h-full"
+                className: "max-w-full h-full"
               }
             ) })
           }
@@ -47606,7 +47615,7 @@ const qA = ({
           id: Se,
           ariaLabel: "Select row",
           checked: V,
-          cssClass: "dial-row-select",
+          className: "dial-row-select",
           onChange: (xe) => {
             oe.data && T(oe.data, !!xe);
           }
@@ -47633,7 +47642,7 @@ const qA = ({
             menu: { items: he },
             anchorToMouse: !0,
             matchReferenceWidth: !0,
-            cssClass: "w-full h-full",
+            className: "w-full h-full",
             children: /* @__PURE__ */ v("span", { className: "block min-w-0 max-w-full flex-1", children: ke })
           }
         );
@@ -48484,7 +48493,7 @@ const u8 = ({
   return e >= s ? `${(e / s).toFixed(1)} MB` : e >= t ? `${(e / t).toFixed(0)} KB` : `${e} bytes`;
 }, m8 = ({
   children: e,
-  cssClass: t,
+  className: t,
   items: s = [],
   rootItem: o,
   path: i,
@@ -48706,7 +48715,7 @@ const u8 = ({
     expandedPaths: l?.expandedPaths,
     onExpandedPathsChange: l?.onExpandedPathsChange
   }), $m = {
-    cssClass: t,
+    className: t,
     items: s,
     rootItem: o,
     filesLoading: n,
@@ -49086,7 +49095,7 @@ const u8 = ({
   r
 ]), y8 = (e) => /* @__PURE__ */ v(m8, { ...e, children: /* @__PURE__ */ v(R8, {}) }), R8 = () => {
   const {
-    cssClass: e,
+    className: e,
     items: t,
     rootItem: s,
     filesLoading: o,
@@ -49150,7 +49159,7 @@ const u8 = ({
   } = C8(), {
     width: Bt = P0,
     title: Xt = T0,
-    containerCssClass: co = E0,
+    containerClassName: co = E0,
     additionalButtons: Me,
     ...tt
   } = i ?? {}, {
@@ -49384,7 +49393,7 @@ const u8 = ({
                 {
                   width: Bt,
                   title: Xt,
-                  containerCssClass: co,
+                  containerClassName: co,
                   additionalButtons: Me,
                   isOpened: g,
                   onToggle: p,
@@ -49439,7 +49448,7 @@ const u8 = ({
                     getRowId: (de) => de.path,
                     loading: o,
                     getContextMenuItems: sn,
-                    cssClass: Y(
+                    className: Y(
                       he ? "border border-dashed border-accent-primary" : "",
                       ke && !he ? "border border-dashed border-primary" : ""
                     ),
@@ -49508,7 +49517,7 @@ const u8 = ({
     if (e)
       return Object.values(Ml).map((n) => ({
         id: n,
-        name: e?.[n] || n.replace("_", " ")
+        label: e?.[n] || n.replace("_", " ")
       }));
   }, [e]);
   return {