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

package/Card.js

@@ -61,10 +61,10 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Body: () => /* reexport */ v,
-        Footer: () => /* reexport */ k,
-        Header: () => /* reexport */ K,
-        default: () => /* reexport */ qe
+        Body: () => /* reexport */ j,
+        Footer: () => /* reexport */ _,
+        Header: () => /* reexport */ J,
+        default: () => /* reexport */ je
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -80,25 +80,47 @@
     var s =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/themes"
     const u = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/Card/HeaderStyles.ts
+    // The padding here is for the spacing between the Card and its subcomponents.
+    // We apply this to the subcomponents rather than directly to the Card to allow Body's inset prop
+    // to remove spacing around it when false and we cannot do that if the padding is on its parent.
+    var d = (0, a.css)([ "padding:0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}" ], u.variables.spacingXLarge, u.variables.spacingLarge, u.variables.spacingLarge);
+    var f = l().div.withConfig({
+        displayName: "HeaderStyles__StyledTitle",
+        componentId: "eqi6uk-0"
+    })([ "", " ", " margin:0;overflow-wrap:break-word;padding:0;" ], u.mixins.reset("block"), u.mixins.typography("title3"));
+    var p = l().div.withConfig({
+        displayName: "HeaderStyles__StyledSubtitle",
+        componentId: "eqi6uk-1"
+    })([ "", " ", " margin:0;overflow-wrap:break-word;padding:0;" ], u.mixins.reset("block"), u.mixins.typography("body", {
+        color: "active"
+    }));
+    var y = l().div.withConfig({
+        displayName: "HeaderStyles__StyledTitleContainer",
+        componentId: "eqi6uk-2"
+    })([ "", " flex:0 1 auto;", " &:not(:last-child){margin-right:", ";}" ], u.mixins.reset("block"), (function(e) {
+        var r = e.$truncateTitle;
+        return r && (0, a.css)([ "overflow:hidden;& > ", ",& > ", "{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" ], /* sc-sel */ f, /* sc-sel */ p);
+    }), u.variables.spacingSmall);
+    var b = l().div.withConfig({
+        displayName: "HeaderStyles__StyledActionContainer",
+        componentId: "eqi6uk-3"
+    })([ "", " align-items:center;display:flex;flex:0 0 auto;justify-content:space-between;gap:", ";" ], u.mixins.reset("block"), u.variables.spacingSmall);
+    var v = l()(s()).withConfig({
+        displayName: "HeaderStyles__StyledBox",
+        componentId: "eqi6uk-4"
+    })([ "", " align-items:start;display:flex;justify-content:space-between;position:relative;min-height:30px;>:not(", "):not(", "){flex:1 0 auto;}" ], d, /* sc-sel */ y, /* sc-sel */ b);
     // CONCATENATED MODULE: ./src/Card/BodyStyles.ts
