@splunk/react-ui 5.0.0-beta.2 → 5.0.0-beta.4

package/Slider.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var a = r && r.__esModule ? 
+            /******/ var t = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(a, {
-                a
+            e.d(t, {
+                a: t
             });
-            /******/            return a;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, a) => {
-            /******/ for (var n in a) {
-                /******/ if (e.o(a, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var a in t) {
+                /******/ if (e.o(t, a) && !e.o(r, a)) {
+                    /******/ Object.defineProperty(r, a, {
                         enumerable: true,
-                        get: a[n]
+                        get: t[a]
                     });
                     /******/                }
                 /******/            }
@@ -61,146 +61,149 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ Q
+        default: () => /* reexport */ G
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var n =  e.n(a);
+    const t = require("react");
+    var a =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const t = require("prop-types");
-    var i =  e.n(t);
+    const n = require("prop-types");
+    var i =  e.n(n);
     // CONCATENATED MODULE: external "decimal.js-light"
-    const l = require("decimal.js-light");
-    var o =  e.n(l);
+    const o = require("decimal.js-light");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const s = require("@splunk/ui-utils/keyboard");
+    const u = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const u = require("@splunk/react-ui/EventListener");
-    var c =  e.n(u);
+    const s = require("@splunk/react-ui/EventListener");
+    var d =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const d = require("@splunk/react-ui/Popover");
-    var v =  e.n(d);
+    const c = require("@splunk/react-ui/Popover");
+    var v =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
-    const p = require("@splunk/react-ui/useControlled");
-    var f =  e.n(p);
+    const f = require("@splunk/react-ui/useControlled");
+    var b =  e.n(f);
     // CONCATENATED MODULE: external "styled-components"
-    const m = require("styled-components");
-    var b =  e.n(m);
-    // CONCATENATED MODULE: external "tinycolor2"
-    const y = require("tinycolor2");
-    var g =  e.n(y);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const h = require("@splunk/react-ui/Box");
-    var x =  e.n(h);
+    const p = require("styled-components");
+    var m =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const k = require("@splunk/themes");
+    const y = 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
+ * for variable interpolation but is not valid css on its own which throws
+ * a stylelint `Unknown word  CssSyntaxError` */
+    /* getStepMarksBackground generates the multiple radial gradient backgrounds for step marks */
+    function h(e) {
+        var r = e.stepWidth, t = e.thumbPosition, a = t === void 0 ? 0 : t, n = e.beforeThumbStepColor, i = e.afterThumbStepColor;
+        /* need to subtract 1 to avoid extra step at the end */        var o = Math.floor(100 / r) - 1;
+        var l = new Array(o).fill(false);
+        return (0, p.css)([ "background:", ";" ], l.map((function(e, t) {
+            var o = (t + 1) * r;
+            var u = o <= a ? n : i;
+            /* css doesn't allow trailing comma */            var s = t < l.length - 1 ? "," : "";
+            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 g = h;
     // CONCATENATED MODULE: ./src/Slider/SliderStyles.ts
-    var w = 20;
-    var S = b()(x()).withConfig({
-        displayName: "SliderStyles__StyledBox",
+    var x = 8;
+    var w = 1;
+    var C = 24;
+    var S = m().div.withConfig({
+        displayName: "SliderStyles__StyledSliderWrapper",
         componentId: "sc-16ooit4-0"
-    })([ "", ";flex:1 1 auto;&[data-inline]{width:300px;}" ], k.mixins.reset("block"));
-    var C = b().div.withConfig({
-        displayName: "SliderStyles__StyledInput",
-        componentId: "sc-16ooit4-1"
-    })([ "display:flex;align-items:center;flex:1 0 0;position:relative;cursor:default;height:", ";max-width:100%;" ], k.variables.inputHeight);
-    var O = "1px";
-    var E = b().div.withConfig({
+    })([ "", ";grid-template-columns:min-content minmax(200px,100%) min-content;gap:8px;", "" ], y.mixins.reset("grid"), (function(e) {
+        var r = e.$inline;
+        return r && (0, p.css)([ "width:300px;" ]);
+    }));
+    var k = m().div.withConfig({
         displayName: "SliderStyles__StyledSliderBar",
-        componentId: "sc-16ooit4-2"
-    })([ "left:0;height:4px;width:100%;border-radius:2.5px;", "" ], (function(e) {
-        var r = e.$disabled, a = e.$error, n = e.$position, t = e.$stepMarksWidth;
-        if (r) {
-            return (0, m.css)([ "background-color:", ";" ], (0, k.pick)({
-                enterprise: k.variables.gray92,
-                prisma: k.variables.contentColorDisabled
-            }));
-        }
-        var i = a ? k.variables.interactiveColorAccentError : (0, k.pick)({
-            prisma: k.variables.contentColorActive,
-            enterprise: {
-                light: k.variables.gray22,
-                dark: k.variables.white
-            }
-        });
-        var l = (0, k.pick)({
-            enterprise: {
-                dark: k.variables.gray20,
-                light: k.variables.gray96
-            },
-            prisma: k.variables.neutral100
-        });
-        var o = (0, k.pick)({
-            enterprise: k.variables.gray60,
-            prisma: k.variables.interactiveColorBorder
-        });
-        return t !== undefined ? (0, m.css)([ "background-image:linear-gradient( to right,", ",", " ", ",transparent ", ",transparent 100% ),repeating-linear-gradient( to right,", ",", " ", ",transparent ", ",transparent ", "% ),linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], i, i, O, O, l, l, O, O, t, i, i, n, o, n, o) : (0, 
-        m.css)([ "background-image:linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], i, i, n, o, n, o);
+        componentId: "sc-16ooit4-1"
+    })([ "position:relative;left:0;height:", "px;width:100%;border-radius:10px;background-color:", ";border:", "px solid;border-color:", ";", " ", "" ], x, (0, 
+    y.pickVariant)("$state", {
+        default: y.variables.neutral300,
+        error: y.variables.neutral300,
+        disabled: y.variables.neutral200
+    }), w, (0, y.pickVariant)("$state", {
+        default: y.variables.interactiveColorBorder,
+        error: y.variables.interactiveColorBorder,
+        disabled: "transparent"
+    }), (function(e) {
+        var r = e.$thumbPosition;
+        return r && (0, p.css)([ "&::before{position:absolute;border-radius:", ";content:'';height:calc( ", "px + ", "px );top:-", "px;left:-", "px;width:", "%;background-color:", ";}" ], y.variables.borderRadius, x, w * 2, w, w, r, (0, 
+        y.pickVariant)("$state", {
+            default: y.variables.interactiveColorAccent,
+            error: y.variables.interactiveColorAccentError,
+            disabled: y.variables.neutral300
+        }));
+    }), (function(e) {
+        var r = e.$stepWidth, t = e.$thumbPosition;
+        return r && (0, p.css)([ "&::after{position:absolute;top:0;left:0;width:100%;height:100%;", ";background-size:8px 8px;}" ], g({
+            beforeThumbStepColor: (0, y.pickVariant)("$state", {
+                default: y.variables.contentColorAccentWeak,
+                error: y.variables.contentColorNegativeWeak,
+                disabled: y.variables.contentColorDisabled
+            }),
+            afterThumbStepColor: (0, y.pickVariant)("$state", {
+                default: y.variables.contentColorDefault,
+                error: y.variables.contentColorDefault,
+                disabled: y.variables.contentColorDisabled
+            }),
+            stepWidth: r,
+            thumbPosition: t
+        }));
     }));
-    var _ = b().button.withConfig({
+    var $ = m().button.withConfig({
         displayName: "SliderStyles__StyledSliderThumb",
-        componentId: "sc-16ooit4-3"
-    })([ "", ";display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:10px;border-width:0;background-color:", ";margin-left:-8px;left:", "%;&:hover:not([disabled]){outline:0;z-index:1;", "}&:focus:not([disabled]),&:active{outline:0;box-shadow:", ";z-index:1;", "}&[disabled]{cursor:not-allowed;background-color:", ";}", "" ], k.mixins.reset("inline"), w, w, (0, 
-    k.pick)({
-        enterprise: {
-            light: k.variables.gray22,
-            dark: k.variables.white
-        },
-        prisma: k.variables.contentColorActive
+        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;", " ", "" ], C, C, (0, 
+    y.pickVariant)("$state", {
+        default: y.variables.white,
+        error: y.variables.interactiveColorAccentError,
+        disabled: y.variables.neutral300
+    }), (0, y.pickVariant)("$state", {
+        default: y.variables.borderColorStrong,
+        error: y.variables.interactiveColorAccentErrorStrong,
+        disabled: y.variables.neutral300
     }), (function(e) {
-        var r = e.$position;
+        var r = e.$thumbPosition;
         return r;
-    }), (0, k.pick)({
-        enterprise: (0, m.css)([ "box-shadow:", ";" ], k.variables.focusShadow)
-    }), k.variables.focusShadow, (0, k.pick)({
-        prisma: (0, m.css)([ "background-color:", ";" ], k.mixins.overlayColors(k.variables.contentColorActive, k.variables.interactiveColorOverlayActive)),
-        enterprise: (0, m.css)([ "border-color:", ";" ], (function(e) {
-            return g()(k.variables.focusColor(e)).setAlpha(.8).toRgbString();
-        }))
-    }), (0, k.pick)({
-        enterprise: k.variables.gray92,
-        prisma: k.variables.neutral400
+    }), C / 2, (function(e) {
+        var r = e.$state;
+        return r !== "disabled" && (0, p.css)([ "&:hover,&:focus,&:active{box-shadow:", ";}" ], y.variables.focusShadow);
     }), (function(e) {
-        var r = e.$error;
-        return r && (0, m.css)([ "background-color:", ";&:focus:not([disabled]),&:active{background-color:", ";}" ], k.variables.interactiveColorAccentError, (0, 
-        k.pick)({
-            enterprise: k.variables.errorColorD40,
-            prisma: k.mixins.overlayColors(k.variables.interactiveColorAccentError, k.variables.interactiveColorOverlayActive)
-        }));
+        var r = e.$state;
+        return r === "disabled" && (0, p.css)([ "cursor:not-allowed;" ]);
     }));
-    var B = b().div.withConfig({
+    var E = m().div.withConfig({
         displayName: "SliderStyles__StyledPopoverContent",
+        componentId: "sc-16ooit4-3"
+    })([ "padding:", ";" ], y.variables.spacingMedium);
+    var O = m().span.withConfig({
+        displayName: "SliderStyles__StyledLabel",
         componentId: "sc-16ooit4-4"
-    })([ "padding:", ";font-size:", ";line-height:", ";" ], (0, k.pick)({
-        enterprise: k.variables.spacingSmall,
-        prisma: "12px 16px"
-    }), (0, k.pick)({
-        enterprise: k.variables.fontSizeSmall,
-        prisma: "14px"
-    }), (0, k.pick)({
-        enterprise: "18px",
-        prisma: "24px"
-    }));
-    var M = (0, m.css)([ "flex:0 0 auto;line-height:", ";", "" ], k.variables.inputHeight, (function(e) {
+    })([ "align-self:center;color:", ";" ], (function(e) {
         var r = e.$disabled;
-        return r && (0, m.css)([ "color:", ";" ], (0, k.pick)({
-            enterprise: k.variables.textDisabledColor,
-            prisma: k.variables.contentColorDisabled
-        }));
+        return r ? y.variables.contentColorDisabled : y.variables.contentColorActive;
     }));
-    var $ = b()(x()).withConfig({
-        displayName: "SliderStyles__StyledMinLabelBox",
+    /* 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 V = (0, p.css)([ "", "{&::after{content:'';}}" ], /* sc-sel */ k);
+    var P = m().div.withConfig({
+        displayName: "SliderStyles__StyledInput",
         componentId: "sc-16ooit4-5"
-    })([ "", ";margin-right:", ";text-align:right;" ], M, (0, k.pick)({
-        enterprise: "15px",
-        prisma: "16px"
-    }));
-    var j = b()(x()).withConfig({
-        displayName: "SliderStyles__StyledMaxLabelBox",
-        componentId: "sc-16ooit4-6"
-    })([ "", ";margin-left:", ";text-align:left;" ], M, (0, k.pick)({
-        enterprise: "15px",
-        prisma: "16px"
+    })([ "display:flex;align-items:center;flex:1 0 0;position:relative;cursor:default;height:", ";max-width:100%;", " &:hover{", "{border-color:", ";}}", "" ], y.variables.inputHeight, (function(e) {
+        var r = e.$state;
+        return r === "disabled" && (0, p.css)([ "cursor:not-allowed;" ]);
+    }), /* sc-sel */ k, (0, y.pickVariant)("$state", {
+        default: y.variables.interactiveColorBorderHover,
+        error: y.variables.interactiveColorBorderHover,
+        disabled: "transparent"
+    }), (0, y.pickVariant)("$stepAppearance", {
+        focus: (0, p.css)([ "&:focus-within{", "}" ], V),
+        always: (0, p.css)([ "", "" ], V)
     }));
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
@@ -209,7 +212,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function q(e, r) {
+    function B(e, r) {
         if (e) {
             if (typeof e === "function") {
                 e(r);
@@ -222,85 +225,85 @@
         }
     }
     // CONCATENATED MODULE: ./src/Slider/Slider.tsx
-    function A() {
-        return A = Object.assign ? Object.assign.bind() : function(e) {
+    function _() {
+        return _ = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var a = arguments[r];
-                for (var n in a) {
-                    ({}).hasOwnProperty.call(a, n) && (e[n] = a[n]);
+                var t = arguments[r];
+                for (var a in t) {
+                    ({}).hasOwnProperty.call(t, a) && (e[a] = t[a]);
                 }
             }
             return e;
-        }, A.apply(null, arguments);
+        }, _.apply(null, arguments);
     }
-    function I(e, r) {
-        return V(e) || R(e, r) || L(e, r) || P();
+    function j(e, r) {
+        return I(e) || T(e, r) || M(e, r) || A();
     }
-    function P() {
+    function A() {
         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 L(e, r) {
+    function M(e, r) {
         if (e) {
-            if ("string" == typeof e) return N(e, r);
-            var a = {}.toString.call(e).slice(8, -1);
-            return "Object" === a && e.constructor && (a = e.constructor.name), "Map" === a || "Set" === a ? Array.from(e) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? N(e, r) : void 0;
+            if ("string" == typeof e) return q(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? q(e, r) : void 0;
         }
     }
-    function N(e, r) {
+    function q(e, r) {
         (null == r || r > e.length) && (r = e.length);
-        for (var a = 0, n = Array(r); a < r; a++) {
-            n[a] = e[a];
+        for (var t = 0, a = Array(r); t < r; t++) {
+            a[t] = e[t];
         }
-        return n;
+        return a;
     }
-    function R(e, r) {
-        var a = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != a) {
-            var n, t, i, l, o = [], s = !0, u = !1;
+    function T(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var a, n, i, o, l = [], u = !0, s = !1;
             try {
-                if (i = (a = a.call(e)).next, 0 === r) {
-                    if (Object(a) !== a) return;
-                    s = !1;
-                } else for (;!(s = (n = i.call(a)).done) && (o.push(n.value), o.length !== r); s = !0) {
+                if (i = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (a = i.call(t)).done) && (l.push(a.value), l.length !== r); u = !0) {
                 }
             } catch (e) {
-                u = !0, t = e;
+                s = !0, n = e;
             } finally {
                 try {
-                    if (!s && null != a["return"] && (l = a["return"](), Object(l) !== l)) return;
+                    if (!u && null != t["return"] && (o = t["return"](), Object(o) !== o)) return;
                 } finally {
-                    if (u) throw t;
+                    if (s) throw n;
                 }
             }
-            return o;
+            return l;
         }
     }
-    function V(e) {
+    function I(e) {
         if (Array.isArray(e)) return e;
     }
     function D(e, r) {
         if (null == e) return {};
-        var a, n, t = T(e, r);
+        var t, a, n = N(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                a = i[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+            for (a = 0; a < i.length; a++) {
+                t = i[a], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
             }
         }
-        return t;
+        return n;
     }
-    function T(e, r) {
+    function N(e, r) {
         if (null == e) return {};
-        var a = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                a[n] = e[n];
+        var t = {};
+        for (var a in e) {
+            if ({}.hasOwnProperty.call(e, a)) {
+                if (r.includes(a)) continue;
+                t[a] = e[a];
             }
         }
-        return a;
+        return t;
     }
-    /** @public */    var z = {
+    /** @public */    var L = {
         defaultValue: i().number,
         describedBy: i().string,
         disabled: i().bool,
@@ -322,296 +325,299 @@
         thumbRef: i().oneOfType([ i().func, i().object ]),
         value: i().number
     };
-    var F = function e(r) {
-        var a = r.max, n = r.min, t = r.value;
-        if (t > a) {
-            return a;
+    var R = function e(r) {
+        var t = r.max, a = r.min, n = r.value;
+        if (n > t) {
+            return t;
         }
-        if (t < n) {
-            return n;
+        if (n < a) {
+            return a;
         }
-        return t;
+        return n;
     };
     // If the current value is in between a step, i.e. defaultValue is not at a
     // step mark, this function handles navigating to the next correct step
-        var H = function e(r) {
-        var a = r.direction, n = r.min, t = r.step, i = r.value;
-        var l = new (o())(i).minus(n).modulo(t).toNumber();
-        if (l > 0) {
-            return a === "forward" ? t - l : l;
+        var W = function e(r) {
+        var t = r.direction, a = r.min, n = r.step, i = r.value;
+        var o = new (l())(i).minus(a).modulo(n).toNumber();
+        if (o > 0) {
+            return t === "forward" ? n - o : o;
         }
-        return t;
+        return n;
     };
-    var W = function e(r, a) {
-        if (a === null) {
+    var H = function e(r, t) {
+        if (t === null) {
             return undefined;
         }
-        var n = a.getBoundingClientRect();
-        var t = r.clientX - n.left;
-        return F({
+        var a = t.getBoundingClientRect();
+        var n = r.clientX - a.left;
+        return R({
             max: 100,
             min: 0,
-            value: t / n.width * 100
+            value: n / a.width * 100
         });
     };
-    var K = function e(r) {
-        var a = r.max, n = r.min, t = r.step, i = r.value;
+    var F = function e(r) {
+        var t = r.max, a = r.min, n = r.step, i = r.value;
         // Handles if the max is in between steps but val is larger than the halfway point between last step mark and max
-                if (i > a - (a - n) % t / 2) {
-            return a;
+                if (i > t - (t - a) % n / 2) {
+            return t;
         }
-        return new (o())(i).minus(n).div(t).todp(0).mul(t).add(n).toNumber();
+        return new (l())(i).minus(a).div(n).todp(0).mul(n).add(a).toNumber();
     };
-    var U = function e(r) {
-        var a = r.position, n = r.max, t = r.min, i = r.step;
-        var l = n - t;
-        var o = a / 100 * l + t;
-        return K({
-            max: n,
-            min: t,
+    var z = function e(r) {
+        var t = r.position, a = r.max, n = r.min, i = r.step;
+        var o = a - n;
+        var l = t / 100 * o + n;
+        return F({
+            max: a,
+            min: n,
             step: i,
-            value: o
+            value: l
         });
     };
-    var X = function e(r) {
-        var a = r.max, n = r.min, t = r.sliderBar, i = r.step;
+    var K = function e(r) {
+        var t = r.max, a = r.min, n = r.sliderBar, i = r.step;
         // don't render stepMarks if they are too small i.e. stepWidth is less than SliderThumb divided by 2
         // in that case, undefined is returned
-                if (t === null) {
+                if (n === null) {
             return undefined;
         }
-        var l = a - n;
-        var o = Math.round(l / i);
-        var s = t.getBoundingClientRect();
-        var u = i * 100 / l;
-        return s.width / o > w / 2 ? u : undefined;
+        var o = t - a;
+        var l = Math.round(o / i);
+        var u = n.getBoundingClientRect();
+        var s = i * 100 / o;
+        return u.width / l > C / 2 ? s : undefined;
     };
-    var G = function e(r) {
-        var a = r.max, n = r.min, t = r.value;
-        if (t === undefined) {
+    var U = function e(r) {
+        var t = r.max, a = r.min, n = r.value;
+        if (n === undefined) {
             return undefined;
         }
-        var i = a - n;
-        return (t - n) / i * 100;
+        var i = t - a;
+        return (n - a) / i * 100;
     };
-    function J(e) {
-        var r = e.defaultValue, t = e.describedBy, i = e.disabled, l = e.displayValue, o = e.elementRef, u = e.error, d = e.inline, p = e.labelledBy, m = e.max, b = m === void 0 ? 5 : m, y = e.maxLabel, g = e.min, h = g === void 0 ? 1 : g, x = e.minLabel, k = e.name, w = e.onChange, O = e.required, M = e.step, P = M === void 0 ? 1 : M, L = e.stepMarks, N = L === void 0 ? "focus" : L, R = e.thumbRef, V = e.value, T = D(e, [ "defaultValue", "describedBy", "disabled", "displayValue", "elementRef", "error", "inline", "labelledBy", "max", "maxLabel", "min", "minLabel", "name", "onChange", "required", "step", "stepMarks", "thumbRef", "value" ]);
+    function X(e) {
+        var r = e.defaultValue, n = e.describedBy, i = e.disabled, o = e.displayValue, l = e.elementRef, s = e.error, c = e.inline, f = e.labelledBy, p = e.max, m = p === void 0 ? 5 : p, y = e.maxLabel, h = e.min, g = h === void 0 ? 1 : h, x = e.minLabel, w = e.name, C = e.onChange, V = e.required, A = e.step, M = A === void 0 ? 1 : A, q = e.stepMarks, T = q === void 0 ? "focus" : q, I = e.thumbRef, N = e.value, L = D(e, [ "defaultValue", "describedBy", "disabled", "displayValue", "elementRef", "error", "inline", "labelledBy", "max", "maxLabel", "min", "minLabel", "name", "onChange", "required", "step", "stepMarks", "thumbRef", "value" ]);
         // @docs-props-type SliderPropsBase
-                var z = f()({
+                var X = b()({
             componentName: "Slider",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0]
         });
-        var J = (0, a.useState)(false), Q = I(J, 2), Y = Q[0], Z = Q[1];
-        var ee = (0, a.useState)(false), re = I(ee, 2), ae = re[0], ne = re[1];
-        var te = (0, a.useState)(false), ie = I(te, 2), le = ie[0], oe = ie[1];
-        var se = (0, a.useState)(null), ue = I(se, 2), ce = ue[0], de = ue[1];
-        var ve = (0, a.useState)(null), pe = I(ve, 2), fe = pe[0], me = pe[1];
-        var be = (0, a.useMemo)((function() {
-            return z ? K({
-                value: (b - h) / 2,
-                min: h,
-                max: b,
-                step: P
+        var G = (0, t.useState)(false), J = j(G, 2), Q = J[0], Y = J[1];
+        var Z = (0, t.useState)(false), ee = j(Z, 2), re = ee[0], te = ee[1];
+        var ae = (0, t.useState)(null), ne = j(ae, 2), ie = ne[0], oe = ne[1];
+        var le = (0, t.useState)(null), ue = j(le, 2), se = ue[0], de = ue[1];
+        var ce = (0, t.useMemo)((function() {
+            return X ? F({
+                value: (m - g) / 2,
+                min: g,
+                max: m,
+                step: M
             }) : r;
-        }), [ z, r, b, h, P ]);
-        var ye = (0, a.useState)(z ? V : be), ge = I(ye, 2), he = ge[0], xe = ge[1];
-        var ke = (0, a.useCallback)((function(e, r) {
-            var a = r.newValue;
-            if (he !== a) {
-                w === null || w === void 0 ? void 0 : w(e, {
-                    value: a,
-                    name: k
+        }), [ X, r, m, g, M ]);
+        var ve = (0, t.useState)(X ? N : ce), fe = j(ve, 2), be = fe[0], pe = fe[1];
+        var me = (0, t.useCallback)((function(e, r) {
+            var t = r.newValue;
+            if (be !== t) {
+                C === null || C === void 0 ? void 0 : C(e, {
+                    value: t,
+                    name: w
                 });
-                if (!z) {
-                    xe(a);
+                if (!X) {
+                    pe(t);
                 }
             }
-        }), [ z, k, w, he ]);
+        }), [ X, w, C, be ]);
         // handlers
-                var we = (0, a.useCallback)((function() {
-            Z(false);
-            oe(false);
+                var ye = (0, t.useCallback)((function() {
+            te(false);
         }), []);
-        var Se = (0, a.useCallback)((function() {
-            Z(true);
-            oe(true);
+        var he = (0, t.useCallback)((function() {
+            te(true);
         }), []);
-        var Ce = (0, a.useCallback)((function(e) {
-            de(e);
+        var ge = (0, t.useCallback)((function(e) {
+            oe(e);
         }), []);
-        var Oe = (0, a.useCallback)((function(e) {
-            me(e);
-            q(R, e);
-        }), [ R ]);
-        var Ee = (0, a.useCallback)((function(e) {
-            var r = W(e, ce);
+        var xe = (0, t.useCallback)((function(e) {
+            de(e);
+            B(I, e);
+        }), [ I ]);
+        var we = (0, t.useCallback)((function(e) {
+            var r = H(e, ie);
             if (r !== undefined) {
-                var a = U({
+                var t = z({
                     position: r,
-                    max: b,
-                    min: h,
-                    step: P
+                    max: m,
+                    min: g,
+                    step: M
                 });
-                ke(e, {
-                    newValue: a
+                me(e, {
+                    newValue: t
                 });
             }
-        }), [ b, h, ke, ce, P ]);
-        var _e = (0, a.useCallback)((function(e) {
-            var r = he;
+        }), [ m, g, me, ie, M ]);
+        var Ce = (0, t.useCallback)((function(e) {
+            var r = be;
             if (r !== undefined) {
-                var a = (0, s.keycode)(e.nativeEvent);
-                var n;
-                var t = H({
+                var t = (0, u.keycode)(e.nativeEvent);
+                var a;
+                var n = W({
                     direction: "forward",
-                    min: h,
-                    step: P,
+                    min: g,
+                    step: M,
                     value: r
                 });
-                var i = H({
+                var i = W({
                     direction: "backward",
-                    min: h,
-                    step: P,
+                    min: g,
+                    step: M,
                     value: r
                 });
-                if (a === "right") {
-                    n = r + t;
-                } else if (a === "left") {
-                    n = r - i;
-                } else if (a === "up") {
+                if (t === "right") {
+                    a = r + n;
+                } else if (t === "left") {
+                    a = r - i;
+                } else if (t === "up") {
                     e.preventDefault();
-                    n = r + t;
-                } else if (a === "down") {
+                    a = r + n;
+                } else if (t === "down") {
                     e.preventDefault();
-                    n = r - i;
+                    a = r - i;
                 } else {
                     return;
                 }
-                r = F({
-                    max: b,
-                    min: h,
-                    value: n
+                r = R({
+                    max: m,
+                    min: g,
+                    value: a
                 });
-                r = K({
-                    max: b,
-                    min: h,
-                    step: P,
+                r = F({
+                    max: m,
+                    min: g,
+                    step: M,
                     value: r
                 });
-                ke(e, {
+                me(e, {
                     newValue: r
                 });
             }
-        }), [ b, h, ke, P, he ]);
-        var Be = (0, a.useCallback)((function(e) {
+        }), [ m, g, me, M, be ]);
+        var Se = (0, t.useCallback)((function(e) {
             e.preventDefault();
-            fe === null || fe === void 0 ? void 0 : fe.focus();
-            ne(true);
-            oe(true);
-        }), [ fe ]);
-        var Me = (0, a.useCallback)((function() {
-            oe(true);
+            se === null || se === void 0 ? void 0 : se.focus();
+            Y(true);
+            te(true);
+        }), [ se ]);
+        var ke = (0, t.useCallback)((function() {
+            te(true);
         }), []);
-        var $e = (0, a.useCallback)((function() {
-            if (!ae) {
-                oe(false);
+        var $e = (0, t.useCallback)((function() {
+            if (!Q) {
+                te(false);
             }
-        }), [ ae ]);
-        var je = (0, a.useCallback)((function(e) {
-            if (ae) {
-                var r = W(e, ce);
+        }), [ Q ]);
+        var Ee = (0, t.useCallback)((function(e) {
+            if (Q) {
+                var r = H(e, ie);
                 if (r !== undefined) {
-                    var a = U({
+                    var t = z({
                         position: r,
-                        min: h,
-                        max: b,
-                        step: P
+                        min: g,
+                        max: m,
+                        step: M
                     });
-                    ke(e, {
-                        newValue: a
+                    me(e, {
+                        newValue: t
                     });
                 }
             }
-        }), [ ae, b, h, ke, ce, P ]);
-        var qe = (0, a.useCallback)((function() {
-            ne(false);
-            oe(false);
+        }), [ Q, m, g, me, ie, M ]);
+        var Oe = (0, t.useCallback)((function() {
+            Y(false);
+            te(false);
         }), []);
-        (0, a.useEffect)((function() {
+        (0, t.useEffect)((function() {
             if (false) {}
-        }), [ b, h ]);
-        var Ae = G({
-            value: he,
-            min: h,
-            max: b
+        }), [ m, g ]);
+        (0, t.useEffect)((function() {
+            // keep valueState in sync with value prop when controlled
+            if (X) {
+                pe(N);
+            }
+        }), [ X, N ]);
+        var Ve = i && "disabled" || s && "error" || "default";
+        var Pe = U({
+            value: be,
+            min: g,
+            max: m
         });
-        var Ie = N === "focus" && Y || N === "always";
-        var Pe = Ie && ce ? X({
-            max: b,
-            min: h,
-            sliderBar: ce,
-            step: P
+        var Be = M ? K({
+            max: m,
+            min: g,
+            sliderBar: ie,
+            step: M
         }) : undefined;
          /* eslint-disable jsx-a11y/no-static-element-interactions */
-        return n().createElement(S, A({
+        return a().createElement(S, _({
             "data-test": "slider",
-            "data-test-value": he,
-            elementRef: o,
-            flex: true,
-            inline: d
-        }, T), ae &&  n().createElement(n().Fragment, null,  n().createElement(c(), {
+            "data-test-value": be,
+            ref: l,
+            $inline: c
+        }, L), Q &&  a().createElement(a().Fragment, null,  a().createElement(d(), {
             target: window,
             eventType: "mouseup",
-            listener: qe
-        }),  n().createElement(c(), {
+            listener: Oe
+        }),  a().createElement(d(), {
             target: window,
             eventType: "mousemove",
-            listener: je
-        })), x !== null &&  n().createElement($, {
+            listener: Ee
+        })), x !== null &&  a().createElement(O, {
             "data-test": "min-label",
             $disabled: i
-        }, x || h),  n().createElement(C, {
-            onClick: i ? undefined : Ee
-        },  n().createElement(E, {
-            "aria-required": O,
+        }, x || g),  a().createElement(P, {
+            onClick: i ? undefined : we,
+            $state: Ve,
+            $stepAppearance: T
+        },  a().createElement(k, {
+            "aria-required": V,
             "data-test": "bar",
-            $disabled: i,
-            ref: Ce,
-            $error: u,
-            $position: Ae,
-            $stepMarksWidth: Pe
-        }),  n().createElement(_, {
-            "aria-describedby": t,
-            "aria-labelledby": p,
-            "aria-invalid": u,
-            "aria-valuemax": b,
-            "aria-valuemin": h,
-            "aria-valuenow": he,
+            ref: ge,
+            $thumbPosition: Pe,
+            $stepWidth: Be,
+            $state: Ve
+        }),  a().createElement($, {
+            "aria-describedby": n,
+            "aria-labelledby": f,
+            "aria-invalid": s,
+            "aria-valuemax": m,
+            "aria-valuemin": g,
+            "aria-valuenow": be,
             "data-test": "thumb",
-            onBlur: we,
-            onMouseEnter: Me,
+            onBlur: ye,
+            onMouseEnter: ke,
             onMouseLeave: $e,
-            onKeyDown: i ? undefined : _e,
-            onMouseDown: i ? undefined : Be,
-            onFocus: Se,
-            ref: Oe,
+            onKeyDown: i ? undefined : Ce,
+            onMouseDown: i ? undefined : Se,
+            onFocus: he,
+            ref: xe,
             role: "slider",
             disabled: i,
-            $error: u,
-            $position: Ae
-        }),  n().createElement(v(), {
-            open: le,
-            anchor: fe,
+            $thumbPosition: Pe,
+            $state: Ve
+        }),  a().createElement(v(), {
+            open: re,
+            anchor: se,
             appearance: "inverted",
             align: "center"
-        },  n().createElement(B, null, l || he))), y !== null &&  n().createElement(j, {
+        },  a().createElement(E, null, o || be))), y !== null &&  a().createElement(O, {
             "data-test": "max-label",
             $disabled: i
-        }, y || b));
+        }, y || m));
     }
-    J.propTypes = z;
-    /* harmony default export */    const Q = J;
+    X.propTypes = L;
+    /* harmony default export */    const G = X;
     // CONCATENATED MODULE: ./src/Slider/index.ts
     module.exports = r;
     /******/})();