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

package/Message.js

@@ -70,100 +70,83 @@
     const t = require("prop-types");
     var i =  e.n(t);
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
-    const l = require("@splunk/react-icons/CheckCircle");
-    var s =  e.n(l);
+    const o = require("@splunk/react-icons/CheckCircle");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const o = require("@splunk/react-icons/Cross");
-    var c =  e.n(o);
+    const s = require("@splunk/react-icons/Cross");
+    var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
     const u = require("@splunk/react-icons/ExclamationTriangle");
     var p =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-icons/InformationHexagon"
     const d = require("@splunk/react-icons/InformationHexagon");
-    var v =  e.n(d);
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-icons/SeverityInformation"
-    const f = require("@splunk/react-icons/SeverityInformation");
-    var g =  e.n(f);
+    const v = require("@splunk/react-icons/SeverityInformation");
+    var g =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const y = require("@splunk/react-ui/ScreenReaderContent");
-    var m =  e.n(y);
+    const m = require("@splunk/react-ui/ScreenReaderContent");
+    var y =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const b = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
     const h = require("styled-components");
-    var S =  e.n(h);
+    var w =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const w = require("@splunk/react-ui/Box");
-    var C =  e.n(w);
+    const S = require("@splunk/react-ui/Box");
+    var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const O = require("@splunk/react-ui/Button");
-    var _ =  e.n(O);
+    const x = require("@splunk/react-ui/Button");
+    var _ =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const k = require("@splunk/themes");
+    const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Message/MessageStyles.ts
-    var x = S().div.withConfig({
-        displayName: "MessageStyles__StyledContent",
+    var k = {
+        info: C.variables.statusColorInfo,
+        success: C.variables.statusColorNormal,
+        warning: C.variables.statusColorMedium,
+        error: C.variables.statusColorHigh
+    };
+    var q = w().div.withConfig({
+        displayName: "MessageStyles__StyledTitle",
         componentId: "eg66af-0"
-    })([ "", ";width:100%;", "" ], k.mixins.typography("body"), (function(e) {
-        var r = e.$fillStyle;
-        return !r && (0, h.css)([ "gap:10px;padding-right:", ";" ], k.variables.spacingMedium);
-    }));
-    var q = S().div.withConfig({
-        displayName: "MessageStyles__StyledWrapper",
+    })([ "", ";" ], C.mixins.typography("title5"));
+    var I = w().div.withConfig({
+        displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-1"
+    })([ "", ";width:100%;" ], C.mixins.typography("body"));
+    var M = w().div.withConfig({
+        displayName: "MessageStyles__StyledWrapper",
+        componentId: "eg66af-2"
     })([ "display:flex;align-items:baseline;flex:1;" ]);
-    var I = S()(_()).withConfig({
+    var j = w()(_()).withConfig({
         displayName: "MessageStyles__StyledRemove",
-        componentId: "eg66af-2"
-    })([ "border:none;cursor:pointer;width:", ";height:", ";padding:", ";" ], k.variables.inputHeight, k.variables.inputHeight, k.variables.spacingXSmall);
-    var M = S().span.withConfig({
-        displayName: "MessageStyles__StyledIconWrapper",
         componentId: "eg66af-3"
-    })([ "display:flex;color:", ";" ], (0, k.pickVariant)("$type", {
-        info: k.variables.statusColorInfo,
-        success: k.variables.statusColorNormal,
-        warning: k.variables.statusColorMedium,
-        error: k.variables.statusColorHigh
-    }));
-    var j = S().span.withConfig({
-        displayName: "MessageStyles__StyledIcon",
+    })([ "border:none;cursor:pointer;width:", ";height:", ";padding:", ";" ], C.variables.inputHeight, C.variables.inputHeight, C.variables.spacingXSmall);
+    var E = w().span.withConfig({
+        displayName: "MessageStyles__StyledIconWrapper",
         componentId: "eg66af-4"
-    })([ "", "" ], (function(e) {
-        var r = e.$fillStyle;
-        return r && (0, h.css)([ "height:20px;width:20px;" ]);
-    }));
-    var $ = S()(C()).withConfig({
-        displayName: "MessageStyles__StyledBox",
+    })([ "display:flex;align-items:center;color:", ";height:", ";" ], (0, C.pickVariant)("$type", k), C.variables.inputHeight);
+    var P = w().span.withConfig({
+        displayName: "MessageStyles__StyledIcon",
         componentId: "eg66af-5"
-    })([ "", ";max-width:", ";border-radius:", ";margin-bottom:", ";word-wrap:break-word;line-height:", ";gap:", ";", " ", "" ], k.mixins.reset("flex"), k.variables.lineLength, k.variables.borderRadius, k.variables.spacingSmall, k.variables.lineHeight, (0, 
-    k.pickVariant)("$appearance", {
-        default: k.variables.spacingXSmall,
-        fill: k.variables.spacingMedium
-    }), (function(e) {
-        var r = e.title;
-        return (0, h.css)([ "align-items:", ";" ], r ? "flex-start" : "center");
+    })([ "height:20px;width:20px;margin-block-start:1px;" ]);
+    var R = w()(O()).withConfig({
+        displayName: "MessageStyles__StyledBox",
+        componentId: "eg66af-6"
+    })([ "", ";max-width:", ";border-radius:", ";word-wrap:break-word;align-items:center;&:has(", "){align-items:flex-start;", "{align-items:flex-start;}}gap:", ";", "" ], C.mixins.reset("flex"), C.variables.lineLength, C.variables.borderRadius, q, E, (0, 
+    C.pickVariant)("$appearance", {
+        default: C.variables.spacingXSmall,
+        fill: C.variables.spacingMedium
     }), (function(e) {
-        var r = e.$fillStyle, a = e.$type;
-        var n = {
-            info: k.variables.statusColorInfo,
-            success: k.variables.statusColorNormal,
-            warning: k.variables.statusColorMedium,
-            error: k.variables.statusColorHigh
-        };
-        var t = n[a];
-        return r && (0, h.css)([ "background:linear-gradient( to right,", " 0,", " ", ",", " ", ",", " 100% );box-shadow:", ";padding:", " ", " ", " ", ";" ], t, t, k.variables.spacingSmall, k.variables.backgroundColorPopup, k.variables.spacingSmall, k.variables.backgroundColorPopup, k.variables.embossShadow, k.variables.spacingMedium, k.variables.spacingMedium, k.variables.spacingMedium, k.variables.spacingLarge);
+        var r = e.$appearance, a = e.$type;
+        var n = k[a];
+        return r === "fill" && (0, h.css)([ "border-left:8px solid ", ";background-color:", ";box-shadow:", ";padding:", " ", " ", " ", ";" ], n, C.variables.backgroundColorPopup, C.variables.embossShadow, C.variables.spacingMedium, C.variables.spacingMedium, C.variables.spacingMedium, C.variables.spacingLarge);
     }));
-    // CONCATENATED MODULE: external "@splunk/themes/mixins"
-    const E = require("@splunk/themes/mixins");
-    // CONCATENATED MODULE: ./src/Message/TitleStyles.ts
-    var P = S().div.withConfig({
-        displayName: "TitleStyles__StyledTitle",
-        componentId: "sc-6gbjha-0"
-    })([ "", ";" ], (0, E.typography)("title5"));
     // CONCATENATED MODULE: ./src/Message/Title.tsx
-    function R(e, r) {
+    function N(e, r) {
         if (null == e) return {};
-        var a, n, t = N(e, r);
+        var a, n, t = T(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -172,7 +155,7 @@
         }
         return t;
     }
-    function N(e, r) {
+    function T(e, r) {
         if (null == e) return {};
         var a = {};
         for (var n in e) {
@@ -183,18 +166,18 @@
         }
         return a;
     }
-    var T = {
+    var $ = {
         children: i().node
     };
     /**
  * A title component for use in `Message`.
  */    function H(e) {
-        var r = e.children, a = R(e, [ "children" ]);
+        var r = e.children, a = N(e, [ "children" ]);
         // @docs-props-type TitleProps
                 
-        return n().createElement(P, a, r);
+        return n().createElement(q, a, r);
     }
-    H.propTypes = T;
+    H.propTypes = $;
     /* harmony default export */    const B = H;
     // CONCATENATED MODULE: ./src/Message/Message.tsx
     function V() {
@@ -238,33 +221,32 @@
         type: i().oneOf([ "info", "warning", "error", "success" ])
     };
     var L = Object.freeze({
+        info: g(),
+        warning: f(),
+        error: p(),
+        success: l()
+    });
+    var X = Object.freeze({
         info: (0, b._)("Info"),
         warning: (0, b._)("Warning"),
         error: (0, b._)("Alert"),
         success: (0, b._)("Success")
     });
-    var X = Object.freeze({
-        info: g(),
-        warning: v(),
-        error: p(),
-        success: s()
-    });
     var D =  n().createElement(c(), {
         height: "20px",
         width: "20px"
     });
     function F(e) {
-        var r = e.appearance, t = r === void 0 ? "default" : r, i = e.children, l = e.type, s = l === void 0 ? "warning" : l, o = e.onRequestRemove, c = W(e, [ "appearance", "children", "type", "onRequestRemove" ]);
+        var r = e.appearance, t = r === void 0 ? "default" : r, i = e.children, o = e.type, l = o === void 0 ? "warning" : o, s = e.onRequestRemove, c = W(e, [ "appearance", "children", "type", "onRequestRemove" ]);
         // @docs-props-type MessagePropsBase
                 var u = (0, a.useCallback)((function(e) {
-            o === null || o === void 0 ? void 0 : o(e);
-        }), [ o ]);
-        var p = X[s];
-        var d = t === "fill";
-        var v = t === "default" || t === "fill";
+            s === null || s === void 0 ? void 0 : s(e);
+        }), [ s ]);
+        var p = L[l];
+        var d = X[l];
         // filters out Message.Title from other content
                 var f;
-        var g = n().Children.toArray(i).filter((function(e) {
+        var v = n().Children.toArray(i).filter((function(e) {
             if ( n().isValidElement(e) && e.type === B) {
                 f = e;
                 return false;
@@ -272,25 +254,20 @@
             return true;
         }));
         
-        return n().createElement($, V({
+        return n().createElement(R, V({
             $appearance: t,
-            $fillStyle: d,
-            $hasRemoveIcon: !!o,
-            $type: s,
-            title: f,
-            "data-test-type": s,
+            $hasRemoveIcon: !!s,
+            $type: l,
+            "data-test-type": l,
             "data-test": "message"
-        }, c), v &&  n().createElement(M, {
-            $fillStyle: d,
-            $type: s
-        },  n().createElement(j, {
+        }, c),  n().createElement(E, {
+            $type: l
+        },  n().createElement(P, {
             as: p,
-            $fillStyle: d,
             variant: "filled"
-        }),  n().createElement(m(), null, L[s])),  n().createElement(x, {
-            "data-test": "content",
-            $fillStyle: d
-        }, f,  n().createElement(q, null, g)), o &&  n().createElement(I, {
+        }),  n().createElement(y(), null, d)),  n().createElement(I, {
+            "data-test": "content"
+        }, f,  n().createElement(M, null, v)), s &&  n().createElement(j, {
             "aria-label": "Remove",
             "data-test": "remove",
             appearance: "secondary",