@leafygreen-ui/banner - npm Package Compare versions

Comparing version 8.0.1 to 9.0.0

CHANGELOG.md

 # @leafygreen-ui/banner
 
+## 9.0.0
+
+### Major Changes
+
+- 274d7e1a7: Removes prop-types from LeafyGreen UI
+
+### Patch Changes
+
+- Updated dependencies [274d7e1a7]
+  - @leafygreen-ui/leafygreen-provider@4.0.0
+  - @leafygreen-ui/icon-button@16.0.0
+  - @leafygreen-ui/typography@20.0.0
+  - @leafygreen-ui/icon@13.0.0
+  - @leafygreen-ui/lib@14.0.0
+  - @leafygreen-ui/tokens@2.11.1
+
 ## 8.0.1
@@ -4,0 +20,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n,{forwardRef as e}from"react";import r from"prop-types";import{css as o,cx as i}from"@leafygreen-ui/emotion";import{useDarkMode as l}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as t,fontFamilies as a,fontWeights as c}from"@leafygreen-ui/tokens";import{anchorClassName as g,useUpdatedBaseFontSize as d,bodyTypeScaleStyles as s}from"@leafygreen-ui/typography";import b from"@leafygreen-ui/icon/dist/X";import p from"@leafygreen-ui/icon-button";import{Theme as u}from"@leafygreen-ui/lib";import{palette as h}from"@leafygreen-ui/palette";import f from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import x from"@leafygreen-ui/icon/dist/ImportantWithCircle";import m from"@leafygreen-ui/icon/dist/InfoWithCircle";import k from"@leafygreen-ui/icon/dist/Warning";function v(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||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}(n,"string");return"symbol"==typeof e?e:e+""}function y(n,e,r){return(e=v(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function w(){return w=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},w.apply(this,arguments)}function O(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 j,I,W,C,D,E,z,N,M,L,P,F,R,B,T,X,q,A,G,H,J,K,Q,U,V,Y,Z,$,_,nn,en,rn,on={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},ln=o(j||(j=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"]))),tn=o(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"])),h.blue.light2,h.blue.light2,h.blue.dark3,h.blue.light1,h.blue.dark2),an=o(W||(W=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"])),h.yellow.light2,h.yellow.light2,h.yellow.dark3,h.blue.light1,h.yellow.dark2),cn=o(C||(C=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"])),h.red.light2,h.red.light2,h.red.dark3,h.blue.light1,h.red.dark2),gn=o(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"])),h.green.light2,h.green.light2,h.green.dark3,h.blue.light1,h.green.dark2),dn=o(E||(E=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),h.blue.dark2,h.blue.dark2,h.blue.light2),sn=o(z||(z=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),h.yellow.dark2,h.yellow.dark2,h.yellow.light2),bn=o(N||(N=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),h.red.dark2,h.red.dark2,h.red.light2),pn=o(M||(M=S(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),h.green.dark2,h.green.dark2,h.green.light2),un=y(y({},u.Dark,y(y(y(y({},on.Info,tn),on.Warning,an),on.Danger,cn),on.Success,gn)),u.Light,y(y(y(y({},on.Info,dn),on.Warning,sn),on.Danger,bn),on.Success,pn)),hn=function(e){var r=e.onClose,o=e.darkMode,l=e.theme,t=e.variant;return n.createElement(p,{className:i(ln,un[l][t]),"aria-label":"Close Message",onClick:r,darkMode:o},n.createElement(b,null))},fn=o(L||(L=S(["\n  position: relative;\n  flex-shrink: 0;\n"]))),xn=o(P||(P=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"]))),mn=y(y({},t.Body1,o(F||(F=S(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),t.Body2,o(R||(R=S(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),kn=y(y({},u.Dark,y(y(y(y({},on.Info,o(B||(B=S(["\n      color: ",";\n    "])),h.blue.light1)),on.Warning,o(T||(T=S(["\n      color: ",";\n    "])),h.yellow.base)),on.Danger,o(X||(X=S(["\n      color: ",";\n    "])),h.red.light1)),on.Success,o(q||(q=S(["\n      color: ",";\n    "])),h.green.base))),u.Light,y(y(y(y({},on.Info,o(A||(A=S(["\n      color: ",";\n    "])),h.blue.base)),on.Warning,o(G||(G=S(["\n      color: ",";\n    "])),h.yellow.dark2)),on.Danger,o(H||(H=S(["\n      color: ",";\n    "])),h.red.base)),on.Success,o(J||(J=S(["\n      color: ",";\n    "])),h.green.dark1))),vn=y(y(y(y({},on.Info,m),on.Warning,x),on.Danger,k),on.Success,f),yn=function(e){var r=e.image,o=e.baseFontSize,l=e.variant,t=e.theme,a=vn[l];return r?n.cloneElement(r,{className:xn}):n.createElement(a,{className:i(fn,kn[t][l],mn[o])})},wn=o(K||(K=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"])),a.default),On=o(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"])),h.blue.light2,h.blue.dark2,h.blue.dark3,g,h.blue.light3,h.blue.light2,h.blue.dark3,h.blue.light1,h.blue.light1),Sn=o(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"])),h.yellow.light2,h.yellow.dark2,h.yellow.dark3,g,h.yellow.light3,h.yellow.light2,h.yellow.dark3,h.blue.light1,h.yellow.dark2),jn=o(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"])),h.red.light2,h.red.dark2,h.red.dark3,g,h.red.light3,h.red.light2,h.red.dark3,h.blue.light1,h.red.base),In=o(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 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"])),h.green.light2,h.green.dark2,h.green.dark3,g,h.green.light3,h.green.light2,h.green.dark3,h.blue.light1,h.green.base),Wn=o(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"])),h.blue.dark2,h.blue.light2,h.blue.light3,g,h.blue.dark3,h.blue.dark2,h.blue.light3,h.white,h.blue.light1,h.blue.base),Cn=o($||($=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"])),h.yellow.dark2,h.yellow.light2,h.yellow.light3,g,h.yellow.dark3,h.yellow.dark2,h.yellow.light3,h.white,h.blue.light1,h.yellow.base),Dn=o(_||(_=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"])),h.red.dark2,h.red.light2,h.red.light3,g,h.red.dark3,h.red.dark2,h.red.light3,h.white,h.blue.light1,h.red.base),En=o(nn||(nn=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"])),h.green.dark2,h.green.light2,h.green.light3,g,h.green.dark3,h.green.dark2,h.green.light3,h.white,h.blue.light1,h.green.dark1),zn=y(y({},u.Dark,y(y(y(y({},on.Info,On),on.Warning,Sn),on.Danger,jn),on.Success,In)),u.Light,y(y(y(y({},on.Info,Wn),on.Warning,Cn),on.Danger,Dn),on.Success,En)),Nn=function(n,e){return o(en||(en=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"])),Mn(n,e).marginLeft,Mn(n,e).marginRight,g,c.bold)},Mn=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=o(rn||(rn=S(["\n  padding-right: 36px; // add space for the icon\n"]))),Pn=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Fn=e((function(e,r){var o=e.variant,t=void 0===o?on.Info:o,a=e.dismissible,c=void 0!==a&&a,g=e.onClose,b=void 0===g?function(){}:g,p=e.image,u=e.children,h=e.className,f=e.darkMode,x=e.baseFontSize,m=O(e,Pn),k=l(f),v=k.theme,S=k.darkMode,j=d(x);return n.createElement("div",w({role:"alert",ref:r,className:i(wn,s[j],zn[v][t],y({},Ln,c),h)},m),n.createElement(yn,{image:p,theme:v,baseFontSize:j,variant:t}),n.createElement("div",{className:Nn(null!=p,c)},u),c&&n.createElement(hn,{theme:v,baseFontSize:j,variant:t,onClose:b,darkMode:S}))}));Fn.displayName="Banner",Fn.propTypes={darkMode:r.bool,variant:r.oneOf(Object.values(on)),onClose:r.func,dismissible:r.bool,image:r.element,baseFontSize:r.oneOf(Object.values(t))};export{on as Variant,Fn 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}))}));Pn.displayName="Banner";export{rn as Variant,Pn 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("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),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")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@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"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/banner"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],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)}(this,(function(e,n,t,r,l,a,o,i,c,s,p,d,u,g,f){"use strict";function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=b(n),x=b(t),y=b(i),k=b(c),m=b(d),v=b(u),w=b(g),C=b(f);function S(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||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}function O(e,n,t){return(n=S(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function W(){return W=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},W.apply(this,arguments)}function j(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,q,z,T,D,F,E,M,P,R,B,L,X,_,U,V,A,G,H,J,K,Q,Y,Z,$,ee,ne,te,re,le,ae,oe,ie={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},ce=r.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"]))),se=r.css(q||(q=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"])),p.palette.blue.light2,p.palette.blue.light2,p.palette.blue.dark3,p.palette.blue.light1,p.palette.blue.dark2),pe=r.css(z||(z=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"])),p.palette.yellow.light2,p.palette.yellow.light2,p.palette.yellow.dark3,p.palette.blue.light1,p.palette.yellow.dark2),de=r.css(T||(T=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"])),p.palette.red.light2,p.palette.red.light2,p.palette.red.dark3,p.palette.blue.light1,p.palette.red.dark2),ue=r.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"])),p.palette.green.light2,p.palette.green.light2,p.palette.green.dark3,p.palette.blue.light1,p.palette.green.dark2),ge=r.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"])),p.palette.blue.dark2,p.palette.blue.dark2,p.palette.blue.light2),fe=r.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"])),p.palette.yellow.dark2,p.palette.yellow.dark2,p.palette.yellow.light2),be=r.css(M||(M=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),p.palette.red.dark2,p.palette.red.dark2,p.palette.red.light2),he=r.css(P||(P=I(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),p.palette.green.dark2,p.palette.green.dark2,p.palette.green.light2),xe=O(O({},s.Theme.Dark,O(O(O(O({},ie.Info,se),ie.Warning,pe),ie.Danger,de),ie.Success,ue)),s.Theme.Light,O(O(O(O({},ie.Info,ge),ie.Warning,fe),ie.Danger,be),ie.Success,he)),ye=function(e){var n=e.onClose,t=e.darkMode,l=e.theme,a=e.variant;return h.default.createElement(k.default,{className:r.cx(ce,xe[l][a]),"aria-label":"Close Message",onClick:n,darkMode:t},h.default.createElement(y.default,null))},ke=r.css(R||(R=I(["\n  position: relative;\n  flex-shrink: 0;\n"]))),me=r.css(B||(B=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"]))),ve=O(O({},a.BaseFontSize.Body1,r.css(L||(L=I(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),a.BaseFontSize.Body2,r.css(X||(X=I(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),we=O(O({},s.Theme.Dark,O(O(O(O({},ie.Info,r.css(_||(_=I(["\n      color: ",";\n    "])),p.palette.blue.light1)),ie.Warning,r.css(U||(U=I(["\n      color: ",";\n    "])),p.palette.yellow.base)),ie.Danger,r.css(V||(V=I(["\n      color: ",";\n    "])),p.palette.red.light1)),ie.Success,r.css(A||(A=I(["\n      color: ",";\n    "])),p.palette.green.base))),s.Theme.Light,O(O(O(O({},ie.Info,r.css(G||(G=I(["\n      color: ",";\n    "])),p.palette.blue.base)),ie.Warning,r.css(H||(H=I(["\n      color: ",";\n    "])),p.palette.yellow.dark2)),ie.Danger,r.css(J||(J=I(["\n      color: ",";\n    "])),p.palette.red.base)),ie.Success,r.css(K||(K=I(["\n      color: ",";\n    "])),p.palette.green.dark1))),Ce=O(O(O(O({},ie.Info,w.default),ie.Warning,v.default),ie.Danger,C.default),ie.Success,m.default),Se=function(e){var n=e.image,t=e.baseFontSize,l=e.variant,a=e.theme,o=Ce[l];return n?h.default.cloneElement(n,{className:me}):h.default.createElement(o,{className:r.cx(ke,we[a][l],ve[t])})},Oe=r.css(Q||(Q=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"])),a.fontFamilies.default),We=r.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"])),p.palette.blue.light2,p.palette.blue.dark2,p.palette.blue.dark3,o.anchorClassName,p.palette.blue.light3,p.palette.blue.light2,p.palette.blue.dark3,p.palette.blue.light1,p.palette.blue.light1),je=r.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"])),p.palette.yellow.light2,p.palette.yellow.dark2,p.palette.yellow.dark3,o.anchorClassName,p.palette.yellow.light3,p.palette.yellow.light2,p.palette.yellow.dark3,p.palette.blue.light1,p.palette.yellow.dark2),Ie=r.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 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"])),p.palette.red.light2,p.palette.red.dark2,p.palette.red.dark3,o.anchorClassName,p.palette.red.light3,p.palette.red.light2,p.palette.red.dark3,p.palette.blue.light1,p.palette.red.base),Ne=r.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 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"])),p.palette.green.light2,p.palette.green.dark2,p.palette.green.dark3,o.anchorClassName,p.palette.green.light3,p.palette.green.light2,p.palette.green.dark3,p.palette.blue.light1,p.palette.green.base),qe=r.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"])),p.palette.blue.dark2,p.palette.blue.light2,p.palette.blue.light3,o.anchorClassName,p.palette.blue.dark3,p.palette.blue.dark2,p.palette.blue.light3,p.palette.white,p.palette.blue.light1,p.palette.blue.base),ze=r.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"])),p.palette.yellow.dark2,p.palette.yellow.light2,p.palette.yellow.light3,o.anchorClassName,p.palette.yellow.dark3,p.palette.yellow.dark2,p.palette.yellow.light3,p.palette.white,p.palette.blue.light1,p.palette.yellow.base),Te=r.css(re||(re=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"])),p.palette.red.dark2,p.palette.red.light2,p.palette.red.light3,o.anchorClassName,p.palette.red.dark3,p.palette.red.dark2,p.palette.red.light3,p.palette.white,p.palette.blue.light1,p.palette.red.base),De=r.css(le||(le=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"])),p.palette.green.dark2,p.palette.green.light2,p.palette.green.light3,o.anchorClassName,p.palette.green.dark3,p.palette.green.dark2,p.palette.green.light3,p.palette.white,p.palette.blue.light1,p.palette.green.dark1),Fe=O(O({},s.Theme.Dark,O(O(O(O({},ie.Info,We),ie.Warning,je),ie.Danger,Ie),ie.Success,Ne)),s.Theme.Light,O(O(O(O({},ie.Info,qe),ie.Warning,ze),ie.Danger,Te),ie.Success,De)),Ee=function(e,n){return r.css(ae||(ae=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"])),Me(e,n).marginLeft,Me(e,n).marginRight,o.anchorClassName,a.fontWeights.bold)},Me=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},Pe=r.css(oe||(oe=I(["\n  padding-right: 36px; // add space for the icon\n"]))),Re=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Be=n.forwardRef((function(e,n){var t=e.variant,a=void 0===t?ie.Info:t,i=e.dismissible,c=void 0!==i&&i,s=e.onClose,p=void 0===s?function(){}:s,d=e.image,u=e.children,g=e.className,f=e.darkMode,b=e.baseFontSize,x=j(e,Re),y=l.useDarkMode(f),k=y.theme,m=y.darkMode,v=o.useUpdatedBaseFontSize(b);return h.default.createElement("div",W({role:"alert",ref:n,className:r.cx(Oe,o.bodyTypeScaleStyles[v],Fe[k][a],O({},Pe,c),g)},x),h.default.createElement(Se,{image:d,theme:k,baseFontSize:v,variant:a}),h.default.createElement("div",{className:Ee(null!=d,c)},u),c&&h.default.createElement(ye,{theme:k,baseFontSize:v,variant:a,onClose:p,darkMode:m}))}));Be.displayName="Banner",Be.propTypes={darkMode:x.default.bool,variant:x.default.oneOf(Object.values(ie)),onClose:x.default.func,dismissible:x.default.bool,image:x.default.element,baseFontSize:x.default.oneOf(Object.values(a.BaseFontSize))},e.Variant=ie,e.default=Be,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}))}));Pe.displayName="Banner",e.Variant=ae,e.default=Pe,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/banner",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "description": "leafyGreen UI Kit Banner",
@@ -25,12 +25,12 @@ "main": "./dist/index.js",
   "dependencies": {
-    "@leafygreen-ui/lib": "^13.3.0",
+    "@leafygreen-ui/lib": "^14.0.0",
     "@leafygreen-ui/emotion": "^4.0.8",
     "@leafygreen-ui/palette": "^4.0.9",
-    "@leafygreen-ui/icon": "^12.0.1",
-    "@leafygreen-ui/icon-button": "^15.0.21",
-    "@leafygreen-ui/tokens": "^2.5.2",
-    "@leafygreen-ui/typography": "^19.0.0"
+    "@leafygreen-ui/icon": "^13.0.0",
+    "@leafygreen-ui/icon-button": "^16.0.0",
+    "@leafygreen-ui/tokens": "^2.11.1",
+    "@leafygreen-ui/typography": "^20.0.0"
   },
   "peerDependencies": {
-    "@leafygreen-ui/leafygreen-provider": "^3.1.12"
+    "@leafygreen-ui/leafygreen-provider": "^4.0.0"
   },
