@splunk/react-ui 5.0.0-rc.2 → 5.1.0

package/Table.js

@@ -67,58 +67,58 @@
         Head: () => /* reexport */ Zt,
         HeadCell: () => /* reexport */ _n,
         HeadDropdownCell: () => /* reexport */ Cr,
-        Row: () => /* reexport */ _t,
+        Row: () => /* reexport */ Nt,
         default: () => /* reexport */ Jo
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var r =  e.n(t);
-    // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var i =  e.n(o);
     // CONCATENATED MODULE: external "@dnd-kit/core"
-    const a = require("@dnd-kit/core");
-    // CONCATENATED MODULE: external "@dnd-kit/sortable"
-    const l = require("@dnd-kit/sortable");
+    const o = require("@dnd-kit/core");
     // CONCATENATED MODULE: external "@dnd-kit/modifiers"
-    const u = require("@dnd-kit/modifiers");
+    const i = require("@dnd-kit/modifiers");
+    // CONCATENATED MODULE: external "@dnd-kit/sortable"
+    const a = require("@dnd-kit/sortable");
     // CONCATENATED MODULE: external "lodash/forEach"
-    const s = require("lodash/forEach");
-    var c =  e.n(s);
+    const l = require("lodash/forEach");
+    var u =  e.n(l);
     // CONCATENATED MODULE: external "lodash/has"
-    const d = require("lodash/has");
-    var f =  e.n(d);
+    const s = require("lodash/has");
+    var c =  e.n(s);
     // CONCATENATED MODULE: external "lodash/indexOf"
-    const v = require("lodash/indexOf");
-    var p =  e.n(v);
+    const d = require("lodash/indexOf");
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "lodash/isEqual"
-    const m = require("lodash/isEqual");
-    var b =  e.n(m);
+    const v = require("lodash/isEqual");
+    var p =  e.n(v);
     // CONCATENATED MODULE: external "lodash/isNumber"
-    const h = require("lodash/isNumber");
+    const m = require("lodash/isNumber");
     // CONCATENATED MODULE: external "lodash/omit"
-    const y = require("lodash/omit");
-    var g =  e.n(y);
+    const b = require("lodash/omit");
+    var h =  e.n(b);
     // CONCATENATED MODULE: external "lodash/throttle"
-    const w = require("lodash/throttle");
+    const y = require("lodash/throttle");
+    var g =  e.n(y);
+    // CONCATENATED MODULE: external "prop-types"
+    const w = require("prop-types");
     var C =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
     const x = require("@splunk/react-ui/EventListener");
     var S =  e.n(x);
-    // CONCATENATED MODULE: external "@splunk/react-ui/useResizeObserver"
-    const k = require("@splunk/react-ui/useResizeObserver");
-    var O =  e.n(k);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const R = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
-    const E = require("@splunk/react-ui/ScrollContainerContext");
+    const k = require("@splunk/react-ui/ScrollContainerContext");
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const I = require("@splunk/react-ui/usePrevious");
-    var T =  e.n(I);
+    const O = require("@splunk/react-ui/usePrevious");
+    var R =  e.n(O);
+    // CONCATENATED MODULE: external "@splunk/react-ui/useResizeObserver"
+    const E = require("@splunk/react-ui/useResizeObserver");
+    var I =  e.n(E);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
+    const T = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const j = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const D = require("@splunk/ui-utils/format");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const D = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "lodash/includes"
     const q = require("lodash/includes");
     var A =  e.n(q);
@@ -235,19 +235,19 @@
     }
     var G = {
         /** @private. Generally passed by Table rather than added directly. */
-        actions: i().bool,
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
+        actions: C().bool,
+        children: C().node,
+        elementRef: C().oneOfType([ C().func, C().object ]),
         /** @private. Generally passed by Table rather than added directly. */
-        movableColumns: i().bool,
+        movableColumns: C().bool,
         /** @private. Generally passed by Table rather than added directly. */
-        rowExpansion: i().oneOf([ "single", "multi", "none", "controlled" ]),
+        rowExpansion: C().oneOf([ "single", "multi", "none", "controlled" ]),
         /** @private. Generally passed by Table rather than added directly. */
-        onRequestMoveRow: i().func,
+        onRequestMoveRow: C().func,
         /** @private. Generally passed by Table rather than added directly. */
-        primaryColumnIndex: i().number,
+        primaryColumnIndex: C().number,
         /** @private. Generally passed by Table rather than added directly. */
-        stripeRows: i().bool
+        stripeRows: C().bool
     };
     function J(e) {
         var n = e.actions, o = e.children, i = e.elementRef, a = e.movableColumns, l = e.onRequestMoveRow, u = e.rowExpansion, s = u === void 0 ? "none" : u, c = e.primaryColumnIndex, d = e.stripeRows, f = X(e, [ "actions", "children", "elementRef", "movableColumns", "onRequestMoveRow", "rowExpansion", "primaryColumnIndex", "stripeRows" ]);
@@ -292,7 +292,7 @@
                         n.set(a, Array.from({
                             length: l
                         }, (function() {
-                            return (0, R.createDOMID)();
+                            return (0, D.createDOMID)();
                         })));
                         r = true;
                     }
