@splunk/react-ui 4.33.0 → 4.35.0

package/MessageBar.js

@@ -70,21 +70,21 @@
     const s = require("prop-types");
     var n =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const t = require("@splunk/react-icons/Cross");
-    var o =  e.n(t);
+    const o = require("@splunk/react-icons/Cross");
+    var t =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
     const c = require("@splunk/react-icons/enterprise/Close");
     var l =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const p = require("@splunk/react-ui/ScreenReaderContent");
-    var u =  e.n(p);
+    var d =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const d = require("@splunk/themes");
+    const u = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const v = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const g = require("styled-components");
-    var b =  e.n(g);
+    const b = require("styled-components");
+    var g =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
     const h = require("@splunk/react-icons/CheckCircle");
     var y =  e.n(h);
@@ -92,8 +92,8 @@
     const m = require("@splunk/react-icons/ExclamationCircle");
     var f =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
-    const k = require("@splunk/react-icons/InformationCircle");
-    var x =  e.n(k);
+    const x = require("@splunk/react-icons/InformationCircle");
+    var k =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
     const C = require("@splunk/react-icons/ExclamationTriangle");
     var w =  e.n(C);
@@ -116,152 +116,152 @@
     const N = require("@splunk/react-ui/Clickable");
     var R =  e.n(N);
     // CONCATENATED MODULE: ./src/MessageBar/MessageBarStyles.ts
-    var T = b().div.withConfig({
+    var T = g().div.withConfig({
         displayName: "MessageBarStyles__MessageBarContent",
         componentId: "sc-1uyhzza-0"
-    })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled]):focus{border-radius:", ";outline:0;box-shadow:", ";}}" ], d.mixins.reset("inline"), d.variables.borderRadius, (0, 
-    d.pick)({
+    })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], u.mixins.reset("inline"), u.variables.borderRadius, (0, 
+    u.pick)({
         enterprise: {
-            dark: (0, g.css)([ "0 0 0 2px ", "" ], d.variables.gray80),
-            light: (0, g.css)([ "0 0 0 2px ", "" ], d.variables.gray25)
+            dark: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray80),
+            light: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray25)
         },
         prisma: {
-            light: (0, d.pickVariant)("$type", {
-                info: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.black),
-                warning: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.black),
-                error: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.white),
-                success: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.white)
+            light: (0, u.pickVariant)("$type", {
+                info: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
+                warning: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
+                error: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white),
+                success: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white)
             }),
-            dark: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.black)
+            dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
         }
     }));
-    var W = b()(R()).withConfig({
+    var W = g()(R()).withConfig({
         displayName: "MessageBarStyles__MessageBarCloseWrapper",
         componentId: "sc-1uyhzza-1"
-    })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:", ";color:", ";}&:active{", ";}", "" ], d.mixins.reset("flex"), d.variables.borderRadius, (0, 
-    d.pick)({
-        enterprise: d.variables.spacingXSmall,
+    })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], u.mixins.reset("flex"), u.variables.borderRadius, (0, 
+    u.pick)({
+        enterprise: u.variables.spacingXSmall,
         prisma: "3px"
-    }), (0, d.pick)({
-        enterprise: (0, g.css)([ "margin-top:1px;" ])
-    }), (0, d.pick)({
-        prisma: d.variables.interactiveColorOverlayHover,
+    }), (0, u.pick)({
+        enterprise: (0, b.css)([ "margin-top:1px;" ])
+    }), (0, u.pick)({
+        prisma: u.variables.interactiveColorOverlayHover,
         enterprise: {
-            dark: d.variables.gray30,
-            light: d.variables.gray92
+            dark: u.variables.gray30,
+            light: u.variables.gray92
         }
-    }), (0, d.pick)({
-        prisma: (0, g.css)([ "1px solid inherit" ]),
-        enterprise: (0, g.css)([ "1px solid ", "" ], d.variables.gray80)
-    }), (0, d.pick)({
+    }), (0, u.pick)({
+        prisma: "inherit",
+        enterprise: u.variables.gray80
+    }), (0, u.pick)({
         enterprise: {
-            dark: d.variables.gray96,
-            light: d.variables.linkColor
+            dark: u.variables.gray96,
+            light: u.variables.linkColor
         }
-    }), (0, d.pick)({
-        prisma: (0, g.css)([ "background:", ";" ], d.variables.interactiveColorOverlayActive),
-        enterprise: (0, g.css)([ "box-shadow:", ";" ], d.variables.focusShadow)
-    }), (0, d.pick)({
-        prisma: (0, g.css)([ "&:focus{border-radius:", ";box-shadow:", ";}" ], d.variables.borderRadius, (0, 
-        d.pick)({
-            light: (0, d.pickVariant)("$type", {
-                info: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.black),
-                warning: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.black),
-                error: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.white),
-                success: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.white)
+    }), (0, u.pick)({
+        prisma: (0, b.css)([ "background:", ";" ], u.variables.interactiveColorOverlayActive),
+        enterprise: (0, b.css)([ "box-shadow:", ";" ], u.variables.focusShadow)
+    }), (0, u.pick)({
+        prisma: (0, b.css)([ "&:focus{border-radius:", ";", ";}" ], u.variables.borderRadius, (0, 
+        u.pick)({
+            light: (0, u.pickVariant)("$type", {
+                info: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
+                warning: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
+                error: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white),
+                success: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white)
             }),
-            dark: (0, g.css)([ "0 0 0 3px ", "" ], d.variables.black)
+            dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
         }))
     }));
