@epam/ai-dial-ui-kit 0.15.3 → 0.16.0-dev.10

package/dist/components/LoadFileArea/EmptyFileArea.js

@@ -1,8 +1,8 @@
-import { jsx as t, jsxs as y, Fragment as B } from "react/jsx-runtime";
+import { jsx as t, jsxs as y, Fragment as z } from "react/jsx-runtime";
 import { DialErrorText as x } from "../CaptionText/CaptionText.js";
 import { ButtonAppearance as Q } from "../../types/button.js";
 import U from "classnames";
-import { useRef as C, useState as k, useCallback as G, useMemo as L, useEffect as W } from "react";
+import { useRef as B, useState as k, useCallback as C, useMemo as G, useEffect as W } from "react";
 import { DialPrimaryButton as X } from "../Button/ButtonWrappers.js";
 import { useDrop as Y } from "../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
 import { FILE as Z } from "../../node_modules/react-dnd-html5-backend/dist/NativeTypes.js";
@@ -13,45 +13,45 @@ const nr = ({
   emptyButtonLabel: O,
   acceptTypes: A,
   maxFilesCount: m,
-  multiple: M,
+  multiple: L,
   fileFormatError: j,
-  fileCountError: w,
-  fileSizeError: R,
+  fileCountError: R,
+  fileSizeError: g,
   getIsFileFormatError: n,
   getIsFileSizeError: a
 }) => {
-  const g = C(null), h = C(null), [c, D] = k([]), [i, f] = k(!1), [u, d] = k(!1), P = G(
+  const w = B(null), h = B(null), [c, D] = k([]), [i, f] = k(!1), [d, u] = k(!1), M = C(
     (r) => {
       const e = r.target.files;
       if (e && e.length > 0) {
         const o = Array.from(e), p = n?.(o), v = a?.(o);
-        p ? f(!0) : v ? d(!0) : l(o);
+        p ? f(!0) : v ? u(!0) : l(o);
       }
     },
     [n, a, l]
-  ), s = G(
+  ), s = C(
     (r) => m && r?.length > m,
     [m]
-  ), F = L(() => i || u || s(c), [i, u, s, c]), b = () => {
-    D([]), f(!1), d(!1);
-  }, S = L(() => i ? /* @__PURE__ */ t(x, { text: j }) : u ? /* @__PURE__ */ t(x, { text: R }) : s(c) ? /* @__PURE__ */ t(x, { text: w }) : null, [
-    w,
-    j,
+  ), F = G(() => i || d || s(c), [i, d, s, c]), b = () => {
+    D([]), f(!1), u(!1);
+  }, P = G(() => i ? /* @__PURE__ */ t(x, { text: j }) : d ? /* @__PURE__ */ t(x, { text: g }) : s(c) ? /* @__PURE__ */ t(x, { text: R }) : null, [
     R,
+    j,
+    g,
     c,
     s,
     i,
-    u
+    d
   ]);
   W(() => {
     b();
   }, [A]);
-  const [{ isOver: T, canDrop: K }, V] = Y(
+  const [{ isOver: S, canDrop: K }, T] = Y(
     () => ({
       accept: [Z],
       drop(r) {
         const e = r.files, o = n?.(e) ?? !1, p = a?.(e) ?? !1, v = s?.(e) ?? !1;
-        if (f(o), d(p), o || p || v) {
+        if (f(o), u(p), o || p || v) {
           D(e);
           return;
         }
@@ -63,27 +63,27 @@ const nr = ({
       })
     }),
     [l, n, a, s]
-  ), q = (r) => {
+  ), V = (r) => {
     (r.key === "Enter" || r.key === "Space") && (r.preventDefault(), h.current?.click());
-  }, z = (r) => {
+  }, q = (r) => {
     r?.preventDefault();
     const e = Array.from(r.dataTransfer?.items ?? []);
-    f(!!n?.(e)), d(!!a?.(e)), D(e);
+    f(!!n?.(e)), u(!!a?.(e)), D(e);
   }, H = (r) => {
     r.target === r.currentTarget && b();
   }, J = U(
-    "border border-dashed rounded w-full cursor-pointer relative h-full hover:border-hover",
+    "border border-dashed rounded size-full cursor-pointer relative hover:border-hover",
     !K && !F && "border-primary",
-    K && (T ? "border-accent-primary" : "border-hover"),
+    K && (S ? "border-accent-primary" : "border-hover"),
     F && "border-error"
   );
-  return V(g), /* @__PURE__ */ y(B, { children: [
+  return T(w), /* @__PURE__ */ y(z, { children: [
     /* @__PURE__ */ y(
       "div",
       {
         className: J,
-        ref: g,
-        onDragOver: z,
+        ref: w,
+        onDragOver: q,
         onDragLeave: H,
         children: [
           /* @__PURE__ */ y(
@@ -91,7 +91,7 @@ const nr = ({
             {
               htmlFor: "file",
               tabIndex: 0,
-              onKeyDown: q,
+              onKeyDown: V,
               className: "flex flex-col items-center cursor-pointer size-full text-secondary dial-tiny-text justify-center",
               children: [
                 E && /* @__PURE__ */ t("p", { className: "mb-1", children: E }),
@@ -110,19 +110,19 @@ const nr = ({
           /* @__PURE__ */ t(
             "input",
             {
-              multiple: M,
+              multiple: L,
               id: "file",
               type: "file",
               ref: h,
               hidden: !0,
               accept: A,
-              onChange: P
+              onChange: M
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ t(B, { children: S })
+    /* @__PURE__ */ t(z, { children: P })
   ] });
 };
 export {

package/dist/components/Loader/Loader.js

@@ -3,19 +3,19 @@ import e from "classnames";
 import { DialIcon as s } from "../Icon/Icon.js";
 import { loaderIconBaseClassName as t, loaderBaseClassName as d } from "./constants.js";
 import c from "../../assets/icons/loader.svg.js";
-const g = ({
+const h = ({
   size: o = 18,
   className: a,
-  iconClassName: l,
-  fullWidth: m = !0,
-  ariaLabel: i = "Loading"
+  iconClassName: i,
+  fullWidth: l = !0,
+  ariaLabel: m = "Loading"
 }) => /* @__PURE__ */ r(
   "div",
   {
     role: "status",
     className: e({
       [d]: !0,
-      "w-full h-full": m,
+      "size-full": l,
       [a || ""]: !!a
     }),
     children: /* @__PURE__ */ r(
@@ -26,9 +26,9 @@ const g = ({
           {
             width: o,
             height: o,
-            className: e(t, l),
+            className: e(t, i),
             role: "img",
-            "aria-label": i
+            "aria-label": m
           }
         )
       }
@@ -36,5 +36,5 @@ const g = ({
   }
 );
 export {
-  g as DialLoader
+  h as DialLoader
 };

package/dist/components/New/Avatar/Avatar.js

@@ -1,31 +1,32 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useState as C } from "react";
-import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { useState as b } from "react";
+import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
 import { AvatarShape as d } from "../../../types/avatar.js";
-import { pickAvatarColor as w, extractInitials as I } from "../../../utils/avatar.js";
+import { pickAvatarColor as I, extractInitials as N } from "../../../utils/avatar.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const N = {
+const j = {
   [d.Circle]: "rounded-full",
   [d.Square]: "rounded-md"
-}, E = ({
+}, q = ({
   name: s,
   initials: c,
   src: r,
   alt: t = "",
   size: o = 32,
   shape: f = d.Circle,
-  className: h,
+  color: h,
+  className: u,
   textClassName: l,
-  onImageError: u
+  onImageError: S
 }) => {
-  const [S, p] = C(), v = !!r && S !== r, i = t !== "", m = (n) => e(
+  const [p, v] = b(), g = !!r && p !== r, i = t !== "", m = (n) => e(
     "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
-    N[f],
+    j[f],
     n,
-    h,
-    b.avatar
+    u,
+    w.avatar
   );
-  if (v)
+  if (g)
     return /* @__PURE__ */ a(
       "img",
       {
@@ -35,18 +36,18 @@ const N = {
         height: o,
         className: e(m(), "object-cover"),
         onError: (n) => {
-          p(r), u?.(n);
+          v(r), S?.(n);
         }
       }
     );
-  const { background: g, foreground: A } = w(s);
+  const { background: A, foreground: C } = h ?? I(s);
   return /* @__PURE__ */ a(
     "span",
     {
       role: i ? "img" : void 0,
       "aria-label": i ? t : void 0,
       "aria-hidden": i ? void 0 : !0,
-      className: m(e(g, A)),
+      className: m(e(A, C)),
       style: {
         width: o,
         height: o,
@@ -59,12 +60,12 @@ const N = {
             "leading-none",
             l ?? "font-semibold"
           ),
-          children: c ?? I(s)
+          children: c ?? N(s)
         }
       )
     }
   );
 };
 export {
-  E as Avatar
+  q as Avatar
 };

package/dist/components/New/BottomSheet/BottomSheet.js

@@ -1,86 +1,87 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useFloating as k, useRole as A, useDismiss as O, useInteractions as w, FloatingPortal as z, FloatingOverlay as D, FloatingFocusManager as T } from "@floating-ui/react";
-import { IconArrowLeft as j } from "@tabler/icons-react";
-import { useId as B } from "react";
-import { CloseButton as E } from "../CloseButton/CloseButton.js";
-import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
-import { GhostIconButton as P } from "../IconButton/IconButtonWrappers.js";
-import { useThemeScope as G } from "../ThemeScope/ThemeScope.js";
-import { DIAL_ICON_SIZE as R } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useFloating as k, useRole as A, useDismiss as w, useInteractions as z, FloatingPortal as D, FloatingOverlay as T, FloatingFocusManager as j } from "@floating-ui/react";
+import { IconArrowLeft as B } from "@tabler/icons-react";
+import { useId as E } from "react";
+import { CloseButton as K } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as P } from "../constants/icon.js";
+import { GhostIconButton as G } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as R } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as M } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as c } from "../../../constants/public-class-names.js";
 import { ElementSize as U } from "../../../types/size.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
 const te = ({
   open: i,
   onClose: a,
   title: t,
-  ariaLabel: c,
+  ariaLabel: d,
   onBack: s,
-  backAriaLabel: d = "Back",
-  closeAriaLabel: u = "Close",
-  closeOnOutsideClick: f = !0,
-  children: p,
-  className: h,
-  overlayClassName: b,
-  headerClassName: g,
-  style: x,
-  overlayStyle: I,
-  bodyClassName: S,
-  titleClassName: N,
-  portalId: v
+  backAriaLabel: u = "Back",
+  closeAriaLabel: f = "Close",
+  closeOnOutsideClick: p = !0,
+  children: h,
+  className: b,
+  overlayClassName: g,
+  headerClassName: x,
+  style: I,
+  overlayStyle: S,
+  bodyClassName: v,
+  titleClassName: y,
+  portalId: N
 }) => {
-  const y = G(), l = `bottom-sheet-title-${B()}`, { refs: n, context: r } = k({
+  const F = R(), l = `bottom-sheet-title-${E()}`, { refs: m, context: r } = k({
     open: i,
-    onOpenChange: (_) => {
-      _ || a();
+    onOpenChange: (O) => {
+      O || a();
     }
-  }), F = A(r, { role: "dialog" }), C = O(r, { outsidePress: f }), { getFloatingProps: L } = w([F, C]);
-  return i ? /* @__PURE__ */ e(z, { id: v, children: /* @__PURE__ */ e(
-    D,
+  }), C = A(r, { role: "dialog" }), L = w(r, { outsidePress: p }), { getFloatingProps: _ } = z([C, L]);
+  return i ? /* @__PURE__ */ e(D, { id: N, children: /* @__PURE__ */ e(
+    T,
     {
       lockScroll: !0,
-      style: I,
+      style: S,
       className: o(
         "z-popup flex items-end bg-backdrop",
-        y,
-        b
+        F,
+        g,
+        c.bottomSheetOverlay
       ),
-      children: /* @__PURE__ */ e(T, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ e(j, { context: r, initialFocus: m.floating, children: /* @__PURE__ */ n(
         "div",
         {
-          ref: n.setFloating,
-          ...L(),
+          ref: m.setFloating,
+          ..._(),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": t ? l : void 0,
-          "aria-label": t ? void 0 : c,
-          style: x,
+          "aria-label": t ? void 0 : d,
+          style: I,
           className: o(
-            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
+            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-hidden",
             "animate-slideUp motion-reduce:animate-none",
-            h,
-            M.bottomSheet
+            b,
+            c.bottomSheet
           ),
           children: [
-            t && /* @__PURE__ */ m(
+            t && /* @__PURE__ */ n(
               "div",
               {
                 className: o(
                   "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14",
-                  g
+                  x
                 ),
                 children: [
                   s && /* @__PURE__ */ e(
-                    P,
+                    G,
                     {
-                      "aria-label": d,
+                      "aria-label": u,
                       className: "absolute start-4",
                       onClick: s,
                       icon: /* @__PURE__ */ e(
-                        j,
+                        B,
                         {
-                          size: R.LG,
-                          stroke: K,
+                          size: M.LG,
+                          stroke: P,
                           className: "rtl:-scale-x-100",
                           "aria-hidden": "true"
                         }
@@ -93,15 +94,15 @@ const te = ({
                       id: l,
                       className: o(
                         "min-w-0 truncate text-primary",
-                        N ?? "dial-body-semi-text"
+                        y ?? "dial-body-semi-text"
                       ),
                       children: t
                     }
                   ),
                   /* @__PURE__ */ e(
-                    E,
+                    K,
                     {
-                      ariaLabel: u,
+                      ariaLabel: f,
                       onClose: a,
                       size: U.Standard,
                       className: "absolute end-4"
@@ -113,8 +114,8 @@ const te = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: o("min-h-0 overflow-y-auto", S),
-                children: p
+                className: o("min-h-0 overflow-y-auto", v),
+                children: h
               }
             )
           ]

package/dist/components/New/Breadcrumbs/constants.js

@@ -13,7 +13,7 @@ const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center g
   first: "shrink-0",
   middle: "min-w-0 max-w-[30%] shrink",
   last: "min-w-0 max-w-[51%] shrink"
-}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
+}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
   s,
   {
     size: i.SM,

package/dist/components/New/Calendar/constants.js

@@ -10,11 +10,11 @@ const u = "en-GB", f = {
   [e.Weekday]: "Select day"
 }, x = (
   // TODO: check after design review for input
-  "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus"
+  "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-hidden transition-colors hover:border-accent-alpha focus-within:border-accent-focus"
 ), y = (
   // TODO: check after design review for input
   "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent"
-), b = "!border-error", C = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", h = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
+), b = "!border-error", h = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", C = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
   l,
   {
     size: t.MD,
@@ -42,7 +42,7 @@ const u = "en-GB", f = {
 };
 export {
   u as DEFAULT_CALENDAR_LOCALE,
-  h as calendarDayButtonBaseClassName,
+  C as calendarDayButtonBaseClassName,
   D as calendarDayOutsideClassName,
   N as calendarDaySelectedClassName,
   v as calendarDayTodayClassName,
@@ -53,5 +53,5 @@ export {
   I as calendarIcon,
   f as calendarModeDefaultPlaceholder,
   g as calendarNavIcons,
-  C as calendarPopoverClassName
+  h as calendarPopoverClassName
 };

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

@@ -8,7 +8,7 @@ const b = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
 ), f = o(
-  "z-floating focus-visible:outline-none",
+  "z-floating focus-visible:outline-hidden",
   m
 ), I = a, v = t, y = o(
   n,

package/dist/components/New/MenuItem/MenuItem.js

@@ -1,4 +1,4 @@
-import { jsxs as i, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, Fragment as g, jsx as t } from "react/jsx-runtime";
 import { DialIcon as k } from "../../Icon/Icon.js";
 import { CheckboxBox as S } from "../Checkbox/CheckboxBox.js";
 import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
@@ -13,19 +13,19 @@ const O = ({
   description: f,
   mark: s = o.None,
   selected: r = !1,
-  danger: u = !1,
-  trailing: h,
+  danger: h = !1,
+  trailing: u,
   rightControl: m,
   ellipsisLabel: I = !1,
   labelClassName: x,
-  children: v,
-  className: d,
+  children: d,
+  className: v,
   disabled: a = !1,
   type: C = "button",
   ...w
 }) => {
-  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), n = e(
-    u && "text-error",
+  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), i = e(
+    h && "text-error",
     a && "text-control-disable-primary"
   ), p = e(
     j,
@@ -35,33 +35,33 @@ const O = ({
     y && M,
     b && H,
     a && D,
-    u && "text-error",
-    d,
+    h && "text-error",
+    v,
     A.menuItem
-  ), N = /* @__PURE__ */ i(
+  ), N = /* @__PURE__ */ n(
     "button",
     {
       type: C,
       disabled: a,
       "data-menu-item-row": m ? "" : void 0,
-      className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none" : p,
+      className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-hidden" : p,
       ...w,
       children: [
-        v ?? /* @__PURE__ */ i(g, { children: [
+        d ?? /* @__PURE__ */ n(g, { children: [
           s === o.Checkbox && /* @__PURE__ */ t(S, { isSelected: r, disabled: a }),
-          c && /* @__PURE__ */ t(k, { icon: c, className: n }),
+          c && /* @__PURE__ */ t(k, { icon: c, className: i }),
           I ? /* @__PURE__ */ t(
             T,
             {
               text: l,
-              className: e(n, x)
+              className: e(i, x)
             }
           ) : /* @__PURE__ */ t(
             "span",
             {
               className: e(
                 "min-w-0 flex-1 truncate text-start",
-                n,
+                i,
                 x
               ),
               children: l
@@ -79,7 +79,7 @@ const O = ({
           ),
           r && s === o.Check && L
         ] }),
-        h && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: h })
+        u && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", i), children: u })
       ]
     }
   );
@@ -88,7 +88,7 @@ const O = ({
       `role="none"` so the wrapper does not come between a listbox and its
       options: the row inside it keeps the role, the state and the click.
     */
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ n(
       "div",
       {
         role: "none",

package/dist/components/New/SharedEntityIndicator/SharedEntityIndicator.js

@@ -15,7 +15,7 @@ const S = ({
     role: "img",
     "aria-label": o,
     className: n(
-      "flex shrink-0 rounded-sm bg-layer-raised text-accent",
+      "flex shrink-0 rounded-xs bg-layer-raised text-accent",
       i,
       s.sharedEntityIndicator
     ),

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -68,7 +68,7 @@ const ne = ({
               inert: !t,
               style: w,
               className: r(
-                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
+                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-hidden",
                 "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
                 "transition-transform duration-300 motion-reduce:transition-none",
                 t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",

package/dist/components/Search/Search.js

@@ -52,7 +52,7 @@ const v = ({
       className: e.className,
       wrapperClassName: h(
         e.wrapperClassName,
-        a ? "!border-0 ps-5 [&>div]:!border-0" : ""
+        a ? "!border-0 !ps-5 [&>div]:!border-0" : ""
       ),
       ...f
     }

package/dist/components/Select/Select.js

@@ -410,7 +410,7 @@ const vt = ({
                 onKeyDown: (e) => {
                   e.stopPropagation();
                 },
-                className: "bg-transparent outline-none w-full dial-small-text",
+                className: "bg-transparent outline-hidden w-full dial-small-text",
                 ref: P,
                 disabled: c,
                 "aria-disabled": c,

package/dist/components/Select/constants.js

@@ -1,15 +1,15 @@
 import { jsx as e } from "react/jsx-runtime";
 import { DIAL_ICON_SIZE as t } from "../../constants/icon.js";
 import { IconChevronDown as a } from "@tabler/icons-react";
-const c = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer", r = "w-full rounded flex flex-col", n = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none", i = "bg-accent-primary-alpha", p = "bg-accent-primary-alpha border-l border-accent-primary border-1", m = "opacity-75", u = 352, f = 4, d = /* @__PURE__ */ e(a, { size: t.SM });
+const o = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer", n = "w-full rounded flex flex-col", r = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden", i = "bg-accent-primary-alpha", p = "bg-accent-primary-alpha border-l border-accent-primary", m = "opacity-75", u = 352, d = 4, f = /* @__PURE__ */ e(a, { size: t.SM });
 export {
   u as dropdownMenuMaxHeight,
-  d as selectChevronIcon,
-  n as selectOptionBaseClassName,
+  f as selectChevronIcon,
+  r as selectOptionBaseClassName,
   m as selectOptionDisabledClassName,
   i as selectOptionSelectedClassName,
   p as selectOptionSingleSelectedClassName,
-  r as selectOverlayBaseClassName,
-  f as selectSubMenuGap,
-  c as selectTriggerBaseClassName
+  n as selectOverlayBaseClassName,
+  d as selectSubMenuGap,
+  o as selectTriggerBaseClassName
 };

package/dist/components/Slider/Slider.js

@@ -121,7 +121,7 @@ const m = (t) => (t.toString().split(".")[1] ?? "").length, q = ({
                   "aria-label": j,
                   "aria-labelledby": X,
                   className: u(
-                    "dial-small-text absolute -translate-x-1/2 flex size-[38px] cursor-grab select-none items-center justify-center rounded-full bg-layer-3 text-primary shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+                    "dial-small-text absolute -translate-x-1/2 flex size-[38px] cursor-grab select-none items-center justify-center rounded-full bg-layer-3 text-primary shadow focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus",
                     P
                   ),
                   style: { left: `${v}%` },