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

package/MessageBar.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var a = r && r.__esModule ? 
+            /******/ var n = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(a, {
-                a
+            e.d(n, {
+                a: n
             });
-            /******/            return a;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, a) => {
-            /******/ for (var i in a) {
-                /******/ if (e.o(a, i) && !e.o(r, i)) {
-                    /******/ Object.defineProperty(r, i, {
+        /******/ e.d = (r, n) => {
+            /******/ for (var t in n) {
+                /******/ if (e.o(n, t) && !e.o(r, t)) {
+                    /******/ Object.defineProperty(r, t, {
                         enumerable: true,
-                        get: a[i]
+                        get: n[t]
                     });
                     /******/                }
                 /******/            }
@@ -61,214 +61,155 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ P
+        default: () => /* reexport */ B
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var i =  e.n(a);
+    const n = require("react");
+    var t =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
-    const s = require("prop-types");
-    var n =  e.n(s);
+    const a = require("prop-types");
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
-    const t = require("@splunk/react-icons/CheckCircle");
-    var o =  e.n(t);
+    const o = require("@splunk/react-icons/CheckCircle");
+    var s =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
     const l = require("@splunk/react-icons/Cross");
     var c =  e.n(l);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
-    const p = require("@splunk/react-icons/ExclamationCircle");
-    var d =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
-    const u = require("@splunk/react-icons/InformationCircle");
-    var b =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
-    const v = require("@splunk/react-icons/ExclamationTriangle");
+    const u = require("@splunk/react-icons/ExclamationTriangle");
+    var p =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
+    const d = require("@splunk/react-icons/InformationCircle");
+    var f =  e.n(d);
+    // CONCATENATED MODULE: external "@splunk/react-icons/InformationDiamond"
+    const v = require("@splunk/react-icons/InformationDiamond");
     var g =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const f = require("@splunk/react-ui/ScreenReaderContent");
-    var h =  e.n(f);
+    const m = require("@splunk/react-ui/ScreenReaderContent");
+    var y =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const x = require("@splunk/ui-utils/i18n");
+    const b = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const y = require("styled-components");
-    var k =  e.n(y);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const m = require("@splunk/react-ui/Clickable");
-    var w =  e.n(m);
+    const C = require("styled-components");
+    var h =  e.n(C);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
+    const w = require("@splunk/react-ui/Button");
+    var S =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const C = require("@splunk/themes");
+    const k = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/MessageBar/MessageBarStyles.ts
-    var O = k().div.withConfig({
+    var q = h().div.withConfig({
         displayName: "MessageBarStyles__MessageBarContent",
         componentId: "sc-1uyhzza-0"
-    })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& button[data-test='link']{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled],[aria-disabled='true']){&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}}&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], C.mixins.reset("inline"), C.variables.contentColorLink, C.variables.borderRadius, (0, 
-    C.pick)({
-        enterprise: {
-            dark: (0, y.css)([ "box-shadow:0 0 0 2px ", ";" ], C.variables.gray80),
-            light: (0, y.css)([ "box-shadow:0 0 0 2px ", ";" ], C.variables.gray25)
-        },
-        prisma: {
-            light: (0, C.pickVariant)("$type", {
-                info: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
-                warning: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
-                error: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white),
-                success: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white)
-            }),
-            dark: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black)
-        }
-    }));
-    var q = k()(w()).withConfig({
-        displayName: "MessageBarStyles__MessageBarCloseWrapper",
+    })([ "", ";", ";grid-column:content;grid-row:1 / -1;max-width:", ";word-wrap:break-word;" ], k.mixins.reset("inline"), k.mixins.typography("body"), k.variables.lineLength);
+    var _ = h()(S()).withConfig({
+        displayName: "MessageBarStyles__StyledCloseButton",
         componentId: "sc-1uyhzza-1"
-    })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], C.mixins.reset("flex"), C.variables.borderRadius, (0, 
-    C.pick)({
-        enterprise: C.variables.spacingXSmall,
-        prisma: "3px"
-    }), (0, C.pick)({
-        enterprise: (0, y.css)([ "margin-top:1px;" ])
-    }), (0, C.pick)({
-        prisma: C.variables.interactiveColorOverlayHover,
-        enterprise: {
-            dark: C.variables.gray30,
-            light: C.variables.gray92
-        }
-    }), (0, C.pick)({
-        prisma: "inherit",
-        enterprise: C.variables.gray80
-    }), (0, C.pick)({
-        enterprise: {
-            dark: C.variables.gray96,
-            light: C.variables.contentColorLink
-        }
-    }), (0, C.pick)({
-        prisma: (0, y.css)([ "background:", ";" ], C.variables.interactiveColorOverlayActive),
-        enterprise: (0, y.css)([ "box-shadow:", ";" ], C.variables.focusShadow)
-    }), (0, C.pick)({
-        prisma: (0, y.css)([ "&:focus{border-radius:", ";", ";}" ], C.variables.borderRadius, (0, 
-        C.pick)({
-            light: (0, C.pickVariant)("$type", {
-                info: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
-                warning: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
-                error: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white),
-                success: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white)
-            }),
-            dark: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black)
-        }))
-    }));
-    var S = k().span.withConfig({
+    })([ "grid-column:close;" ]);
+    var O = h().span.withConfig({
         displayName: "MessageBarStyles__StyledIcon",
         componentId: "sc-1uyhzza-2"
-    })([ "width:20px;height:20px;margin-left:auto;fill:", ";" ], (0, C.pickVariant)("$type", {
-        info: C.variables.notificationColorInfo,
-        success: C.variables.notificationColorPositive,
-        warning: C.variables.notificationColorCaution,
-        error: C.variables.notificationColorNegative
+    })([ "width:20px;height:20px;margin-left:auto;fill:", ";grid-row:1;grid-column:icon;" ], (0, 
+    k.pickVariant)("$type", {
+        info: k.variables.notificationColorInfo,
+        success: k.variables.notificationColorPositive,
+        warning: k.variables.notificationColorCaution,
+        error: k.variables.notificationColorNegative
     }));
-    var _ = k().div.withConfig({
+    var I = h().div.withConfig({
         displayName: "MessageBarStyles__MessageBarWrapper",
         componentId: "sc-1uyhzza-3"
-    })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";background-color:", ";" ], C.mixins.reset("block"), C.variables.spacingSmall, (function(e) {
-        var r = e.$hasCloseButton;
-        return r ? (0, y.css)([ "", "" ], (0, C.pick)({
-            prisma: (0, y.css)([ "padding:0 8px 0 32px;" ]),
-            enterprise: (0, y.css)([ "padding:0 8px 0 38px;" ])
-        })) : (0, y.css)([ "", "" ], (0, C.pick)({
-            prisma: (0, y.css)([ "padding:0 33px 0 32px;" ]),
-            enterprise: (0, y.css)([ "padding:0 26px 0 32px;" ])
-        }));
-    }), C.variables.contentColorActive, (0, C.pickVariant)("$type", {
-        info: C.variables.notificationColorInfoWeak,
-        success: C.variables.notificationColorPositiveWeak,
-        warning: C.variables.notificationColorCautionWeak,
-        error: C.variables.notificationColorNegativeWeak
-    }));
+    })([ "", ";grid-template-columns:[icon] 20px ", " [content] fit-content(", ") minmax(", ",1fr) [close] min-content;grid-template-rows:1lh auto;align-items:center;border:1px solid ", ";border-radius:", ";background-color:", ";padding:", " ", ";width:100%;" ], k.mixins.reset("grid"), k.variables.spacingSmall, k.variables.lineLength, k.variables.spacingSmall, (0, 
+    k.pickVariant)("$type", {
+        info: k.variables.notificationColorInfoStrong,
+        success: k.variables.notificationColorPositiveStrong,
+        warning: k.variables.notificationColorCautionStrong,
+        error: k.variables.notificationColorNegativeStrong
+    }), k.variables.borderRadius, (0, k.pickVariant)("$type", {
+        info: k.variables.notificationColorInfoWeak,
+        success: k.variables.notificationColorPositiveWeak,
+        warning: k.variables.notificationColorCautionWeak,
+        error: k.variables.notificationColorNegativeWeak
+    }), k.variables.spacingSmall, k.variables.spacingMedium);
     // CONCATENATED MODULE: ./src/MessageBar/MessageBar.tsx
