@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.7

package/dist/components/New/Dropdown/Dropdown.js

@@ -1,105 +1,106 @@
-import { jsxs as N, Fragment as M, jsx as n } from "react/jsx-runtime";
-import { useFloatingNodeId as he, useFloating as ge, autoUpdate as ye, offset as we, autoPlacement as ve, flip as xe, shift as Ce, size as ke, useClick as be, useHover as Pe, safePolygon as Ee, useDismiss as Ie, useRole as Ne, useInteractions as Me, FloatingTree as De, FloatingNode as Fe, FloatingPortal as Ae, FloatingFocusManager as Oe } from "@floating-ui/react";
-import { useState as W, useRef as Re, useCallback as m, useId as Te, useEffect as j, useMemo as Se, Fragment as Le } from "react";
+import { jsxs as N, Fragment as A, jsx as n } from "react/jsx-runtime";
+import { useFloatingNodeId as ge, useFloating as ye, autoUpdate as we, offset as ve, autoPlacement as xe, flip as Ce, shift as ke, size as be, useClick as Ie, useHover as Pe, safePolygon as Ee, useDismiss as Ne, useRole as Ae, useInteractions as De, FloatingTree as Me, FloatingNode as Fe, FloatingPortal as Oe, FloatingFocusManager as Te } from "@floating-ui/react";
+import { useState as K, useRef as Re, useCallback as m, useId as Se, useEffect as W, useMemo as Le, Fragment as _e } from "react";
 import { InteractiveTooltip as $e } from "../InteractiveTooltip/InteractiveTooltip.js";
-import { DropdownTrigger as y, DropdownItemType as K } from "../../../types/dropdown.js";
+import { DIAL_KIT_CLASS as j } from "../../../constants/public-class-names.js";
+import { DropdownTrigger as y, DropdownItemType as U } from "../../../types/dropdown.js";
 import { MenuItemMark as Be } from "../../../types/menu-item.js";
-import { dropdownGap as w, dropdownDividerClassName as Ye, dropdownBaseClassName as _e, dropdownListBaseClassName as We } from "./constants.js";
+import { dropdownGap as w, dropdownDividerClassName as Ye, dropdownBaseClassName as Ke, dropdownListBaseClassName as We } from "./constants.js";
 import { CloseButton as je } from "../CloseButton/CloseButton.js";
-import { MenuItem as Ke } from "../MenuItem/MenuItem.js";
-import { useThemeScope as Ue } from "../ThemeScope/ThemeScope.js";
+import { MenuItem as Ue } from "../MenuItem/MenuItem.js";
+import { useThemeScope as Ve } from "../ThemeScope/ThemeScope.js";
 import { mergeClasses as v } from "../../../utils/merge-classes.js";
-import { DropdownSubMenuItem as Ve } from "./DropdownSubMenuItem.js";
-import { resolveItemMark as Xe, getItemRole as qe } from "./item-mark.js";
-const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', Ge = (l) => !l.hasAttribute("disabled") && l.getAttribute("aria-disabled") !== "true", He = ["ArrowDown", "ArrowUp", "Home", "End"], Je = (l, d, u) => {
+import { DropdownSubMenuItem as Xe } from "./DropdownSubMenuItem.js";
+import { resolveItemMark as qe, getItemRole as ze } from "./item-mark.js";
+const Ge = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', He = (l) => !l.hasAttribute("disabled") && l.getAttribute("aria-disabled") !== "true", Je = ["ArrowDown", "ArrowUp", "Home", "End"], Qe = (l, d, u) => {
   if (l === "Home") return 0;
   if (l === "End") return u - 1;
   const a = l === "ArrowDown" ? 1 : -1;
   return d === -1 ? a === 1 ? 0 : u - 1 : (d + a + u) % u;