@@ -37,0 +37,0 @@ "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/banner",

README.md

@@ -5,3 +5,3 @@ # Banner
 
-#### [View on MongoDB.design](https://www.mongodb.design/component/banner/example/)
+#### [View on MongoDB.design](https://www.mongodb.design/component/banner/live-example/)
 
@@ -8,0 +8,0 @@ ## Installation

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 s}from"@leafygreen-ui/typography";import d from"prop-types";import{css as g,cx as u}from"@leafygreen-ui/emotion";import{useDarkMode as p}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as b,fontFamilies as f,fontWeights as h}from"@leafygreen-ui/tokens";import m from"@leafygreen-ui/icon/dist/X";import x from"@leafygreen-ui/icon-button";import{Theme as v}from"@leafygreen-ui/lib";import{palette as y}from"@leafygreen-ui/palette";import k from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import w from"@leafygreen-ui/icon/dist/ImportantWithCircle";import O from"@leafygreen-ui/icon/dist/InfoWithCircle";import S from"@leafygreen-ui/icon/dist/Warning";function j(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||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}(n,"string");return"symbol"==typeof e?e:e+""}function E(n,e,r){return(e=j(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function I(){return I=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},I.apply(this,arguments)}function C(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 M(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function W(n){return function(n){if(Array.isArray(n))return D(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 D(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 D(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 D(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,o=new Array(e);r<e;r++)o[r]=n[r];return o}var z,A,L,N,F,P,R,T,B,V,U,X,$,q,G,H,J,K,Q,Y,Z,_,nn,en,rn,on,tn,ln,an,cn,sn,dn,gn={Info:"info",Warning:"warning",Danger:"danger",Success:"success"},un=g(z||(z=M(["\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"]))),pn=g(A||(A=M(["\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"])),y.blue.light2,y.blue.light2,y.blue.dark3,y.blue.light1,y.blue.dark2),bn=g(L||(L=M(["\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"])),y.yellow.light2,y.yellow.light2,y.yellow.dark3,y.blue.light1,y.yellow.dark2),fn=g(N||(N=M(["\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"])),y.red.light2,y.red.light2,y.red.dark3,y.blue.light1,y.red.dark2),hn=g(F||(F=M(["\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"])),y.green.light2,y.green.light2,y.green.dark3,y.blue.light1,y.green.dark2),mn=g(P||(P=M(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),y.blue.dark2,y.blue.dark2,y.blue.light2),xn=g(R||(R=M(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),y.yellow.dark2,y.yellow.dark2,y.yellow.light2),vn=g(T||(T=M(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),y.red.dark2,y.red.dark2,y.red.light2),yn=g(B||(B=M(["\n  color: ",";\n\n  &:active,\n  &:hover,\n  &:focus-visible {\n    color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n"])),y.green.dark2,y.green.dark2,y.green.light2),kn=E(E({},v.Dark,E(E(E(E({},gn.Info,pn),gn.Warning,bn),gn.Danger,fn),gn.Success,hn)),v.Light,E(E(E(E({},gn.Info,mn),gn.Warning,xn),gn.Danger,vn),gn.Success,yn)),wn=function(e){var r=e.onClose,o=e.darkMode,t=e.theme,i=e.variant;return n.createElement(x,{className:u(un,kn[t][i]),"aria-label":"Close Message",onClick:r,darkMode:o},n.createElement(m,null))},On=g(V||(V=M(["\n  position: relative;\n  flex-shrink: 0;\n"]))),Sn=g(U||(U=M(["\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"]))),jn=E(E({},b.Body1,g(X||(X=M(["\n    top: 2px; // 18px(height in figma) - 16px(actual height of icon)\n  "])))),b.Body2,g($||($=M(["\n    top: 5.5px; // 21.5px(height in figma) - 16px(actual height of icon)\n  "])))),En=E(E({},v.Dark,E(E(E(E({},gn.Info,g(q||(q=M(["\n      color: ",";\n    "])),y.blue.light1)),gn.Warning,g(G||(G=M(["\n      color: ",";\n    "])),y.yellow.base)),gn.Danger,g(H||(H=M(["\n      color: ",";\n    "])),y.red.light1)),gn.Success,g(J||(J=M(["\n      color: ",";\n    "])),y.green.base))),v.Light,E(E(E(E({},gn.Info,g(K||(K=M(["\n      color: ",";\n    "])),y.blue.base)),gn.Warning,g(Q||(Q=M(["\n      color: ",";\n    "])),y.yellow.dark2)),gn.Danger,g(Y||(Y=M(["\n      color: ",";\n    "])),y.red.base)),gn.Success,g(Z||(Z=M(["\n      color: ",";\n    "])),y.green.dark1))),In=E(E(E(E({},gn.Info,O),gn.Warning,w),gn.Danger,S),gn.Success,k),Cn=function(e){var r=e.image,o=e.baseFontSize,t=e.variant,i=e.theme,l=In[t];return r?n.cloneElement(r,{className:Sn}):n.createElement(l,{className:u(On,En[i][t],jn[o])})},Mn=g(_||(_=M(["\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"])),f.default),Wn=g(nn||(nn=M(["\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"])),y.blue.light2,y.blue.dark2,y.blue.dark3,l,y.blue.light3,y.blue.light2,y.blue.dark3,y.blue.light1,y.blue.light1),Dn=g(en||(en=M(["\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"])),y.yellow.light2,y.yellow.dark2,y.yellow.dark3,l,y.yellow.light3,y.yellow.light2,y.yellow.dark3,y.blue.light1,y.yellow.dark2),zn=g(rn||(rn=M(["\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"])),y.red.light2,y.red.dark2,y.red.dark3,l,y.red.light3,y.red.light2,y.red.dark3,y.blue.light1,y.red.base),An=g(on||(on=M(["\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"])),y.green.light2,y.green.dark2,y.green.dark3,l,y.green.light3,y.green.light2,y.green.dark3,y.blue.light1,y.green.base),Ln=g(tn||(tn=M(["\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"])),y.blue.dark2,y.blue.light2,y.blue.light3,l,y.blue.dark3,y.blue.dark2,y.blue.light3,y.white,y.blue.light1,y.blue.base),Nn=g(ln||(ln=M(["\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"])),y.yellow.dark2,y.yellow.light2,y.yellow.light3,l,y.yellow.dark3,y.yellow.dark2,y.yellow.light3,y.white,y.blue.light1,y.yellow.base),Fn=g(an||(an=M(["\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"])),y.red.dark2,y.red.light2,y.red.light3,l,y.red.dark3,y.red.dark2,y.red.light3,y.white,y.blue.light1,y.red.base),Pn=g(cn||(cn=M(["\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"])),y.green.dark2,y.green.light2,y.green.light3,l,y.green.dark3,y.green.dark2,y.green.light3,y.white,y.blue.light1,y.green.dark1),Rn=E(E({},v.Dark,E(E(E(E({},gn.Info,Wn),gn.Warning,Dn),gn.Danger,zn),gn.Success,An)),v.Light,E(E(E(E({},gn.Info,Ln),gn.Warning,Nn),gn.Danger,Fn),gn.Success,Pn)),Tn=function(n,e){return g(sn||(sn=M(["\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"])),Bn(n,e).marginLeft,Bn(n,e).marginRight,l,h.bold)},Bn=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},Vn=g(dn||(dn=M(["\n  padding-right: 36px; // add space for the icon\n"]))),Un=["variant","dismissible","onClose","image","children","className","darkMode","baseFontSize"],Xn=e((function(e,r){var o=e.variant,t=void 0===o?gn.Info:o,i=e.dismissible,l=void 0!==i&&i,s=e.onClose,d=void 0===s?function(){}:s,g=e.image,b=e.children,f=e.className,h=e.darkMode,m=e.baseFontSize,x=C(e,Un),v=p(h),y=v.theme,k=v.darkMode,w=a(m);return n.createElement("div",I({role:"alert",ref:r,className:u(Mn,c[w],Rn[y][t],E({},Vn,l),f)},x),n.createElement(Cn,{image:g,theme:y,baseFontSize:w,variant:t}),n.createElement("div",{className:Tn(null!=g,l)},b),l&&n.createElement(wn,{theme:y,baseFontSize:w,variant:t,onClose:d,darkMode:k}))}));Xn.displayName="Banner",Xn.propTypes={darkMode:d.bool,variant:d.oneOf(Object.values(gn)),onClose:d.func,dismissible:d.bool,image:d.element,baseFontSize:d.oneOf(Object.values(b))};var $n=["glyph"],qn={title:"Components/Banner",component:Xn,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(gn),dismissible:[!1,!0]}},controls:{exclude:[].concat(W(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(s,null,"Link Component")),darkMode:!1,dismissible:!1},argTypes:{children:r.children,darkMode:r.darkMode,dismissible:{control:"boolean"},variant:{options:Object.values(gn),control:{type:"select"},defaultValue:gn.Info},glyph:{options:[void 0].concat(W(Object.keys(i))),control:{type:"select"}}}},Gn=function(e){var r=e.glyph,o=C(e,$n);return n.createElement(Xn,I({image:r?n.createElement(t,{glyph:r}):void 0},o))};Gn.parameters={chromatic:{disableSnapshot:!0}};var Hn=function(){};export{Hn as Generated,Gn as LiveExample,qn as default};
+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};

No alert changes

Worsened metrics

Total package byte prevSize

152672

decreased by-1.23%

Lines of code

1262

decreased by-1.02%

Dependency changes

• + Added@leafygreen-ui/a11y@2.0.2(transitive)

• + Added@leafygreen-ui/icon@13.1.2(transitive)

• + Added@leafygreen-ui/icon-button@16.0.3(transitive)

• + Added@leafygreen-ui/leafygreen-provider@4.0.2(transitive)

• + Added@leafygreen-ui/typography@20.1.1(transitive)

• - Removed@leafygreen-ui/a11y@1.5.0(transitive)

• - Removed@leafygreen-ui/box@3.1.9(transitive)

• - Removed@leafygreen-ui/icon@12.9.0(transitive)

• - Removed@leafygreen-ui/icon-button@15.0.23(transitive)

• - Removed@leafygreen-ui/leafygreen-provider@3.2.0(transitive)

• - Removed@leafygreen-ui/lib@13.8.2(transitive)

• - Removed@leafygreen-ui/typography@19.3.0(transitive)

• - Removed@storybook/csf@0.1.13(transitive)

• - Removedtype-fest@2.19.0(transitive)

• Updated@leafygreen-ui/icon@^13.0.0

• Updated@leafygreen-ui/icon-button@^16.0.0

• Updated@leafygreen-ui/lib@^14.0.0

• Updated@leafygreen-ui/tokens@^2.11.1

• Updated@leafygreen-ui/typography@^20.0.0