@splunk/react-ui 4.31.0 → 4.32.0

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 Change Log
 ============
 
+4.32.0 - June 4, 2024
+----------
+New Features:
+* `Clickable`'s `NavigationProvider` now accepts a new `onLinkClick` prop to handle click events globally (SUI-5291).
+
+Typescript:
+* `Card`'s `selected` prop now requires `onClick` to also be provided (SUI-6200).
+
 4.31.0 - May 16, 2024
 ----------
 New Features:
 * `Divider` has a new `decorative` prop for disabling the default semantics of `role="separator"`.
 
-Bug Fixes: 
+Bug Fixes:
 * `SidePanel` incorrectly rendered the overlay mask when `useLayerForClickAway={false}`. This has been fixed (SUI-6260).
 
 4.30.0 - May 6, 2024

package/Card.js

@@ -695,26 +695,24 @@
     };
     var Pe = {
         openInNewContext: false,
-        selected: false,
         showBorder: true
     };
     function _e(e) {
         return !!e.onClick || !!e.to;
     }
     function Te(e) {
-        var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.selected, i = e.showBorder, a = e.style, l = ke(e, [ "margin", "maxWidth", "minWidth", "selected", "showBorder", "style" ]);
-        var c = xe({
+        var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.showBorder, i = e.style, a = ke(e, [ "margin", "maxWidth", "minWidth", "showBorder", "style" ]);
+        var l = xe({
             minWidth: n,
             maxWidth: t,
             margin: r
-        }, a);
-        var s = {
-            showBorder: i,
-            selected: o,
+        }, i);
+        var c = {
+            showBorder: o,
             "data-test": "card",
-            style: c
+            style: l
         };
-        return [ s, l ];
+        return [ c, a ];
     }
     var Ee =  function(e) {
         be(t, e);
@@ -730,7 +728,7 @@
                 var t, n;
                 var o = e.props, i = o.selected, a = o.value;
                 (t = (n = e.props).onClick) === null || t === void 0 ? void 0 : t.call(n, r, {
-                    selected: i,
+                    selected: i || false,
                     value: a
                 });
             }));
@@ -741,29 +739,29 @@
             value: function e() {
                 if (_e(this.props)) {
                     var r = Te(this.props), t = ie(r, 2), o = t[0], i = t[1];
-                    var a = o.selected, l = o.showBorder;
-                    var c = i.children, s = i.elementRef, u = i.onClick, p = i.openInNewContext, d = i.to, f = ke(i, [ "children", "elementRef", "onClick", "openInNewContext", "to" ]);
+                    var a = o.showBorder;
+                    var l = i.children, c = i.elementRef, s = i.onClick, u = i.openInNewContext, p = i.selected, d = i.to, f = ke(i, [ "children", "elementRef", "onClick", "openInNewContext", "selected", "to" ]);
                     
                     return n().createElement(re, oe({
                         "data-clickable": true,
-                        $selected: a,
-                        $cardHasBorder: l,
-                        elementRef: s
+                        $selected: p || false,
+                        $cardHasBorder: a,
+                        elementRef: c
                     }, o, f, {
-                        onClick: u ? this.handleCardClick : undefined,
-                        openInNewContext: p,
+                        onClick: s ? this.handleCardClick : undefined,
+                        openInNewContext: u,
                         to: d || undefined
-                    }),  n().createElement(te, null, c));
+                    }),  n().createElement(te, null, l));
                 }
                 var b = Te(this.props), v = ie(b, 2), y = v[0], m = v[1];
-                var h = y.selected, g = y.showBorder;
-                var w = m.children, O = m.elementRef, x = ke(m, [ "children", "elementRef" ]);
+                var h = y.showBorder;
+                var g = m.children, w = m.elementRef, O = ke(m, [ "children", "elementRef" ]);
                 
                 return n().createElement(ee, oe({
-                    $selected: h,
-                    $cardHasBorder: g,
-                    ref: O
-                }, y, x), w);
+                    $selected: false,
+                    $cardHasBorder: h,
+                    ref: w
+                }, y, O), g);
             }
         } ]);
         return t;

