@splunk/react-ui 4.36.0 → 4.37.0

package/CHANGELOG.md

@@ -1,6 +1,17 @@
 Change Log
 ============
 
+4.37. 0 - September 9, 2024
+----------
+New Features:
+* `Progress` supports `success` and `error` values for the `type` prop in Enterprise themes (SUI-6492).
+
+Bug Fixes:
+* Updated `Progress` animation and style to improve contrast in Enterprise themes (SUI-6492).
+* `RadioBar`'s active item now has appropriate contrast in the Prisma light theme (SUI-6609).
+* `Switch` now shows the correct cursor type when `appearance="toggle"` is `disabled` (SUI-6612).
+* `TextArea` with `startAdornment` or `endAdornment` will no longer prematurely wrap text (SUI-6613).
+
 4.36.0 - September 3, 2024
 ----------
 New Features:

package/Date.js

@@ -250,16 +250,16 @@
             } else {
                 o = a.apply(this, arguments);
             }
-            return E(this, o);
+            return R(this, o);
         };
     }
-    function E(e, t) {
+    function R(e, t) {
         if (t && (w(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return R(e);
+        return E(e);
     }
-    function R(e) {
+    function E(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
@@ -343,12 +343,12 @@
             var a;
             j(this, n);
             a = t.call(this, e);
-            W(R(a), "controlledExternally", void 0);
-            W(R(a), "focusCalledInternally", false);
-            W(R(a), "popoverId", void 0);
-            W(R(a), "calendar", null);
-            W(R(a), "openWithFocus", false);
-            W(R(a), "applyTextChange", (function(e) {
+            W(E(a), "controlledExternally", void 0);
+            W(E(a), "focusCalledInternally", false);
+            W(E(a), "popoverId", void 0);
+            W(E(a), "calendar", null);
+            W(E(a), "openWithFocus", false);
+            W(E(a), "applyTextChange", (function(e) {
                 var t = p()(a.state.tempTextInputDate, "l", a.props.locale);
                 if (t.isValid()) {
                     a.handleDateChange(e, {
@@ -361,7 +361,7 @@
                     });
                 }
             }));
-            W(R(a), "handleDateChange", (function(e, t, n) {
+            W(E(a), "handleDateChange", (function(e, t, n) {
                 var o = t.value;
                 if (n !== "textInput") {
                     a.focusCalledInternally = true;
@@ -385,7 +385,7 @@
                     });
                 }
             }));
-            W(R(a), "handleFocus", (function(e, t) {
+            W(E(a), "handleFocus", (function(e, t) {
                 var n, o;
                 if (a.focusCalledInternally) {
                     a.focusCalledInternally = false;
@@ -396,26 +396,23 @@
                 }
                 (n = (o = a.props).onFocus) === null || n === void 0 ? void 0 : n.call(o, e, t);
             }));
-            W(R(a), "handleClick", (function(e) {
-                var t, n, o;
-                if (document.activeElement !== a.state.input && ((t = a.state.anchor) === null || t === void 0 ? void 0 : t.contains(e.target))) {
-                    a.focus();
-                }
+            W(E(a), "handleClick", (function(e) {
+                var t, n;
                 if (!a.props.inputOnly && !a.state.calendarOpen) {
                     a.setState({
                         calendarOpen: true
                     });
                 }
-                (n = (o = a.props).onClick) === null || n === void 0 ? void 0 : n.call(o, e);
+                (t = (n = a.props).onClick) === null || t === void 0 ? void 0 : t.call(n, e);
             }));
-            W(R(a), "handleInputChange", (function(e, t) {
+            W(E(a), "handleInputChange", (function(e, t) {
                 var n = t.value;
                 a.setState({
                     tempTextInputDate: n,
                     calendarOpen: !a.props.inputOnly
                 });
             }));
-            W(R(a), "handleKeyDown", (function(e) {
+            W(E(a), "handleKeyDown", (function(e) {
                 var t, n;
                 var o = (0, d.keycode)(e.nativeEvent);
                 if (o === "enter" || o === "tab") {
@@ -439,21 +436,21 @@
                 }
                 (t = (n = a.props).onKeyDown) === null || t === void 0 ? void 0 : t.call(n, e);
             }));
-            W(R(a), "handleMount", (function(e) {
+            W(E(a), "handleMount", (function(e) {
                 a.setState({
                     anchor: e
                 });
                 S(a.props.elementRef, e);
             }));
-            W(R(a), "handleInputMount", (function(e) {
+            W(E(a), "handleInputMount", (function(e) {
                 a.setState({
                     input: e
                 });
             }));
-            W(R(a), "handleCalendarMount", (function(e) {
+            W(E(a), "handleCalendarMount", (function(e) {
                 a.calendar = e;
             }));
-            W(R(a), "handleRequestClose", (function(e) {
+            W(E(a), "handleRequestClose", (function(e) {
                 var t = e.event, n = e.reason;
                 if ((n === "clickAway" || n === "escapeKey") && t !== undefined && t.target !== a.state.anchor) {
                     a.applyTextChange(t);

package/Progress.js

@@ -2,33 +2,33 @@
     // webpackBootstrap
     /******/ "use strict";
     /******/ // The require scope
-    /******/    var e = {};
+    /******/    var r = {};
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ r.n = e => {
+            /******/ var a = e && e.__esModule ? 
+            /******/ () => e["default"]
+            /******/ : () => e
             /******/;
-            e.d(t, {
-                a: t
+            r.d(a, {
+                a
             });
-            /******/            return t;
+            /******/            return a;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var a in t) {
-                /******/ if (e.o(t, a) && !e.o(r, a)) {
-                    /******/ Object.defineProperty(r, a, {
+        /******/ r.d = (e, a) => {
+            /******/ for (var t in a) {
+                /******/ if (r.o(a, t) && !r.o(e, t)) {
+                    /******/ Object.defineProperty(e, t, {
                         enumerable: true,
-                        get: t[a]
+                        get: a[t]
                     });
                     /******/                }
                 /******/            }
@@ -37,89 +37,119 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ r.o = (r, e) => Object.prototype.hasOwnProperty.call(r, e)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ e.r = e => {
+        /******/ r.r = r => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
-                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                /******/ Object.defineProperty(r, Symbol.toStringTag, {
                     value: "Module"
                 });
                 /******/            }
-            /******/            Object.defineProperty(e, "__esModule", {
+            /******/            Object.defineProperty(r, "__esModule", {
                 value: true
             });
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var e = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        r.r(e);
     // EXPORTS
-        e.d(r, {
-        default: () => /* reexport */ M
+        r.d(e, {
+        default: () => /* reexport */ L
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var a =  e.n(t);
+    const a = require("react");
+    var t =  r.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var i =  e.n(n);
+    const i = require("prop-types");
+    var n =  r.n(i);
     // CONCATENATED MODULE: external "lodash/isNumber"
     const o = require("lodash/isNumber");
-    var s =  e.n(o);
+    var s =  r.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const c = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
-    var u =  e.n(l);
+    var u =  r.n(l);
     // CONCATENATED MODULE: external "tinycolor2"
     const p = require("tinycolor2");
-    var f =  e.n(p);
+    var v =  r.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-    const v = require("@splunk/react-ui/Tooltip");
-    var b =  e.n(v);
+    const b = require("@splunk/react-ui/Tooltip");
+    var f =  r.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const d = require("@splunk/react-ui/Box");
-    var m =  e.n(d);
+    const m = require("@splunk/react-ui/Box");
+    var d =  r.n(m);
     // CONCATENATED MODULE: external "@splunk/themes"
     const g = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Progress/ProgressStyles.ts
-    var y = u()(m()).withConfig({
+    var y = u()(d()).withConfig({
         displayName: "ProgressStyles__StyledBox",
         componentId: "csowex-0"
     })([ "background-color:", ";" ], (0, g.pick)({
         enterprise: g.variables.transparent,
         prisma: g.variables.neutral200
     }));
-    var h = u()(b()).withConfig({
+    var C = u()(f()).withConfig({
         displayName: "ProgressStyles__StyledTooltip",
         componentId: "csowex-1"
-    })([ "background-color:", ";height:", ";position:relative;overflow:hidden;padding-left:", ";", ";" ], (0, 
-    g.pick)({
-        enterprise: g.variables.accentColorD10,
-        prisma: (0, g.pickVariant)("$type", {
-            info: g.variables.interactiveColorPrimary,
-            success: g.variables.accentColorPositive,
-            warning: g.variables.accentColorWarning,
-            error: g.variables.accentColorNegative
-        })
+    })([ "background-color:", ";height:", ";position:relative;overflow:hidden;padding-left:", ";", ";", "" ], (0, 
+    g.pickVariant)("$type", {
+        info: {
+            enterprise: g.variables.accentColorD10,
+            prisma: g.variables.interactiveColorPrimary
+        },
+        success: {
+            enterprise: g.variables.successColorD10,
+            prisma: g.variables.accentColorPositive
+        },
+        warning: {
+            enterprise: g.variables.accentColorD10,
+            // warning not supported in enterprise, fallback to info
+            prisma: g.variables.accentColorWarning
+        },
+        error: {
+            enterprise: g.variables.errorColorD10,
+            prisma: g.variables.accentColorNegative
+        }
     }), (0, g.pick)({
         enterprise: "3px",
         prisma: "4px"
     }), (0, g.pick)({
         enterprise: g.variables.spacingSmall,
         prisma: "10px"
-    }), (function(e) {
-        var r = e.$animated;
-        return r && (0, l.css)([ "transition:width 300ms;" ]);
+    }), (function(r) {
+        var e = r.$animated;
+        return e && (0, l.css)([ "transition:width 300ms;" ]);
+    }), (0, g.pick)({
+        enterprise: (0, l.css)([ "border-right:1px solid ", ";" ], (0, g.pickVariant)("$type", {
+            info: {
+                enterprise: g.variables.accentColorD10,
+                prisma: g.variables.interactiveColorPrimary
+            },
+            success: {
+                enterprise: g.variables.successColorD10,
+                prisma: g.variables.accentColorPositive
+            },
+            warning: {
+                enterprise: g.variables.accentColorD10,
+                // warning not supported in enterprise, fallback to info
+                prisma: g.variables.accentColorWarning
+            },
+            error: {
+                enterprise: g.variables.errorColorD10,
+                prisma: g.variables.accentColorNegative
+            }
+        }))
     }));
-    var k = (0, l.keyframes)([ "from{opacity:0;}to{opacity:1;}" ]);
-    var C = (0, l.keyframes)([ "from{background-position:130%;}to{background-position:-30%;}" ]);
+    var h = (0, l.keyframes)([ "from{opacity:0;}to{opacity:1;}" ]);
+    var k = (0, l.keyframes)([ "from{background-position:130%;}to{background-position:-30%;}" ]);
     var w = u().div.withConfig({
         displayName: "ProgressStyles__StyledPuck",
         componentId: "csowex-2"
@@ -130,174 +160,197 @@
         enterprise: "300px",
         prisma: "100%"
     }), (0, g.pick)({
-        enterprise: (0, l.css)([ "background:linear-gradient( 90deg,", ",", ",40%,", ",80%,", " );" ], g.variables.accentColorD10, g.variables.accentColorL10, g.variables.accentColorL40, g.variables.accentColorL40),
-        prisma: function e(r) {
-            var t = r.$animated;
+        enterprise: function r() {
+            var e = (0, g.pickVariant)("$type", {
+                info: g.variables.accentColorD10,
+                success: g.variables.successColorD10,
+                warning: g.variables.accentColorD10,
+                // warning not supported in enterprise, fallback to info
+                error: g.variables.errorColorD10
+            });
             var a = (0, g.pickVariant)("$type", {
+                info: g.variables.accentColorL10,
+                success: g.variables.successColorL10,
+                warning: g.variables.accentColorL10,
+                // warning not supported in enterprise, fallback to info
+                error: g.variables.errorColorL10
+            });
+            var t = (0, g.pickVariant)("$type", {
+                info: g.variables.accentColorL30,
+                success: g.variables.successColorL30,
+                warning: g.variables.accentColorL30,
+                // warning not supported in enterprise, fallback to info
+                error: g.variables.errorColorL30
+            });
+            return (0, l.css)([ "background:linear-gradient( 90deg,", ",", ",30%,", ",60%,", ",95%,", ",98%,", " );" ], e, a, t, t, a, e);
+        },
+        prisma: function r(e) {
+            var a = e.$animated;
+            var t = (0, g.pickVariant)("$type", {
                 info: g.variables.interactiveColorPrimary,
                 success: g.variables.accentColorPositive,
                 warning: g.variables.accentColorWarning,
                 error: g.variables.accentColorNegative
             });
-            if (t) {
-                var n = (0, g.pickVariant)("$type", {
+            if (a) {
+                var i = (0, g.pickVariant)("$type", {
                     info: g.variables.statusColorInfo,
                     success: g.variables.statusColorNormal,
                     warning: g.variables.statusColorMedium,
                     error: g.variables.statusColorHigh
                 });
-                return (0, l.css)([ "background:radial-gradient( circle at center,", ",", " 30% );" ], n, a);
+                return (0, l.css)([ "background:radial-gradient( circle at center,", ",", " 30% );" ], i, t);
             }
-            return (0, l.css)([ "background:", ";" ], a);
+            return (0, l.css)([ "background:", ";" ], t);
         }
-    }), (function(e) {
-        return e.$animated && (0, g.pick)({
-            enterprise: (0, l.css)([ "animation-duration:1500ms;animation-name:", ";animation-iteration-count:infinite;animation-direction:alternate;" ], k),
-            prisma: function r() {
-                var t = (0, g.pickVariant)("$type", {
+    }), (function(r) {
+        return r.$animated && (0, g.pick)({
+            enterprise: (0, l.css)([ "animation-duration:1500ms;animation-name:", ";animation-iteration-count:infinite;animation-direction:alternate;" ], h),
+            prisma: function e() {
+                var a = (0, g.pickVariant)("$type", {
                     info: g.variables.statusColorInfo,
                     success: g.variables.statusColorNormal,
                     warning: g.variables.statusColorMedium,
                     error: g.variables.statusColorHigh
-                })(e);
-                return (0, l.css)([ "background-size:200% 100%;animation:", " 1500ms infinite cubic-bezier(0.33,0,0.67,1);&::after{content:'';display:block;width:60px;background:linear-gradient( to right,rgba(255,255,255,0),", " 70%,rgba(255,255,255,0.75) );height:100%;position:absolute;right:0;}" ], C, f()(t(e)).setAlpha(.75).toRgbString());
+                })(r);
+                return (0, l.css)([ "background-size:200% 100%;animation:", " 1500ms infinite cubic-bezier(0.33,0,0.67,1);&::after{content:'';display:block;width:60px;background:linear-gradient( to right,rgba(255,255,255,0),", " 70%,rgba(255,255,255,0.75) );height:100%;position:absolute;right:0;}" ], k, v()(a(r)).setAlpha(.75).toRgbString());
             }
         });
     }));
     // CONCATENATED MODULE: ./src/Progress/Progress.tsx
     function S() {
-        S = Object.assign || function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var a in t) {
-                    if (Object.prototype.hasOwnProperty.call(t, a)) {
-                        e[a] = t[a];
+        S = Object.assign || function(r) {
+            for (var e = 1; e < arguments.length; e++) {
+                var a = arguments[e];
+                for (var t in a) {
+                    if (Object.prototype.hasOwnProperty.call(a, t)) {
+                        r[t] = a[t];
                     }
                 }
             }
-            return e;
+            return r;
         };
         return S.apply(this, arguments);
     }
-    function O(e, r) {
-        return _(e) || $(e, r) || j(e, r) || x();
+    function O(r, e) {
+        return D(r) || j(r, e) || P(r, e) || x();
     }
     function x() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function j(e, r) {
-        if (!e) return;
-        if (typeof e === "string") return P(e, r);
-        var t = Object.prototype.toString.call(e).slice(8, -1);
-        if (t === "Object" && e.constructor) t = e.constructor.name;
-        if (t === "Map" || t === "Set") return Array.from(e);
-        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return P(e, r);
+    function P(r, e) {
+        if (!r) return;
+        if (typeof r === "string") return $(r, e);
+        var a = Object.prototype.toString.call(r).slice(8, -1);
+        if (a === "Object" && r.constructor) a = r.constructor.name;
+        if (a === "Map" || a === "Set") return Array.from(r);
+        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return $(r, e);
     }
-    function P(e, r) {
-        if (r == null || r > e.length) r = e.length;
-        for (var t = 0, a = new Array(r); t < r; t++) {
-            a[t] = e[t];
+    function $(r, e) {
+        if (e == null || e > r.length) e = r.length;
+        for (var a = 0, t = new Array(e); a < e; a++) {
+            t[a] = r[a];
         }
-        return a;
+        return t;
     }
-    function $(e, r) {
-        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
-        var t = [];
-        var a = true;
-        var n = false;
-        var i = undefined;
+    function j(r, e) {
+        if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(r))) return;
+        var a = [];
+        var t = true;
+        var i = false;
+        var n = undefined;
         try {
-            for (var o = e[Symbol.iterator](), s; !(a = (s = o.next()).done); a = true) {
-                t.push(s.value);
-                if (r && t.length === r) break;
+            for (var o = r[Symbol.iterator](), s; !(t = (s = o.next()).done); t = true) {
+                a.push(s.value);
+                if (e && a.length === e) break;
             }
-        } catch (e) {
-            n = true;
-            i = e;
+        } catch (r) {
+            i = true;
+            n = r;
         } finally {
             try {
-                if (!a && o["return"] != null) o["return"]();
+                if (!t && o["return"] != null) o["return"]();
             } finally {
-                if (n) throw i;
+                if (i) throw n;
             }
         }
-        return t;
+        return a;
     }
-    function _(e) {
-        if (Array.isArray(e)) return e;
+    function D(r) {
+        if (Array.isArray(r)) return r;
     }
-    function q(e, r) {
-        if (e == null) return {};
-        var t = A(e, r);
-        var a, n;
+    function _(r, e) {
+        if (r == null) return {};
+        var a = q(r, e);
+        var t, i;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                a = i[n];
-                if (r.indexOf(a) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, a)) continue;
-                t[a] = e[a];
+            var n = Object.getOwnPropertySymbols(r);
+            for (i = 0; i < n.length; i++) {
+                t = n[i];
+                if (e.indexOf(t) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(r, t)) continue;
+                a[t] = r[t];
             }
         }
-        return t;
+        return a;
     }
-    function A(e, r) {
-        if (e == null) return {};
-        var t = {};
-        var a = Object.keys(e);
-        var n, i;
-        for (i = 0; i < a.length; i++) {
-            n = a[i];
-            if (r.indexOf(n) >= 0) continue;
-            t[n] = e[n];
+    function q(r, e) {
+        if (r == null) return {};
+        var a = {};
+        var t = Object.keys(r);
+        var i, n;
+        for (n = 0; n < t.length; n++) {
+            i = t[n];
+            if (e.indexOf(i) >= 0) continue;
+            a[i] = r[i];
         }
-        return t;
+        return a;
     }
-    var I = {
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        percentage: i().number,
-        tooltip: i().node,
-        type: i().oneOf([ "info", "success", "warning", "error" ])
+    var A = {
+        elementRef: n().oneOfType([ n().func, n().object ]),
+        percentage: n().number,
+        tooltip: n().node,
+        type: n().oneOf([ "info", "success", "warning", "error" ])
     };
-    function T(e) {
-        var r = e.percentage, n = e.tooltip, i = e.type, o = i === void 0 ? "info" : i, l = q(e, [ "percentage", "tooltip", "type" ]);
+    function I(r) {
+        var e = r.percentage, i = r.tooltip, n = r.type, o = n === void 0 ? "info" : n, l = _(r, [ "percentage", "tooltip", "type" ]);
         // @docs-props-type ProgressPropsBase
                 if (false) {}
-        var u = (0, t.useState)(false), p = O(u, 2), f = p[0], v = p[1];
-        var b = (0, c.useAnimationToggle)() === "on";
-        var d = (0, t.useCallback)((function() {
-            v(true);
+        var u = (0, a.useState)(false), p = O(u, 2), v = p[0], b = p[1];
+        var f = (0, c.useAnimationToggle)() === "on";
+        var m = (0, a.useCallback)((function() {
+            b(true);
         }), []);
-        var m = (0, t.useCallback)((function() {
-            v(false);
+        var d = (0, a.useCallback)((function() {
+            b(false);
         }), []);
-        var g = n || "".concat(r, "%");
+        var g = i || "".concat(e, "%");
         
-        return a().createElement(y, S({
-            $animated: b,
+        return t().createElement(y, S({
+            $animated: f,
             "data-test": "progress",
-            onMouseEnter: d,
-            onMouseLeave: m
-        }, l), s()(r) &&  a().createElement(h, {
+            onMouseEnter: m,
+            onMouseLeave: d
+        }, l), s()(e) &&  t().createElement(C, {
             inline: false,
-            open: f,
+            open: v,
             content: g,
             style: {
-                width: "".concat(r, "%")
+                width: "".concat(e, "%")
             },
             role: "progressbar",
-            "aria-valuenow": r,
+            "aria-valuenow": e,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            $animated: b,
+            $animated: f,
             $type: o
-        },  a().createElement(w, {
-            $animated: b,
+        },  t().createElement(w, {
+            $animated: f,
             $type: o
         })));
     }
-    T.propTypes = I;
-    /* harmony default export */    const M = T;
+    I.propTypes = A;
+    /* harmony default export */    const L = I;
     // CONCATENATED MODULE: ./src/Progress/index.ts
-    module.exports = r;
+    module.exports = e;
     /******/})();

package/RadioBar.js

@@ -93,7 +93,11 @@
     })([ "", "" ], (0, f.pick)({
         prisma: (0, d.css)([ "border-radius:3px;font-weight:initial;height:calc(", " - 6px);min-height:calc(", " - 6px);padding:2px 12px;> span{gap:", ";}& + &{margin-left:2px;}", " &:not([disabled],[aria-disabled='true']){", "}" ], f.variables.inputHeight, f.variables.inputHeight, f.variables.spacingXSmall, (function(e) {
             var r = e.selected;
-            return r && (0, d.css)([ "box-shadow:", ";&[disabled],&[aria-disabled='true']{background-color:", ";}" ], f.variables.embossShadow, f.variables.backgroundColorPage);
+            return r && (0, d.css)([ "box-shadow:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";}&[disabled],&[aria-disabled='true']{background-color:", ";}" ], f.variables.embossShadow, (0, 
+            f.pick)({
+                dark: f.variables.interactiveColorOverlaySelected,
+                light: f.variables.white
+            }), f.variables.backgroundColorPage);
         }), (function(e) {
             var r = e.selected;
             return !r && (0, d.css)([ "color:", ";" ], f.variables.contentColorDefault);
@@ -134,9 +138,9 @@
         };
         return x.apply(this, arguments);
     }
-    function S(e, r) {
+    function k(e, r) {
         if (e == null) return {};
-        var t = j(e, r);
+        var t = S(e, r);
         var n, a;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
@@ -149,7 +153,7 @@
         }
         return t;
     }
-    function j(e, r) {
+    function S(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -161,7 +165,7 @@
         }
         return t;
     }
-    var k = {
+    var j = {
         /** @private Set by `RadioBar`. */
         append: o().bool,
         disabled: o().bool,
@@ -179,9 +183,9 @@
         value: o().any.isRequired
     };
     function C(e) {
-        var r = e.disabled, a = e.icon, o = e.label, l = e.selected, i = e.startAdornment, u = e.endAdornment, s = e.value, c = e.role, d = c === void 0 ? "radio" : c, p = S(e, [ "disabled", "icon", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
+        var r = e.disabled, a = e.icon, o = e.label, l = e.selected, i = e.startAdornment, u = e.endAdornment, s = e.value, c = e.role, d = c === void 0 ? "radio" : c, p = k(e, [ "disabled", "icon", "label", "selected", "startAdornment", "endAdornment", "value", "role" ]);
         // @docs-props-type OptionPropsBase
-                var v = (0, t.useContext)(w), b = v.onClick, O = v.appearance, j = v.error, k = v.onKeyDown, C = v.firstValue, P = v.selectedValue;
+                var v = (0, t.useContext)(w), b = v.onClick, O = v.appearance, S = v.error, j = v.onKeyDown, C = v.firstValue, P = v.selectedValue;
         var E = (0, f.useSplunkTheme)(), _ = E.isPrisma;
         if (false) {}
         var T = -1;
@@ -202,7 +206,7 @@
             icon: !_ ? a : null,
             selected: l || false,
             value: s,
-            error: j
+            error: S
         }, p, {
             onClick: l ? undefined : function(e) {
                 return b === null || b === void 0 ? void 0 : b(e, {
@@ -214,14 +218,14 @@
             "aria-checked": l,
             tabIndex: q,
             onKeyDown: function e(r) {
-                return k === null || k === void 0 ? void 0 : k(r, {
+                return j === null || j === void 0 ? void 0 : j(r, {
                     value: s,
                     label: o
                 });
             }
         }), _ && a &&  n().createElement(h, null, a), i &&  n().createElement(m, null, i), o &&  n().createElement(g, null, o), u &&  n().createElement(m, null, u));
     }
-    C.propTypes = k;
+    C.propTypes = j;
     /* harmony default export */    const P = C;
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const E = require("@splunk/react-ui/Box");
@@ -576,9 +580,9 @@
                 var O = this.filteredValues[0];
                 var x = d == null || this.filteredValues.includes(y);
                 if (false) {}
-                var S = h && o === "default" ? "default" : "subtle";
-                var j = {
-                    appearance: S,
+                var k = h && o === "default" ? "default" : "subtle";
+                var S = {
+                    appearance: k,
                     onClick: this.handleClick,
                     error: h ? u : false,
                     onKeyDown: this.handleOnKeyDown,
@@ -597,7 +601,7 @@
                     "aria-describedby": i,
                     "aria-required": p
                 }, s()(b, "onChange")),  n().createElement(w.Provider, {
-                    value: j
+                    value: S
                 }, m));
             }
         } ]);

package/Switch.js

@@ -288,7 +288,7 @@
             prisma: b.variables.transparent
         }));
     }));
-    var L = (0, f.css)([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}}&[disabled]{border:1px solid ", ";background-color:", ";", " ", "}", ";", "" ], (0, 
+    var L = (0, f.css)([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}}&[disabled]{cursor:not-allowed;border:1px solid ", ";background-color:", ";", " ", "}", ";", "" ], (0, 
     b.pick)({
         enterprise: (0, b.pick)({
             light: (0, f.css)([ "width:calc(", " * 2);background-color:", ";height:", ";" ], x, b.variables.gray98, x),

package/TextArea.js

@@ -76,8 +76,8 @@
     const s = require("lodash/has");
     var c =  e.n(s);
     // CONCATENATED MODULE: external "lodash/keys"
-    const d = require("lodash/keys");
-    var p =  e.n(d);
+    const p = require("lodash/keys");
+    var d =  e.n(p);
     // CONCATENATED MODULE: external "lodash/noop"
     const u = require("lodash/noop");
     var f =  e.n(u);
@@ -269,9 +269,11 @@
     var V = M()(H).withConfig({
         displayName: "TextAreaStyles__StyledTextAreaShadow",
         componentId: "gfy8yp-5"
-    })([ "position:absolute;overflow:hidden;left:-10000px;top:-10000px;visibility:hidden;pointer-events:none;", ";" ], (function(e) {
+    })([ "position:absolute;overflow:hidden;left:-10000px;top:-10000px;visibility:hidden;pointer-events:none;", "" ], (function(e) {
         var t = e.$startAdornmentWidth, r = e.$endAdornmentWidth;
-        return (0, T.css)([ "width:calc( 100% - ", " - ", " );" ], t || B, r || z);
+        var n = t ? "".concat(t, "px") : B;
+        var a = r ? "".concat(r, "px") : z;
+        return (0, T.css)([ "width:calc(100% - ", " - ", ");" ], n, a);
     }));
     var K = (0, k.pick)({
         enterprise: {
@@ -423,9 +425,9 @@
             var l = parseInt(o, 10);
             var s = parseInt(i.getPropertyValue("padding-top"), 10);
             var c = parseInt(i.getPropertyValue("padding-bottom"), 10);
-            var d = parseInt(i.getPropertyValue("border-top-width"), 10);
-            var p = parseInt(i.getPropertyValue("border-bottom-width"), 10);
-            var u = a.scrollHeight + d + p + 1;
+            var p = parseInt(i.getPropertyValue("border-top-width"), 10);
+            var d = parseInt(i.getPropertyValue("border-bottom-width"), 10);
+            var u = a.scrollHeight + p + d + 1;
  // need one extra.
             /* eslint-disable no-restricted-globals */
             // Leverage the global `isNaN` here for IE support, rather than Number.isNaN.
@@ -434,11 +436,11 @@
                 return false;
             }
             /* eslint-enable no-restricted-globals */            if (r >= n) {
-                var f = r * l + s + c + d + p + 1;
+                var f = r * l + s + c + p + d + 1;
  // need one extra.
                                 u = Math.min(f, u);
             }
-            var h = n * l + s + c + d + p + 1;
+            var h = n * l + s + c + p + d + 1;
  // need one extra.
                         u = Math.max(h, u);
             if (t !== u) {
@@ -495,7 +497,7 @@
         return oe.apply(this, arguments);
     }
     function le(e) {
-        return pe(e) || de(e) || ce(e) || se();
+        return de(e) || pe(e) || ce(e) || se();
     }
     function se() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -508,10 +510,10 @@
         if (r === "Map" || r === "Set") return Array.from(e);
         if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return ue(e, t);
     }
-    function de(e) {
+    function pe(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function pe(e) {
+    function de(e) {
         if (Array.isArray(e)) return ue(e);
     }
     function ue(e, t) {
@@ -868,14 +870,14 @@
             Ie(Se(a), "renderEndAdornment", (function() {
                 var e;
                 var t = a.props, r = t.appearance, i = t.endAdornment, o = t.disabled, l = t.canClear, s = t.splunkTheme;
-                var c = s.isPrisma, d = s.isEnterprise;
+                var c = s.isPrisma, p = s.isEnterprise;
                 if (i) {
                     return a.renderAdornment(i, "end");
                 }
-                var p = a.context;
-                var u = (e = p.labelAttrs) === null || e === void 0 ? void 0 : e.text;
+                var d = a.context;
+                var u = (e = d.labelAttrs) === null || e === void 0 ? void 0 : e.text;
                 var f = u ? (0, S._)("Clear ".concat(u, " text field")) : (0, S._)("Clear text field");
-                if (d && r === "search") {
+                if (p && r === "search") {
                     /* Both icons are rendered, and StyledBox toggles visibility based on :focus-within */
                     return a.renderAdornment( n().createElement(n().Fragment, null,  n().createElement(Q, {
                         "aria-label": f,
@@ -965,7 +967,7 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.append, a = t.autoCapitalize, i = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, c = t.className, d = t.classNamePrivate, u = t.disabled, h = t.describedBy, m = t.elementRef, y = t.error, g = t.inline, x = t.inputClassName, w = t.inputId, k = t.labelledBy, S = t.maxLength, O = t.name, I = t.placeholder, j = t.prepend, E = t.required, T = t.rowsMin, M = t.spellCheck, P = t.tabIndex, $ = t.title, _ = ve(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "rowsMin", "spellCheck", "tabIndex", "title" ]);
+                var t = this.props, r = t.append, a = t.autoCapitalize, i = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, c = t.className, p = t.classNamePrivate, u = t.disabled, h = t.describedBy, m = t.elementRef, y = t.error, g = t.inline, x = t.inputClassName, w = t.inputId, k = t.labelledBy, S = t.maxLength, O = t.name, I = t.placeholder, j = t.prepend, E = t.required, T = t.rowsMin, M = t.spellCheck, P = t.tabIndex, $ = t.title, _ = ve(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "rowsMin", "spellCheck", "tabIndex", "title" ]);
                 var D = he(he({}, b()(_, (function(e, t) {
                     return t === "role" || t.indexOf("aria-") === 0;
                 }))), {}, {
@@ -973,7 +975,7 @@
                     "aria-labelledby": k,
                     "aria-invalid": y || undefined
                 });
-                var q = v()(_, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick" ].concat(le(p()(D))));
+                var q = v()(_, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick" ].concat(le(d()(D))));
                 var W = this.getDisplayValue();
                 var N = {
                     className: (0, A.toClassName)(c, x),
@@ -1016,7 +1018,7 @@
                 
                 return n().createElement(R, oe({
                     tabIndex: -1,
-                    className: (0, A.toClassName)(c, d),
+                    className: (0, A.toClassName)(c, p),
                     "data-test": "text-area",
                     "data-test-value": W,
                     elementRef: m,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.36.0",
+  "version": "4.37.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -64,7 +64,7 @@
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/docs-gen": "1.0.0-beta.13",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.17",
+    "@splunk/react-docs": "1.0.0-beta.18",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",

package/types/src/ControlGroup/docs/examples/Error.d.ts

@@ -1,2 +1,2 @@
-declare function ControlGroupError(): JSX.Element;
-export default ControlGroupError;
+declare function Error(): JSX.Element;
+export default Error;

package/types/src/Date/docs/examples/Error.d.ts

@@ -0,0 +1,2 @@
+declare function Error(): JSX.Element;
+export default Error;

package/types/src/Progress/Progress.d.ts

@@ -17,7 +17,7 @@ interface ProgressPropsBase {
      * Sets the appearance of the `Progress` component.
      *
      * The `warning` appearance is deprecated and will be removed in the next major version.
-     * @excludeTheme enterprise
+     * @themeNotes Enterprise themes do not support `warning` and will fall back to `info`
      */
     type?: 'info' | 'success' | 'warning' | 'error';
 }