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

package/Message.js

@@ -61,267 +61,118 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Link: () => /* reexport */ z,
-        default: () => /* reexport */ ue
+        default: () => /* reexport */ G
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
     var n =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var s =  e.n(i);
+    const t = require("prop-types");
+    var i =  e.n(t);
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
-    const o = require("@splunk/react-icons/CheckCircle");
-    var t =  e.n(o);
+    const l = require("@splunk/react-icons/CheckCircle");
+    var s =  e.n(l);
     // 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/enterprise/Close"
-    const p = require("@splunk/react-icons/enterprise/Close");
-    var u =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
-    const v = require("@splunk/react-icons/ExclamationCircle");
-    var d =  e.n(v);
-    // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
-    const b = require("@splunk/react-icons/InformationCircle");
-    var f =  e.n(b);
+    const o = require("@splunk/react-icons/Cross");
+    var c =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
-    const g = require("@splunk/react-icons/ExclamationTriangle");
-    var m =  e.n(g);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Error"
-    const y = require("@splunk/react-icons/enterprise/Error");
-    var k =  e.n(y);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/InfoCircle"
-    const h = require("@splunk/react-icons/enterprise/InfoCircle");
-    var C =  e.n(h);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Success"
-    const x = require("@splunk/react-icons/enterprise/Success");
-    var w =  e.n(x);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Warning"
-    const S = require("@splunk/react-icons/enterprise/Warning");
-    var O =  e.n(S);
-    // CONCATENATED MODULE: external "@splunk/react-ui/MessageBar"
-    const q = require("@splunk/react-ui/MessageBar");
-    var _ =  e.n(q);
+    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);
+    // CONCATENATED MODULE: external "@splunk/react-icons/SeverityInformation"
+    const f = require("@splunk/react-icons/SeverityInformation");
+    var g =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const E = require("@splunk/react-ui/ScreenReaderContent");
-    var P =  e.n(E);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const j = require("@splunk/themes");
+    const y = require("@splunk/react-ui/ScreenReaderContent");
+    var m =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const I = require("@splunk/ui-utils/i18n");
+    const b = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const R = require("styled-components");
-    var T =  e.n(R);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Link"
-    const $ = require("@splunk/react-ui/Link");
-    var L =  e.n($);
-    // CONCATENATED MODULE: ./src/Message/LinkStyles.ts
-    var M = T()(L()).withConfig({
-        displayName: "LinkStyles__StyledLink",
-        componentId: "w06zjv-0"
-    })([ "" ]);
-    // CONCATENATED MODULE: ./src/Message/Link.tsx
-    function A(e, r) {
-        if (null == e) return {};
-        var a, n, i = N(e, r);
-        if (Object.getOwnPropertySymbols) {
-            var s = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < s.length; n++) {
-                a = s[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (i[a] = e[a]);
-            }
-        }
-        return i;
-    }
-    function N(e, r) {
-        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];
-            }
-        }
-        return a;
-    }
-    var W = {
-        children: s().node,
-        elementRef: s().oneOfType([ s().func, s().object ]),
-        openInNewContext: s().bool,
-        to: s().string
-    };
-    /**
- * @deprecated `Message.Link` is deprecated and will be removed in a future major version. Use `Link` instead.
- *
- * A `Link` styled to work with `Message`'s `banner` appearance.
- */    function X(e) {
-        var r = e.children, a = A(e, [ "children" ]);
-        // @docs-props-type LinkPropsBase
-                if (false) {}
-        
-        return n().createElement(M, a, r);
-    }
-    X.propTypes = W;
-    /* harmony default export */    const z = X;
+    const h = require("styled-components");
+    var S =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const V = require("@splunk/react-ui/Box");
-    var B =  e.n(V);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const D = require("@splunk/react-ui/Clickable");
-    var H =  e.n(D);
-    // CONCATENATED MODULE: ./src/Message/TitleStyles.ts
-    var F = T().p.withConfig({
-        displayName: "TitleStyles__StyledTitle",
-        componentId: "sc-6gbjha-0"
-    })([ "", " ", "" ], j.mixins.reset("block"), (0, j.pick)({
-        prisma: (0, R.css)([ "font-size:14px;line-height:20px;" ])
-    }));
+    const w = require("@splunk/react-ui/Box");
+    var C =  e.n(w);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
+    const O = require("@splunk/react-ui/Button");
+    var _ =  e.n(O);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const k = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Message/MessageStyles.ts
-    var G = T().div.withConfig({
+    var x = S().div.withConfig({
         displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-0"
-    })([ "width:100%;", ";", " ", ";" ], (0, j.pick)({
-        prisma: (0, R.css)([ "padding:", " 0;color:", ";" ], j.variables.spacingMedium, j.variables.contentColorActive),
-        enterprise: (0, R.css)([ "padding:12px 0;" ])
-    }), (0, j.pick)({
-        prisma: (0, R.css)([ "padding-left:", ";" ], j.variables.spacingXSmall),
-        enterprise: (0, R.css)([ "padding-left:15px;" ])
-    }), (function(e) {
+    })([ "", ";width:100%;", "" ], k.mixins.typography("body"), (function(e) {
         var r = e.$fillStyle;
-        return r && (0, j.pick)({
-            prisma: (0, R.css)([ "padding-left:", ";" ], j.variables.spacingMedium)
-        });
+        return !r && (0, h.css)([ "gap:10px;padding-right:", ";" ], k.variables.spacingMedium);
     }));
-    var J = T().div.withConfig({
+    var q = S().div.withConfig({
         displayName: "MessageStyles__StyledWrapper",
         componentId: "eg66af-1"
     })([ "display:flex;align-items:baseline;flex:1;" ]);
-    var K = T()(H()).withConfig({
+    var I = S()(_()).withConfig({
         displayName: "MessageStyles__StyledRemove",
         componentId: "eg66af-2"
-    })([ "", ";border:1px solid transparent;border-radius:", ";color:", ";", ";cursor:pointer;position:absolute;", " padding:8px;&:hover,&:focus{background:", ";color:", ";}&:active{", ";}", "" ], j.mixins.reset("flex"), (0, 
-    j.pick)({
-        prisma: "50%",
-        enterprise: j.variables.borderRadius
-    }), (0, j.pick)({
-        prisma: j.variables.contentColorMuted,
-        enterprise: {
-            dark: j.variables.gray96,
-            light: j.variables.gray45
-        }
-    }), (function(e) {
-        var r = e.$appearance;
-        return r === "banner" && (0, j.pick)({
-            prisma: (0, R.css)([ "color:", ";" ], j.variables.contentColorInverted)
-        });
-    }), (0, j.pick)({
-        prisma: (0, R.css)([ "top:3px;right:2px;" ]),
-        enterprise: (0, R.css)([ "top:8px;right:8px;" ])
-    }), (0, j.pick)({
-        prisma: j.variables.interactiveColorOverlayHover,
-        enterprise: {
-            dark: j.variables.gray30,
-            light: j.variables.gray92
-        }
-    }), (0, j.pick)({
-        enterprise: {
-            dark: j.variables.gray96,
-            light: j.variables.linkColor
-        },
-        prisma: j.variables.contentColorActive
-    }), (0, j.pick)({
-        prisma: (0, R.css)([ "background:", ";" ], j.variables.interactiveColorOverlayActive),
-        enterprise: (0, R.css)([ "box-shadow:", ";" ], j.variables.focusShadow)
-    }), (0, j.pick)({
-        prisma: (0, R.css)([ "&:focus{box-shadow:0 0 0 3px ", ";}" ], j.variables.focusColor)
-    }));
-    var Q = T().span.withConfig({
+    })([ "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"
-    })([ "position:relative;min-width:", ";text-align:center;color:", ";", " ", "" ], (0, 
-    j.pick)({
-        prisma: j.variables.spacingXLarge,
-        enterprise: "25px"
-    }), j.variables.white, (0, j.pick)({
-        enterprise: (0, R.css)([ "top:-2px;" ]),
-        prisma: (0, R.css)([ "top:-1.8px;" ])
-    }), (0, j.pickVariant)("$type", {
-        info: (0, R.css)([ "color:", ";" ], (0, j.pick)({
-            prisma: j.variables.contentColorMuted,
-            enterprise: j.variables.infoColor
-        })),
-        success: (0, R.css)([ "color:", ";" ], j.variables.accentColorPositive),
-        warning: (0, R.css)([ "color:", ";" ], j.variables.accentColorWarning),
-        error: (0, R.css)([ "color:", ";" ], j.variables.accentColorNegative)
+    })([ "display:flex;color:", ";" ], (0, k.pickVariant)("$type", {
+        info: k.variables.statusColorInfo,
+        success: k.variables.statusColorNormal,
+        warning: k.variables.statusColorMedium,
+        error: k.variables.statusColorHigh
     }));
-    var U = T()(B()).withConfig({
-        displayName: "MessageStyles__StyledBox",
+    var j = S().span.withConfig({
+        displayName: "MessageStyles__StyledIcon",
         componentId: "eg66af-4"
-    })([ "", ";align-items:baseline;position:relative;border-radius:", ";margin-bottom:", ";", " word-wrap:break-word;", " ", "" ], j.mixins.reset("flex"), (0, 
-    j.pick)({
-        prisma: j.variables.borderRadius,
-        enterprise: "5px"
-    }), j.variables.spacingSmall, (0, j.pickVariant)("$hasRemoveIcon", {
-        true: {
-            prisma: (0, R.css)([ "padding-right:", ";" ], j.variables.spacingXXXLarge),
-            enterprise: (0, R.css)([ "padding-right:", ";" ], j.variables.spacingXXLarge)
-        },
-        false: (0, R.css)([ "padding-right:", ";" ], j.variables.spacingSmall)
-    }), (function(e) {
+    })([ "", "" ], (function(e) {
         var r = e.$fillStyle;
-        return r && (0, j.pick)({
-            enterprise: (0, R.css)([ "& > ", "{left:", ";}", "" ], /* sc-sel */ Q, j.variables.spacingXSmall, (0, 
-            j.pickVariant)("$type", {
-                info: (0, R.css)([ "", "" ], (0, j.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.infoColorL50, j.variables.infoColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.infoColor, .5))
-                })),
-                success: (0, R.css)([ "", "" ], (0, j.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.successColorL50, j.variables.successColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.successColor, .5))
-                })),
-                warning: (0, R.css)([ "", "" ], (0, j.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.warningColorL50, j.variables.warningColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.warningColor, .5))
-                })),
-                error: (0, R.css)([ "", "" ], (0, j.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.errorColorL50, j.variables.errorColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.errorColor, .5))
-                }))
-            })),
-            prisma: (0, R.css)([ "", ";box-shadow:", ";& > ", "{color:", ";}" ], (function(e) {
-                var r = e.$type;
-                var a = {
-                    info: j.variables.contentColorActive,
-                    success: j.variables.accentColorPositive,
-                    warning: j.variables.accentColorWarning,
-                    error: j.variables.accentColorNegative
-                };
-                var n = a[r];
-                return (0, R.css)([ "background:linear-gradient( to right,", " 0,", " ", ",", " ", ",", " 100% );" ], n, n, j.variables.spacingXLarge, j.variables.backgroundColorPopup, j.variables.spacingXLarge, j.variables.backgroundColorPopup);
-            }), j.variables.embossShadow, /* sc-sel */ Q, j.variables.backgroundColorPopup)
-        });
-    }), (0, j.pick)({
-        prisma: (0, R.css)([ "& ", "{color:", ";}" ], /* sc-sel */ F, (0, j.pickVariant)("$type", {
-            info: j.variables.contentColorActive,
-            warning: j.variables.accentColorWarning,
-            error: j.variables.accentColorNegative,
-            success: j.variables.accentColorPositive
-        }))
+        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);
+    }));
+    // 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 Y(e, r) {
+    function R(e, r) {
         if (null == e) return {};
-        var a, n, i = Z(e, r);
+        var a, n, t = N(e, r);
         if (Object.getOwnPropertySymbols) {
-            var s = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < s.length; n++) {
-                a = s[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (i[a] = e[a]);
+            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]);
             }
         }
