@splunk/react-ui 4.42.0 → 5.0.0-beta.2

package/CollapsiblePanel.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var n = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = n => {
+            /******/ var r = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
             /******/;
-            e.d(n, {
-                a: n
+            e.d(r, {
+                a: r
             });
-            /******/            return n;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, n) => {
-            /******/ for (var r in n) {
-                /******/ if (e.o(n, r) && !e.o(t, r)) {
-                    /******/ Object.defineProperty(t, r, {
+        /******/ e.d = (n, r) => {
+            /******/ for (var t in r) {
+                /******/ if (e.o(r, t) && !e.o(n, t)) {
+                    /******/ Object.defineProperty(n, t, {
                         enumerable: true,
-                        get: n[r]
+                        get: r[t]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
         /******/;
     })();
     /******/
@@ -56,739 +56,577 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var n = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(n);
     // EXPORTS
-        e.d(t, {
-        SingleOpenPanelGroup: () => /* reexport */ ce,
-        default: () => /* reexport */ _e
+        e.d(n, {
+        SingleOpenPanelGroup: () => /* reexport */ oe,
+        default: () => /* reexport */ we
     });
     // CONCATENATED MODULE: external "react"
-    const n = require("react");
-    var r =  e.n(n);
-    // CONCATENATED MODULE: external "lodash/has"
-    const a = require("lodash/has");
-    var o =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const i = require("lodash/keys");
-    var l =  e.n(i);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const s = require("lodash/omit");
-    var c =  e.n(s);
+    const r = require("react");
+    var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const p = require("prop-types");
-    var u =  e.n(p);
+    const a = require("prop-types");
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
-    const d = require("@splunk/react-ui/TransitionOpen");
-    var f =  e.n(d);
+    const o = require("@splunk/react-ui/TransitionOpen");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const b = require("@splunk/ui-utils/id");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const v = require("@splunk/ui-utils/i18n");
+    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);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const m = require("@splunk/react-ui/usePrevious");
-    var y =  e.n(m);
+    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);
     // CONCATENATED MODULE: external "styled-components"
-    const g = require("styled-components");
-    var h =  e.n(g);
+    const v = require("styled-components");
+    var y =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const k = require("@splunk/react-ui/Box");
-    var C =  e.n(k);
+    const m = require("@splunk/react-ui/Box");
+    var g =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const x = require("@splunk/react-ui/ButtonSimple");
-    var O =  e.n(x);
+    const h = require("@splunk/react-ui/ButtonSimple");
+    var S =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const S = require("@splunk/react-ui/Clickable");
-    var w =  e.n(S);
+    const C = require("@splunk/react-ui/Clickable");
+    var O =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/themes"
     const P = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const I = require("@splunk/react-icons/ChevronRight");
-    var j =  e.n(I);
+    const w = require("@splunk/react-icons/ChevronRight");
+    var k =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const E = require("@splunk/react-icons/enterprise/ChevronRight");
-    var _ =  e.n(E);
+    const I = require("@splunk/react-icons/enterprise/ChevronRight");
+    var j =  e.n(I);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
-    var q = {
-        className: u().string
+    var x = {
+        className: l().string
     };
-    var A = function e(t) {
-        var n = t.className;
-        var a = (0, P.useSplunkTheme)(), o = a.isEnterprise;
-        return o ?  r().createElement(_(), {
-            className: n,
+    var E = function e(n) {
+        var r = n.className;
+        var a = (0, P.useSplunkTheme)(), l = a.isEnterprise;
+        return l ?  t().createElement(j(), {
+            className: r,
             hideDefaultTooltip: true,
             screenReaderText: null
-        }) :  r().createElement(j(), {
-            className: n
+        }) :  t().createElement(k(), {
+            className: r
         });
     };
-    A.propTypes = q;
-    /* harmony default export */    const R = A;
+    E.propTypes = x;
+    /* harmony default export */    const _ = E;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
-    var T = h()(C()).withConfig({
+    var N = y()(g()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledBox",
         componentId: "sc-1phikbp-0"
-    })([ "display:flex;flex-direction:column;flex-shrink:1;", ";", ";& + &{margin-top:", ";}" ], (0, 
-    P.pick)({
-        enterprise: (0, g.css)([ "min-height:calc(", " + 12px);" ], P.variables.lineHeight),
-        prisma: {
-            comfortable: (0, g.css)([ "min-height:56px;" ]),
-            compact: (0, g.css)([ "min-height:48px;" ])
-        }
-    }), (0, P.pick)({
-        prisma: (0, g.css)([ "background-color:", ";" ], P.variables.backgroundColorSection)
-    }), (0, P.pick)({
-        enterprise: "2px",
-        prisma: "1px"
+    })([ "display:flex;flex-direction:column;flex-shrink:1;min-height:28px;background-color:", ";& + &{margin-top:1px;}" ], (0, 
+    P.pickVariant)("$appearance", {
+        default: {
+            prisma: P.variables.backgroundColorSection,
+            enterprise: {
+                dark: P.variables.gray22,
+                light: P.variables.white
+            }
+        },
+        subtle: P.variables.transparent
     }));
-    var D = h()(C()).withConfig({
+    var A = y()(g()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledSingleOpenPanelGroupBox",
         componentId: "sc-1phikbp-1"
-    })([ "", ";flex-direction:column;margin-bottom:0;", "" ], P.mixins.reset("flex"), (0, 
-    P.pick)({
-        enterprise: (0, g.css)([ "background:", ";" ], P.variables.backgroundColor)
-    }));
+    })([ "", ";flex-direction:column;margin-bottom:0;" ], P.mixins.reset("flex"));
     /*
-    these styles are consistent for both regular and titleWithActions, but applied to different elements
+    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 titleWithActionsMode, they're on the button
+    * 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 N = (0, g.css)([ "min-width:", ";" ], (0, P.pick)({
-        enterprise: "20px",
-        prisma: "35px"
-    }));
-    var X = h().span.withConfig({
+*/    var T = (0, v.css)([ "min-width:16px;" ]);
+    var $ = y().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledIconWrapper",
         componentId: "sc-1phikbp-2"
-    })([ "display:inline-block;flex:0 auto;", "" ], N);
-    var B = h().div.withConfig({
-        displayName: "CollapsiblePanelStyles__StyledTitleWithActions",
+    })([ "display:inline-block;flex:0 auto;", "" ], T);
+    var q = y().div.withConfig({
+        displayName: "CollapsiblePanelStyles__StyledActions",
         componentId: "sc-1phikbp-3"
-    })([ "display:flex;flex-shrink:0;border-bottom:0;position:relative;padding:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";", " ", "" ], (0, 
-    P.pick)({
-        enterprise: (0, g.css)([ "", " ", " ", " ", "" ], P.variables.spacingXSmall, P.variables.spacingSmall, P.variables.spacingXSmall, P.variables.spacingXSmall),
-        prisma: {
-            comfortable: "8px 10px 8px 11px",
-            compact: "8px 10px 8px 11px"
-        }
-    }), (0, P.pick)({
-        enterprise: P.variables.textColor,
-        prisma: P.variables.contentColorActive
-    }), (0, P.pick)({
-        prisma: (0, g.css)([ "background-color:", ";" ], P.variables.interactiveColorBackground),
-        enterprise: {
-            dark: (0, g.css)([ "background-color:", ";" ], P.variables.gray45),
-            light: (0, g.css)([ "background-color:", ";" ], P.variables.gray96)
-        }
+    })([ "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
     }), (function(e) {
-        var t = e.$disabled;
-        return t && (0, g.css)([ "cursor:default;color:", ";" ], (0, P.pick)({
-            enterprise: P.variables.contentColorDefault,
-            prisma: P.variables.contentColorDisabled
-        }));
+        var n = e.$disabled;
+        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
     }));
-    var W = h()(O()).withConfig({
+    var D = y()(S()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledToggleButton",
         componentId: "sc-1phikbp-4"
-    })([ "flex:0 auto;padding:0;", "" ], N);
-    var L = h()(w()).withConfig({
+    })([ "flex:0 auto;padding:0;min-width:28px;line-height:", ";" ], P.variables.lineHeight);
+    var R = y()(O()).withConfig({
         displayName: "CollapsiblePanelStyles__StyledTitleClickable",
         componentId: "sc-1phikbp-5"
-    })([ "width:100%;flex-shrink:0;border-bottom:0;cursor:pointer;position:relative;display:flex;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", ";color:", ";", " ", " &[disabled]{cursor:default;color:", ";}&:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";z-index:1;}&:hover:not([disabled]){color:", ";background-color:", ";}" ], (0, 
-    P.pick)({
-        enterprise: "6px 30px 6px 5px",
-        prisma: {
-            comfortable: "18px 20px 18px 11px",
-            compact: "14px 20px 14px 11px"
-        }
-    }), (0, P.pick)({
-        enterprise: P.variables.textColor,
-        prisma: P.variables.contentColorActive
-    }), (0, P.pick)({
-        prisma: (0, g.css)([ "background-color:", ";" ], P.variables.interactiveColorBackground)
-    }), (0, P.pickVariant)("$open", {
-        false: {
-            enterprise: {
-                dark: (0, g.css)([ "background-color:", ";" ], P.variables.gray45),
-                light: (0, g.css)([ "background-color:", ";" ], P.variables.gray96)
-            }
-        }
-    }), (0, P.pick)({
-        enterprise: P.variables.contentColorDefault,
-        prisma: P.variables.contentColorDisabled
-    }), (0, P.pick)({
-        enterprise: P.variables.textColor,
-        prisma: P.variables.contentColorActive
-    }), P.variables.focusShadowInset, (0, P.pick)({
-        enterprise: P.variables.textColor,
-        prisma: P.variables.contentColorActive
-    }), (0, P.pick)({
-        enterprise: {
-            light: P.variables.gray92,
-            dark: P.variables.gray30
-        },
-        prisma: P.mixins.overlayColors(P.variables.interactiveColorBackground, P.variables.interactiveColorOverlayHover)
-    }));
-    var $ = h().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:", ";}" ], 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({
         displayName: "CollapsiblePanelStyles__StyledHeadingContent",
         componentId: "sc-1phikbp-6"
-    })([ "display:flex;justify-content:space-between;margin-left:", ";flex:1 1 auto;", " ", "" ], (0, 
-    P.pick)({
-        enterprise: "5px",
-        prisma: "6px"
-    }), (0, P.pick)({
-        prisma: (0, g.css)([ "font-weight:", ";" ], P.variables.fontWeightSemiBold)
-    }), (function(e) {
-        var t = e.$titleWithActions;
-        return t && (0, g.css)([ "min-height:", ";" ], (0, P.pick)({
-            prisma: {
-                comfortable: P.variables.spacingXXXLarge,
-                compact: P.variables.spacingXXLarge
-            }
-        }));
+    })([ "display:flex;justify-content:space-between;flex:1 1 auto;font-weight:", ";line-height:", ";", "" ], P.variables.fontWeightSemiBold, P.variables.lineHeight, (function(e) {
+        var n = e.$disabled;
+        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
     }));
-    var M = h().span.withConfig({
+    var L = y().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledHeadingActions",
         componentId: "sc-1phikbp-7"
-    })([ "min-height:", ";flex:1 0 auto;" ], (0, P.pick)({
-        prisma: {
-            comfortable: P.variables.spacingXXXLarge,
-            compact: P.variables.spacingXXLarge
-        }
-    }));
-    var G = h().span.withConfig({
+    })([ "min-height:", ";flex:1 0 auto;" ], P.variables.inputHeight);
+    var M = y().span.withConfig({
         displayName: "CollapsiblePanelStyles__StyledDescription",
         componentId: "sc-1phikbp-8"
-    })([ "font-size:", ";margin-left:", ";" ], P.variables.fontSizeSmall, (0, P.pick)({
-        enterprise: P.variables.spacingSmall,
-        prisma: P.variables.spacingLarge
+    })([ "color:", ";font-size:", ";margin-left:", ";line-height:1.8;", "" ], P.variables.contentColorDefault, P.variables.fontSizeSmall, P.variables.spacingSmall, (function(e) {
+        var n = e.$disabled;
+        return n && (0, v.css)([ "color:", ";" ], P.variables.contentColorDisabled);
     }));
-    var H = h().div.withConfig({
+    var W = y().div.withConfig({
         displayName: "CollapsiblePanelStyles__StyledInsetWrapper",
         componentId: "sc-1phikbp-9"
-    })([ "", ";padding:", ";" ], P.mixins.reset("block"), (0, P.pickVariant)("$inset", {
-        true: (0, P.pick)({
-            enterprise: {
-                compact: P.variables.spacingXSmall,
-                comfortable: P.variables.spacingSmall
-            },
-            prisma: {
-                compact: P.variables.spacingMedium,
-                comfortable: P.variables.spacingXLarge
-            }
-        }),
-        false: 0
+    })([ "", ";gap:", ";", "" ], P.mixins.reset("block"), P.variables.spacingSmall, (function(e) {
+        var n = e.$inset;
+        return n && (0, v.css)([ "padding:", ";" ], P.variables.spacingLarge);
     }));
-    var U = h()(R).withConfig({
+    var H = y()(_).withConfig({
         displayName: "CollapsiblePanelStyles__StyledExpandPanelIcon",
         componentId: "sc-1phikbp-10"
-    })([ "transition:transform ", ";", ";", " width:100%;vertical-align:", ";" ], (0, 
-    P.pick)({
+    })([ "transition:transform ", ";", " width:100%;vertical-align:", ";" ], (0, P.pick)({
         enterprise: "300ms",
         prisma: "200ms"
-    }), (0, P.pick)({
-        enterprise: (0, g.css)([ "[disabled] &{color:", ";}" ], (0, P.pick)({
-            dark: P.variables.contentColorDefault,
-            light: P.variables.contentColorDisabled
-        })),
-        prisma: (0, g.css)([ "color:", ";[disabled] &{color:inherit;}" ], P.variables.contentColorDefault)
     }), (function(e) {
-        var t = e.open;
-        return t && (0, g.css)([ "transform:rotate(90deg);" ]);
+        var n = e.open;
+        return n && (0, v.css)([ "transform:rotate(90deg);" ]);
     }), (0, P.pick)({
         enterprise: "baseline",
         prisma: "text-bottom"
     }));
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
-    var z =  (0, n.createContext)({});
-    /* harmony default export */    const V = z;
+    var V =  (0, r.createContext)({});
+    /* harmony default export */    const G = V;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroup.tsx
-    function F() {
-        return F = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var n = arguments[t];
-                for (var r in n) {
-                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
+    function U() {
+        return U = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
                 }
             }
             return e;
-        }, F.apply(null, arguments);
+        }, U.apply(null, arguments);
     }
-    function J(e) {
-        return Y(e) || Q(e) || te(e) || K();
+    function z(e) {
+        return J(e) || F(e) || Y(e) || X();
     }
-    function K() {
+    function X() {
         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 Q(e) {
+    function F(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function Y(e) {
-        if (Array.isArray(e)) return ne(e);
+    function J(e) {
+        if (Array.isArray(e)) return Z(e);
     }
-    function Z(e, t) {
-        return ae(e) || re(e, t) || te(e, t) || ee();
+    function K(e, n) {
+        return ne(e) || ee(e, n) || Y(e, n) || Q();
     }
-    function ee() {
+    function Q() {
         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 te(e, t) {
+    function Y(e, n) {
         if (e) {
-            if ("string" == typeof e) return ne(e, t);
-            var n = {}.toString.call(e).slice(8, -1);
-            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? ne(e, t) : void 0;
+            if ("string" == typeof e) return Z(e, n);
+            var r = {}.toString.call(e).slice(8, -1);
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? Z(e, n) : void 0;
         }
     }
-    function ne(e, t) {
-        (null == t || t > e.length) && (t = e.length);
-        for (var n = 0, r = Array(t); n < t; n++) {
-            r[n] = e[n];
+    function Z(e, n) {
+        (null == n || n > e.length) && (n = e.length);
+        for (var r = 0, t = Array(n); r < n; r++) {
+            t[r] = e[r];
         }
-        return r;
+        return t;
     }
-    function re(e, t) {
-        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != n) {
-            var r, a, o, i, l = [], s = !0, c = !1;
+    function ee(e, n) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var t, a, l, o, i = [], s = !0, c = !1;
             try {
-                if (o = (n = n.call(e)).next, 0 === t) {
-                    if (Object(n) !== n) return;
+                if (l = (r = r.call(e)).next, 0 === n) {
+                    if (Object(r) !== r) return;
                     s = !1;
-                } else for (;!(s = (r = o.call(n)).done) && (l.push(r.value), l.length !== t); s = !0) {
+                } else for (;!(s = (t = l.call(r)).done) && (i.push(t.value), i.length !== n); s = !0) {
                 }
             } catch (e) {
                 c = !0, a = e;
             } finally {
                 try {
-                    if (!s && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                    if (!s && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
                 } finally {
                     if (c) throw a;
                 }
             }
-            return l;
+            return i;
         }
     }
-    function ae(e) {
+    function ne(e) {
         if (Array.isArray(e)) return e;
     }
-    function oe(e, t) {
+    function re(e, n) {
         if (null == e) return {};
-        var n, r, a = ie(e, t);
+        var r, t, a = te(e, n);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (r = 0; r < o.length; r++) {
-                n = o[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < l.length; t++) {
+                r = l[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
     }
-    function ie(e, t) {
+    function te(e, n) {
         if (null == e) return {};
-        var n = {};
-        for (var r in e) {
-            if ({}.hasOwnProperty.call(e, r)) {
-                if (t.includes(r)) continue;
-                n[r] = e[r];
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
         }
-        return n;
+        return r;
     }
-    /** @public */    var le = {
-        children: u().node,
-        defaultOpenPanelId: u().any,
-        elementRef: u().oneOfType([ u().func, u().object ]),
-        inset: u().bool,
-        onChange: u().func,
-        openPanelId: u().any
+    /** @public */    var ae = {
+        children: l().node,
+        defaultOpenPanelId: l().any,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        inset: l().bool,
+        onChange: l().func,
+        openPanelId: l().any
     };
-    function se(e) {
+    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 = re(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
         // @docs-props-type SingleOpenPanelGroupPropsBase
-        var t = e.children, a = e.defaultOpenPanelId, i = e.elementRef, l = e.inset, s = l === void 0 ? false : l, p = e.onChange, u = e.openPanelId, d = oe(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
-        var f = o()(e, "openPanelId");
-        var b = y()(a);
-        var v = !f ? a : undefined;
-        var m = (0, n.useState)(v), g = Z(m, 2), h = g[0], k = g[1];
-        var C = function e() {
-            var t = f ? u : h;
-            return t;
-        };
-        var x = (0, n.useCallback)((function(e, t) {
-            var n = t.panelId;
-            var r = C();
-            var a = r === n ? null : n;
-            if (!f) {
-                k(a);
+                var d = u()({
+            componentName: "SingleOpenPanelGroup",
+            /* eslint-disable-next-line prefer-rest-params */
+            componentProps: arguments[0],
+            // see SUI-7028
+            defaultValuePropName: "defaultOpenPanelId",
+            valuePropName: "openPanelId"
+        });
+        var f = !d ? a : undefined;
+        var v = (0, r.useState)(f), y = K(v, 2), m = y[0], g = y[1];
+        var h = (0, r.useCallback)((function(e, n) {
+            var r = n.panelId;
+            var t = d ? c : m;
+            var a = t === r ? null : r;
+            if (!d) {
+                g(a);
             }
-            p === null || p === void 0 ? void 0 : p(e, t);
-        }), [ u, f, h, C, p ]);
-        (0, n.useEffect)((function() {
-            if (false) {}
-            // In this functional component, we want the dependencies to be [], but when we do that
-            // we get a linting error.
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-                }), []);
-        (0, n.useEffect)((function() {
-            if (false) {}
-        }), [ b, f ]);
-        (0, n.useEffect)((function() {
-            if (false) {}
-        }), [ b, a ]);
-        var O = n.Children.toArray(t).filter(n.isValidElement);
+            s === null || s === void 0 ? void 0 : s(e, n);
+        }), [ d, c, m, s ]);
+        var S = r.Children.toArray(n).filter(r.isValidElement);
  // remove false, null, 0, etc
-                var S = (0, n.useMemo)((function() {
+                var C = (0, r.useMemo)((function() {
             return {
-                onChange: x,
-                openPanelId: f ? u : h,
-                inset: s
+                onChange: h,
+                openPanelId: d ? c : m,
+                inset: i
             };
-        }), [ x, f, s, u, h ]);
+        }), [ h, i, d, c, m ]);
         
-        return r().createElement(D, F({
+        return t().createElement(A, U({
             "data-test": "single-open-panel-group",
-            "data-test-open-panel-id": u,
-            elementRef: i
-        }, c().apply(void 0, [ d ].concat(J(Object.keys(le))))),  r().createElement(V.Provider, {
-            value: S
-        }, O));
+            "data-test-open-panel-id": c,
+            elementRef: l
+        }, b().apply(void 0, [ p ].concat(z(Object.keys(ae))))),  t().createElement(G.Provider, {
+            value: C
+        }, S));
     }
-    se.propTypes = le;
-    /* harmony default export */    const ce = se;
+    le.propTypes = ae;
+    /* harmony default export */    const oe = le;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
-    function pe(e) {
+    function ie(e) {
         "@babel/helpers - typeof";
-        return pe = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return ie = "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;
-        }, pe(e);
+        }, ie(e);
     }
-    function ue() {
-        return ue = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var n = arguments[t];
-                for (var r in n) {
-                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
-                }
-            }
-            return e;
-        }, ue.apply(null, arguments);
-    }
-    function de(e, t) {
-        var n = Object.keys(e);
+    function se(e, n) {
+        var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var r = Object.getOwnPropertySymbols(e);
-            t && (r = r.filter((function(t) {
-                return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), n.push.apply(n, r);
+            var t = Object.getOwnPropertySymbols(e);
+            n && (t = t.filter((function(n) {
+                return Object.getOwnPropertyDescriptor(e, n).enumerable;
+            }))), r.push.apply(r, t);
         }
-        return n;
+        return r;
     }
-    function fe(e) {
-        for (var t = 1; t < arguments.length; t++) {
-            var n = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? de(Object(n), !0).forEach((function(t) {
-                Se(e, t, n[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : de(Object(n)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+    function ce(e) {
+        for (var n = 1; n < arguments.length; n++) {
+            var r = null != arguments[n] ? arguments[n] : {};
+            n % 2 ? se(Object(r), !0).forEach((function(n) {
+                ue(e, n, r[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : se(Object(r)).forEach((function(n) {
+                Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
             }));
         }
         return e;
     }
-    function be(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    function ue(e, n, r) {
+        return (n = pe(n)) in e ? Object.defineProperty(e, n, {
+            value: r,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[n] = r, e;
     }
-    function ve(e, t) {
-        for (var n = 0; n < t.length; n++) {
-            var r = t[n];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, we(r.key), r);
-        }
+    function pe(e) {
+        var n = de(e, "string");
+        return "symbol" == ie(n) ? n : n + "";
     }
-    function me(e, t, n) {
-        return t && ve(e.prototype, t), n && ve(e, n), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function de(e, n) {
+        if ("object" != ie(e) || !e) return e;
+        var r = e[Symbol.toPrimitive];
+        if (void 0 !== r) {
+            var t = r.call(e, n || "default");
+            if ("object" != ie(t)) return t;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === n ? String : Number)(e);
     }
-    function ye(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    function fe() {
+        return fe = Object.assign ? Object.assign.bind() : function(e) {
+            for (var n = 1; n < arguments.length; n++) {
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && ge(e, t);
-    }
-    function ge(e, t) {
-        return ge = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, ge(e, t);
+            return e;
+        }, fe.apply(null, arguments);
     }
-    function he(e) {
-        var t = xe();
-        return function() {
-            var n, r = Oe(e);
-            if (t) {
-                var a = Oe(this).constructor;
-                n = Reflect.construct(r, arguments, a);
-            } else n = r.apply(this, arguments);
-            return ke(this, n);
-        };
+    function be(e, n) {
+        return he(e) || ge(e, n) || ye(e, n) || ve();
     }
-    function ke(e, t) {
-        if (t && ("object" == pe(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return Ce(e);
+    function ve() {
+        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 Ce(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
+    function ye(e, n) {
+        if (e) {
+            if ("string" == typeof e) return me(e, n);
+            var r = {}.toString.call(e).slice(8, -1);
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? me(e, n) : void 0;
+        }
     }
-    function xe() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (xe = function t() {
-            return !!e;
-        })();
+    function me(e, n) {
+        (null == n || n > e.length) && (n = e.length);
+        for (var r = 0, t = Array(n); r < n; r++) {
+            t[r] = e[r];
+        }
+        return t;
     }
-    function Oe(e) {
-        return Oe = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, Oe(e);
+    function ge(e, n) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var t, a, l, o, i = [], s = !0, c = !1;
+            try {
+                if (l = (r = r.call(e)).next, 0 === n) {
+                    if (Object(r) !== r) return;
+                    s = !1;
+                } else for (;!(s = (t = l.call(r)).done) && (i.push(t.value), i.length !== n); s = !0) {
+                }
+            } catch (e) {
+                c = !0, a = e;
+            } finally {
+                try {
+                    if (!s && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
+                } finally {
+                    if (c) throw a;
+                }
+            }
+            return i;
+        }
     }
-    function Se(e, t, n) {
-        return (t = we(t)) in e ? Object.defineProperty(e, t, {
-            value: n,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = n, e;
+    function he(e) {
+        if (Array.isArray(e)) return e;
     }
-    function we(e) {
-        var t = Pe(e, "string");
-        return "symbol" == pe(t) ? t : t + "";
+    function Se(e, n) {
+        if (null == e) return {};
+        var r, t, a = Ce(e, n);
+        if (Object.getOwnPropertySymbols) {
+            var l = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < l.length; t++) {
+                r = l[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            }
+        }
+        return a;
     }
-    function Pe(e, t) {
-        if ("object" != pe(e) || !e) return e;
-        var n = e[Symbol.toPrimitive];
-        if (void 0 !== n) {
-            var r = n.call(e, t || "default");
-            if ("object" != pe(r)) return r;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function Ce(e, n) {
+        if (null == e) return {};
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
+            }
         }
-        return ("string" === t ? String : Number)(e);
+        return r;
     }
-    /** @public @deprecated Use `CollapsiblePanelChangeHandler` */
-    /** @public @deprecated Use `CollapsiblePanelChangeHandler` */
-    /** @public */    var Ie = {
-        innerBodyStyles: u().object,
-        actions: u().node,
-        children: u().node,
-        defaultOpen: u().bool,
-        description: u().string,
-        disabled: u().bool,
-        elementRef: u().oneOfType([ u().func, u().object ]),
-        headingLevel: u().number,
-        inset: u().bool,
-        onRequestClose: u().func,
-        onRequestOpen: u().func,
-        onChange: u().func,
-        open: u().bool,
-        overflow: u().string,
-        panelId: u().any,
-        renderChildrenWhenCollapsed: u().bool,
-        title: u().node.isRequired,
-        titleWithActions: u().bool
-    };
-    var je = {
-        disabled: false,
-        overflow: "auto",
-        renderChildrenWhenCollapsed: false,
-        titleWithActions: false,
-        inset: false
+    /** @public */    var Oe = {
+        innerBodyStyles: l().object,
+        actions: l().node,
+        appearance: l().oneOf([ "default", "subtle" ]),
+        children: l().node,
+        defaultOpen: l().bool,
+        description: l().string,
+        disabled: l().oneOfType([ l().bool, l().oneOf([ "dimmed", "disabled" ]) ]),
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        headingLevel: l().number,
+        inset: l().bool,
+        onChange: l().func,
+        open: l().bool,
+        overflow: l().string,
+        panelId: l().any,
+        renderChildrenWhenCollapsed: l().bool,
+        title: l().node.isRequired
     };
-    var Ee =  function(e) {
-        ye(n, e);
-        var t = he(n);
+    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" ]);
         // @docs-props-type CollapsiblePanelPropsBase
-                function n(e) {
-            var r;
-            be(this, n);
-            r = t.call(this, e);
-            Se(Ce(r), "controlledExternally", void 0);
-            Se(Ce(r), "containerId", void 0);
-            Se(Ce(r), "toggleId", void 0);
-            Se(Ce(r), "handleRequestClose", (function(e) {
-                var t = r.props, n = t.panelId, a = t.onRequestClose;
-                a === null || a === void 0 ? void 0 : a({
-                    event: e,
-                    panelId: n,
-                    reason: "toggleClick"
-                });
-            }));
-            Se(Ce(r), "handleRequestOpen", (function(e) {
-                var t = r.props, n = t.panelId, a = t.onRequestOpen;
-                a === null || a === void 0 ? void 0 : a({
-                    event: e,
-                    panelId: n,
-                    reason: "toggleClick"
-                });
-            }));
-            Se(Ce(r), "handleChange", (function(e) {
-                var t, n;
-                var a = r.props, o = a.panelId, i = a.onChange;
-                var l = r.isOpen();
-                if (!r.isControlled()) {
-                    r.setState({
-                        animating: true,
-                        open: !l
-                    });
-                }
-                var s = l ? "close" : "open";
-                i === null || i === void 0 ? void 0 : i(e, {
-                    panelId: o,
-                    reason: "toggleClick",
-                    action: s
-                });
-                (t = (n = r.context).onChange) === null || t === void 0 ? void 0 : t.call(n, e, {
-                    panelId: o,
-                    reason: "toggleClick",
-                    action: s
-                });
-                // Maintains backwards compatibility until the `handleRequestClose` and `handleRequestOpen` handlers are removed in SUI-5
-                                if (l) {
-                    r.handleRequestClose(e);
-                } else {
-                    r.handleRequestOpen(e);
-                }
-            }));
-            Se(Ce(r), "handleAnimationEnd", (function() {
-                r.setState({
-                    animating: false
-                });
-            }));
-            r.controlledExternally = o()(e, "open");
-            r.state = fe(fe({}, !r.isControlled() ? {
-                open: e.defaultOpen || false
-            } : undefined), {}, {
-                animating: false
-            });
-            if (false) {}
-            if (false) {}
-            if (false) {}
-            r.containerId = "container-".concat((0, b.createGUID)());
-            r.toggleId = "toggle-".concat((0, b.createGUID)());
-            return r;
-        }
-        // Only testing this in the scenario of a SingleOpenPanelGroup.
-                me(n, [ {
-            key: "componentDidMount",
-            value: function e() {
-                if (false) {}
-            }
-        }, {
-            key: "componentDidUpdate",
-            value: function e(t) {
-                if (this.props.open !== t.open) {
-                    this.setState({
-                        animating: true
-                    });
- // eslint-disable-line react/no-did-update-set-state
-                                }
-                if (false) {}
-                if (false) {}
-            }
-            /**
-     * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
-     * so this.context.openPanelId is used for both the controlled and uncontrolled case.
-     */        }, {
-            key: "isOpen",
-            value: function e() {
-                var e = this.isControlled() ? this.props.open : this.state.open;
-                var t = this.context.openPanelId !== undefined ? this.context.openPanelId === this.props.panelId : e;
-                return t;
+                var x = (0, r.useContext)(G);
+        var E = Object.keys(x).length !== 0;
+        var _ = u()({
+            componentName: "CollapsiblePanel",
+            /* eslint-disable-next-line prefer-rest-params */
+            componentProps: arguments[0],
+            // see SUI-7028
+            defaultValuePropName: "defaultOpen",
+            valuePropName: "open"
+        });
+        var A = (0, r.useState)("container-".concat((0, s.createGUID)())), T = be(A, 1), V = T[0];
+        var U = (0, r.useState)("toggle-".concat((0, s.createGUID)())), z = be(U, 1), X = z[0];
+        var F = !_ ? f || false : undefined;
+        var J = (0, r.useState)(F), K = be(J, 2), Q = K[0], Y = K[1];
+        var Z = (0, r.useState)(false), ee = be(Z, 2), ne = ee[0], re = ee[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.
+   */        var te = (0, r.useCallback)((function() {
+            if (E) {
+                return x.openPanelId === O;
             }
- // Using all three handlers: `handleRequestClose` and `handleRequestOpen` and `handleChange` to test interoperability and maintain backwards compatibility until the open/close handlers are removed in SUI-5
-                }, {
-            key: "isControlled",
-            value: function e() {
-                return this.controlledExternally;
+            return _ ? h : Q;
+        }), [ x.openPanelId, E, _, h, Q, O ]);
+        var ae = d()(h);
+        // Only testing this in the scenario of a SingleOpenPanelGroup.
+                (0, r.useEffect)((function() {
+            if (false) {}
+        }), [ f, E, h ]);
+        (0, r.useEffect)((function() {
+            if (ae != null && h !== ae) {
+                re(true);
             }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this.props, a = t.innerBodyStyles, o = t.actions, i = t.children, s = t.description, p = t.disabled, u = t.elementRef, d = t.headingLevel, m = t.overflow, y = t.renderChildrenWhenCollapsed, g = t.title, h = t.titleWithActions, k = t.inset;
-                var C = this.state.animating;
-                var x = (0, b.createDOMID)("panel-toggle");
-                var O = this.isOpen();
-                var S = {
-                    disabled: p,
-                    onClick: this.handleChange,
-                    id: this.toggleId,
-                    "aria-controls": this.containerId,
-                    "aria-expanded": O,
-                    $open: !!O,
-                    "data-test": "toggle"
-                };
-                
-                return r().createElement(T, ue({
-                    "data-test": "collapsible-panel",
-                    elementRef: u
-                }, c()(this.props, l()(n.propTypes))), h || o != null ?  r().createElement(B, {
-                    $disabled: p
-                },  r().createElement(W, ue({
-                    appearance: "subtle",
-                    "aria-label": (0, v._)("Panel"),
-                    "aria-labelledby": x
-                }, S),  r().createElement(U, {
-                    open: !!O
-                })),  r().createElement($, {
-                    $titleWithActions: h,
-                    "data-test": "title",
-                    id: o != null ? x : undefined
-                }, g), o != null &&  r().createElement(M, null, o)) : 
-                
-                /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
-                r().createElement("span", {
-                    "data-test": "heading",
-                    role: d ? "heading" : undefined,
-                    "aria-level": d
-                },  r().createElement(L, S,  r().createElement(X, null,  r().createElement(U, {
-                    open: !!O
-                })),  r().createElement($, null,  r().createElement("span", {
-                    "data-test": "title"
-                }, g), s &&  r().createElement(G, {
-                    "data-test": "description"
-                }, s)))),  r().createElement(f(), {
-                    outerId: this.containerId,
-                    "aria-labelledby": this.toggleId,
-                    "data-test": "body",
-                    outerStyle: {
-                        overflow: C ? "hidden" : m
-                    },
-                    innerStyle: fe({
-                        tableLayout: "fixed"
-                    }, a),
-                    open: O,
-                    onAnimationEnd: this.handleAnimationEnd,
-                    role: o != null ? "region" : undefined,
-                    renderChildrenWhenCollapsed: y
-                },  r().createElement(H, {
-                    $inset: k
-                }, i)));
+        }), [ h, ae ]);
+        var le = (0, r.useCallback)((function(e) {
+            var n;
+            var r = te();
+            if (!_) {
+                re(true);
+                Y(!r);
             }
-        } ]);
-        return n;
-    }(n.Component);
-    Se(Ee, "propTypes", Ie);
-    Se(Ee, "defaultProps", je);
-    Se(Ee, "contextType", V);
-    /* harmony default export */    const _e = Ee;
+            var t = r ? "close" : "open";
+            g === null || g === void 0 ? void 0 : g(e, {
+                panelId: O,
+                reason: "toggleClick",
+                action: t
+            });
+            (n = x.onChange) === null || n === void 0 ? void 0 : n.call(x, e, {
+                panelId: O,
+                reason: "toggleClick",
+                action: t
+            });
+        }), [ x, _, te, g, O ]);
+        var oe = (0, r.useCallback)((function() {
+            re(false);
+        }), []);
+        var ie = (0, s.createDOMID)("panel-toggle");
+        var se = te();
+        var ue = {
+            disabled: v,
+            onClick: le,
+            id: X,
+            "aria-controls": V,
+            "aria-expanded": se,
+            "data-test": "toggle"
+        };
+        
+        return t().createElement(N, fe({
+            "data-test": "collapsible-panel",
+            elementRef: y,
+            $appearance: o
+        }, j), a != null ?  t().createElement(q, {
+            $appearance: o,
+            $disabled: !!v
+        },  t().createElement(D, fe({
+            appearance: "secondary",
+            "aria-labelledby": ie
+        }, ue),  t().createElement(H, {
+            open: !!se
+        })),  t().createElement(B, {
+            $disabled: !!v,
+            "data-test": "title",
+            id: ie
+        }, w),  t().createElement(L, null, a)) : 
+        
+        /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
+        t().createElement("span", {
+            "data-test": "heading",
+            role: m ? "heading" : undefined,
+            "aria-level": m
+        },  t().createElement(R, fe({
+            $appearance: o
+        }, ue),  t().createElement($, null,  t().createElement(H, {
+            open: !!se
+        })),  t().createElement(B, {
+            $disabled: !!v
+        },  t().createElement("span", {
+            "data-test": "title"
+        }, w), b &&  t().createElement(M, {
+            $disabled: !!v,
+            "data-test": "description"
+        }, b)))),  t().createElement(i(), {
+            outerId: V,
+            "aria-labelledby": X,
+            "data-test": "body",
+            outerStyle: {
+                overflow: ne ? "hidden" : C
+            },
+            innerStyle: ce({
+                tableLayout: "fixed"
+            }, n),
+            open: se,
+            onAnimationEnd: oe,
+            role: a != null ? "region" : undefined,
+            renderChildrenWhenCollapsed: P
+        },  t().createElement(W, {
+            $inset: I
+        }, c)));
+    }
+    Pe.propTypes = Oe;
+    /* harmony default export */    const we = Pe;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
-    module.exports = t;
+    module.exports = n;
     /******/})();