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

package/Message.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var a = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ e.n = n => {
+            /******/ var r = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
             /******/;
-            e.d(a, {
-                a
+            e.d(r, {
+                a: r
             });
-            /******/            return a;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, a) => {
-            /******/ for (var n in a) {
-                /******/ if (e.o(a, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ 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: a[n]
+                        get: r[t]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
         /******/;
     })();
     /******/
@@ -56,251 +56,206 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var n = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(n);
     // EXPORTS
-        e.d(r, {
-        default: () => /* reexport */ G
+        e.d(n, {
+        default: () => /* reexport */ V
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var n =  e.n(a);
+    const r = require("react");
+    var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const t = require("prop-types");
-    var i =  e.n(t);
+    const a = require("prop-types");
+    var i =  e.n(a);
     // 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");
+    // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
+    const d = require("@splunk/react-icons/InformationCircle");
     var v =  e.n(d);
-    // CONCATENATED MODULE: external "@splunk/react-icons/SeverityInformation"
-    const f = require("@splunk/react-icons/SeverityInformation");
-    var g =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/react-icons/InformationDiamond"
+    const f = require("@splunk/react-icons/InformationDiamond");
+    var m =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const y = require("@splunk/react-ui/ScreenReaderContent");
-    var m =  e.n(y);
+    const g = require("@splunk/react-ui/ScreenReaderContent");
+    var y =  e.n(g);
     // 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);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const w = require("@splunk/react-ui/Box");
-    var C =  e.n(w);
+    var w =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const O = require("@splunk/react-ui/Button");
-    var _ =  e.n(O);
+    const S = require("@splunk/react-ui/Button");
+    var O =  e.n(S);
     // 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 _ = {
+        info: C.variables.notificationColorInfo,
+        success: C.variables.notificationColorPositive,
+        warning: C.variables.notificationColorCaution,
+        error: C.variables.notificationColorNegative
+    };
+    var k = 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("title4"));
+    var x = w().div.withConfig({
+        displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-1"
-    })([ "display:flex;align-items:baseline;flex:1;" ]);
-    var I = S()(_()).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
+    })([ "", ";grid-row:1 / -1;grid-column:content;max-width:", ";word-wrap:break-word;&:not(:has(> ", ")){", ";}" ], C.mixins.typography("body"), C.variables.lineLength, k, C.mixins.typography("body", {
+        color: "active"
     }));
-    var j = S().span.withConfig({
+    var q = w().span.withConfig({
         displayName: "MessageStyles__StyledIcon",
+        componentId: "eg66af-2"
+    })([ "fill:", ";grid-row:1;height:20px;width:20px;" ], (0, C.pickVariant)("$type", _));
+    var R = w()(O()).withConfig({
+        displayName: "MessageStyles__StyledRemove",
+        componentId: "eg66af-3"
+    })([ "grid-column:remove;" ]);
+    var j = w().div.withConfig({
+        displayName: "MessageStyles__Styled",
         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",
-        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");
-    }), (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);
+    })([ "", ";grid-template-columns:[icon] 20px ", " [content] auto ", " [remove] min-content;grid-template-rows:1lh auto;align-items:center;padding:", ";", "" ], C.mixins.reset("grid"), C.variables.spacingSmall, C.variables.spacingSmall, C.variables.spacingSmall, (function(e) {
+        var n = e.$appearance, r = e.$type;
+        var t = _[r];
+        return n === "fill" && (0, h.css)([ "background-color:", ";border-left:8px solid ", ";border-radius:", ";box-shadow:", ";grid-template-columns:[icon] 20px ", " [content] fit-content(", ") minmax(", ",1fr) [remove] min-content;padding-inline:", ";" ], C.variables.backgroundColorPopup, t, C.variables.borderRadius, C.variables.embossShadow, C.variables.spacingSmall, C.variables.lineLength, C.variables.spacingSmall, C.variables.spacingMedium);
     }));
-    // 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 I(e, n) {
         if (null == e) return {};
-        var a, n, t = N(e, r);
+        var r, t, a = P(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                a = i[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+            for (t = 0; t < i.length; t++) {
+                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return t;
+        return a;
     }
-    function N(e, r) {
+    function P(e, n) {
         if (null == e) return {};
-        var a = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                a[n] = e[n];
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
         }
-        return a;
+        return r;
     }
-    var T = {
+    var E = {
         children: i().node
     };
     /**
  * A title component for use in `Message`.
- */    function H(e) {
-        var r = e.children, a = R(e, [ "children" ]);
+ */    function M(e) {
+        var n = e.children, r = I(e, [ "children" ]);
         // @docs-props-type TitleProps
                 
-        return n().createElement(P, a, r);
+        return t().createElement(k, r, n);
     }
-    H.propTypes = T;
-    /* harmony default export */    const B = H;
+    M.propTypes = E;
+    /* harmony default export */    const T = M;
     // CONCATENATED MODULE: ./src/Message/Message.tsx
-    function V() {
-        return V = Object.assign ? Object.assign.bind() : function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var a = arguments[r];
-                for (var n in a) {
-                    ({}).hasOwnProperty.call(a, n) && (e[n] = a[n]);
+    function $() {
+        return $ = 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;
-        }, V.apply(null, arguments);
+        }, $.apply(null, arguments);
     }
-    function W(e, r) {
+    function N(e, n) {
         if (null == e) return {};
-        var a, n, t = z(e, r);
+        var r, t, a = z(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                a = i[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+            for (t = 0; t < i.length; t++) {
+                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return t;
+        return a;
     }
-    function z(e, r) {
+    function z(e, n) {
         if (null == e) return {};
-        var a = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                a[n] = e[n];
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
         }
-        return a;
+        return r;
     }
-    var A = {
+    var L = {
         appearance: i().oneOf([ "default", "fill" ]),
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         onRequestRemove: i().func,
         type: i().oneOf([ "info", "warning", "error", "success" ])
     };
-    var L = Object.freeze({
+    var A = Object.freeze({
+        info: v(),
+        warning: m(),
+        error: p(),
+        success: l()
+    });
+    var B = 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(), {
+    var D =  t().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 n = e.appearance, a = n === void 0 ? "default" : n, i = e.children, o = e.elementRef, l = e.onRequestRemove, s = e.type, c = s === void 0 ? "warning" : s, u = N(e, [ "appearance", "children", "elementRef", "onRequestRemove", "type" ]);
         // @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";
-        // filters out Message.Title from other content
-                var f;
-        var g = n().Children.toArray(i).filter((function(e) {
-            if ( n().isValidElement(e) && e.type === B) {
-                f = e;
-                return false;
-            }
-            return true;
-        }));
+                var p = (0, r.useCallback)((function(e) {
+            l === null || l === void 0 ? void 0 : l(e);
+        }), [ l ]);
+        var d = A[c];
+        var v = B[c];
         
-        return n().createElement($, V({
-            $appearance: t,
-            $fillStyle: d,
-            $hasRemoveIcon: !!o,
-            $type: s,
-            title: f,
-            "data-test-type": s,
+        return t().createElement(j, $({
+            ref: o,
+            $appearance: a,
+            $hasRemoveIcon: !!l,
+            $type: c,
+            "data-test-type": c,
             "data-test": "message"
-        }, c), v &&  n().createElement(M, {
-            $fillStyle: d,
-            $type: s
-        },  n().createElement(j, {
-            as: p,
-            $fillStyle: d,
+        }, u),  t().createElement(t().Fragment, null,  t().createElement(q, {
+            as: d,
+            $type: c,
             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, {
+        }),  t().createElement(y(), null, v)),  t().createElement(x, {
+            "data-test": "content"
+        }, i), l &&  t().createElement(R, {
             "aria-label": "Remove",
             "data-test": "remove",
-            appearance: "secondary",
-            onClick: u,
+            appearance: "subtle",
+            onClick: p,
             icon: D
         }));
     }
-    F.propTypes = A;
-    F.Title = B;
-    /* harmony default export */    const G = F;
+    F.propTypes = L;
+    F.Title = T;
+    /* harmony default export */    const V = F;
     // CONCATENATED MODULE: ./src/Message/index.ts
-    module.exports = r;
+    module.exports = n;
     /******/})();