@splunk/react-ui 5.0.0-beta.5 → 5.0.0-rc.2

package/ControlGroup.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(r, {
         ControlGroupContext: () => /* reexport */ p,
-        default: () => /* reexport */ ye
+        default: () => /* reexport */ ve
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -99,7 +99,8 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const g = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroupStyles.ts
-    var w = y()(b()).withConfig({
+    var w = "24px";
+    var S = y()(b()).withConfig({
         displayName: "ControlGroupStyles__StyledBox",
         componentId: "wjnyif-0"
     })([ "", " max-width:600px;margin-block-end:", ";&:last-child{margin-block-end:0;}", "" ], g.mixins.reset("flex"), g.variables.spacingLarge, (function(e) {
@@ -108,84 +109,88 @@
         f.css)([ "flex-direction:row;gap:", ";" ], g.variables.spacingMedium);
     }));
     // Aligns label to the top for case where labelPosition="left" and StyledControlsAndMessagingWrapper is taller than label.
-        var S = y().div.withConfig({
+        var O = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapper",
         componentId: "wjnyif-1"
     })([ "display:inline-flex;align-items:flex-start;gap:", ";flex-shrink:0;" ], g.variables.spacingXSmall);
-    // Vertically centers label & tooltip.
-        var O = y().div.withConfig({
-        displayName: "ControlGroupStyles__StyledLabelInnerWrapper",
-        componentId: "wjnyif-2"
-    })([ "display:inline-flex;gap:", ";align-items:center;", "" ], g.variables.spacingXSmall, (function(e) {
-        var r = e.$labelPosition;
-        return r === "left" && (0, f.css)([ "min-height:", ";" ], g.variables.inputHeight);
-    }));
     var I = y().label.withConfig({
         displayName: "ControlGroupStyles__StyledLabel",
-        componentId: "wjnyif-3"
-    })([ "", ";flex-shrink:2;word-wrap:break-word;", ";" ], g.mixins.typography("body", {
+        componentId: "wjnyif-2"
+    })([ "", ";word-wrap:break-word;", ";" ], g.mixins.typography("body", {
         color: "active"
     }), (function(e) {
         var r = e.$disabled;
         return r && (0, f.css)([ "color:", ";" ], g.variables.contentColorDisabled);
     }));
-    var C = y()(h()).withConfig({
+    // Vertically centers label & tooltip.
+        var C = y().div.withConfig({
+        displayName: "ControlGroupStyles__StyledLabelInnerWrapper",
+        componentId: "wjnyif-3"
+    })([ "display:inline-flex;gap:", ";align-items:center;:has(", ":not(:empty)){min-height:", ";}" ], g.variables.spacingXSmall, /* sc-sel */ I, (0, 
+    g.pickVariant)("$labelPosition", {
+        /* Ensures label is vertically centered with input */
+        left: g.variables.inputHeight,
+        /**
+   * Ensures inputs in ControlGroups next to each other are vertically aligned regardless of Tooltip presence.
+   * Checked by HorizontalLabelTopLayout story.
+   */
+        top: w
+    }));
+    var x = y()(h()).withConfig({
         displayName: "ControlGroupStyles__StyledTooltip",
         componentId: "wjnyif-4"
-    })([ "& button{", "}" ], (0, g.pick)({
-        prisma: (0, f.css)([ "position:relative;top:-2px;padding:0;svg{width:16px;height:16px;}" ])
-    }));
-    var x = y().div.withConfig({
+    })([ "flex-shrink:0;& button{min-width:", ";min-height:", ";width:", ";height:", ";}" ], w, w, w, w);
+    var j = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledControlsAndMessagingWrapper",
         componentId: "wjnyif-5"
     })([ "display:flex;flex-direction:column;gap:", ";min-width:0;", "" ], g.variables.spacingXSmall, (function(e) {
         var r = e.$controlsLayout;
         return r !== "none" && (0, f.css)([ "flex-grow:1;" ]);
     }));
-    var j = y()(b()).withConfig({
+    var E = y()(b()).withConfig({
         displayName: "ControlGroupStyles__StyledControlsWrapper",
         componentId: "wjnyif-6"
     })([ "gap:", ";", "" ], g.variables.spacingMedium, (0, g.pickVariant)("$controlsLayout", {
         fillJoin: (0, f.css)([ "gap:0;" ]),
         stack: (0, f.css)([ "flex-direction:column;" ])
     }));
-    var E = y().div.withConfig({
+    var P = y().div.withConfig({
         displayName: "ControlGroupStyles__StyledHelp",
         componentId: "wjnyif-7"
     })([ "", ";", ";", ";" ], g.mixins.reset("block"), g.mixins.typography("smallBody"), (function(e) {
         var r = e.$disabled;
         return r && (0, f.css)([ "color:", ";" ], g.variables.contentColorDisabled);
     }));
-    var P = y().span.withConfig({
+    var k = y().span.withConfig({
         displayName: "ControlGroupStyles__StyledAsterisk",
         componentId: "wjnyif-8"
     })([ "color:", ";margin-right:2px;" ], g.variables.contentColorNegative);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const k = require("@splunk/ui-utils/i18n");
+    const _ = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
-    const _ = require("@splunk/react-icons/ExclamationTriangle");
-    var q =  e.n(_);
+    const q = require("@splunk/react-icons/ExclamationTriangle");
+    var D =  e.n(q);
     // CONCATENATED MODULE: external "@splunk/themes/mixins"
-    const D = require("@splunk/themes/mixins");
+    const T = require("@splunk/themes/mixins");
     // CONCATENATED MODULE: ./src/ControlGroup/ErrorMessageBarStyles.ts
-    var T = y().div.withConfig({
+    var M = y().div.withConfig({
         displayName: "ErrorMessageBarStyles__StyledErrorMessageBarWrapper",
         componentId: "sc-1praezx-0"
-    })([ "display:flex;gap:", ";word-break:break-word;border-radius:", ";padding:", ";background-color:", ";" ], g.variables.spacingXSmall, g.variables.borderRadius, g.variables.spacingXSmall, g.variables.contentBackgroundColorNegativeWeak);
-    var M = y()(q()).withConfig({
+    })([ "display:flex;gap:", ";word-break:break-word;border-radius:", ";padding:", ";background-color:", ";" ], g.variables.spacingXSmall, g.variables.borderRadius, g.variables.spacingXSmall, g.variables.notificationColorNegativeWeak);
+    var L = y()(D()).withConfig({
         displayName: "ErrorMessageBarStyles__StyledIcon",
         componentId: "sc-1praezx-1"
     })([ "position:relative;fill:", ";" ], g.variables.interactiveColorAccentError);
-    var L = y().p.withConfig({
+    var N = y().p.withConfig({
         displayName: "ErrorMessageBarStyles__StyledErrorMessage",
         componentId: "sc-1praezx-2"
-    })([ "", ";", ";" ], g.mixins.reset("block"), (0, D.typography)("smallBody", {
+    })([ "", ";", ";" ], g.mixins.reset("block"), (0, T.typography)("smallBody", {
         color: "active"
     }));
     // CONCATENATED MODULE: ./src/ControlGroup/ErrorMessageBar.tsx
-    function N(e, r) {
+    function $(e, r) {
         if (null == e) return {};
-        var t, n, l = $(e, r);
+        var t, n, l = G(e, r);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
@@ -194,7 +199,7 @@
         }
         return l;
     }
-    function $(e, r) {
+    function G(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -205,30 +210,30 @@
         }
         return t;
     }
-    var B = (0, k._)("Error: ");
-    var G = {
+    var B = (0, _._)("Error: ");
+    var A = {
         children: o().node.isRequired
     };
-    function A(e) {
-        var r = e.children, t = N(e, [ "children" ]);
+    function W(e) {
+        var r = e.children, t = $(e, [ "children" ]);
         
-        return n().createElement(T, t,  n().createElement(M, {
+        return n().createElement(M, t,  n().createElement(L, {
             variant: "filled"
-        }),  n().createElement(a(), null, B),  n().createElement(L, null, r));
+        }),  n().createElement(a(), null, B),  n().createElement(N, null, r));
     }
-    A.propTypes = G;
-    /* harmony default export */    const W = A;
+    W.propTypes = A;
+    /* harmony default export */    const F = W;
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroup.tsx
-    function F(e) {
+    function X(e) {
         "@babel/helpers - typeof";
-        return F = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return X = "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;
-        }, F(e);
+        }, X(e);
     }
-    function X() {
-        return X = Object.assign ? Object.assign.bind() : function(e) {
+    function R() {
+        return R = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -236,11 +241,11 @@
                 }
             }
             return e;
-        }, X.apply(null, arguments);
+        }, R.apply(null, arguments);
     }
-    function R(e, r) {
+    function H(e, r) {
         if (null == e) return {};
-        var t, n, l = H(e, r);
+        var t, n, l = J(e, r);
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
@@ -249,7 +254,7 @@
         }
         return l;
     }
-    function H(e, r) {
+    function J(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -260,7 +265,7 @@
         }
         return t;
     }
-    function J(e, r) {
+    function z(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -270,60 +275,60 @@
         }
         return t;
     }
-    function z(e) {
+    function K(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? J(Object(t), !0).forEach((function(r) {
-                K(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : J(Object(t)).forEach((function(r) {
+            r % 2 ? z(Object(t), !0).forEach((function(r) {
+                V(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : z(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function K(e, r, t) {
-        return (r = V(r)) in e ? Object.defineProperty(e, r, {
+    function V(e, r, t) {
+        return (r = U(r)) in e ? Object.defineProperty(e, r, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[r] = t, e;
     }
-    function V(e) {
-        var r = U(e, "string");
-        return "symbol" == F(r) ? r : r + "";
+    function U(e) {
+        var r = Q(e, "string");
+        return "symbol" == X(r) ? r : r + "";
     }
-    function U(e, r) {
-        if ("object" != F(e) || !e) return e;
+    function Q(e, r) {
+        if ("object" != X(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var n = t.call(e, r || "default");
-            if ("object" != F(n)) return n;
+            if ("object" != X(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
     }
-    function Q(e, r) {
-        return te(e) || re(e, r) || Z(e, r) || Y();
+    function Y(e, r) {
+        return ne(e) || te(e, r) || ee(e, r) || Z();
     }
-    function Y() {
+    function Z() {
         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 Z(e, r) {
+    function ee(e, r) {
         if (e) {
-            if ("string" == typeof e) return ee(e, r);
+            if ("string" == typeof e) return re(e, r);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? ee(e, r) : 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) ? re(e, r) : void 0;
         }
     }
-    function ee(e, r) {
+    function re(e, r) {
         (null == r || r > e.length) && (r = e.length);
         for (var t = 0, n = Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function re(e, r) {
+    function te(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var n, l, o, i, a = [], s = !0, c = !1;
@@ -345,12 +350,12 @@
             return a;
         }
     }
-    function te(e) {
+    function ne(e) {
         if (Array.isArray(e)) return e;
     }
     // props ControlGroup passes to configure its children's props
     // props ControlGroup may access and/or override on children
-        var ne = {
+        var le = {
         children: o().node,
         controlsLayout: o().oneOf([ "fill", "fillJoin", "none", "stack" ]),
         elementRef: o().oneOfType([ o().func, o().object ]),
@@ -366,13 +371,13 @@
         tooltipDefaultPlacement: o().oneOf([ "above", "below", "left", "right" ])
     };
     // Style cloned onto child elements when fill behavior set.
-        var le = {
+        var oe = {
         flexGrow: 1
     };
-    function oe(e) {
+    function ie(e) {
         return e.type && e.type.propTypes && Object.prototype.hasOwnProperty.call(e.type.propTypes, "inputId");
     }
-    function ie(e, r) {
+    function ae(e, r) {
         var t = "".concat(e, "-").concat(r);
         var n = (0, u.createDOMID)(e);
         return {
@@ -380,16 +385,16 @@
             value: n
         };
     }
-    function ae(e) {
+    function se(e) {
         var r = {};
         var t = e.length;
         var n = 0;
         e.forEach((function(e, t) {
-            if (oe(e) && e.props.inputId == null) {
-                var l = ie("input-id", t), o = l.childKey, i = l.value;
+            if (ie(e) && e.props.inputId == null) {
+                var l = ae("input-id", t), o = l.childKey, i = l.value;
                 r[o] = i;
             } else if (e.props.id == null) {
-                var a = ie("id", t), s = a.childKey, c = a.value;
+                var a = ae("id", t), s = a.childKey, c = a.value;
                 r[s] = c;
             } else {
                 // child already has an inputId or id, so we don't need to make a childId for it
@@ -401,7 +406,7 @@
             allChildrenHaveId: n === t
         };
     }
-    function se(e, r, t) {
+    function ce(e, r, t) {
         var n = "".concat(e, "-").concat(r);
         var l = t[n];
         if (!l || !l.length) {
@@ -411,15 +416,15 @@
         }
         return l;
     }
-    function ce(e) {
+    function ue(e) {
         if (e.length === 0) {
             return undefined;
         }
-        var r = Q(e, 1), t = r[0];
+        var r = Y(e, 1), t = r[0];
         var n = e.find((function(e) {
             return e.type && e.type.componentType === "Text";
         }));
-        var l = oe(t);
+        var l = ie(t);
         var o = t.props, i = o.id, a = o.inputId;
  // see function doc block for details
                 if (e.length === 1 && (t === null || t === void 0 ? void 0 : t.props)) {
@@ -434,7 +439,7 @@
         return undefined;
     }
     // Configure the Children
-        function ue(e, r, n) {
+        function de(e, r, n) {
         var l = e.props, o = l.disabled, i = l.error, a = l.id, s = l.inputId, c = l.style;
         var u = n.childIds, d = n.controlsLayout, p = n.help, f = n.helpId, y = n.error, v = n.errorId, b = n.label, m = n.labelFor, h = n.labelId, g = n.numChildren, w = n.required, S = n.showErrorText;
         var O = {
@@ -480,13 +485,13 @@
         if (g === 1 && (d === "fillJoin" || d === "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.
-            O.style = c ? z(z({}, c), le) : le;
+            O.style = c ? K(K({}, c), oe) : oe;
         }
         if (!m && e) {
-            if (oe(e)) {
-                O.inputId = s || se("input-id", r, u);
+            if (ie(e)) {
+                O.inputId = s || ce("input-id", r, u);
             } else {
-                O.id = a || se("id", r, u);
+                O.id = a || ce("id", r, u);
             }
         }
         if (S && i === true) {
@@ -497,14 +502,14 @@
             childDisabled: o !== null && o !== void 0 ? o : false
         };
     }
-    function de(e, r) {
+    function pe(e, r) {
         var t = e.length;
         var n = 0;
-        var l = z({
+        var l = K({
             numChildren: t
         }, r);
         var o = e.map((function(e, r) {
-            var t = ue(e, r, l), o = t.child, i = t.childDisabled;
+            var t = de(e, r, l), o = t.child, i = t.childDisabled;
             if (i) {
                 n += 1;
             }
@@ -515,7 +520,7 @@
             controlGroupDisabled: n === t
         };
     }
-    var pe = 120;
+    var fe = 120;
     /**
  * `ControlGroup` places a label and optional help text around one or more controls. The `ControlGroup`
  * will automatically add aria attributes to associate the controls with the labels and help text to
@@ -533,8 +538,8 @@
  * If the linked child supports an `inputId` prop and it's set, its value is used for the label's `for`
  * 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 fe(e) {
-        var r = e.children, l = e.controlsLayout, o = l === void 0 ? "fill" : l, 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 ? pe : h, k = e.required, _ = k === void 0 ? false : k, q = e.tooltip, D = e.tooltipDefaultPlacement, T = R(e, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "tooltip", "tooltipDefaultPlacement" ]);
+ */    function ye(e) {
+        var r = e.children, l = e.controlsLayout, o = l === void 0 ? "fill" : l, 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, q = e.tooltip, D = e.tooltipDefaultPlacement, T = H(e, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "tooltip", "tooltipDefaultPlacement" ]);
         // @docs-props-type ControlGroupPropsBase
                 var M = (0, t.useState)((function() {
             return {
@@ -542,11 +547,11 @@
                 helpId: (0, u.createDOMID)("help"),
                 labelId: (0, u.createDOMID)("label")
             };
-        })), L = Q(M, 1), N = L[0], $ = N.errorId, B = N.helpId, G = N.labelId;
+        })), L = Y(M, 1), N = L[0], $ = N.errorId, G = N.helpId, B = N.labelId;
         /** Child ids need to be the same on each render because of SUI-2817 */        var A = (0, 
-        t.useState)({}), F = Q(A, 2), H = F[0], J = F[1];
-        var z = (0, t.useState)(false), K = Q(z, 2), V = K[0], U = K[1];
-        var Y = c()(n().Children.count(r));
+        t.useState)({}), W = Y(A, 2), X = W[0], J = W[1];
+        var z = (0, t.useState)(false), K = Y(z, 2), V = K[0], U = K[1];
+        var Q = c()(n().Children.count(r));
         var Z = (0, t.useCallback)((function(e) {
             J(e);
         }), []);
@@ -564,89 +569,89 @@
         }), [ m, g ]);
         (0, t.useEffect)((function() {
             // If it's not the first render and the number of child elements has changed, reset childIds
-            if (Y != null && n().Children.count(r) !== Y) {
+            if (Q != null && n().Children.count(r) !== Q) {
                 J({});
             }
             // 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(H).length === 0 && !v && !V) {
-                var e = ae(re), t = e.newChildIds, l = e.allChildrenHaveId;
+                        if (Object.keys(X).length === 0 && !v && !V) {
+                var e = se(re), t = e.newChildIds, l = e.allChildrenHaveId;
                 J(t);
                 U(l);
             }
-        }), [ V, H, r, v, Y, Z, ee, re ]);
+        }), [ V, X, r, v, Q, Z, ee, re ]);
         var te = (0, t.useMemo)((function() {
             return {
                 labelAttrs: {
                     text: y,
-                    id: G
+                    id: B
                 }
             };
-        }), [ y, G ]);
+        }), [ y, B ]);
         var ne = typeof s === "string";
         var le = ne && s !== "";
         var oe = Number.isFinite(g) ? "".concat(g, "px") : g;
         var ie = m === "left" ? {
             width: oe
         } : undefined;
-        var se = de(re, {
-            childIds: H,
+        var ae = pe(re, {
+            childIds: X,
             controlsLayout: o,
             help: d,
-            helpId: B,
+            helpId: G,
             error: s,
             errorId: $,
             label: y,
             labelFor: v,
-            labelId: G,
+            labelId: B,
             required: _,
             showErrorText: le
-        }), ue = se.childrenFormatted, fe = se.controlGroupDisabled;
+        }), ce = ae.childrenFormatted, de = ae.controlGroupDisabled;
         var ye = (0, t.useMemo)((function() {
-            return v || ce(ue);
-        }), [ ue, v ]);
-        var ve =  n().createElement(S, {
+            return v || ue(ce);
+        }), [ ce, v ]);
+        var ve =  n().createElement(O, {
             style: ie,
             $labelPosition: m
-        },  n().createElement(O, {
+        },  n().createElement(C, {
             $labelPosition: m
         },  n().createElement(I, {
             "data-test": "label",
-            $disabled: fe,
-            id: G,
+            $disabled: de,
+            id: B,
             htmlFor: ye
-        }, _ &&  n().createElement(P, {
+        }, _ &&  n().createElement(k, {
             "aria-hidden": "true"
-        }, "*"), y, !f && q &&  n().createElement(a(), null, q)), !f && q &&  n().createElement(C, {
+        }, "*"), y, !f && q &&  n().createElement(a(), null, q)), !f && q &&  n().createElement(x, {
             closeWhen: "notOnClick",
             content: q,
             defaultPlacement: D,
             "aria-hidden": "true"
         })));
         
-        return n().createElement(w, X({
+        return n().createElement(S, R({
             "data-test": "control-group",
             "data-test-required": _,
             $labelPosition: m,
             "aria-invalid": !!s || undefined
         }, T),  n().createElement(p.Provider, {
             value: te
-        }, f ?  n().createElement(a(), null, ve) : ve,  n().createElement(x, {
+        }, f ?  n().createElement(a(), null, ve) : ve,  n().createElement(j, {
             $controlsLayout: o
-        },  n().createElement(j, {
+        },  n().createElement(E, {
             $controlsLayout: o,
             "data-test": "controls",
             flex: o !== "none"
-        }, ue), le &&  n().createElement(W, {
+        }, ce), le &&  n().createElement(F, {
             "data-test": "error",
             id: $
-        }, s), d &&  n().createElement(E, {
+        }, s), d &&  n().createElement(P, {
             "data-test": "help",
-            $disabled: fe,
-            id: B
+            $disabled: de,
+            id: G
         }, d))));
     }
-    fe.propTypes = ne;
-    /* harmony default export */    const ye = fe;
+    ye.propTypes = le;
+    /* harmony default export */    const ve = ye;
     // CONCATENATED MODULE: ./src/ControlGroup/index.ts
     module.exports = r;
     /******/})();