@splunk/react-ui 4.32.0 → 4.34.0

package/Color.js

@@ -94,10 +94,10 @@
     var g =  e.n(b);
     // CONCATENATED MODULE: external "lodash/memoize"
     const x = require("lodash/memoize");
-    var w =  e.n(x);
+    var S =  e.n(x);
     // CONCATENATED MODULE: external "tinycolor2"
-    const S = require("tinycolor2");
-    var k =  e.n(S);
+    const w = require("tinycolor2");
+    var k =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
     const C = require("@splunk/react-ui/Dropdown");
     var E =  e.n(C);
@@ -110,8 +110,8 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
     const q = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
-    const I = require("styled-components");
-    var j =  e.n(I);
+    const j = require("styled-components");
+    var I =  e.n(j);
     // CONCATENATED MODULE: external "@splunk/react-ui/Text"
     const T = require("@splunk/react-ui/Text");
     var R =  e.n(T);
@@ -129,64 +129,64 @@
         enterprise: P.variables.gray80,
         prisma: "rgba(0, 0, 0, 0.2)"
     });
-    var z = (0, I.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], H, H, H, H, H, H, (0, 
+    var z = (0, j.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], H, H, H, H, H, H, (0, 
     P.pick)({
         enterprise: "transparent",
         prisma: P.variables.white
     }));