package/Clickable.js

@@ -65,7 +65,7 @@
         NavigationProvider: () => /* reexport */ m,
         default: () => /* reexport */ F,
         isInternalLink: () => /* reexport */ z,
-        isRootRelativeLink: () => /* reexport */ L
+        isRootRelativeLink: () => /* reexport */ D
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -87,17 +87,18 @@
     const p = require("styled-components");
     var d =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
+    const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Clickable/ClickableStyles.ts
-    var v = d().a.withConfig({
+    var b = d().a.withConfig({
         displayName: "ClickableStyles__StyledA",
         componentId: "sc-7al1vw-0"
-    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], b.mixins.reset("inline"), b.variables.contentColorDisabled);
+    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), v.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
     var y = {
         children: i().node,
         onClick: i().func,
+        onLinkClick: i().func,
         prefix: i().string,
         transformUrl: i().func
     };
@@ -106,29 +107,30 @@
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
  */    function m(e) {
-        var t = e.children, o = e.onClick, i = e.prefix, l = e.transformUrl;
+        var t = e.children, o = e.onClick, i = e.onLinkClick, l = e.prefix, a = e.transformUrl;
         // @docs-props-type NavigationProviderProps
-                var a = (0, n.useMemo)((function() {
+                var u = (0, n.useMemo)((function() {
             var e;
-            if (l != null) {
+            if (a != null) {
                 if (false) {}
-                e = l;
-            } else if (i != null) {
+                e = a;
+            } else if (l != null) {
                 if (false) {}
                 e = function e() {
                     var t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
                     var n = arguments.length > 1 ? arguments[1] : undefined, r = n.isInternal, o = n.isRootRelative;
-                    return i != null && r && o ? "".concat(i).concat(t) : t;
+                    return l != null && r && o ? "".concat(l).concat(t) : t;
                 };
             }
             return {
                 onClick: o,
+                onLinkClick: i,
                 transformUrl: e
             };
-        }), [ o, i, l ]);
+        }), [ o, i, l, a ]);
         
         return r().createElement(h.Provider, {
-            value: a
+            value: u
         }, t);
     }
     m.propTypes = y;
@@ -139,7 +141,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function g(e, t) {
+    function k(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -152,21 +154,21 @@
         }
     }
     // CONCATENATED MODULE: ./src/Clickable/Clickable.tsx
-    function k(e) {
+    function g(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            k = function e(t) {
+            g = function e(t) {
                 return typeof t;
             };
         } else {
-            k = function e(t) {
+            g = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return k(e);
+        return g(e);
     }
-    function O() {
-        O = Object.assign || function(e) {
+    function C() {
+        C = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -177,9 +179,9 @@
             }
             return e;
         };
-        return O.apply(this, arguments);
+        return C.apply(this, arguments);
     }
-    function C(e, t) {
+    function O(e, t) {
         if (e == null) return {};
         var n = w(e, t);
         var r, o;
@@ -246,11 +248,11 @@
         return S(e, t);
     }
     function _(e) {
-        var t = N();
+        var t = L();
         return function n() {
-            var r = M(e), o;
+            var r = N(e), o;
             if (t) {
-                var i = M(this).constructor;
+                var i = N(this).constructor;
                 o = Reflect.construct(r, arguments, i);
             } else {
                 o = r.apply(this, arguments);
@@ -259,7 +261,7 @@
         };
     }
     function I(e, t) {
-        if (t && (k(t) === "object" || typeof t === "function")) {
+        if (t && (g(t) === "object" || typeof t === "function")) {
             return t;
         }
         return T(e);
@@ -270,7 +272,7 @@
         }
         return e;
     }
-    function N() {
+    function L() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -281,13 +283,13 @@
             return false;
         }
     }
-    function M(e) {
-        M = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function N(e) {
+        N = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return M(e);
+        return N(e);
     }
-    function q(e, t, n) {
+    function M(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -300,14 +302,14 @@
         }
         return e;
     }
-    var E = /^[a-z0-9]+:/;
-    var U = /^\/\//;
-    var D = /^\//;
-    var L = function e(t) {
-        return t != null && D.test(t);
+    var q = /^[a-z0-9]+:/;
+    var E = /^\/\//;
+    var U = /^\//;
+    var D = function e(t) {
+        return t != null && U.test(t);
     };
     var z = function e(t) {
-        return t != null && !E.test(t) && !U.test(t);
+        return t != null && !q.test(t) && !E.test(t);
     };
     var H = {
         /** @private */
@@ -339,13 +341,14 @@
             var r;
             x(this, n);
             r = t.call(this, e);
-            q(T(r), "el", null);
-            q(T(r), "handleMount", (function(e) {
+            M(T(r), "el", null);
+            M(T(r), "handleMount", (function(e) {
                 r.el = e;
-                g(r.props.elementRef, e);
+                k(r.props.elementRef, e);
             }));
-            q(T(r), "createHandleOnClick", (function(e) {
-                return function(t) {
+            M(T(r), "createHandleOnClick", (function() {
+                var e = r.context, t = e.onClick, n = e.onLinkClick;
+                return function(e) {
                     if (A(r.props)) {
                         // when user command-click on mac or ctrl-click on other platforms, and
                         // Tag is an <a>, let the click pass through, let the <a> to achieve user's
@@ -353,31 +356,37 @@
                         // on mac, ctrl-click will be caught and open option menu even before hitting
                         // the DOM, so we're safe to check both metaKey and ctrlKey here
                         // without platform sniffing
-                        if ((t.metaKey || t.ctrlKey) && r.props.to) {
+                        if ((e.metaKey || e.ctrlKey) && r.props.to) {
                             return;
                         }
                     }
                     if (r.props.onClick) {
-                        r.props.onClick(t);
-                    } else if (A(r.props) && e) {
-                        var n = r.props.navigationLabel;
-                        if (!n && u()(r.props.children)) {
-                            n = r.props.children;
+                        r.props.onClick(e);
+                    }
+                    var o = r.props.onClick == null && t != null;
+                    if (A(r.props) && (o || n != null)) {
+                        var i = r.props.navigationLabel;
+                        if (!i && u()(r.props.children)) {
+                            i = r.props.children;
                         }
-                        e(t, {
+                        var l = {
                             to: r.getTransformedUrl(r.props.to),
                             originalTo: r.props.to,
                             openInNewContext: r.props.openInNewContext,
-                            label: n
-                        });
+                            label: i
+                        };
+                        if (o) {
+                            t(e, l);
+                        }
+                        n === null || n === void 0 ? void 0 : n(e, l);
                     }
                 };
             }));
-            q(T(r), "getTransformedUrl", (function(e) {
+            M(T(r), "getTransformedUrl", (function(e) {
                 var t = r.context.transformUrl;
                 return t != null ? t(e, {
                     isInternal: z(e),
-                    isRootRelative: L(e)
+                    isRootRelative: D(e)
                 }) : e;
             }));
             if (false) {}
@@ -395,53 +404,52 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.context.onClick;
-                var n = this.createHandleOnClick(t);
+                var t = this.createHandleOnClick();
  // Only set the href attribute when enabled, and therefore using an <a> tag
                                 if (A(this.props)) {
-                    var o = this.props, i = o.children, l = o.openInNewContext, a = o.to, u = C(o, [ "children", "openInNewContext", "to" ]);
-                    var c = l ? "_blank" : undefined;
-                    var s = l && z(a) ? "noopener noreferrer" : undefined;
+                    var n = this.props, o = n.children, i = n.openInNewContext, l = n.to, a = O(n, [ "children", "openInNewContext", "to" ]);
+                    var u = i ? "_blank" : undefined;
+                    var c = i && z(l) ? "noopener noreferrer" : undefined;
                     
-                    return r().createElement(v, O({
+                    return r().createElement(b, C({
                         "data-test": "clickable",
                         ref: this.handleMount,
                         href: this.getTransformedUrl(this.props.to),
-                        target: c,
-                        rel: s,
-                        onClick: n
-                    }, f()(u, "disabled", "elementRef", "onClick")), i);
+                        target: u,
+                        rel: c,
+                        onClick: t
+                    }, f()(a, "disabled", "elementRef", "onClick")), o);
                 }
                 if (this.props.allowDisabledLink) {
-                    var p = this.props, d = p.children, b = C(p, [ "children" ]);
+                    var s = this.props, p = s.children, d = O(s, [ "children" ]);
                     if (this.props.disabled && this.props.to != null) {
                         
-                        return r().createElement(v, O({
+                        return r().createElement(b, C({
                             "data-test": "clickable",
                             ref: this.handleMount,
                             role: "link",
                             "aria-disabled": "true"
-                        }, f()(b, "href", "to", "elementRef", "onClick", "disabled")), d);
+                        }, f()(d, "href", "to", "elementRef", "onClick", "disabled")), p);
                     }
                 }
  // button variant
-                                var y = this.props, h = y.children, m = y.type, g = C(y, [ "children", "type" ]);
+                                var v = this.props, y = v.children, h = v.type, m = O(v, [ "children", "type" ]);
                 
-                return r().createElement(v, O({
+                return r().createElement(b, C({
                     as: "button",
                     "data-test": "clickable",
                     ref: this.handleMount,
-                    type: m || "button",
-                    onClick: n
-                }, f()(g, "elementRef", "onClick", "openInNewContext", "to")), h);
+                    type: h || "button",
+                    onClick: t
+                }, f()(m, "elementRef", "onClick", "openInNewContext", "to")), y);
             }
         } ]);
         return n;
     }(n.Component);
-    q(B, "contextType", h);
-    q(B, "propTypes", H);
-    q(B, "defaultProps", K);
-    q(B, s.legacyRefMode, true);
+    M(B, "contextType", h);
+    M(B, "propTypes", H);
+    M(B, "defaultProps", K);
+    M(B, s.legacyRefMode, true);
     /* harmony default export */    const F = B;
     // CONCATENATED MODULE: ./src/Clickable/index.ts
     module.exports = t;

package/TabBar.js

@@ -114,9 +114,9 @@
     var k =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const w = require("@splunk/react-ui/ScreenReaderContent");
-    var C =  e.n(w);
+    var S =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const S = require("@splunk/ui-utils/id");
+    const C = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const O = require("@splunk/react-ui/Clickable");
     var T =  e.n(O);
@@ -261,7 +261,7 @@
     var D = s().span.withConfig({
         displayName: "TabStyles__StyledCount",
         componentId: "sc-1ry8mzj-6"
-    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{background:", ";color:", ";}" ], c.variables.contentColorDefault, (0, 
+    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{color:", ";}" ], c.variables.contentColorDefault, (0, 
     c.pick)({
         enterprise: "inherit",
         prisma: "10px"
@@ -274,7 +274,7 @@
     }), (0, c.pick)({
         enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
         prisma: (0, l.css)([ "background:", ";" ], c.variables.neutral100)
-    }), c.variables.interactiveColorBackgroundDisabled, c.variables.contentColorDisabled);
+    }), c.variables.contentColorDisabled);
     var R = s().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
         componentId: "sc-1ry8mzj-7"
@@ -553,9 +553,9 @@
             re(Z(n), "handleBlur", (function() {
                 n.handleTooltipClose();
             }));
-            n.popoverId = (0, S.createDOMID)("popover");
-            n.ariaId = (0, S.createDOMID)("aria-id");
-            n.menuDescription = (0, S.createDOMID)("menu-description");
+            n.popoverId = (0, C.createDOMID)("popover");
+            n.ariaId = (0, C.createDOMID)("aria-id");
+            n.menuDescription = (0, C.createDOMID)("menu-description");
             n.state = {
                 open: false,
                 anchor: null
@@ -572,7 +572,7 @@
             key: "render",
             value: function e() {
                 var t = this.props, r = t.active, i = t.ariaControls, a = t.count, o = t.disabled, l = t.icon, s = t.label, c = t.tabId, u = t.maxCount, p = t.splunkTheme, v = t.to, h = t.tooltip, m = t.menu, x = t.tabKey, w = U(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "splunkTheme", "to", "tooltip", "menu", "tabKey" ]);
-                var S = this.state, O = S.anchor, T = S.open;
+                var C = this.state, O = C.anchor, T = C.open;
                 var I = this.context, j = I.appearance, q = I.disabled, A = I.iconSize, V = I.layout, B = I.width, F = I.onMenuOpen, W = I.onMenuClose, L = I.isMenuOpen, H = I.focusedTabKey;
                 var Y = w.style;
                 var G = q || o || false;
@@ -650,10 +650,10 @@
                     $withUnderline: j === "navigation"
                 }, l &&  n().createElement(E, {
                     $iconSize: J
-                }, l), s, !m && (a === 0 || a) &&  n().createElement(n().Fragment, null,  n().createElement(C(), null, " "),  n().createElement(D, {
+                }, l), s, !m && (a === 0 || a) &&  n().createElement(n().Fragment, null,  n().createElement(S(), null, " "),  n().createElement(D, {
                     "data-test": "count",
                     disabled: G
-                }, u ? K(a, u) : a)), !!m &&  n().createElement(C(), {
+                }, u ? K(a, u) : a)), !!m &&  n().createElement(S(), {
                     "aria-hidden": true,
                     id: this.menuDescription
                 }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(M, {
@@ -671,7 +671,7 @@
                     id: this.popoverId,
                     open: !!O && T,
                     align: "center"
-                },  n().createElement(R, null, h)), h &&  n().createElement(C(), {
+                },  n().createElement(R, null, h)), h &&  n().createElement(S(), {
                     "aria-hidden": "true",
                     id: this.ariaId
                 }, h));
@@ -813,8 +813,8 @@
     function ke(e) {
         var t = e.activeTabId, i = e.autoActivate, a = e.appearance, l = a === void 0 ? "navigation" : a, s = e.children, c = e.disabled, p = c === void 0 ? false : c, d = e.elementRef, f = e.iconSize, v = f === void 0 ? "inline" : f, b = e.layout, h = b === void 0 ? "horizontal" : b, y = e.onChange, m = e.tabWidth, g = ye(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabBarPropsBase
-                var x = (0, r.useState)(false), k = pe(x, 2), w = k[0], C = k[1];
-        var S = (0, r.useState)(0), O = pe(S, 2), T = O[0], I = O[1];
+                var x = (0, r.useState)(false), k = pe(x, 2), w = k[0], S = k[1];
+        var C = (0, r.useState)(0), O = pe(C, 2), T = O[0], I = O[1];
         var j = (0, r.useRef)([]);
         var z = h === "vertical" ? "down" : "right";
         var M = h === "vertical" ? "up" : "left";
@@ -868,7 +868,7 @@
             } else if (t === "end") {
                 r = ce(j.current, T, j.current.length - 1);
             } else if (h === "horizontal" && e.shiftKey && t === "f10") {
-                C((function(e) {
+                S((function(e) {
                     if (e) {
                         var t;
                         // if we're closing, we want to shift focus to the tab
@@ -878,7 +878,7 @@
                     return !e;
                 }));
             } else if (h === "horizontal" && t === "down") {
-                C(true);
+                S(true);
             }
             if (r != null) {
                 var n;
@@ -889,13 +889,13 @@
         var R = (0, r.useCallback)((function(e) {
             // prevent clicking on the menu icon from changing the active tab
             e.stopPropagation();
-            C(true);
+            S(true);
         }), []);
         var q = (0, r.useCallback)((function(e) {
             var t = e.event;
             // prevent content clicks/enter key from changing the active tab
                         t === null || t === void 0 ? void 0 : t.stopPropagation();
-            C(false);
+            S(false);
         }), []);
         var A = (0, r.useMemo)((function() {
             return {

package/Text.js

@@ -309,14 +309,8 @@
     var U = N().span.withConfig({
         displayName: "TextStyles__StyledInputWrapper",
         componentId: "eg7n6t-3"
-    })([ "", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, (0, 
+    })([ "", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, A.variables.interactiveColorBorder, A.variables.borderRadius, (0, 
     A.pick)({
-        enterprise: {
-            light: A.variables.gray60,
-            dark: A.variables.gray20
-        },
-        prisma: A.variables.interactiveColorBorder
-    }), A.variables.borderRadius, (0, A.pick)({
         enterprise: {
             light: A.variables.white,
             dark: A.variables.gray22
@@ -331,13 +325,7 @@
     }), (function(e) {
         var t = e.$hasStartAdornment;
         return t && (0, D.css)([ "padding-left:0;" ]);
-    }), (0, A.pick)({
-        enterprise: {
-            light: A.variables.gray60,
-            dark: A.variables.gray20
-        },
-        prisma: A.variables.interactiveColorBorderHover
-    }), A.variables.focusShadow, A.variables.contentColorActive, (function(e) {
+    }), A.variables.interactiveColorBorderHover, A.variables.focusShadow, A.variables.contentColorActive, (function(e) {
         var t = e.$error;
         return t && (0, D.css)([ "&,&:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}" ], A.variables.accentColorNegative, A.variables.focusShadow, A.variables.contentColorActive);
     }), (function(e) {
@@ -348,13 +336,9 @@
         return t && (0, D.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }), (function(e) {
         var t = e.disabled;
-        return t && (0, D.css)([ "", " box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);" ], (0, 
+        return t && (0, D.css)([ "border-color:", ";box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);", "" ], A.variables.interactiveColorBorderDisabled, (0, 
         A.pick)({
-            enterprise: {
-                light: (0, D.css)([ "background-color:", ";border-color:", ";" ], A.variables.gray96, A.variables.gray92),
-                dark: (0, D.css)([ "background-color:", ";border-color:", ";" ], A.variables.gray22, A.variables.gray30)
-            },
-            prisma: (0, D.css)([ "border-color:", ";" ], A.variables.interactiveColorBorderDisabled)
+            enterprise: (0, D.css)([ "background-color:", ";" ], A.variables.interactiveColorBackgroundDisabled)
         }));
     }));
     /* Some of these need greater specificity than input[type=text] */    var J = N().input.withConfig({
@@ -938,7 +922,8 @@
                     if (!k) {
                         
                         return n().createElement(re, m,  n().createElement(K, {
-                            $disabled: l
+                            $disabled: l,
+                            "data-test": "search-icon"
                         },  n().createElement(g(), {
                             screenReaderText: null,
                             hideDefaultTooltip: true,
@@ -959,6 +944,7 @@
                         }),
                         onClick: i.handleClear
                     }),  n().createElement(K, {
+                        "data-test": "search-icon",
                         $disabled: l
                     }, u ?  n().createElement(g(), {
                         screenReaderText: null,
@@ -1007,6 +993,7 @@
                 if (l && t === "search") {
                     
                     return n().createElement(re, p,  n().createElement(K, {
+                        "data-test": "search-icon",
                         $disabled: o
                     },  n().createElement(w(), {
                         "aria-label": "Search",