-    function j() {
-        return j = Object.assign ? Object.assign.bind() : function(e) {
+    function x() {
+        return x = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var a = arguments[r];
-                for (var i in a) {
-                    ({}).hasOwnProperty.call(a, i) && (e[i] = a[i]);
+                var n = arguments[r];
+                for (var t in n) {
+                    ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
                 }
             }
             return e;
-        }, j.apply(null, arguments);
+        }, x.apply(null, arguments);
     }
-    function R(e, r) {
+    function P(e, r) {
         if (null == e) return {};
-        var a, i, s = z(e, r);
+        var n, t, a = j(e, r);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < n.length; i++) {
-                a = n[i], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (s[a] = e[a]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < i.length; t++) {
+                n = i[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
             }
         }
-        return s;
+        return a;
     }
-    function z(e, r) {
+    function j(e, r) {
         if (null == e) return {};
-        var a = {};
-        for (var i in e) {
-            if ({}.hasOwnProperty.call(e, i)) {
-                if (r.includes(i)) continue;
-                a[i] = e[i];
+        var n = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (r.includes(t)) continue;
+                n[t] = e[t];
             }
         }
-        return a;
+        return n;
     }
-    var B = {
-        children: n().node.isRequired,
-        onRequestClose: n().func,
-        type: n().oneOf([ "info", "success", "warning", "error" ]).isRequired
+    var z = {
+        children: i().node.isRequired,
+        onRequestClose: i().func,
+        type: i().oneOf([ "info", "success", "warning", "error" ]).isRequired
     };
-    var E = Object.freeze({
-        info: (0, x._)("Info"),
-        warning: (0, x._)("Warning"),
-        error: (0, x._)("Alert"),
-        success: (0, x._)("Success")
+    var M = Object.freeze({
+        info: (0, b._)("Info"),
+        warning: (0, b._)("Warning"),
+        error: (0, b._)("Alert"),
+        success: (0, b._)("Success")
     });
-    var I = Object.freeze({
-        info: b(),
+    var E = Object.freeze({
+        info: f(),
         warning: g(),
-        error: d(),
-        success: o()
+        error: p(),
+        success: s()
     });
-    function M(e) {
-        var r = e.children, a = e.elementRef, s = e.onRequestClose, n = e.type, t = R(e, [ "children", "elementRef", "onRequestClose", "type" ]);
+    function R(e) {
+        var r = e.children, n = e.elementRef, a = e.onRequestClose, i = e.type, o = P(e, [ "children", "elementRef", "onRequestClose", "type" ]);
         // @docs-props-type MessageBarPropsBase
-                var o = I[n];
-        var l = E[n];
+                var s = E[i];
+        var l = M[i];
         
-        return i().createElement(_, j({
-            ref: a,
-            $type: n,
+        return t().createElement(I, x({
+            ref: n,
+            $type: i,
             "data-test": "message-bar",
-            "data-test-type": n
-        }, t, {
-            role: "region",
-            $hasCloseButton: Boolean(s)
-        }),  i().createElement(S, {
-            as: o,
-            $type: n,
+            "data-test-type": i
+        }, o, {
+            role: "region"
+        }),  t().createElement(O, {
+            as: s,
+            $type: i,
             variant: "filled",
             "aria-hidden": true,
             "data-test": "icon"
-        }),  i().createElement(h(), null, l),  i().createElement(O, {
-            $type: n,
+        }),  t().createElement(y(), null, l),  t().createElement(q, {
             "data-test": "content"
-        }, r), s &&  i().createElement(q, {
-            $type: n,
-            onClick: s
-        },  i().createElement(c(), {
-            height: "19px",
-            style: {
-                margin: -.5
-            },
-            width: "19px"
-        }),  i().createElement(h(), null, (0, x._)("Close"))));
+        }, r), a &&  t().createElement(_, {
+            appearance: "subtle",
+            onClick: a
+        },  t().createElement(c(), null),  t().createElement(y(), null, (0, b._)("Close"))));
     }
-    M.propTypes = B;
-    /* harmony default export */    const P = M;
+    R.propTypes = z;
+    /* harmony default export */    const B = R;
     // CONCATENATED MODULE: ./src/MessageBar/index.ts
     module.exports = r;
     /******/})();