@leafygreen-ui/banner - npm Package Compare versions

Comparing version 9.0.4 to 9.0.5

CHANGELOG.md

 # @leafygreen-ui/banner
 
+## 9.0.5
+
+### Patch Changes
+
+- 541e12e75: Updates builds to leverage Rollup tree shaking. (see [`tools/build/config/rollup.config.mjs`](https://github.com/mongodb/leafygreen-ui/blob/main/tools/build/config/rollup.config.mjs))
+- Updated dependencies [541e12e75]
+  - @leafygreen-ui/emotion@4.0.10
+  - @leafygreen-ui/icon@13.1.3
+  - @leafygreen-ui/icon-button@16.0.4
+  - @leafygreen-ui/leafygreen-provider@4.0.3
+  - @leafygreen-ui/lib@14.0.3
+  - @leafygreen-ui/palette@4.1.4
+  - @leafygreen-ui/tokens@2.11.4
+  - @leafygreen-ui/typography@20.1.2
+
 ## 9.0.4
@@ -4,0 +19,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n,{forwardRef as e}from"react";import{css as r,cx as o}from"@leafygreen-ui/emotion";import{useDarkMode as i}from"@leafygreen-ui/leafygreen-provider";import{anchorClassName as l,useUpdatedBaseFontSize as t,bodyTypeScaleStyles as a}from"@leafygreen-ui/typography";import c from"@leafygreen-ui/icon/dist/X";import g from"@leafygreen-ui/icon-button";import{Theme as d}from"@leafygreen-ui/lib";import{palette as s}from"@leafygreen-ui/palette";import b from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import u from"@leafygreen-ui/icon/dist/ImportantWithCircle";import p from"@leafygreen-ui/icon/dist/InfoWithCircle";import h from"@leafygreen-ui/icon/dist/Warning";import{BaseFontSize as f,fontFamilies as x,fontWeights as m}from"@leafygreen-ui/tokens";function k(n){var e=function(n,e){if("object"!=typeof n||!n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var o=r.call(n,e);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n,"string");return"symbol"==typeof e?e:e+""}function v(n,e,r){return(e=k(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function y(){return y=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n},y.apply(this,arguments)}function w(n,e){if(null==n)return{};var r,o,i=function(n,e){if(null==n)return{};var r,o,i={},l=Object.keys(n);for(o=0;o<l.length;o++)r=l[o],e.indexOf(r)>=0||(i[r]=n[r]);return i}(n,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(n);for(o=0;o<l.length;o++)r=l[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(i[r]=n[r])}return i}function S(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var O,I,j,W,D,C,E,z,N,L,M,P,R,F,B,T,X,q,A,G,H,J,K,Q,U,V,Y,Z,$,_,nn,en,rn={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},on=r(O||(O=S(["\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  right: 8px; // Icon is 24px(it's 24px to include hover background), in figma its 16px(does not include the hover background) (24px - 16px)/2 = 4. The space between the icon and the banner is 12px from the right, 12px - 4px = 8px\n  top: 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n"]))),ln=r(I||(I=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.blue.light2,s.blue.light2,s.blue.dark3,s.blue.light1,s.blue.dark2),tn=r(j||(j=S(["\n  color: ",";\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.yellow.light2,s.yellow.light2,s.yellow.dark3,s.blue.light1,s.yellow.dark2),an=r(W||(W=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.red.light2,s.red.light2,s.red.dark3,s.blue.light1,s.red.dark2),cn=r(D||(D=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.green.light2,s.green.light2,s.green.dark3,s.blue.light1,s.green.dark2),gn=r(C||(C=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.blue.dark2,s.blue.dark2,s.blue.light2),dn=r(E||(E=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.yellow.dark2,s.yellow.dark2,s.yellow.light2),sn=r(z||(z=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.red.dark2,s.red.dark2,s.red.light2),bn=r(N||(N=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.green.dark2,s.green.dark2,s.green.light2),un=v(v({},d.Dark,v(v(v(v({},rn.Info,ln),rn.Warning,tn),rn.Danger,an),rn.Success,cn)),d.Light,v(v(v(v({},rn.Info,gn),rn.Warning,dn),rn.Danger,sn),rn.Success,bn)),pn=function(e){var r=e.onClose,i=e.darkMode,l=e.theme,t=e.variant;return n.createElement(g,{className:o(on,un[l][t]),"aria-label":"Close Message",onClick:r,darkMode:i},n.createElement(c,null))},hn=r(L||(L=S(["\n  position: relative;\n  flex-shrink: 0;\n"]))),fn=r(M||(M=S(["\n  // this margin is set to control text alignment with the base of the renderedImage\n  margin-top: 3px;\n  margin-bottom: 3px;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n"]))),xn=v(v({},f.Body1,r(P||(P=S(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),f.Body2,r(R||(R=S(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),mn=v(v({},d.Dark,v(v(v(v({},rn.Info,r(F||(F=S(["\n      color: ",";\n    "])),s.blue.light1)),rn.Warning,r(B||(B=S(["\n      color: ",";\n    "])),s.yellow.base)),rn.Danger,r(T||(T=S(["\n      color: ",";\n    "])),s.red.light1)),rn.Success,r(X||(X=S(["\n      color: ",";\n    "])),s.green.base))),d.Light,v(v(v(v({},rn.Info,r(q||(q=S(["\n      color: ",";\n    "])),s.blue.base)),rn.Warning,r(A||(A=S(["\n      color: ",";\n    "])),s.yellow.dark2)),rn.Danger,r(G||(G=S(["\n      color: ",";\n    "])),s.red.base)),rn.Success,r(H||(H=S(["\n      color: ",";\n    "])),s.green.dark1))),kn=v(v(v(v({},rn.Info,p),rn.Warning,u),rn.Danger,h),rn.Success,b),vn=function(e){var r=e.image,i=e.baseFontSize,l=e.variant,t=e.theme,a=kn[l];return r?n.cloneElement(r,{className:fn}):n.createElement(a,{className:o(hn,mn[t][l],xn[i])})},yn=r(J||(J=S(["\n  position: relative;\n  display: flex;\n  padding: 10px 12px 10px 20px;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-radius: 12px;\n  font-family: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 13px;\n    top: -1px;\n    bottom: -1px;\n    left: 0px;\n    border-radius: 12px 0px 0px 12px;\n  }\n"])),x.default),wn=r(K||(K=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.blue.light2,s.blue.dark2,s.blue.dark3,l,s.blue.light3,s.blue.light2,s.blue.dark3,s.blue.light1,s.blue.light1),Sn=r(Q||(Q=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.yellow.light2,s.yellow.dark2,s.yellow.dark3,l,s.yellow.light3,s.yellow.light2,s.yellow.dark3,s.blue.light1,s.yellow.dark2),On=r(U||(U=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.red.light2,s.red.dark2,s.red.dark3,l,s.red.light3,s.red.light2,s.red.dark3,s.blue.light1,s.red.base),In=r(V||(V=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.green.light2,s.green.dark2,s.green.dark3,l,s.green.light3,s.green.light2,s.green.dark3,s.blue.light1,s.green.base),jn=r(Y||(Y=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.blue.dark2,s.blue.light2,s.blue.light3,l,s.blue.dark3,s.blue.dark2,s.blue.light3,s.white,s.blue.light1,s.blue.base),Wn=r(Z||(Z=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.yellow.dark2,s.yellow.light2,s.yellow.light3,l,s.yellow.dark3,s.yellow.dark2,s.yellow.light3,s.white,s.blue.light1,s.yellow.base),Dn=r($||($=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.red.dark2,s.red.light2,s.red.light3,l,s.red.dark3,s.red.dark2,s.red.light3,s.white,s.blue.light1,s.red.base),Cn=r(_||(_=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.green.dark2,s.green.light2,s.green.light3,l,s.green.dark3,s.green.dark2,s.green.light3,s.white,s.blue.light1,s.green.dark1),En=v(v({},d.Dark,v(v(v(v({},rn.Info,wn),rn.Warning,Sn),rn.Danger,On),rn.Success,In)),d.Light,v(v(v(v({},rn.Info,jn),rn.Warning,Wn),rn.Danger,Dn),rn.Success,Cn)),zn=function(n,e){return r(nn||(nn=S(["\n  align-self: center;\n  flex-grow: 1;\n  margin-left: ",";\n  margin-right: ",";\n\n  .",", a {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: ",";\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 2px;\n    border-radius: 4px;\n    display: inline;\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      span {\n        &::after {\n          display: none;\n        }\n      }\n    }\n\n    &:focus-visible {\n      position: relative;\n    }\n  }\n"])),Nn(n,e).marginLeft,Nn(n,e).marginRight,l,m.bold)},Nn=function(n,e){var r={marginLeft:void 0,marginRight:void 0};return n?(r.marginLeft="17px",r.marginRight="4px",e&&(r.marginRight="".concat(28,"px"))):(r.marginLeft="13px",r.marginRight="10px",e&&(r.marginRight="".concat(32,"px"))),r},Ln=r(en||(en=S(["\n  padding-right: 36px; // add space for the icon\n"]))),Mn=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Pn=e((function(e,r){var l=e.variant,c=void 0===l?rn.Info:l,g=e.dismissible,d=void 0!==g&&g,s=e.onClose,b=void 0===s?function(){}:s,u=e.image,p=e.children,h=e.className,f=e.darkMode,x=e.baseFontSize,m=w(e,Mn),k=i(f),S=k.theme,O=k.darkMode,I=t(x);return n.createElement("div",y({role:"alert",ref:r,className:o(yn,a[I],En[S][c],v({},Ln,d),h)},m),n.createElement(vn,{image:u,theme:S,baseFontSize:I,variant:c}),n.createElement("div",{className:zn(null!=u,d)},p),d&&n.createElement(pn,{theme:S,baseFontSize:I,variant:c,onClose:b,darkMode:O}))}));Pn.displayName="Banner";export{rn as Variant,Pn as default};
+import n,{forwardRef as e}from"react";import{css as r,cx as o}from"@leafygreen-ui/emotion";import{useDarkMode as i}from"@leafygreen-ui/leafygreen-provider";import{anchorClassName as l,useUpdatedBaseFontSize as t,bodyTypeScaleStyles as a}from"@leafygreen-ui/typography";import c from"@leafygreen-ui/icon/dist/X";import g from"@leafygreen-ui/icon-button";import{Theme as d}from"@leafygreen-ui/lib";import{palette as s}from"@leafygreen-ui/palette";import b from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import u from"@leafygreen-ui/icon/dist/ImportantWithCircle";import p from"@leafygreen-ui/icon/dist/InfoWithCircle";import h from"@leafygreen-ui/icon/dist/Warning";import{BaseFontSize as f,fontFamilies as x,fontWeights as m}from"@leafygreen-ui/tokens";function k(n){var e=function(n,e){if("object"!=typeof n||!n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var o=r.call(n,e);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n,"string");return"symbol"==typeof e?e:e+""}function v(n,e,r){return(e=k(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function y(){return y=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n},y.apply(this,arguments)}function w(n,e){if(null==n)return{};var r,o,i=function(n,e){if(null==n)return{};var r,o,i={},l=Object.keys(n);for(o=0;o<l.length;o++)r=l[o],e.indexOf(r)>=0||(i[r]=n[r]);return i}(n,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(n);for(o=0;o<l.length;o++)r=l[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(i[r]=n[r])}return i}function S(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var O,I,j,W,D,C,E,z,N,L,M,P,R,F,B,T,X,q,A,G,H,J,K,Q,U,V,Y,Z,$,_,nn,en,rn={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},on=r(O||(O=S(["\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  right: 8px; // Icon is 24px(it's 24px to include hover background), in figma its 16px(does not include the hover background) (24px - 16px)/2 = 4. The space between the icon and the banner is 12px from the right, 12px - 4px = 8px\n  top: 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n"]))),ln=r(I||(I=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.blue.light2,s.blue.light2,s.blue.dark3,s.blue.light1,s.blue.dark2),tn=r(j||(j=S(["\n  color: ",";\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.yellow.light2,s.yellow.light2,s.yellow.dark3,s.blue.light1,s.yellow.dark2),an=r(W||(W=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.red.light2,s.red.light2,s.red.dark3,s.blue.light1,s.red.dark2),cn=r(D||(D=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.green.light2,s.green.light2,s.green.dark3,s.blue.light1,s.green.dark2),gn=r(C||(C=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.blue.dark2,s.blue.dark2,s.blue.light2),dn=r(E||(E=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.yellow.dark2,s.yellow.dark2,s.yellow.light2),sn=r(z||(z=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.red.dark2,s.red.dark2,s.red.light2),bn=r(N||(N=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),s.green.dark2,s.green.dark2,s.green.light2),un=v(v({},d.Dark,v(v(v(v({},rn.Info,ln),rn.Warning,tn),rn.Danger,an),rn.Success,cn)),d.Light,v(v(v(v({},rn.Info,gn),rn.Warning,dn),rn.Danger,sn),rn.Success,bn)),pn=function(e){var r=e.onClose,i=e.darkMode,l=e.theme,t=e.variant;return n.createElement(g,{className:o(on,un[l][t]),"aria-label":"Close Message",onClick:r,darkMode:i},n.createElement(c,null))},hn=r(L||(L=S(["\n  position: relative;\n  flex-shrink: 0;\n"]))),fn=r(M||(M=S(["\n  // this margin is set to control text alignment with the base of the renderedImage\n  margin-top: 3px;\n  margin-bottom: 3px;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n"]))),xn=v(v({},f.Body1,r(P||(P=S(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),f.Body2,r(R||(R=S(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),mn=v(v({},d.Dark,v(v(v(v({},rn.Info,r(F||(F=S(["\n      color: ",";\n    "])),s.blue.light1)),rn.Warning,r(B||(B=S(["\n      color: ",";\n    "])),s.yellow.base)),rn.Danger,r(T||(T=S(["\n      color: ",";\n    "])),s.red.light1)),rn.Success,r(X||(X=S(["\n      color: ",";\n    "])),s.green.base))),d.Light,v(v(v(v({},rn.Info,r(q||(q=S(["\n      color: ",";\n    "])),s.blue.base)),rn.Warning,r(A||(A=S(["\n      color: ",";\n    "])),s.yellow.dark2)),rn.Danger,r(G||(G=S(["\n      color: ",";\n    "])),s.red.base)),rn.Success,r(H||(H=S(["\n      color: ",";\n    "])),s.green.dark1))),kn=v(v(v(v({},rn.Info,p),rn.Warning,u),rn.Danger,h),rn.Success,b),vn=function(e){var r=e.image,i=e.baseFontSize,l=e.variant,t=e.theme,a=kn[l];return r?n.cloneElement(r,{className:fn}):n.createElement(a,{className:o(hn,mn[t][l],xn[i])})},yn=r(J||(J=S(["\n  position: relative;\n  display: flex;\n  padding: 10px 12px 10px 20px;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-radius: 12px;\n  font-family: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 13px;\n    top: -1px;\n    bottom: -1px;\n    left: 0px;\n    border-radius: 12px 0px 0px 12px;\n  }\n"])),x.default),wn=r(K||(K=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.blue.light2,s.blue.dark2,s.blue.dark3,l,s.blue.light3,s.blue.light2,s.blue.dark3,s.blue.light1,s.blue.light1),Sn=r(Q||(Q=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.yellow.light2,s.yellow.dark2,s.yellow.dark3,l,s.yellow.light3,s.yellow.light2,s.yellow.dark3,s.blue.light1,s.yellow.dark2),On=r(U||(U=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.red.light2,s.red.dark2,s.red.dark3,l,s.red.light3,s.red.light2,s.red.dark3,s.blue.light1,s.red.base),In=r(V||(V=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.green.light2,s.green.dark2,s.green.dark3,l,s.green.light3,s.green.light2,s.green.dark3,s.blue.light1,s.green.base),jn=r(Y||(Y=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.blue.dark2,s.blue.light2,s.blue.light3,l,s.blue.dark3,s.blue.dark2,s.blue.light3,s.white,s.blue.light1,s.blue.base),Wn=r(Z||(Z=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.yellow.dark2,s.yellow.light2,s.yellow.light3,l,s.yellow.dark3,s.yellow.dark2,s.yellow.light3,s.white,s.blue.light1,s.yellow.base),Dn=r($||($=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.red.dark2,s.red.light2,s.red.light3,l,s.red.dark3,s.red.dark2,s.red.light3,s.white,s.blue.light1,s.red.base),Cn=r(_||(_=S(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),s.green.dark2,s.green.light2,s.green.light3,l,s.green.dark3,s.green.dark2,s.green.light3,s.white,s.blue.light1,s.green.dark1),En=v(v({},d.Dark,v(v(v(v({},rn.Info,wn),rn.Warning,Sn),rn.Danger,On),rn.Success,In)),d.Light,v(v(v(v({},rn.Info,jn),rn.Warning,Wn),rn.Danger,Dn),rn.Success,Cn)),zn=function(n,e){return r(nn||(nn=S(["\n  align-self: center;\n  flex-grow: 1;\n  margin-left: ",";\n  margin-right: ",";\n\n  .",", a {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: ",";\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 2px;\n    border-radius: 4px;\n    display: inline;\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      span {\n        &::after {\n          display: none;\n        }\n      }\n    }\n\n    &:focus-visible {\n      position: relative;\n    }\n  }\n"])),Nn(n,e).marginLeft,Nn(n,e).marginRight,l,m.bold)},Nn=function(n,e){var r={marginLeft:void 0,marginRight:void 0};return n?(r.marginLeft="17px",r.marginRight="4px",e&&(r.marginRight="".concat(28,"px"))):(r.marginLeft="13px",r.marginRight="10px",e&&(r.marginRight="".concat(32,"px"))),r},Ln=r(en||(en=S(["\n  padding-right: 36px; // add space for the icon\n"]))),Mn=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Pn=e((function(e,r){var l=e.variant,c=void 0===l?rn.Info:l,g=e.dismissible,d=void 0!==g&&g,s=e.onClose,b=void 0===s?function(){}:s,u=e.image,p=e.children,h=e.className,f=e.darkMode,x=e.baseFontSize,m=w(e,Mn),k=i(f),S=k.theme,O=k.darkMode,I=t(x);return n.createElement("div",y({role:"alert",ref:r,className:o(yn,a[I],En[S][c],v({},Ln,d),h)},m),n.createElement(vn,{image:u,theme:S,baseFontSize:I,variant:c}),n.createElement("div",{className:zn(null!=u,d)},p),d&&n.createElement(pn,{theme:S,baseFontSize:I,variant:c,onClose:b,darkMode:O}))})),Rn=Pn;Pn.displayName="Banner";export{rn as Variant,Rn as default};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/icon/dist/X"),require("@leafygreen-ui/icon-button"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon/dist/CheckmarkWithCircle"),require("@leafygreen-ui/icon/dist/ImportantWithCircle"),require("@leafygreen-ui/icon/dist/InfoWithCircle"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/tokens")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/typography","@leafygreen-ui/icon/dist/X","@leafygreen-ui/icon-button","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/icon/dist/CheckmarkWithCircle","@leafygreen-ui/icon/dist/ImportantWithCircle","@leafygreen-ui/icon/dist/InfoWithCircle","@leafygreen-ui/icon/dist/Warning","@leafygreen-ui/tokens"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/banner"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/typography"],e.X,e["@leafygreen-ui/icon-button"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.CheckmarkWithCircle,e.ImportantWithCircle,e.InfoWithCircle,e.Warning,e["@leafygreen-ui/tokens"])}(this,(function(e,n,t,r,l,a,o,i,c,s,p,d,g,u){"use strict";function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=f(n),h=f(a),x=f(o),y=f(s),k=f(p),m=f(d),v=f(g);function w(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function C(e,n,t){return(n=w(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function S(){return S=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},S.apply(this,arguments)}function W(e,n){if(null==e)return{};var t,r,l=function(e,n){if(null==e)return{};var t,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}function I(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var N,O,j,q,D,z,T,E,F,M,P,R,L,B,X,_,U,V,A,G,H,J,K,Q,Y,Z,$,ee,ne,te,re,le,ae={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},oe=t.css(N||(N=I(["\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  right: 8px; // Icon is 24px(it's 24px to include hover background), in figma its 16px(does not include the hover background) (24px - 16px)/2 = 4. The space between the icon and the banner is 12px from the right, 12px - 4px = 8px\n  top: 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n"]))),ie=t.css(O||(O=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.blue.light2,c.palette.blue.light2,c.palette.blue.dark3,c.palette.blue.light1,c.palette.blue.dark2),ce=t.css(j||(j=I(["\n  color: ",";\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.yellow.light2,c.palette.yellow.light2,c.palette.yellow.dark3,c.palette.blue.light1,c.palette.yellow.dark2),se=t.css(q||(q=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.red.light2,c.palette.red.light2,c.palette.red.dark3,c.palette.blue.light1,c.palette.red.dark2),pe=t.css(D||(D=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.green.light2,c.palette.green.light2,c.palette.green.dark3,c.palette.blue.light1,c.palette.green.dark2),de=t.css(z||(z=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.blue.dark2,c.palette.blue.dark2,c.palette.blue.light2),ge=t.css(T||(T=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.yellow.dark2,c.palette.yellow.dark2,c.palette.yellow.light2),ue=t.css(E||(E=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.red.dark2,c.palette.red.dark2,c.palette.red.light2),fe=t.css(F||(F=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.green.dark2,c.palette.green.dark2,c.palette.green.light2),be=C(C({},i.Theme.Dark,C(C(C(C({},ae.Info,ie),ae.Warning,ce),ae.Danger,se),ae.Success,pe)),i.Theme.Light,C(C(C(C({},ae.Info,de),ae.Warning,ge),ae.Danger,ue),ae.Success,fe)),he=function(e){var n=e.onClose,r=e.darkMode,l=e.theme,a=e.variant;return b.default.createElement(x.default,{className:t.cx(oe,be[l][a]),"aria-label":"Close Message",onClick:n,darkMode:r},b.default.createElement(h.default,null))},xe=t.css(M||(M=I(["\n  position: relative;\n  flex-shrink: 0;\n"]))),ye=t.css(P||(P=I(["\n  // this margin is set to control text alignment with the base of the renderedImage\n  margin-top: 3px;\n  margin-bottom: 3px;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n"]))),ke=C(C({},u.BaseFontSize.Body1,t.css(R||(R=I(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),u.BaseFontSize.Body2,t.css(L||(L=I(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),me=C(C({},i.Theme.Dark,C(C(C(C({},ae.Info,t.css(B||(B=I(["\n      color: ",";\n    "])),c.palette.blue.light1)),ae.Warning,t.css(X||(X=I(["\n      color: ",";\n    "])),c.palette.yellow.base)),ae.Danger,t.css(_||(_=I(["\n      color: ",";\n    "])),c.palette.red.light1)),ae.Success,t.css(U||(U=I(["\n      color: ",";\n    "])),c.palette.green.base))),i.Theme.Light,C(C(C(C({},ae.Info,t.css(V||(V=I(["\n      color: ",";\n    "])),c.palette.blue.base)),ae.Warning,t.css(A||(A=I(["\n      color: ",";\n    "])),c.palette.yellow.dark2)),ae.Danger,t.css(G||(G=I(["\n      color: ",";\n    "])),c.palette.red.base)),ae.Success,t.css(H||(H=I(["\n      color: ",";\n    "])),c.palette.green.dark1))),ve=C(C(C(C({},ae.Info,m.default),ae.Warning,k.default),ae.Danger,v.default),ae.Success,y.default),we=function(e){var n=e.image,r=e.baseFontSize,l=e.variant,a=e.theme,o=ve[l];return n?b.default.cloneElement(n,{className:ye}):b.default.createElement(o,{className:t.cx(xe,me[a][l],ke[r])})},Ce=t.css(J||(J=I(["\n  position: relative;\n  display: flex;\n  padding: 10px 12px 10px 20px;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-radius: 12px;\n  font-family: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 13px;\n    top: -1px;\n    bottom: -1px;\n    left: 0px;\n    border-radius: 12px 0px 0px 12px;\n  }\n"])),u.fontFamilies.default),Se=t.css(K||(K=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.blue.light2,c.palette.blue.dark2,c.palette.blue.dark3,l.anchorClassName,c.palette.blue.light3,c.palette.blue.light2,c.palette.blue.dark3,c.palette.blue.light1,c.palette.blue.light1),We=t.css(Q||(Q=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.yellow.light2,c.palette.yellow.dark2,c.palette.yellow.dark3,l.anchorClassName,c.palette.yellow.light3,c.palette.yellow.light2,c.palette.yellow.dark3,c.palette.blue.light1,c.palette.yellow.dark2),Ie=t.css(Y||(Y=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.red.light2,c.palette.red.dark2,c.palette.red.dark3,l.anchorClassName,c.palette.red.light3,c.palette.red.light2,c.palette.red.dark3,c.palette.blue.light1,c.palette.red.base),Ne=t.css(Z||(Z=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.green.light2,c.palette.green.dark2,c.palette.green.dark3,l.anchorClassName,c.palette.green.light3,c.palette.green.light2,c.palette.green.dark3,c.palette.blue.light1,c.palette.green.base),Oe=t.css($||($=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.blue.dark2,c.palette.blue.light2,c.palette.blue.light3,l.anchorClassName,c.palette.blue.dark3,c.palette.blue.dark2,c.palette.blue.light3,c.palette.white,c.palette.blue.light1,c.palette.blue.base),je=t.css(ee||(ee=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.yellow.dark2,c.palette.yellow.light2,c.palette.yellow.light3,l.anchorClassName,c.palette.yellow.dark3,c.palette.yellow.dark2,c.palette.yellow.light3,c.palette.white,c.palette.blue.light1,c.palette.yellow.base),qe=t.css(ne||(ne=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.red.dark2,c.palette.red.light2,c.palette.red.light3,l.anchorClassName,c.palette.red.dark3,c.palette.red.dark2,c.palette.red.light3,c.palette.white,c.palette.blue.light1,c.palette.red.base),De=t.css(te||(te=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.green.dark2,c.palette.green.light2,c.palette.green.light3,l.anchorClassName,c.palette.green.dark3,c.palette.green.dark2,c.palette.green.light3,c.palette.white,c.palette.blue.light1,c.palette.green.dark1),ze=C(C({},i.Theme.Dark,C(C(C(C({},ae.Info,Se),ae.Warning,We),ae.Danger,Ie),ae.Success,Ne)),i.Theme.Light,C(C(C(C({},ae.Info,Oe),ae.Warning,je),ae.Danger,qe),ae.Success,De)),Te=function(e,n){return t.css(re||(re=I(["\n  align-self: center;\n  flex-grow: 1;\n  margin-left: ",";\n  margin-right: ",";\n\n  .",", a {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: ",";\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 2px;\n    border-radius: 4px;\n    display: inline;\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      span {\n        &::after {\n          display: none;\n        }\n      }\n    }\n\n    &:focus-visible {\n      position: relative;\n    }\n  }\n"])),Ee(e,n).marginLeft,Ee(e,n).marginRight,l.anchorClassName,u.fontWeights.bold)},Ee=function(e,n){var t={marginLeft:void 0,marginRight:void 0};return e?(t.marginLeft="17px",t.marginRight="4px",n&&(t.marginRight="".concat(28,"px"))):(t.marginLeft="13px",t.marginRight="10px",n&&(t.marginRight="".concat(32,"px"))),t},Fe=t.css(le||(le=I(["\n  padding-right: 36px; // add space for the icon\n"]))),Me=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Pe=n.forwardRef((function(e,n){var a=e.variant,o=void 0===a?ae.Info:a,i=e.dismissible,c=void 0!==i&&i,s=e.onClose,p=void 0===s?function(){}:s,d=e.image,g=e.children,u=e.className,f=e.darkMode,h=e.baseFontSize,x=W(e,Me),y=r.useDarkMode(f),k=y.theme,m=y.darkMode,v=l.useUpdatedBaseFontSize(h);return b.default.createElement("div",S({role:"alert",ref:n,className:t.cx(Ce,l.bodyTypeScaleStyles[v],ze[k][o],C({},Fe,c),u)},x),b.default.createElement(we,{image:d,theme:k,baseFontSize:v,variant:o}),b.default.createElement("div",{className:Te(null!=d,c)},g),c&&b.default.createElement(he,{theme:k,baseFontSize:v,variant:o,onClose:p,darkMode:m}))}));Pe.displayName="Banner",e.Variant=ae,e.default=Pe,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/icon/dist/X"),require("@leafygreen-ui/icon-button"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon/dist/CheckmarkWithCircle"),require("@leafygreen-ui/icon/dist/ImportantWithCircle"),require("@leafygreen-ui/icon/dist/InfoWithCircle"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/tokens")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/typography","@leafygreen-ui/icon/dist/X","@leafygreen-ui/icon-button","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/icon/dist/CheckmarkWithCircle","@leafygreen-ui/icon/dist/ImportantWithCircle","@leafygreen-ui/icon/dist/InfoWithCircle","@leafygreen-ui/icon/dist/Warning","@leafygreen-ui/tokens"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/banner"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/typography"],e.X,e["@leafygreen-ui/icon-button"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.CheckmarkWithCircle,e.ImportantWithCircle,e.InfoWithCircle,e.Warning,e["@leafygreen-ui/tokens"])}(this,(function(e,n,t,r,l,a,o,i,c,s,p,d,g,u){"use strict";function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=f(n),h=f(a),x=f(o),y=f(s),k=f(p),m=f(d),v=f(g);function w(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function C(e,n,t){return(n=w(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function S(){return S=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},S.apply(this,arguments)}function W(e,n){if(null==e)return{};var t,r,l=function(e,n){if(null==e)return{};var t,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}function I(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var N,O,j,q,D,z,T,E,F,M,P,R,L,B,X,_,U,V,A,G,H,J,K,Q,Y,Z,$,ee,ne,te,re,le,ae={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},oe=t.css(N||(N=I(["\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  right: 8px; // Icon is 24px(it's 24px to include hover background), in figma its 16px(does not include the hover background) (24px - 16px)/2 = 4. The space between the icon and the banner is 12px from the right, 12px - 4px = 8px\n  top: 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n"]))),ie=t.css(O||(O=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.blue.light2,c.palette.blue.light2,c.palette.blue.dark3,c.palette.blue.light1,c.palette.blue.dark2),ce=t.css(j||(j=I(["\n  color: ",";\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.yellow.light2,c.palette.yellow.light2,c.palette.yellow.dark3,c.palette.blue.light1,c.palette.yellow.dark2),se=t.css(q||(q=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.red.light2,c.palette.red.light2,c.palette.red.dark3,c.palette.blue.light1,c.palette.red.dark2),pe=t.css(D||(D=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.green.light2,c.palette.green.light2,c.palette.green.dark3,c.palette.blue.light1,c.palette.green.dark2),de=t.css(z||(z=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.blue.dark2,c.palette.blue.dark2,c.palette.blue.light2),ge=t.css(T||(T=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.yellow.dark2,c.palette.yellow.dark2,c.palette.yellow.light2),ue=t.css(E||(E=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.red.dark2,c.palette.red.dark2,c.palette.red.light2),fe=t.css(F||(F=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),c.palette.green.dark2,c.palette.green.dark2,c.palette.green.light2),be=C(C({},i.Theme.Dark,C(C(C(C({},ae.Info,ie),ae.Warning,ce),ae.Danger,se),ae.Success,pe)),i.Theme.Light,C(C(C(C({},ae.Info,de),ae.Warning,ge),ae.Danger,ue),ae.Success,fe)),he=function(e){var n=e.onClose,r=e.darkMode,l=e.theme,a=e.variant;return b.default.createElement(x.default,{className:t.cx(oe,be[l][a]),"aria-label":"Close Message",onClick:n,darkMode:r},b.default.createElement(h.default,null))},xe=t.css(M||(M=I(["\n  position: relative;\n  flex-shrink: 0;\n"]))),ye=t.css(P||(P=I(["\n  // this margin is set to control text alignment with the base of the renderedImage\n  margin-top: 3px;\n  margin-bottom: 3px;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n"]))),ke=C(C({},u.BaseFontSize.Body1,t.css(R||(R=I(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),u.BaseFontSize.Body2,t.css(L||(L=I(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),me=C(C({},i.Theme.Dark,C(C(C(C({},ae.Info,t.css(B||(B=I(["\n      color: ",";\n    "])),c.palette.blue.light1)),ae.Warning,t.css(X||(X=I(["\n      color: ",";\n    "])),c.palette.yellow.base)),ae.Danger,t.css(_||(_=I(["\n      color: ",";\n    "])),c.palette.red.light1)),ae.Success,t.css(U||(U=I(["\n      color: ",";\n    "])),c.palette.green.base))),i.Theme.Light,C(C(C(C({},ae.Info,t.css(V||(V=I(["\n      color: ",";\n    "])),c.palette.blue.base)),ae.Warning,t.css(A||(A=I(["\n      color: ",";\n    "])),c.palette.yellow.dark2)),ae.Danger,t.css(G||(G=I(["\n      color: ",";\n    "])),c.palette.red.base)),ae.Success,t.css(H||(H=I(["\n      color: ",";\n    "])),c.palette.green.dark1))),ve=C(C(C(C({},ae.Info,m.default),ae.Warning,k.default),ae.Danger,v.default),ae.Success,y.default),we=function(e){var n=e.image,r=e.baseFontSize,l=e.variant,a=e.theme,o=ve[l];return n?b.default.cloneElement(n,{className:ye}):b.default.createElement(o,{className:t.cx(xe,me[a][l],ke[r])})},Ce=t.css(J||(J=I(["\n  position: relative;\n  display: flex;\n  padding: 10px 12px 10px 20px;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-radius: 12px;\n  font-family: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 13px;\n    top: -1px;\n    bottom: -1px;\n    left: 0px;\n    border-radius: 12px 0px 0px 12px;\n  }\n"])),u.fontFamilies.default),Se=t.css(K||(K=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.blue.light2,c.palette.blue.dark2,c.palette.blue.dark3,l.anchorClassName,c.palette.blue.light3,c.palette.blue.light2,c.palette.blue.dark3,c.palette.blue.light1,c.palette.blue.light1),We=t.css(Q||(Q=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.yellow.light2,c.palette.yellow.dark2,c.palette.yellow.dark3,l.anchorClassName,c.palette.yellow.light3,c.palette.yellow.light2,c.palette.yellow.dark3,c.palette.blue.light1,c.palette.yellow.dark2),Ie=t.css(Y||(Y=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.red.light2,c.palette.red.dark2,c.palette.red.dark3,l.anchorClassName,c.palette.red.light3,c.palette.red.light2,c.palette.red.dark3,c.palette.blue.light1,c.palette.red.base),Ne=t.css(Z||(Z=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.green.light2,c.palette.green.dark2,c.palette.green.dark3,l.anchorClassName,c.palette.green.light3,c.palette.green.light2,c.palette.green.dark3,c.palette.blue.light1,c.palette.green.base),Oe=t.css($||($=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.blue.dark2,c.palette.blue.light2,c.palette.blue.light3,l.anchorClassName,c.palette.blue.dark3,c.palette.blue.dark2,c.palette.blue.light3,c.palette.white,c.palette.blue.light1,c.palette.blue.base),je=t.css(ee||(ee=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.yellow.dark2,c.palette.yellow.light2,c.palette.yellow.light3,l.anchorClassName,c.palette.yellow.dark3,c.palette.yellow.dark2,c.palette.yellow.light3,c.palette.white,c.palette.blue.light1,c.palette.yellow.base),qe=t.css(ne||(ne=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.red.dark2,c.palette.red.light2,c.palette.red.light3,l.anchorClassName,c.palette.red.dark3,c.palette.red.dark2,c.palette.red.light3,c.palette.white,c.palette.blue.light1,c.palette.red.base),De=t.css(te||(te=I(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),c.palette.green.dark2,c.palette.green.light2,c.palette.green.light3,l.anchorClassName,c.palette.green.dark3,c.palette.green.dark2,c.palette.green.light3,c.palette.white,c.palette.blue.light1,c.palette.green.dark1),ze=C(C({},i.Theme.Dark,C(C(C(C({},ae.Info,Se),ae.Warning,We),ae.Danger,Ie),ae.Success,Ne)),i.Theme.Light,C(C(C(C({},ae.Info,Oe),ae.Warning,je),ae.Danger,qe),ae.Success,De)),Te=function(e,n){return t.css(re||(re=I(["\n  align-self: center;\n  flex-grow: 1;\n  margin-left: ",";\n  margin-right: ",";\n\n  .",", a {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: ",";\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 2px;\n    border-radius: 4px;\n    display: inline;\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      span {\n        &::after {\n          display: none;\n        }\n      }\n    }\n\n    &:focus-visible {\n      position: relative;\n    }\n  }\n"])),Ee(e,n).marginLeft,Ee(e,n).marginRight,l.anchorClassName,u.fontWeights.bold)},Ee=function(e,n){var t={marginLeft:void 0,marginRight:void 0};return e?(t.marginLeft="17px",t.marginRight="4px",n&&(t.marginRight="".concat(28,"px"))):(t.marginLeft="13px",t.marginRight="10px",n&&(t.marginRight="".concat(32,"px"))),t},Fe=t.css(le||(le=I(["\n  padding-right: 36px; // add space for the icon\n"]))),Me=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Pe=n.forwardRef((function(e,n){var a=e.variant,o=void 0===a?ae.Info:a,i=e.dismissible,c=void 0!==i&&i,s=e.onClose,p=void 0===s?function(){}:s,d=e.image,g=e.children,u=e.className,f=e.darkMode,h=e.baseFontSize,x=W(e,Me),y=r.useDarkMode(f),k=y.theme,m=y.darkMode,v=l.useUpdatedBaseFontSize(h);return b.default.createElement("div",S({role:"alert",ref:n,className:t.cx(Ce,l.bodyTypeScaleStyles[v],ze[k][o],C({},Fe,c),u)},x),b.default.createElement(we,{image:d,theme:k,baseFontSize:v,variant:o}),b.default.createElement("div",{className:Te(null!=d,c)},g),c&&b.default.createElement(he,{theme:k,baseFontSize:v,variant:o,onClose:p,darkMode:m}))})),Re=Pe;Pe.displayName="Banner",e.Variant=ae,e.default=Re,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/banner",
-  "version": "9.0.4",
+  "version": "9.0.5",
   "description": "leafyGreen UI Kit Banner",
@@ -20,12 +20,12 @@ "main": "./dist/index.js",
   "dependencies": {
-    "@leafygreen-ui/palette": "^4.1.3",
-    "@leafygreen-ui/icon": "^13.1.2",
-    "@leafygreen-ui/emotion": "^4.0.9",
-    "@leafygreen-ui/lib": "^14.0.2",
-    "@leafygreen-ui/icon-button": "^16.0.3",
-    "@leafygreen-ui/tokens": "^2.11.3",
-    "@leafygreen-ui/typography": "^20.1.1"
+    "@leafygreen-ui/lib": "^14.0.3",
+    "@leafygreen-ui/palette": "^4.1.4",
+    "@leafygreen-ui/emotion": "^4.0.10",
+    "@leafygreen-ui/icon-button": "^16.0.4",
+    "@leafygreen-ui/icon": "^13.1.3",
+    "@leafygreen-ui/typography": "^20.1.2",
+    "@leafygreen-ui/tokens": "^2.11.4"
   },
   "peerDependencies": {
-    "@leafygreen-ui/leafygreen-provider": "^4.0.2"
+    "@leafygreen-ui/leafygreen-provider": "^4.0.3"
   },
@@ -32,0 +32,0 @@ "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/banner",

stories.js

@@ -1,1 +0,1 @@
-import n,{forwardRef as e}from"react";import{storybookArgTypes as r,storybookExcludedControlParams as o}from"@lg-tools/storybook-utils";import t,{glyphs as i}from"@leafygreen-ui/icon";import{anchorClassName as l,useUpdatedBaseFontSize as a,bodyTypeScaleStyles as c,Link as d}from"@leafygreen-ui/typography";import{css as s,cx as g}from"@leafygreen-ui/emotion";import{useDarkMode as u}from"@leafygreen-ui/leafygreen-provider";import p from"@leafygreen-ui/icon/dist/X";import b from"@leafygreen-ui/icon-button";import{Theme as h}from"@leafygreen-ui/lib";import{palette as f}from"@leafygreen-ui/palette";import m from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import x from"@leafygreen-ui/icon/dist/ImportantWithCircle";import v from"@leafygreen-ui/icon/dist/InfoWithCircle";import y from"@leafygreen-ui/icon/dist/Warning";import{BaseFontSize as k,fontFamilies as w,fontWeights as S}from"@leafygreen-ui/tokens";function O(n){var e=function(n,e){if("object"!=typeof n||!n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var o=r.call(n,e);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n,"string");return"symbol"==typeof e?e:e+""}function j(n,e,r){return(e=O(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function E(){return E=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n},E.apply(this,arguments)}function I(n,e){if(null==n)return{};var r,o,t=function(n,e){if(null==n)return{};var r,o,t={},i=Object.keys(n);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(t[r]=n[r]);return t}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(t[r]=n[r])}return t}function C(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function M(n){return function(n){if(Array.isArray(n))return W(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||function(n,e){if(!n)return;if("string"==typeof n)return W(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);"Object"===r&&n.constructor&&(r=n.constructor.name);if("Map"===r||"Set"===r)return Array.from(n);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return W(n,e)}(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function W(n,e){e=n.length;for(var r=0,o=new Array(e);r<e;r++)o[r]=n[r];return o}var D,A,L,z,N,P,F,R,T,B,V,U,X,$,q,G,H,J,K,Q,Y,Z,_,nn,en,rn,on,tn,ln,an,cn,dn,sn={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},gn=s(D||(D=C(["\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  right: 8px; // Icon is 24px(it's 24px to include hover background), in figma its 16px(does not include the hover background) (24px - 16px)/2 = 4. The space between the icon and the banner is 12px from the right, 12px - 4px = 8px\n  top: 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n"]))),un=s(A||(A=C(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.blue.light2,f.blue.light2,f.blue.dark3,f.blue.light1,f.blue.dark2),pn=s(L||(L=C(["\n  color: ",";\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.yellow.light2,f.yellow.light2,f.yellow.dark3,f.blue.light1,f.yellow.dark2),bn=s(z||(z=C(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.red.light2,f.red.light2,f.red.dark3,f.blue.light1,f.red.dark2),hn=s(N||(N=C(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.green.light2,f.green.light2,f.green.dark3,f.blue.light1,f.green.dark2),fn=s(P||(P=C(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.blue.dark2,f.blue.dark2,f.blue.light2),mn=s(F||(F=C(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.yellow.dark2,f.yellow.dark2,f.yellow.light2),xn=s(R||(R=C(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.red.dark2,f.red.dark2,f.red.light2),vn=s(T||(T=C(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),f.green.dark2,f.green.dark2,f.green.light2),yn=j(j({},h.Dark,j(j(j(j({},sn.Info,un),sn.Warning,pn),sn.Danger,bn),sn.Success,hn)),h.Light,j(j(j(j({},sn.Info,fn),sn.Warning,mn),sn.Danger,xn),sn.Success,vn)),kn=function(e){var r=e.onClose,o=e.darkMode,t=e.theme,i=e.variant;return n.createElement(b,{className:g(gn,yn[t][i]),"aria-label":"Close Message",onClick:r,darkMode:o},n.createElement(p,null))},wn=s(B||(B=C(["\n  position: relative;\n  flex-shrink: 0;\n"]))),Sn=s(V||(V=C(["\n  // this margin is set to control text alignment with the base of the renderedImage\n  margin-top: 3px;\n  margin-bottom: 3px;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n"]))),On=j(j({},k.Body1,s(U||(U=C(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),k.Body2,s(X||(X=C(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),jn=j(j({},h.Dark,j(j(j(j({},sn.Info,s($||($=C(["\n      color: ",";\n    "])),f.blue.light1)),sn.Warning,s(q||(q=C(["\n      color: ",";\n    "])),f.yellow.base)),sn.Danger,s(G||(G=C(["\n      color: ",";\n    "])),f.red.light1)),sn.Success,s(H||(H=C(["\n      color: ",";\n    "])),f.green.base))),h.Light,j(j(j(j({},sn.Info,s(J||(J=C(["\n      color: ",";\n    "])),f.blue.base)),sn.Warning,s(K||(K=C(["\n      color: ",";\n    "])),f.yellow.dark2)),sn.Danger,s(Q||(Q=C(["\n      color: ",";\n    "])),f.red.base)),sn.Success,s(Y||(Y=C(["\n      color: ",";\n    "])),f.green.dark1))),En=j(j(j(j({},sn.Info,v),sn.Warning,x),sn.Danger,y),sn.Success,m),In=function(e){var r=e.image,o=e.baseFontSize,t=e.variant,i=e.theme,l=En[t];return r?n.cloneElement(r,{className:Sn}):n.createElement(l,{className:g(wn,jn[i][t],On[o])})},Cn=s(Z||(Z=C(["\n  position: relative;\n  display: flex;\n  padding: 10px 12px 10px 20px;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-radius: 12px;\n  font-family: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 13px;\n    top: -1px;\n    bottom: -1px;\n    left: 0px;\n    border-radius: 12px 0px 0px 12px;\n  }\n"])),w.default),Mn=s(_||(_=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.blue.light2,f.blue.dark2,f.blue.dark3,l,f.blue.light3,f.blue.light2,f.blue.dark3,f.blue.light1,f.blue.light1),Wn=s(nn||(nn=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.yellow.light2,f.yellow.dark2,f.yellow.dark3,l,f.yellow.light3,f.yellow.light2,f.yellow.dark3,f.blue.light1,f.yellow.dark2),Dn=s(en||(en=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.red.light2,f.red.dark2,f.red.dark3,l,f.red.light3,f.red.light2,f.red.dark3,f.blue.light1,f.red.base),An=s(rn||(rn=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.green.light2,f.green.dark2,f.green.dark3,l,f.green.light3,f.green.light2,f.green.dark3,f.blue.light1,f.green.base),Ln=s(on||(on=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.blue.dark2,f.blue.light2,f.blue.light3,l,f.blue.dark3,f.blue.dark2,f.blue.light3,f.white,f.blue.light1,f.blue.base),zn=s(tn||(tn=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.yellow.dark2,f.yellow.light2,f.yellow.light3,l,f.yellow.dark3,f.yellow.dark2,f.yellow.light3,f.white,f.blue.light1,f.yellow.base),Nn=s(ln||(ln=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.red.dark2,f.red.light2,f.red.light3,l,f.red.dark3,f.red.dark2,f.red.light3,f.white,f.blue.light1,f.red.base),Pn=s(an||(an=C(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),f.green.dark2,f.green.light2,f.green.light3,l,f.green.dark3,f.green.dark2,f.green.light3,f.white,f.blue.light1,f.green.dark1),Fn=j(j({},h.Dark,j(j(j(j({},sn.Info,Mn),sn.Warning,Wn),sn.Danger,Dn),sn.Success,An)),h.Light,j(j(j(j({},sn.Info,Ln),sn.Warning,zn),sn.Danger,Nn),sn.Success,Pn)),Rn=function(n,e){return s(cn||(cn=C(["\n  align-self: center;\n  flex-grow: 1;\n  margin-left: ",";\n  margin-right: ",";\n\n  .",", a {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: ",";\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 2px;\n    border-radius: 4px;\n    display: inline;\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      span {\n        &::after {\n          display: none;\n        }\n      }\n    }\n\n    &:focus-visible {\n      position: relative;\n    }\n  }\n"])),Tn(n,e).marginLeft,Tn(n,e).marginRight,l,S.bold)},Tn=function(n,e){var r={marginLeft:void 0,marginRight:void 0};return n?(r.marginLeft="17px",r.marginRight="4px",e&&(r.marginRight="".concat(28,"px"))):(r.marginLeft="13px",r.marginRight="10px",e&&(r.marginRight="".concat(32,"px"))),r},Bn=s(dn||(dn=C(["\n  padding-right: 36px; // add space for the icon\n"]))),Vn=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Un=e((function(e,r){var o=e.variant,t=void 0===o?sn.Info:o,i=e.dismissible,l=void 0!==i&&i,d=e.onClose,s=void 0===d?function(){}:d,p=e.image,b=e.children,h=e.className,f=e.darkMode,m=e.baseFontSize,x=I(e,Vn),v=u(f),y=v.theme,k=v.darkMode,w=a(m);return n.createElement("div",E({role:"alert",ref:r,className:g(Cn,c[w],Fn[y][t],j({},Bn,l),h)},x),n.createElement(In,{image:p,theme:y,baseFontSize:w,variant:t}),n.createElement("div",{className:Rn(null!=p,l)},b),l&&n.createElement(kn,{theme:y,baseFontSize:w,variant:t,onClose:s,darkMode:k}))}));Un.displayName="Banner";var Xn=["glyph"],$n={title:"Components/Banner",component:Un,parameters:{default:"LiveExample",generate:{combineArgs:{darkMode:[!1,!0],image:[void 0,n.createElement(t,{glyph:"Visibility"}),n.createElement("img",{src:"favicon.ico"})],variant:Object.values(sn),dismissible:[!1,!0]}},controls:{exclude:[].concat(M(o),["image"])}},args:{children:n.createElement(n.Fragment,null,"To avoid disrupting majority writes, new members are now added to replica sets as priority=0, votes=0 until they reach secondary state, after which Cloud Manager automatically updates the configuration to match the priority and votes value specified in the deployment.  ",n.createElement("a",{href:"https://mongodb.com"},"Anchor tag")," ",n.createElement(d,null,"Link Component")),darkMode:!1,dismissible:!1},argTypes:{children:r.children,darkMode:r.darkMode,dismissible:{control:"boolean"},variant:{options:Object.values(sn),control:{type:"select"},defaultValue:sn.Info},glyph:{options:[void 0].concat(M(Object.keys(i))),control:{type:"select"}}}},qn=function(e){var r=e.glyph,o=I(e,Xn);return n.createElement(Un,E({image:r?n.createElement(t,{glyph:r}):void 0},o))};qn.parameters={chromatic:{disableSnapshot:!0}};var Gn=function(){};export{Gn as Generated,qn as LiveExample,$n as default};
+import n,{forwardRef as e}from"react";import r,{glyphs as o}from"@leafygreen-ui/icon";import{anchorClassName as t,useUpdatedBaseFontSize as i,bodyTypeScaleStyles as a,Link as l}from"@leafygreen-ui/typography";import{css as c,cx as d}from"@leafygreen-ui/emotion";import{useDarkMode as s}from"@leafygreen-ui/leafygreen-provider";import g from"@leafygreen-ui/icon/dist/X";import p from"@leafygreen-ui/icon-button";import{Theme as u}from"@leafygreen-ui/lib";import{palette as b}from"@leafygreen-ui/palette";import h from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import f from"@leafygreen-ui/icon/dist/ImportantWithCircle";import m from"@leafygreen-ui/icon/dist/InfoWithCircle";import x from"@leafygreen-ui/icon/dist/Warning";import{BaseFontSize as v,fontFamilies as y,fontWeights as k}from"@leafygreen-ui/tokens";function w(n){var e=function(n,e){if("object"!=typeof n||!n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var o=r.call(n,e);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n,"string");return"symbol"==typeof e?e:e+""}function S(n,e,r){return(e=w(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function C(){return C=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n},C.apply(this,arguments)}function O(n,e){if(null==n)return{};var r,o,t=function(n,e){if(null==n)return{};var r,o,t={},i=Object.keys(n);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(t[r]=n[r]);return t}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(t[r]=n[r])}return t}function E(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function j(n){return function(n){if(Array.isArray(n))return I(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||function(n,e){if(!n)return;if("string"==typeof n)return I(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);"Object"===r&&n.constructor&&(r=n.constructor.name);if("Map"===r||"Set"===r)return Array.from(n);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return I(n,e)}(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function I(n,e){e=n.length;for(var r=0,o=new Array(e);r<e;r++)o[r]=n[r];return o}var M,z,D,L,W,A,N,P,F,T,R,B,V,q,G,U,H,X,Z,$,J,K,Q,Y,_,nn,en,rn,on,tn,an,ln,cn={baseFontSize:{description:"The base font size passed to the LeafyGreenProvider that wraps the component",control:{type:"radio"},options:[14,16]},updatedBaseFontSize:{description:"The base font size passed to the LeafyGreenProvider that wraps the component. Uses the updated font size values for Euclid Circular A.",control:{type:"radio"},options:[13,16]},darkMode:{description:"Render the component in dark mode.",control:"boolean"},children:{description:"Element rendered inside the component",control:"text"},as:{description:"The component will be rendered in HTML as the element selected here",options:["small","button","a","abbr","address","article","aside","b","big","blockquote","caption","cite","code","dd","del","details","dfn","dialog","div","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","i","ins","kbd","keygen","label","legend","li","main","map","mark","menu","menuitem","meter","nav","noscript","ol","p","picture","pre","progress","q","rp","rt","ruby","s","samp","slot","script","section","select","span","strong","style","sub","summary","sup","template","tbody","td","tfoot","th","thead","time","title","tr","u","ul"],type:{name:"string"},control:{type:"select"},defaultValue:"button"}},dn={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},sn=c(M||(M=E(["\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  right: 8px; // Icon is 24px(it's 24px to include hover background), in figma its 16px(does not include the hover background) (24px - 16px)/2 = 4. The space between the icon and the banner is 12px from the right, 12px - 4px = 8px\n  top: 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n"]))),gn=c(z||(z=E(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.blue.light2,b.blue.light2,b.blue.dark3,b.blue.light1,b.blue.dark2),pn=c(D||(D=E(["\n  color: ",";\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.yellow.light2,b.yellow.light2,b.yellow.dark3,b.blue.light1,b.yellow.dark2),un=c(L||(L=E(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.red.light2,b.red.light2,b.red.dark3,b.blue.light1,b.red.dark2),bn=c(W||(W=E(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n    box-shadow: 0 0 0 2px ",",\n      0 0 0 4px ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.green.light2,b.green.light2,b.green.dark3,b.blue.light1,b.green.dark2),hn=c(A||(A=E(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.blue.dark2,b.blue.dark2,b.blue.light2),fn=c(N||(N=E(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.yellow.dark2,b.yellow.dark2,b.yellow.light2),mn=c(P||(P=E(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.red.dark2,b.red.dark2,b.red.light2),xn=c(F||(F=E(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),b.green.dark2,b.green.dark2,b.green.light2),vn=S(S({},u.Dark,S(S(S(S({},dn.Info,gn),dn.Warning,pn),dn.Danger,un),dn.Success,bn)),u.Light,S(S(S(S({},dn.Info,hn),dn.Warning,fn),dn.Danger,mn),dn.Success,xn)),yn=function(e){var r=e.onClose,o=e.darkMode,t=e.theme,i=e.variant;return n.createElement(p,{className:d(sn,vn[t][i]),"aria-label":"Close Message",onClick:r,darkMode:o},n.createElement(g,null))},kn=c(T||(T=E(["\n  position: relative;\n  flex-shrink: 0;\n"]))),wn=c(R||(R=E(["\n  // this margin is set to control text alignment with the base of the renderedImage\n  margin-top: 3px;\n  margin-bottom: 3px;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n"]))),Sn=S(S({},v.Body1,c(B||(B=E(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),v.Body2,c(V||(V=E(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),Cn=S(S({},u.Dark,S(S(S(S({},dn.Info,c(q||(q=E(["\n      color: ",";\n    "])),b.blue.light1)),dn.Warning,c(G||(G=E(["\n      color: ",";\n    "])),b.yellow.base)),dn.Danger,c(U||(U=E(["\n      color: ",";\n    "])),b.red.light1)),dn.Success,c(H||(H=E(["\n      color: ",";\n    "])),b.green.base))),u.Light,S(S(S(S({},dn.Info,c(X||(X=E(["\n      color: ",";\n    "])),b.blue.base)),dn.Warning,c(Z||(Z=E(["\n      color: ",";\n    "])),b.yellow.dark2)),dn.Danger,c($||($=E(["\n      color: ",";\n    "])),b.red.base)),dn.Success,c(J||(J=E(["\n      color: ",";\n    "])),b.green.dark1))),On=S(S(S(S({},dn.Info,m),dn.Warning,f),dn.Danger,x),dn.Success,h),En=function(e){var r=e.image,o=e.baseFontSize,t=e.variant,i=e.theme,a=On[t];return r?n.cloneElement(r,{className:wn}):n.createElement(a,{className:d(kn,Cn[i][t],Sn[o])})},jn=c(K||(K=E(["\n  position: relative;\n  display: flex;\n  padding: 10px 12px 10px 20px;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-radius: 12px;\n  font-family: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 13px;\n    top: -1px;\n    bottom: -1px;\n    left: 0px;\n    border-radius: 12px 0px 0px 12px;\n  }\n"])),y.default),In=c(Q||(Q=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.blue.light2,b.blue.dark2,b.blue.dark3,t,b.blue.light3,b.blue.light2,b.blue.dark3,b.blue.light1,b.blue.light1),Mn=c(Y||(Y=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.yellow.light2,b.yellow.dark2,b.yellow.dark3,t,b.yellow.light3,b.yellow.light2,b.yellow.dark3,b.blue.light1,b.yellow.dark2),zn=c(_||(_=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.red.light2,b.red.dark2,b.red.dark3,t,b.red.light3,b.red.light2,b.red.dark3,b.blue.light1,b.red.base),Dn=c(nn||(nn=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.green.light2,b.green.dark2,b.green.dark3,t,b.green.light3,b.green.light2,b.green.dark3,b.blue.light1,b.green.base),Ln=c(en||(en=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.blue.dark2,b.blue.light2,b.blue.light3,t,b.blue.dark3,b.blue.dark2,b.blue.light3,b.white,b.blue.light1,b.blue.base),Wn=c(rn||(rn=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.yellow.dark2,b.yellow.light2,b.yellow.light3,t,b.yellow.dark3,b.yellow.dark2,b.yellow.light3,b.white,b.blue.light1,b.yellow.base),An=c(on||(on=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.red.dark2,b.red.light2,b.red.light3,t,b.red.dark3,b.red.dark2,b.red.light3,b.white,b.blue.light1,b.red.base),Nn=c(tn||(tn=E(["\n  color: ",";\n  border-color: ",";\n  background-color: ",";\n\n  .",", a {\n    color: ",";\n\n    &:hover {\n      color: ",";\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 3px ",", 0 0 0 5px ",",\n        0 0 0 7px ",";\n    }\n  }\n\n  &:before {\n    background: linear-gradient(\n      to left,\n      transparent 6px,\n      "," 6px\n    );\n  }\n"])),b.green.dark2,b.green.light2,b.green.light3,t,b.green.dark3,b.green.dark2,b.green.light3,b.white,b.blue.light1,b.green.dark1),Pn=S(S({},u.Dark,S(S(S(S({},dn.Info,In),dn.Warning,Mn),dn.Danger,zn),dn.Success,Dn)),u.Light,S(S(S(S({},dn.Info,Ln),dn.Warning,Wn),dn.Danger,An),dn.Success,Nn)),Fn=function(n,e){return c(an||(an=E(["\n  align-self: center;\n  flex-grow: 1;\n  margin-left: ",";\n  margin-right: ",";\n\n  .",", a {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: ",";\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    text-decoration-thickness: 2px;\n    border-radius: 4px;\n    display: inline;\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      span {\n        &::after {\n          display: none;\n        }\n      }\n    }\n\n    &:focus-visible {\n      position: relative;\n    }\n  }\n"])),Tn(n,e).marginLeft,Tn(n,e).marginRight,t,k.bold)},Tn=function(n,e){var r={marginLeft:void 0,marginRight:void 0};return n?(r.marginLeft="17px",r.marginRight="4px",e&&(r.marginRight="".concat(28,"px"))):(r.marginLeft="13px",r.marginRight="10px",e&&(r.marginRight="".concat(32,"px"))),r},Rn=c(ln||(ln=E(["\n  padding-right: 36px; // add space for the icon\n"]))),Bn=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Vn=e((function(e,r){var o=e.variant,t=void 0===o?dn.Info:o,l=e.dismissible,c=void 0!==l&&l,g=e.onClose,p=void 0===g?function(){}:g,u=e.image,b=e.children,h=e.className,f=e.darkMode,m=e.baseFontSize,x=O(e,Bn),v=s(f),y=v.theme,k=v.darkMode,w=i(m);return n.createElement("div",C({role:"alert",ref:r,className:d(jn,a[w],Pn[y][t],S({},Rn,c),h)},x),n.createElement(En,{image:u,theme:y,baseFontSize:w,variant:t}),n.createElement("div",{className:Fn(null!=u,c)},b),c&&n.createElement(yn,{theme:y,baseFontSize:w,variant:t,onClose:p,darkMode:k}))}));Vn.displayName="Banner";var qn=["glyph"],Gn={title:"Components/Banner",component:Vn,parameters:{default:"LiveExample",generate:{combineArgs:{darkMode:[!1,!0],image:[void 0,n.createElement(r,{glyph:"Visibility"}),n.createElement("img",{src:"favicon.ico"})],variant:Object.values(dn),dismissible:[!1,!0]}},controls:{exclude:[].concat(j(["aria-controls","aria-describedby","aria-label","aria-labelledby","aria-describedby","className","data-lgid","id","onBlur","onCancel","onChange","onClear","onClick","onConfirm","onDismiss","onFilter","popoverZIndex","portalClassName","portalContainer","ref","setOpen","scrollContainer","usePortal"]),["image"])}},args:{children:n.createElement(n.Fragment,null,"To avoid disrupting majority writes, new members are now added to replica sets as priority=0, votes=0 until they reach secondary state, after which Cloud Manager automatically updates the configuration to match the priority and votes value specified in the deployment.  ",n.createElement("a",{href:"https://mongodb.com"},"Anchor tag")," ",n.createElement(l,null,"Link Component")),darkMode:!1,dismissible:!1},argTypes:{children:cn.children,darkMode:cn.darkMode,dismissible:{control:"boolean"},variant:{options:Object.values(dn),control:{type:"select"},defaultValue:dn.Info},glyph:{options:[void 0].concat(j(Object.keys(o))),control:{type:"select"}}}},Un=function(e){var o=e.glyph,t=O(e,qn);return n.createElement(Vn,C({image:o?n.createElement(r,{glyph:o}):void 0},t))};Un.parameters={chromatic:{disableSnapshot:!0}};var Hn=function(){};export{Hn as Generated,Un as LiveExample,Gn as default};

No alert changes

Improved metrics

Total package byte prevSize

166519

1.26%

Lines of code

1268

0.48%

Dependency changes

• Updated

  @leafygreen-ui/emotion@^4.0.10

• Updated

  @leafygreen-ui/icon@^13.1.3

• Updated

  @leafygreen-ui/icon-button@^16.0.4

• Updated

  @leafygreen-ui/lib@^14.0.3

• Updated

  @leafygreen-ui/palette@^4.1.4

• Updated

  @leafygreen-ui/tokens@^2.11.4

• Updated

  @leafygreen-ui/typography@^20.1.2