@splunk/react-ui 5.5.0 → 5.7.0

package/Slider.js

@@ -82,10 +82,10 @@
     const f = require("@splunk/react-ui/useControlled");
     var v =  e.n(f);
     // CONCATENATED MODULE: external "styled-components"
-    const m = require("styled-components");
-    var b =  e.n(m);
+    const p = require("styled-components");
+    var m =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const p = require("@splunk/themes");
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Slider/getStepMarksBackground.ts
     /* this file is being ignored by stylelint via .stylelintignore */
     /* the radial-gradient returned in the map below needs `css` before backticks
@@ -96,119 +96,157 @@
         var t = e.stepWidth, r = e.thumbPosition, n = r === void 0 ? 0 : r, a = e.beforeThumbStepColor, i = e.afterThumbStepColor;
         /* need to subtract 1 to avoid extra step at the end */        var o = Math.floor(100 / t) - 1;
         var l = new Array(o).fill(false);
-        return (0, m.css)([ "background:", ";" ], l.map((function(e, r) {
+        return (0, p.css)([ "background:", ";" ], l.map((function(e, r) {
             var o = (r + 1) * t;
             var u = o <= n ? a : i;
             /* css doesn't allow trailing comma */            var s = r < l.length - 1 ? "," : "";
-            return (0, m.css)([ "radial-gradient(circle,", " 0%,", " 3px,transparent 3px) calc(", "% - 1.5px) center no-repeat ", "" ], u, u, o, s);
+            return (0, p.css)([ "radial-gradient(circle,", " 0%,", " 3px,transparent 3px) calc(", "% - 1.5px) center no-repeat ", "" ], u, u, o, s);
         })));
     }
     /* harmony default export */    const y = h;
     // CONCATENATED MODULE: ./src/Slider/SliderStyles.ts
     var g = 8;
     var w = 1;
-    var S = 24;
-    var x = b().div.withConfig({
+    var C = 24;
+    var S = m().div.withConfig({
         displayName: "SliderStyles__StyledSliderWrapper",
         componentId: "sc-16ooit4-0"
-    })([ "", ";gap:", ";width:100%;", "" ], p.mixins.reset("flex"), p.variables.spacingLarge, (function(e) {
+    })([ "", ";gap:", ";width:100%;", "" ], b.mixins.reset("flex"), b.variables.spacingLarge, (function(e) {
         var t = e.$inline;
-        return t && (0, m.css)([ "width:300px;" ]);
+        return t && (0, p.css)([ "width:300px;" ]);
     }));
-    var C = b().div.withConfig({
+    // Use .attrs() to set CSS variable via style attribute to avoid styled-components class regeneration.
+    // The ::before pseudo-element reads this variable, which is the only way to style pseudo-elements dynamically
+    // without regenerating CSS classes on every position change.
+        var x = m().div.attrs((function(e) {
+        var t = e.$thumbPosition;
+        return {
+            style: t !== undefined ? {
+                "--slider-fill-width": "".concat(t, "%")
+            } : undefined
+        };
+    })).withConfig({
         displayName: "SliderStyles__StyledSliderBar",
         componentId: "sc-16ooit4-1"
     })([ "position:relative;left:0;height:", "px;width:100%;border-radius:10px;background-color:", ";border:", "px solid;border-color:", ";", " ", "" ], g, (0, 
-    p.pickVariant)("$state", {
-        default: p.variables.neutral300,
-        error: p.variables.neutral300,
-        disabled: p.variables.neutral200
-    }), w, (0, p.pickVariant)("$state", {
-        default: p.variables.interactiveColorBorder,
-        error: p.variables.interactiveColorBorder,
+    b.pickVariant)("$state", {
+        default: b.variables.neutral300,
+        error: b.variables.neutral300,
+        disabled: b.variables.neutral200
+    }), w, (0, b.pickVariant)("$state", {
+        default: b.variables.interactiveColorBorder,
+        error: b.variables.interactiveColorBorder,
         disabled: "transparent"
     }), (function(e) {
         var t = e.$thumbPosition;
-        return (t || t === 0) && (0, m.css)([ "&::before{position:absolute;border-radius:", ";content:'';height:calc( ", "px + ", "px );top:-", "px;left:-", "px;width:", "%;background-color:", ";}" ], p.variables.borderRadius, g, w * 2, w, w, t, (0, 
-        p.pickVariant)("$state", {
-            default: p.variables.interactiveColorAccent,
-            error: p.variables.interactiveColorAccentError,
-            disabled: p.variables.neutral300
+        return (t || t === 0) && (0, p.css)([ "&::before{position:absolute;border-radius:", ";content:'';height:calc( ", "px + ", "px );top:-", "px;left:-", "px;width:var(--slider-fill-width,0%);background-color:", ";}" ], b.variables.borderRadius, g, w * 2, w, w, (0, 
+        b.pickVariant)("$state", {
+            default: b.variables.interactiveColorAccent,
+            error: b.variables.interactiveColorAccentError,
+            disabled: b.variables.neutral300
         }));
     }), (function(e) {
         var t = e.$stepWidth, r = e.$thumbPosition;
-        return t && (0, m.css)([ "&::after{position:absolute;top:0;left:0;width:100%;height:100%;", ";background-size:8px 8px;}" ], y({
-            beforeThumbStepColor: (0, p.pickVariant)("$state", {
-                default: p.variables.contentColorAccentWeak,
-                error: p.variables.contentColorNegativeWeak,
-                disabled: p.variables.contentColorDisabled
+        return t && (0, p.css)([ "&::after{position:absolute;top:0;left:0;width:100%;height:100%;", ";background-size:8px 8px;}" ], y({
+            beforeThumbStepColor: (0, b.pickVariant)("$state", {
+                default: b.variables.contentColorAccentWeak,
+                error: b.variables.contentColorNegativeWeak,
+                disabled: b.variables.contentColorDisabled
             }),
-            afterThumbStepColor: (0, p.pickVariant)("$state", {
-                default: p.variables.contentColorDefault,
-                error: p.variables.contentColorDefault,
-                disabled: p.variables.contentColorDisabled
+            afterThumbStepColor: (0, b.pickVariant)("$state", {
+                default: b.variables.contentColorDefault,
+                error: b.variables.contentColorDefault,
+                disabled: b.variables.contentColorDisabled
             }),
             stepWidth: t,
             thumbPosition: r
         }));
     }));
-    var k = b().button.withConfig({
+    // Use .attrs() to compute positioning styles and set them via style attribute.
+    // This avoids styled-components class regeneration during drag operations, significantly
+    // improving performance when the thumb moves continuously.
+        var k = m().button.attrs((function(e) {
+        var t = e.$thumbPosition, r = e.$stepWidth;
+        if (t === undefined) {
+            return {
+                style: undefined
+            };
+        }
+        if (r) {
+            // With step marks
+            var n = -C / 2;
+ /* used to align thumb center with position */            if (t === 0) {
+                /* used to align thumb at start of bar (without going out of bar bounds) */
+                n = 0;
+            } else if (t === 100) {
+                /* used to align thumb at end of bar (without going out of bar bounds) */
+                n = -C;
+            }
+            return {
+                style: {
+                    left: "".concat(t, "%"),
+                    marginLeft: "".concat(n, "px")
+                }
+            };
+        }
+        /* Smoothly position thumb center at the min/max step position while keeping it
+     within bounds. This calculation doesn't match exactly with step marks so it is
+     only used when stepMarks are too small to be rendered. */        return {
+            style: {
+                left: "calc(".concat(t, "% - ").concat(t / 100 * C, "px)")
+            }
+        };
+    })).withConfig({
         displayName: "SliderStyles__StyledSliderThumb",
         componentId: "sc-16ooit4-2"
-    })([ "display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:50%;background-color:", ";border:2px solid ", ";left:", "%;margin-left:-", "px;", ";", " ", "" ], S, S, (0, 
-    p.pickVariant)("$state", {
-        default: p.variables.white,
-        error: p.variables.interactiveColorAccentError,
-        disabled: p.variables.neutral300
-    }), (0, p.pickVariant)("$state", {
-        default: p.variables.borderColorStrong,
-        error: p.variables.interactiveColorAccentErrorStrong,
-        disabled: p.variables.neutral300
-    }), (function(e) {
-        var t = e.$thumbPosition;
-        return t;
-    }), S / 2, (0, p.pickVariant)("$thumbPosition", {
-        0: (0, m.css)([ "margin-left:0;" ]),
-        100: (0, m.css)([ "margin-left:-", "px;" ], S)
+    })([ "display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:50%;background-color:", ";border:2px solid ", ";", " ", "" ], C, C, (0, 
+    b.pickVariant)("$state", {
+        default: b.variables.white,
+        error: b.variables.interactiveColorAccentError,
+        disabled: b.variables.neutral300
+    }), (0, b.pickVariant)("$state", {
+        default: b.variables.borderColorStrong,
+        error: b.variables.interactiveColorAccentErrorStrong,
+        disabled: b.variables.neutral300
     }), (function(e) {
         var t = e.$state;
-        return t !== "disabled" && (0, m.css)([ "&:hover,&:focus,&:active{box-shadow:", ";}" ], p.variables.focusShadow);
+        return t !== "disabled" && (0, p.css)([ "&:hover,&:focus,&:active{box-shadow:", ";}" ], b.variables.focusShadow);
     }), (function(e) {
         var t = e.$state;
-        return t === "disabled" && (0, m.css)([ "cursor:not-allowed;" ]);
+        return t === "disabled" && (0, p.css)([ "cursor:not-allowed;" ]);
     }));
-    var E = b().div.withConfig({
+    var E = m().div.withConfig({
         displayName: "SliderStyles__StyledPopoverContent",
         componentId: "sc-16ooit4-3"
-    })([ "padding:", ";" ], p.variables.spacingMedium);
-    var $ = b().span.withConfig({
+    })([ "padding:", ";" ], b.variables.spacingMedium);
+    var $ = m().span.withConfig({
         displayName: "SliderStyles__StyledLabel",
         componentId: "sc-16ooit4-4"
     })([ "align-self:center;color:", ";" ], (function(e) {
         var t = e.$disabled;
-        return t ? p.variables.contentColorDisabled : p.variables.contentColorActive;
+        return t ? b.variables.contentColorDisabled : b.variables.contentColorActive;
     }));
     /* using content: '' to control if step marks should be shown
  * to avoid further issues with variable interpolation given the
  * complexity of the multiple radial gradient backgrounds. This also
- * allows us not to pass in StyledSliderTypes to StyledInput */    var A = (0, m.css)([ "", "{&::after{content:'';}}" ], /* sc-sel */ C);
-    var O = b().div.withConfig({
+ * allows us not to pass in StyledSliderTypes to StyledInput */    var A = (0, p.css)([ "", "{&::after{content:'';}}" ], /* sc-sel */ x);
+    var O = m().div.withConfig({
         displayName: "SliderStyles__StyledInput",
         componentId: "sc-16ooit4-5"
-    })([ "width:100%;min-width:200px;display:flex;align-items:center;flex:1 0 0;position:relative;cursor:default;height:", ";max-width:100%;", " &:hover{", "{border-color:", ";}}", "" ], p.variables.inputHeight, (function(e) {
+    })([ "width:100%;min-width:200px;display:flex;align-items:center;flex:1 0 0;position:relative;cursor:default;height:", ";max-width:100%;", " &:hover{", "{border-color:", ";}}", "" ], b.variables.inputHeight, (function(e) {
         var t = e.$state;
-        return t === "disabled" && (0, m.css)([ "cursor:not-allowed;" ]);
-    }), /* sc-sel */ C, (0, p.pickVariant)("$state", {
-        default: p.variables.interactiveColorBorderHover,
-        error: p.variables.interactiveColorBorderHover,
+        return t === "disabled" && (0, p.css)([ "cursor:not-allowed;" ]);
+    }), /* sc-sel */ x, (0, b.pickVariant)("$state", {
+        default: b.variables.interactiveColorBorderHover,
+        error: b.variables.interactiveColorBorderHover,
         disabled: "transparent"
-    }), (0, p.pickVariant)("$stepAppearance", {
-        focus: (0, m.css)([ "&:focus-within{", "}" ], A),
-        always: (0, m.css)([ "", "" ], A)
+    }), (0, b.pickVariant)("$stepAppearance", {
+        focus: (0, p.css)([ "&:focus-within{", "}" ], A),
+        always: (0, p.css)([ "", "" ], A)
     }));
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var V = {
+    var P = {
         body: {
             appendChild: function e() {
                 return [];
@@ -262,16 +300,16 @@
             search: ""
         }
     };
-    function P() {
-        var e = typeof document !== "undefined" ? document : V;
+    function T() {
+        var e = typeof document !== "undefined" ? document : P;
         return e;
     }
-    var T = P();
-    /* harmony default export */    const B = /* unused pure expression or super */ null && T;
+    var V = T();
+    /* harmony default export */    const B = /* unused pure expression or super */ null && V;
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var _ = {
-        document: V,
+    var I = {
+        document: P,
         navigator: {
             userAgent: ""
         },
@@ -325,12 +363,12 @@
             clearTimeout(t);
         }
     };
-    function j() {
-        var e = typeof window !== "undefined" ? window : _;
+    function L() {
+        var e = typeof window !== "undefined" ? window : I;
         return e;
     }
-    var q = j();
-    /* harmony default export */    const L = q;
+    var _ = L();
+    /* harmony default export */    const j = _;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -338,7 +376,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function M(e, t) {
+    function q(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -351,8 +389,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/Slider/Slider.tsx
-    function N() {
-        return N = Object.assign ? Object.assign.bind() : function(e) {
+    function M() {
+        return M = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -360,9 +398,9 @@
                 }
             }
             return e;
-        }, N.apply(null, arguments);
+        }, M.apply(null, arguments);
     }
-    function I(e, t) {
+    function N(e, t) {
         return H(e) || F(e, t) || R(e, t) || D();
     }
     function D() {
@@ -437,6 +475,7 @@
         elementRef: l().oneOfType([ l().func, l().object ]),
         error: l().bool,
         inline: l().bool,
+        inputId: l().string,
         labelledBy: l().string,
         max: l().number,
         maxLabel: l().node,
@@ -513,7 +552,7 @@
         var l = Math.round(o / i);
         var u = a.getBoundingClientRect();
         var s = i * 100 / o;
-        return u.width / l > S / 2 ? s : undefined;
+        return u.width / l > C / 2 ? s : undefined;
     };
     var ee = function e(t) {
         var r = t.max, n = t.min, a = t.value;
@@ -524,66 +563,66 @@
         return (a - n) / i * 100;
     };
     function te(e) {
-        var t = e.defaultValue, a = e.describedBy, i = e.disabled, o = e.displayValue, l = e.elementRef, u = e.error, c = e.inline, f = e.labelledBy, m = e.max, b = m === void 0 ? 5 : m, p = e.maxLabel, h = e.min, y = h === void 0 ? 1 : h, g = e.minLabel, w = e.name, S = e.onChange, A = e.required, V = e.step, P = V === void 0 ? 1 : V, T = e.stepMarks, B = T === void 0 ? "focus" : T, _ = e.thumbRef, j = e.value, q = U(e, [ "defaultValue", "describedBy", "disabled", "displayValue", "elementRef", "error", "inline", "labelledBy", "max", "maxLabel", "min", "minLabel", "name", "onChange", "required", "step", "stepMarks", "thumbRef", "value" ]);
+        var t = e.defaultValue, a = e.describedBy, i = e.disabled, o = e.displayValue, l = e.elementRef, u = e.error, c = e.inline, f = e.inputId, p = e.labelledBy, m = e.max, b = m === void 0 ? 5 : m, h = e.maxLabel, y = e.min, g = y === void 0 ? 1 : y, w = e.minLabel, C = e.name, A = e.onChange, P = e.required, T = e.step, V = T === void 0 ? 1 : T, B = e.stepMarks, I = B === void 0 ? "focus" : B, L = e.thumbRef, _ = e.value, D = U(e, [ "defaultValue", "describedBy", "disabled", "displayValue", "elementRef", "error", "inline", "inputId", "labelledBy", "max", "maxLabel", "min", "minLabel", "name", "onChange", "required", "step", "stepMarks", "thumbRef", "value" ]);
         // @docs-props-type SliderPropsBase
-                var D = v()({
+                var R = v()({
             componentName: "Slider",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0]
         });
-        var R = (0, r.useState)(false), W = I(R, 2), F = W[0], H = W[1];
-        var z = (0, r.useState)(false), K = I(z, 2), te = K[0], re = K[1];
-        var ne = (0, r.useState)(null), ae = I(ne, 2), ie = ae[0], oe = ae[1];
-        var le = (0, r.useState)(null), ue = I(le, 2), se = ue[0], ce = ue[1];
-        var de = (0, r.useMemo)((function() {
-            return D ? Q({
-                value: (b - y) / 2,
-                min: y,
+        var W = (0, r.useState)(false), F = N(W, 2), H = F[0], z = F[1];
+        var K = (0, r.useState)(false), te = N(K, 2), re = te[0], ne = te[1];
+        var ae = (0, r.useState)(null), ie = N(ae, 2), oe = ie[0], le = ie[1];
+        var ue = (0, r.useState)(null), se = N(ue, 2), ce = se[0], de = se[1];
+        var fe = (0, r.useMemo)((function() {
+            return R ? Q({
+                value: (b - g) / 2,
+                min: g,
                 max: b,
-                step: P
+                step: V
             }) : t;
-        }), [ D, t, b, y, P ]);
-        var fe = (0, r.useState)(D ? j : de), ve = I(fe, 2), me = ve[0], be = ve[1];
-        var pe = (0, r.useCallback)((function(e, t) {
+        }), [ R, t, b, g, V ]);
+        var ve = (0, r.useState)(R ? _ : fe), pe = N(ve, 2), me = pe[0], be = pe[1];
+        var he = (0, r.useCallback)((function(e, t) {
             var r = t.newValue;
             if (me !== r) {
-                S === null || S === void 0 ? void 0 : S(e, {
+                A === null || A === void 0 ? void 0 : A(e, {
                     value: r,
-                    name: w
+                    name: C
                 });
-                if (!D) {
+                if (!R) {
                     be(r);
                 }
             }
-        }), [ D, w, S, me ]);
+        }), [ R, C, A, me ]);
         // handlers
-                var he = (0, r.useCallback)((function() {
-            re(false);
+                var ye = (0, r.useCallback)((function() {
+            ne(false);
         }), []);
-        var ye = (0, r.useCallback)((function() {
-            re(true);
-        }), []);
-        var ge = (0, r.useCallback)((function(e) {
-            oe(e);
+        var ge = (0, r.useCallback)((function() {
+            ne(true);
         }), []);
         var we = (0, r.useCallback)((function(e) {
-            ce(e);
-            M(_, e);
-        }), [ _ ]);
+            le(e);
+        }), []);
+        var Ce = (0, r.useCallback)((function(e) {
+            de(e);
+            q(L, e);
+        }), [ L ]);
         var Se = (0, r.useCallback)((function(e) {
-            var t = J(e, ie);
+            var t = J(e, oe);
             if (t !== undefined) {
                 var r = Y({
                     position: t,
                     max: b,
-                    min: y,
-                    step: P
+                    min: g,
+                    step: V
                 });
-                pe(e, {
+                he(e, {
                     newValue: r
                 });
             }
-        }), [ b, y, pe, ie, P ]);
+        }), [ b, g, he, oe, V ]);
         var xe = (0, r.useCallback)((function(e) {
             var t = me;
             if (t !== undefined) {
@@ -591,14 +630,14 @@
                 var n;
                 var a = G({
                     direction: "forward",
-                    min: y,
-                    step: P,
+                    min: g,
+                    step: V,
                     value: t
                 });
                 var i = G({
                     direction: "backward",
-                    min: y,
-                    step: P,
+                    min: g,
+                    step: V,
                     value: t
                 });
                 if (r === "ArrowRight") {
@@ -616,131 +655,146 @@
                 }
                 t = X({
                     max: b,
-                    min: y,
+                    min: g,
                     value: n
                 });
                 t = Q({
                     max: b,
-                    min: y,
-                    step: P,
+                    min: g,
+                    step: V,
                     value: t
                 });
-                pe(e, {
+                he(e, {
                     newValue: t
                 });
             }
-        }), [ b, y, pe, P, me ]);
-        var Ce = (0, r.useCallback)((function(e) {
+        }), [ b, g, he, V, me ]);
+        var ke = (0, r.useCallback)((function(e) {
             e.preventDefault();
-            se === null || se === void 0 ? void 0 : se.focus();
-            H(true);
-            re(true);
-        }), [ se ]);
-        var ke = (0, r.useCallback)((function() {
-            re(true);
-        }), []);
+            ce === null || ce === void 0 ? void 0 : ce.focus();
+            z(true);
+            ne(true);
+        }), [ ce ]);
         var Ee = (0, r.useCallback)((function() {
-            if (!F) {
-                re(false);
+            ne(true);
+        }), []);
+        var $e = (0, r.useCallback)((function() {
+            if (!H) {
+                ne(false);
             }
-        }), [ F ]);
-        var $e = (0, r.useCallback)((function(e) {
-            if (F) {
-                var t = J(e, ie);
+        }), [ H ]);
+        var Ae = (0, r.useCallback)((function(e) {
+            if (H) {
+                var t = J(e, oe);
                 if (t !== undefined) {
                     var r = Y({
                         position: t,
-                        min: y,
+                        min: g,
                         max: b,
-                        step: P
+                        step: V
                     });
-                    pe(e, {
+                    he(e, {
                         newValue: r
                     });
                 }
             }
-        }), [ F, b, y, pe, ie, P ]);
-        var Ae = (0, r.useCallback)((function() {
-            H(false);
-            re(false);
+        }), [ H, b, g, he, oe, V ]);
+        var Oe = (0, r.useCallback)((function() {
+            z(false);
+            ne(false);
         }), []);
+        var Pe = (0, r.useCallback)((function(e) {
+            // When a label is clicked, it triggers a synthetic click event on the associated control.
+            // For Slider, we only want to focus the thumb, not trigger any other behavior.
+            // We can detect label-initiated clicks because they have a detail of 0 (synthetic)
+            // and the button wasn't the actual click target.
+            if (e.detail === 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                ce === null || ce === void 0 ? void 0 : ce.focus();
+            }
+        }), [ ce ]);
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ b, y ]);
+        }), [ b, g ]);
         (0, r.useEffect)((function() {
             // keep valueState in sync with value prop when controlled
-            if (D) {
-                be(j);
+            if (R) {
+                be(_);
             }
-        }), [ D, j ]);
-        var Oe = i && "disabled" || u && "error" || "default";
+        }), [ R, _ ]);
+        var Te = i && "disabled" || u && "error" || "default";
         var Ve = ee({
             value: me,
-            min: y,
+            min: g,
             max: b
         });
-        var Pe = P ? Z({
+        var Be = V ? Z({
             max: b,
-            min: y,
-            sliderBar: ie,
-            step: P
+            min: g,
+            sliderBar: oe,
+            step: V
         }) : undefined;
          /* eslint-disable jsx-a11y/no-static-element-interactions */
-        return n().createElement(x, N({
+        return n().createElement(S, M({
             "data-test": "slider",
             "data-test-disabled": i ? "disabled" : undefined,
             "data-test-value": me,
             ref: l,
             $inline: c
-        }, q), F &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
-            target: L,
+        }, D), H &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
+            target: j,
             eventType: "mouseup",
-            listener: Ae
+            listener: Oe
         }),  n().createElement(s(), {
-            target: L,
+            target: j,
             eventType: "mousemove",
-            listener: $e
-        })), g !== null &&  n().createElement($, {
+            listener: Ae
+        })), w !== null &&  n().createElement($, {
             "data-test": "min-label",
             $disabled: i
-        }, g || y),  n().createElement(O, {
+        }, w || g),  n().createElement(O, {
             onClick: i ? undefined : Se,
-            $state: Oe,
-            $stepAppearance: B
-        },  n().createElement(C, {
-            "aria-required": A,
+            $state: Te,
+            $stepAppearance: I
+        },  n().createElement(x, {
+            "aria-required": P,
             "data-test": "bar",
-            ref: ge,
+            ref: we,
             $thumbPosition: Ve,
-            $stepWidth: Pe,
-            $state: Oe
+            $stepWidth: Be,
+            $state: Te
         }),  n().createElement(k, {
+            id: f,
             "aria-describedby": a,
-            "aria-labelledby": f,
+            "aria-labelledby": p,
             "aria-invalid": u,
             "aria-valuemax": b,
-            "aria-valuemin": y,
+            "aria-valuemin": g,
             "aria-valuenow": me,
             "data-test": "thumb",
-            onBlur: he,
-            onMouseEnter: ke,
-            onMouseLeave: Ee,
+            onBlur: ye,
+            onClick: i ? undefined : Pe,
+            onMouseEnter: Ee,
+            onMouseLeave: $e,
             onKeyDown: i ? undefined : xe,
-            onMouseDown: i ? undefined : Ce,
-            onFocus: ye,
-            ref: we,
+            onMouseDown: i ? undefined : ke,
+            onFocus: ge,
+            ref: Ce,
             role: "slider",
+            type: "button",
             disabled: i,
             $thumbPosition: Ve,
-            $state: Oe
+            $stepWidth: Be,
+            $state: Te
         }),  n().createElement(d(), {
-            open: te,
-            anchor: se,
+            open: re,
+            anchor: ce,
             align: "center"
-        },  n().createElement(E, null, o || me))), p !== null &&  n().createElement($, {
+        },  n().createElement(E, null, o || me))), h !== null &&  n().createElement($, {
             "data-test": "max-label",
             $disabled: i
-        }, p || b));
+        }, h || b));
     }
     te.propTypes = K;
     /* harmony default export */    const re = te;