-}, Qe = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, ft = ({
+}, Ze = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, mt = ({
   children: l,
   items: d,
   onItemClick: u,
   menuHeader: a,
   menuFooter: h,
-  renderOverlay: P,
+  renderOverlay: I,
   trigger: f = [y.Click],
   placement: D,
   disabled: i = !1,
-  open: F,
-  defaultOpen: U = !1,
-  onOpenChange: A,
-  closable: V = !1,
-  onClose: X,
-  className: q,
+  open: M,
+  defaultOpen: V = !1,
+  onOpenChange: F,
+  closable: X = !1,
+  onClose: q,
+  className: z,
   overlayContentClassName: O,
-  separatorClassName: R,
-  listClassName: z,
-  outsidePressIgnoreRef: T,
-  outsideClosable: G = !0,
-  allowedPlacements: H,
+  separatorClassName: T,
+  listClassName: G,
+  outsidePressIgnoreRef: R,
+  outsideClosable: H = !0,
+  allowedPlacements: J,
   anchorToMouse: x = !1,
-  matchReferenceWidth: E = !0,
+  matchReferenceWidth: P = !0,
   maxDropdownHeight: S,
   initialFocus: L
 }) => {
-  const J = Ue(), [Q, Z] = W(U), I = F !== void 0, c = I ? !!F : Q, C = Re(null), [ee, te] = W(!0), o = m(
+  const Q = Ve(), [Z, ee] = K(V), E = M !== void 0, c = E ? !!M : Z, C = Re(null), [te, ne] = K(!0), o = m(
     (e, t, r) => {
-      e && te(r !== "hover" && r !== "safe-polygon"), I || Z(e), A?.(e);
+      e && ne(r !== "hover" && r !== "safe-polygon"), E || ee(e), F?.(e);
     },
-    [I, A]
-  ), $ = Te(), ne = D === void 0, B = he(), { refs: p, floatingStyles: oe, context: g } = ge({
-    nodeId: B,
+    [E, F]
+  ), _ = Se(), oe = D === void 0, $ = ge(), { refs: p, floatingStyles: re, context: g } = ye({
+    nodeId: $,
     placement: D,
     open: c,
     onOpenChange: o,
-    whileElementsMounted: ye,
+    whileElementsMounted: we,
     middleware: [
-      we({ mainAxis: w, crossAxis: 0 }),
-      ne ? ve({
+      ve({ mainAxis: w, crossAxis: 0 }),
+      oe ? xe({
         alignment: "start",
         crossAxis: !0,
         padding: w,
-        allowedPlacements: H
-      }) : xe({ padding: w }),
-      Ce({ padding: w }),
-      ke({
+        allowedPlacements: J
+      }) : Ce({ padding: w }),
+      ke({ padding: w }),
+      be({
         padding: w,
         apply({ availableWidth: e, availableHeight: t, elements: r }) {
-          const s = r.floating, b = Qe(r.reference);
+          const s = r.floating, b = Ze(r.reference);
           s.style.setProperty(
             "--fui-available-height",
             `${Math.floor(t)}px`
           ), s.style.setProperty(
             "--reference-width",
-            E ? `${Math.round(b)}px` : "0px"
-          ), E ? s.style.minWidth = `${Math.round(b)}px` : s.style.removeProperty("min-width"), s.style.maxWidth = `${Math.floor(e)}px`;
-          const _ = Math.floor(t);
-          s.style.maxHeight = `${S ? Math.min(_, S) : _}px`;
+            P ? `${Math.round(b)}px` : "0px"
+          ), P ? s.style.minWidth = `${Math.round(b)}px` : s.style.removeProperty("min-width"), s.style.maxWidth = `${Math.floor(e)}px`;
+          const Y = Math.floor(t);
+          s.style.maxHeight = `${S ? Math.min(Y, S) : Y}px`;
         }
       })
     ]
-  }), re = be(g, {
+  }), se = Ie(g, {
     enabled: f.includes(y.Click) && !i
-  }), se = Pe(g, {
+  }), le = Pe(g, {
     enabled: f.includes(y.Hover) && !i,
     move: !1,
     restMs: 40,
     handleClose: Ee(),
     delay: { open: 80, close: 80 }
-  }), le = Ie(g, {
+  }), ie = Ne(g, {
     bubbles: !0,
     referencePress: !1,
     outsidePress: (e) => {
-      if (!G) return !1;
+      if (!H) return !1;
       const t = e.target;
-      return !(T?.current && t instanceof Node && T.current.contains(t));
+      return !(R?.current && t instanceof Node && R.current.contains(t));
     }
-  }), ie = Ne(g, { role: "menu" }), { getReferenceProps: ce, getFloatingProps: ae } = Me([
-    re,
+  }), ce = Ae(g, { role: "menu" }), { getReferenceProps: ae, getFloatingProps: de } = De([
     se,
     le,
-    ie
+    ie,
+    ce
   ]), k = m(
     (e, t) => {
       p.setPositionReference({
@@ -116,7 +117,7 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
       });
     },
     [p]
-  ), de = m(
+  ), ue = m(
     (e) => {
       !f.includes(y.ContextMenu) || i || (e.preventDefault(), x && (k(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
@@ -124,7 +125,7 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
       )), o(!0));
     },
     [x, i, o, k, f]
-  ), ue = m(
+  ), fe = m(
     (e) => {
       !x || i || (f.includes(y.ContextMenu) && c && o(!1), k(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
@@ -133,50 +134,54 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
     },
     [x, i, k, c, f, o]
   );
-  j(() => {
+  W(() => {
     i && c && o(!1);
   }, [i, c, o]);
-  const fe = m(
+  const pe = m(
     (e) => {
-      if (e.defaultPrevented || !He.includes(e.key)) return;
+      if (e.defaultPrevented || !Je.includes(e.key)) return;
       const t = Array.from(
         e.currentTarget.querySelectorAll(
-          ze
+          Ge
         )
-      ).filter(Ge);
+      ).filter(He);
       if (t.length === 0) return;
       e.preventDefault();
       const r = e.currentTarget.ownerDocument.activeElement, s = t.findIndex((b) => b === r);
-      t[Je(e.key, s, t.length)]?.focus();
+      t[Qe(e.key, s, t.length)]?.focus();
     },
     []
-  ), Y = m(
+  ), B = m(
     (e) => (t) => {
       e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), u?.({ key: e.key, domEvent: t }), e.selectable || o(!1));
     },
     [u, o]
-  ), pe = Se(() => P ? P() : d ? /* @__PURE__ */ N(M, { children: [
-    a && /* @__PURE__ */ n(M, { children: typeof a == "function" ? a() : a }),
+  ), me = Le(() => I ? I() : d ? /* @__PURE__ */ N(A, { children: [
+    a && /* @__PURE__ */ n(A, { children: typeof a == "function" ? a() : a }),
     /* @__PURE__ */ n(
       "div",
       {
         role: "none",
-        className: v("py-1", O),
+        className: v(
+          j.dropdownList,
+          "py-1",
+          O
+        ),
         "aria-label": "dropdown",
         children: d.map((e) => {
-          if (e.type === K.Divider)
+          if (e.type === U.Divider)
             return /* @__PURE__ */ n(
               "div",
               {
                 role: "separator",
                 className: v(
                   Ye,
-                  R
+                  T
                 )
               },
               e.key
             );
-          if (e.type === K.PlainText)
+          if (e.type === U.PlainText)
             return /* @__PURE__ */ n(
               "div",
               {
@@ -190,15 +195,15 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
             );
           if (e.children?.length)
             return /* @__PURE__ */ n(
-              Ve,
+              Xe,
               {
                 item: e,
                 onRootClose: () => o(!1)
               },
               e.key
             );
-          const t = Xe(e), r = qe(e), s = /* @__PURE__ */ n(
-            Ke,
+          const t = qe(e), r = ze(e), s = /* @__PURE__ */ n(
+            Ue,
             {
               role: r,
               "aria-checked": r === "menuitem" ? void 0 : !!e.checked,
@@ -212,11 +217,11 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
               label: e.label,
               className: e.className,
               rightControl: e.rightControl,
-              onClick: Y(e),
+              onClick: B(e),
               children: e.renderItem?.(e)
             }
           );
-          return /* @__PURE__ */ n(Le, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
+          return /* @__PURE__ */ n(_e, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
             $e,
             {
               asChild: !0,
@@ -229,21 +234,21 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
         })
       }
     ),
-    h && /* @__PURE__ */ n(M, { children: typeof h == "function" ? h() : h })
+    h && /* @__PURE__ */ n(A, { children: typeof h == "function" ? h() : h })
   ] }) : null, [
-    Y,
+    B,
     d,
     h,
     a,
-    P,
+    I,
     o,
     O,
-    R
-  ]), me = ce({
-    onContextMenu: de,
-    onMouseDown: ue
+    T
+  ]), he = ae({
+    onContextMenu: ue,
+    onMouseDown: fe
   });
-  return j(() => {
+  return W(() => {
     if (!c) return;
     const e = p.reference.current;
     let t = null;
@@ -255,55 +260,56 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
       { root: null, threshold: 0 }
     );
     return r.observe(t), () => r.disconnect();
-  }, [c, p.reference, o]), /* @__PURE__ */ n(De, { children: /* @__PURE__ */ N(Fe, { id: B, children: [
+  }, [c, p.reference, o]), /* @__PURE__ */ n(Me, { children: /* @__PURE__ */ N(Fe, { id: $, children: [
     /* @__PURE__ */ n(
       "span",
       {
         ref: p.setReference,
         className: v(
-          _e,
+          j.dropdown,
+          Ke,
           i && "!cursor-not-allowed opacity-75",
-          q
+          z
         ),
         "aria-haspopup": "menu",
         "aria-expanded": c,
-        "aria-controls": $,
-        ...me,
+        "aria-controls": _,
+        ...he,
         children: l
       }
     ),
-    c && /* @__PURE__ */ n(Ae, { children: /* @__PURE__ */ n(
-      Oe,
+    c && /* @__PURE__ */ n(Oe, { children: /* @__PURE__ */ n(
+      Te,
       {
         context: g,
         modal: !1,
-        initialFocus: L !== void 0 ? L : ee ? 0 : -1,
+        initialFocus: L !== void 0 ? L : te ? 0 : -1,
         returnFocus: !0,
         children: /* @__PURE__ */ N(
           "div",
           {
-            id: $,
+            id: _,
             ref: p.setFloating,
-            style: oe,
+            style: re,
             className: v(
               We,
-              !E && "w-max",
+              !P && "w-max",
               "overflow-auto",
-              J,
-              z
+              Q,
+              G
             ),
-            ...ae({ onKeyDown: fe }),
+            ...de({ onKeyDown: pe }),
             children: [
-              V && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
+              X && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
                 je,
                 {
                   ariaLabel: "Close dropdown",
                   onClose: (e) => {
-                    X?.(e), o(!1);
+                    q?.(e), o(!1);
                   }
                 }
               ) }),
-              pe
+              me
             ]
           }
         )
@@ -312,5 +318,5 @@ const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
   ] }) });
 };
 export {
-  ft as Dropdown
+  mt as Dropdown
 };

package/dist/components/New/EllipsisTooltip/EllipsisTooltip.js

@@ -1,34 +1,36 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { jsxs as T, jsx as e } from "react/jsx-runtime";
 import { useMemo as C } from "react";
-import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
 import { TooltipContainer as x } from "../Tooltip/TooltipContainer.js";
 import { TooltipContent as g } from "../Tooltip/TooltipContent.js";
 import { TooltipTrigger as h } from "../Tooltip/TooltipTrigger.js";
 import { useTruncation as b } from "./use-truncation.js";
-const y = ({
+import { DIAL_KIT_CLASS as j } from "../../../constants/public-class-names.js";
+const _ = ({
   text: r,
   className: m,
   contentClassName: a,
-  hideTooltip: n = !1,
+  hideTooltip: i = !1,
   id: p,
-  customTooltipContent: s,
-  ...u
+  customTooltipContent: n,
+  ...f
 }) => {
-  const { ref: c, isTruncated: e, textContent: f, remeasure: i } = b(r), o = typeof r == "string" ? r : f, l = C(() => n || !e ? null : s ?? o, [s, o, n, e]);
-  return /* @__PURE__ */ d(x, { ...u, children: [
-    /* @__PURE__ */ t(
+  const { ref: u, isTruncated: t, textContent: c, remeasure: s } = b(r), o = typeof r == "string" ? r : c, l = C(() => i || !t ? null : n ?? o, [n, o, i, t]);
+  return /* @__PURE__ */ T(x, { ...f, children: [
+    /* @__PURE__ */ e(
       h,
       {
         asChild: !0,
-        onMouseEnter: i,
-        onFocusCapture: i,
-        children: /* @__PURE__ */ t(
+        onMouseEnter: s,
+        onFocusCapture: s,
+        children: /* @__PURE__ */ e(
           "span",
           {
             id: p,
-            ref: c,
-            "aria-label": e && o ? o : void 0,
-            className: T(
+            ref: u,
+            "aria-label": t && o ? o : void 0,
+            className: d(
+              j.ellipsisTooltip,
               "block min-w-0 max-w-full flex-1 truncate text-start",
               m
             ),
@@ -37,9 +39,9 @@ const y = ({
         )
       }
     ),
-    !!l && /* @__PURE__ */ t(g, { className: a, children: l })
+    !!l && /* @__PURE__ */ e(g, { className: a, children: l })
   ] });
 };
 export {
-  y as EllipsisTooltip
+  _ as EllipsisTooltip
 };

package/dist/components/New/FileDropzone/FileDropzone.js

@@ -6,48 +6,49 @@ import { Label as U } from "../Label/Label.js";
 import { DIAL_KIT_ICON_STROKE as Z } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as q } from "../../../constants/icon.js";
 import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
-import { matchesAccept as E } from "../../../utils/file-accept.js";
+import { matchesAccept as L } from "../../../utils/file-accept.js";
 import { mergeClasses as d } from "../../../utils/merge-classes.js";
-const er = ({
+import { DIAL_KIT_CLASS as H } from "../../../constants/public-class-names.js";
+const or = ({
   labelProps: g,
   label: h,
   description: y,
-  onChange: x,
-  onReject: v,
+  onChange: D,
+  onReject: x,
   accept: n,
   multiple: f = !1,
   disabled: r = !1,
   errorText: a,
-  icon: L,
+  icon: _,
   id: C,
-  ariaLabel: O,
-  className: _
+  ariaLabel: E,
+  className: O
 }) => {
-  const F = $(), s = C ?? `file-dropzone-${F}`, D = a ? `${s}-error` : void 0, [m, I] = w(!1), c = G(0), i = t(
+  const S = $(), s = C ?? `file-dropzone-${S}`, v = a ? `${s}-error` : void 0, [m, I] = w(!1), c = G(0), i = t(
     (e) => {
       if (e.length === 0) return;
-      const b = f ? e : e.slice(0, 1), N = b.filter((p) => E(p, n)), A = b.filter((p) => !E(p, n));
-      A.length > 0 && v?.(A), N.length > 0 && x(N);
+      const b = f ? e : e.slice(0, 1), A = b.filter((p) => L(p, n)), N = b.filter((p) => !L(p, n));
+      N.length > 0 && x?.(N), A.length > 0 && D(A);
     },
-    [n, f, x, v]
-  ), j = t(
+    [n, f, D, x]
+  ), z = t(
     (e) => {
       i(Array.from(e.target.files ?? [])), e.target.value = "";
     },
     [i]
   ), l = t(() => {
     c.current = 0, I(!1);
-  }, []), k = t(
+  }, []), F = t(
     (e) => {
       r || (e.preventDefault(), c.current += 1, I(!0));
     },
     [r]
-  ), z = t(
+  ), j = t(
     (e) => {
       r || (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
     },
     [r]
-  ), S = t(() => {
+  ), k = t(() => {
     r || (c.current -= 1, c.current <= 0 && l());
   }, [r, l]), K = t(
     (e) => {
@@ -65,11 +66,11 @@ const er = ({
         accept: n,
         multiple: f,
         disabled: r,
-        onChange: j,
+        onChange: z,
         "aria-label": B(
-          typeof h != "string" ? O : void 0
+          typeof h != "string" ? E : void 0
         ),
-        "aria-describedby": D,
+        "aria-describedby": v,
         "aria-invalid": a ? !0 : void 0,
         className: "peer sr-only"
       }
@@ -78,11 +79,12 @@ const er = ({
       "label",
       {
         htmlFor: s,
-        onDragEnter: k,
-        onDragOver: z,
-        onDragLeave: S,
+        onDragEnter: F,
+        onDragOver: j,
+        onDragLeave: k,
         onDrop: K,
         className: d(
+          H.fileDropzone,
           "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed px-6 py-10 text-center",
           "transition-colors motion-reduce:transition-none",
           "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
@@ -90,10 +92,10 @@ const er = ({
           !r && m && "border-accent bg-control-accent-alpha",
           !r && !m && "border-secondary hover:border-accent",
           a && !m && "border-error hover:border-error",
-          _
+          O
         ),
         children: [
-          L ?? /* @__PURE__ */ o(
+          _ ?? /* @__PURE__ */ o(
             T,
             {
               size: q.LG,
@@ -127,9 +129,9 @@ const er = ({
         ]
       }
     ),
-    /* @__PURE__ */ o(R, { id: D, text: a })
+    /* @__PURE__ */ o(R, { id: v, text: a })
   ] });
 };
 export {
-  er as FileDropzone
+  or as FileDropzone
 };

package/dist/components/New/FolderPath/FolderPath.js

@@ -1,45 +1,46 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconFolder as p, IconChevronRight as I } from "@tabler/icons-react";
-import { DialBreadcrumb as f } from "../../Breadcrumb/Breadcrumb.js";
+import { jsx as r } from "react/jsx-runtime";
+import { IconFolder as I, IconChevronRight as f } from "@tabler/icons-react";
+import { DialBreadcrumb as h } from "../../Breadcrumb/Breadcrumb.js";
 import { DialIcon as t } from "../../Icon/Icon.js";
 import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as h } from "../../../constants/icon.js";
-import { mergeClasses as x } from "../../../utils/merge-classes.js";
-const F = ({
-  segments: r,
-  labelClassName: l = "dial-small-text",
-  leafClassName: m = "dial-small-semi-text",
-  className: i,
-  ariaLabel: c = "Folder path"
+import { DIAL_ICON_SIZE as x } from "../../../constants/icon.js";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as N } from "../../../constants/public-class-names.js";
+const y = ({
+  segments: e,
+  labelClassName: m = "dial-small-text",
+  leafClassName: i = "dial-small-semi-text",
+  className: c,
+  ariaLabel: d = "Folder path"
 }) => {
-  const n = /* @__PURE__ */ e(
+  const n = /* @__PURE__ */ r(
     t,
     {
-      icon: /* @__PURE__ */ e(
-        p,
+      icon: /* @__PURE__ */ r(
+        I,
         {
-          size: h.SM,
+          size: x.SM,
           stroke: s,
           "aria-hidden": "true"
         }
       ),
       className: "text-secondary"
     }
-  ), d = r.map((o, a) => ({
-    label: a === r.length - 1 ? /* @__PURE__ */ e("span", { className: m, children: o }) : o,
+  ), p = e.map((o, a) => ({
+    label: a === e.length - 1 ? /* @__PURE__ */ r("span", { className: i, children: o }) : o,
     disabled: !0,
     ...a === 0 ? { iconBefore: n } : {}
   }));
-  return /* @__PURE__ */ e(
-    f,
+  return /* @__PURE__ */ r(
+    h,
     {
-      className: i,
-      ariaLabel: c,
-      separator: /* @__PURE__ */ e(
+      className: l(N.folderPath, c),
+      ariaLabel: d,
+      separator: /* @__PURE__ */ r(
         t,
         {
-          icon: /* @__PURE__ */ e(
-            I,
+          icon: /* @__PURE__ */ r(
+            f,
             {
               size: 14,
               stroke: s,
@@ -50,9 +51,9 @@ const F = ({
           className: "text-secondary"
         }
       ),
-      pathItems: d,
-      labelClassName: x(
-        l,
+      pathItems: p,
+      labelClassName: l(
+        m,
         "text-secondary",
         "!cursor-default"
       )
@@ -60,5 +61,5 @@ const F = ({
   );
 };
 export {
-  F as FolderPath
+  y as FolderPath
 };