-        return i;
+        return t;
     }
-    function Z(e, r) {
+    function N(e, r) {
         if (null == e) return {};
         var a = {};
         for (var n in e) {
@@ -332,22 +183,22 @@
         }
         return a;
     }
-    var ee = {
-        children: s().node
+    var T = {
+        children: i().node
     };
     /**
  * A title component for use in `Message`.
- */    function re(e) {
-        var r = e.children, a = Y(e, [ "children" ]);
+ */    function H(e) {
+        var r = e.children, a = R(e, [ "children" ]);
         // @docs-props-type TitleProps
                 
-        return n().createElement(F, a, r);
+        return n().createElement(P, a, r);
     }
-    re.propTypes = ee;
-    /* harmony default export */    const ae = re;
+    H.propTypes = T;
+    /* harmony default export */    const B = H;
     // CONCATENATED MODULE: ./src/Message/Message.tsx
-    function ne() {
-        return ne = Object.assign ? Object.assign.bind() : function(e) {
+    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) {
@@ -355,20 +206,20 @@
                 }
             }
             return e;
-        }, ne.apply(null, arguments);
+        }, V.apply(null, arguments);
     }
-    function ie(e, r) {
+    function W(e, r) {
         if (null == e) return {};
-        var a, n, i = se(e, r);
+        var a, n, t = z(e, r);
         if (Object.getOwnPropertySymbols) {
-            var s = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < s.length; n++) {
-                a = s[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (i[a] = e[a]);
+            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]);
             }
         }
