@splunk/react-ui 5.7.1 → 5.9.0

package/ComboBox.js

@@ -128,8 +128,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/ComboBox/Option.tsx
-    function q() {
-        return q = Object.assign ? Object.assign.bind() : function(e) {
+    function E() {
+        return E = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -137,9 +137,9 @@
                 }
             }
             return e;
-        }, q.apply(null, arguments);
+        }, E.apply(null, arguments);
     }
-    function E(e, n) {
+    function q(e, n) {
         if (null == e) return {};
         var r, t, o = x(e, n);
         if (Object.getOwnPropertySymbols) {
@@ -182,7 +182,7 @@
     /**
  * An option within a `ComboBox`.
  */    function D(e) {
-        var n = e.active, o = e.description, a = e.descriptionPosition, i = a === void 0 ? "bottom" : a, l = e.disabled, u = e.elementRef, c = e.icon, s = e.label, f = e.matchRanges, p = e.onClick, v = e.truncate, b = e.value, m = E(e, [ "active", "description", "descriptionPosition", "disabled", "elementRef", "icon", "label", "matchRanges", "onClick", "truncate", "value" ]);
+        var n = e.active, o = e.description, a = e.descriptionPosition, i = a === void 0 ? "bottom" : a, l = e.disabled, u = e.elementRef, c = e.icon, s = e.label, f = e.matchRanges, p = e.onClick, v = e.truncate, b = e.value, m = q(e, [ "active", "description", "descriptionPosition", "disabled", "elementRef", "icon", "label", "matchRanges", "onClick", "truncate", "value" ]);
         // @docs-props-type OptionPropsBase
                 var y = (0, r.useCallback)((function(e) {
             if (!l) {
@@ -196,7 +196,7 @@
         }), [ u ]);
         var h = s === undefined ? b : s;
         
-        return t().createElement(d.Item, q({
+        return t().createElement(d.Item, E({
             active: n,
             "data-test": "option",
             "data-test-value": b,
@@ -403,7 +403,7 @@
  * `ComboBox` allows the user to select a predefined string or enter a new value. Unlike `Select`
  * and `Multiselect`, `Option` value must always be a string.
  */    function ne(e) {
-        var n = e.animateLoading, o = e.append, a = e.children, i = e.controlledFilter, l = e.defaultPlacement, u = l === void 0 ? "vertical" : l, s = e.defaultValue, f = e.describedBy, d = e.disabled, p = e.elementRef, y = e.error, h = e.footerMessage, S = e.inline, q = e.inputId, E = e.inputRef, x = e.isLoadingOptions, B = e.labelledBy, D = e.loadingMessage, I = e.menuStyle, L = I === void 0 ? Z : I, V = e.name, z = e.noOptionsMessage, F = e.onBlur, _ = e.onChange, N = e.onClose, W = e.onFocus, U = e.onKeyDown, X = e.onOpen, $ = e.onScroll, G = e.onScrollBottom, ne = e.onSelect, re = e.placeholder, te = re === void 0 ? ee : re, oe = e.prepend, ae = e.value, ie = e.virtualization, le = Y(e, [ "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onBlur", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "onScroll", "onScrollBottom", "onSelect", "placeholder", "prepend", "value", "virtualization" ]);
+        var n = e.animateLoading, o = e.append, a = e.children, i = e.controlledFilter, l = e.defaultPlacement, u = l === void 0 ? "vertical" : l, s = e.defaultValue, f = e.describedBy, d = e.disabled, p = e.elementRef, y = e.error, h = e.footerMessage, S = e.inline, E = e.inputId, q = e.inputRef, x = e.isLoadingOptions, B = e.labelledBy, D = e.loadingMessage, I = e.menuStyle, L = I === void 0 ? Z : I, V = e.name, z = e.noOptionsMessage, F = e.onBlur, _ = e.onChange, N = e.onClose, W = e.onFocus, U = e.onKeyDown, X = e.onOpen, $ = e.onScroll, G = e.onScrollBottom, ne = e.onSelect, re = e.placeholder, te = re === void 0 ? ee : re, oe = e.prepend, ae = e.value, ie = e.virtualization, le = Y(e, [ "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onBlur", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "onScroll", "onScrollBottom", "onSelect", "placeholder", "prepend", "value", "virtualization" ]);
         // @docs-props-type ComboBoxPropsBase
                 var ue = O()({
             componentName: "ComboBox",
@@ -415,7 +415,7 @@
         var ye = (0, r.useState)(false), ge = K(ye, 2), he = ge[0], Oe = ge[1];
         var Se = (0, r.useState)(null), ke = K(Se, 2), Ce = ke[0], we = ke[1];
         var Pe = (0, r.useState)(), je = K(Pe, 2), Re = je[0], Me = je[1];
-        var qe = (0, r.useState)(s || ""), Ee = K(qe, 2), xe = Ee[0], Be = Ee[1];
+        var Ee = (0, r.useState)(s || ""), qe = K(Ee, 2), xe = qe[0], Be = qe[1];
         var De = k()(fe);
         var Ae = (0, r.useRef)();
         var Ie = (0, r.useRef)(0);
@@ -450,8 +450,8 @@
         }), [ a, Fe, Re ]);
         var _e = (0, r.useCallback)((function(e) {
             we(e);
-            M(E, e);
-        }), [ E ]);
+            M(q, e);
+        }), [ q ]);
         var Ne = (0, r.useCallback)((function(e) {
             me(e);
             M(p, e);
@@ -544,29 +544,30 @@
                     // ignore non-Option items such as Headings and Dividers
                     return n;
                 }
-                var a = Ie.current === fe;
+                var a = n.props.label !== undefined ? n.props.label : n.props.value;
+                var l = n.props.matchRanges;
+                var c = !i && e && (o || t > 0) ? (0, C.keywordLocations)(a, u) || undefined : undefined;
+                var s = {
+                    onClick: Ye,
+                    matchRanges: l || c
+                };
+                if (n.props.disabled) {
+                    
+                    return (0, r.cloneElement)(n, s);
+                }
+                var f = Ie.current === fe;
                 Ie.current += 1;
-                var l = n.props.label !== undefined ? n.props.label : n.props.value;
-                var c = n.props.matchRanges;
-                var s = !i && e && (o || t > 0) ? (0, C.keywordLocations)(l, u) || undefined : undefined;
-                if (a) {
-                    if (!n.props.disabled) {
-                        Ae.current = n.props.value;
-                    }
+                if (f) {
+                    Ae.current = n.props.value;
                     
-                    return (0, r.cloneElement)(n, {
+                    return (0, r.cloneElement)(n, H(H({}, s), {}, {
                         elementRef: We,
                         id: He,
-                        onClick: Ye,
-                        matchRanges: c || s,
                         active: true
-                    });
+                    }));
                 }
                 
-                return (0, r.cloneElement)(n, {
-                    onClick: Ye,
-                    matchRanges: c || s
-                });
+                return (0, r.cloneElement)(n, s);
             }));
         }), [ fe, He, a, i, Ke, Fe, We, Ye, Re ]);
         var Ze = (0, r.useCallback)((function(e) {
@@ -577,6 +578,7 @@
                 switch (o) {
                   case "Enter":
                     {
+                        e.preventDefault();
                         if (t) {
                             Ye(e, {
                                 value: t
@@ -590,6 +592,9 @@
                     break;
 
                   case "ArrowDown":
+                    if (n <= 0) {
+                        break;
+                    }
                     de((function(e) {
                         return Math.min(e + 1, n - 1);
                     }));
@@ -666,7 +671,7 @@
             elementRef: Ne,
             error: y,
             inline: S,
-            inputId: q,
+            inputId: E,
             inputRef: _e,
             labelledBy: B,
             name: V,

package/ControlGroup.js

@@ -69,10 +69,10 @@
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
-    var l =  e.n(o);
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const i = require("@splunk/react-ui/ScreenReaderContent");
-    var a =  e.n(i);
+    const l = require("@splunk/react-ui/ScreenReaderContent");
+    var a =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
     const s = require("@splunk/react-ui/usePrevious");
     var c =  e.n(s);
@@ -110,7 +110,7 @@
     })([ "", ";word-wrap:break-word;" ], g.mixins.typography("body", {
         color: "active"
     }));
-    var I = y()(b()).withConfig({
+    var x = y()(b()).withConfig({
         displayName: "ControlGroupStyles__StyledBox",
         componentId: "wjnyif-2"
     })([ "", " max-width:600px;margin-block-end:", ";&:last-child{margin-block-end:0;}", " ", "" ], g.mixins.reset("flex"), g.variables.spacingLarge, (function(e) {
@@ -122,7 +122,7 @@
         return r && (0, f.css)([ "", "{color:", ";}", "{color:", ";}" ], /* sc-sel */ S, g.variables.contentColorDisabled, /* sc-sel */ O, g.variables.contentColorDisabled);
     }));
     // Aligns label to the top for case where labelPosition="left" and StyledControlsAndMessagingWrapper is taller than label.
-        var x = y().div.withConfig({
+        var I = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapper",
         componentId: "wjnyif-3"
     })([ "display:inline-flex;align-items:flex-start;gap:", ";flex-shrink:0;" ], g.variables.spacingXSmall);
@@ -154,7 +154,8 @@
     var P = y()(b()).withConfig({
         displayName: "ControlGroupStyles__StyledControlsWrapper",
         componentId: "wjnyif-7"
-    })([ "gap:", ";", "" ], g.variables.spacingMedium, (0, g.pickVariant)("$controlsLayout", {
+    })([ "position:relative;z-index:1;gap:", ";", "" ], g.variables.spacingMedium, (0, 
+    g.pickVariant)("$controlsLayout", {
         fillJoin: (0, f.css)([ "gap:0;" ]),
         stack: (0, f.css)([ "flex-direction:column;" ])
     }));
@@ -189,9 +190,9 @@
         if (null == e) return {};
         var t, n, o = G(e, r);
         if (Object.getOwnPropertySymbols) {
-            var l = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < l.length; n++) {
-                t = l[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
@@ -209,7 +210,7 @@
     }
     var A = (0, _._)("Error: ");
     var $ = {
-        children: l().node.isRequired
+        children: i().node.isRequired
     };
     function W(e) {
         var r = e.children, t = B(e, [ "children" ]);
@@ -241,18 +242,18 @@
             return e;
         }, X.apply(null, arguments);
     }
-    function H(e, r) {
+    function z(e, r) {
         if (null == e) return {};
-        var t, n, o = J(e, r);
+        var t, n, o = H(e, r);
         if (Object.getOwnPropertySymbols) {
-            var l = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < l.length; n++) {
-                t = l[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
-    function J(e, r) {
+    function H(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -263,7 +264,7 @@
         }
         return t;
     }
-    function V(e, r) {
+    function J(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -273,12 +274,12 @@
         }
         return t;
     }
-    function z(e) {
+    function V(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? V(Object(t), !0).forEach((function(r) {
+            r % 2 ? J(Object(t), !0).forEach((function(r) {
                 K(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : V(Object(t)).forEach((function(r) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : J(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
@@ -329,18 +330,18 @@
     function te(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
-            var n, o, l, i, a = [], s = !0, c = !1;
+            var n, o, i, l, a = [], s = !0, c = !1;
             try {
-                if (l = (t = t.call(e)).next, 0 === r) {
+                if (i = (t = t.call(e)).next, 0 === r) {
                     if (Object(t) !== t) return;
                     s = !1;
-                } else for (;!(s = (n = l.call(t)).done) && (a.push(n.value), a.length !== r); s = !0) {
+                } else for (;!(s = (n = i.call(t)).done) && (a.push(n.value), a.length !== r); s = !0) {
                 }
             } catch (e) {
                 c = !0, o = e;
             } finally {
                 try {
-                    if (!s && null != t["return"] && (i = t["return"](), Object(i) !== i)) return;
+                    if (!s && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
                 } finally {
                     if (c) throw o;
                 }
@@ -354,25 +355,25 @@
     // props ControlGroup passes to configure its children's props
     // props ControlGroup may access and/or override on children
         var oe = {
-        children: l().node,
-        controlsLayout: l().oneOf([ "fill", "fillJoin", "none", "stack" ]),
-        elementRef: l().oneOfType([ l().func, l().object ]),
-        error: l().oneOfType([ l().bool, l().string ]),
-        help: l().node,
-        hideLabel: l().bool,
-        label: l().string.isRequired,
-        labelFor: l().string,
-        labelPosition: l().oneOf([ "left", "top" ]),
-        labelWidth: l().oneOfType([ l().number, l().string ]),
-        required: l().bool,
-        tooltip: l().node,
-        tooltipDefaultPlacement: l().oneOf([ "above", "below", "left", "right" ])
+        children: i().node,
+        controlsLayout: i().oneOf([ "fill", "fillJoin", "none", "stack" ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        error: i().oneOfType([ i().bool, i().string ]),
+        help: i().node,
+        hideLabel: i().bool,
+        label: i().string.isRequired,
+        labelFor: i().string,
+        labelPosition: i().oneOf([ "left", "top" ]),
+        labelWidth: i().oneOfType([ i().number, i().string ]),
+        required: i().bool,
+        tooltip: i().node,
+        tooltipDefaultPlacement: i().oneOf([ "above", "below", "left", "right" ])
     };
     // Style cloned onto child elements when fill behavior set.
-        var le = {
+        var ie = {
         flexGrow: 1
     };
-    function ie(e) {
+    function le(e) {
         return e.type && e.type.propTypes && Object.prototype.hasOwnProperty.call(e.type.propTypes, "inputId");
     }
     function ae(e, r) {
@@ -388,9 +389,9 @@
         var t = e.length;
         var n = 0;
         e.forEach((function(e, t) {
-            if (ie(e) && e.props.inputId == null) {
-                var o = ae("input-id", t), l = o.childKey, i = o.value;
-                r[l] = i;
+            if (le(e) && e.props.inputId == null) {
+                var o = ae("input-id", t), i = o.childKey, l = o.value;
+                r[i] = l;
             } else if (e.props.id == null) {
                 var a = ae("id", t), s = a.childKey, c = a.value;
                 r[s] = c;
@@ -422,80 +423,80 @@
         var n = e.find((function(e) {
             return e.type && e.type.componentType === "Text";
         }));
-        var o = ie(t);
-        var l = t.props, i = l.id, a = l.inputId;
+        var o = le(t);
+        var i = t.props, l = i.id, a = i.inputId;
  // see function doc block for details
                 if (e.length === 1 && (t === null || t === void 0 ? void 0 : t.props)) {
-            return o ? a : i;
+            return o ? a : l;
         }
         if (n === null || n === void 0 ? void 0 : n.props) {
             return n.props.inputId;
         }
         if (t.props) {
-            return o ? a : i;
+            return o ? a : l;
         }
         return undefined;
     }
     // Configure the Children
         function de(e, r, o) {
-        var l = e.props, i = l.disabled, a = l.error, s = l.id, c = l.inputId, u = l.style, d = l.children;
-        var p = o.childIds, f = o.controlsLayout, y = o.help, v = o.helpId, b = o.error, m = o.errorId, h = o.label, g = o.labelFor, w = o.labelId, O = o.numChildren, S = o.required, I = o.showErrorText;
-        var x = {
+        var i = e.props, l = i.disabled, a = i.error, s = i.id, c = i.inputId, u = i.style, d = i.children;
+        var p = o.childIds, f = o.controlsLayout, y = o.help, v = o.helpId, b = o.error, m = o.errorId, h = o.label, g = o.labelFor, w = o.labelId, O = o.numChildren, S = o.required, x = o.showErrorText;
+        var I = {
             key: e.key || r,
             labelledBy: w
         };
         if (f === "fillJoin") {
             if (r > 0) {
-                x.prepend = true;
+                I.prepend = true;
             }
             if (r < O - 1) {
-                x.append = true;
+                I.append = true;
             }
-            if (x.prepend || x.append) {
-                x.inline = false;
+            if (I.prepend || I.append) {
+                I.inline = false;
             }
         }
         if (f === "fill" && O > 1) {
-            x.inline = true;
+            I.inline = true;
         }
         if (f === "stack") {
-            x.inline = false;
+            I.inline = false;
         }
         if (y && typeof b === "boolean") {
-            x.describedBy = v;
+            I.describedBy = v;
         } else if (y && typeof b === "string") {
-            x.describedBy = "".concat(v, " ").concat(m);
+            I.describedBy = "".concat(v, " ").concat(m);
         } else if (!y && typeof b === "string") {
-            x.describedBy = m;
+            I.describedBy = m;
         }
         if (S) {
-            x.required = true;
+            I.required = true;
         }
         // TODO: SUI-3402 refactor so that parent component doesn't have to know what it's child components are
                 if (e.type.componentType === "Multiselect") {
             var C = e;
             if (!C.props.compact) {
-                x.labelText = h;
+                I.labelText = h;
             }
         } else {
-            x.labelText = h;
+            I.labelText = h;
         }
         if (O === 1 && (f === "fillJoin" || f === "fill")) {
             // Some controls like Select do not grow by default, so flexGrow is applied
             // The spread operator is used as css styles are not nested, so there is no need for a deep copy.
-            x.style = u ? z(z({}, u), le) : le;
+            I.style = u ? V(V({}, u), ie) : ie;
         }
         if (!g && e) {
-            if (ie(e)) {
-                x.inputId = c || ce("input-id", r, p);
+            if (le(e)) {
+                I.inputId = c || ce("input-id", r, p);
             } else {
-                x.id = s || ce("id", r, p);
+                I.id = s || ce("id", r, p);
             }
         }
-        if (I && a === true) {
-            x["aria-errormessage"] = m;
+        if (x && a === true) {
+            I["aria-errormessage"] = m;
         }
-        var j = i !== null && i !== void 0 ? i : false;
+        var j = l !== null && l !== void 0 ? l : false;
         // RadioBar and RadioList need special handling in the case where the parent grouping component is not set to disabled
         // but all of the children are disabled.
                 var E = e.type.componentType === "RadioBar" || e.type.componentType === "RadioList";
@@ -507,25 +508,25 @@
             }));
         }
         return {
-            child:  (0, t.cloneElement)(e, x),
+            child:  (0, t.cloneElement)(e, I),
             childDisabled: j
         };
     }
     function pe(e, r) {
         var t = e.length;
         var n = 0;
-        var o = z({
+        var o = V({
             numChildren: t
         }, r);
-        var l = e.map((function(e, r) {
-            var t = de(e, r, o), l = t.child, i = t.childDisabled;
-            if (i === true) {
+        var i = e.map((function(e, r) {
+            var t = de(e, r, o), i = t.child, l = t.childDisabled;
+            if (l === true) {
                 n += 1;
             }
-            return l;
+            return i;
         }));
         return {
-            childrenFormatted: l,
+            childrenFormatted: i,
             controlGroupDisabled: n === t
         };
     }
@@ -548,7 +549,7 @@
  * attribute. If `inputId` is supported but not set a generated id is used instead. If `inputId` isn't
  * supported `id` is used. The `labelFor` prop may be used to override the `for` attribute.
  */    function ye(e) {
-        var r = e.children, o = e.controlsLayout, l = o === void 0 ? "fill" : o, i = e.error, s = i === void 0 ? false : i, d = e.help, f = e.hideLabel, y = e.label, v = e.labelFor, b = e.labelPosition, m = b === void 0 ? "top" : b, h = e.labelWidth, g = h === void 0 ? fe : h, w = e.required, _ = w === void 0 ? false : w, T = e.tooltip, q = e.tooltipDefaultPlacement, D = H(e, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "tooltip", "tooltipDefaultPlacement" ]);
+        var r = e.children, o = e.controlsLayout, i = o === void 0 ? "fill" : o, l = e.error, s = l === void 0 ? false : l, d = e.help, f = e.hideLabel, y = e.label, v = e.labelFor, b = e.labelPosition, m = b === void 0 ? "top" : b, h = e.labelWidth, g = h === void 0 ? fe : h, w = e.required, _ = w === void 0 ? false : w, T = e.tooltip, q = e.tooltipDefaultPlacement, D = z(e, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "tooltip", "tooltipDefaultPlacement" ]);
         // @docs-props-type ControlGroupPropsBase
                 var M = (0, t.useState)((function() {
             return {
@@ -558,11 +559,11 @@
             };
         })), L = Y(M, 1), N = L[0], B = N.errorId, G = N.helpId, A = N.labelId;
         /** Child ids need to be the same on each render because of SUI-2817 */        var $ = (0, 
-        t.useState)({}), W = Y($, 2), R = W[0], J = W[1];
-        var V = (0, t.useState)(false), z = Y(V, 2), K = z[0], U = z[1];
+        t.useState)({}), W = Y($, 2), R = W[0], H = W[1];
+        var J = (0, t.useState)(false), V = Y(J, 2), K = V[0], U = V[1];
         var Q = c()(n().Children.count(r));
         var Z = (0, t.useCallback)((function(e) {
-            J(e);
+            H(e);
         }), []);
         var ee = (0, t.useCallback)((function(e) {
             U(e);
@@ -579,12 +580,12 @@
         (0, t.useEffect)((function() {
             // If it's not the first render and the number of child elements has changed, reset childIds
             if (Q != null && n().Children.count(r) !== Q) {
-                J({});
+                H({});
             }
             // If childIds has already been populated, labelFor has a value, or if all children have ids then we don't need to make ids for the children.
                         if (Object.keys(R).length === 0 && !v && !K) {
                 var e = se(re), t = e.newChildIds, o = e.allChildrenHaveId;
-                J(t);
+                H(t);
                 U(o);
             }
         }), [ K, R, r, v, Q, Z, ee, re ]);
@@ -598,13 +599,13 @@
         }), [ y, A ]);
         var ne = typeof s === "string";
         var oe = ne && s !== "";
-        var le = Number.isFinite(g) ? "".concat(g, "px") : g;
-        var ie = m === "left" ? {
-            width: le
+        var ie = Number.isFinite(g) ? "".concat(g, "px") : g;
+        var le = m === "left" ? {
+            width: ie
         } : undefined;
         var ae = pe(re, {
             childIds: R,
-            controlsLayout: l,
+            controlsLayout: i,
             help: d,
             helpId: G,
             error: s,
@@ -618,8 +619,8 @@
         var ye = (0, t.useMemo)((function() {
             return v || ue(ce);
         }), [ ce, v ]);
-        var ve =  n().createElement(x, {
-            style: ie,
+        var ve =  n().createElement(I, {
+            style: le,
             $labelPosition: m
         },  n().createElement(C, {
             $labelPosition: m
@@ -636,7 +637,7 @@
             "aria-hidden": "true"
         })));
         
-        return n().createElement(I, X({
+        return n().createElement(x, X({
             "data-test": "control-group",
             "data-test-required": _,
             "data-test-children-disabled": de,
@@ -646,11 +647,11 @@
         }, D),  n().createElement(p.Provider, {
             value: te
         }, f ?  n().createElement(a(), null, ve) : ve,  n().createElement(E, {
-            $controlsLayout: l
+            $controlsLayout: i
         },  n().createElement(P, {
-            $controlsLayout: l,
+            $controlsLayout: i,
             "data-test": "controls",
-            flex: l !== "none"
+            flex: i !== "none"
         }, ce), oe &&  n().createElement(F, {
             "data-test": "error",
             id: B

package/DefinitionList.js

@@ -83,7 +83,7 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const d = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/DefinitionList/DefinitionListStyles.ts
-    var p = c().dt.withConfig({
+    var f = c().dt.withConfig({
         displayName: "DefinitionListStyles__StyledTerm",
         componentId: "sc-1pqfrgm-0"
     })([ "", "" ], (function(e) {
@@ -100,7 +100,7 @@
             }), d.variables.spacingLarge)
         });
     }));
-    var f = c().dd.withConfig({
+    var p = c().dd.withConfig({
         displayName: "DefinitionListStyles__StyledDescription",
         componentId: "sc-1pqfrgm-1"
     })([ "", "" ], (function(e) {
@@ -122,8 +122,8 @@
         componentId: "sc-1pqfrgm-2"
     })([ "", "" ], (0, d.pickVariant)("$layout", {
         fixed: (0, l.css)([ "", ";", ";" ], d.mixins.reset("block"), d.mixins.typography("body")),
-        auto: (0, l.css)([ "", ";grid-template-columns:[term] fit-content(", ") [description] fit-content(", ");column-gap:", ";row-gap:", ";" ], d.mixins.reset("grid"), d.variables.lineLength, d.variables.lineLength, d.variables.spacingXLarge, d.variables.spacingMedium),
-        stacked: (0, l.css)([ "", ";grid-template-columns:[definitionList] fit-content(", ");row-gap:", ";" ], d.mixins.reset("grid"), d.variables.lineLength, d.variables.spacingXSmall)
+        auto: (0, l.css)([ "", ";grid-template-columns:[term] fit-content(", ") [description] fit-content(", ");column-gap:", ";" ], d.mixins.reset("grid"), d.variables.lineLength, d.variables.lineLength, d.variables.spacingSmall),
+        stacked: (0, l.css)([ "", ";grid-template-columns:[definitionList] fit-content(", ");" ], d.mixins.reset("grid"), d.variables.lineLength)
     }));
     // CONCATENATED MODULE: ./src/DefinitionList/Description.tsx
     function m() {
@@ -170,7 +170,7 @@
         // @docs-props-type DescriptionPropsBase
                 var o = (0, t.useContext)(s), l = o.descriptionWidth, c = o.layout, d = o.termWidth;
         
-        return n().createElement(f, m({
+        return n().createElement(p, m({
             "data-test": "description",
             ref: i,
             $descriptionWidth: l,
@@ -225,7 +225,7 @@
         // @docs-props-type TermPropsBase
                 var o = (0, t.useContext)(s), l = o.layout, c = o.separatorCharacter, d = o.termWidth;
         
-        return n().createElement(p, w({
+        return n().createElement(f, w({
             "data-test": "term",
             ref: i,
             $layout: l,
@@ -279,7 +279,7 @@
     };
     var L = "120px";
     function R(e) {
-        var r = e.children, i = e.descriptionWidth, a = e.elementRef, o = e.layout, l = o === void 0 ? "fixed" : o, c = e.separatorCharacter, d = e.termWidth, p = d === void 0 ? L : d, f = W(e, [ "children", "descriptionWidth", "elementRef", "layout", "separatorCharacter", "termWidth" ]);
+        var r = e.children, i = e.descriptionWidth, a = e.elementRef, o = e.layout, l = o === void 0 ? "fixed" : o, c = e.separatorCharacter, d = e.termWidth, f = d === void 0 ? L : d, p = W(e, [ "children", "descriptionWidth", "elementRef", "layout", "separatorCharacter", "termWidth" ]);
         // @docs-props-type DefinitionListPropsBase
         /* eslint-disable-next-line prefer-rest-params */        var m = arguments[0];
         (0, t.useEffect)((function() {
@@ -292,7 +292,7 @@
             y = undefined;
             h = undefined;
         } else {
-            y = l !== "fixed" && p === L ? undefined : p;
+            y = l !== "fixed" && f === L ? undefined : f;
             h = i;
         }
         var g = (0, t.useMemo)((function() {
@@ -308,7 +308,7 @@
             "data-test": "definition-list",
             ref: a,
             $layout: l
-        }, f),  n().createElement(s.Provider, {
+        }, p),  n().createElement(s.Provider, {
             value: g
         }, r));
     }

package/Drawer.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Drawer';
+export * from './types/src/Drawer';