@@ -441,8 +441,8 @@
         return t;
     }
     var ce = {
-        children: i().node.isRequired,
-        side: i().oneOf([ "top", "bottom" ])
+        children: C().node.isRequired,
+        side: C().oneOf([ "top", "bottom" ])
     };
     /**
  * Tables that use a docked header must place the caption on the bottom side.
@@ -539,27 +539,27 @@
         return t;
     }
     /** @public */    var Ce = {
-        align: i().oneOf([ "left", "center", "right" ]),
+        align: C().oneOf([ "left", "center", "right" ]),
         /** @private */
-        appearance: i().oneOf([ "data", "link", "rowLink" ]),
+        appearance: C().oneOf([ "data", "link", "rowLink" ]),
         /** @private Used to set the $clickable appearance without an onClick */
-        appearClickable: i().bool,
-        children: i().node,
-        data: i().any,
-        elementRef: i().oneOfType([ i().func, i().object ]),
+        appearClickable: C().bool,
+        children: C().node,
+        data: C().any,
+        elementRef: C().oneOfType([ C().func, C().object ]),
         /** @private */
-        isPrimaryCell: i().bool,
-        onClick: i().func,
+        isPrimaryCell: C().bool,
+        onClick: C().func,
         /** @private */
-        onKeyDown: i().func,
+        onKeyDown: C().func,
         /** @private */
-        disabled: i().bool,
+        disabled: C().bool,
         /** @private. */
-        expand: i().bool,
+        expand: C().bool,
         /** @private. */
-        stripe: i().oneOf([ "odd", "even", "none" ]),
+        stripe: C().oneOf([ "odd", "even", "none" ]),
         /** @private. */
-        variant: i().oneOf([ "toggle", "expand", "drag", "actions" ])
+        variant: C().oneOf([ "toggle", "expand", "drag", "actions" ])
     };
     function xe(e) {
         var n = e.align, o = n === void 0 ? "left" : n, i = e.appearance, a = e.appearClickable, l = e.children, u = e.data, s = e.disabled, c = e.elementRef, d = e.isPrimaryCell, f = e.onClick, v = e.onKeyDown, p = e.stripe, m = e.variant, b = ge(e, [ "align", "appearance", "appearClickable", "children", "data", "disabled", "elementRef", "isPrimaryCell", "onClick", "onKeyDown", "stripe", "variant" ]);
@@ -617,35 +617,20 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
     const je = require("@splunk/react-ui/Tooltip");
     var De =  e.n(je);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowDown"
-    const qe = require("@splunk/react-icons/ArrowDown");
-    var Ae =  e.n(qe);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowUp"
-    const Pe = require("@splunk/react-icons/ArrowUp");
-    var _e =  e.n(Pe);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowUpDown"
-    const ze = require("@splunk/react-icons/ArrowUpDown");
-    var Me =  e.n(ze);
-    // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
-    const $e = require("@splunk/react-icons/CaretSmallDown");
-    var Ne =  e.n($e);
-    // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
-    const We = require("@splunk/react-icons/InformationCircle");
-    var Le =  e.n(We);
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-    const He = require("@splunk/react-ui/Divider");
-    var Ke =  e.n(He);
+    const qe = require("@splunk/react-ui/Divider");
+    var Ae =  e.n(qe);
     // CONCATENATED MODULE: ./src/Table/HeadInnerStyles.ts
-    var Be = (0, z.css)([ "display:inline-flex;align-items:center;grid-row:1;height:1lh;" ]);
-    var Ve = M().span.withConfig({
+    var Pe = (0, z.css)([ "display:inline-flex;align-items:center;grid-row:1;height:1lh;" ]);
+    var _e = M().span.withConfig({
         displayName: "HeadInnerStyles__StyledIcon",
         componentId: "sc-1sa0wng-0"
-    })([ "", " grid-column:icon;" ], Be);
-    var Fe = M().span.withConfig({
+    })([ "", " grid-column:icon;" ], Pe);
+    var ze = M().span.withConfig({
         displayName: "HeadInnerStyles__StyledTooltipIcon",
         componentId: "sc-1sa0wng-1"
-    })([ "", " grid-column:tooltip;" ], Be);
-    var Ue = M().span.withConfig({
+    })([ "", " grid-column:tooltip;" ], Pe);
+    var Me = M().span.withConfig({
         displayName: "HeadInnerStyles__StyledLabel",
         componentId: "sc-1sa0wng-2"
     })([ "grid-column:label;grid-row:1 / -1;position:relative;word-wrap:break-word;word-break:break-word;height:100%;", " ", " ", "" ], (function(e) {
@@ -658,8 +643,8 @@
         left: (0, z.css)([ "& > &{text-align:left;}" ]),
         center: (0, z.css)([ "& > &{text-align:center;}" ])
     }));
-    var Xe = (0, z.css)([ "box-shadow:", ";outline:none;color:", ";text-decoration:underline;" ], $.variables.focusShadowInset, $.variables.contentColorActive);
-    var Ye = M().div.withConfig({
+    var $e = (0, z.css)([ "box-shadow:", ";outline:none;color:", ";text-decoration:underline;" ], $.variables.focusShadowInset, $.variables.contentColorActive);
+    var Ne = M().div.withConfig({
         displayName: "HeadInnerStyles__Styled",
         componentId: "sc-1sa0wng-3"
     })([ "", ";", ";", ";position:relative;", " grid-template-rows:1lh auto;align-items:start;flex-grow:1;height:100%;padding-block:", ";padding-inline:", ";justify-content:", ";", " ", " @media print{background-image:none;}", "" ], $.mixins.reset("grid"), $.mixins.clearfix(), $.mixins.typography("body", {
@@ -682,16 +667,66 @@
         actions: (0, z.css)([ "padding-block:2px;" ])
     }), (function(e) {
         var n = e.$clickable, t = e.$focusWithin;
-        return n && (0, z.css)([ "cursor:pointer;&:focus{", "}", " &:hover{outline:none;text-decoration:underline;color:", ";}" ], Xe, t && (0, 
-        z.css)([ "&:focus-within{", "}" ], Xe), $.variables.contentColorActive);
+        return n && (0, z.css)([ "cursor:pointer;&:focus{", "}", " &:hover{outline:none;text-decoration:underline;color:", ";}" ], $e, t && (0, 
+        z.css)([ "&:focus-within{", "}" ], $e), $.variables.contentColorActive);
     }));
-    var Ge = M()(Ke()).withConfig({
+    var We = M()(Ae()).withConfig({
         displayName: "HeadInnerStyles__StyledResize",
         componentId: "sc-1sa0wng-4"
-    })([ "", ";position:absolute;right:-5px;width:9px;top:0;bottom:0;z-index:1;cursor:col-resize;th:last-child > div > ", " > &{right:0;width:4px;}&:hover{outline:none;&::before{content:'';background:", ";position:absolute;left:4px;width:1px;top:0;bottom:0;}}&:focus{outline:none;&::before{content:'';position:absolute;background:", ";box-shadow:", ";left:4px;width:1px;top:0;bottom:0;}}" ], $.mixins.reset("block"), /* sc-sel */ Ye, $.variables.borderColorStrong, $.variables.focusColor, $.variables.focusShadow);
+    })([ "", ";position:absolute;right:-5px;width:9px;top:0;bottom:0;z-index:1;cursor:col-resize;th:last-child > div > ", " > &{right:1px;width:4px;}&:hover{outline:none;&::before{content:'';background:", ";position:absolute;left:4px;width:1px;top:0;bottom:0;}}&:focus{outline:none;&::before{content:'';position:absolute;background:", ";box-shadow:", ";left:4px;width:1px;top:0;bottom:0;}}" ], $.mixins.reset("block"), /* sc-sel */ Ne, $.variables.borderColorStrong, $.variables.focusColor, $.variables.focusShadow);
+    // CONCATENATED MODULE: ./src/Table/HeadCellStyles.ts
+    var Le = M().div.withConfig({
+        displayName: "HeadCellStyles__StyledInnerWrapper",
+        componentId: "sc-1hj81sa-0"
+    })([ "display:flex;height:100%;align-items:flex-start;" ]);
+    var He = M().th.withConfig({
+        displayName: "HeadCellStyles__Styled",
+        componentId: "sc-1hj81sa-1"
+    })([ "", ";background-color:", ";box-sizing:content-box;text-align:left;vertical-align:", ";position:relative;height:100%;line-height:20px;&:not(:first-child,:has(", ")){", "{border-left:1px solid ", ";}}&:has(", "){", "{border-right:1px solid ", ";}}&:nth-last-child(2):has(", ") + &:last-child{", "{border-left:none;}}*:where(button):focus{box-shadow:", ";}", " ", " ", "" ], $.mixins.reset("table-cell"), $.variables.neutral100, (function(e) {
+        var n = e.$variant;
+        return n ? "middle" : "top";
+    }), We, /* sc-sel */ Le, $.variables.borderColorWeak, We, /* sc-sel */ Le, $.variables.borderColor, We, /* sc-sel */ Le, $.variables.focusShadowInset, (function(e) {
+        var n = e.$isDragging;
+        return n && (0, z.css)([ "background-color:", ";&:focus{box-shadow:none;}" ], $.variables.backgroundColorPage);
+    }), (function(e) {
+        var n = e.$variant;
+        return n && (0, z.css)([ "&:first-child + &{", "{border-left:1px solid ", ";}}" ], Le, $.variables.borderColorWeak);
+    }), (0, $.pickVariant)("$variant", {
+        actions: (0, z.css)([ "*:where(button){", " &:focus{box-shadow:", ";}}" ], (0, ve.buttonMixin)("subtle", {
+            color: $.variables.contentColorDefault
+        }), $.variables.focusShadowInset)
+    }));
+    var Ke = M().div.withConfig({
+        displayName: "HeadCellStyles__StyledIcon",
+        componentId: "sc-1hj81sa-2"
+    })([ "display:inline-flex;align-items:center;height:1lh;" ]);
+    // TODO(SUI-7400): Refactor the drag handler of re-order column
+        var Be = M().div.withConfig({
+        displayName: "HeadCellStyles__StyledDragHandler",
+        componentId: "sc-1hj81sa-3"
+    })([ "display:inline-flex;align-items:start;align-self:stretch;justify-content:center;min-width:20px;cursor:move;padding-block:", ";-webkit-user-select:none;-moz-user-select:none;user-select:none;&:hover{background:", ";color:", ";}&:focus{background:", ";box-shadow:", ";color:", ";}" ], (0, 
+    $.pick)({
+        comfortable: "8px",
+        compact: "6px"
+    }), $.variables.interactiveColorOverlayHover, $.variables.contentColorActive, $.variables.interactiveColorOverlayDrag, $.variables.focusShadowInset, $.variables.contentColorActive);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowDown"
+    const Ve = require("@splunk/react-icons/ArrowDown");
+    var Fe =  e.n(Ve);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowUp"
+    const Ue = require("@splunk/react-icons/ArrowUp");
+    var Xe =  e.n(Ue);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowUpDown"
+    const Ye = require("@splunk/react-icons/ArrowUpDown");
+    var Ge =  e.n(Ye);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
+    const Je = require("@splunk/react-icons/CaretSmallDown");
+    var Qe =  e.n(Je);
+    // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
+    const Ze = require("@splunk/react-icons/InformationCircle");
+    var en =  e.n(Ze);
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var Je = {
+    var nn = {
         body: {
             appendChild: function e() {
                 return [];
@@ -745,16 +780,16 @@
             search: ""
         }
     };
-    function Qe() {
-        var e = typeof document !== "undefined" ? document : Je;
+    function tn() {
+        var e = typeof document !== "undefined" ? document : nn;
         return e;
     }
-    var Ze = Qe();
-    /* harmony default export */    const en = /* unused pure expression or super */ null && Ze;
+    var rn = tn();
+    /* harmony default export */    const on = /* unused pure expression or super */ null && rn;
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var nn = {
-        document: Je,
+    var an = {
+        document: nn,
         navigator: {
             userAgent: ""
         },
@@ -808,15 +843,15 @@
             clearTimeout(n);
         }
     };
-    function tn() {
-        var e = typeof window !== "undefined" ? window : nn;
+    function ln() {
+        var e = typeof window !== "undefined" ? window : an;
         return e;
     }
-    var rn = tn();
-    /* harmony default export */    const on = /* unused pure expression or super */ null && rn;
+    var un = ln();
+    /* harmony default export */    const sn = /* unused pure expression or super */ null && un;
     // CONCATENATED MODULE: ./src/Table/HeadInner.tsx
-    function an() {
-        return an = Object.assign ? Object.assign.bind() : function(e) {
+    function cn() {
+        return cn = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -824,41 +859,41 @@
                 }
             }
             return e;
-        }, an.apply(null, arguments);
+        }, cn.apply(null, arguments);
     }
-    function ln(e) {
-        return cn(e) || sn(e) || vn(e) || un();
+    function dn(e) {
+        return pn(e) || vn(e) || hn(e) || fn();
     }
-    function un() {
+    function fn() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function sn(e) {
+    function vn(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function cn(e) {
-        if (Array.isArray(e)) return pn(e);
+    function pn(e) {
+        if (Array.isArray(e)) return yn(e);
     }
-    function dn(e, n) {
-        return bn(e) || mn(e, n) || vn(e, n) || fn();
+    function mn(e, n) {
+        return wn(e) || gn(e, n) || hn(e, n) || bn();
     }
-    function fn() {
+    function bn() {
         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 vn(e, n) {
+    function hn(e, n) {
         if (e) {
-            if ("string" == typeof e) return pn(e, n);
+            if ("string" == typeof e) return yn(e, n);
             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) ? pn(e, n) : void 0;
+            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) ? yn(e, n) : void 0;
         }
     }
-    function pn(e, n) {
+    function yn(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function mn(e, n) {
+    function gn(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, o, i, a, l = [], u = !0, s = !1;
@@ -880,12 +915,12 @@
             return l;
         }
     }
-    function bn(e) {
+    function wn(e) {
         if (Array.isArray(e)) return e;
     }
-    function hn(e, n) {
+    function Cn(e, n) {
         if (null == e) return {};
-        var t, r, o = yn(e, n);
+        var t, r, o = xn(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -894,7 +929,7 @@
         }
         return o;
     }
-    function yn(e, n) {
+    function xn(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -905,235 +940,197 @@
         }
         return t;
     }
-    var gn = {
-        align: i().oneOf([ "left", "center", "right" ]),
-        clickable: i().bool,
-        columnId: i().string,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        focusWithin: i().bool,
-        hasTooltip: i().bool,
-        id: i().string,
-        index: i().number,
-        isMenu: i().bool,
-        label: i().node,
-        onAutosizeColumn: i().func,
-        onRequestResize: i().func,
-        resizable: i().bool,
-        sortDir: i().oneOf([ "none", "asc", "desc" ]),
-        truncate: i().bool,
-        width: i().oneOfType([ i().number, i().oneOf([ "auto" ]) ]),
-        variant: i().oneOf([ "toggleAll", "info", "actions" ])
+    var Sn = {
+        align: C().oneOf([ "left", "center", "right" ]),
+        cellId: C().string,
+        clickable: C().bool,
+        columnId: C().string,
+        elementRef: C().oneOfType([ C().func, C().object ]),
+        focusWithin: C().bool,
+        hasTooltip: C().bool,
+        index: C().number,
+        isMenu: C().bool,
+        label: C().node,
+        onAutosizeColumn: C().func,
+        onRequestResize: C().func,
+        resizable: C().bool,
+        sortDir: C().oneOf([ "none", "asc", "desc" ]),
+        truncate: C().bool,
+        width: C().oneOfType([ C().number, C().oneOf([ "auto" ]) ]),
+        variant: C().oneOf([ "toggleAll", "info", "actions" ])
     };
-    var wn = new Set([ "none", "asc", "desc" ]);
-    var Cn = Object.freeze({
+    var kn = new Set([ "none", "asc", "desc" ]);
+    var On = Object.freeze({
         none: (0, j._)("Click to sort"),
         asc: (0, j._)("Press to sort descending"),
         desc: (0, j._)("Press to sort ascending")
     });
-    var xn = Object.freeze({
-        none: Me(),
-        asc: _e(),
-        desc: Ae()
+    var Rn = Object.freeze({
+        none: Ge(),
+        asc: Xe(),
+        desc: Fe()
     });
-    function Sn(e) {
-        var n = e.align, o = n === void 0 ? "left" : n, i = e.clickable, a = e.columnId, l = e.elementRef, u = e.focusWithin, s = e.hasTooltip, c = e.id, d = e.index, f = e.isMenu, v = f === void 0 ? false : f, p = e.label, m = e.onAutosizeColumn, b = e.onRequestResize, h = e.resizable, y = h === void 0 ? true : h, w = e.sortDir, C = e.truncate, x = C === void 0 ? true : C, k = e.variant, O = e.width, R = hn(e, [ "align", "clickable", "columnId", "elementRef", "focusWithin", "hasTooltip", "id", "index", "isMenu", "label", "onAutosizeColumn", "onRequestResize", "resizable", "sortDir", "truncate", "variant", "width" ]);
-        if (false) {}
-        var E = (0, j._)("Click to open menu");
-        var I = (0, t.useState)(false), T = dn(I, 2), q = T[0], A = T[1];
-        var P = (0, t.useState)(0), _ = dn(P, 2), z = _[0], M = _[1];
-        var $ = (0, t.useState)(0), N = dn($, 2), L = N[0], H = N[1];
-        var K = (0, t.useRef)(null);
-        var B = (0, t.useRef)(O === "auto" ? undefined : O);
+    function En(e) {
+        var n = e.align, o = n === void 0 ? "left" : n, i = e.clickable, a = e.cellId, l = e.columnId, u = e.elementRef, s = e.focusWithin, c = e.hasTooltip, d = e.index, f = e.isMenu, v = e.label, p = e.onAutosizeColumn, m = e.onRequestResize, b = e.resizable, y = b === void 0 ? true : b, g = e.sortDir, w = e.truncate, C = w === void 0 ? true : w, x = e.variant, k = e.width, O = Cn(e, [ "align", "clickable", "cellId", "columnId", "elementRef", "focusWithin", "hasTooltip", "index", "isMenu", "label", "onAutosizeColumn", "onRequestResize", "resizable", "sortDir", "truncate", "variant", "width" ]);
+        var R = (0, j._)("Click to open menu");
+        var E = (0, t.useState)(false), I = mn(E, 2), D = I[0], q = I[1];
+        var A = (0, t.useState)(0), P = mn(A, 2), _ = P[0], z = P[1];
+        var M = (0, t.useState)(0), $ = mn(M, 2), N = $[0], L = $[1];
+        var H = (0, t.useRef)(null);
+        var K = (0, t.useRef)(k === "auto" ? undefined : k);
+        var B;
         var V;
-        var F;
-        if (w !== undefined && wn.has(w)) {
-            V = xn[w];
-            F = Cn[w];
+        if (g !== undefined && kn.has(g)) {
+            B = Rn[g];
+            V = On[g];
         }
-        if (O === "auto") {
-            var U;
-            var X = K.current;
-            var Y = X === null || X === void 0 ? void 0 : (U = X.parentElement) === null || U === void 0 ? void 0 : U.getBoundingClientRect();
-            B.current = Y === null || Y === void 0 ? void 0 : Y.width;
+        if (k === "auto") {
+            var F;
+            var U = H.current;
+            var X = U === null || U === void 0 ? void 0 : (F = U.parentElement) === null || F === void 0 ? void 0 : F.getBoundingClientRect();
+            K.current = X === null || X === void 0 ? void 0 : X.width;
         } else {
-            B.current = O;
+            K.current = k;
         }
+        var Y = (0, t.useCallback)((function(e) {
+            H.current = e;
+            W(u, e);
+        }), [ u, H ]);
         var G = (0, t.useCallback)((function(e) {
-            K.current = e;
-            W(l, e);
-        }), [ l, K ]);
-        var J = (0, t.useCallback)((function(e) {
             var n = e.key;
-            if (b === undefined || d === undefined) {
+            if (m === undefined || d === undefined) {
                 return;
             }
-            if (O === "auto") {
+            if (k === "auto") {
                 var t;
-                var r = K.current;
+                var r = H.current;
                 var o = r === null || r === void 0 ? void 0 : (t = r.parentElement) === null || t === void 0 ? void 0 : t.getBoundingClientRect();
-                B.current = o === null || o === void 0 ? void 0 : o.width;
+                K.current = o === null || o === void 0 ? void 0 : o.width;
             } else {
-                B.current = O;
+                K.current = k;
             }
-            if (B.current === undefined) {
+            if (K.current === undefined) {
                 return;
             }
             if (n === "ArrowLeft") {
                 e.preventDefault();
  // prevent text selection
-                                var i = Math.max(B.current - 10, 20);
-                b(e, {
+                                var i = Math.max(K.current - 10, 20);
+                m(e, {
                     index: d,
-                    columnId: a,
-                    id: c,
+                    columnId: l,
+                    id: a,
                     width: i
                 });
             }
             if (n === "ArrowRight") {
                 e.preventDefault();
  // prevent text selection
-                                var l = B.current + 10;
-                b(e, {
+                                var u = K.current + 10;
+                m(e, {
                     index: d,
-                    columnId: a,
-                    id: c,
-                    width: l
+                    columnId: l,
+                    id: a,
+                    width: u
                 });
             }
             if (n === "Enter") {
                 e.preventDefault();
  // SUI-7320: prevent sorting and dropdown opening
                         }
-        }), [ a, c, d, b, O ]);
-        var Q = (0, t.useCallback)((function(e) {
-            if (O === "auto") {
+        }), [ l, a, d, m, k ]);
+        var J = (0, t.useCallback)((function(e) {
+            if (k === "auto") {
                 var n;
-                var t = K.current;
+                var t = H.current;
                 var r = t === null || t === void 0 ? void 0 : (n = t.parentElement) === null || n === void 0 ? void 0 : n.getBoundingClientRect();
-                B.current = r === null || r === void 0 ? void 0 : r.width;
+                K.current = r === null || r === void 0 ? void 0 : r.width;
             } else {
-                B.current = O;
+                K.current = k;
             }
-            if (B.current === undefined) {
+            if (K.current === undefined) {
                 return;
             }
             e.preventDefault();
  // prevent text selection
-                        M(e.clientX);
-            H(B.current || 0);
-            A(true);
-        }), [ O ]);
-        var Z = function e(n) {
-            var t = z - n.clientX;
-            var r = Math.max(L - t, 16);
+                        z(e.clientX);
+            L(K.current || 0);
+            q(true);
+        }), [ k ]);
+        var Q = function e(n) {
+            var t = _ - n.clientX;
+            var r = Math.max(N - t, 16);
             if (d !== undefined) {
-                b === null || b === void 0 ? void 0 : b(n, {
+                m === null || m === void 0 ? void 0 : m(n, {
                     index: d,
-                    columnId: a,
-                    id: c,
+                    columnId: l,
+                    id: a,
                     width: r
                 });
             }
         };
-        var ee = function e() {
-            A(false);
+        var Z = function e() {
+            q(false);
         };
-        var ne = (0, t.useCallback)((function(e) {
+        var ee = (0, t.useCallback)((function(e) {
             if (d !== undefined) {
-                m === null || m === void 0 ? void 0 : m(e, {
+                p === null || p === void 0 ? void 0 : p(e, {
                     index: d,
-                    columnId: a
+                    columnId: l,
+                    id: a
                 });
             }
-        }), [ a, d, m ]);
-        var te = tn();
-        var re = B.current ? (0, D.sprintf)((0, j._)("%(width)d pixels"), {
-            width: B.current
+        }), [ a, l, d, p ]);
+        var ne = ln();
+        var te = K.current ? (0, T.sprintf)((0, j._)("%(width)d pixels"), {
+            width: K.current
         }) : undefined;
-        var oe = a ? {
-            ariaControls: a
-        } : {};
         
-        return r().createElement(Ye, an({
+        return r().createElement(Ne, cn({
             as: i ? "button" : "div",
-            ref: G,
+            ref: Y,
             $align: o,
             $clickable: i,
-            $focusWithin: u,
-            $hasIcon: !!v || !!w,
-            $hasTooltip: !!s,
-            $variant: k
-        }, g()(R, [].concat(ln(Object.keys(Sn.propTypes)), [ "id" ]))), q &&  r().createElement(r().Fragment, null,  r().createElement(S(), {
-            target: te,
+            $focusWithin: s,
+            $hasIcon: !!f || !!g,
+            $hasTooltip: !!c,
+            $variant: x
+        }, h()(O, [].concat(dn(Object.keys(En.propTypes)), [ "id" ]))), D &&  r().createElement(r().Fragment, null,  r().createElement(S(), {
+            target: ne,
             eventType: "mouseup",
-            listener: ee
+            listener: Z
         }),  r().createElement(S(), {
-            target: te,
+            target: ne,
             eventType: "mousemove",
-            listener: Z
-        })), b && y &&  r().createElement(Ge, an({
-            "aria-label": (0, D.sprintf)((0, j._)("Resize %(label)s"), {
-                label: p
-            })
-        }, oe, {
-            "aria-valuetext": re,
+            listener: Q
+        })), m && y &&  r().createElement(We, {
+            "aria-label": (0, T.sprintf)((0, j._)("Resize %(label)s"), {
+                label: v
+            }),
+            "aria-controls": a,
+            "aria-valuetext": te,
             "data-test": "resize",
-            onMouseDown: Q,
-            onDoubleClick: ne,
-            onKeyDown: J,
+            onMouseDown: J,
+            onDoubleClick: ee,
+            onKeyDown: G,
             orientation: "vertical",
             tabIndex: 0
-        })),  r().createElement(Ue, {
+        }),  r().createElement(Me, {
             $align: o,
-            $truncate: x,
-            $variant: k
-        }, p), s &&  r().createElement(Fe, null,  r().createElement(Le(), {
+            $truncate: C,
+            $variant: x
+        }, v), c &&  r().createElement(ze, null,  r().createElement(en(), {
             "data-test": "tooltip-icon"
-        })), v &&  r().createElement(Ve, null,  r().createElement(Ne(), {
+        })), f &&  r().createElement(_e, null,  r().createElement(Qe(), {
             "data-test": "caret-down",
-            "aria-label": E
-        })), w &&  r().createElement(Ve, null, V !== undefined &&  r().createElement(V, {
+            "aria-label": R
+        })), g &&  r().createElement(_e, null, B !== undefined &&  r().createElement(B, {
             "aria-hidden": false,
-            "aria-label": F
+            "aria-label": V
         })));
     }
-    Sn.propTypes = gn;
-    /* harmony default export */    const kn = Sn;
-    // CONCATENATED MODULE: ./src/Table/HeadCellStyles.ts
-    var On = M().div.withConfig({
-        displayName: "HeadCellStyles__StyledInnerWrapper",
-        componentId: "sc-1hj81sa-0"
-    })([ "display:flex;height:100%;align-items:flex-start;" ]);
-    var Rn = M().th.withConfig({
-        displayName: "HeadCellStyles__Styled",
-        componentId: "sc-1hj81sa-1"
-    })([ "", ";background-color:", ";box-sizing:content-box;text-align:left;vertical-align:", ";position:relative;height:100%;line-height:20px;&:not(:first-child,:has(", ")){", "{border-left:1px solid ", ";}}&:has(", "){", "{border-right:1px solid ", ";}}&:nth-last-child(2):has(", ") + &:last-child{", "{border-left:none;}}*:where(button):focus{box-shadow:", ";}", " ", " ", "" ], $.mixins.reset("table-cell"), $.variables.neutral100, (function(e) {
-        var n = e.$variant;
-        return n ? "middle" : "top";
-    }), Ge, /* sc-sel */ On, $.variables.borderColorWeak, Ge, /* sc-sel */ On, $.variables.borderColor, Ge, /* sc-sel */ On, $.variables.focusShadowInset, (function(e) {
-        var n = e.$isDragging;
-        return n && (0, z.css)([ "background-color:", ";&:focus{box-shadow:none;}" ], $.variables.backgroundColorPage);
-    }), (function(e) {
-        var n = e.$variant;
-        return n && (0, z.css)([ "&:first-child + &{", "{border-left:1px solid ", ";}}" ], On, $.variables.borderColorWeak);
-    }), (0, $.pickVariant)("$variant", {
-        actions: (0, z.css)([ "*:where(button){", " &:focus{box-shadow:", ";}}" ], (0, ve.buttonMixin)("subtle", {
-            color: $.variables.contentColorDefault
-        }), $.variables.focusShadowInset)
-    }));
-    var En = M().div.withConfig({
-        displayName: "HeadCellStyles__StyledIcon",
-        componentId: "sc-1hj81sa-2"
-    })([ "display:inline-flex;align-items:center;height:1lh;" ]);
-    // TODO(SUI-7400): Refactor the drag handler of re-order column
-        var In = M().div.withConfig({
-        displayName: "HeadCellStyles__StyledDragHandler",
-        componentId: "sc-1hj81sa-3"
-    })([ "display:inline-flex;align-items:start;align-self:stretch;justify-content:center;min-width:20px;cursor:move;padding-block:", ";-webkit-user-select:none;-moz-user-select:none;user-select:none;&:hover{background:", ";color:", ";}&:focus{background:", ";box-shadow:", ";color:", ";}" ], (0, 
-    $.pick)({
-        comfortable: "8px",
-        compact: "6px"
-    }), $.variables.interactiveColorOverlayHover, $.variables.contentColorActive, $.variables.interactiveColorOverlayDrag, $.variables.focusShadowInset, $.variables.contentColorActive);
+    En.propTypes = Sn;
+    /* harmony default export */    const In = En;
     // CONCATENATED MODULE: ./src/Table/HeadCell.tsx
     function Tn() {
         return Tn = Object.assign ? Object.assign.bind() : function(e) {
@@ -1170,44 +1167,44 @@
     }
     /** @public */
     /** @public */    var qn = {
-        align: i().oneOf([ "left", "center", "right" ]),
+        align: C().oneOf([ "left", "center", "right" ]),
         /** @private Used to set the $clickable appearance without an onClick */
-        appearClickable: i().bool,
-        children: i().node,
-        columnId: i().string,
+        appearClickable: C().bool,
+        children: C().node,
+        columnId: C().string,
         /** @private. */
-        dragId: i().oneOfType([ i().string, i().number ]),
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        headCellScreenReaderText: i().string,
+        dragId: C().oneOfType([ C().string, C().number ]),
+        elementRef: C().oneOfType([ C().func, C().object ]),
+        headCellScreenReaderText: C().string,
         /** @private The index of the cell, skipping the info column. */
-        index: i().number,
+        index: C().number,
         /** @private. */
-        onAutosizeColumn: i().func,
+        onAutosizeColumn: C().func,
         /** @private. */
-        onClick: i().func,
+        onClick: C().func,
         /**
    * @private. Passed through and works as expected.
    */
-        onKeyDown: i().func,
+        onKeyDown: C().func,
         /** @private. */
-        onRequestMoveColumn: i().func,
+        onRequestMoveColumn: C().func,
         /** @private. */
-        onRequestResize: i().func,
-        onSort: i().func,
-        resizable: i().bool,
-        sortDir: i().oneOf([ "asc", "desc", "none" ]),
-        sortKey: i().string,
-        tooltip: i().node,
-        truncate: i().bool,
+        onRequestResize: C().func,
+        onSort: C().func,
+        resizable: C().bool,
+        sortDir: C().oneOf([ "asc", "desc", "none" ]),
+        sortKey: C().string,
+        tooltip: C().node,
+        truncate: C().bool,
         /** @private. */
-        variant: i().oneOf([ "toggleAll", "info", "actions" ]),
+        variant: C().oneOf([ "toggleAll", "info", "actions" ]),
         /**
    * Used internally to suppress focus and id when this `HeadCell` is superseded by one in an
    * overlaid `HeadTable` for user interactions.
    * @private
    */
-        visible: i().bool,
-        width: i().oneOfType([ i().number, i().oneOf([ "auto" ]) ])
+        visible: C().bool,
+        width: C().oneOfType([ C().number, C().oneOf([ "auto" ]) ])
     };
     var An = {
         asc: "ascending",
@@ -1215,126 +1212,149 @@
         none: "none"
     };
     function Pn(e) {
-        var n = e.align, o = n === void 0 ? "left" : n, i = e.appearClickable, a = e.children, u = e.columnId, s = e.elementRef, c = e.dragId, d = e.headCellScreenReaderText, f = e.id, v = e.index, p = e.onAutosizeColumn, m = e.onClick, b = e.onKeyDown, h = e.onRequestMoveColumn, y = e.onRequestResize, g = e.onSort, w = e.resizable, C = w === void 0 ? true : w, x = e.sortDir, S = x === void 0 ? "none" : x, k = e.sortKey, O = e.style, R = e.tooltip, E = e.truncate, I = E === void 0 ? true : E, T = e.variant, q = e.visible, A = q === void 0 ? true : q, P = e.width, _ = jn(e, [ "align", "appearClickable", "children", "columnId", "elementRef", "dragId", "headCellScreenReaderText", "id", "index", "onAutosizeColumn", "onClick", "onKeyDown", "onRequestMoveColumn", "onRequestResize", "onSort", "resizable", "sortDir", "sortKey", "style", "tooltip", "truncate", "variant", "visible", "width" ]);
+        var n;
+        var o = e.align, i = o === void 0 ? "left" : o, l = e.appearClickable, u = e.children, s = e.columnId, c = e.elementRef, d = e.dragId, f = e.headCellScreenReaderText, v = e.id, p = e.index, m = e.onAutosizeColumn, b = e.onClick, h = e.onKeyDown, y = e.onRequestMoveColumn, g = e.onRequestResize, w = e.onSort, C = e.resizable, x = C === void 0 ? true : C, S = e.sortDir, k = S === void 0 ? "none" : S, O = e.sortKey, R = e.style, E = e.tooltip, I = e.truncate, q = I === void 0 ? true : I, A = e.variant, P = e.visible, _ = P === void 0 ? true : P, z = e.width, M = jn(e, [ "align", "appearClickable", "children", "columnId", "elementRef", "dragId", "headCellScreenReaderText", "id", "index", "onAutosizeColumn", "onClick", "onKeyDown", "onRequestMoveColumn", "onRequestResize", "onSort", "resizable", "sortDir", "sortKey", "style", "tooltip", "truncate", "variant", "visible", "width" ]);
         // @docs-props-type HeadCellPropsBase
-                var z = !!h;
-        var M = (0, l.useSortable)({
+                var $ = !!y;
+        var N = (0, a.useSortable)({
             // dragId is optional in HeadCell but required by useSortable
             // since it is always set in Table, use a type assertion here to avoid TypeScript error
-            id: c
-        }), $ = M.attributes, N = M.isDragging, L = M.listeners, H = M.setNodeRef;
-        var K = (0, t.useCallback)((function(e) {
-            W(s, e);
-            if (z) {
-                H(e);
+            id: d
+        }), L = N.attributes, H = N.isDragging, K = N.listeners, B = N.setNodeRef;
+        var V = (0, t.useCallback)((function(e) {
+            W(c, e);
+            if ($) {
+                B(e);
             }
-        }), [ z, s, H ]);
-        var B = (0, t.useCallback)((function(e) {
+        }), [ $, c, B ]);
+        var F = (0, t.useCallback)((function(e) {
             // ignore clicks on the resize handle
-            if (e.target.getAttribute("data-test") !== "resize" && g && v !== undefined) {
-                g(e, {
-                    sortKey: k,
-                    sortDir: S,
-                    id: f,
-                    columnId: u,
-                    index: v
+            if (e.target.getAttribute("data-test") !== "resize" && w && p !== undefined) {
+                w(e, {
+                    sortKey: O,
+                    sortDir: k,
+                    id: v,
+                    columnId: s,
+                    index: p
                 });
             }
-            m === null || m === void 0 ? void 0 : m();
-        }), [ u, f, v, m, g, S, k ]);
-        var V = (0, t.useCallback)((function(e) {
-            if (v !== undefined) {
-                b === null || b === void 0 ? void 0 : b(e, {
-                    index: v,
-                    columnId: u
+            b === null || b === void 0 ? void 0 : b();
+        }), [ s, v, p, b, w, k, O ]);
+        var U = (0, t.useCallback)((function(e) {
+            if (p !== undefined) {
+                h === null || h === void 0 ? void 0 : h(e, {
+                    index: p,
+                    columnId: s
                 });
             }
-        }), [ u, v, b ]);
-        var F = !!g && !!S;
-        var U = m !== undefined;
-        var X = T === "actions" ? false : I;
-        var Y = (0, t.useMemo)((function() {
-            return Ee()({}, O, {
-                width: P
+        }), [ s, p, h ]);
+        var X = !!w && !!k;
+        var Y = b !== undefined;
+        var G = A === "actions" ? false : q;
+        var J = (0, t.useMemo)((function() {
+            return Ee()({}, R, {
+                width: z
             });
-        }), [ O, P ]);
-        var G;
-        if (d) {
-            G = d;
-        } else if (Oe()(a)) {
-            G = a;
+        }), [ R, z ]);
+        var Q;
+        if (f) {
+            Q = f;
+        } else if (Oe()(u)) {
+            Q = u;
         }
-        var J = (0, t.useMemo)((function() {
+        var Z = (n = v !== null && v !== void 0 ? v : s) !== null && n !== void 0 ? n : (0, 
+        D.createDOMID)("headCellId-");
+        var ee = (0, t.useMemo)((function() {
             return {
-                align: o,
-                clickable: i || F || U,
-                columnId: u,
-                focusWithin: i,
-                label: a,
-                id: f,
-                index: v,
-                onAutosizeColumn: p,
-                onClick: g || U ? B : undefined,
-                onKeyDown: g || U ? V : undefined,
-                onRequestResize: y,
-                resizable: A && C,
-                sortDir: g && S,
-                truncate: X,
-                variant: T,
-                width: P
+                align: i,
+                clickable: l || X || Y,
+                columnId: s,
+                focusWithin: l,
+                label: u,
+                cellId: Z,
+                index: p,
+                onAutosizeColumn: m,
+                onClick: w || Y ? F : undefined,
+                onKeyDown: w || Y ? U : undefined,
+                onRequestResize: g,
+                resizable: _ && x,
+                sortDir: w && k,
+                truncate: G,
+                variant: A,
+                width: z
             };
-        }), [ o, i, F, U, u, a, f, v, p, g, B, V, y, A, C, S, X, T, P ]);
-        var Q = (0, t.useCallback)((function(e) {
+        }), [ i, l, X, Y, s, u, Z, p, m, w, F, U, g, _, x, k, G, A, z ]);
+        var ne = (0, t.useCallback)((function(e) {
             
-            return r().createElement(kn, Tn({}, e, J, {
+            return r().createElement(In, Tn({}, e, ee, {
                 hasTooltip: true
             }));
-        }), [ J ]);
+        }), [ ee ]);
         
-        return r().createElement(Rn, Tn({
-            style: Y,
-            ref: K,
-            "aria-sort": g && (An[S] || "none"),
+        return r().createElement(He, Tn({
+            style: J,
+            ref: V,
+            "aria-sort": w && (An[k] || "none"),
             "data-test": "head-cell",
-            "data-test-label": Oe()(a) ? a : undefined,
-            "data-test-sort-dir": g && S,
-            id: A ? f : undefined,
-            $isDragging: z && N,
-            $variant: T
-        }, _),  r().createElement(On, null, z &&  r().createElement(In, Tn({
-            "aria-label": (0, D.sprintf)((0, j._)("Reorder %(labelString)s"), {
-                labelString: G
+            "data-test-label": Oe()(u) ? u : undefined,
+            "data-test-sort-dir": w && k,
+            id: _ ? Z : undefined,
+            $isDragging: $ && H,
+            $variant: A
+        }, M),  r().createElement(Le, null, $ &&  r().createElement(Be, Tn({
+            "aria-label": (0, T.sprintf)((0, j._)("Reorder %(labelString)s"), {
+                labelString: Q
             }),
             "data-test": "drag",
             draggable: true
-        }, $, L),  r().createElement(En, null,  r().createElement(Te(), null))), R ?  r().createElement(De(), {
-            content: R,
-            renderAnchor: Q
-        }) :  r().createElement(kn, J)));
+        }, L, K),  r().createElement(Ke, null,  r().createElement(Te(), null))), E ?  r().createElement(De(), {
+            content: E,
+            renderAnchor: ne
+        }) :  r().createElement(In, ee)));
     }
     Pn.propTypes = qn;
     Pn.splunkUiType = "Table.HeadCell";
     /* harmony default export */    const _n = Pn;
+    // CONCATENATED MODULE: ./src/Table/HeadStyles.ts
+    var zn = M().thead.withConfig({
+        displayName: "HeadStyles__Styled",
+        componentId: "iap21t-0"
+    })([ "", ";", "" ], $.mixins.reset("table-header-group"), (function(e) {
+        var n = e.$isFixed, t = e.$zIndex;
+        return n && (0, z.css)([ "position:sticky;top:0;z-index:", ";" ], t);
+    }));
+    var Mn = M()(_n).withConfig({
+        displayName: "HeadStyles__StyledToggleAll",
+        componentId: "iap21t-1"
+    })([ "width:32px;" ]);
+    var $n = M()(_n).withConfig({
+        displayName: "HeadStyles__StyledInfo",
+        componentId: "iap21t-2"
+    })([ "width:32px;" ]);
+    var Nn = M()(_n).withConfig({
+        displayName: "HeadStyles__StyledDragRow",
+        componentId: "iap21t-3"
+    })([ "width:32px;" ]);
     // CONCATENATED MODULE: external "@dnd-kit/utilities"
-    const zn = require("@dnd-kit/utilities");
+    const Wn = require("@dnd-kit/utilities");
     // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeVertical"
-    const Mn = require("@splunk/react-icons/DotsThreeVertical");
-    var $n =  e.n(Mn);
+    const Ln = require("@splunk/react-icons/DotsThreeVertical");
+    var Hn =  e.n(Ln);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const Nn = require("@splunk/react-ui/Button");
-    var Wn =  e.n(Nn);
+    const Kn = require("@splunk/react-ui/Button");
+    var Bn =  e.n(Kn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const Ln = require("@splunk/react-ui/Dropdown");
-    var Hn =  e.n(Ln);
+    const Vn = require("@splunk/react-ui/Dropdown");
+    var Fn =  e.n(Vn);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const Kn = require("@splunk/react-icons/ChevronRight");
-    var Bn =  e.n(Kn);
+    const Un = require("@splunk/react-icons/ChevronRight");
+    var Xn =  e.n(Un);
     // CONCATENATED MODULE: ./src/Table/ExpandButtonStyles.ts
-    var Vn = M().button.withConfig({
+    var Yn = M().button.withConfig({
         displayName: "ExpandButtonStyles__StyledButton",
         componentId: "sc-7nlw5q-0"
     })([ "", ";height:100%;width:100%;cursor:pointer;justify-content:center;color:", ";&:hover{color:", ";}&:focus{color:", ";box-shadow:", ";}" ], $.mixins.reset("flex"), $.variables.contentColorDefault, $.variables.contentColorActive, $.variables.contentColorActive, $.variables.focusShadowInset);
-    var Fn = M()(Bn()).withConfig({
+    var Gn = M()(Xn()).withConfig({
         displayName: "ExpandButtonStyles__StyledChevron",
         componentId: "sc-7nlw5q-1"
     })([ "padding-block:", ";transition:transform 200ms;", "" ], (0, $.pick)({
@@ -1345,8 +1365,8 @@
         return n && (0, z.css)([ "transform:rotate(90deg);" ]);
     }));
     // CONCATENATED MODULE: ./src/Table/ExpandButton.tsx
-    function Un() {
-        return Un = Object.assign ? Object.assign.bind() : function(e) {
+    function Jn() {
+        return Jn = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1354,11 +1374,11 @@
                 }
             }
             return e;
-        }, Un.apply(null, arguments);
+        }, Jn.apply(null, arguments);
     }
-    function Xn(e, n) {
+    function Qn(e, n) {
         if (null == e) return {};
-        var t, r, o = Yn(e, n);
+        var t, r, o = Zn(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1367,7 +1387,7 @@
         }
         return o;
     }
-    function Yn(e, n) {
+    function Zn(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1378,32 +1398,32 @@
         }
         return t;
     }
-    var Gn = {
-        expanded: i().bool
+    var et = {
+        expanded: C().bool
     };
-    var Jn = function e(n) {
-        var t = n.expanded, o = Xn(n, [ "expanded" ]);
+    var nt = function e(n) {
+        var t = n.expanded, o = Qn(n, [ "expanded" ]);
         
-        return r().createElement(Vn, Un({
+        return r().createElement(Yn, Jn({
             title: t ? (0, j._)("Collapse row") : (0, j._)("Expand row")
-        }, o),  r().createElement(Fn, {
+        }, o),  r().createElement(Gn, {
             $expanded: t
         }));
     };
-    Jn.propTypes = Gn;
-    /* harmony default export */    const Qn = Jn;
+    nt.propTypes = et;
+    /* harmony default export */    const tt = nt;
     // CONCATENATED MODULE: ./src/Table/RowDragCellStyles.ts
-    var Zn = M().td.withConfig({
+    var rt = M().td.withConfig({
         displayName: "RowDragCellStyles__StyledCell",
         componentId: "sc-9kbaj2-0"
     })([ "", " cursor:move;touch-action:none;position:relative;vertical-align:middle;" ], $.mixins.reset("table-cell"));
-    var et = M().div.withConfig({
+    var ot = M().div.withConfig({
         displayName: "RowDragCellStyles__StyledDrag",
         componentId: "sc-9kbaj2-1"
     })([ "", " ", ";justify-content:center;cursor:move;-webkit-user-drag:element;user-select:none;align-items:center;position:absolute;width:100%;top:0;bottom:0;&:focus{outline:0;box-shadow:", ";}&:hover{background-color:", ";outline:none;}&:active{background-color:", ";box-shadow:", ";}& > div{margin:0;}@media print{background-image:none;}" ], $.mixins.reset("flex"), $.mixins.clearfix(), $.variables.focusShadowInset, $.variables.interactiveColorOverlayDrag, $.variables.interactiveColorOverlayActive, $.variables.focusShadowInset);
     // CONCATENATED MODULE: ./src/Table/RowDragCell.tsx
-    function nt() {
-        return nt = Object.assign ? Object.assign.bind() : function(e) {
+    function it() {
+        return it = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1411,11 +1431,11 @@
                 }
             }
             return e;
-        }, nt.apply(null, arguments);
+        }, it.apply(null, arguments);
     }
-    function tt(e, n) {
+    function at(e, n) {
         if (null == e) return {};
-        var t, r, o = rt(e, n);
+        var t, r, o = lt(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1424,7 +1444,7 @@
         }
         return o;
     }
-    function rt(e, n) {
+    function lt(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1435,26 +1455,26 @@
         }
         return t;
     }
-    var ot = {
-        setActivatorNodeRef: i().func.isRequired,
-        listeners: i().objectOf(i().func)
+    var ut = {
+        setActivatorNodeRef: C().func.isRequired,
+        listeners: C().objectOf(C().func)
     };
-    function it(e) {
-        var n = e.listeners, t = e.setActivatorNodeRef, o = tt(e, [ "listeners", "setActivatorNodeRef" ]);
+    function st(e) {
+        var n = e.listeners, t = e.setActivatorNodeRef, o = at(e, [ "listeners", "setActivatorNodeRef" ]);
         
-        return r().createElement(Zn, {
+        return r().createElement(rt, {
             "data-helper": true
-        },  r().createElement(et, nt({
+        },  r().createElement(ot, it({
             "data-test": "drag",
             draggable: true,
             ref: t,
             tabIndex: 0
         }, n, o),  r().createElement(Te(), null)));
     }
-    it.propTypes = ot;
-    /* harmony default export */    const at = it;
+    st.propTypes = ut;
+    /* harmony default export */    const ct = st;
     // CONCATENATED MODULE: ./src/Table/RowStyles.ts
-    var lt = M().tr.withConfig({
+    var dt = M().tr.withConfig({
         displayName: "RowStyles__StyledStripeNone",
         componentId: "f0igqq-0"
     })([ "", ";", ";", " @media print{background-color:none;}" ], $.mixins.reset("table-row"), (function(e) {
@@ -1464,7 +1484,7 @@
         var n = e.disabled, t = e.$expandable, r = e.$isDraggable;
         return !n && !t && r && (0, z.css)([ "&:hover{background-color:", ";}" ], $.variables.interactiveColorOverlayHover);
     }));
-    var ut = M()(lt).withConfig({
+    var ft = M()(dt).withConfig({
         displayName: "RowStyles__StyledStripeEven",
         componentId: "f0igqq-1"
     })([ "background-color:", ";", ";" ], $.variables.neutral50, (function(e) {
@@ -1472,17 +1492,17 @@
         return n && (0, z.css)([ "cursor:pointer;&:hover,&:focus{background-color:", ";}" ], $.variables.neutral300);
     }));
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const st = require("@splunk/react-ui/Clickable");
-    var ct =  e.n(st);
+    const vt = require("@splunk/react-ui/Clickable");
+    var pt =  e.n(vt);
     // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
-    const dt = require("@splunk/react-ui/NonInteractiveCheckbox");
-    var ft =  e.n(dt);
+    const mt = require("@splunk/react-ui/NonInteractiveCheckbox");
+    var bt =  e.n(mt);
     // CONCATENATED MODULE: ./src/Table/ToggleStyles.ts
-    var vt = M()(ct()).withConfig({
+    var ht = M()(pt()).withConfig({
         displayName: "ToggleStyles__StyledClickable",
         componentId: "sc-1x3ikch-0"
     })([ "height:100%;width:100%;display:flex;justify-content:center;&[disabled]{cursor:not-allowed;}" ]);
-    var pt = M()(ft()).withConfig({
+    var yt = M()(bt()).withConfig({
         displayName: "ToggleStyles__StyledNonInteractiveCheckbox",
         componentId: "sc-1x3ikch-1"
     })([ "align-items:flex-start;padding-block:", ";" ], (0, $.pick)({
@@ -1490,8 +1510,8 @@
         compact: "6px"
     }));
     // CONCATENATED MODULE: ./src/Table/Toggle.tsx
-    function mt() {
-        return mt = Object.assign ? Object.assign.bind() : function(e) {
+    function gt() {
+        return gt = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1499,11 +1519,11 @@
                 }
             }
             return e;
-        }, mt.apply(null, arguments);
+        }, gt.apply(null, arguments);
     }
-    function bt(e, n) {
+    function wt(e, n) {
         if (null == e) return {};
-        var t, r, o = ht(e, n);
+        var t, r, o = Ct(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1512,7 +1532,7 @@
         }
         return o;
     }
-    function ht(e, n) {
+    function Ct(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1523,38 +1543,38 @@
         }
         return t;
     }
-    var yt = {
-        disabled: i().bool,
-        onClick: i().func,
-        selected: i().oneOf([ true, false, "some" ])
+    var xt = {
+        disabled: C().bool,
+        onClick: C().func,
+        selected: C().oneOf([ true, false, "some" ])
     };
-    function gt(e) {
-        var n = e.disabled, t = e.onClick, o = e.selected, i = bt(e, [ "disabled", "onClick", "selected" ]);
+    function St(e) {
+        var n = e.disabled, t = e.onClick, o = e.selected, i = wt(e, [ "disabled", "onClick", "selected" ]);
         var a = n === true ? "disabled" : undefined;
         
         // Note we use a clickable around the NonInteractiveCheckbox (which can seem ironic) so that the whole table cell is clickable and we cannot use the Cell's onClick itself because of a11y issues we have faced in the past (see SUI-5958).
-        return r().createElement(vt, mt({
+        return r().createElement(ht, gt({
             "aria-checked": o === "some" ? "mixed" : o,
             disabled: a,
             onClick: t,
             role: "checkbox"
-        }, i),  r().createElement(pt, {
+        }, i),  r().createElement(yt, {
             disabled: !!a,
             selected: o
         }));
     }
-    gt.propTypes = yt;
-    /* harmony default export */    const wt = gt;
+    St.propTypes = xt;
+    /* harmony default export */    const kt = St;
     // CONCATENATED MODULE: ./src/Table/Row.tsx
-    function Ct(e) {
+    function Ot(e) {
         "@babel/helpers - typeof";
-        return Ct = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Ot = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, Ct(e);
+        }, Ot(e);
     }
-    function xt(e, n) {
+    function Rt(e, n) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -1564,42 +1584,42 @@
         }
         return t;
     }
-    function St(e) {
+    function Et(e) {
         for (var n = 1; n < arguments.length; n++) {
             var t = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? xt(Object(t), !0).forEach((function(n) {
-                kt(e, n, t[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : xt(Object(t)).forEach((function(n) {
+            n % 2 ? Rt(Object(t), !0).forEach((function(n) {
+                It(e, n, t[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Rt(Object(t)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
             }));
         }
         return e;
     }
-    function kt(e, n, t) {
-        return (n = Ot(n)) in e ? Object.defineProperty(e, n, {
+    function It(e, n, t) {
+        return (n = Tt(n)) in e ? Object.defineProperty(e, n, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = t, e;
     }
-    function Ot(e) {
-        var n = Rt(e, "string");
-        return "symbol" == Ct(n) ? n : n + "";
+    function Tt(e) {
+        var n = jt(e, "string");
+        return "symbol" == Ot(n) ? n : n + "";
     }
-    function Rt(e, n) {
-        if ("object" != Ct(e) || !e) return e;
+    function jt(e, n) {
+        if ("object" != Ot(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var r = t.call(e, n || "default");
-            if ("object" != Ct(r)) return r;
+            if ("object" != Ot(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
-    function Et(e, n) {
+    function Dt(e, n) {
         if (null == e) return {};
-        var t, r, o = It(e, n);
+        var t, r, o = qt(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1608,7 +1628,7 @@
         }
         return o;
     }
-    function It(e, n) {
+    function qt(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1619,8 +1639,8 @@
         }
         return t;
     }
-    function Tt() {
-        return Tt = Object.assign ? Object.assign.bind() : function(e) {
+    function At() {
+        return At = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1628,83 +1648,83 @@
                 }
             }
             return e;
-        }, Tt.apply(null, arguments);
+        }, At.apply(null, arguments);
     }
-    var jt = {
-        odd: lt,
-        even: ut,
-        none: lt
+    var Pt = {
+        odd: dt,
+        even: ft,
+        none: dt
     };
     /** @public */
     /** @public */
     /** @public */
     /** @public */
-    /** @public */    var Dt = {
+    /** @public */    var _t = {
         /** @private. Generally passed by Table rather than added directly. */
-        activeElementId: i().string,
-        actionPrimary: i().element,
-        actionsSecondary: i().element,
-        children: i().node,
-        data: i().any,
-        disabled: i().bool,
+        activeElementId: C().string,
+        actionPrimary: C().element,
+        actionsSecondary: C().element,
+        children: C().node,
+        data: C().any,
+        disabled: C().bool,
         /** @private. Generally passed by Table rather than added directly. */
-        isDraggable: i().bool,
+        isDraggable: C().bool,
         /** @private. Generally passed by Table rather than added directly. */
-        dragId: i().oneOfType([ i().string, i().number ]),
-        elementRef: i().oneOfType([ i().func, i().object ]),
+        dragId: C().oneOfType([ C().string, C().number ]),
+        elementRef: C().oneOfType([ C().func, C().object ]),
         /** @private. */
-        expandable: i().bool,
-        expanded: i().bool,
+        expandable: C().bool,
+        expanded: C().bool,
         /** @private. Identifies the unique id (or ids) for an expanded row (or rows). In expandable rows `ExpansionRowIcon` uses `expansionRowId` for accessibility aria attributes. */
-        expansionRowIds: i().string,
-        expansionRow: i().oneOfType([ i().element, i().arrayOf(i().element) ]),
+        expansionRowIds: C().string,
+        expansionRow: C().oneOfType([ C().element, C().arrayOf(C().element) ]),
         /** @private. Indicates whether the table has an actions column. */
-        actions: i().bool,
+        actions: C().bool,
         /** @private. Generally passed by `Table` rather than added directly. */
-        index: i().number,
+        index: C().number,
         /** @private. Generally passed by `Table` rather than added directly. */
-        movableColumns: i().bool,
-        onClick: i().func,
-        onExpansion: i().func,
+        movableColumns: C().bool,
+        onClick: C().func,
+        onExpansion: C().func,
         /** @private. This is passed through and works as expected. */
-        onKeyDown: i().func,
+        onKeyDown: C().func,
         /** @private. Generally passed by `Table` rather than added directly. */
-        onRequestMoveRow: i().func,
-        onRequestToggle: i().func,
+        onRequestMoveRow: C().func,
+        onRequestToggle: C().func,
         /** @private. Generally passed by `Table` rather than added directly. */
-        primaryColumnIndex: i().number,
-        rowScreenReaderText: i().string,
-        selected: i().bool,
+        primaryColumnIndex: C().number,
+        rowScreenReaderText: C().string,
+        selected: C().bool,
         /** @private. */
-        stripe: i().oneOf([ "odd", "even", "none" ])
+        stripe: C().oneOf([ "odd", "even", "none" ])
     };
-    var qt =  r().createElement($n(), null);
-    var At =  r().forwardRef((function(e, n) {
+    var zt =  r().createElement(Hn(), null);
+    var Mt =  r().forwardRef((function(e, n) {
         
-        return r().createElement(De(), Tt({
+        return r().createElement(De(), At({
             content: (0, j._)("Actions"),
             contentRelationship: "label"
-        }, e),  r().createElement(Wn(), {
+        }, e),  r().createElement(Bn(), {
             appearance: "subtle",
             "data-test": "actions-secondary-toggle",
-            icon: qt,
+            icon: zt,
             elementRef: n
         }));
     }));
-    function Pt(e) {
+    function $t(e) {
         var n;
-        var o = e.actions, i = e.actionPrimary, a = e.actionsSecondary, u = e.children, s = e.data, c = e.dragId, d = e.disabled, f = e.isDraggable, v = e.elementRef, p = e.expandable, m = e.expanded, b = e.expansionRowIds, h = e.expansionRow, y = e.index, w = e.movableColumns, C = e.onClick, x = e.onExpansion, S = e.onKeyDown, k = e.onRequestToggle, O = e.primaryColumnIndex, E = O === void 0 ? 0 : O, I = e.rowScreenReaderText, T = e.selected, q = e.stripe, A = q === void 0 ? "none" : q, P = e.style, _ = Et(e, [ "actions", "actionPrimary", "actionsSecondary", "children", "data", "dragId", "disabled", "isDraggable", "elementRef", "expandable", "expanded", "expansionRowIds", "expansionRow", "index", "movableColumns", "onClick", "onExpansion", "onKeyDown", "onRequestToggle", "primaryColumnIndex", "rowScreenReaderText", "selected", "stripe", "style" ]);
+        var o = e.actions, i = e.actionPrimary, l = e.actionsSecondary, u = e.children, s = e.data, c = e.dragId, d = e.disabled, f = e.isDraggable, v = e.elementRef, p = e.expandable, m = e.expanded, b = e.expansionRowIds, y = e.expansionRow, g = e.index, w = e.movableColumns, C = e.onClick, x = e.onExpansion, S = e.onKeyDown, k = e.onRequestToggle, O = e.primaryColumnIndex, R = O === void 0 ? 0 : O, E = e.rowScreenReaderText, I = e.selected, q = e.stripe, A = q === void 0 ? "none" : q, P = e.style, _ = Dt(e, [ "actions", "actionPrimary", "actionsSecondary", "children", "data", "dragId", "disabled", "isDraggable", "elementRef", "expandable", "expanded", "expansionRowIds", "expansionRow", "index", "movableColumns", "onClick", "onExpansion", "onKeyDown", "onRequestToggle", "primaryColumnIndex", "rowScreenReaderText", "selected", "stripe", "style" ]);
  // @docs-props-type RowPropsBase
                 var z = (0, t.useMemo)((function() {
             return {
-                id: f ? c : (0, R.createGUID)(),
+                id: f ? c : (0, D.createGUID)(),
                 disabled: !f
             };
         }), [ f, c ]);
-        var M = (0, l.useSortable)(z), $ = M.attributes, N = M.listeners, L = M.transform, H = M.transition, K = M.setNodeRef, B = M.setActivatorNodeRef;
+        var M = (0, a.useSortable)(z), $ = M.attributes, N = M.listeners, L = M.transform, H = M.transition, K = M.setNodeRef, B = M.setActivatorNodeRef;
         var V = (0, t.useMemo)((function() {
-            return f ? St(St({}, P), {}, {
-                transform: zn.CSS.Translate.toString(L),
+            return f ? Et(Et({}, P), {}, {
+                transform: Wn.CSS.Translate.toString(L),
                 transition: H
             }) : P;
         }), [ f, L, H, P ]);
@@ -1755,8 +1775,8 @@
             return i;
         };
         var Q = function n() {
-            if (a && a.props.children) {
-                var r = t.Children.toArray(a.props.children).filter(t.isValidElement);
+            if (l && l.props.children) {
+                var r = t.Children.toArray(l.props.children).filter(t.isValidElement);
                 var o = r.map((function(n) {
                     if (n.props.onClick) {
                         
@@ -1771,11 +1791,11 @@
                     return n;
                 }));
                 
-                return (0, t.cloneElement)(a, {
+                return (0, t.cloneElement)(l, {
                     children: o
                 });
             }
-            return a;
+            return l;
         };
         function Z(e) {
             F.current = e;
@@ -1789,41 +1809,41 @@
             return (0, t.cloneElement)(e, {
                 appearance: C ? "rowLink" : e.props.appearance,
                 disabled: d,
-                isPrimaryCell: E === n,
+                isPrimaryCell: R === n,
                 stripe: A
             });
         }));
         var ne;
-        if (I) {
-            ne = I;
-        } else if ((n = ee[E]) === null || n === void 0 ? void 0 : n.props.children) {
+        if (E) {
+            ne = E;
+        } else if ((n = ee[R]) === null || n === void 0 ? void 0 : n.props.children) {
             var te;
-            ne = "".concat((te = ee[E]) === null || te === void 0 ? void 0 : te.props.children);
+            ne = "".concat((te = ee[R]) === null || te === void 0 ? void 0 : te.props.children);
         } else {
             var re;
             ne = "".concat((re = ee[0]) === null || re === void 0 ? void 0 : re.props.children);
             if (false) {}
         }
-        var oe = (0, D.sprintf)((0, j._)("%(selected)s"), {
-            selected: T ? "selected" : "unselected"
+        var oe = (0, T.sprintf)((0, j._)("%(selected)s"), {
+            selected: I ? "selected" : "unselected"
         });
-        var ie = jt[A];
-        var ae = m ? t.Children.count(h) + 1 : undefined;
+        var ie = Pt[A];
+        var ae = m ? t.Children.count(y) + 1 : undefined;
         var le = w ? "false" : undefined;
         var ue = function e() {
             
-            return r().createElement(At, null);
+            return r().createElement(Mt, null);
         };
-        var se = (0, D.sprintf)((0, j._)("Collapse row - %(rowLabelValue)s"), {
+        var se = (0, T.sprintf)((0, j._)("Collapse row - %(rowLabelValue)s"), {
             rowLabelValue: ne
         });
-        var ce = (0, D.sprintf)((0, j._)("Expand row - %(rowLabelValue)s"), {
+        var ce = (0, T.sprintf)((0, j._)("Expand row - %(rowLabelValue)s"), {
             rowLabelValue: ne
         });
         
-        return r().createElement(ie, Tt({
+        return r().createElement(ie, At({
             "data-test": "row",
-            "data-test-selected": k ? T : undefined,
+            "data-test-selected": k ? I : undefined,
             $clickable: !!C,
             "data-has-movable-columns": w ? "true" : undefined,
             disabled: !!d,
@@ -1831,13 +1851,13 @@
             $isDraggable: !!f,
             ref: Z,
             tabIndex: C ? 0 : undefined
-        }, g()(_, "data"), {
+        }, h()(_, "data"), {
             onClick: C ? U : undefined,
             onKeyDown: X,
-            $rowSelected: !!(k && T),
+            $rowSelected: !!(k && I),
             style: V
-        }), f && y != null &&  r().createElement(at, Tt({
-            "aria-label": (0, D.sprintf)((0, j._)("Reorder %(rowLabelValue)s"), {
+        }), f && g != null &&  r().createElement(ct, At({
+            "aria-label": (0, T.sprintf)((0, j._)("Reorder %(rowLabelValue)s"), {
                 rowLabelValue: ne
             }),
             setActivatorNodeRef: B,
@@ -1850,15 +1870,15 @@
             "data-movable-column": le,
             rowSpan: ae,
             "data-test": "toggle"
-        },  r().createElement(wt, {
-            "aria-label": (0, D.sprintf)((0, j._)("%(rowLabelValue)s %(selectedString)s"), {
+        },  r().createElement(kt, {
+            "aria-label": (0, T.sprintf)((0, j._)("%(rowLabelValue)s %(selectedString)s"), {
                 rowLabelValue: ne,
                 selectedString: oe
             }),
             disabled: d,
             onClick: Y,
-            selected: T
-        })), p && h &&  r().createElement(Se, {
+            selected: I
+        })), p && y &&  r().createElement(Se, {
             align: "center",
             appearance: "data",
             "data-movable-column": le,
@@ -1866,58 +1886,38 @@
             expand: m,
             rowSpan: ae,
             variant: "expand"
-        },  r().createElement(Qn, {
+        },  r().createElement(tt, {
             expanded: m,
             onClick: G,
             title: m ? se : ce,
             "aria-controls": m ? b : undefined,
             "aria-expanded": m
-        })), p && !h &&  r().createElement(Se, {
+        })), p && !y &&  r().createElement(Se, {
             variant: "expand",
             "data-movable-column": le
-        }), ee, o && !i && !a &&  r().createElement(Se, {
+        }), ee, o && !i && !l &&  r().createElement(Se, {
             align: "right",
             appearance: C ? "rowLink" : "data",
             "data-test": "row-actions",
             variant: "actions",
             "data-movable-column": le
-        }), (i || a) &&  r().createElement(Se, {
+        }), (i || l) &&  r().createElement(Se, {
             align: "right",
             appearance: "data",
             "data-test": "row-actions",
             variant: "actions",
             "data-movable-column": le
-        }, i && J(), a &&  r().createElement(Hn(), {
+        }, i && J(), l &&  r().createElement(Fn(), {
             toggle: ue()
         }, Q())));
     }
-    Pt.propTypes = Dt;
-    Pt.splunkUiType = "Table.Row";
-    /* harmony default export */    const _t = Pt;
+    $t.propTypes = _t;
+    $t.splunkUiType = "Table.Row";
+    /* harmony default export */    const Nt = $t;
     // CONCATENATED MODULE: ./src/Table/TableContext.ts
-    var zt =  (0, t.createContext)({});
-    zt.displayName = "Table";
-    /* harmony default export */    const Mt = zt;
-    // CONCATENATED MODULE: ./src/Table/HeadStyles.ts
-    var $t = M().thead.withConfig({
-        displayName: "HeadStyles__Styled",
-        componentId: "iap21t-0"
-    })([ "", ";", "" ], $.mixins.reset("table-header-group"), (function(e) {
-        var n = e.$isFixed, t = e.$zIndex;
-        return n && (0, z.css)([ "position:sticky;top:0;z-index:", ";" ], t);
-    }));
-    var Nt = M()(_n).withConfig({
-        displayName: "HeadStyles__StyledToggleAll",
-        componentId: "iap21t-1"
-    })([ "width:32px;" ]);
-    var Wt = M()(_n).withConfig({
-        displayName: "HeadStyles__StyledInfo",
-        componentId: "iap21t-2"
-    })([ "width:32px;" ]);
-    var Lt = M()(_n).withConfig({
-        displayName: "HeadStyles__StyledDragRow",
-        componentId: "iap21t-3"
-    })([ "width:32px;" ]);
+    var Wt =  (0, t.createContext)({});
+    Wt.displayName = "Table";
+    /* harmony default export */    const Lt = Wt;
     // CONCATENATED MODULE: ./src/Table/Head.tsx
     function Ht() {
         return Ht = Object.assign ? Object.assign.bind() : function(e) {
@@ -1954,27 +1954,27 @@
     }
     var Vt = {
         /** @private. */
-        actions: i().arrayOf(i().node),
+        actions: C().arrayOf(C().node),
         /** @private. */
-        actionsColumnWidth: i().number,
+        actionsColumnWidth: C().number,
         /** @private */
-        cellMinWidth: i().number,
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
+        cellMinWidth: C().number,
+        children: C().node,
+        elementRef: C().oneOfType([ C().func, C().object ]),
         /** @private. */
-        hasDragColumn: i().bool,
+        hasDragColumn: C().bool,
         /** @private. */
-        hasInfoColumn: i().bool,
+        hasInfoColumn: C().bool,
         /** @private. */
-        onAutosizeColumn: i().func,
+        onAutosizeColumn: C().func,
         /** @private. */
-        onRequestMoveColumn: i().func,
+        onRequestMoveColumn: C().func,
         /** @private. */
-        onRequestResizeColumn: i().func,
+        onRequestResizeColumn: C().func,
         /** @private. */
-        onRequestToggleAllRows: i().func,
+        onRequestToggleAllRows: C().func,
         /** @private. */
-        rowSelection: i().oneOf([ "all", "some", "none" ])
+        rowSelection: C().oneOf([ "all", "some", "none" ])
     };
     var Ft = 1;
     var Ut = {
@@ -1987,7 +1987,7 @@
     var Gt = (0, j._)("All rows selected");
     var Jt = function e(n) {
         var t, r;
-        var o = tn();
+        var o = ln();
         if (!n) {
             return [];
         }
@@ -1998,7 +1998,7 @@
     };
     function Qt(e) {
         var n = e.actions, o = n === void 0 ? [] : n, i = e.actionsColumnWidth, a = e.cellMinWidth, l = a === void 0 ? 60 : a, u = e.children, s = e.elementRef, c = e.hasDragColumn, d = e.hasInfoColumn, f = e.onAutosizeColumn, v = e.onRequestMoveColumn, p = e.onRequestResizeColumn, m = e.onRequestToggleAllRows, b = e.rowSelection, h = Kt(e, [ "actions", "actionsColumnWidth", "cellMinWidth", "children", "elementRef", "hasDragColumn", "hasInfoColumn", "onAutosizeColumn", "onRequestMoveColumn", "onRequestResizeColumn", "onRequestToggleAllRows", "rowSelection" ]);
-        var y = (0, t.useContext)(Mt), g = y.headType, w = y.tableContainerWidthWithoutBorders, C = y.resizableFillLayout;
+        var y = (0, t.useContext)(Lt), g = y.headType, w = y.tableContainerWidthWithoutBorders, C = y.resizableFillLayout;
         var x = (0, t.useRef)(null);
         var S = (0, t.useRef)([]);
         (0, t.useEffect)((function() {
@@ -2164,28 +2164,28 @@
             };
         }), [ i ]);
         
-        return r().createElement($t, Ht({
+        return r().createElement(zn, Ht({
             ref: R,
             "data-test": q,
             $isFixed: g === "fixed",
             $zIndex: I + Ft
-        }, h),  r().createElement(_t, null, c &&  r().createElement(Lt, {
+        }, h),  r().createElement(Nt, null, c &&  r().createElement(Nn, {
             key: "drag_rows_head_cell",
             "data-test": "drag-rows-head-cell",
             align: "center",
             resizable: false
-        }), m &&  r().createElement(Nt, {
+        }), m &&  r().createElement(Mn, {
             key: "toggle_all",
             resizable: false,
             align: "center",
             variant: "toggleAll",
             truncate: false,
             "data-test": "toggle-all"
-        },  r().createElement(wt, {
+        },  r().createElement(kt, {
             "aria-label": A,
             onClick: m,
             selected: j
-        })), d &&  r().createElement(Wt, {
+        })), d &&  r().createElement($n, {
             key: "more_info_head_cell",
             "data-test": "more-info-head-cell",
             resizable: false,
@@ -2306,123 +2306,124 @@
     /** @public */
     /** @public */    var hr = [ "clickAway", "contentClick", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
     var yr = {
-        align: i().oneOf([ "left", "center", "right" ]),
-        buttonRef: i().oneOfType([ i().func, i().object ]),
-        canCoverHead: i().bool,
-        children: i().node.isRequired,
-        closeReasons: i().arrayOf(i().oneOf(hr)),
-        columnId: i().string,
+        align: C().oneOf([ "left", "center", "right" ]),
+        buttonRef: C().oneOfType([ C().func, C().object ]),
+        canCoverHead: C().bool,
+        children: C().node.isRequired,
+        closeReasons: C().arrayOf(C().oneOf(hr)),
+        columnId: C().string,
         /** @private. */
-        dragId: i().oneOfType([ i().string, i().number ]),
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        headCellScreenReaderText: i().string,
-        focusToggleReasons: i().arrayOf(i().oneOf(hr)),
+        dragId: C().oneOfType([ C().string, C().number ]),
+        elementRef: C().oneOfType([ C().func, C().object ]),
+        headCellScreenReaderText: C().string,
+        focusToggleReasons: C().arrayOf(C().oneOf(hr)),
         /** @private The index of the cell, skipping the info column. */
-        index: i().number,
-        label: i().node,
+        index: C().number,
+        label: C().node,
         /** @private. */
-        onAutosizeColumn: i().func,
+        onAutosizeColumn: C().func,
         /**
    * @private. This will be passed through, and will work as expected.
    */
-        onKeyDown: i().func,
-        onRequestClose: i().func,
+        onKeyDown: C().func,
+        onRequestClose: C().func,
         /** @private. */
-        onRequestMoveColumn: i().func,
-        onRequestOpen: i().func,
+        onRequestMoveColumn: C().func,
+        onRequestOpen: C().func,
         /** @private. */
-        onRequestResize: i().func,
-        open: i().bool,
-        repositionMode: i().oneOf([ "none", "flip", "any" ]),
-        resizable: i().bool,
-        retainFocus: i().bool,
-        takeFocus: i().bool,
-        truncate: i().bool,
+        onRequestResize: C().func,
+        open: C().bool,
+        repositionMode: C().oneOf([ "none", "flip", "any" ]),
+        resizable: C().bool,
+        retainFocus: C().bool,
+        takeFocus: C().bool,
+        truncate: C().bool,
         /**
    * @private
    * Used internally to suppress focus when this `HeadDropdownCell` is superseded by one in an
    * overlaid `HeadTable` for user interactions.
    */
-        visible: i().bool,
-        width: i().number,
+        visible: C().bool,
+        width: C().number,
         /** @private. */
-        variant: i().oneOf([ "toggleAll", "info", "actions" ])
+        variant: C().oneOf([ "toggleAll", "info", "actions" ])
     };
     var gr = [ "contentClick", "escapeKey", "toggleClick" ];
     function wr(e) {
-        var n = e.align, o = n === void 0 ? "left" : n, i = e.buttonRef, a = e.canCoverHead, u = a === void 0 ? true : a, s = e.children, c = e.closeReasons, d = c === void 0 ? hr : c, f = e.columnId, v = e.dragId, p = e.elementRef, m = e.headCellScreenReaderText, b = e.focusToggleReasons, h = b === void 0 ? gr : b, y = e.id, g = e.index, w = e.label, C = e.onAutosizeColumn, x = e.onKeyDown, S = e.onRequestClose, k = e.onRequestMoveColumn, O = e.onRequestOpen, E = e.onRequestResize, I = e.open, q = e.repositionMode, P = q === void 0 ? "flip" : q, _ = e.resizable, z = _ === void 0 ? true : _, M = e.retainFocus, $ = e.style, N = e.takeFocus, L = N === void 0 ? true : N, H = e.truncate, K = H === void 0 ? true : H, B = e.variant, V = e.visible, F = V === void 0 ? true : V, U = e.width, X = mr(e, [ "align", "buttonRef", "canCoverHead", "children", "closeReasons", "columnId", "dragId", "elementRef", "headCellScreenReaderText", "focusToggleReasons", "id", "index", "label", "onAutosizeColumn", "onKeyDown", "onRequestClose", "onRequestMoveColumn", "onRequestOpen", "onRequestResize", "open", "repositionMode", "resizable", "retainFocus", "style", "takeFocus", "truncate", "variant", "visible", "width" ]);
+        var n;
+        var o = e.align, i = o === void 0 ? "left" : o, l = e.buttonRef, u = e.canCoverHead, s = u === void 0 ? true : u, c = e.children, d = e.closeReasons, f = d === void 0 ? hr : d, v = e.columnId, p = e.dragId, m = e.elementRef, b = e.headCellScreenReaderText, h = e.focusToggleReasons, y = h === void 0 ? gr : h, g = e.id, w = e.index, C = e.label, x = e.onAutosizeColumn, S = e.onKeyDown, k = e.onRequestClose, O = e.onRequestMoveColumn, E = e.onRequestOpen, I = e.onRequestResize, q = e.open, P = e.repositionMode, _ = P === void 0 ? "flip" : P, z = e.resizable, M = z === void 0 ? true : z, $ = e.retainFocus, N = e.style, L = e.takeFocus, H = L === void 0 ? true : L, K = e.truncate, B = K === void 0 ? true : K, V = e.variant, F = e.visible, U = F === void 0 ? true : F, X = e.width, Y = mr(e, [ "align", "buttonRef", "canCoverHead", "children", "closeReasons", "columnId", "dragId", "elementRef", "headCellScreenReaderText", "focusToggleReasons", "id", "index", "label", "onAutosizeColumn", "onKeyDown", "onRequestClose", "onRequestMoveColumn", "onRequestOpen", "onRequestResize", "open", "repositionMode", "resizable", "retainFocus", "style", "takeFocus", "truncate", "variant", "visible", "width" ]);
         // @docs-props-type HeadDropdownCellPropsBase
-                var Y = lr()({
+                var G = lr()({
             componentName: "HeadDropdownCell",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
             // see SUI-7028
             valuePropName: "open"
         });
-        var G = (0, t.useState)(), J = sr(G, 2), Q = J[0], Z = J[1];
-        var ee = (0, t.useState)(null), ne = sr(ee, 2), te = ne[0], re = ne[1];
-        var oe = (0, t.useState)(null), ie = sr(oe, 2), ae = ie[0], le = ie[1];
-        var ue = (0, t.useState)(false), se = sr(ue, 2), ce = se[0], de = se[1];
-        var fe = (0, R.createDOMID)("popover");
-        var ve = (0, R.createDOMID)("cellId");
-        var pe = !!k;
-        var me = (0, l.useSortable)({
+        var J = (0, t.useState)(), Q = sr(J, 2), Z = Q[0], ee = Q[1];
+        var ne = (0, t.useState)(null), te = sr(ne, 2), re = te[0], oe = te[1];
+        var ie = (0, t.useState)(null), ae = sr(ie, 2), le = ae[0], ue = ae[1];
+        var se = (0, t.useState)(false), ce = sr(se, 2), de = ce[0], fe = ce[1];
+        var ve = (0, D.createDOMID)("popover");
+        var pe = !!O;
+        var me = (0, a.useSortable)({
             // dragId is optional in HeadCell but required by useSortable
             // since it is always set in Table, use a type assertion here to avoid TypeScript error
-            id: v
+            id: p
         }), be = me.attributes, he = me.listeners, ye = me.setNodeRef, ge = me.isDragging;
         var we = (0, t.useMemo)((function() {
-            return Y ? I : ce;
-        }), [ Y, ce, I ]);
-        var Ce = T()(F);
-        var xe = y || ve;
+            return G ? q : de;
+        }), [ G, de, q ]);
+        var Ce = R()(U);
+        var xe = (n = g !== null && g !== void 0 ? g : v) !== null && n !== void 0 ? n : (0, 
+        D.createDOMID)("headCellId-");
         (0, t.useEffect)((function() {
             if (false) {}
-        }), [ E, K ]);
+        }), [ I, B ]);
         var Se = (0, t.useCallback)((function(e) {
             var n = e.reason, t = e.event;
             if (n === "clickAway" && t !== undefined) {
                 var r = t.target;
                 while (r) {
                     // Ignore clicks on toggle.
-                    if (r === ae) {
+                    if (r === le) {
                         return;
                     }
                     r = r.parentNode;
                 }
             }
-            if (we && A()(d, n) && g !== undefined) {
-                if (A()(h, n)) {
-                    ae === null || ae === void 0 ? void 0 : ae.focus();
+            if (we && A()(f, n) && w !== undefined) {
+                if (A()(y, n)) {
+                    le === null || le === void 0 ? void 0 : le.focus();
                 }
-                if (!Y) {
-                    de(false);
+                if (!G) {
+                    fe(false);
                 }
-                S === null || S === void 0 ? void 0 : S(t, {
-                    index: g,
+                k === null || k === void 0 ? void 0 : k(t, {
+                    index: w,
                     reason: n,
-                    columnId: f
+                    columnId: v
                 });
             }
-        }), [ d, f, h, g, ae, Y, we, S ]);
+        }), [ f, v, y, w, le, G, we, k ]);
         (0, t.useEffect)((function() {
-            if (Ce && !F) {
+            if (Ce && !U) {
                 Se({
                     reason: "offScreen"
                 });
             }
-        }), [ Se, Ce, F ]);
+        }), [ Se, Ce, U ]);
         var ke = (0, t.useCallback)((function(e) {
-            W(p, e);
+            W(m, e);
             if (pe) {
                 ye(e);
             }
-        }), [ pe, p, ye ]);
+        }), [ pe, m, ye ]);
         var Oe = (0, t.useCallback)((function(e) {
-            le(e);
-            re(e);
-            W(i, e);
-        }), [ i ]);
+            ue(e);
+            oe(e);
+            W(l, e);
+        }), [ l ]);
         var Re = (0, t.useCallback)((function(e) {
             e.stopPropagation();
             // ignore clicks on the resize handle
@@ -2430,32 +2431,32 @@
                 return;
             }
             if (!we) {
-                Z(e.clientX || undefined);
+                ee(e.clientX || undefined);
             }
             if (we) {
                 Se === null || Se === void 0 ? void 0 : Se({
                     reason: "toggleClick",
                     event: e
                 });
-            } else if (g !== undefined) {
-                O === null || O === void 0 ? void 0 : O(e, {
+            } else if (w !== undefined) {
+                E === null || E === void 0 ? void 0 : E(e, {
                     reason: "toggleClick",
-                    columnId: f,
-                    index: g
+                    columnId: v,
+                    index: w
                 });
-                if (!Y) {
-                    de(true);
+                if (!G) {
+                    fe(true);
                 }
             }
-        }), [ f, Se, g, Y, we, O ]);
+        }), [ v, Se, w, G, we, E ]);
         var Ie = (0, t.useCallback)((function(e) {
-            if (g !== undefined) {
-                x === null || x === void 0 ? void 0 : x(e, {
-                    index: g,
-                    columnId: f
+            if (w !== undefined) {
+                S === null || S === void 0 ? void 0 : S(e, {
+                    index: w,
+                    columnId: v
                 });
             }
-        }), [ f, g, x ]);
+        }), [ v, w, S ]);
         var je = (0, t.useCallback)((function(e) {
             Se({
                 reason: "contentClick",
@@ -2463,105 +2464,237 @@
             });
         }), [ Se ]);
         var De = (0, t.useMemo)((function() {
-            if (Q !== undefined && nr()(Q)) {
+            if (Z !== undefined && nr()(Z)) {
                 var e;
                 return {
-                    x: Q - ((e = te === null || te === void 0 ? void 0 : te.getBoundingClientRect().left) !== null && e !== void 0 ? e : 0)
+                    x: Z - ((e = re === null || re === void 0 ? void 0 : re.getBoundingClientRect().left) !== null && e !== void 0 ? e : 0)
                 };
             }
             return undefined;
-        }), [ Q, te ]);
+        }), [ Z, re ]);
         var qe = (0, t.useMemo)((function() {
-            return Ee()({}, $, {
-                width: U
+            return Ee()({}, N, {
+                width: X
             });
-        }), [ $, U ]);
+        }), [ N, X ]);
         var Ae;
-        if (m) {
-            Ae = m;
-        } else if (typeof w === "string") {
-            Ae = w;
+        if (b) {
+            Ae = b;
+        } else if (typeof C === "string") {
+            Ae = C;
         }
         
-        return r().createElement(Rn, ur({
+        return r().createElement(He, ur({
             style: qe,
             "data-test": "head-cell",
             $isDragging: pe && ge,
-            $variant: B,
-            id: F ? xe : undefined,
+            $variant: V,
+            id: U ? xe : undefined,
             ref: ke
-        }, X),  r().createElement(On, null, pe &&  r().createElement(In, ur({
-            "aria-label": (0, D.sprintf)((0, j._)("Reorder %(labelString)s"), {
+        }, Y),  r().createElement(Le, null, pe &&  r().createElement(Be, ur({
+            "aria-label": (0, T.sprintf)((0, j._)("Reorder %(labelString)s"), {
                 labelString: Ae
             }),
             "data-test": "drag"
-        }, be, he),  r().createElement(En, null,  r().createElement(Te(), null))),  r().createElement(kn, {
-            align: o,
+        }, be, he),  r().createElement(Ke, null,  r().createElement(Te(), null))),  r().createElement(In, {
+            align: i,
             "aria-expanded": we,
             "aria-haspopup": true,
-            "aria-owns": fe,
+            "aria-owns": ve,
             clickable: true,
-            columnId: f,
+            columnId: v,
             elementRef: Oe,
-            id: y,
-            index: g,
+            cellId: xe,
+            index: w,
             isMenu: true,
-            label: w,
-            resizable: F && z,
-            onAutosizeColumn: C,
-            onRequestResize: E,
+            label: C,
+            resizable: U && M,
+            onAutosizeColumn: x,
+            onRequestResize: I,
             onClick: Re,
             onKeyDown: Ie,
-            truncate: K,
-            width: U,
+            truncate: B,
+            width: X,
             "data-test": "inner"
         }),  r().createElement(ir(), {
             align: "center",
-            anchor: te,
+            anchor: re,
             "aria-labelledby": xe,
-            autoCloseWhenOffScreen: A()(d, "offScreen"),
-            canCoverAnchor: u,
+            autoCloseWhenOffScreen: A()(f, "offScreen"),
+            canCoverAnchor: s,
             defaultPlacement: "below",
-            id: fe,
+            id: ve,
             onRequestClose: Se,
-            open: !!te && we,
+            open: !!re && we,
             pointTo: De,
-            repositionMode: P,
-            retainFocus: M,
-            takeFocus: L
-        }, rr()(s) ? function() {
+            repositionMode: _,
+            retainFocus: $,
+            takeFocus: H
+        }, rr()(c) ? function() {
             
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             return r().createElement("div", {
                 onClick: je
-            }, s.apply(void 0, arguments));
+            }, c.apply(void 0, arguments));
         } : 
         
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         r().createElement("div", {
             onClick: je
-        }, s))));
+        }, c))));
     }
     wr.propTypes = yr;
     wr.splunkUiType = "Table.HeadDropdownCell";
     wr.possibleCloseReasons = hr;
     /* harmony default export */    const Cr = wr;
+    // CONCATENATED MODULE: external "lodash/extend"
+    const xr = require("lodash/extend");
+    var Sr =  e.n(xr);
+    // CONCATENATED MODULE: ./src/Table/HeadTableStyles.ts
+    var kr = M()(ne).withConfig({
+        displayName: "HeadTableStyles__Styled",
+        componentId: "g85wgf-0"
+    })([ "min-width:0;table-layout:fixed;" ]);
+    var Or = M().div.withConfig({
+        displayName: "HeadTableStyles__StyledDockedContainer",
+        componentId: "g85wgf-1"
+    })([ "overflow:hidden;position:fixed;z-index:", ";@media print{display:none;}" ], $.variables.zindexFixedNavbar);
+    var Rr = M()(Or).withConfig({
+        displayName: "HeadTableStyles__StyledFixedContainer",
+        componentId: "g85wgf-2"
+    })([ "position:absolute;box-shadow:none;z-index:1;" ]);
+    // CONCATENATED MODULE: ./src/Table/HeadTable.tsx
+    function Er() {
+        return Er = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var t = arguments[n];
+                for (var r in t) {
+                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
+                }
+            }
+            return e;
+        }, Er.apply(null, arguments);
+    }
+    function Ir(e, n) {
+        if (null == e) return {};
+        var t, r, o = Tr(e, n);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (r = 0; r < i.length; r++) {
+                t = i[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            }
+        }
+        return o;
+    }
+    function Tr(e, n) {
+        if (null == e) return {};
+        var t = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (n.includes(r)) continue;
+                t[r] = e[r];
+            }
+        }
+        return t;
+    }
+    var jr = {
+        cellWidths: C().arrayOf(C().number).isRequired,
+        dragIndex: C().number,
+        elementRef: C().oneOfType([ C().func, C().object ]),
+        hasDragColumn: C().bool,
+        hasRowExpansion: C().bool,
+        hasRowSelection: C().bool,
+        headType: C().oneOf([ "docked", "fixed" ]).isRequired,
+        horizontalOffset: C().number,
+        isFixedColumn: C().bool,
+        rowSelection: C().oneOf([ "all", "some", "none" ]),
+        tableStyle: C().object,
+        tableWidth: C().number.isRequired,
+        tHead: C().element.isRequired,
+        top: C().number.isRequired,
+        width: C().number.isRequired
+    };
+    /**
+ * @private
+ * HeadTable is an internal component that provides a detached table head that can
+ * then be positioned in different ways outside of the main table.
+ */    function Dr(e) {
+        var n = e.cellWidths, o = e.elementRef, i = e.hasDragColumn, a = e.hasRowExpansion, l = e.hasRowSelection, u = e.headType, s = e.horizontalOffset, c = s === void 0 ? 0 : s, d = e.isFixedColumn, f = e.tableStyle, v = e.tableWidth, p = e.tHead, m = e.top, b = e.width, y = Ir(e, [ "cellWidths", "elementRef", "hasDragColumn", "hasRowExpansion", "hasRowSelection", "headType", "horizontalOffset", "isFixedColumn", "tableStyle", "tableWidth", "tHead", "top", "width" ]);
+        var g = u === "docked";
+        var w = g ? Or : Rr;
+        var C = (0, t.useRef)(null);
+        var x = (0, t.useCallback)((function(e) {
+            W(C, e);
+        }), [ C ]);
+        var S = 0;
+        if (a) {
+            S += 1;
+        }
+        if (l) {
+            S += 1;
+        }
+        if (i) {
+            S += 1;
+        }
+        // Set the widths of the head cells if not fixed column
+                var k = (0, t.useMemo)((function() {
+            return t.Children.toArray(p.props.children);
+        }), [ p.props.children ]);
+        var O = (0, t.useMemo)((function() {
+            if (d) {
+                // ensure consistent keys
+                return k;
+            }
+            return k.filter(t.isValidElement).map((function(e, r) {
+                
+                return (0, t.cloneElement)(e, {
+                    style: Sr()({}, e.props.style, {
+                        width: n[r + S]
+                    })
+                });
+            }));
+        }), [ n, S, d, k ]);
+        var R =  (0, t.cloneElement)(p, {
+            elementRef: x,
+            "data-test": "".concat(u, "-head")
+        }, O);
+        var E = (0, t.useMemo)((function() {
+            return {
+                top: m,
+                width: b
+            };
+        }), [ m, b ]);
+        
+        return r().createElement(w, {
+            style: E,
+            ref: o
+        },  r().createElement(kr, Er({
+            "data-test": "".concat(u, "-head-table"),
+            "data-fixed-column": d ? "true" : undefined,
+            style: Sr()({}, f, {
+                marginLeft: c,
+                width: d ? undefined : v
+            })
+        }, h()(y, "dragIndex")), R));
+    }
+    Dr.propTypes = jr;
+    /* harmony default export */    const qr = Dr;
     // CONCATENATED MODULE: ./src/Table/KeyboardSensor.ts
-    function xr(e) {
+    function Ar(e) {
         "@babel/helpers - typeof";
-        return xr = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Ar = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, xr(e);
+        }, Ar(e);
     }
-    function Sr(e, n) {
-        return Rr(e) || Or(e, n) || Tr(e, n) || kr();
+    function Pr(e, n) {
+        return Mr(e) || zr(e, n) || Wr(e, n) || _r();
     }
-    function kr() {
+    function _r() {
         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 Or(e, n) {
+    function zr(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, o, i, a, l = [], u = !0, s = !1;
@@ -2583,68 +2716,68 @@
             return l;
         }
     }
-    function Rr(e) {
+    function Mr(e) {
         if (Array.isArray(e)) return e;
     }
-    function Er(e) {
-        return Dr(e) || jr(e) || Tr(e) || Ir();
+    function $r(e) {
+        return Hr(e) || Lr(e) || Wr(e) || Nr();
     }
-    function Ir() {
+    function Nr() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function Tr(e, n) {
+    function Wr(e, n) {
         if (e) {
-            if ("string" == typeof e) return qr(e, n);
+            if ("string" == typeof e) return Kr(e, n);
             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) ? qr(e, n) : void 0;
+            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) ? Kr(e, n) : void 0;
         }
     }
-    function jr(e) {
+    function Lr(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function Dr(e) {
-        if (Array.isArray(e)) return qr(e);
+    function Hr(e) {
+        if (Array.isArray(e)) return Kr(e);
     }
-    function qr(e, n) {
+    function Kr(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function Ar(e, n) {
+    function Br(e, n) {
         if (!(e instanceof n)) throw new TypeError("Cannot call a class as a function");
     }
-    function Pr(e, n) {
+    function Vr(e, n) {
         for (var t = 0; t < n.length; t++) {
             var r = n[t];
             r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, Mr(r.key), r);
+            Object.defineProperty(e, Xr(r.key), r);
         }
     }
-    function _r(e, n, t) {
-        return n && Pr(e.prototype, n), t && Pr(e, t), Object.defineProperty(e, "prototype", {
+    function Fr(e, n, t) {
+        return n && Vr(e.prototype, n), t && Vr(e, t), Object.defineProperty(e, "prototype", {
             writable: !1
         }), e;
     }
-    function zr(e, n, t) {
-        return (n = Mr(n)) in e ? Object.defineProperty(e, n, {
+    function Ur(e, n, t) {
+        return (n = Xr(n)) in e ? Object.defineProperty(e, n, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = t, e;
     }
-    function Mr(e) {
-        var n = $r(e, "string");
-        return "symbol" == xr(n) ? n : n + "";
+    function Xr(e) {
+        var n = Yr(e, "string");
+        return "symbol" == Ar(n) ? n : n + "";
     }
-    function $r(e, n) {
-        if ("object" != xr(e) || !e) return e;
+    function Yr(e, n) {
+        if ("object" != Ar(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var r = t.call(e, n || "default");
-            if ("object" != xr(r)) return r;
+            if ("object" != Ar(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
@@ -2652,21 +2785,21 @@
     // based on https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/sensors/keyboard/KeyboardSensor.ts
     // eslint-disable-next-line max-classes-per-file
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/sensors/utilities/Listeners.ts
-        var Nr =  function() {
+        var Gr =  function() {
         function e(n) {
             var t = this;
-            Ar(this, e);
-            zr(this, "listeners", []);
-            zr(this, "removeAll", (function() {
+            Br(this, e);
+            Ur(this, "listeners", []);
+            Ur(this, "removeAll", (function() {
                 t.listeners.forEach((function(e) {
                     var n;
-                    return (n = t.target) === null || n === void 0 ? void 0 : n.removeEventListener.apply(n, Er(e));
+                    return (n = t.target) === null || n === void 0 ? void 0 : n.removeEventListener.apply(n, $r(e));
                 }));
             }));
             this.target = n;
             this.target = n;
         }
-        _r(e, [ {
+        Fr(e, [ {
             key: "add",
             value: function e(n, t, r) {
                 var o;
@@ -2677,7 +2810,7 @@
         return e;
     }();
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/transform/parseTransform.ts
-        function Wr(e) {
+        function Jr(e) {
         if (e.startsWith("matrix3d(")) {
             var n = e.slice(9, -1).split(/, /);
             return {
@@ -2699,8 +2832,8 @@
         return null;
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/transform/inverseTransform.ts
-        function Lr(e, n, t) {
-        var r = Wr(n);
+        function Qr(e, n, t) {
+        var r = Jr(n);
         if (!r) {
             return e;
         }
@@ -2718,17 +2851,17 @@
             left: u
         };
     }
-    var Hr = {
+    var Zr = {
         ignoreTransform: false
     };
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/rect/getRect.ts
-        function Kr(e) {
-        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Hr;
+        function eo(e) {
+        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Zr;
         var t = e.getBoundingClientRect();
         if (n.ignoreTransform) {
-            var r = (0, zn.getWindow)(e).getComputedStyle(e), o = r.transform, i = r.transformOrigin;
+            var r = (0, Wn.getWindow)(e).getComputedStyle(e), o = r.transform, i = r.transformOrigin;
             if (o) {
-                t = Lr(t, o, i);
+                t = Qr(t, o, i);
             }
         }
         var a = t, l = a.top, u = a.left, s = a.width, c = a.height, d = a.bottom, f = a.right;
@@ -2741,7 +2874,7 @@
             right: f
         };
     }
-    function Br(e) {
+    function no(e) {
         if (e === document.scrollingElement) {
             var n = window, t = n.innerWidth, r = n.innerHeight;
             return {
@@ -2764,19 +2897,19 @@
         };
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/documentScrollingElement.ts
-        function Vr(e) {
-        if (!zn.canUseDOM || !e) {
+        function to(e) {
+        if (!Wn.canUseDOM || !e) {
             return false;
         }
         return e === document.scrollingElement;
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/getScrollPosition.ts
-        function Fr(e) {
+        function ro(e) {
         var n = {
             x: 0,
             y: 0
         };
-        var t = Vr(e) ? {
+        var t = to(e) ? {
             height: window.innerHeight,
             width: window.innerWidth
         } : {
@@ -2801,20 +2934,20 @@
         };
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/coordinates/constants.ts
-        var Ur = {
+        var oo = {
         x: 0,
         y: 0
     };
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/isFixed.ts
-        function Xr(e) {
+        function io(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, 
-        zn.getWindow)(e).getComputedStyle(e);
+        Wn.getWindow)(e).getComputedStyle(e);
         return n.position === "fixed";
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/isScrollable.ts
-        function Yr(e) {
+        function ao(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, 
-        zn.getWindow)(e).getComputedStyle(e);
+        Wn.getWindow)(e).getComputedStyle(e);
         var t = /(auto|scroll|overlay)/;
         var r = [ "overflow", "overflowX", "overflowY" ];
         return r.some((function(e) {
@@ -2823,7 +2956,7 @@
         }));
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/getScrollableAncestors.ts
-        function Gr(e, n) {
+        function lo(e, n) {
         var t = [];
         function r(o) {
             if (n != null && t.length >= n) {
@@ -2832,23 +2965,23 @@
             if (!o) {
                 return t;
             }
-            if ((0, zn.isDocument)(o) && o.scrollingElement != null && !t.includes(o.scrollingElement)) {
+            if ((0, Wn.isDocument)(o) && o.scrollingElement != null && !t.includes(o.scrollingElement)) {
                 t.push(o.scrollingElement);
                 return t;
             }
-            if (!(0, zn.isHTMLElement)(o) || (0, zn.isSVGElement)(o)) {
+            if (!(0, Wn.isHTMLElement)(o) || (0, Wn.isSVGElement)(o)) {
                 return t;
             }
             if (t.includes(o)) {
                 return t;
             }
-            var i = (0, zn.getWindow)(e).getComputedStyle(o);
+            var i = (0, Wn.getWindow)(e).getComputedStyle(o);
             if (o !== e) {
-                if (Yr(o, i)) {
+                if (ao(o, i)) {
                     t.push(o);
                 }
             }
-            if (Xr(o, i)) {
+            if (io(o, i)) {
                 return t;
             }
             return r(o.parentNode);
@@ -2859,23 +2992,23 @@
         return r(e);
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/getScrollableAncestors.ts
-        function Jr(e) {
-        var n = Gr(e, 1), t = Sr(n, 1), r = t[0];
+        function uo(e) {
+        var n = lo(e, 1), t = Pr(n, 1), r = t[0];
         return r !== null && r !== void 0 ? r : null;
     }
-    var Qr = {
-        start: [ a.KeyboardCode.Space, a.KeyboardCode.Enter ],
-        cancel: [ a.KeyboardCode.Esc ],
-        end: [ a.KeyboardCode.Space, a.KeyboardCode.Enter ]
+    var so = {
+        start: [ o.KeyboardCode.Space, o.KeyboardCode.Enter ],
+        cancel: [ o.KeyboardCode.Esc ],
+        end: [ o.KeyboardCode.Space, o.KeyboardCode.Enter ]
     };
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/scrollIntoViewIfNeeded.ts
-        function Zr(e) {
-        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Kr;
+        function co(e) {
+        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : eo;
         if (!e) {
             return;
         }
         var t = n(e), r = t.top, o = t.left, i = t.bottom, a = t.right;
-        var l = Jr(e);
+        var l = uo(e);
         if (!l) {
             return;
         }
@@ -2886,23 +3019,23 @@
             });
         }
     }
-    var eo =  function() {
+    var fo =  function() {
         function e(n) {
-            Ar(this, e);
-            zr(this, "autoScrollEnabled", false);
-            zr(this, "referenceCoordinates", void 0);
-            zr(this, "listeners", void 0);
-            zr(this, "windowListeners", void 0);
+            Br(this, e);
+            Ur(this, "autoScrollEnabled", false);
+            Ur(this, "referenceCoordinates", void 0);
+            Ur(this, "listeners", void 0);
+            Ur(this, "windowListeners", void 0);
             this.props = n;
             var t = n.event.target;
             this.props = n;
-            this.listeners = new Nr((0, zn.getOwnerDocument)(t));
-            this.windowListeners = new Nr((0, zn.getWindow)(t));
+            this.listeners = new Gr((0, Wn.getOwnerDocument)(t));
+            this.windowListeners = new Gr((0, Wn.getWindow)(t));
             this.handleKeyDown = this.handleKeyDown.bind(this);
             this.handleCancel = this.handleCancel.bind(this);
             this.attach();
         }
-        _r(e, [ {
+        Fr(e, [ {
             key: "attach",
             value: function e() {
                 var n = this;
@@ -2919,16 +3052,16 @@
                 var n = this.props, t = n.activeNode, r = n.onStart;
                 var o = t.node.current;
                 if (o) {
-                    Zr(o);
+                    co(o);
                 }
-                r(Ur);
+                r(oo);
             }
         }, {
             key: "handleKeyDown",
             value: function e(n) {
-                if ((0, zn.isKeyboardEvent)(n)) {
-                    var t = this.props, r = t.active, o = t.context, i = t.options;
-                    var l = i.keyboardCodes, u = l === void 0 ? Qr : l, s = i.coordinateGetter, c = i.scrollBehavior, d = c === void 0 ? "smooth" : c;
+                if ((0, Wn.isKeyboardEvent)(n)) {
+                    var t = this.props, r = t.active, i = t.context, a = t.options;
+                    var l = a.keyboardCodes, u = l === void 0 ? so : l, s = a.coordinateGetter, c = a.scrollBehavior, d = c === void 0 ? "smooth" : c;
                     var f = n.code;
                     if (u.end.includes(f)) {
                         this.handleEnd(n);
@@ -2938,41 +3071,41 @@
                         this.handleCancel(n);
                         return;
                     }
-                    var v = o.current.collisionRect;
+                    var v = i.current.collisionRect;
                     var p = v ? {
                         x: v.left,
                         y: v.top
-                    } : Ur;
+                    } : oo;
                     if (!this.referenceCoordinates) {
                         this.referenceCoordinates = p;
                     }
                     var m = s(n, {
                         active: r,
-                        context: o.current,
+                        context: i.current,
                         currentCoordinates: p
                     });
                     if (m) {
-                        var b = (0, zn.subtract)(m, p);
+                        var b = (0, Wn.subtract)(m, p);
                         var h = {
                             x: 0,
                             y: 0
                         };
-                        var y = o.current.scrollableAncestors;
+                        var y = i.current.scrollableAncestors;
                         for (var g = 0; g < y.length; g += 1) {
                             var w = y[g];
                             var C = n.code;
-                            var x = Fr(w), S = x.isTop, k = x.isRight, O = x.isLeft, R = x.isBottom, E = x.maxScroll, I = x.minScroll;
-                            var T = Br(w);
+                            var x = ro(w), S = x.isTop, k = x.isRight, O = x.isLeft, R = x.isBottom, E = x.maxScroll, I = x.minScroll;
+                            var T = no(w);
                             // isDraggableNodeVerticallyInView and isDraggableNodeHorizontallyInView are custom
                             // we want to scroll only when a dragging node will be out of view,
                             // originally it tries to always place a dragging node in the middle of the container
                                                         var j = T.top <= m.y && T.bottom >= m.y + ((v === null || v === void 0 ? void 0 : v.height) || 0);
                             var D = T.left <= m.x && T.right >= m.x + ((v === null || v === void 0 ? void 0 : v.width) || 0);
-                            var q = (C === a.KeyboardCode.Right && !k || C === a.KeyboardCode.Left && !O) && !D;
-                            var A = (C === a.KeyboardCode.Down && !R || C === a.KeyboardCode.Up && !S) && !j;
+                            var q = (C === o.KeyboardCode.Right && !k || C === o.KeyboardCode.Left && !O) && !D;
+                            var A = (C === o.KeyboardCode.Down && !R || C === o.KeyboardCode.Up && !S) && !j;
                             if (q) {
                                 var P = w.scrollLeft + b.x;
-                                var _ = C === a.KeyboardCode.Right && P <= E.x || C === a.KeyboardCode.Left && P >= I.x;
+                                var _ = C === o.KeyboardCode.Right && P <= E.x || C === o.KeyboardCode.Left && P >= I.x;
                                 if (_ && !b.y) {
                                     // We don't need to update coordinates, the scroll adjustment alone will trigger
                                     // logic to auto-detect the new container we are over
@@ -2985,7 +3118,7 @@
                                 if (_) {
                                     h.x = w.scrollLeft - P;
                                 } else {
-                                    h.x = C === a.KeyboardCode.Right ? w.scrollLeft - E.x : w.scrollLeft - I.x;
+                                    h.x = C === o.KeyboardCode.Right ? w.scrollLeft - E.x : w.scrollLeft - I.x;
                                 }
                                 if (h.x) {
                                     w.scrollBy({
@@ -2996,7 +3129,7 @@
                                 break;
                             } else if (A) {
                                 var z = w.scrollTop + b.y;
-                                var M = C === a.KeyboardCode.Down && z <= E.y || C === a.KeyboardCode.Up && z >= I.y;
+                                var M = C === o.KeyboardCode.Down && z <= E.y || C === o.KeyboardCode.Up && z >= I.y;
                                 if (M && !b.x) {
                                     // We don't need to update coordinates, the scroll adjustment alone will trigger
                                     // logic to auto-detect the new container we are over
@@ -3009,7 +3142,7 @@
                                 if (M) {
                                     h.y = w.scrollTop - z;
                                 } else {
-                                    h.y = C === a.KeyboardCode.Down ? w.scrollTop - E.y : w.scrollTop - I.y;
+                                    h.y = C === o.KeyboardCode.Down ? w.scrollTop - E.y : w.scrollTop - I.y;
                                 }
                                 if (h.y) {
                                     w.scrollBy({
@@ -3020,7 +3153,7 @@
                                 break;
                             }
                         }
-                        this.handleMove(n, (0, zn.add)((0, zn.subtract)(m, this.referenceCoordinates), h));
+                        this.handleMove(n, (0, Wn.add)((0, Wn.subtract)(m, this.referenceCoordinates), h));
                     }
                 }
             }
@@ -3056,10 +3189,10 @@
         } ]);
         return e;
     }();
-    zr(eo, "activators", [ {
+    Ur(fo, "activators", [ {
         eventName: "onKeyDown",
         handler: function e(n, t, r) {
-            var o = t.keyboardCodes, i = o === void 0 ? Qr : o, a = t.onActivation;
+            var o = t.keyboardCodes, i = o === void 0 ? so : o, a = t.onActivation;
             var l = r.active;
             var u = n.nativeEvent.code;
             if (i.start.includes(u)) {
@@ -3076,138 +3209,6 @@
             return false;
         }
     } ]);
-    // CONCATENATED MODULE: external "lodash/extend"
-    const no = require("lodash/extend");
-    var to =  e.n(no);
-    // CONCATENATED MODULE: ./src/Table/HeadTableStyles.ts
-    var ro = M()(ne).withConfig({
-        displayName: "HeadTableStyles__Styled",
-        componentId: "g85wgf-0"
-    })([ "min-width:0;table-layout:fixed;" ]);
-    var oo = M().div.withConfig({
-        displayName: "HeadTableStyles__StyledDockedContainer",
-        componentId: "g85wgf-1"
-    })([ "overflow:hidden;position:fixed;z-index:", ";@media print{display:none;}" ], $.variables.zindexFixedNavbar);
-    var io = M()(oo).withConfig({
-        displayName: "HeadTableStyles__StyledFixedContainer",
-        componentId: "g85wgf-2"
-    })([ "position:absolute;box-shadow:none;z-index:1;" ]);
-    // CONCATENATED MODULE: ./src/Table/HeadTable.tsx
-    function ao() {
-        return ao = Object.assign ? Object.assign.bind() : function(e) {
-            for (var n = 1; n < arguments.length; n++) {
-                var t = arguments[n];
-                for (var r in t) {
-                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
-                }
-            }
-            return e;
-        }, ao.apply(null, arguments);
-    }
-    function lo(e, n) {
-        if (null == e) return {};
-        var t, r, o = uo(e, n);
-        if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (r = 0; r < i.length; r++) {
-                t = i[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
-            }
-        }
-        return o;
-    }
-    function uo(e, n) {
-        if (null == e) return {};
-        var t = {};
-        for (var r in e) {
-            if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                t[r] = e[r];
-            }
-        }
-        return t;
-    }
-    var so = {
-        cellWidths: i().arrayOf(i().number).isRequired,
-        dragIndex: i().number,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        hasDragColumn: i().bool,
-        hasRowExpansion: i().bool,
-        hasRowSelection: i().bool,
-        headType: i().oneOf([ "docked", "fixed" ]).isRequired,
-        horizontalOffset: i().number,
-        isFixedColumn: i().bool,
-        rowSelection: i().oneOf([ "all", "some", "none" ]),
-        tableStyle: i().object,
-        tableWidth: i().number.isRequired,
-        tHead: i().element.isRequired,
-        top: i().number.isRequired,
-        width: i().number.isRequired
-    };
-    /**
- * @private
- * HeadTable is an internal component that provides a detached table head that can
- * then be positioned in different ways outside of the main table.
- */    function co(e) {
-        var n = e.cellWidths, o = e.elementRef, i = e.hasDragColumn, a = e.hasRowExpansion, l = e.hasRowSelection, u = e.headType, s = e.horizontalOffset, c = s === void 0 ? 0 : s, d = e.isFixedColumn, f = e.tableStyle, v = e.tableWidth, p = e.tHead, m = e.top, b = e.width, h = lo(e, [ "cellWidths", "elementRef", "hasDragColumn", "hasRowExpansion", "hasRowSelection", "headType", "horizontalOffset", "isFixedColumn", "tableStyle", "tableWidth", "tHead", "top", "width" ]);
-        var y = u === "docked";
-        var w = y ? oo : io;
-        var C = (0, t.useRef)(null);
-        var x = (0, t.useCallback)((function(e) {
-            W(C, e);
-        }), [ C ]);
-        var S = 0;
-        if (a) {
-            S += 1;
-        }
-        if (l) {
-            S += 1;
-        }
-        if (i) {
-            S += 1;
-        }
-        // Set the widths of the head cells if not fixed column
-                var k = (0, t.useMemo)((function() {
-            return t.Children.toArray(p.props.children);
-        }), [ p.props.children ]);
-        var O = (0, t.useMemo)((function() {
-            if (d) {
-                // ensure consistent keys
-                return k;
-            }
-            return k.filter(t.isValidElement).map((function(e, r) {
-                
-                return (0, t.cloneElement)(e, {
-                    style: to()({}, e.props.style, {
-                        width: n[r + S]
-                    })
-                });
-            }));
-        }), [ n, S, d, k ]);
-        var R =  (0, t.cloneElement)(p, {
-            elementRef: x,
-            "data-test": "".concat(u, "-head")
-        }, O);
-        var E = (0, t.useMemo)((function() {
-            return {
-                top: m,
-                width: b
-            };
-        }), [ m, b ]);
-        
-        return r().createElement(w, {
-            style: E,
-            ref: o
-        },  r().createElement(ro, ao({
-            "data-test": "".concat(u, "-head-table"),
-            "data-fixed-column": d ? "true" : undefined,
-            style: to()({}, f, {
-                marginLeft: c,
-                width: d ? undefined : v
-            })
-        }, g()(h, "dragIndex")), R));
-    }
-    co.propTypes = so;
-    /* harmony default export */    const fo = co;
     // CONCATENATED MODULE: ./src/utils/getBoundingClientRect.ts
     function vo(e) {
         "@babel/helpers - typeof";
@@ -3287,7 +3288,7 @@
         if (!n || !i) {
             return o;
         }
-        var a = tn();
+        var a = ln();
         var l = o.left + (((t = a.visualViewport) === null || t === void 0 ? void 0 : t.offsetLeft) || 0);
         var u = o.top + (((r = a.visualViewport) === null || r === void 0 ? void 0 : r.offsetTop) || 0);
         var s = o.width, c = o.height;
@@ -3409,26 +3410,26 @@
     /** @public */
     /** @public */
     /** @public */    var zo = {
-        actions: i().arrayOf(i().element),
-        actionsColumnWidth: i().number,
-        children: i().node,
-        dockOffset: i().number,
-        dockScrollBar: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        headType: i().oneOf([ "docked", "fixed", "inline" ]),
-        innerStyle: i().object,
-        onRequestToggleAllRows: i().func,
-        onScroll: i().func,
-        outerStyle: i().object,
-        primaryColumnIndex: i().number,
-        rowExpansion: i().oneOf([ "single", "multi", "controlled", "none" ]),
-        rowSelection: i().oneOf([ "all", "some", "none" ]),
-        stripeRows: i().bool,
-        tableStyle: i().object,
-        onRequestMoveColumn: i().func,
-        onRequestMoveRow: i().func,
-        onRequestResizeColumn: i().func,
-        resizableFillLayout: i().bool
+        actions: C().arrayOf(C().element),
+        actionsColumnWidth: C().number,
+        children: C().node,
+        dockOffset: C().number,
+        dockScrollBar: C().bool,
+        elementRef: C().oneOfType([ C().func, C().object ]),
+        headType: C().oneOf([ "docked", "fixed", "inline" ]),
+        innerStyle: C().object,
+        onRequestToggleAllRows: C().func,
+        onScroll: C().func,
+        outerStyle: C().object,
+        primaryColumnIndex: C().number,
+        rowExpansion: C().oneOf([ "single", "multi", "controlled", "none" ]),
+        rowSelection: C().oneOf([ "all", "some", "none" ]),
+        stripeRows: C().bool,
+        tableStyle: C().object,
+        onRequestMoveColumn: C().func,
+        onRequestMoveRow: C().func,
+        onRequestResizeColumn: C().func,
+        resizableFillLayout: C().bool
     };
     var Mo = function e(n) {
         return n === "inline";
@@ -3440,7 +3441,7 @@
         return n === "fixed";
     };
     var Wo = function e(n) {
-        var t = tn();
+        var t = ln();
         var r = Co(n);
         return {
             top: r.top + t.pageYOffset,
@@ -3448,12 +3449,12 @@
         };
     };
     var Lo = function e(n) {
-        var t = Qe();
+        var t = tn();
         if (n === undefined || n === null) {
             return undefined;
         }
         var r = n.children[0].children;
-        var o = p()(r, t.activeElement);
+        var o = f()(r, t.activeElement);
         if (o > -1) {
             return {
                 target: "headCell",
@@ -3461,7 +3462,7 @@
             };
         }
         var i = n.querySelectorAll("[data-test=resize]");
-        var a = p()(i, t.activeElement);
+        var a = f()(i, t.activeElement);
         if (a > -1) {
             return {
                 target: "resizeButton",
@@ -3477,7 +3478,7 @@
         return n.indexOf(t) + 1;
     };
     var Bo = {
-        coordinateGetter: l.sortableKeyboardCoordinates
+        coordinateGetter: a.sortableKeyboardCoordinates
     };
     var Vo = {
         draggable: (0, j._)("To pick up a sortable row, press space or enter.\n            Use the up and down arrow keys to update the position of the row.\n            Press space or enter again to drop the row in its new position, or press escape to cancel.")
@@ -3513,7 +3514,7 @@
     };
     var Yo = [];
     function Go(e) {
-        var n = e.actions, o = n === void 0 ? Yo : n, i = e.actionsColumnWidth, s = e.children, d = e.dockOffset, v = d === void 0 ? 0 : d, p = e.dockScrollBar, m = e.elementRef, h = e.headType, y = h === void 0 ? "inline" : h, w = e.innerStyle, x = e.onRequestMoveColumn, k = e.onRequestMoveRow, I = e.onRequestResizeColumn, q = e.onRequestToggleAllRows, A = e.onScroll, P = e.outerStyle, _ = e.primaryColumnIndex, z = _ === void 0 ? 0 : _, M = e.resizableFillLayout, $ = e.rowExpansion, N = $ === void 0 ? "none" : $, L = e.rowSelection, H = L === void 0 ? "none" : L, K = e.stripeRows, B = e.tableStyle, V = Po(e, [ "actions", "actionsColumnWidth", "children", "dockOffset", "dockScrollBar", "elementRef", "headType", "innerStyle", "onRequestMoveColumn", "onRequestMoveRow", "onRequestResizeColumn", "onRequestToggleAllRows", "onScroll", "outerStyle", "primaryColumnIndex", "resizableFillLayout", "rowExpansion", "rowSelection", "stripeRows", "tableStyle" ]);
+        var n = e.actions, l = n === void 0 ? Yo : n, s = e.actionsColumnWidth, d = e.children, f = e.dockOffset, v = f === void 0 ? 0 : f, m = e.dockScrollBar, b = e.elementRef, y = e.headType, w = y === void 0 ? "inline" : y, C = e.innerStyle, x = e.onRequestMoveColumn, O = e.onRequestMoveRow, E = e.onRequestResizeColumn, q = e.onRequestToggleAllRows, A = e.onScroll, P = e.outerStyle, _ = e.primaryColumnIndex, z = _ === void 0 ? 0 : _, M = e.resizableFillLayout, $ = e.rowExpansion, N = $ === void 0 ? "none" : $, L = e.rowSelection, H = L === void 0 ? "none" : L, K = e.stripeRows, B = e.tableStyle, V = Po(e, [ "actions", "actionsColumnWidth", "children", "dockOffset", "dockScrollBar", "elementRef", "headType", "innerStyle", "onRequestMoveColumn", "onRequestMoveRow", "onRequestResizeColumn", "onRequestToggleAllRows", "onScroll", "outerStyle", "primaryColumnIndex", "resizableFillLayout", "rowExpansion", "rowSelection", "stripeRows", "tableStyle" ]);
  // @docs-props-type TablePropsBase
                 var F = (0, t.useState)([]), U = Io(F, 2), X = U[0], Y = U[1];
         var G = (0, t.useState)(), J = Io(G, 2), Q = J[0], oe = J[1];
@@ -3521,9 +3522,9 @@
         var de = (0, t.useState)(), fe = Io(de, 2), ve = fe[0], pe = fe[1];
         var me = (0, t.useState)(), be = Io(me, 2), he = be[0], ye = be[1];
         var ge = (0, t.useRef)(true);
-        var we = (0, t.useContext)(E.ScrollContainerContext);
-        var Ce = (0, a.useSensors)((0, a.useSensor)(a.MouseSensor, {}), (0, a.useSensor)(a.TouchSensor, {}), (0, 
-        a.useSensor)(eo, Bo));
+        var we = (0, t.useContext)(k.ScrollContainerContext);
+        var Ce = (0, o.useSensors)((0, o.useSensor)(o.MouseSensor, {}), (0, o.useSensor)(o.TouchSensor, {}), (0, 
+        o.useSensor)(fo, Bo));
         var xe = (0, t.useState)([]), Se = Io(xe, 2), ke = Se[0], Oe = Se[1];
         var Re = (0, t.useState)(-1), Ee = Io(Re, 2), Ie = Ee[0], Te = Ee[1];
         var je = (0, t.useRef)();
@@ -3536,15 +3537,18 @@
         var We = (0, t.useRef)();
         var Le = (0, t.useRef)(null);
         var He = (0, t.useRef)(null);
-        var Ke = T()(y);
-        var Be = [];
-        var Ve = [];
-        var Fe = [];
-        var Ue = [];
-        var Xe = (0, t.useCallback)((function() {
+        var Ke = R()(w);
+        var Be = (0, t.useRef)([]);
+        var Ve = (0, t.useRef)([]);
+        var Fe = (0, t.useRef)([]);
+        var Ue = (0, t.useRef)([]);
+        var Xe = Ve.current;
+        var Ye = Be.current;
+        var Ge = Ue.current;
+        var Je = (0, t.useCallback)((function() {
             var e;
-            var n = tn();
-            if (Mo(y)) {
+            var n = ln();
+            if (Mo(w)) {
                 return;
             }
             var t = He.current;
@@ -3561,25 +3565,25 @@
             ce(o === null || o === void 0 ? void 0 : o.clientWidth);
             Y(i);
             pe(u);
-        }), [ v, y ]);
+        }), [ v, w ]);
         (0, t.useEffect)((function() {
             var e = Me.current;
             var n = Ne.current;
             if (e && n) {
                 var t = Jt(Me.current);
-                if (!b()(X, t)) {
-                    Xe();
+                if (!p()(X, t)) {
+                    Je();
                 }
             }
-            if (Ke === "inline" && y === "inline") {
-                Xe();
+            if (Ke === "inline" && w === "inline") {
+                Je();
             }
             if (false) {}
-        }), [ X, y, Ke, e, Xe ]);
-        var Ye = (0, t.useCallback)((function(e) {
+        }), [ X, w, Ke, e, Je ]);
+        var Qe = (0, t.useCallback)((function(e) {
             var n = He.current;
             A === null || A === void 0 ? void 0 : A(e);
-            if ((No(y) || $o(y)) && n) {
+            if ((No(w) || $o(w)) && n) {
                 oe(-n.scrollLeft);
             }
             if (ze.current && We.current !== "dockedScrollBar" && n) {
@@ -3588,8 +3592,8 @@
             } else {
                 We.current = undefined;
             }
-        }), [ y, A ]);
-        var Ge = function e() {
+        }), [ w, A ]);
+        var Ze = function e() {
             var n = He.current;
             if (We.current !== "container" && n && ze.current) {
                 We.current = "dockedScrollBar";
@@ -3598,23 +3602,23 @@
                 We.current = undefined;
             }
         };
-        var Je = C()(Xe, 0);
-        var Ze = C()(Xe, 50);
-        O()(He, Ze);
+        var en = g()(Je, 0);
+        var nn = g()(Je, 50);
+        I()(He, nn);
         (0, t.useEffect)((function() {
             // Using the return value of useCallback to recreate componentWillUnmount
             return function() {
-                Je.cancel();
-                Ze.cancel();
+                en.cancel();
+                nn.cancel();
             };
         }));
-        var en = function e(n) {
+        var rn = function e(n) {
             return function(e) {
                 Me.current = e;
                 W(n.props.elementRef, e);
             };
         };
-        var nn = function e(n) {
+        var on = function e(n) {
             if (n) {
                 // On mount, focus the applicable docked head cell if a primary head cell was focused.
                 if ($e.current) {
@@ -3630,7 +3634,7 @@
             }
             Ne.current = n;
         };
-        var rn = function e(n) {
+        var an = function e(n) {
             var t = He.current;
             if (!Ne.current || !t || n.key !== "Tab") {
                 return;
@@ -3641,48 +3645,49 @@
                 t.scrollLeft += r;
             }
         };
-        var on = function e(n, t) {
+        var un = function e(n, t) {
             var r, o;
-            var i = t.index, a = t.columnId;
-            var l = Qe();
-            if (i === undefined) {
+            var i = t.columnId, a = t.index, l = t.id;
+            var s = tn();
+            if (a === undefined) {
                 return;
             }
-            var u = N === "none" ? 1 : 2;
-            var s = (r = He.current) === null || r === void 0 ? void 0 : r.querySelectorAll("thead th:nth-child(".concat(i + u, "), tbody td:nth-child(").concat(i + u, ")"));
-            var d = l.createElement("div");
+            var c = N === "none" ? 1 : 2;
+            var d = (r = He.current) === null || r === void 0 ? void 0 : r.querySelectorAll("thead th:nth-child(".concat(a + c, "), tbody td:nth-child(").concat(a + c, ")"));
+            var f = s.createElement("div");
             // TODO: find a styled-components compliant way to do this
-                        d.style["float"] = "left";
-            d.style.position = "fixed";
-            d.style.top = "-100";
-            d.style.left = "0";
-            d.style.maxHeight = "10px";
-            d.style.overflow = "hidden";
-            c()(s, (function(e) {
+                        f.style["float"] = "left";
+            f.style.position = "fixed";
+            f.style.top = "-100";
+            f.style.left = "0";
+            f.style.maxHeight = "10px";
+            f.style.overflow = "hidden";
+            u()(d, (function(e) {
                 var n = e.cloneNode(true);
  // TS: this seems safe to assume?
                                 n.style.display = "block";
                 n.style.width = "auto";
-                d.appendChild(n);
+                f.appendChild(n);
             }));
-            l.body.appendChild(d);
-            I === null || I === void 0 ? void 0 : I(n, {
-                index: i,
-                columnId: a,
-                width: d.clientWidth + 1
+            s.body.appendChild(f);
+            E === null || E === void 0 ? void 0 : E(n, {
+                columnId: i,
+                id: l,
+                index: a,
+                width: f.clientWidth + 1
             });
-            (o = d.parentNode) === null || o === void 0 ? void 0 : o.removeChild(d);
+            (o = f.parentNode) === null || o === void 0 ? void 0 : o.removeChild(f);
         };
-        var an = (0, t.useCallback)((function(e) {
+        var sn = (0, t.useCallback)((function(e) {
             var n = e.active;
             var t = n.id;
-            je.current = Ue.indexOf(t);
+            je.current = Ge.indexOf(t);
             _e(t);
-        }), [ Ue ]);
-        var ln = (0, t.useCallback)((function(e) {
+        }), [ Ge ]);
+        var cn = (0, t.useCallback)((function(e) {
             if (e.over) {
                 var n = e.over.id;
-                var t = Ue.indexOf(n);
+                var t = Ge.indexOf(n);
                 var r = t;
                 if (je.current !== undefined && t > je.current) {
                     r = t + 1;
@@ -3691,22 +3696,22 @@
             } else {
                 Te(-1);
             }
-        }), [ Ue ]);
+        }), [ Ge ]);
         // these are useMemo rather than useCallback so that ESLint can correctly analyze the dependencies
         // see https://github.com/facebook/react/issues/19240#issuecomment-652945246
-                var un = (0, t.useMemo)((function() {
-            return C()(ln, 100);
-        }), [ ln ]);
+                var dn = (0, t.useMemo)((function() {
+            return g()(cn, 100);
+        }), [ cn ]);
         (0, t.useEffect)((function() {
             return function() {
-                un.cancel();
+                dn.cancel();
             };
-        }), [ un ]);
-        var sn = (0, t.useCallback)((function(e) {
+        }), [ dn ]);
+        var fn = (0, t.useCallback)((function(e) {
             var n = e.active, t = e.over;
             if (t && n.id !== t.id) {
-                var r = Ue.indexOf(n.id);
-                var o = Ue.indexOf(t === null || t === void 0 ? void 0 : t.id);
+                var r = Ge.indexOf(n.id);
+                var o = Ge.indexOf(t === null || t === void 0 ? void 0 : t.id);
                 x === null || x === void 0 ? void 0 : x({
                     fromIndex: r,
                     toIndex: o
@@ -3716,64 +3721,68 @@
             Te(-1);
             De.current = undefined;
             je.current = undefined;
-        }), [ Ue, x ]);
-        var cn = (0, t.useCallback)((function(e) {
+        }), [ Ge, x ]);
+        var vn = (0, t.useCallback)((function(e) {
             var n = e.active, t = e.over;
             ge.current = true;
             if (t && n.id !== t.id) {
-                var r = Ve.indexOf(n.id);
-                var o = Ve.indexOf(t === null || t === void 0 ? void 0 : t.id);
-                k === null || k === void 0 ? void 0 : k({
+                var r = Xe.indexOf(n.id);
+                var o = Xe.indexOf(t === null || t === void 0 ? void 0 : t.id);
+                O === null || O === void 0 ? void 0 : O({
                     fromIndex: r,
                     toIndex: o
                 });
             }
-        }), [ Ve, k ]);
-        var dn = (0, t.useCallback)((function() {
+        }), [ Xe, O ]);
+        var pn = (0, t.useCallback)((function() {
             ge.current = true;
         }), []);
-        var fn = (0, t.useRef)({});
-        var vn = function e(n) {
-            var r = t.Children.toArray(n.props.children).filter(t.isValidElement).map((function(e, n) {
-                var r = e;
-                var o = r.key || (0, R.createDOMID)("col-");
-                o = String(o);
+        var mn = (0, t.useRef)({});
+        var bn = function e(n) {
+            var r = [];
+            var o = [];
+            var i = t.Children.toArray(n.props.children).filter(t.isValidElement).map((function(e, n) {
+                var i = e;
+                var a = i.key || (0, D.createDOMID)("col-");
+                a = String(a);
                 // `col-` prefix is necessary to distinguish row or column reordering.
                 // Append the `col-` prefix if is missing from dragId
-                                if (!o.startsWith("col-")) {
-                    o = "col-".concat(o);
+                                if (!a.startsWith("col-")) {
+                    a = "col-".concat(a);
                 }
-                Fe.push(r);
-                Ue.push(o);
+                r.push(i);
+                o.push(a);
                 
-                return (0, t.cloneElement)(r, {
+                return (0, t.cloneElement)(i, {
                     index: n,
-                    dragId: o,
+                    dragId: a,
                     elementRef: function e(n) {
-                        fn.current[o] = n;
-                        W(r.props.elementRef, n);
+                        mn.current[a] = n;
+                        W(i.props.elementRef, n);
                     }
                 });
             }));
-            var a = o === null || o === void 0 ? void 0 : o.filter(t.isValidElement);
-            var l =  (0, t.cloneElement)(n, {
+            Fe.current = r;
+            Ge = o;
+            var a = l === null || l === void 0 ? void 0 : l.filter(t.isValidElement);
+            var u =  (0, t.cloneElement)(n, {
                 actions: a,
-                actionsColumnWidth: i,
+                actionsColumnWidth: s,
                 hasInfoColumn: N !== "none",
-                hasDragColumn: !!k,
-                onAutosizeColumn: on,
+                hasDragColumn: !!O,
+                onAutosizeColumn: un,
                 onRequestMoveColumn: x,
-                onRequestResizeColumn: I,
+                onRequestResizeColumn: E,
                 onRequestToggleAllRows: q,
-                elementRef: en(n),
+                elementRef: rn(n),
                 rowSelection: H
-            }, r);
-            return l;
+            }, i);
+            return u;
         };
-        var pn = (0, t.useMemo)((function() {
+        var hn = (0, t.useMemo)((function() {
             var e, n;
             if (Ie === -1 || !Me.current || !He.current) return null;
-            var t = !!k;
+            var t = !!O;
             var o = N !== "none";
             var i = Array.from((e = (n = Me.current.firstElementChild) === null || n === void 0 ? void 0 : n.children) !== null && e !== void 0 ? e : []).slice(o ? 1 : 0).slice(t ? 1 : 0).slice(q ? 1 : 0);
             var a;
@@ -3793,59 +3802,63 @@
                 $height: He.current.clientHeight,
                 $left: a
             });
-        }), [ Ie, k, N, q ]);
-        var mn = function e(n) {
-            var r = (o === null || o === void 0 ? void 0 : o.filter(t.isValidElement).length) > 0;
-            var a = false;
+        }), [ Ie, O, N, q ]);
+        var yn = function e(n) {
+            var r = (l === null || l === void 0 ? void 0 : l.filter(t.isValidElement).length) > 0;
+            var o = false;
+            var i = [];
+            var a = [];
             t.Children.toArray(n === null || n === void 0 ? void 0 : n.props.children).filter(t.isValidElement).forEach((function(e, n) {
-                var r, o;
-                if (((r = e.props) === null || r === void 0 ? void 0 : r.actionPrimary) || ((o = e.props) === null || o === void 0 ? void 0 : o.actionsSecondary)) {
-                    a = true;
+                var r, l;
+                if (((r = e.props) === null || r === void 0 ? void 0 : r.actionPrimary) || ((l = e.props) === null || l === void 0 ? void 0 : l.actionsSecondary)) {
+                    o = true;
                 }
-                var i = e.key || (0, R.createDOMID)("row-");
-                i = String(i);
+                var u = e.key || (0, D.createDOMID)("row-");
+                u = String(u);
                 // `row-` prefix is necessary to distinguish row or column reordering.
                 // Append the `row-` prefix if is missing from dragId
-                                if (!i.startsWith("row-")) {
-                    i = "row-".concat(i);
+                                if (!u.startsWith("row-")) {
+                    u = "row-".concat(u);
                 }
-                Be.push( (0, t.cloneElement)(e, {
+                i.push( (0, t.cloneElement)(e, {
                     index: n,
-                    dragId: i
+                    dragId: u
                 }));
-                Ve.push(i);
+                a.push(u);
             }));
-            var l = r || a || !!i;
+            var u = r || o || !!s;
+            Ye = i;
+            Xe = a;
             
             return (0, t.cloneElement)(n, {
-                actions: l,
+                actions: u,
                 movableColumns: !!x,
-                onRequestMoveRow: k,
+                onRequestMoveRow: O,
                 primaryColumnIndex: z,
                 rowExpansion: N,
                 stripeRows: K
-            }, Be);
+            }, Ye);
         };
-        var bn = function e() {
+        var gn = function e() {
             var n = He.current;
-            var t = tn();
-            if (!$o(y) || !Le.current || !Me.current || !n) {
+            var t = ln();
+            if (!$o(w) || !Le.current || !Me.current || !n) {
                 return false;
             }
             var r = Wo(n).top;
             return t.pageYOffset >= r - (v || 0);
         };
-        var hn = function e() {
-            var n = tn();
+        var wn = function e() {
+            var n = ln();
             var t = He.current;
-            if (!p || !Le.current || !t) {
+            if (!m || !Le.current || !t) {
                 return false;
             }
             var r = Co(t);
             return r.bottom > n.innerHeight && r.top < n.innerHeight;
         };
-        var yn = function e(n, o) {
-            if (bn()) {
+        var Cn = function e(n, o) {
+            if (gn()) {
                 // FIXME: handle inline
                 // Save the current head focus state so that it can be applied to the docked version
                 // after the `HeadTable` mounts.
@@ -3855,7 +3868,7 @@
                 }
                 var i =  (0, t.cloneElement)(n);
                 
-                return r().createElement(fo, {
+                return r().createElement(qr, {
                     headType: "docked",
                     tHead: i,
                     cellWidths: X,
@@ -3865,53 +3878,53 @@
                     width: he,
                     tableStyle: B,
                     isFixedColumn: o,
-                    onKeyUp: rn,
-                    elementRef: nn,
-                    hasDragColumn: !!k,
+                    onKeyUp: an,
+                    elementRef: on,
+                    hasDragColumn: !!O,
                     hasRowExpansion: N !== "none",
                     hasRowSelection: !!q
                 });
             }
             return false;
         };
-        var gn = (0, t.useMemo)((function() {
+        var xn = (0, t.useMemo)((function() {
             var e, n, t;
             if (!ze.current || !Me.current || !Le.current) {
                 return 0;
             }
-            var r = tn();
+            var r = ln();
             var o = (e = Co(Le.current).top) !== null && e !== void 0 ? e : 0;
             var i = (n = (t = Me.current) === null || t === void 0 ? void 0 : t.offsetHeight) !== null && n !== void 0 ? n : 0;
             var a = r.innerHeight - o - i;
             return Math.min(a - ze.current.offsetHeight, 0);
         }), []);
-        var wn = (0, t.useMemo)((function() {
+        var Sn = (0, t.useMemo)((function() {
             return {
                 width: he,
-                marginBottom: gn
+                marginBottom: xn
             };
-        }), [ he, gn ]);
-        var Cn = (0, t.useMemo)((function() {
+        }), [ he, xn ]);
+        var kn = (0, t.useMemo)((function() {
             return {
                 width: se
             };
         }), [ se ]);
-        var xn = function e() {
-            if (!hn()) {
+        var On = function e() {
+            if (!wn()) {
                 return false;
             }
             
             return r().createElement(te, {
-                style: wn,
-                onScroll: Ge,
+                style: Sn,
+                onScroll: Ze,
                 "data-test": "docked-scroll-bar",
                 ref: ze
             },  r().createElement(re, {
-                style: Cn,
+                style: kn,
                 "data-test": "docked-scroll-content"
             }));
         };
-        var Sn = function e() {
+        var Rn = function e() {
             var n = Me.current;
             var t = He.current;
             /**
@@ -3928,57 +3941,57 @@
             }
             return null;
         };
-        var kn;
-        var On;
-        var Rn;
-        var En = !!I;
-        t.Children.toArray(s).forEach((function(e) {
+        var En;
+        var In;
+        var Tn;
+        var jn = !!E;
+        t.Children.toArray(d).forEach((function(e) {
             var n = e.type.splunkUiType;
             if (n === "Table.Head") {
-                kn = vn(e);
-                if (!En) {
+                En = bn(e);
+                if (!jn) {
                     // if all the HeadCells are fixed width, then the table is fixed.
-                    En = !t.Children.toArray(e.props.children).filter(t.isValidElement).some((function(e) {
-                        return !f()(e.props, "width");
+                    jn = !t.Children.toArray(e.props.children).filter(t.isValidElement).some((function(e) {
+                        return !c()(e.props, "width");
                     }));
                 }
             } else if (n === "Table.Body") {
-                On = mn(e);
+                In = yn(e);
             } else if (n === "Table.Caption") {
                 // the html spec mandates that a caption must be the first table child.
                 // catch the caption here so that it can be placed first later. note: a
                 // caption can be placed on the bottom side of a table by adjusting the
                 // caption's side prop.
-                Rn = e;
+                Tn = e;
             }
         }));
-        xo(kn, "A Table.Head is required.");
-        var In = yn(kn, En);
+        xo(En, "A Table.Head is required.");
+        var Dn = Cn(En, jn);
         // When a `headTable` is used, suppress focus interactions in the primary `Head`. Focus
         // interactions will be handled by the overlaid `headTable` instead.
-                var Tn = t.Children.toArray(kn.props.children).filter(t.isValidElement).map((function(e) {
+                var qn = t.Children.toArray(En.props.children).filter(t.isValidElement).map((function(e) {
             
             // TS: onClick is different for regular/dropdown head cells, that's ok
             return (0, t.cloneElement)(e, {
-                visible: !In
+                visible: !Dn
             });
         }));
-        kn =  (0, t.cloneElement)(kn, {}, Tn);
-        var jn = we || tn();
-        var Dn = No(y) ? He.current : jn;
+        En =  (0, t.cloneElement)(En, {}, qn);
+        var An = we || ln();
+        var Pn = No(w) ? He.current : An;
         if (M) {
-            En = false;
+            jn = false;
         }
-        var qn = Sn();
-        var An = (0, t.useMemo)((function() {
+        var _n = Rn();
+        var zn = (0, t.useMemo)((function() {
             return {
-                headType: y,
+                headType: w,
                 resizableFillLayout: M,
-                tableContainerWidthWithoutBorders: qn
+                tableContainerWidthWithoutBorders: _n
             };
-        }), [ y, M, qn ]);
-        var Pn = (0, t.useMemo)((function() {
-            if (!k) {
+        }), [ w, M, _n ]);
+        var Mn = (0, t.useMemo)((function() {
+            if (!O) {
                 return {
                     onDragStart: function e() {
                         return undefined;
@@ -4000,10 +4013,10 @@
                     if (t === undefined) {
                         return undefined;
                     }
-                    var r = Ho(Ve, t);
-                    return typeof r === "number" ? (0, D.sprintf)((0, j._)("Picked up sortable row in position %(pos)d of %(total)d."), {
+                    var r = Ho(Xe, t);
+                    return typeof r === "number" ? (0, T.sprintf)((0, j._)("Picked up sortable row in position %(pos)d of %(total)d."), {
                         pos: r,
-                        total: Ve.length
+                        total: Xe.length
                     }) : undefined;
                 },
                 onDragOver: function e(n) {
@@ -4015,12 +4028,12 @@
                     if (!t.id || !(r === null || r === void 0 ? void 0 : r.id)) {
                         return undefined;
                     }
-                    var o = Ho(Ve, t.id);
-                    var i = Ho(Ve, r.id);
-                    return (0, D.sprintf)((0, j._)("Row moved from position %(from)d to position %(to)d of %(total)d."), {
+                    var o = Ho(Xe, t.id);
+                    var i = Ho(Xe, r.id);
+                    return (0, T.sprintf)((0, j._)("Row moved from position %(from)d to position %(to)d of %(total)d."), {
                         from: o,
                         to: i,
-                        total: Ve.length
+                        total: Xe.length
                     });
                 },
                 onDragEnd: function e(n) {
@@ -4028,10 +4041,10 @@
                     if (!(t === null || t === void 0 ? void 0 : t.id)) {
                         return undefined;
                     }
-                    var r = Ho(Ve, t.id);
-                    return typeof r === "number" ? (0, D.sprintf)((0, j._)("Row dropped at position %(pos)d of %(total)d."), {
+                    var r = Ho(Xe, t.id);
+                    return typeof r === "number" ? (0, T.sprintf)((0, j._)("Row dropped at position %(pos)d of %(total)d."), {
                         pos: r,
-                        total: Ve.length
+                        total: Xe.length
                     }) : undefined;
                 },
                 onDragCancel: function e(n) {
@@ -4039,14 +4052,14 @@
                     if (t === undefined) {
                         return undefined;
                     }
-                    var r = Ho(Ve, t);
-                    return typeof r === "number" ? (0, D.sprintf)((0, j._)("Row returned to its starting position of %(pos)d."), {
+                    var r = Ho(Xe, t);
+                    return typeof r === "number" ? (0, T.sprintf)((0, j._)("Row returned to its starting position of %(pos)d."), {
                         pos: r
                     }) : undefined;
                 }
             };
-        }), [ Ve, k ]);
-        var _n = (0, t.useMemo)((function() {
+        }), [ Xe, O ]);
+        var $n = (0, t.useMemo)((function() {
             if (!x) {
                 return {
                     onDragStart: function e() {
@@ -4069,10 +4082,10 @@
                     if (t === undefined) {
                         return undefined;
                     }
-                    var r = Ko(Ue, t);
-                    return typeof r === "number" ? (0, D.sprintf)((0, j._)("Picked up sortable column in position %(pos)d of %(total)d."), {
+                    var r = Ko(Ge, t);
+                    return typeof r === "number" ? (0, T.sprintf)((0, j._)("Picked up sortable column in position %(pos)d of %(total)d."), {
                         pos: r,
-                        total: Ue.length
+                        total: Ge.length
                     }) : undefined;
                 },
                 onDragOver: function e(n) {
@@ -4084,13 +4097,13 @@
                     if (!t.id || !(r === null || r === void 0 ? void 0 : r.id)) {
                         return undefined;
                     }
-                    var o = Ko(Ue, t.id);
-                    var i = Ko(Ue, r.id);
+                    var o = Ko(Ge, t.id);
+                    var i = Ko(Ge, r.id);
                     if (typeof o !== "number" || typeof i !== "number") return undefined;
-                    return (0, D.sprintf)((0, j._)("Column moved from position %(from)d to position %(to)d of %(total)d."), {
+                    return (0, T.sprintf)((0, j._)("Column moved from position %(from)d to position %(to)d of %(total)d."), {
                         from: o,
                         to: i,
-                        total: Ue.length
+                        total: Ge.length
                     });
                 },
                 onDragEnd: function e(n) {
@@ -4098,10 +4111,10 @@
                     if (!(t === null || t === void 0 ? void 0 : t.id)) {
                         return undefined;
                     }
-                    var r = Ko(Ue, t.id);
-                    return typeof r === "number" ? (0, D.sprintf)((0, j._)("Column dropped at position %(pos)d of %(total)d."), {
+                    var r = Ko(Ge, t.id);
+                    return typeof r === "number" ? (0, T.sprintf)((0, j._)("Column dropped at position %(pos)d of %(total)d."), {
                         pos: r,
-                        total: Ue.length
+                        total: Ge.length
                     }) : undefined;
                 },
                 onDragCancel: function e(n) {
@@ -4109,109 +4122,110 @@
                     if (t === undefined) {
                         return undefined;
                     }
-                    var r = Ko(Ue, t);
-                    return typeof r === "number" ? (0, D.sprintf)((0, j._)("Column returned to its starting position of %(pos)d."), {
+                    var r = Ko(Ge, t);
+                    return typeof r === "number" ? (0, T.sprintf)((0, j._)("Column returned to its starting position of %(pos)d."), {
                         pos: r
                     }) : undefined;
                 }
             };
-        }), [ Ue, x ]);
-        var zn = (0, t.useMemo)((function() {
+        }), [ Ge, x ]);
+        var Nn = (0, t.useMemo)((function() {
             return {
-                screenReaderInstructions: k ? Vo : Fo,
-                announcements: k ? Pn : _n
+                screenReaderInstructions: O ? Vo : Fo,
+                announcements: O ? Mn : $n
             };
-        }), [ Pn, _n, k ]);
-        var Mn = (0, t.useCallback)((function(e) {
+        }), [ Mn, $n, O ]);
+        var Wn = (0, t.useCallback)((function(e) {
             var n = e.active.id;
             if (n.startsWith("col-") && x) {
-                Oe([ u.restrictToHorizontalAxis ]);
-                an(e);
-            } else if (n.startsWith("row-") && k) {
-                Oe([ u.restrictToVerticalAxis ]);
+                Oe([ i.restrictToHorizontalAxis ]);
+                sn(e);
+            } else if (n.startsWith("row-") && O) {
+                Oe([ i.restrictToVerticalAxis ]);
             }
-        }), [ x, k, an ]);
-        var $n = (0, t.useCallback)((function(e) {
+        }), [ x, O, sn ]);
+        var Ln = (0, t.useCallback)((function(e) {
             Oe([]);
             var n = e.active.id;
             if (n.startsWith("col-") && x) {
-                sn(e);
-            } else if (n.startsWith("row-") && k) {
-                cn(e);
+                fn(e);
+            } else if (n.startsWith("row-") && O) {
+                vn(e);
             }
-        }), [ sn, cn, x, k ]);
-        var Nn = (0, t.useCallback)((function(e) {
+        }), [ fn, vn, x, O ]);
+        var Hn = (0, t.useCallback)((function(e) {
             var n = e.active.id;
             if (n.startsWith("col-") && x) {
-                un(e);
+                dn(e);
             }
-        }), [ un, x ]);
-        var Wn = (0, t.useCallback)((function(e) {
+        }), [ dn, x ]);
+        var Kn = (0, t.useCallback)((function(e) {
             Oe([]);
             var n = e.active.id;
-            if (n.startsWith("row-") && k) {
-                dn();
+            if (n.startsWith("row-") && O) {
+                pn();
             }
-        }), [ dn, k ]);
-        var Ln = (0, t.useMemo)((function() {
+        }), [ pn, O ]);
+        var Bn = (0, t.useMemo)((function() {
             return function(e) {
-                var n = (0, a.pointerWithin)(e);
+                var n = (0, o.pointerWithin)(e);
                 // Collision detection algorithms return an array of collisions
                                 if (n.length > 0) {
                     return n;
                 }
                 // If there are no collisions with the pointer, return rectangle intersections
-                                return (0, a.rectIntersection)(e);
+                                return (0, o.rectIntersection)(e);
             };
         }), []);
-        var Hn = Pe ? fn.current[Pe] : null;
-        var Kn = Hn ? Co(Hn).width : undefined;
-        var Bn = He.current ? Co(He.current).height : undefined;
+        var Vn = Pe ? mn.current[Pe] : null;
+        var Fn = Vn ? Co(Vn).width : undefined;
+        var Un = He.current ? Co(He.current).height : undefined;
         
         return r().createElement(Z, So({
             "data-test": "table",
-            ref: m,
+            ref: b,
             style: P,
             "data-test-row-selection": q ? H : undefined
-        }, g()(V, [].concat(ko(Object.keys(zo)), [ "style" ]))),  r().createElement(S(), {
-            target: tn(),
+        }, h()(V, [].concat(ko(Object.keys(zo)), [ "style" ]))),  r().createElement(S(), {
+            target: ln(),
             eventType: "scroll",
-            listener: Je,
+            listener: en,
             options: Xo
-        }),  r().createElement(Mt.Provider, {
-            value: An
-        }, In,  r().createElement(ee, {
-            onScroll: Ye,
+        }),  r().createElement(Lt.Provider, {
+            value: zn
+        }, Dn,  r().createElement(ee, {
+            "data-test": "scroll-container",
+            onScroll: Qe,
             ref: He,
-            style: w,
+            style: C,
             $dragging: !!Pe
-        },  r().createElement(E.ScrollContainerProvider, {
-            value: Dn
-        },  r().createElement(a.DndContext, {
-            accessibility: zn,
-            collisionDetection: Ln,
+        },  r().createElement(k.ScrollContainerProvider, {
+            value: Pn
+        },  r().createElement(o.DndContext, {
+            accessibility: Nn,
+            collisionDetection: Bn,
             modifiers: ke,
-            onDragCancel: Wn,
-            onDragEnd: $n,
-            onDragOver: Nn,
-            onDragStart: Mn,
+            onDragCancel: Kn,
+            onDragEnd: Ln,
+            onDragOver: Hn,
+            onDragStart: Wn,
             sensors: Ce
         },  r().createElement(ne, {
             ref: Le,
             "data-test": "main-table",
             style: B,
-            "data-fixed-column": En ? "true" : undefined,
+            "data-fixed-column": jn ? "true" : undefined,
             $resizableFillLayout: M
-        }, Rn, x ?  r().createElement(l.SortableContext, {
-            items: Ue,
-            strategy: l.horizontalListSortingStrategy
-        }, kn) : kn, k ?  r().createElement(l.SortableContext, {
-            items: Ve,
-            strategy: l.verticalListSortingStrategy
-        }, On) : On), Pe &&  r().createElement(a.DragOverlay, null,  r().createElement(ie, {
-            $width: Kn,
-            $height: Bn
-        })), Pe && pn))), xn()));
+        }, Tn, x ?  r().createElement(a.SortableContext, {
+            items: Ge,
+            strategy: a.horizontalListSortingStrategy
+        }, En) : En, O ?  r().createElement(a.SortableContext, {
+            items: Xe,
+            strategy: a.verticalListSortingStrategy
+        }, In) : In), Pe &&  r().createElement(o.DragOverlay, null,  r().createElement(ie, {
+            $width: Fn,
+            $height: Un
+        })), Pe && hn))), On()));
     }
     Go.propTypes = zo;
     Go.Body = Q;
@@ -4220,7 +4234,7 @@
     Go.Head = Zt;
     Go.HeadCell = _n;
     Go.HeadDropdownCell = Cr;
-    Go.Row = _t;
+    Go.Row = Nt;
     /* harmony default export */    const Jo = Go;
     // CONCATENATED MODULE: ./src/Table/index.ts
     module.exports = n;