@sisense/sdk-shared-ui 2.2.0 → 2.3.1

package/dist/{Button-Y7DwfxdO.js → Button-cvim-8Bz.js}

@@ -1,71 +1,43 @@
-import { jsxs as G, jsx as b } from "react/jsx-runtime";
+import { jsxs as J, jsx as s } from "react/jsx-runtime";
 import * as x from "react";
-import { forwardRef as U } from "react";
-import { g as A, b as F, s as C, r as K, d as l, m as Y, e as q, f as $, h as J, j as g, a as Q, E as X, T as Z } from "./emotion-cache-provider-CsTOkc-k.js";
-import { d as oo } from "./deepmerge-DNqbOtFI.js";
-import { siColors as i, sfColors as S } from "./lib/themes/themes.js";
+import { forwardRef as Q } from "react";
+import { g as X, a as Z, s as f, r as oo, d as e, m as to, n as ao, e as no, f as N, h as ro, o as y, i as io, l as eo, E as so, T as lo } from "./emotion-cache-provider-B6yKtm_a.js";
+import { siColors as i, sfColors as I } from "./lib/themes/themes.js";
 import { P as t } from "./index-D0lMis-I.js";
-import { c as to } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
-import { B as ao } from "./ButtonBase-UWHDpyst.js";
-function k(o, r) {
-  const a = {
-    ...r
-  };
-  for (const e in o)
-    if (Object.prototype.hasOwnProperty.call(o, e)) {
-      const n = e;
-      if (n === "components" || n === "slots")
-        a[n] = {
-          ...o[n],
-          ...a[n]
-        };
-      else if (n === "componentsProps" || n === "slotProps") {
-        const s = o[n], d = r[n];
-        if (!d)
-          a[n] = s || {};
-        else if (!s)
-          a[n] = d;
-        else {
-          a[n] = {
-            ...d
-          };
-          for (const p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p)) {
-              const c = p;
-              a[n][c] = k(s[c], d[c]);
-            }
-        }
-      } else a[n] === void 0 && (a[n] = o[n]);
-    }
-  return a;
-}
-function ro(o) {
-  return A("MuiButton", o);
+import { c as po } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
+import { B as co } from "./ButtonBase-4TqAVSBf.js";
+import { u as uo } from "./useId-CK6Kn3Tn.js";
+import { C as go } from "./CircularProgress-B3FkrcM6.js";
+function vo(o) {
+  return X("MuiButton", o);
 }
-const u = F("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), T = /* @__PURE__ */ x.createContext({});
-process.env.NODE_ENV !== "production" && (T.displayName = "ButtonGroupContext");
-const R = /* @__PURE__ */ x.createContext(void 0);
-process.env.NODE_ENV !== "production" && (R.displayName = "ButtonGroupButtonContext");
-const no = (o) => {
+const g = Z("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge", "loading", "loadingWrapper", "loadingIconPlaceholder", "loadingIndicator", "loadingPositionCenter", "loadingPositionStart", "loadingPositionEnd"]), L = /* @__PURE__ */ x.createContext({});
+process.env.NODE_ENV !== "production" && (L.displayName = "ButtonGroupContext");
+const M = /* @__PURE__ */ x.createContext(void 0);
+process.env.NODE_ENV !== "production" && (M.displayName = "ButtonGroupButtonContext");
+const bo = (o) => {
   const {
-    color: r,
-    disableElevation: a,
-    fullWidth: e,
-    size: n,
-    variant: s,
-    classes: d
-  } = o, p = {
-    root: ["root", s, `${s}${l(r)}`, `size${l(n)}`, `${s}Size${l(n)}`, `color${l(r)}`, a && "disableElevation", e && "fullWidth"],
-    label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${l(n)}`],
-    endIcon: ["icon", "endIcon", `iconSize${l(n)}`]
-  }, c = J(p, ro, d);
+    color: a,
+    disableElevation: n,
+    fullWidth: r,
+    size: d,
+    variant: p,
+    loading: v,
+    loadingPosition: m,
+    classes: S
+  } = o, C = {
+    root: ["root", v && "loading", p, `${p}${e(a)}`, `size${e(d)}`, `${p}Size${e(d)}`, `color${e(a)}`, n && "disableElevation", r && "fullWidth", v && `loadingPosition${e(m)}`],
+    startIcon: ["icon", "startIcon", `iconSize${e(d)}`],
+    endIcon: ["icon", "endIcon", `iconSize${e(d)}`],
+    loadingIndicator: ["loadingIndicator"],
+    loadingWrapper: ["loadingWrapper"]
+  }, B = ro(C, vo, S);
   return {
-    ...d,
+    ...S,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...c
+    ...B
   };
-}, O = [{
+}, H = [{
   props: {
     size: "small"
   },
@@ -92,20 +64,20 @@ const no = (o) => {
       fontSize: 22
     }
   }
-}], eo = C(ao, {
-  shouldForwardProp: (o) => K(o) || o === "classes",
+}], yo = f(co, {
+  shouldForwardProp: (o) => oo(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, r) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: n
     } = o;
-    return [r.root, r[a.variant], r[`${a.variant}${l(a.color)}`], r[`size${l(a.size)}`], r[`${a.variant}Size${l(a.size)}`], a.color === "inherit" && r.colorInherit, a.disableElevation && r.disableElevation, a.fullWidth && r.fullWidth];
+    return [a.root, a[n.variant], a[`${n.variant}${e(n.color)}`], a[`size${e(n.size)}`], a[`${n.variant}Size${e(n.size)}`], n.color === "inherit" && a.colorInherit, n.disableElevation && a.disableElevation, n.fullWidth && a.fullWidth, n.loading && a.loading];
   }
-})(Y(({
+})(to(({
   theme: o
 }) => {
-  const r = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], n = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -118,7 +90,7 @@ const no = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${u.disabled}`]: {
+    [`&.${g.disabled}`]: {
       color: (o.vars || o).palette.action.disabled
     },
     variants: [{
@@ -139,10 +111,10 @@ const no = (o) => {
         "&:active": {
           boxShadow: (o.vars || o).shadows[8]
         },
-        [`&.${u.focusVisible}`]: {
+        [`&.${g.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${u.disabled}`]: {
+        [`&.${g.disabled}`]: {
           color: (o.vars || o).palette.action.disabled,
           boxShadow: (o.vars || o).shadows[0],
           backgroundColor: (o.vars || o).palette.action.disabledBackground
@@ -158,7 +130,7 @@ const no = (o) => {
         borderColor: "var(--variant-outlinedBorder, currentColor)",
         backgroundColor: "var(--variant-outlinedBg)",
         color: "var(--variant-outlinedColor)",
-        [`&.${u.disabled}`]: {
+        [`&.${g.disabled}`]: {
           border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
         }
       }
@@ -171,22 +143,22 @@ const no = (o) => {
         color: "var(--variant-textColor)",
         backgroundColor: "var(--variant-textBg)"
       }
-    }, ...Object.entries(o.palette).filter(to()).map(([e]) => ({
+    }, ...Object.entries(o.palette).filter(po()).map(([r]) => ({
       props: {
-        color: e
+        color: r
       },
       style: {
-        "--variant-textColor": (o.vars || o).palette[e].main,
-        "--variant-outlinedColor": (o.vars || o).palette[e].main,
-        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / 0.5)` : g(o.palette[e].main, 0.5),
-        "--variant-containedColor": (o.vars || o).palette[e].contrastText,
-        "--variant-containedBg": (o.vars || o).palette[e].main,
+        "--variant-textColor": (o.vars || o).palette[r].main,
+        "--variant-outlinedColor": (o.vars || o).palette[r].main,
+        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / 0.5)` : y(o.palette[r].main, 0.5),
+        "--variant-containedColor": (o.vars || o).palette[r].contrastText,
+        "--variant-containedBg": (o.vars || o).palette[r].main,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": (o.vars || o).palette[e].dark,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[e].main, o.palette.action.hoverOpacity),
-            "--variant-outlinedBorder": (o.vars || o).palette[e].main,
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[e].main, o.palette.action.hoverOpacity)
+            "--variant-containedBg": (o.vars || o).palette[r].dark,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : y(o.palette[r].main, o.palette.action.hoverOpacity),
+            "--variant-outlinedBorder": (o.vars || o).palette[r].main,
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : y(o.palette[r].main, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -197,12 +169,12 @@ const no = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : r,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity),
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity)
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : n,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : y(o.palette.text.primary, o.palette.action.hoverOpacity),
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : y(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -269,13 +241,13 @@ const no = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${u.focusVisible}`]: {
+        [`&.${g.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${u.disabled}`]: {
+        [`&.${g.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -286,18 +258,32 @@ const no = (o) => {
       style: {
         width: "100%"
       }
+    }, {
+      props: {
+        loadingPosition: "center"
+      },
+      style: {
+        transition: o.transitions.create(["background-color", "box-shadow", "border-color"], {
+          duration: o.transitions.duration.short
+        }),
+        [`&.${g.loading}`]: {
+          color: "transparent"
+        }
+      }
     }]
   };
-})), io = C("span", {
+})), xo = f("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, r) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: n
     } = o;
-    return [r.startIcon, r[`iconSize${l(a.size)}`]];
+    return [a.startIcon, n.loading && a.startIconLoadingStart, a[`iconSize${e(n.size)}`]];
   }
-})({
+})(({
+  theme: o
+}) => ({
   display: "inherit",
   marginRight: 8,
   marginLeft: -4,
@@ -308,17 +294,39 @@ const no = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...O]
-}), so = C("span", {
+  }, {
+    props: {
+      loadingPosition: "start",
+      loading: !0
+    },
+    style: {
+      transition: o.transitions.create(["opacity"], {
+        duration: o.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: "start",
+      loading: !0,
+      fullWidth: !0
+    },
+    style: {
+      marginRight: -8
+    }
+  }, ...H]
+})), fo = f("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, r) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: n
     } = o;
-    return [r.endIcon, r[`iconSize${l(a.size)}`]];
+    return [a.endIcon, n.loading && a.endIconLoadingEnd, a[`iconSize${e(n.size)}`]];
   }
-})({
+})(({
+  theme: o
+}) => ({
   display: "inherit",
   marginRight: -4,
   marginLeft: 8,
@@ -329,62 +337,212 @@ const no = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...O]
-}), E = /* @__PURE__ */ x.forwardRef(function(r, a) {
-  const e = x.useContext(T), n = x.useContext(R), s = k(e, r), d = q({
-    props: s,
+  }, {
+    props: {
+      loadingPosition: "end",
+      loading: !0
+    },
+    style: {
+      transition: o.transitions.create(["opacity"], {
+        duration: o.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: "end",
+      loading: !0,
+      fullWidth: !0
+    },
+    style: {
+      marginLeft: -8
+    }
+  }, ...H]
+})), So = f("span", {
+  name: "MuiButton",
+  slot: "LoadingIndicator",
+  overridesResolver: (o, a) => a.loadingIndicator
+})(({
+  theme: o
+}) => ({
+  display: "none",
+  position: "absolute",
+  visibility: "visible",
+  variants: [{
+    props: {
+      loading: !0
+    },
+    style: {
+      display: "flex"
+    }
+  }, {
+    props: {
+      loadingPosition: "start"
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: "start",
+      size: "small"
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: "text",
+      loadingPosition: "start"
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: "center"
+    },
+    style: {
+      left: "50%",
+      transform: "translate(-50%)",
+      color: (o.vars || o).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: "end"
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: "end",
+      size: "small"
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: "text",
+      loadingPosition: "end"
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: "start",
+      fullWidth: !0
+    },
+    style: {
+      position: "relative",
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: "end",
+      fullWidth: !0
+    },
+    style: {
+      position: "relative",
+      right: -10
+    }
+  }]
+})), W = f("span", {
+  name: "MuiButton",
+  slot: "LoadingIconPlaceholder",
+  overridesResolver: (o, a) => a.loadingIconPlaceholder
+})({
+  display: "inline-block",
+  width: "1em",
+  height: "1em"
+}), V = /* @__PURE__ */ x.forwardRef(function(a, n) {
+  const r = x.useContext(L), d = x.useContext(M), p = ao(r, a), v = no({
+    props: p,
     name: "MuiButton"
   }), {
-    children: p,
-    color: c = "primary",
-    component: m = "button",
-    className: P,
-    disabled: B = !1,
-    disableElevation: N = !1,
-    disableFocusRipple: z = !1,
-    endIcon: h,
-    focusVisibleClassName: M,
-    fullWidth: W = !1,
-    size: H = "medium",
-    startIcon: w,
-    type: I,
-    variant: L = "text",
-    ...V
-  } = d, y = {
-    ...d,
-    color: c,
-    component: m,
-    disabled: B,
-    disableElevation: N,
-    disableFocusRipple: z,
-    fullWidth: W,
-    size: H,
-    type: I,
-    variant: L
-  }, v = no(y), j = w && /* @__PURE__ */ b(io, {
-    className: v.startIcon,
-    ownerState: y,
-    children: w
-  }), _ = h && /* @__PURE__ */ b(so, {
-    className: v.endIcon,
-    ownerState: y,
-    children: h
-  }), D = n || "";
-  return /* @__PURE__ */ G(eo, {
-    ownerState: y,
-    className: $(e.className, v.root, P, D),
-    component: m,
-    disabled: B,
-    focusRipple: !z,
-    focusVisibleClassName: $(v.focusVisible, M),
-    ref: a,
-    type: I,
-    ...V,
-    classes: v,
-    children: [j, p, _]
+    children: m,
+    color: S = "primary",
+    component: C = "button",
+    className: B,
+    disabled: z = !1,
+    disableElevation: _ = !1,
+    disableFocusRipple: P = !1,
+    endIcon: w,
+    focusVisibleClassName: D,
+    fullWidth: G = !1,
+    id: $,
+    loading: c = null,
+    loadingIndicator: U,
+    loadingPosition: b = "center",
+    size: A = "medium",
+    startIcon: k,
+    type: R,
+    variant: j = "text",
+    ...F
+  } = v, T = uo($), E = U ?? /* @__PURE__ */ s(go, {
+    "aria-labelledby": T,
+    color: "inherit",
+    size: 16
+  }), u = {
+    ...v,
+    color: S,
+    component: C,
+    disabled: z,
+    disableElevation: _,
+    disableFocusRipple: P,
+    fullWidth: G,
+    loading: c,
+    loadingIndicator: E,
+    loadingPosition: b,
+    size: A,
+    type: R,
+    variant: j
+  }, l = bo(u), K = (k || c && b === "start") && /* @__PURE__ */ s(xo, {
+    className: l.startIcon,
+    ownerState: u,
+    children: k || /* @__PURE__ */ s(W, {
+      className: l.loadingIconPlaceholder,
+      ownerState: u
+    })
+  }), Y = (w || c && b === "end") && /* @__PURE__ */ s(fo, {
+    className: l.endIcon,
+    ownerState: u,
+    children: w || /* @__PURE__ */ s(W, {
+      className: l.loadingIconPlaceholder,
+      ownerState: u
+    })
+  }), q = d || "", O = typeof c == "boolean" ? (
+    // use plain HTML span to minimize the runtime overhead
+    /* @__PURE__ */ s("span", {
+      className: l.loadingWrapper,
+      style: {
+        display: "contents"
+      },
+      children: c && /* @__PURE__ */ s(So, {
+        className: l.loadingIndicator,
+        ownerState: u,
+        children: E
+      })
+    })
+  ) : null;
+  return /* @__PURE__ */ J(yo, {
+    ownerState: u,
+    className: N(r.className, l.root, B, q),
+    component: C,
+    disabled: z || c,
+    focusRipple: !P,
+    focusVisibleClassName: N(l.focusVisible, D),
+    ref: n,
+    type: R,
+    id: c ? T : $,
+    ...F,
+    classes: l,
+    children: [K, b !== "end" && O, m, b === "end" && O, Y]
   });
 });
-process.env.NODE_ENV !== "production" && (E.propTypes = {
+process.env.NODE_ENV !== "production" && (V.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -454,6 +612,28 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
    * If defined, an `a` element will be used as the root node.
    */
   href: t.string,
+  /**
+   * @ignore
+   */
+  id: t.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: t.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: t.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: t.oneOf(["center", "end", "start"]),
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
@@ -478,7 +658,7 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const f = Q({
+const h = io({
   components: {
     MuiButton: {
       variants: [
@@ -508,10 +688,10 @@ const f = Q({
           style: {
             backgroundColor: i.StBackgroundColors.workspace,
             color: i.StInteractionColors.linkHovered,
-            border: `1px solid ${S.$SHUTTLE_GRAY_DARK}`,
+            border: `1px solid ${I.$SHUTTLE_GRAY_DARK}`,
             "&:hover": {
               backgroundColor: i.StBackgroundColors.workspace,
-              border: `1px solid ${S.$SHUTTLE_GRAY_DARK}`
+              border: `1px solid ${I.$SHUTTLE_GRAY_DARK}`
             },
             "&:disabled": {
               backgroundColor: i.StBackgroundColors.workspace
@@ -545,7 +725,7 @@ const f = Q({
             boxShadow: "none"
           },
           "&:disabled": {
-            color: S.$SHUTTLE_GRAY_DARK,
+            color: I.$SHUTTLE_GRAY_DARK,
             opacity: ".3"
           }
         }
@@ -553,17 +733,17 @@ const f = Q({
     }
   }
 });
-f.shadows[1] = "0px 0px 5px rgba(58, 67, 86, 0.2)";
-f.shadows[2] = "0 1px 3px 1px rgba(58, 67, 86, 0.3)";
-const yo = U((o, r) => {
-  const { children: a, theme: e, ...n } = o, s = e ? oo(f, {
+h.shadows[1] = "0px 0px 5px rgba(58, 67, 86, 0.2)";
+h.shadows[2] = "0 1px 3px 1px rgba(58, 67, 86, 0.3)";
+const ko = Q((o, a) => {
+  const { children: n, theme: r, ...d } = o, p = r ? eo(h, {
     components: {
-      MuiButton: e
+      MuiButton: r
     }
-  }) : f;
-  return /* @__PURE__ */ b(X, { children: /* @__PURE__ */ b(Z, { theme: s, children: /* @__PURE__ */ b(E, { ...n, ref: r, children: a }) }) });
+  }) : h;
+  return /* @__PURE__ */ s(so, { children: /* @__PURE__ */ s(lo, { theme: p, children: /* @__PURE__ */ s(V, { ...d, ref: a, children: n }) }) });
 });
 export {
-  yo as B,
-  f as b
+  ko as B,
+  h as b
 };