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

package/Paginator.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = n => {
-            /******/ var a = n && n.__esModule ? 
-            /******/ () => n["default"]
-            /******/ : () => n
+        /******/ e.n = a => {
+            /******/ var n = a && a.__esModule ? 
+            /******/ () => a["default"]
+            /******/ : () => a
             /******/;
-            e.d(a, {
-                a
+            e.d(n, {
+                a: n
             });
-            /******/            return a;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (n, a) => {
-            /******/ for (var r in a) {
-                /******/ if (e.o(a, r) && !e.o(n, r)) {
-                    /******/ Object.defineProperty(n, r, {
+        /******/ e.d = (a, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(a, r)) {
+                    /******/ Object.defineProperty(a, r, {
                         enumerable: true,
-                        get: a[r]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
+        /******/ e.o = (e, a) => Object.prototype.hasOwnProperty.call(e, a)
         /******/;
     })();
     /******/
@@ -56,537 +56,427 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var n = {};
+    /************************************************************************/    var a = {};
     // ESM COMPAT FLAG
-        e.r(n);
+        e.r(a);
     // EXPORTS
-        e.d(n, {
-        Compact: () => /* reexport */ W,
-        PageControl: () => /* reexport */ oe,
-        default: () => /* reexport */ ke
+        e.d(a, {
+        Compact: () => /* reexport */ L,
+        PageControl: () => /* reexport */ Y,
+        default: () => /* reexport */ ie
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var r =  e.n(a);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
     const t = require("prop-types");
     var l =  e.n(t);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const i = require("@splunk/react-ui/Box");
-    var o =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronLeft"
+    const o = require("@splunk/react-icons/ChevronLeft");
+    var i =  e.n(o);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
+    const u = require("@splunk/react-icons/ChevronRight");
+    var c =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
     const s = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const c = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
-    const u = require("@splunk/react-icons/enterprise/ChevronLeft");
-    var p =  e.n(u);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronLeft"
-    const d = require("@splunk/react-icons/ChevronLeft");
-    var g =  e.n(d);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const v = require("@splunk/themes");
-    // CONCATENATED MODULE: ./src/Paginator/icons/ChevronLeft.tsx
-    function f(e) {
-        var n = e.className;
-        var a = (0, v.useSplunkTheme)(), t = a.isCompact, l = a.isEnterprise;
-        var i = t ? "20px" : "24px";
-        return l ?  r().createElement(p(), {
-            className: n,
-            hideDefaultTooltip: true,
-            screenReaderText: null
-        }) :  r().createElement(g(), {
-            className: n,
-            height: i,
-            width: i
-        });
-    }
-    /* harmony default export */    const m = f;
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const b = require("@splunk/react-icons/enterprise/ChevronRight");
-    var y =  e.n(b);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const h = require("@splunk/react-icons/ChevronRight");
-    var P =  e.n(h);
-    // CONCATENATED MODULE: ./src/Paginator/icons/ChevronRight.tsx
-    function C(e) {
-        var n = e.className;
-        var a = (0, v.useSplunkTheme)(), t = a.isCompact, l = a.isEnterprise;
-        var i = t ? "20px" : "24px";
-        return l ?  r().createElement(y(), {
-            className: n,
-            hideDefaultTooltip: true,
-            screenReaderText: null
-        }) :  r().createElement(P(), {
-            className: n,
-            height: i,
-            width: i
-        });
-    }
-    /* harmony default export */    const k = C;
+    const p = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const S = require("styled-components");
-    var O =  e.n(S);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const w = require("@splunk/react-ui/ButtonSimple");
-    var x =  e.n(w);
+    const f = require("styled-components");
+    var g =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
+    const d = require("@splunk/react-ui/Button");
+    var v =  e.n(d);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Paginator/ButtonStyles.ts
-    var E = O()(x()).withConfig({
-        displayName: "ButtonStyles__StyledButtonSimple",
+    var m = g()(v()).withConfig({
+        displayName: "ButtonStyles__StyledButton",
         componentId: "sc-1neztq7-0"
-    })([ "flex-shrink:0;font-weight:", ";min-width:", ";min-height:", ";text-align:center;&:not([disabled],[aria-disabled='true']){", ";", ";}", "" ], v.variables.fontWeightNormal, v.variables.inputHeight, v.variables.inputHeight, (0, 
-    v.pick)({
-        enterprise: {
-            // TODO: we can remove this pick once SUI-6160 fixes contentColorDefault in Enterprise
-            // we're intentionally only overriding dark here, because light has enough contrast as-is
-            // and changing only dark lets us avoid making an unnecessary change to Enterprise light in SUI 4
-            dark: (0, S.css)([ "color:", ";" ], v.variables.textGray)
-        },
-        prisma: (0, S.css)([ "color:", ";" ], v.variables.contentColorDefault)
-    }), (function(e) {
-        var n = e.$current;
-        return n && (0, S.css)([ "", ";", ";" ], v.mixins.typography({
-            color: "active",
-            weight: "bold"
-        }), (0, v.pick)({
-            // TODO: maintain this separation until SUI 5, where we unify on Prisma's approach
-            enterprise: (0, S.css)([ "border-color:", ";" ], v.variables.accentColor),
-            prisma: (0, S.css)([ "background-color:", ";" ], v.variables.interactiveColorOverlaySelected)
-        }));
-    }), (0, v.pick)({
-        enterprise: {
-            comfortable: (0, S.css)([ "padding:", ";" ], v.variables.spacingXSmall),
-            compact: (0, S.css)([ "padding:3px;" ])
-        },
-        prisma: (0, S.css)([ "padding:", ";& + &{margin-left:8px;}" ], (0, v.pick)({
-            comfortable: "5px 8px",
-            compact: "4px"
-        }))
-    }));
+    })([ "flex-shrink:0;font-weight:", ";&:not([disabled],[aria-disabled='true']){&:not([aria-current]){color:", ";}&[aria-current='false']{color:", ";}&[aria-current='page']{color:", ";border-color:", ";font-weight:", ";}&:hover{color:", ";}}&:is([disabled]),&:is([aria-disabled='true']){color:", ";}" ], b.variables.fontWeightNormal, b.variables.contentColorActive, b.variables.contentColorDefault, b.variables.contentColorActive, b.variables.contentColorAccent, b.variables.fontWeightBold, b.variables.contentColorAccentStrong, b.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Paginator/Button.tsx
-    function _() {
-        return _ = Object.assign ? Object.assign.bind() : function(e) {
-            for (var n = 1; n < arguments.length; n++) {
-                var a = arguments[n];
-                for (var r in a) {
-                    ({}).hasOwnProperty.call(a, r) && (e[r] = a[r]);
+    function y() {
+        return y = Object.assign ? Object.assign.bind() : function(e) {
+            for (var a = 1; a < arguments.length; a++) {
+                var n = arguments[a];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
-        }, _.apply(null, arguments);
+        }, y.apply(null, arguments);
     }
-    function j(e, n) {
+    function h(e, a) {
         if (null == e) return {};
-        var a, r, t = N(e, n);
+        var n, r, t = P(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                a = l[r], n.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+                n = l[r], a.includes(n) || {}.propertyIsEnumerable.call(e, n) && (t[n] = e[n]);
             }
         }
         return t;
     }
-    function N(e, n) {
+    function P(e, a) {
         if (null == e) return {};
-        var a = {};
+        var n = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                a[r] = e[r];
+                if (a.includes(r)) continue;
+                n[r] = e[r];
             }
         }
-        return a;
+        return n;
     }
-    var I = {
+    var C = {
         children: l().node,
-        disabled: l().oneOfType([ l().bool, l().oneOf([ "dimmed" ]) ]),
+        disabled: l().bool,
         onClick: l().func,
-        page: l().number,
-        /** @private */
-        selected: l().bool
+        page: l().number
     };
-    function T(e) {
-        var n = e.children, t = e.disabled, l = e.onClick, i = e.page, o = e.selected, s = j(e, [ "children", "disabled", "onClick", "page", "selected" ]);
-        var c = (0, a.useCallback)((function(e) {
-            if (i != null) {
-                l === null || l === void 0 ? void 0 : l(e, {
-                    page: i
-                });
-            } else {
-                l === null || l === void 0 ? void 0 : l(e, {});
-            }
-        }), [ l, i ]);
+    function O(e) {
+        var a = e.children, t = e.disabled, l = e.onClick, o = e.page, i = h(e, [ "children", "disabled", "onClick", "page" ]);
+        var u = (0, n.useCallback)((function(e) {
+            // Button can be a <button> or <a> tag depending on props but its callback always claims to be either
+            // this causes type problems, and we know we're always getting a <button> since we don't pass the "to" prop
+            // so override the type here to prevent type issues in components using this one
+            l === null || l === void 0 ? void 0 : l(e, {
+                page: o
+            });
+        }), [ l, o ]);
         
-        return r().createElement(E, _({
-            $current: o || false,
+        return r().createElement(m, y({
             "data-test": "page",
-            "data-test-page": i,
+            "data-test-page": o,
             appearance: "subtle",
-            disabled: t,
-            inline: false,
-            onClick: c
-        }, s), n);
+            disabled: t && "dimmed",
+            onClick: u
+        }, i), a);
     }
-    T.propTypes = I;
-    /* harmony default export */    const q = T;
+    O.propTypes = C;
+    /* harmony default export */    const S = O;
     // CONCATENATED MODULE: ./src/Paginator/CompactStyles.ts
-    var L = O()(o()).withConfig({
-        displayName: "CompactStyles__StyledBox",
+    var w = g().nav.withConfig({
+        displayName: "CompactStyles__StyledNav",
         componentId: "dwgzkj-0"
-    })([ "flex:0 1 auto;flex-wrap:nowrap;margin-left:auto;" ]);
-    var M = O().span.withConfig({
+    })([ "", " flex:0 1 auto;flex-wrap:nowrap;margin-left:auto;gap:", ";" ], b.mixins.reset("inline-flex"), b.variables.spacingXSmall);
+    var k = g().span.withConfig({
         displayName: "CompactStyles__StyledLabel",
         componentId: "dwgzkj-1"
-    })([ "align-items:center;display:flex;flex-wrap:wrap;margin-right:", ";" ], v.variables.spacingSmall);
+    })([ "align-items:center;display:flex;flex-wrap:wrap;margin-right:", ";" ], b.variables.spacingXSmall);
     // CONCATENATED MODULE: ./src/Paginator/Compact.tsx
-    function R() {
-        return R = Object.assign ? Object.assign.bind() : function(e) {
-            for (var n = 1; n < arguments.length; n++) {
-                var a = arguments[n];
-                for (var r in a) {
-                    ({}).hasOwnProperty.call(a, r) && (e[r] = a[r]);
+    function E() {
+        return E = Object.assign ? Object.assign.bind() : function(e) {
+            for (var a = 1; a < arguments.length; a++) {
+                var n = arguments[a];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
-        }, R.apply(null, arguments);
+        }, E.apply(null, arguments);
     }
-    function D(e, n) {
+    function _(e, a) {
         if (null == e) return {};
-        var a, r, t = z(e, n);
+        var n, r, t = j(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                a = l[r], n.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+                n = l[r], a.includes(n) || {}.propertyIsEnumerable.call(e, n) && (t[n] = e[n]);
             }
         }
         return t;
     }
-    function z(e, n) {
+    function j(e, a) {
         if (null == e) return {};
-        var a = {};
+        var n = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                a[r] = e[r];
+                if (a.includes(r)) continue;
+                n[r] = e[r];
             }
         }
-        return a;
+        return n;
     }
     /** @public */
-    /** @public */    var G = {
+    /** @public */    var x = {
         current: l().number,
         elementRef: l().oneOfType([ l().func, l().object ]),
         onChange: l().func,
         renderLabel: l().oneOfType([ l().bool, l().func ]),
         totalPages: l().number
     };
-    var B = function e(n) {
-        var a = n.current, r = n.totalPages;
+    var N = function e(a) {
+        var n = a.current, r = a.totalPages;
         var t = null;
-        if (a != null && r != null) {
-            t = (0, s.sprintf)((0, c._)("%d of %d pages"), a, r);
-        } else if (a != null) {
-            t = (0, s.sprintf)((0, c._)("Page %d"), a);
+        if (n != null && r != null) {
+            t = (0, s.sprintf)((0, p._)("%d of %d pages"), n, r);
+        } else if (n != null) {
+            t = (0, s.sprintf)((0, p._)("Page %d"), n);
         }
         return t;
     };
-    function H(e) {
-        var n = e.onChange, t = e.current, l = e.renderLabel, i = e.totalPages, o = D(e, [ "onChange", "current", "renderLabel", "totalPages" ]);
+    function I(e) {
+        var a = e.onChange, t = e.current, l = e.elementRef, o = e.renderLabel, u = e.totalPages, s = _(e, [ "onChange", "current", "elementRef", "renderLabel", "totalPages" ]);
         // @docs-props-type PaginatorCompactPropsBase
-                var s = (0, a.useCallback)((function(e, a) {
-            var r = a.page;
-            n === null || n === void 0 ? void 0 : n(e, {
+                var f = (0, n.useCallback)((function(e, n) {
+            var r = n.page;
+            a === null || a === void 0 ? void 0 : a(e, {
                 direction: "prev",
                 page: r
             });
-        }), [ n ]);
-        var u = (0, a.useCallback)((function(e, a) {
-            var r = a.page;
-            n === null || n === void 0 ? void 0 : n(e, {
+        }), [ a ]);
+        var g = (0, n.useCallback)((function(e, n) {
+            var r = n.page;
+            a === null || a === void 0 ? void 0 : a(e, {
                 direction: "next",
                 page: r
             });
-        }), [ n ]);
-        var p = null;
-        if (l) {
-            var d = typeof l === "function" ? l : B;
-            p = d({
+        }), [ a ]);
+        var d = null;
+        if (o) {
+            var v = typeof o === "function" ? o : N;
+            d = v({
                 current: t,
-                totalPages: i
+                totalPages: u
             });
         }
         
-        return r().createElement(L, R({
-            "aria-label": (0, c._)("Pagination"),
+        return r().createElement(w, E({
+            "aria-label": (0, p._)("Pagination"),
             "data-test": "paginator",
             "data-test-current": t,
-            flex: true,
-            inline: true,
-            tag: "nav"
-        }, o), p &&  r().createElement(M, {
+            ref: l
+        }, s), d &&  r().createElement(k, {
             "data-test": "label"
-        }, p),  r().createElement(q, {
-            "aria-label": (0, c._)("Go to previous page"),
+        }, d),  r().createElement(S, {
+            "aria-label": (0, p._)("Go to previous page"),
             "data-test": "prev",
-            disabled: t != null && t <= 1 ? "dimmed" : false,
-            onClick: s,
+            disabled: t != null && t <= 1,
+            onClick: f,
             page: t != null ? t - 1 : undefined
-        },  r().createElement(m, null)),  r().createElement(q, {
-            "aria-label": (0, c._)("Go to next page"),
+        },  r().createElement(i(), null)),  r().createElement(S, {
+            "aria-label": (0, p._)("Go to next page"),
             "data-test": "next",
-            disabled: t != null && i != null && t >= i ? "dimmed" : false,
-            onClick: u,
+            disabled: t != null && u != null && t >= u,
+            onClick: g,
             page: t != null ? t + 1 : undefined
-        },  r().createElement(k, null)));
+        },  r().createElement(c(), null)));
     }
-    H.propTypes = G;
-    /* harmony default export */    const W = H;
+    I.propTypes = x;
+    /* harmony default export */    const L = I;
     // CONCATENATED MODULE: external "@splunk/react-ui/Select"
-    const $ = require("@splunk/react-ui/Select");
-    var A =  e.n($);
+    const q = require("@splunk/react-ui/Select");
+    var R =  e.n(q);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const V = require("@splunk/react-ui/ScreenReaderContent");
-    var X =  e.n(V);
+    const T = require("@splunk/react-ui/ScreenReaderContent");
+    var M =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const F = require("@splunk/ui-utils/id");
+    const D = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: ./src/Paginator/PageSelectStyles.ts
-    var J = O().span.withConfig({
+    var z = g().span.withConfig({
         displayName: "PageSelectStyles__StyledWrapper",
         componentId: "haycz4-0"
     })([ "display:flex;" ]);
-    var K = O().span.withConfig({
+    var G = g().span.withConfig({
         displayName: "PageSelectStyles__StyledCount",
         componentId: "haycz4-1"
-    })([ "align-items:center;display:flex;flex-wrap:wrap;margin:0 ", ";" ], v.variables.spacingSmall);
-    var Q = O()(A()).withConfig({
+    })([ "align-items:center;display:flex;flex-wrap:wrap;margin:0 ", ";" ], b.variables.spacingSmall);
+    var A = g()(R()).withConfig({
         displayName: "PageSelectStyles__StyledSelect",
         componentId: "haycz4-2"
     })([ "flex:0 0 auto;" ]);
     // CONCATENATED MODULE: ./src/Paginator/PageSelect.tsx
-    function U(e, n) {
+    function B(e, a) {
         if (null == e) return {};
-        var a, r, t = Y(e, n);
+        var n, r, t = W(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                a = l[r], n.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+                n = l[r], a.includes(n) || {}.propertyIsEnumerable.call(e, n) && (t[n] = e[n]);
             }
         }
         return t;
     }
-    function Y(e, n) {
+    function W(e, a) {
         if (null == e) return {};
-        var a = {};
+        var n = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                a[r] = e[r];
+                if (a.includes(r)) continue;
+                n[r] = e[r];
             }
         }
-        return a;
+        return n;
     }
-    /** @public */    var Z = {
+    /** @public */    var X = {
         onChange: l().func,
         current: l().number,
         totalPages: l().number
     };
-    function ee(e) {
-        var n = e.onChange, t = e.current, l = t === void 0 ? 1 : t, i = e.totalPages, o = U(e, [ "onChange", "current", "totalPages" ]);
+    function V(e) {
+        var a = e.onChange, t = e.current, l = t === void 0 ? 1 : t, o = e.totalPages, i = B(e, [ "onChange", "current", "totalPages" ]);
         // @docs-props-type PaginatorPageSelectPropsBase
-                var u = (0, a.useRef)((0, F.createDOMID)("pages"));
-        var p = (0, a.useRef)((0, F.createDOMID)("totalPages"));
-        var d = function e(a, r) {
+                var u = (0, n.useRef)((0, D.createDOMID)("pages"));
+        var c = (0, n.useRef)((0, D.createDOMID)("totalPages"));
+        var f = function e(n, r) {
             var t = r.value;
-            n === null || n === void 0 ? void 0 : n(a, {
+            a === null || a === void 0 ? void 0 : a(n, {
                 page: t
             });
         };
         var g = [];
-        for (var v = 1; v <= i; v += 1) {
-            g.push( r().createElement(A().Option, {
-                label: "".concat(v),
-                key: "".concat(v),
-                value: v
+        for (var d = 1; d <= o; d += 1) {
+            g.push( r().createElement(R().Option, {
+                label: "".concat(d),
+                key: "".concat(d),
+                value: d
             }));
         }
-        var f = (0, s.sprintf)((0, c._)("of %d pages"), i);
+        var v = (0, s.sprintf)((0, p._)("of %d pages"), o);
         
-        return r().createElement(J, o,  r().createElement(Q, {
+        return r().createElement(z, i,  r().createElement(A, {
             value: l,
-            onChange: d,
-            "aria-labelledby": "".concat(u.current, " ").concat(p.current)
-        }, g),  r().createElement(X(), {
+            onChange: f,
+            "aria-labelledby": "".concat(u.current, " ").concat(c.current)
+        }, g),  r().createElement(M(), {
             id: u.current,
             "aria-hidden": true
-        }, l),  r().createElement(K, {
-            id: p.current,
+        }, l),  r().createElement(G, {
+            id: c.current,
             "aria-hidden": true
-        }, " ", f));
+        }, " ", v));
     }
-    ee.propTypes = Z;
-    /* harmony default export */    const ne = ee;
+    V.propTypes = X;
+    /* harmony default export */    const F = V;
     // CONCATENATED MODULE: ./src/Paginator/PageControl.tsx
-    function ae() {
-        return ae = Object.assign ? Object.assign.bind() : function(e) {
-            for (var n = 1; n < arguments.length; n++) {
-                var a = arguments[n];
-                for (var r in a) {
-                    ({}).hasOwnProperty.call(a, r) && (e[r] = a[r]);
+    function H() {
+        return H = Object.assign ? Object.assign.bind() : function(e) {
+            for (var a = 1; a < arguments.length; a++) {
+                var n = arguments[a];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
-        }, ae.apply(null, arguments);
+        }, H.apply(null, arguments);
     }
-    function re(e, n) {
+    function J(e, a) {
         if (null == e) return {};
-        var a, r, t = te(e, n);
+        var n, r, t = K(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                a = l[r], n.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+                n = l[r], a.includes(n) || {}.propertyIsEnumerable.call(e, n) && (t[n] = e[n]);
             }
         }
         return t;
     }
-    function te(e, n) {
+    function K(e, a) {
         if (null == e) return {};
-        var a = {};
+        var n = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                a[r] = e[r];
+                if (a.includes(r)) continue;
+                n[r] = e[r];
             }
         }
-        return a;
+        return n;
     }
-    /** @public */    var le = {
+    /** @public */    var Q = {
         elementRef: l().oneOfType([ l().func, l().object ]),
         onChange: l().func,
         current: l().number,
         totalPages: l().number
     };
-    function ie(e) {
-        var n = e.onChange, t = e.current, l = t === void 0 ? 1 : t, i = e.totalPages, o = re(e, [ "onChange", "current", "totalPages" ]);
+    function U(e) {
+        var a = e.onChange, t = e.current, l = t === void 0 ? 1 : t, o = e.totalPages, i = J(e, [ "onChange", "current", "totalPages" ]);
         // @docs-props-type PaginatorPageControlPropsBase
-                var s = (0, a.useCallback)((function(e, a) {
-            var r = a.page;
+                var u = (0, n.useCallback)((function(e, n) {
+            var r = n.page;
             // page will always be defined because we're passing "current" to Compact
             // getting TypeScript to understand this seems more trouble than it's worth
             // so we'll validate this behavior through tests
-                        n === null || n === void 0 ? void 0 : n(e, {
+                        a === null || a === void 0 ? void 0 : a(e, {
                 page: r
             });
-        }), [ n ]);
-        var c = (0, a.useCallback)((function(e) {
-            var a = e.current, t = e.totalPages;
-            if (a != null && t != null) {
+        }), [ a ]);
+        var c = (0, n.useCallback)((function(e) {
+            var n = e.current, t = e.totalPages;
+            if (n != null && t != null) {
                 
-                return r().createElement(ne, {
-                    current: a,
-                    onChange: n,
+                return r().createElement(F, {
+                    current: n,
+                    onChange: a,
                     totalPages: t
                 });
             }
             return null;
-        }), [ n ]);
+        }), [ a ]);
         
-        return r().createElement(W, ae({
+        return r().createElement(L, H({
             current: l,
             renderLabel: c,
-            onChange: s,
-            totalPages: i
-        }, o));
+            onChange: u,
+            totalPages: o
+        }, i));
     }
-    ie.propTypes = le;
-    /* harmony default export */    const oe = ie;
-    // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeHorizontal"
-    const se = require("@splunk/react-icons/DotsThreeHorizontal");
-    var ce =  e.n(se);
+    U.propTypes = Q;
+    /* harmony default export */    const Y = U;
     // CONCATENATED MODULE: ./src/Paginator/PageSeparatorStyles.ts
-    var ue = O().span.withConfig({
+    var Z = g().span.withConfig({
         displayName: "PageSeparatorStyles__StyledEllipsisWrapper",
         componentId: "j50fqf-0"
-    })([ "display:flex;align-items:center;margin:", ";color:", ";" ], (0, v.pick)({
-        enterprise: "0px 11px",
-        prisma: "0px 20px"
-    }), v.variables.contentColorActive);
+    })([ "display:flex;align-items:center;cursor:default;padding:", " ", ";" ], b.variables.spacingXSmall, b.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/Paginator/PageSeparator.tsx
-    function pe() {
-        var e = (0, v.useSplunkTheme)(), n = e.family;
-        var a = n === "enterprise" ?  r().createElement("span", {
-            role: "separator"
-        }, "…") :  r().createElement(ce(), null);
+    function $() {
         
-        return r().createElement(ue, {
+        return r().createElement(Z, {
             role: "separator"
-        }, a);
+        }, "…");
     }
-    /* harmony default export */    const de = pe;
+    /* harmony default export */    const ee = $;
     // CONCATENATED MODULE: ./src/Paginator/PaginatorStyles.ts
-    var ge = O()(m).withConfig({
-        displayName: "PaginatorStyles__StyledChevronLeftIcon",
+    var ae = g().nav.withConfig({
+        displayName: "PaginatorStyles__StyledNav",
         componentId: "pmabsp-0"
-    })([ "margin:", ";" ], (0, v.pick)({
-        enterprise: "-1px 3px 0 0",
-        prisma: "-2px 6px 0 0"
-    }));
-    var ve = O()(k).withConfig({
-        displayName: "PaginatorStyles__StyledChevronRightIcon",
-        componentId: "pmabsp-1"
-    })([ "margin:", ";" ], (0, v.pick)({
-        enterprise: "-1px 0 0 3px",
-        prisma: "-2px 0 0 6px"
-    }));
-    var fe = O().div.withConfig({
-        displayName: "PaginatorStyles__StyledPrevNext",
-        componentId: "pmabsp-2"
-    })([ "padding:", ";white-space:nowrap;" ], (0, v.pick)({
-        enterprise: "0 3px",
-        prisma: "0 8px"
-    }));
-    var me = O()(q).withConfig({
-        displayName: "PaginatorStyles__StyledPaginatorButton",
-        componentId: "pmabsp-3"
-    })([ "&:not([disabled]){", ",", "{", "}}" ], /* sc-sel */ ge, /* sc-sel */ ve, (0, 
-    v.pick)({
-        prisma: (0, S.css)([ "color:", ";" ], v.variables.contentColorMuted)
-    }));
+    })([ "", " gap:", ";" ], b.mixins.reset("inline-flex"), b.variables.spacingXSmall);
     // CONCATENATED MODULE: ./src/Paginator/Paginator.tsx
-    function be() {
-        return be = Object.assign ? Object.assign.bind() : function(e) {
-            for (var n = 1; n < arguments.length; n++) {
-                var a = arguments[n];
-                for (var r in a) {
-                    ({}).hasOwnProperty.call(a, r) && (e[r] = a[r]);
+    function ne() {
+        return ne = Object.assign ? Object.assign.bind() : function(e) {
+            for (var a = 1; a < arguments.length; a++) {
+                var n = arguments[a];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
-        }, be.apply(null, arguments);
+        }, ne.apply(null, arguments);
     }
-    function ye(e, n) {
+    function re(e, a) {
         if (null == e) return {};
-        var a, r, t = he(e, n);
+        var n, r, t = te(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                a = l[r], n.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+                n = l[r], a.includes(n) || {}.propertyIsEnumerable.call(e, n) && (t[n] = e[n]);
             }
         }
         return t;
     }
-    function he(e, n) {
+    function te(e, a) {
         if (null == e) return {};
-        var a = {};
+        var n = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                a[r] = e[r];
+                if (a.includes(r)) continue;
+                n[r] = e[r];
             }
         }
-        return a;
+        return n;
     }
     /** @public */
-    /** @public */    var Pe = {
+    /** @public */    var le = {
         alwaysShowLastPageLink: l().bool,
         generatePageProps: l().func,
         current: l().number,
@@ -595,23 +485,23 @@
         onChange: l().func,
         totalPages: l().number
     };
-    function Ce(e) {
-        var n = e.alwaysShowLastPageLink, t = n === void 0 ? false : n, l = e.generatePageProps, i = e.current, u = i === void 0 ? 1 : i, p = e.numPageLinks, d = p === void 0 ? 5 : p, g = e.onChange, v = e.totalPages, f = ye(e, [ "alwaysShowLastPageLink", "generatePageProps", "current", "numPageLinks", "onChange", "totalPages" ]);
+    function oe(e) {
+        var a = e.alwaysShowLastPageLink, t = a === void 0 ? false : a, l = e.generatePageProps, o = e.current, u = o === void 0 ? 1 : o, f = e.numPageLinks, g = f === void 0 ? 5 : f, d = e.onChange, v = e.totalPages, b = e.elementRef, m = re(e, [ "alwaysShowLastPageLink", "generatePageProps", "current", "numPageLinks", "onChange", "totalPages", "elementRef" ]);
         // @docs-props-type PaginatorPropsBase
-                var m = (0, a.useCallback)((function(e, n) {
-            var a = n.page;
+                var y = (0, n.useCallback)((function(e, a) {
+            var n = a.page;
             // page will always be defined because we're passing "page" to PaginatorButton
             // getting TypeScript to understand this seems more trouble than it's worth
             // so we'll validate this behavior through tests
-                        g === null || g === void 0 ? void 0 : g(e, {
-                page: a
+                        d === null || d === void 0 ? void 0 : d(e, {
+                page: n
             });
-        }), [ g ]);
+        }), [ d ]);
         // Can't show more links than total number of pages.
-                var b = Math.min(d, v);
-        var y = Math.ceil(b / 2);
-        var h = Math.ceil(v - b / 2);
-        var P = [];
+                var h = Math.min(g, v);
+        var P = Math.ceil(h / 2);
+        var C = Math.ceil(v - h / 2);
+        var O = [];
         if (v <= 1) {
             return null;
         }
@@ -619,105 +509,103 @@
         /**
    * Paginator shows numPageLinks page buttons that are nearby the current page.
    * firstPageNearbyCurrent and lastPageNearbyCurrent refer to the page number of the first and last of these buttons.
-   */        var C;
+   */        var w;
         var k;
-        if (u <= y + 1) {
+        if (u <= P + 1) {
             // + 1 to avoid ellipsis between 1 and 2
-            C = 1;
-            k = C + Math.min(v, b) - 1;
-        } else if (u > y && u < h) {
-            k = Math.ceil(u + (b - 2) / 2);
-            C = k - b + 2;
+            w = 1;
+            k = w + Math.min(v, h) - 1;
+        } else if (u > P && u < C) {
+            k = Math.ceil(u + (h - 2) / 2);
+            w = k - h + 2;
         } else {
             // include page #1 to avoid ellipsis between 1 and 2
-            C = v - b === 1 ? 1 : v - b + 1;
+            w = v - h === 1 ? 1 : v - h + 1;
             k = v;
         }
         // bump up the last page to avoid ellipsis
                 k = t && k + 1 === v ? v : k;
-        var S = u - 1;
-        P.push( r().createElement(me, be({}, l === null || l === void 0 ? void 0 : l({
-            page: S
+        var E = u - 1;
+        O.push( r().createElement(S, ne({}, l === null || l === void 0 ? void 0 : l({
+            page: E
         }), {
-            "aria-label": (0, c._)("Go to previous page"),
+            "aria-label": (0, p._)("Go to previous page"),
             "data-test": "prev",
             disabled: u === 1,
             key: "prev",
-            onClick: m,
-            page: S
-        }),  r().createElement(fe, null,  r().createElement(ge, null), (0, c._)("Prev"))));
-        if (u > y && v > b && C !== 1) {
-            var O = 1;
-            P.push( r().createElement(me, be({}, l === null || l === void 0 ? void 0 : l({
-                page: O
+            onClick: y,
+            page: E
+        }),  r().createElement(i(), null), (0, p._)("Prev")));
+        if (u > P && v > h && w !== 1) {
+            var _ = 1;
+            O.push( r().createElement(S, ne({}, l === null || l === void 0 ? void 0 : l({
+                page: _
             }), {
-                "aria-label": (0, c._)("Go to first page"),
+                "aria-label": (0, p._)("Go to first page"),
                 key: "first",
-                onClick: m,
-                page: O
+                onClick: y,
+                page: _
             }), "1"));
-            P.push( r().createElement(de, {
+            O.push( r().createElement(ee, {
                 "data-test": "page",
                 key: "prevEllipsis"
             }));
         }
-        for (var w = C; w <= k; w += 1) {
-            var x = w === u;
-            P.push( r().createElement(me, be({}, l === null || l === void 0 ? void 0 : l({
-                page: w
+        for (var j = w; j <= k; j += 1) {
+            var x = j === u;
+            O.push( r().createElement(S, ne({}, l === null || l === void 0 ? void 0 : l({
+                page: j
             }), {
                 "aria-current": x ? "page" : false,
-                "aria-label": (0, s.sprintf)((0, c._)("Page %(pageNumber)d"), {
-                    pageNumber: w
+                "aria-label": (0, s.sprintf)((0, p._)("Page %(pageNumber)d"), {
+                    pageNumber: j
                 }),
-                key: w,
-                onClick: m,
+                key: j,
+                onClick: y,
                 selected: x,
-                page: w
-            }), String(w)));
+                page: j
+            }), String(j)));
         }
-        if (u <= h && v > b && k !== v) {
-            P.push( r().createElement(de, {
+        if (u <= C && v > h && k !== v) {
+            O.push( r().createElement(ee, {
                 "data-test": "page",
                 key: "nextEllipsis"
             }));
             if (t) {
-                P.push( r().createElement(me, be({}, l === null || l === void 0 ? void 0 : l({
+                O.push( r().createElement(S, ne({}, l === null || l === void 0 ? void 0 : l({
                     page: v
                 }), {
-                    "aria-label": (0, c._)("Go to last page"),
+                    "aria-label": (0, p._)("Go to last page"),
                     "data-test": "last",
                     key: "last",
-                    onClick: m,
+                    onClick: y,
                     page: v
                 }), String(v)));
             }
         }
-        var E = u + 1;
-        P.push( r().createElement(me, be({}, l === null || l === void 0 ? void 0 : l({
-            page: E
+        var N = u + 1;
+        O.push( r().createElement(S, ne({}, l === null || l === void 0 ? void 0 : l({
+            page: N
         }), {
-            "aria-label": (0, c._)("Go to next page"),
+            "aria-label": (0, p._)("Go to next page"),
             "data-test": "next",
             disabled: u === v,
             key: "next",
-            onClick: m,
-            page: E
-        }),  r().createElement(fe, null, (0, c._)("Next"),  r().createElement(ve, null))));
+            onClick: y,
+            page: N
+        }), (0, p._)("Next"),  r().createElement(c(), null)));
         
-        return r().createElement(o(), be({
-            "aria-label": (0, c._)("Pagination"),
+        return r().createElement(ae, ne({
+            "aria-label": (0, p._)("Pagination"),
             "data-test": "paginator",
             "data-test-current": u,
-            flex: true,
-            inline: true,
-            tag: "nav"
-        }, f), P);
+            ref: b
+        }, m), O);
     }
-    Ce.Compact = W;
-    Ce.PageControl = oe;
-    Ce.propTypes = Pe;
-    /* harmony default export */    const ke = Ce;
+    oe.Compact = L;
+    oe.PageControl = Y;
+    oe.propTypes = le;
+    /* harmony default export */    const ie = oe;
     // CONCATENATED MODULE: ./src/Paginator/index.ts
-    module.exports = n;
+    module.exports = a;
     /******/})();