-        return i;
+        return t;
     }
-    function se(e, r) {
+    function z(e, r) {
         if (null == e) return {};
         var a = {};
         for (var n in e) {
@@ -379,100 +230,77 @@
         }
         return a;
     }
-    var oe = {
-        appearance: s().oneOf([ "default", "fill", "banner" ]),
-        children: s().node,
-        elementRef: s().oneOfType([ s().func, s().object ]),
-        onRequestRemove: s().func,
-        type: s().oneOf([ "info", "success", "warning", "error" ])
+    var A = {
+        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 te = Object.freeze({
-        info: (0, I._)("Info"),
-        warning: (0, I._)("Warning"),
-        error: (0, I._)("Alert"),
-        success: (0, I._)("Success")
+    var L = Object.freeze({
+        info: (0, b._)("Info"),
+        warning: (0, b._)("Warning"),
+        error: (0, b._)("Alert"),
+        success: (0, b._)("Success")
     });
-    var le = Object.freeze({
-        info: C(),
-        warning: O(),
-        error: k(),
-        success: w()
+    var X = Object.freeze({
+        info: g(),
+        warning: v(),
+        error: p(),
+        success: s()
     });
-    var ce = Object.freeze({
-        info: f(),
-        warning: m(),
-        error: d(),
-        success: t()
+    var D =  n().createElement(c(), {
+        height: "20px",
+        width: "20px"
     });
-    function pe(e) {
-        var r = e.appearance, i = r === void 0 ? "default" : r, s = e.children, o = e.type, t = o === void 0 ? "warning" : o, l = e.onRequestRemove, p = ie(e, [ "appearance", "children", "type", "onRequestRemove" ]);
+    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" ]);
         // @docs-props-type MessagePropsBase
-                var v = (0, j.useSplunkTheme)(), d = v.isEnterprise;
-        if (false) {}
-        // double check this can only be button
-                var b = (0, a.useCallback)((function(e) {
-            l === null || l === void 0 ? void 0 : l(e);
-        }), [ l ]);
-        if (i === "banner") {
-            
-            return n().createElement(_(), ne({
-                type: t,
-                "data-test": "banner",
-                onRequestClose: b
-            }, p), s);
-        }
-        var f = d ? le : ce;
-        var g = f[t];
-        var m = i === "fill";
-        var y = i === "default" || i === "fill";
+                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 k;
-        var h = n().Children.toArray(s).filter((function(e) {
-            if ( n().isValidElement(e) && e.type === ae) {
-                k = e;
+                var f;
+        var g = n().Children.toArray(i).filter((function(e) {
+            if ( n().isValidElement(e) && e.type === B) {
+                f = e;
                 return false;
             }
             return true;
         }));
         
-        return n().createElement(U, ne({
-            $appearance: i,
-            $fillStyle: m,
-            $hasRemoveIcon: !!l,
-            $type: t,
-            "data-test-type": t,
+        return n().createElement($, V({
+            $appearance: t,
+            $fillStyle: d,
+            $hasRemoveIcon: !!o,
+            $type: s,
+            title: f,
+            "data-test-type": s,
             "data-test": "message"
-        }, p), y &&  n().createElement(Q, {
-            $fillStyle: m,
-            $type: t
-        }, d ?  n().createElement(g, {
-            height: "24px",
-            width: "24px",
-            hideDefaultTooltip: true,
-            screenReaderText: null
-        }) :  n().createElement(g, {
+        }, c), v &&  n().createElement(M, {
+            $fillStyle: d,
+            $type: s
+        },  n().createElement(j, {
+            as: p,
+            $fillStyle: d,
             variant: "filled"
-        }),  n().createElement(P(), null, te[t])),  n().createElement(G, {
+        }),  n().createElement(m(), null, L[s])),  n().createElement(x, {
             "data-test": "content",
-            $fillStyle: m
-        }, k,  n().createElement(J, null, h)), l &&  n().createElement(K, {
+            $fillStyle: d
+        }, f,  n().createElement(q, null, g)), o &&  n().createElement(I, {
+            "aria-label": "Remove",
             "data-test": "remove",
-            onClick: b,
-            $appearance: i
-        }, d ?  n().createElement(u(), {
-            height: "12px",
-            hideDefaultTooltip: true,
-            screenReaderText: null,
-            width: "12px"
-        }) :  n().createElement(c(), {
-            height: "20px",
-            width: "20px"
-        })));
+            appearance: "secondary",
+            onClick: u,
+            icon: D
+        }));
     }
-    pe.propTypes = oe;
-    pe.Title = ae;
-    pe.Link = z;
-    /* harmony default export */    const ue = pe;
+    F.propTypes = A;
+    F.Title = B;
+    /* harmony default export */    const G = F;
     // CONCATENATED MODULE: ./src/Message/index.ts
     module.exports = r;
     /******/})();

package/MessageBar.js

@@ -156,7 +156,7 @@
     }), (0, u.pick)({
         enterprise: {
             dark: u.variables.gray96,
-            light: u.variables.linkColor
+            light: u.variables.contentColorLink
         }
     }), (0, u.pick)({
         prisma: (0, b.css)([ "background:", ";" ], u.variables.interactiveColorOverlayActive),
@@ -173,39 +173,39 @@
             dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
         }))
     }));
-    var P = (0, b.css)([ "margin-left:auto;" ]);
-    var $ = g()(y()).withConfig({
+    var $ = (0, b.css)([ "margin-left:auto;" ]);
+    var P = g()(y()).withConfig({
         displayName: "MessageBarStyles__StyledCheckCircleIcon",
         componentId: "sc-1uyhzza-2"
-    })([ "", "" ], P);
+    })([ "", "" ], $);
     var A = g()(k()).withConfig({
         displayName: "MessageBarStyles__StyledExclamationCircleIcon",
         componentId: "sc-1uyhzza-3"
-    })([ "", "" ], P);
+    })([ "", "" ], $);
     var L = g()(x()).withConfig({
         displayName: "MessageBarStyles__StyledInformationCircleIcon",
         componentId: "sc-1uyhzza-4"
-    })([ "", "" ], P);
+    })([ "", "" ], $);
     var V = g()(w()).withConfig({
         displayName: "MessageBarStyles__StyledExclamationTriangleIcon",
         componentId: "sc-1uyhzza-5"
-    })([ "", "" ], P);
+    })([ "", "" ], $);
     var D = g()(_()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseErrorIcon",
         componentId: "sc-1uyhzza-6"
-    })([ "", " color:", ";" ], P, u.variables.errorColor);
+    })([ "", " color:", ";" ], $, u.variables.errorColor);
     var H = g()(z()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseInfoCircleIcon",
         componentId: "sc-1uyhzza-7"
-    })([ "", " color:", ";" ], P, u.variables.infoColor);
+    })([ "", " color:", ";" ], $, u.variables.infoColor);
     var X = g()(E()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseSuccessIcon",
         componentId: "sc-1uyhzza-8"
-    })([ "", " color:", ";" ], P, u.variables.successColor);
+    })([ "", " color:", ";" ], $, u.variables.successColor);
     var F = g()(B()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseWarningIcon",
         componentId: "sc-1uyhzza-9"
-    })([ "", " color:", ";" ], P, u.variables.warningColor);
+    })([ "", " color:", ";" ], $, u.variables.warningColor);
     var G = g()(j()).withConfig({
         displayName: "MessageBarStyles__MessageBarWrapper",
         componentId: "sc-1uyhzza-10"
@@ -244,21 +244,21 @@
             }
         })),
         success: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
-            prisma: u.variables.accentColorPositive,
+            prisma: u.variables.statusColorNormal,
             enterprise: {
                 dark: u.mixins.colorWithAlpha(u.variables.successColor, .5),
                 light: u.variables.successColorL50
             }
         })),
         warning: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
-            prisma: u.variables.accentColorWarning,
+            prisma: u.variables.statusColorMedium,
             enterprise: {
                 dark: u.mixins.colorWithAlpha(u.variables.warningColor, .5),
                 light: u.variables.warningColorL50
             }
         })),
         error: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
-            prisma: u.variables.accentColorNegative,
+            prisma: u.variables.statusColorHigh,
             enterprise: {
                 dark: u.mixins.colorWithAlpha(u.variables.errorColor, .5),
                 light: u.variables.errorColorL50
@@ -320,7 +320,7 @@
         info: L,
         warning: V,
         error: A,
-        success: $
+        success: P
     });
     var re = "24px";
     function ae(e) {