@splunk/react-ui 5.0.0 → 5.2.0

package/CollapsiblePanel.js

@@ -73,144 +73,144 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
     const o = require("@splunk/react-ui/TransitionOpen");
     var i =  e.n(o);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const s = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
-    const c = require("@splunk/react-ui/useControlled");
-    var u =  e.n(c);
+    const s = require("@splunk/react-ui/useControlled");
+    var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const p = require("@splunk/react-ui/usePrevious");
-    var d =  e.n(p);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const f = require("lodash/omit");
-    var b =  e.n(f);
+    const u = require("@splunk/react-ui/usePrevious");
+    var p =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const d = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "styled-components"
-    const v = require("styled-components");
-    var y =  e.n(v);
+    const f = require("styled-components");
+    var b =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const m = require("@splunk/react-ui/Box");
-    var g =  e.n(m);
+    const v = require("@splunk/react-ui/Box");
+    var y =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const h = require("@splunk/react-ui/ButtonSimple");
-    var S =  e.n(h);
+    const m = require("@splunk/react-ui/ButtonSimple");
+    var g =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const C = require("@splunk/react-ui/Clickable");
-    var O =  e.n(C);
+    const h = require("@splunk/react-ui/Clickable");
+    var S =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const P = require("@splunk/themes");
+    const O = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const w = require("@splunk/react-icons/ChevronRight");
-    var k =  e.n(w);
+    const C = require("@splunk/react-icons/ChevronRight");
+    var P =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const I = require("@splunk/react-icons/enterprise/ChevronRight");
-    var j =  e.n(I);
+    const w = require("@splunk/react-icons/enterprise/ChevronRight");
+    var k =  e.n(w);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
-    var x = {
+    var I = {
         className: l().string
     };
-    var E = function e(n) {
+    var x = function e(n) {
         var t = n.className;
-        var a = (0, P.useSplunkTheme)(), l = a.isEnterprise;
-        return l ?  r().createElement(j(), {
+        var a = (0, O.useSplunkTheme)(), l = a.isEnterprise;
+        return l ?  r().createElement(k(), {
             className: t,
             hideDefaultTooltip: true,
             screenReaderText: null
-        }) :  r().createElement(k(), {
+        }) :  r().createElement(P(), {
             className: t
         });
     };
-    E.propTypes = x;
-    /* harmony default export */    const _ = E;
+    x.propTypes = I;
+    /* harmony default export */    const j = x;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
-    var N = y()(g()).withConfig({
+    var E = b()(y()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledBox",
         componentId: "sc-1phikbp-0"
     })([ "display:flex;flex-direction:column;flex-shrink:1;min-height:28px;background-color:", ";& + &{margin-top:1px;}" ], (0, 
-    P.pickVariant)("$appearance", {
+    O.pickVariant)("$appearance", {
         default: {
-            prisma: P.variables.backgroundColorSection,
+            prisma: O.variables.backgroundColorSection,
             enterprise: {
-                dark: P.variables.gray22,
-                light: P.variables.white
+                dark: O.variables.gray22,
+                light: O.variables.white
             }
         },
-        subtle: P.variables.transparent
+        subtle: O.variables.transparent
     }));
-    var A = y()(g()).withConfig({
+    var _ = b()(y()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
         componentId: "sc-1phikbp-1"
-    })([ "", ";flex-direction:column;margin-bottom:0;" ], P.mixins.reset("flex"));
+    })([ "", ";flex-direction:column;margin-bottom:0;" ], O.mixins.reset("flex"));
     /*
     these styles are consistent for both regular and actions, but applied to different elements
     * in regular mode, they're on the SVG's span wrapper
     * in actionsMode, they're on the button
     applying them directly to the icon wrapper doesn't work because Enterprise has 1px border around the button
-*/    var T = (0, v.css)([ "min-width:16px;" ]);
-    var $ = y().span.withConfig({
+*/    var N = (0, f.css)([ "min-width:16px;" ]);
+    var A = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledIconWrapper",
         componentId: "sc-1phikbp-2"
-    })([ "display:inline-block;flex:0 auto;", "" ], T);
-    var q = y().div.withConfig({
+    })([ "display:inline-block;flex:0 auto;", "" ], N);
+    var T = b().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledActions",
         componentId: "sc-1phikbp-3"
-    })([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0, 
-    P.pickVariant)("$appearance", {
-        default: P.variables.neutral100,
-        subtle: P.variables.transparent
+    })([ "display:flex;flex-shrink:0;border-bottom:0;gap:", ";position:relative;padding:", " ", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";background-color:", ";", "" ], O.variables.spacingSmall, O.variables.spacingXSmall, O.variables.spacingLarge, O.variables.contentColorActive, (0, 
+    O.pickVariant)("$appearance", {
+        default: O.variables.neutral100,
+        subtle: O.variables.transparent
     }), (function(e) {
         var n = e.$disabled;
-        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], O.variables.contentColorDisabled);
     }));
-    var D = y()(S()).withConfig({
+    var $ = b()(g()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
-    })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], P.variables.lineHeight);
-    var R = y()(O()).withConfig({
+    })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], O.variables.lineHeight);
+    var q = b()(S()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledTitleClickable",
         componentId: "sc-1phikbp-5"
-    })([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ], P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingLarge, P.variables.contentColorActive, (0, 
-    P.pickVariant)("$appearance", {
-        default: P.variables.neutral100,
-        subtle: P.variables.transparent
-    }), P.variables.contentColorDisabled, P.variables.focusShadowInset, P.mixins.overlayColors(P.variables.neutral100, P.variables.interactiveColorOverlayHover));
-    var B = y().span.withConfig({
+    })([ "width:100%;flex-shrink:0;border-bottom:0;gap:", ";cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", " ", ";color:", ";background-color:", ";&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&:focus:not([disabled]),&:active:not([disabled],[aria-disabled='true']){box-shadow:", ";z-index:1;}&:hover:not([disabled],[aria-disabled='true']){background-color:", ";}" ], O.variables.spacingSmall, O.variables.spacingXSmall, O.variables.spacingLarge, O.variables.contentColorActive, (0, 
+    O.pickVariant)("$appearance", {
+        default: O.variables.neutral100,
+        subtle: O.variables.transparent
+    }), O.variables.contentColorDisabled, O.variables.focusShadowInset, O.mixins.overlayColors(O.variables.neutral100, O.variables.interactiveColorOverlayHover));
+    var D = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingContent",
         componentId: "sc-1phikbp-6"