-    var K = j()(D()).withConfig({
+    var K = I()(D()).withConfig({
         displayName: "SwatchStyles__StyledCheck",
         componentId: "sc-1wxunhq-0"
     })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
-    var F = j()($()).withConfig({
+    var F = I()($()).withConfig({
         displayName: "SwatchStyles__StyledClickable",
         componentId: "sc-1wxunhq-1"
-    })([ "display:block;flex:0 0 auto;border:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], (0, 
+    })([ "display:block;flex:0 0 auto;border:1px solid;border-color:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], (0, 
     P.pick)({
         enterprise: {
-            light: (0, I.css)([ "1px solid ", "" ], P.variables.gray60),
-            dark: P.variables.border
+            light: P.variables.gray60,
+            dark: P.variables.borderColor
         },
-        prisma: (0, I.css)([ "1px solid ", "" ], P.variables.interactiveColorBorder)
+        prisma: P.variables.interactiveColorBorder
     }), (0, P.pick)({
-        prisma: (0, I.css)([ "border-radius:2px;" ])
+        prisma: (0, j.css)([ "border-radius:2px;" ])
     }), (function(e) {
         var t = e.$value;
-        return t === null && (0, I.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
+        return t === null && (0, j.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
         P.pick)({
             enterprise: "#ed1e24",
             prisma: P.variables.accentColorNegative
         }), (0, P.pick)({
-            prisma: (0, I.css)([ "background-color:", ";" ], P.variables.white)
+            prisma: (0, j.css)([ "background-color:", ";" ], P.variables.white)
         }));
     }), (function(e) {
         var t = e.$value;
         return t && (t === "transparent" ? z : "background-color: ".concat(t));
     }), (function(e) {
         var t = e.$noBorder;
-        return t && (0, I.css)([ "border:none;" ]);
+        return t && (0, j.css)([ "border:none;" ]);
     }), P.variables.focusColor, P.variables.focusShadow, (0, P.pick)({
         enterprise: {
-            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
-            compact: (0, I.css)([ "width:24px;height:24px;" ])
+            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+            compact: (0, j.css)([ "width:24px;height:24px;" ])
         },
-        prisma: (0, I.css)([ "width:24px;height:24px;" ])
+        prisma: (0, j.css)([ "width:24px;height:24px;" ])
     }), (function(e) {
         var t = e.$prepend;
-        return t && (0, I.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+        return t && (0, j.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }), (function(e) {
         var t = e.$append;
-        return t && (0, I.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+        return t && (0, j.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
     }), (function(e) {
         var t = e.$hasError;
-        return t && (0, I.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
+        return t && (0, j.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
         P.pick)({
             enterprise: P.variables.errorColor,
             prisma: P.variables.accentColorNegative
         }));
     }), (function(e) {
         var t = e.$showSelected;
-        return t && (0, I.css)([ "display:flex;align-items:center;justify-content:center;" ]);
+        return t && (0, j.css)([ "display:flex;align-items:center;justify-content:center;" ]);
     }));
     // CONCATENATED MODULE: ./src/Color/Swatch.tsx
     function M() {
@@ -244,7 +244,7 @@
         /** @private */
         showSelected: o().bool
     };
-    var Q =  n().forwardRef((function(e, t) {
+    var X =  n().forwardRef((function(e, t) {
         var r = e.append, a = e.error, o = a === void 0 ? false : a, l = e.onClick, i = e.prepend, s = e.value, u = e.noBorder, c = e.showSelected, p = L(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
         var d = s === null || s === undefined ? (0, _._)("No color") : s;
  // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
@@ -274,47 +274,47 @@
             role: "presentation"
         }),  n().createElement(V(), null, d));
     }));
-    Q.propTypes = W;
-    /* harmony default export */    const X = Q;
+    X.propTypes = W;
+    /* harmony default export */    const G = X;
     // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-    var G = j().div.withConfig({
+    var J = I().div.withConfig({
         displayName: "ColorStyles__StyledColor",
         componentId: "jxrost-0"
     })([ "", ";flex-direction:row;" ], P.mixins.reset("flex"));
-    var J = j()(X).withConfig({
+    var Q = I()(G).withConfig({
         displayName: "ColorStyles__StyledInputSwatch",
         componentId: "jxrost-1"
-    })([ "", "" ], (0, P.pick)({
-        compact: (0, I.css)([ "width:28px;height:28px;" ])
+    })([ "", ";&:focus{z-index:1;}" ], (0, P.pick)({
+        compact: (0, j.css)([ "width:28px;height:28px;" ])
     }));
-    var Y = j().div.withConfig({
+    var Y = I().div.withConfig({
         displayName: "ColorStyles__StyledInput",
         componentId: "jxrost-2"
     })([ "", ";" ], (0, P.pick)({
-        enterprise: (0, I.css)([ "display:flex;width:100%;" ]),
-        prisma: (0, I.css)([ "position:relative;", "" ], (function(e) {
+        enterprise: (0, j.css)([ "display:flex;width:100%;" ]),
+        prisma: (0, j.css)([ "position:relative;", "" ], (function(e) {
             var t = e.$inDropdown;
-            return t ? (0, I.css)([ "width:80px;" ]) : (0, I.css)([ "flex:0 1 auto;min-width:0;" ]);
+            return t ? (0, j.css)([ "width:80px;" ]) : (0, j.css)([ "flex:0 1 auto;min-width:0;" ]);
         }))
     }));
-    var Z = j()(R()).withConfig({
+    var Z = I()(R()).withConfig({
         displayName: "ColorStyles__StyledInputText",
         componentId: "jxrost-3"
     })([ "", "" ], (function(e) {
         var t = e.$inDropdown;
-        return t && (0, I.css)([ "font-size:12px;" ]);
+        return t && (0, j.css)([ "font-size:12px;" ]);
     }));
-    var ee = j()(X).withConfig({
+    var ee = I()(G).withConfig({
         displayName: "ColorStyles__StyledToggleSwatch",
         componentId: "jxrost-4"
     })([ "", "" ], (0, P.pick)({
         prisma: {
-            comfortable: (0, I.css)([ "width:40px;height:40px;" ]),
-            compact: (0, I.css)([ "width:32px;height:32px;" ])
+            comfortable: (0, j.css)([ "width:40px;height:40px;" ]),
+            compact: (0, j.css)([ "width:32px;height:32px;" ])
         },
         enterprise: {
-            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
-            compact: (0, I.css)([ "width:28px;height:28px;" ])
+            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+            compact: (0, j.css)([ "width:28px;height:28px;" ])
         }
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
@@ -324,65 +324,68 @@
     const ne = require("@splunk/react-ui/Divider");
     var ae =  e.n(ne);
     // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-    var oe = j().div.withConfig({
+    var oe = I().div.withConfig({
         displayName: "PaletteStyles__StyledPalette",
         componentId: "qgv9v9-0"
     })([ "width:220px;padding:", ";" ], P.variables.spacingSmall);
-    var le = j().ul.withConfig({
+    var le = I().ul.withConfig({
         displayName: "PaletteStyles__StyledSwatches",
         componentId: "qgv9v9-1"
     })([ "", ";", "" ], P.mixins.reset("block"), (0, P.pick)({
-        enterprise: (0, I.css)([ "margin-bottom:", ";" ], P.variables.spacingQuarter)
+        enterprise: (0, j.css)([ "margin-bottom:", ";" ], P.variables.spacingXSmall)
     }));
-    var ie = j().li.withConfig({
+    var ie = I().li.withConfig({
         displayName: "PaletteStyles__StyledSwatch",
         componentId: "qgv9v9-2"
     })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], P.mixins.reset("inline-block"), (0, 
     P.pick)({
         enterprise: {
-            compact: (0, I.css)([ "&:nth-child(8n){margin-right:0;}" ])
+            compact: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
         },
-        prisma: (0, I.css)([ "&:nth-child(8n){margin-right:0;}" ])
+        prisma: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
     }));
-    var se = j().div.withConfig({
+    var se = I().div.withConfig({
         displayName: "PaletteStyles__StyledToolBar",
         componentId: "qgv9v9-3"
-    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";margin-bottom:", ";gap:4px;" ], P.variables.spacingSmall, P.variables.spacingHalf);
-    var ue = j()($()).withConfig({
+    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";", " gap:4px;" ], P.variables.spacingSmall, (0, 
+    P.pick)({
+        enterprise: (0, j.css)([ "margin-bottom:", ";" ], P.variables.spacingSmall)
+    }));
+    var ue = I()($()).withConfig({
         displayName: "PaletteStyles__StyledExpandButton",
         componentId: "qgv9v9-4"
     })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], P.variables.focusShadow, (function(e) {
         var t = e.$expanded;
-        return t && (0, I.css)([ "transform:rotate(180deg);" ]);
+        return t && (0, j.css)([ "transform:rotate(180deg);" ]);
     }));
-    var ce = j().div.withConfig({
+    var ce = I().div.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
         componentId: "qgv9v9-5"
     })([ "position:relative;" ]);
-    var pe = j().input.withConfig({
+    var pe = I().input.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPicker",
         componentId: "qgv9v9-6"
-    })([ "box-sizing:border-box;", "     border:", ";", ";outline:none;appearance:none;padding:1px 10px;", "     margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], (0, 
+    })([ "box-sizing:border-box;", " ", ";", ";outline:none;appearance:none;padding:1px 10px;", " margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], (0, 
     P.pick)({
         enterprise: {
-            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
-            compact: (0, I.css)([ "width:24px;height:24px;" ])
+            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+            compact: (0, j.css)([ "width:24px;height:24px;" ])
         },
-        prisma: (0, I.css)([ "width:24px;height:24px;" ])
+        prisma: (0, j.css)([ "width:24px;height:24px;" ])
     }), (0, P.pick)({
         enterprise: {
-            light: (0, I.css)([ "1px solid ", "" ], P.variables.gray60),
-            dark: P.variables.border
+            light: (0, j.css)([ "border:1px solid ", ";" ], P.variables.gray60),
+            dark: (0, j.css)([ "border:1px solid ", ";" ], P.variables.borderColor)
         },
-        prisma: "none"
+        prisma: (0, j.css)([ "border:none;" ])
     }), (0, P.pick)({
-        prisma: (0, I.css)([ "border-radius:2px;" ])
+        prisma: (0, j.css)([ "border-radius:2px;" ])
     }), (0, P.pick)({
         enterprise: {
-            comfortable: (0, I.css)([ "padding:1px 14px;" ])
+            comfortable: (0, j.css)([ "padding:1px 14px;" ])
         }
     }), P.variables.focusShadow);
-    var de = j()(D()).withConfig({
+    var de = I()(D()).withConfig({
         displayName: "PaletteStyles__StyledCheck",
         componentId: "qgv9v9-7"
     })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;" ]);
@@ -400,7 +403,7 @@
             
             return n().createElement(ie, {
                 key: r || "null"
-            },  n().createElement(X, {
+            },  n().createElement(G, {
                 value: r,
                 ref: s ? o : null,
                 onClick: l,
@@ -415,19 +418,19 @@
                 "data-test": "tool-bar"
             }, f &&  n().createElement(P.SplunkThemeProvider, {
                 density: "compact"
-            }, p && p()),  n().createElement(X, {
+            }, p && p()),  n().createElement(G, {
                 value: null,
                 ref: a === null ? o : null,
                 onClick: l,
                 noBorder: f && !v,
                 showSelected: a === null
-            }),  n().createElement(X, {
+            }),  n().createElement(G, {
                 value: "#ffffff",
                 ref: a === "#ffffff" ? o : null,
                 onClick: l,
                 noBorder: f && !v,
                 showSelected: a === "#ffffff"
-            }),  n().createElement(X, {
+            }),  n().createElement(G, {
                 value: "#000000",
                 ref: a === "#000000" ? o : null,
                 onClick: l,
@@ -444,15 +447,15 @@
             })));
         };
         var x = y.length === 8 ? 7 : 15;
-        var w = h()(y, 0, x);
-        var S = h()(y, x);
+        var S = h()(y, 0, x);
+        var w = h()(y, x);
         if (f) {
             
             return n().createElement(oe, null,  n().createElement("div", {
                 style: {
                     position: "relative"
                 }
-            },  n().createElement(le, null, w, t && S), t && b(),  n().createElement(ue, {
+            },  n().createElement(le, null, S, t && w), t && b(),  n().createElement(ue, {
                 ref: i,
                 $expanded: t,
                 onClick: s,
@@ -492,26 +495,26 @@
         return me.apply(this, arguments);
     }
     function ye(e) {
-        return we(e) || xe(e) || ge(e) || be();
+        return Se(e) || xe(e) || ge(e) || be();
     }
     function be() {
         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 ge(e, t) {
         if (!e) return;
-        if (typeof e === "string") return Se(e, t);
+        if (typeof e === "string") return we(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
         if (r === "Object" && e.constructor) r = e.constructor.name;
         if (r === "Map" || r === "Set") return Array.from(e);
-        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return Se(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return we(e, t);
     }
     function xe(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function we(e) {
-        if (Array.isArray(e)) return Se(e);
+    function Se(e) {
+        if (Array.isArray(e)) return we(e);
     }
-    function Se(e, t) {
+    function we(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var r = 0, n = new Array(t); r < t; r++) {
             n[r] = e[r];
@@ -584,7 +587,7 @@
         };
         return qe(e, t);
     }
-    function Ie(e) {
+    function je(e) {
         var t = Re();
         return function r() {
             var n = Be(e), a;
@@ -594,10 +597,10 @@
             } else {
                 a = n.apply(this, arguments);
             }
-            return je(this, a);
+            return Ie(this, a);
         };
     }
-    function je(e, t) {
+    function Ie(e, t) {
         if (t && (he(t) === "object" || typeof t === "function")) {
             return t;
         }
@@ -641,7 +644,7 @@
     }
     // The default palette in Prisma theme.
         var Ae = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
-    var De = w()((function(e) {
+    var De = S()((function(e) {
         var t = [];
         for (var r = 1; r <= e.length * 4; r += 1) {
             var n = e[(r - 1) % e.length];
@@ -697,7 +700,7 @@
  *     2. Otherwise the first color swatch receives focus.
  */    var Me =  function(e) {
         _e(r, e);
-        var t = Ie(r);
+        var t = je(r);
         Oe(r, null, [ {
             key: "hasNull",
             // @docs-props-type ColorPropsBase
@@ -989,11 +992,10 @@
                     required: c,
                     spellCheck: false,
                     value: p
-                }), !d &&  n().createElement(J, {
+                }), !d &&  n().createElement(Q, {
                     "data-test": "textbox-swatch",
                     onClick: this.handleButtonClick,
                     value: h,
-                    tabIndex: -1,
                     style: {
                         marginLeft: "1px"
                     }
@@ -1041,7 +1043,7 @@
                 var b = m.isPrisma;
                 var g = this.getValue();
                 var x = this.state.displayValue;
-                var w =  n().createElement(ee, me({
+                var S =  n().createElement(ee, me({
                     append: b && !c ? true : o,
                     "data-test": "color",
                     "data-test-value": x,
@@ -1057,7 +1059,7 @@
                 }, f()(y, [].concat(ye(p()(r.propTypes)), [ // TS: trick omit
                 "onChange" ]))));
                 
-                return n().createElement(G, null,  n().createElement(E(), {
+                return n().createElement(J, null,  n().createElement(E(), {
                     closeReasons: [ "clickAway", "escapeKey", "offScreen", "toggleClick" ],
                     onRequestClose: this.handleRequestClose,
                     onRequestOpen: this.handleRequestOpen,
@@ -1067,7 +1069,7 @@
                     },
                     retainFocus: true,
                     takeFocus: false,
-                    toggle: w
+                    toggle: S
                 }, this.renderPalette()), b && !c && this.renderInput({
                     textAppend: false,
                     textPrepend: true,

package/Concertina.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(t, {
         Panel: () => /* reexport */ Pe,
-        default: () => /* reexport */ Ve
+        default: () => /* reexport */ Le
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -100,7 +100,7 @@
     var C = m()(S()).withConfig({
         displayName: "HeadingStyles__StyledClickable",
         componentId: "sc-1h92oaj-0"
-    })([ "display:block;width:100%;cursor:pointer;position:relative;padding:6px ", ";line-height:", ";border-radius:0;color:", ";", " &:focus:not([disabled]){box-shadow:", ";}", "" ], w.variables.spacing, w.variables.lineHeight, w.variables.textColor, (0, 
+    })([ "display:block;width:100%;cursor:pointer;position:relative;padding:6px ", ";line-height:", ";border-radius:0;color:", ";", " &:focus:not([disabled]){box-shadow:", ";}", "" ], w.variables.spacingLarge, w.variables.lineHeight, w.variables.textColor, (0, 
     w.pickVariant)("$inner", {
         true: (0, g.css)([ "*:not(:first-child) > &&{border-top:2px solid ", ";}*:not(:last-child) > &&{border-bottom:2px solid ", ";}" ], w.variables.backgroundColor, w.variables.backgroundColor),
         false: (0, g.css)([ "& + &&{border-top:2px solid ", ";}" ], w.variables.backgroundColor)
@@ -323,10 +323,10 @@
     /* harmony default export */    const $ = N;
     // CONCATENATED MODULE: external "lodash/throttle"
     const U = require("lodash/throttle");
-    var V =  e.n(U);
+    var L =  e.n(U);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const L = require("@splunk/react-ui/Box");
-    var F =  e.n(L);
+    const V = require("@splunk/react-ui/Box");
+    var F =  e.n(V);
     // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
     const G = require("@splunk/react-ui/Scroll");
     var J =  e.n(G);
@@ -573,7 +573,7 @@
                 r.lastHeight = i;
                 (n = (o = r.context).onChange) === null || n === void 0 ? void 0 : n.call(o, e, a);
             }));
-            Se(ge(r), "handleResize", V()(r.measureHeight, 300));
+            Se(ge(r), "handleResize", L()(r.measureHeight, 300));
             Se(ge(r), "handleMount", (function(e) {
                 r.setState({
                     containerEl: e
@@ -1004,7 +1004,7 @@
     De(Ue, "propTypes", Ne);
     De(Ue, "defaultProps", $e);
     De(Ue, "Panel", Pe);
-    /* harmony default export */    const Ve = Ue;
+    /* harmony default export */    const Le = Ue;
     // CONCATENATED MODULE: ./src/Concertina/index.ts
     module.exports = t;
     /******/})();

package/ControlGroup.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        ControlGroupContext: () => /* reexport */ T,
+        ControlGroupContext: () => /* reexport */ L,
         default: () => /* reexport */ se
     });
     // CONCATENATED MODULE: external "react"
@@ -98,10 +98,10 @@
         componentId: "wjnyif-0"
     })([ "", " ", " max-width:600px;margin-bottom:", ";", " color:", ";", "" ], c.mixins.reset("block"), c.mixins.clearfix(), (0, 
     c.pick)({
-        enterprise: (0, h.css)([ "calc(", " * 0.75)" ], c.variables.spacing),
+        enterprise: c.variables.spacingMedium,
         prisma: {
-            comfortable: "16px",
-            compact: "12px"
+            comfortable: c.variables.spacingLarge,
+            compact: c.variables.spacingMedium
         }
     }), (0, c.pick)({
         prisma: {
@@ -121,11 +121,11 @@
             prisma: c.variables.accentColorNegative
         }));
     }));
-    var x = m()(d()).withConfig({
+    var S = m()(d()).withConfig({
         displayName: "ControlGroupStyles__StyledControlsStackBox",
         componentId: "wjnyif-1"
     })([ "flex-direction:column;" ]);
-    var S = m().div.withConfig({
+    var x = m().div.withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapper",
         componentId: "wjnyif-2"
     })([ "display:inline-flex;align-items:center;", " ", "" ], (0, c.pick)({
@@ -138,7 +138,7 @@
             prisma: (0, h.css)([ "min-height:", ";" ], c.variables.inputHeight)
         }));
     }));
-    var I = m()(S).withConfig({
+    var I = m()(x).withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapperLeft",
         componentId: "wjnyif-3"
     })([ "float:left;" ]);
@@ -196,20 +196,20 @@
  * @public
  */
     var _ =  n().createContext({});
-    /* harmony default export */    const T = _;
+    /* harmony default export */    const L = _;
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroup.tsx
-    function L(e) {
+    function T(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            L = function e(t) {
+            T = function e(t) {
                 return typeof t;
             };
         } else {
-            L = function e(t) {
+            T = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return L(e);
+        return T(e);
     }
     function E() {
         E = Object.assign || function(e) {
@@ -380,7 +380,7 @@
         };
     }
     function X(e, t) {
-        if (t && (L(t) === "object" || typeof t === "function")) {
+        if (t && (T(t) === "object" || typeof t === "function")) {
             return t;
         }
         return K(e);
@@ -572,7 +572,7 @@
             key: "render",
             value: function e() {
                 var t = this;
-                var o = this.props, i = o.children, l = o.controlsLayout, a = o.error, s = o.help, c = o.hideLabel, u = o.label, f = o.labelFor, y = o.labelPosition, h = o.labelWidth, m = o.required, v = o.size, g = o.splunkTheme, _ = o.tooltip, L = o.tooltipDefaultPlacement, D = M(o, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "size", "splunkTheme", "tooltip", "tooltipDefaultPlacement" ]);
+                var o = this.props, i = o.children, l = o.controlsLayout, a = o.error, s = o.help, c = o.hideLabel, u = o.label, f = o.labelFor, y = o.labelPosition, h = o.labelWidth, m = o.required, v = o.size, g = o.splunkTheme, _ = o.tooltip, T = o.tooltipDefaultPlacement, D = M(o, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "size", "splunkTheme", "tooltip", "tooltipDefaultPlacement" ]);
                 var V = g.isPrisma, $ = g.isCompact;
                 var A = r.Children.toArray(i).filter(r.isValidElement);
                 var G = A.length;
@@ -652,8 +652,8 @@
                 var H = y === "left" ? {
                     marginLeft: "calc(".concat(F, " + ").concat(J, ")")
                 } : undefined;
-                var U = l === "stack" ? x : d();
-                var X = y === "left" ? I : S;
+                var U = l === "stack" ? S : d();
+                var X = y === "left" ? I : x;
                 var K =  n().createElement(X, {
                     style: W,
                     $labelPosition: y
@@ -669,7 +669,7 @@
                     $labelPosition: y,
                     closeWhen: "notOnClick",
                     content: _,
-                    defaultPlacement: L,
+                    defaultPlacement: T,
                     "aria-hidden": "true"
                 }));
                 var Q = typeof a === "string" || a === true;
@@ -679,7 +679,7 @@
                     "data-test": "control-group",
                     "data-test-required": m,
                     $error: Q
-                }, B),  n().createElement(T.Provider, {
+                }, B),  n().createElement(L.Provider, {
                     value: this.getContextValue()
                 }, c ?  n().createElement(b(), null, K) : K,  n().createElement(U, {
                     "data-test": "controls",

package/DualListbox.js

@@ -250,7 +250,7 @@
     var H = D()(P()).withConfig({
         displayName: "ToolbarButtonStyles__StyledClickable",
         componentId: "k7zksz-0"
-    })([ "", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;padding:", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";" ], N.mixins.reset("block"), (0, 
+    })([ "", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";" ], N.mixins.reset("block"), (0, 
     N.pick)({
         enterprise: "1px solid transparent"
     }), N.variables.borderRadius, (0, N.pick)({
@@ -259,13 +259,10 @@
     }), N.variables.lineHeight, N.variables.inputHeight, N.variables.inputHeight, (0, 
     N.pick)({
         enterprise: {
-            comfortable: "0 5px",
-            compact: "0 2px"
+            comfortable: (0, _.css)([ "padding:0 5px;" ]),
+            compact: (0, _.css)([ "padding:0 2px;" ])
         },
-        prisma: {
-            comfortable: (0, _.css)([ "0px calc(", " / 2 - 1px)" ], N.variables.inputHeight),
-            compact: (0, _.css)([ "0px calc(", " / 2 - 1px)" ], N.variables.inputHeight)
-        }
+        prisma: (0, _.css)([ "padding:0 calc(", " / 2 - 1px);" ], N.variables.inputHeight)
     }), N.variables.inputHeight, N.variables.focusShadow, (0, N.pickVariant)("$disabled", {
         false: (0, N.pick)({
             enterprise: (0, _.css)([ "color:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";transition:none;}&:focus{color:", ";}" ], (0, 
@@ -420,12 +417,12 @@
     var G = D().div.withConfig({
         displayName: "OptionStyles__StyledDiv",
         componentId: "q275d9-2"
-    })([ "padding:", ";word-break:break-word;word-wrap:break-word;" ], (0, N.pick)({
+    })([ "", ";word-break:break-word;word-wrap:break-word;" ], (0, N.pick)({
         prisma: {
-            compact: (0, _.css)([ "6px ", "" ], N.variables.spacingSmall),
-            comfortable: (0, _.css)([ "10px ", "" ], N.variables.spacingSmall)
+            compact: (0, _.css)([ "padding:6px ", ";" ], N.variables.spacingSmall),
+            comfortable: (0, _.css)([ "padding:10px ", ";" ], N.variables.spacingSmall)
         },
-        enterprise: (0, _.css)([ "6px ", "" ], N.variables.spacingSmall)
+        enterprise: (0, _.css)([ "padding:6px ", ";" ], N.variables.spacingSmall)
     }));
     // CONCATENATED MODULE: ./src/DualListbox/ListboxContext.tsx
     /**