-    var p = l()(s()).withConfig({
+    var m = l()(s()).withConfig({
         displayName: "BodyStyles__StyledBox",
         componentId: "sc-1130udp-0"
-    })([ "flex:1 1 auto;overflow:auto;height:100%;", ";", "" ], (function(e) {
+    })([ "", ";overflow:auto;height:100%;" ], (function(e) {
         var r = e.$inset;
-        return r ? (0, a.css)([ "", "" ], (0, u.pick)({
-            enterprise: (0, a.css)([ "padding:", ";&:not(:first-child){padding-top:0;}" ], u.variables.spacingLarge),
-            prisma: {
-                comfortable: (0, a.css)([ "padding:12px 24px;&:first-child{padding-top:28px;}&:last-child{padding-bottom:28px;}" ]),
-                compact: (0, a.css)([ "padding:8px 24px;&:first-child{padding-top:20px;}&:last-child{padding-bottom:20px;}" ])
-            }
-        })) : (0, a.css)([ "padding:0;" ]);
-    }), (0, u.pick)({
-        prisma: (0, a.css)([ "border-radius:", ";" ], u.variables.borderRadius)
+        return r && (0, a.css)([ "", "" ], d);
     }));
     // CONCATENATED MODULE: ./src/Card/Body.tsx
-    function d() {
-        return d = Object.assign ? Object.assign.bind() : function(e) {
+    function g() {
+        return g = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -106,11 +128,11 @@
                 }
             }
             return e;
-        }, d.apply(null, arguments);
+        }, g.apply(null, arguments);
     }
-    function f(e, r) {
+    function h(e, r) {
         if (null == e) return {};
-        var t, n, o = b(e, r);
+        var t, n, o = w(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -119,7 +141,7 @@
         }
         return o;
     }
-    function b(e, r) {
+    function w(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -130,38 +152,32 @@
         }
         return t;
     }
-    var y = {
+    var O = {
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         inset: i().bool
     };
     /**
  * A styled container for `Card` body content.
- */    function m(e) {
-        var r = e.children, t = e.inset, o = t === void 0 ? true : t, i = f(e, [ "children", "inset" ]);
+ */    function S(e) {
+        var r = e.children, t = e.inset, o = t === void 0 ? true : t, i = h(e, [ "children", "inset" ]);
         // @docs-props-type BodyPropsBase
                 
-        return n().createElement(p, d({
+        return n().createElement(m, g({
             "data-test": "body",
             $inset: o
         }, i), r);
     }
-    m.propTypes = y;
-    /* harmony default export */    const v = m;
+    S.propTypes = O;
+    /* harmony default export */    const j = S;
     // CONCATENATED MODULE: ./src/Card/FooterStyles.ts
-    var h = l()(s()).withConfig({
+    var x = l()(s()).withConfig({
         displayName: "FooterStyles__StyledBox",
         componentId: "sc-1yu3r4s-0"
-    })([ "", " ", ";text-align:right;" ], u.mixins.typography("body"), (0, u.pick)({
-        enterprise: (0, a.css)([ "padding:", ";&:first-child{border-top:none;}" ], u.variables.spacingLarge),
-        prisma: {
-            comfortable: (0, a.css)([ "padding:24px;" ]),
-            compact: "padding: 18px 24px"
-        }
-    }));
+    })([ "", " ", " text-align:right;align-self:end;" ], u.mixins.typography("body"), d);
     // CONCATENATED MODULE: ./src/Card/Footer.tsx
-    function g() {
-        return g = Object.assign ? Object.assign.bind() : function(e) {
+    function k() {
+        return k = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -169,11 +185,11 @@
                 }
             }
             return e;
-        }, g.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
-    function w(e, r) {
+    function C(e, r) {
         if (null == e) return {};
-        var t, n, o = O(e, r);
+        var t, n, o = P(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -182,7 +198,7 @@
         }
         return o;
     }
-    function O(e, r) {
+    function P(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -193,84 +209,39 @@
         }
         return t;
     }
-    var x = {
+    var E = {
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ])
     };
     /**
  * A styled container for `Card` footer content.
- */    function S(e) {
-        var r = e.children, t = w(e, [ "children" ]);
+ */    function T(e) {
+        var r = e.children, t = C(e, [ "children" ]);
         // @docs-props-type FooterPropsBase
                 
-        return n().createElement(h, g({
+        return n().createElement(x, k({
             "data-test": "footer"
         }, t), r);
     }
-    S.propTypes = x;
-    /* harmony default export */    const k = S;
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const j = require("@splunk/ui-utils/i18n");
+    T.propTypes = E;
+    /* harmony default export */    const _ = T;
     // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeVertical"
-    const C = require("@splunk/react-icons/DotsThreeVertical");
-    var P =  e.n(C);
+    const I = require("@splunk/react-icons/DotsThreeVertical");
+    var q =  e.n(I);
     // CONCATENATED MODULE: external "@splunk/react-ui/Anchor"
-    const _ = require("@splunk/react-ui/Anchor");
-    var E =  e.n(_);
+    const N = require("@splunk/react-ui/Anchor");
+    var R =  e.n(N);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
+    const A = require("@splunk/react-ui/Button");
+    var W =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const T = require("@splunk/react-ui/Dropdown");
-    var I =  e.n(T);
+    const B = require("@splunk/react-ui/Dropdown");
+    var H =  e.n(B);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-    const R = require("@splunk/react-ui/Tooltip");
-    var q =  e.n(R);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const N = require("@splunk/react-ui/Button");
-    var A =  e.n(N);
-    // CONCATENATED MODULE: ./src/Card/HeaderStyles.ts
-    var H = l().div.withConfig({
-        displayName: "HeaderStyles__StyledTitle",
-        componentId: "eqi6uk-0"
-    })([ "", " ", " margin:0;overflow-wrap:break-word;padding:0;" ], u.mixins.reset("block"), u.mixins.typography("title3"));
-    var B = l().div.withConfig({
-        displayName: "HeaderStyles__StyledSubtitle",
-        componentId: "eqi6uk-1"
-    })([ "", " ", " margin:0;overflow-wrap:break-word;padding:0;" ], u.mixins.reset("block"), u.mixins.typography("body", {
-        color: "active"
-    }));
-    var W = l().div.withConfig({
-        displayName: "HeaderStyles__StyledTitleContainer",
-        componentId: "eqi6uk-2"
-    })([ "", " flex:0 1 auto;", " &:not(:last-child){margin-right:", ";}" ], u.mixins.reset("block"), (function(e) {
-        var r = e.$truncateTitle;
-        return r && (0, a.css)([ "overflow:hidden;& > ", ",& > ", "{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" ], /* sc-sel */ H, /* sc-sel */ B);
-    }), u.variables.spacingSmall);
-    var $ = l().div.withConfig({
-        displayName: "HeaderStyles__StyledActionContainer",
-        componentId: "eqi6uk-3"
-    })([ "", " align-items:center;display:flex;flex:0 0 auto;justify-content:space-between;", ";" ], u.mixins.reset("block"), (0, 
-    u.pick)({
-        prisma: {
-            comfortable: (0, a.css)([ "margin-right:-12px;margin-top:-4px;" ]),
-            compact: (0, a.css)([ "margin-right:-12px;margin-top:0;" ])
-        }
-    }));
-    var D = l()(A()).withConfig({
-        displayName: "HeaderStyles__StyledSecondaryAction",
-        componentId: "eqi6uk-4"
-    })([ "margin-left:10px;" ]);
-    var F = l()(s()).withConfig({
-        displayName: "HeaderStyles__StyledBox",
-        componentId: "eqi6uk-5"
-    })([ "align-items:start;display:flex;flex:0 0 auto;justify-content:space-between;position:relative;min-height:30px;", " ", " >:not(", "):not(", "){flex:1 0 auto;}" ], (0, 
-    u.pick)({
-        enterprise: (0, a.css)([ "padding:", ";" ], u.variables.spacingLarge),
-        prisma: {
-            comfortable: (0, a.css)([ "padding:16px 24px;" ]),
-            compact: (0, a.css)([ "padding:12px 24px;" ])
-        }
-    }), (0, u.pick)({
-        prisma: (0, a.css)([ "border-top-left-radius:", ";border-top-right-radius:", ";" ], u.variables.borderRadius, u.variables.borderRadius)
-    }), /* sc-sel */ W, /* sc-sel */ $);
+    const $ = require("@splunk/react-ui/Tooltip");
+    var D =  e.n($);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const F = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Card/Header.tsx
     function L(e, r) {
         if (null == e) return {};
@@ -318,102 +289,73 @@
     // The order of the interfaces is necessary to maintain proper error messages: HeaderWithActions then HeaderWithActionsRenderProp
     // If the actions comes first the error will report that actions should be undefined
     // when we want actions to be the intended use case
-        var z =  n().createElement(P(), null);
+        var X =  n().createElement(q(), null);
     // `forwardRef` is used to enable focus on toggle when Dropdown is closing
-        var G =  n().forwardRef((function(e, r) {
+        var z =  n().forwardRef((function(e, r) {
         
-        return n().createElement(q(), U({
-            content: (0, j._)("Actions"),
+        return n().createElement(D(), U({
+            content: (0, F._)("Actions"),
             contentRelationship: "label"
-        }, e),  n().createElement(D, {
+        }, e),  n().createElement(W(), {
             appearance: "secondary",
             "data-test": "actions-secondary-toggle",
-            icon: z,
+            icon: X,
             elementRef: r
         }));
     }));
     /**
  * A styled container for `Card` header content.
- */    function J(e) {
-        var r = e.actions, t = e.actionPrimary, o = e.actionsSecondary, i = e.anchor, a = e.children, l = e.subtitle, c = e.title, s = e.truncateTitle, p = s === void 0 ? true : s, d = L(e, [ "actions", "actionPrimary", "actionsSecondary", "anchor", "children", "subtitle", "title", "truncateTitle" ]);
+ */    function G(e) {
+        var r = e.actions, t = e.actionPrimary, o = e.actionsSecondary, i = e.anchor, a = e.children, l = e.subtitle, c = e.title, s = e.truncateTitle, u = s === void 0 ? true : s, d = L(e, [ "actions", "actionPrimary", "actionsSecondary", "anchor", "children", "subtitle", "title", "truncateTitle" ]);
         // @docs-props-type HeaderPropsBase
-                var f = (0, u.useSplunkTheme)(), b = f.family;
-        var y = b === "prisma" ? "right" : "below";
-        if (false) {}
+                if (false) {}
         var m;
         if (r) {
             m = r();
         } else if (t || o) {
-            m =  n().createElement(n().Fragment, null, t, o &&  n().createElement(I(), {
-                defaultPlacement: y,
-                toggle:  n().createElement(G, null)
+            m =  n().createElement(n().Fragment, null, t, o &&  n().createElement(H(), {
+                toggle:  n().createElement(z, null)
             }, o));
         }
         
-        return n().createElement(F, U({
+        return n().createElement(v, U({
             "data-test": "header"
-        }, d), (c || l) &&  n().createElement(W, {
-            $truncateTitle: p
-        }, c &&  n().createElement(H, null, i ?  n().createElement(E(), {
+        }, d), (c || l) &&  n().createElement(y, {
+            $truncateTitle: u
+        }, c &&  n().createElement(f, null, i ?  n().createElement(R(), {
             name: i
-        }, c) : c), l &&  n().createElement(B, null, l)), a, m &&  n().createElement($, null, m));
+        }, c) : c), l &&  n().createElement(p, null, l)), a, m &&  n().createElement(b, null, m));
     }
-    J.propTypes = V;
-    /* harmony default export */    const K = J;
+    G.propTypes = V;
+    /* harmony default export */    const J = G;
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const Q = require("@splunk/react-ui/Clickable");
-    var X =  e.n(Q);
+    const K = require("@splunk/react-ui/Clickable");
+    var Q =  e.n(K);
     // CONCATENATED MODULE: ./src/Card/CardStyles.ts
     var Y = "0.2s";
-    var Z = (0, a.css)([ "", ";background-color:", ";flex-direction:column;align-items:stretch;min-width:100px;flex:1;vertical-align:top;", " transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";&[data-clickable='true']{cursor:pointer;", " &:hover{", "}&:focus{", "}}" ], u.mixins.reset("inline-flex"), u.variables.backgroundColorSection, (0, 
-    u.pick)({
-        enterprise: (0, a.css)([ "border:1px solid ", ";" ], u.variables.borderLightColor),
-        prisma: (0, a.css)([ "border-radius:", ";box-shadow:", ";" ], u.variables.borderRadius, u.variables.embossShadow)
-    }), Y, Y, Y, Y, Y, Y, Y, (function(e) {
+    var Z = (0, a.css)([ "", ";gap:", " 0;grid-template-rows:min-content;background-color:", ";min-width:100px;flex:1;vertical-align:top;border:2px solid ", ";border-radius:", ";box-shadow:", ";transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";&[data-clickable='true']{cursor:pointer;", " &:hover{background-color:", ";box-shadow:", ";", "{text-decoration:underline;}}&:focus{box-shadow:", ";", "{text-decoration:underline;}}}" ], u.mixins.reset("inline-grid"), u.variables.spacingLarge, u.variables.backgroundColorSection, u.variables.borderColorWeak, u.variables.borderRadius, u.variables.embossShadow, Y, Y, Y, Y, Y, Y, Y, (function(e) {
         var r = e.$selected;
-        return r && (0, u.pick)({
-            enterprise: (0, a.css)([ "border-color:", ";" ], u.variables.focusColor),
-            prisma: (0, a.css)([ "background-color:", ";" ], u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlaySelected))
-        });
-    }), (0, u.pick)({
-        enterprise: (0, a.css)([ "box-shadow:", ";" ], u.variables.overlayShadow),
-        prisma: (0, a.css)([ "box-shadow:", ";background-color:", ";" ], u.variables.embossShadow, u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlayHover))
-    }), (0, u.pick)({
-        enterprise: (0, a.css)([ "box-shadow:", ";" ], u.variables.focusShadow),
-        prisma: (0, a.css)([ "box-shadow:", ",", ";background-color:", ";" ], u.variables.embossShadow, u.variables.focusShadow, u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlayHover))
-    }));
+        return r && (0, a.css)([ "background-color:", ";" ], u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlaySelected));
+    }), u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlayHover), u.variables.overlayShadow, /* sc-sel */ f, u.variables.focusShadow, /* sc-sel */ f);
     var ee = l().article.withConfig({
         displayName: "CardStyles__Styled",
         componentId: "ola3x0-0"
     })([ "", "" ], Z);
-    var re = l()(X()).withConfig({
+    var re = l()(Q()).withConfig({
         displayName: "CardStyles__StyledClickable",
         componentId: "ola3x0-1"
     })([ "", "" ], Z);
-    /* A child element we add to <button>s to make flexbox work.
-   Without this wrapper element, child elements won't flex
-   in Firefox.
-   This unfortunately exposes some fragility in IE (e.g., adding
-   a flex: 1 style here will cause the card to collapse) so test
-   across the supported browsers if making a change here.
-*/    var te = l().div.withConfig({
-        displayName: "CardStyles__StyledFirefoxFlexHack",
-        componentId: "ola3x0-2"
-    })([ "display:flex;flex:1 1 auto;flex-direction:column;align-items:stretch;justify-content:stretch;height:100%;", "" ], (0, 
-    u.pick)({
-        prisma: (0, a.css)([ "border-radius:", ";" ], u.variables.borderRadius)
-    }));
     // CONCATENATED MODULE: ./src/Card/Card.tsx
-    function ne(e) {
+    function te(e) {
         "@babel/helpers - typeof";
-        return ne = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return te = "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;
-        }, ne(e);
+        }, te(e);
     }
-    function oe() {
-        return oe = Object.assign ? Object.assign.bind() : function(e) {
+    function ne() {
+        return ne = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -421,29 +363,29 @@
                 }
             }
             return e;
-        }, oe.apply(null, arguments);
+        }, ne.apply(null, arguments);
     }
-    function ie(e, r) {
-        return ue(e) || se(e, r) || le(e, r) || ae();
+    function oe(e, r) {
+        return se(e) || ce(e, r) || ae(e, r) || ie();
     }
-    function ae() {
+    function ie() {
         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 le(e, r) {
+    function ae(e, r) {
         if (e) {
-            if ("string" == typeof e) return ce(e, r);
+            if ("string" == typeof e) return le(e, r);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? ce(e, r) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? le(e, r) : void 0;
         }
     }
-    function ce(e, r) {
+    function le(e, r) {
         (null == r || r > e.length) && (r = e.length);
         for (var t = 0, n = Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function se(e, r) {
+    function ce(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var n, o, i, a, l = [], c = !0, s = !1;
@@ -465,75 +407,10 @@
             return l;
         }
     }
-    function ue(e) {
+    function se(e) {
         if (Array.isArray(e)) return e;
     }
-    function pe(e, r) {
-        if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
-    }
-    function de(e, r) {
-        for (var t = 0; t < r.length; t++) {
-            var n = r[t];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, ke(n.key), n);
-        }
-    }
-    function fe(e, r, t) {
-        return r && de(e.prototype, r), t && de(e, t), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function be(e, r) {
-        if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(r && r.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), r && ye(e, r);
-    }
-    function ye(e, r) {
-        return ye = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
-            return e.__proto__ = r, e;
-        }, ye(e, r);
-    }
-    function me(e) {
-        var r = ge();
-        return function() {
-            var t, n = we(e);
-            if (r) {
-                var o = we(this).constructor;
-                t = Reflect.construct(n, arguments, o);
-            } else t = n.apply(this, arguments);
-            return ve(this, t);
-        };
-    }
-    function ve(e, r) {
-        if (r && ("object" == ne(r) || "function" == typeof r)) return r;
-        if (void 0 !== r) throw new TypeError("Derived constructors may only return object or undefined");
-        return he(e);
-    }
-    function he(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function ge() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (ge = function r() {
-            return !!e;
-        })();
-    }
-    function we(e) {
-        return we = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, we(e);
-    }
-    function Oe(e, r) {
+    function ue(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -543,42 +420,42 @@
         }
         return t;
     }
-    function xe(e) {
+    function de(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? Oe(Object(t), !0).forEach((function(r) {
-                Se(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Oe(Object(t)).forEach((function(r) {
+            r % 2 ? ue(Object(t), !0).forEach((function(r) {
+                fe(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ue(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function Se(e, r, t) {
-        return (r = ke(r)) in e ? Object.defineProperty(e, r, {
+    function fe(e, r, t) {
+        return (r = pe(r)) in e ? Object.defineProperty(e, r, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[r] = t, e;
     }
-    function ke(e) {
-        var r = je(e, "string");
-        return "symbol" == ne(r) ? r : r + "";
+    function pe(e) {
+        var r = ye(e, "string");
+        return "symbol" == te(r) ? r : r + "";
     }
-    function je(e, r) {
-        if ("object" != ne(e) || !e) return e;
+    function ye(e, r) {
+        if ("object" != te(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var n = t.call(e, r || "default");
-            if ("object" != ne(n)) return n;
+            if ("object" != te(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
     }
-    function Ce(e, r) {
+    function be(e, r) {
         if (null == e) return {};
-        var t, n, o = Pe(e, r);
+        var t, n, o = ve(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -587,7 +464,7 @@
         }
         return o;
     }
-    function Pe(e, r) {
+    function ve(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -598,7 +475,7 @@
         }
         return t;
     }
-    /** @public */    var _e = {
+    /** @public */    var me = {
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         /** @private */
@@ -614,15 +491,12 @@
         value: i().any,
         tag: i().oneOf([ "article", "div", "aside", "section" ])
     };
-    var Ee = {
-        openInNewContext: false
-    };
-    function Te(e) {
+    function ge(e) {
         return !!e.onClick || !!e.to;
     }
-    function Ie(e) {
-        var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.style, i = Ce(e, [ "margin", "maxWidth", "minWidth", "style" ]);
-        var a = xe({
+    function he(e) {
+        var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.style, i = be(e, [ "margin", "maxWidth", "minWidth", "style" ]);
+        var a = de({
             minWidth: n,
             maxWidth: t,
             margin: r
@@ -633,65 +507,48 @@
         };
         return [ l, i ];
     }
-    var Re =  function(e) {
-        be(t, e);
-        var r = me(t);
-        function t() {
-            var e;
-            pe(this, t);
-            for (var n = arguments.length, o = new Array(n), i = 0; i < n; i++) {
-                o[i] = arguments[i];
-            }
-            e = r.call.apply(r, [ this ].concat(o));
-            Se(he(e), "handleCardClick", (function(r) {
-                var t, n;
-                var o = e.props, i = o.selected, a = o.value;
-                (t = (n = e.props).onClick) === null || t === void 0 ? void 0 : t.call(n, r, {
-                    selected: i || false,
-                    value: a
-                });
-            }));
-            return e;
-        }
- // @docs-props-type CardPropsBase
-                fe(t, [ {
-            key: "render",
-            value: function e() {
-                if (false) {}
-                if (Te(this.props)) {
-                    var r = Ie(this.props), t = ie(r, 2), o = t[0], i = t[1];
-                    var a = i.children, l = i.elementRef, c = i.onClick, s = i.openInNewContext, u = i.selected, p = i.to, d = Ce(i, [ "children", "elementRef", "onClick", "openInNewContext", "selected", "to" ]);
-                    
-                    return n().createElement(re, oe({
-                        "data-clickable": true,
-                        $selected: u || false,
-                        elementRef: l
-                    }, o, d, {
-                        onClick: c ? this.handleCardClick : undefined,
-                        openInNewContext: s,
-                        to: p || undefined
-                    }),  n().createElement(te, null, a));
-                }
-                var f = Ie(this.props), b = ie(f, 2), y = b[0], m = b[1];
-                var v = m.children, h = m.elementRef, g = m.tag, w = Ce(m, [ "children", "elementRef", "tag" ]);
-                
-                return n().createElement(ee, oe({
-                    $selected: false,
-                    ref: h,
-                    as: g
-                }, y, w, {
-                    onClick: undefined
-                }), v);
-            }
-        } ]);
-        return t;
-    }(t.Component);
-    Se(Re, "propTypes", _e);
-    Se(Re, "defaultProps", Ee);
-    Se(Re, "Header", K);
-    Se(Re, "Body", v);
-    Se(Re, "Footer", k);
-    /* harmony default export */    const qe = Re;
+    function we(e) {
+        var r = he(e), o = oe(r, 2), i = o[0], a = o[1];
+        var l = a.children, c = a.elementRef, s = a.onClick, u = a.openInNewContext, d = a.selected, f = a.to, p = a.value, y = be(a, [ "children", "elementRef", "onClick", "openInNewContext", "selected", "to", "value" ]);
+        var b = (0, t.useCallback)((function(e) {
+            s === null || s === void 0 ? void 0 : s(e, {
+                selected: d || false,
+                value: p
+            });
+        }), [ s, d, p ]);
+        
+        return n().createElement(re, ne({
+            "data-clickable": true,
+            $selected: d || false,
+            elementRef: c
+        }, i, y, {
+            onClick: s ? b : undefined,
+            openInNewContext: u,
+            to: f || undefined
+        }), l);
+    }
+    function Oe(e) {
+        var r = he(e), t = oe(r, 2), o = t[0], i = t[1];
+        var a = i.children, l = i.elementRef, c = i.tag, s = be(i, [ "children", "elementRef", "tag" ]);
+        
+        return n().createElement(ee, ne({
+            $selected: false,
+            ref: l,
+            as: c
+        }, o, s, {
+            onClick: undefined
+        }), a);
+    }
+    function Se(e) {
+        // @docs-props-type CardPropsBase
+        if (false) {}
+        return ge(e) ?  n().createElement(we, e) :  n().createElement(Oe, e);
+    }
+    Se.propTypes = me;
+    Se.Header = J;
+    Se.Body = j;
+    Se.Footer = _;
+    /* harmony default export */    const je = Se;
     // CONCATENATED MODULE: ./src/Card/index.ts
     module.exports = r;
     /******/})();