-    })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], P.variables.fontWeightSemiBold, P.variables.lineHeight, (function(e) {
+    })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], O.variables.fontWeightSemiBold, O.variables.lineHeight, (function(e) {
         var n = e.$disabled;
-        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], O.variables.contentColorDisabled);
     }));
-    var M = y().span.withConfig({
+    var R = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingActions",
         componentId: "sc-1phikbp-7"
-    })([ "min-height:", ";flex:1 0 auto;" ], P.variables.inputHeight);
-    var L = y().span.withConfig({
+    })([ "min-height:", ";flex:1 0 auto;" ], O.variables.inputHeight);
+    var M = b().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledDescription",
         componentId: "sc-1phikbp-8"
-    })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], P.variables.contentColorDefault, P.variables.fontSizeSmall, P.variables.spacingSmall, (function(e) {
+    })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], O.variables.contentColorDefault, O.variables.fontSizeSmall, O.variables.spacingSmall, (function(e) {
         var n = e.$disabled;
-        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
+        return n && (0, f.css)([ "color:", ";" ], O.variables.contentColorDisabled);
     }));
-    var W = y().div.withConfig({
+    var B = b().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
         componentId: "sc-1phikbp-9"
-    })([ "", ";gap:", ";", "" ], P.mixins.reset("block"), P.variables.spacingSmall, (function(e) {
+    })([ "", ";gap:", ";", "" ], O.mixins.reset("block"), O.variables.spacingSmall, (function(e) {
         var n = e.$inset;
-        return n && (0, v.css)([ "padding:", ";" ], P.variables.spacingLarge);
+        return n && (0, f.css)([ "padding:", ";" ], O.variables.spacingLarge);
     }));
-    var H = y()(_).withConfig({
+    var L = b()(j).withConfig({
         displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
         componentId: "sc-1phikbp-10"
-    })([ "transition:transform ", ";", " width:100%;vertical-align:", ";" ], (0, P.pick)({
+    })([ "transition:transform ", ";", " width:100%;vertical-align:", ";" ], (0, O.pick)({
         enterprise: "300ms",
         prisma: "200ms"
     }), (function(e) {
         var n = e.open;
-        return n && (0, v.css)([ "transform:rotate(90deg);" ]);
-    }), (0, P.pick)({
+        return n && (0, f.css)([ "transform:rotate(90deg);" ]);
+    }), (0, O.pick)({
         enterprise: "baseline",
         prisma: "text-bottom"
     }));
+    // CONCATENATED MODULE: external "lodash/omit"
+    const W = require("lodash/omit");
+    var H =  e.n(W);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
     var V =  (0, t.createContext)({});
     /* harmony default export */    const G = V;
@@ -289,7 +289,7 @@
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                t = l[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+                t = l[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
@@ -299,7 +299,7 @@
         var t = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
+                if (-1 !== n.indexOf(r)) continue;
                 t[r] = e[r];
             }
         }
@@ -314,9 +314,9 @@
         openPanelId: l().any
     };
     function le(e) {
-        var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, c = e.openPanelId, p = te(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
+        var n = e.children, a = e.defaultOpenPanelId, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, s = e.onChange, u = e.openPanelId, p = te(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
         // @docs-props-type SingleOpenPanelGroupPropsBase
-                var d = u()({
+                var d = c()({
             componentName: "SingleOpenPanelGroup",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -325,33 +325,33 @@
             valuePropName: "openPanelId"
         });
         var f = !d ? a : undefined;
-        var v = (0, t.useState)(f), y = K(v, 2), m = y[0], g = y[1];
-        var h = (0, t.useCallback)((function(e, n) {
+        var b = (0, t.useState)(f), v = K(b, 2), y = v[0], m = v[1];
+        var g = (0, t.useCallback)((function(e, n) {
             var t = n.panelId;
-            var r = d ? c : m;
+            var r = d ? u : y;
             var a = r === t ? null : t;
             if (!d) {
-                g(a);
+                m(a);
             }
             s === null || s === void 0 ? void 0 : s(e, n);
-        }), [ d, c, m, s ]);
-        var S = t.Children.toArray(n).filter(t.isValidElement);
+        }), [ d, u, y, s ]);
+        var h = t.Children.toArray(n).filter(t.isValidElement);
  // remove false, null, 0, etc
-                var C = (0, t.useMemo)((function() {
+                var S = (0, t.useMemo)((function() {
             return {
-                onChange: h,
-                openPanelId: d ? c : m,
+                onChange: g,
+                openPanelId: d ? u : y,
                 inset: i
             };
-        }), [ h, i, d, c, m ]);
+        }), [ g, i, d, u, y ]);
         
-        return r().createElement(A, U({
+        return r().createElement(_, U({
             "data-test": "single-open-panel-group",
-            "data-test-open-panel-id": c,
+            "data-test-open-panel-id": u,
             elementRef: l
-        }, b().apply(void 0, [ p ].concat(z(Object.keys(ae))))),  r().createElement(G.Provider, {
-            value: C
-        }, S));
+        }, H().apply(void 0, [ p ].concat(z(Object.keys(ae))))),  r().createElement(G.Provider, {
+            value: S
+        }, h));
     }
     le.propTypes = ae;
     /* harmony default export */    const oe = le;
@@ -465,27 +465,27 @@
     }
     function Se(e, n) {
         if (null == e) return {};
-        var t, r, a = Ce(e, n);
+        var t, r, a = Oe(e, n);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (r = 0; r < l.length; r++) {
-                t = l[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+                t = l[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
         return a;
     }
-    function Ce(e, n) {
+    function Oe(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
+                if (-1 !== n.indexOf(r)) continue;
                 t[r] = e[r];
             }
         }
         return t;
     }
-    /** @public */    var Oe = {
+    /** @public */    var Ce = {
         innerBodyStyles: l().object,
         actions: l().node,
         appearance: l().oneOf([ "default", "subtle" ]),
@@ -504,11 +504,11 @@
         title: l().node.isRequired
     };
     function Pe(e) {
-        var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, c = e.children, p = e.defaultOpen, f = p === void 0 ? undefined : p, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, C = S === void 0 ? "auto" : S, O = e.panelId, P = e.renderChildrenWhenCollapsed, w = e.title, k = e.inset, I = k === void 0 ? true : k, j = Se(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
+        var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, O = S === void 0 ? "auto" : S, C = e.panelId, P = e.renderChildrenWhenCollapsed, w = e.title, k = e.inset, I = k === void 0 ? true : k, x = Se(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
         // @docs-props-type CollapsiblePanelPropsBase
-                var x = (0, t.useContext)(G);
-        var E = Object.keys(x).length !== 0;
-        var _ = u()({
+                var j = (0, t.useContext)(G);
+        var _ = Object.keys(j).length !== 0;
+        var N = c()({
             componentName: "CollapsiblePanel",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -516,124 +516,126 @@
             defaultValuePropName: "defaultOpen",
             valuePropName: "open"
         });
-        var A = (0, t.useState)("container-".concat((0, s.createGUID)())), T = be(A, 1), V = T[0];
-        var U = (0, t.useState)("toggle-".concat((0, s.createGUID)())), z = be(U, 1), X = z[0];
-        var F = d()(h);
-        var J = !_ ? f || false : undefined;
+        var W = (0, t.useState)("container-".concat((0, d.createGUID)())), H = be(W, 1), V = H[0];
+        var U = (0, t.useState)("toggle-".concat((0, d.createGUID)())), z = be(U, 1), X = z[0];
+        var F = p()(h);
+        var J = !N ? f || false : undefined;
         var K = (0, t.useState)(J), Q = be(K, 2), Y = Q[0], Z = Q[1];
-        var ee = (0, t.useState)(), ne = be(ee, 2), te = ne[0], re = ne[1];
-        var ae = (0, t.useState)(false), le = be(ae, 2), oe = le[0], ie = le[1];
-        /**
-   * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
-   * so context.openPanelId is used for both the controlled and uncontrolled case.
-   */        (0, t.useEffect)((function() {
-            var e;
-            if (E) {
-                e = x.openPanelId === O;
-            } else {
-                e = _ ? h : Y;
+        var ee = (0, t.useState)(false), ne = be(ee, 2), te = ne[0], re = ne[1];
+        var ae = (0, t.useMemo)((function() {
+            if (_) {
+                /**
+       * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
+       * so context.openPanelId is used for both the controlled and uncontrolled case.
+       */
+                return j.openPanelId === C;
             }
-            re(e);
-        }), [ x.openPanelId, E, _, h, Y, O ]);
+            return N ? h : Y;
+        }), [ j.openPanelId, _, N, h, Y, C ]);
+        // SUI-7877 Must initialize openPanel with value to avoid re-render animation bug
+                var le = (0, t.useState)(ae), oe = be(le, 2), ie = oe[0], ce = oe[1];
+        (0, t.useEffect)((function() {
+            ce(ae);
+        }), [ ae ]);
         // Only testing this in the scenario of a SingleOpenPanelGroup.
                 (0, t.useEffect)((function() {
             if (false) {}
-        }), [ f, E, h ]);
+        }), [ f, _, h ]);
         (0, t.useEffect)((function() {
             if (F != null && h !== F) {
-                ie(true);
+                re(true);
             }
         }), [ h, F ]);
-        var ce = (0, t.useCallback)((function(e) {
+        var pe = (0, t.useCallback)((function(e) {
             var n;
-            if (!_) {
-                ie(true);
-                Z(!te);
+            if (!N) {
+                re(true);
+                Z(!ie);
             }
-            var t = te ? "close" : "open";
+            var t = ie ? "close" : "open";
             g === null || g === void 0 ? void 0 : g(e, {
-                panelId: O,
+                panelId: C,
                 reason: "toggleClick",
                 action: t
             });
-            (n = x.onChange) === null || n === void 0 ? void 0 : n.call(x, e, {
-                panelId: O,
+            (n = j.onChange) === null || n === void 0 ? void 0 : n.call(j, e, {
+                panelId: C,
                 reason: "toggleClick",
                 action: t
             });
-        }), [ x, _, te, g, O ]);
-        var pe = (0, t.useCallback)((function() {
-            ie(false);
+        }), [ j, N, ie, g, C ]);
+        var de = (0, t.useCallback)((function() {
+            re(false);
         }), []);
-        var de = (0, s.createDOMID)("panel-toggle");
-        var fe = {
+        var fe = (0, d.createDOMID)("panel-toggle");
+        var ve = {
             disabled: v,
-            onClick: ce,
+            onClick: pe,
             id: X,
             "aria-controls": V,
-            "aria-expanded": te,
+            "aria-expanded": ie,
             "data-test": "toggle"
         };
-        var ve = (0, t.useMemo)((function() {
+        var ye = (0, t.useMemo)((function() {
             return {
-                overflow: oe ? "hidden" : C
+                overflow: te ? "hidden" : O
             };
-        }), [ oe, C ]);
-        var ye = (0, t.useMemo)((function() {
+        }), [ te, O ]);
+        var me = (0, t.useMemo)((function() {
             return ue({
                 tableLayout: "fixed"
             }, n);
         }), [ n ]);
         
-        return r().createElement(N, se({
+        return r().createElement(E, se({
             "data-test": "collapsible-panel",
             elementRef: y,
             $appearance: o
-        }, j), a != null ?  r().createElement(q, {
+        }, x), a != null ?  r().createElement(T, {
             $appearance: o,
             $disabled: !!v
-        },  r().createElement(D, se({
+        },  r().createElement($, se({
             appearance: "secondary",
-            "aria-labelledby": de
-        }, fe),  r().createElement(H, {
-            open: !!te
-        })),  r().createElement(B, {
+            "aria-labelledby": fe
+        }, ve),  r().createElement(L, {
+            open: !!ie
+        })),  r().createElement(D, {
             $disabled: !!v,
             "data-test": "title",
-            id: de
-        }, w),  r().createElement(M, null, a)) : 
+            id: fe
+        }, w),  r().createElement(R, null, a)) : 
         
         /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
         r().createElement("span", {
             "data-test": "heading",
             role: m ? "heading" : undefined,
             "aria-level": m
-        },  r().createElement(R, se({
+        },  r().createElement(q, se({
             $appearance: o
-        }, fe),  r().createElement($, null,  r().createElement(H, {
-            open: !!te
-        })),  r().createElement(B, {
+        }, ve),  r().createElement(A, null,  r().createElement(L, {
+            open: !!ie
+        })),  r().createElement(D, {
             $disabled: !!v
         },  r().createElement("span", {
             "data-test": "title"
-        }, w), b &&  r().createElement(L, {
+        }, w), b &&  r().createElement(M, {
             $disabled: !!v,
             "data-test": "description"
         }, b)))),  r().createElement(i(), {
             outerId: V,
             "aria-labelledby": X,
             "data-test": "body",
-            outerStyle: ve,
-            innerStyle: ye,
-            open: te,
-            onAnimationEnd: pe,
+            outerStyle: ye,
+            innerStyle: me,
+            open: ie,
+            onAnimationEnd: de,
             role: a != null ? "region" : undefined,
             renderChildrenWhenCollapsed: P
-        },  r().createElement(W, {
+        },  r().createElement(B, {
             $inset: I
-        }, c)));
+        }, s)));
     }
-    Pe.propTypes = Oe;
+    Pe.propTypes = Ce;
     /* harmony default export */    const we = Pe;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
     module.exports = n;