-    var $ = (0, g.css)([ "margin-left:auto;" ]);
-    var P = b()(y()).withConfig({
+    var $ = (0, b.css)([ "margin-left:auto;" ]);
+    var P = g()(y()).withConfig({
         displayName: "MessageBarStyles__StyledCheckCircleIcon",
         componentId: "sc-1uyhzza-2"
     })([ "", "" ], $);
-    var A = b()(f()).withConfig({
+    var A = g()(f()).withConfig({
         displayName: "MessageBarStyles__StyledExclamationCircleIcon",
         componentId: "sc-1uyhzza-3"
     })([ "", "" ], $);
-    var L = b()(x()).withConfig({
+    var L = g()(k()).withConfig({
         displayName: "MessageBarStyles__StyledInformationCircleIcon",
         componentId: "sc-1uyhzza-4"
     })([ "", "" ], $);
-    var V = b()(w()).withConfig({
+    var V = g()(w()).withConfig({
         displayName: "MessageBarStyles__StyledExclamationTriangleIcon",
         componentId: "sc-1uyhzza-5"
     })([ "", "" ], $);
-    var D = b()(_()).withConfig({
+    var D = g()(_()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseErrorIcon",
         componentId: "sc-1uyhzza-6"
-    })([ "", " color:", ";" ], $, d.variables.errorColor);
-    var H = b()(z()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.errorColor);
+    var H = g()(z()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseInfoCircleIcon",
         componentId: "sc-1uyhzza-7"
-    })([ "", " color:", ";" ], $, d.variables.infoColor);
-    var X = b()(O()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.infoColor);
+    var X = g()(O()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseSuccessIcon",
         componentId: "sc-1uyhzza-8"
-    })([ "", " color:", ";" ], $, d.variables.successColor);
-    var F = b()(B()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.successColor);
+    var F = g()(B()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseWarningIcon",
         componentId: "sc-1uyhzza-9"
-    })([ "", " color:", ";" ], $, d.variables.warningColor);
-    var G = b()(j()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.warningColor);
+    var G = g()(j()).withConfig({
         displayName: "MessageBarStyles__MessageBarWrapper",
         componentId: "sc-1uyhzza-10"
-    })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";", ";" ], d.mixins.reset("block"), d.variables.spacingSmall, (function(e) {
+    })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";", ";" ], u.mixins.reset("block"), u.variables.spacingSmall, (function(e) {
         var r = e.$hasCloseButton;
-        return r ? (0, g.css)([ "", "" ], (0, d.pick)({
-            prisma: (0, g.css)([ "padding:0 8px 0 32px;" ]),
-            enterprise: (0, g.css)([ "padding:0 8px 0 38px;" ])
-        })) : (0, g.css)([ "", "" ], (0, d.pick)({
-            prisma: (0, g.css)([ "padding:0 33px 0 32px;" ]),
-            enterprise: (0, g.css)([ "padding:0 26px 0 32px;" ])
+        return r ? (0, b.css)([ "", "" ], (0, u.pick)({
+            prisma: (0, b.css)([ "padding:0 8px 0 32px;" ]),
+            enterprise: (0, b.css)([ "padding:0 8px 0 38px;" ])
+        })) : (0, b.css)([ "", "" ], (0, u.pick)({
+            prisma: (0, b.css)([ "padding:0 33px 0 32px;" ]),
+            enterprise: (0, b.css)([ "padding:0 26px 0 32px;" ])
         }));
-    }), (0, d.pick)({
-        prisma: (0, d.pickVariant)("$type", {
+    }), (0, u.pick)({
+        prisma: (0, u.pickVariant)("$type", {
             info: {
-                light: d.variables.contentColorActive,
-                dark: d.variables.contentColorInverted
+                light: u.variables.contentColorActive,
+                dark: u.variables.contentColorInverted
             },
-            success: d.variables.contentColorInverted,
-            warning: d.variables.black,
-            error: d.variables.contentColorInverted
+            success: u.variables.contentColorInverted,
+            warning: u.variables.black,
+            error: u.variables.contentColorInverted
         }),
         enterprise: {
-            dark: d.variables.gray96,
-            light: d.variables.gray25
+            dark: u.variables.gray96,
+            light: u.variables.gray25
         }
-    }), (0, d.pickVariant)("$type", {
-        info: (0, g.css)([ "background-color:", ";" ], (0, d.pick)({
+    }), (0, u.pickVariant)("$type", {
+        info: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
             prisma: {
-                dark: d.variables.white,
-                light: d.variables.neutral200
+                dark: u.variables.white,
+                light: u.variables.neutral200
             },
             enterprise: {
-                dark: d.mixins.colorWithAlpha(d.variables.infoColor, .5),
-                light: d.variables.infoColorL50
+                dark: u.mixins.colorWithAlpha(u.variables.infoColor, .5),
+                light: u.variables.infoColorL50
             }
         })),
-        success: (0, g.css)([ "background-color:", ";" ], (0, d.pick)({
-            prisma: d.variables.accentColorPositive,
+        success: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
+            prisma: u.variables.accentColorPositive,
             enterprise: {
-                dark: d.mixins.colorWithAlpha(d.variables.successColor, .5),
-                light: d.variables.successColorL50
+                dark: u.mixins.colorWithAlpha(u.variables.successColor, .5),
+                light: u.variables.successColorL50
             }
         })),
-        warning: (0, g.css)([ "background-color:", ";" ], (0, d.pick)({
-            prisma: d.variables.accentColorWarning,
+        warning: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
+            prisma: u.variables.accentColorWarning,
             enterprise: {
-                dark: d.mixins.colorWithAlpha(d.variables.warningColor, .5),
-                light: d.variables.warningColorL50
+                dark: u.mixins.colorWithAlpha(u.variables.warningColor, .5),
+                light: u.variables.warningColorL50
             }
         })),
-        error: (0, g.css)([ "background-color:", ";" ], (0, d.pick)({
-            prisma: d.variables.accentColorNegative,
+        error: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
+            prisma: u.variables.accentColorNegative,
             enterprise: {
-                dark: d.mixins.colorWithAlpha(d.variables.errorColor, .5),
-                light: d.variables.errorColorL50
+                dark: u.mixins.colorWithAlpha(u.variables.errorColor, .5),
+                light: u.variables.errorColorL50
             }
         }))
     }));
@@ -334,14 +334,14 @@
     function ae(e) {
         var r = e.children, a = e.type, s = e.onRequestClose, n = K(e, [ "children", "type", "onRequestClose" ]);
         // @docs-props-type MessageBarPropsBase
-                var t = (0, d.useSplunkTheme)(), c = t.isEnterprise;
+                var o = (0, u.useSplunkTheme)(), c = o.isEnterprise;
         var p = c && a === "error" ? "22px" : re;
-        var g = c && a === "warning" ? "21px" : re;
-        var b;
+        var b = c && a === "warning" ? "21px" : re;
+        var g;
         if (c) {
             var h = Z[a];
-            b =  i().createElement(h, {
-                height: g,
+            g =  i().createElement(h, {
+                height: b,
                 width: p,
                 hideDefaultTooltip: true,
                 screenReaderText: null,
@@ -350,7 +350,7 @@
             });
         } else {
             var y = ee[a];
-            b =  i().createElement(y, {
+            g =  i().createElement(y, {
                 height: re,
                 width: re,
                 variant: "filled",
@@ -366,7 +366,7 @@
         }, n, {
             role: "region",
             $hasCloseButton: Boolean(s)
-        }), b,  i().createElement(u(), null, Y[a]),  i().createElement(T, {
+        }), g,  i().createElement(d(), null, Y[a]),  i().createElement(T, {
             $type: a,
             "data-test": "content"
         }, r), s &&  i().createElement(W, {
@@ -377,13 +377,13 @@
             hideDefaultTooltip: true,
             screenReaderText: null,
             width: "12px"
-        }) :  i().createElement(o(), {
+        }) :  i().createElement(t(), {
             height: "19px",
             style: {
                 margin: -.5
             },
             width: "19px"
-        }),  i().createElement(u(), null, (0, v._)("Close"))));
+        }),  i().createElement(d(), null, (0, v._)("Close"))));
     }
     ae.propTypes = U;
     /* harmony default export */    const ie = ae;

package/Modal.js

@@ -239,7 +239,7 @@
         componentId: "yszcmv-0"
     })([ "flex:0 0 auto;text-align:right;padding:", ";background-color:", ";& > button{min-width:80px;}" ], (0, 
     w.pick)({
-        enterprise: w.variables.spacing,
+        enterprise: w.variables.spacingLarge,
         prisma: {
             comfortable: "24px",
             compact: "18px 24px"
@@ -516,7 +516,7 @@
         componentId: "sc-5fn8ds-0"
     })([ "", ";flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);z-index:", ";", "" ], w.mixins.reset("flex"), w.variables.zindexModal, (0, 
     w.pick)({
-        enterprise: (0, g.css)([ "box-shadow:0 1px 5px ", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);" ], w.variables.black, w.variables.spacing, w.variables.spacing),
+        enterprise: (0, g.css)([ "box-shadow:0 1px 5px ", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);" ], w.variables.black, w.variables.spacingLarge, w.variables.spacingLarge),
         prisma: (0, g.css)([ "box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);border-radius:", ";overflow:hidden;" ], w.variables.modalShadow, w.variables.spacingXLarge, w.variables.spacingXLarge, w.variables.borderRadius)
     }));
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts