@leafygreen-ui/button - npm Package Compare versions

Comparing version 13.0.1 to 14.0.0

CHANGELOG.md

 # @leafygreen-ui/button
 
+## 14.0.0
+
+### Major Changes
+
+- f3aad7e2: Updates Dark Mode Button for visual brand refresh
+
+### Patch Changes
+
+- c1f9c4d4: Disabling focus styles and ripple on disabled Buttons
+- Updated dependencies [233ac580]
+- Updated dependencies [ba4aab15]
+- Updated dependencies [2cf1bc4a]
+  - @leafygreen-ui/tokens@1.2.0
+  - @leafygreen-ui/lib@9.2.1
+
 ## 13.0.1
@@ -7,3 +22,3 @@
 
-- 686ecae: Disabling onClicks for Button components when as="a"
+- 686ecae: Disables `onClick` events when `as="a"` and `disabled={true}`
 
@@ -10,0 +25,0 @@ ## 13.0.0

dist/ButtonIcon.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
     glyph: React.ReactElement;
-}): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace ButtonIcon {
@@ -9,0 +9,0 @@ var displayName: string;

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n,{useRef as r,useEffect as e}from"react";import o from"prop-types";import a from"@leafygreen-ui/box";import{css as t,cx as l}from"@leafygreen-ui/emotion";import{registerRipple as i}from"@leafygreen-ui/ripple";import{useUsingKeyboardContext as d}from"@leafygreen-ui/leafygreen-provider";import{transparentize as c}from"polished";import{palette as s,uiColors as g}from"@leafygreen-ui/palette";import{fontFamilies as p}from"@leafygreen-ui/tokens";import{createDataProp as u}from"@leafygreen-ui/lib";import{jsx as b}from"@emotion/react";function h(n,r){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(n,r).enumerable}))),e.push.apply(e,o)}return e}function f(n){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{};r%2?h(Object(e),!0).forEach((function(r){x(n,r,e[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):h(Object(e)).forEach((function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(e,r))}))}return n}function x(n,r,e){return r in n?Object.defineProperty(n,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[r]=e,n}function y(){return(y=Object.assign||function(n){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n}).apply(this,arguments)}function m(n,r){if(null==n)return{};var e,o,a=function(n,r){if(null==n)return{};var e,o,a={},t=Object.keys(n);for(o=0;o<t.length;o++)e=t[o],r.indexOf(e)>=0||(a[e]=n[e]);return a}(n,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);for(o=0;o<t.length;o++)e=t[o],r.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(a[e]=n[e])}return a}function k(n,r){return r||(r=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(r)}}))}var w,v,O,D,P,j,z,G,S,B,N,F,M,q,E,I,L,X,C,R,T,Y,A,K,H,J,Q,U,V,W,Z,$,_,nn,rn,en,on,an,tn,ln,dn,cn,sn,gn,pn,un,bn,hn,fn,xn,yn={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},mn={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},kn="light",wn="dark",vn=function(n){return"\n    0 0 0 2px ".concat(n,", \n    0 0 0 4px ").concat(s.blue.light1,";\n")},On=t(w||(w=k(["\n  // unset browser default\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n  border: 1px solid transparent;\n  display: inline-flex;\n  align-items: stretch;\n  transition: all 150ms ease-in-out;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n  z-index: 0;\n  font-family: ",";\n  border-radius: 6px;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    pointer-events: none;\n  }\n\n  &:active,\n  &:focus,\n  &:hover {\n    text-decoration: none;\n  }\n"])),p.default),Dn=(x(I={},kn,(x(G={},yn.Default,t(v||(v=k(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),s.gray.light3,s.gray.base,s.gray.dark3,s.white,s.gray.light2)),x(G,yn.Primary,t(O||(O=k(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        border-color: #00593f; // Not quite dark3\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),s.green.dark2,s.green.dark2,s.white,s.white,s.green.light2)),x(G,yn.PrimaryOutline,t(D||(D=k(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.green.dark2,s.green.dark2,c(.96,s.green.base),s.green.light2)),x(G,yn.Danger,t(P||(P=k(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        border-color: #c82222; // not quite dark1\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.red.base,s.red.base,s.white,s.white,s.red.light3)),x(G,yn.DangerOutline,t(j||(j=k(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.red.light1,s.red.base,s.red.dark2,c(.96,s.red.base),s.red.base,g.red.light3)),x(G,yn.BaseGreen,t(z||(z=k(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.green.base,s.green.dark2,s.green.dark3,s.green.light2)),G)),x(I,wn,(x(E={},yn.Primary,t(S||(S=k(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),g.green.dark2,g.green.base,g.white,g.white,g.white,g.green.dark1,g.green.dark2)),x(E,yn.PrimaryOutline,t(B||(B=k(["\n      border: 1px solid ",";\n      color: #0ad05b;\n\n      &:focus {\n        color: #0ad05b;\n      }\n\n      &:hover,\n      &:active {\n        color: #0ad05b;\n        background-color: rgba(10, 208, 91, 0.08);\n        border: 1px solid ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),g.green.base,g.green.base,g.green.dark2)),x(E,yn.Default,t(N||(N=k(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border: 1px solid ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),g.gray.dark2,g.gray.base,g.white,g.white,g.white,g.gray.dark1,g.gray.base,g.gray.dark2)),x(E,yn.Danger,t(F||(F=k(["\n      background-color: ",";\n      border: 1px solid #f97216;\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border: 1px solid #f97216;\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),g.red.dark1,g.white,g.white,g.white,g.red.base,g.red.dark2)),x(E,yn.DangerOutline,t(M||(M=k(["\n      border: 1px solid #f97216;\n      color: #f97216;\n\n      &:focus {\n        color: #f97216;\n      }\n\n      &:hover,\n      &:active {\n        color: #f97216;\n        background: rgba(249, 114, 22, 0.08);\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),g.red.dark2)),x(E,yn.BaseGreen,t(q||(q=k(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),g.green.dark2,g.green.base,g.white,g.white,g.white,g.green.dark1,g.green.dark2)),E)),I),Pn=(x(Z={},kn,(x(A={},yn.Default,t(L||(L=k(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.white,vn(s.white))),x(A,yn.Primary,t(X||(X=k(["\n      &:focus {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        box-shadow: ",";\n      }\n    "])),s.white,vn(s.white))),x(A,yn.PrimaryOutline,t(C||(C=k(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),c(.96,s.green.base),vn(s.white))),x(A,yn.Danger,t(R||(R=k(["\n      &:focus {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        box-shadow: ",";\n      }\n    "])),s.white,vn(s.white))),x(A,yn.DangerOutline,t(T||(T=k(["\n      &:focus {\n        color: ",";\n        box-shadow: ",";\n      }\n    "])),g.red.dark2,vn(s.white))),x(A,yn.BaseGreen,t(Y||(Y=k(["\n      &:focus {\n        box-shadow: ",";\n      }\n    "])),vn(s.white))),A)),x(Z,wn,(x(W={},yn.Primary,t(K||(K=k(["\n      &:focus {\n        background: ",";\n        box-shadow: 0px 4px 4px rgba(0, 124, 173, 0.4),\n          0px 0px 0px 3px ",";\n      }\n    "])),g.green.dark1,g.focus)),x(W,yn.PrimaryOutline,t(H||(H=k(["\n      &:focus {\n        background: rgba(10, 208, 91, 0.08);\n        border: 1px solid ",";\n        box-shadow: 0px 0px 0px 3px #139fd7;\n      }\n    "])),g.green.dark1)),x(W,yn.Default,t(J||(J=k(["\n      &:focus {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px #2f9fc5;\n      }\n    "])),g.gray.dark1)),x(W,yn.Danger,t(Q||(Q=k(["\n      &:focus {\n        background: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),g.red.base,g.focus)),x(W,yn.DangerOutline,t(U||(U=k(["\n      &:focus {\n        background: rgba(249, 114, 22, 0.08);\n        border: 1px solid #f97216;\n        box-shadow: 0px 0px 0px 3px #019ee2;\n      }\n    "])))),x(W,yn.BaseGreen,t(V||(V=k(["\n      &:focus {\n        background: ",";\n        box-shadow: 0px 4px 4px rgba(0, 124, 173, 0.4),\n          0px 0px 0px 3px ",";\n      }\n    "])),g.green.dark1,g.focus)),W)),Z),jn=(x(nn={},kn,t($||($=k(["\n    background-color: ",";\n    border: 1px solid ",";\n    cursor: not-allowed;\n    color: ",";\n\n    &:hover {\n      background-color: ",";\n      border: 1px solid ",";\n      cursor: not-allowed;\n      color: ",";\n    }\n  "])),s.gray.light2,s.gray.light1,s.gray.base,s.gray.light2,s.gray.light1,s.gray.base)),x(nn,wn,t(_||(_=k(["\n    background: rgba(61, 79, 88, 0.3);\n    border: 1px solid ",";\n    color: ",";\n    cursor: not-allowed;\n\n    &:hover {\n      background: rgba(61, 79, 88, 0.3);\n      border: 1px solid ",";\n      color: ",";\n      cursor: not-allowed;\n    }\n  "])),g.gray.dark2,g.gray.base,g.gray.dark2,g.gray.base)),nn),zn=(x(tn={},mn.XSmall,t(rn||(rn=k(["\n    height: 22px;\n    text-transform: uppercase;\n    font-size: 12px;\n    line-height: 1em;\n    font-weight: bold;\n    letter-spacing: 0.4px;\n  "])))),x(tn,mn.Small,t(en||(en=k(["\n    height: 28px;\n  "])))),x(tn,mn.Default,t(on||(on=k(["\n    height: 36px;\n  "])))),x(tn,mn.Large,t(an||(an=k(["\n    height: 48px;\n    font-size: 18px;\n    line-height: 24px;\n  "])))),tn),Gn=(x(un={},kn,(x(cn={},14,t(ln||(ln=k(["\n      font-size: 13px;\n      font-weight: 500;\n    "])))),x(cn,16,t(dn||(dn=k(["\n      font-size: 16px;\n      // Pixel pushing for optical alignment purposes\n      transform: translateY(1px);\n      font-weight: 500;\n    "])))),cn)),x(un,wn,(x(pn={},14,t(sn||(sn=k(["\n      font-size: 14px;\n    "])))),x(pn,16,t(gn||(gn=k(["\n      font-size: 16px;\n      // Pixel pushing for optical alignment purposes\n      transform: translateY(1px);\n    "])))),pn)),un),Sn=u("button");var Bn,Nn,Fn,Mn,qn,En,In,Ln,Xn,Cn,Rn,Tn,Yn,An,Kn,Hn,Jn,Qn,Un,Vn,Wn,Zn,$n,_n,nr,rr,er,or,ar,tr,lr,ir,dr,cr,sr,gr,pr,ur,br,hr,fr="#0AD05B",xr="#F97216",yr=(x(xn={},kn,(x(hn={},yn.Primary,s.green.dark1),x(hn,yn.PrimaryOutline,c(.76,s.green.base)),x(hn,yn.Default,s.gray.light2),x(hn,yn.Danger,s.red.light1),x(hn,yn.DangerOutline,c(.76,s.red.base)),x(hn,yn.BaseGreen,s.green.light1),hn)),x(xn,wn,(x(fn={},yn.Primary,fr),x(fn,yn.PrimaryOutline,c(.76,g.green.base)),x(fn,yn.Default,g.gray.base),x(fn,yn.Danger,xr),x(fn,yn.DangerOutline,c(.76,xr)),x(fn,yn.BaseGreen,fr),fn)),xn),mr=(x(Kn={},kn,(x(In={},yn.Default,t(Bn||(Bn=k(["\n      color: ",";\n    "])),s.gray.base)),x(In,yn.Primary,t(Nn||(Nn=k(["\n      color: ",";\n    "])),s.green.light2)),x(In,yn.PrimaryOutline,t(Fn||(Fn=k(["\n      color: ",";\n    "])),s.green.dark2)),x(In,yn.Danger,t(Mn||(Mn=k(["\n      color: ",";\n    "])),s.red.light3)),x(In,yn.DangerOutline,t(qn||(qn=k(["\n      color: ",";\n    "])),s.red.light1)),x(In,yn.BaseGreen,t(En||(En=k(["\n      color: ",";\n    "])),s.green.dark2)),In)),x(Kn,wn,(x(An={},yn.Primary,t(Ln||(Ln=k(["\n      color: ",";\n    "])),g.green.light2)),x(An,yn.PrimaryOutline,t(Xn||(Xn=k(["\n      color: #13aa52;\n    "])))),x(An,yn.Default,t(Cn||(Cn=k(["\n      color: ",";\n    "])),g.gray.light1)),x(An,yn.Danger,t(Rn||(Rn=k(["\n      color: ",";\n    "])),g.red.light3)),x(An,yn.DangerOutline,t(Tn||(Tn=k(["\n      color: #f97216;\n    "])))),x(An,yn.BaseGreen,t(Yn||(Yn=k(["\n      color: ",";\n    "])),g.gray.light1)),An)),Kn),kr=(x(tr={},kn,(x(Zn={},yn.Default,t(Hn||(Hn=k(["\n      color: ",";\n    "])),s.gray.dark1)),x(Zn,yn.Primary,t(Jn||(Jn=k(["\n      color: ",";\n    "])),s.green.light3)),x(Zn,yn.PrimaryOutline,t(Qn||(Qn=k(["\n      color: ",";\n    "])),s.green.dark2)),x(Zn,yn.Danger,t(Un||(Un=k(["\n      color: ",";\n    "])),s.red.light3)),x(Zn,yn.DangerOutline,t(Vn||(Vn=k(["\n      color: ",";\n    "])),s.red.light1)),x(Zn,yn.BaseGreen,t(Wn||(Wn=k(["\n      color: ",";\n    "])),s.green.dark2)),Zn)),x(tr,wn,(x(ar={},yn.Primary,t($n||($n=k(["\n      color: ",";\n    "])),g.white)),x(ar,yn.PrimaryOutline,t(_n||(_n=k(["\n      color: #0ad05b;\n    "])))),x(ar,yn.Default,t(nr||(nr=k(["\n      color: ",";\n    "])),g.white)),x(ar,yn.Danger,t(rr||(rr=k(["\n      color: ",";\n    "])),g.white)),x(ar,yn.DangerOutline,t(er||(er=k(["\n      color: #f97216;\n    "])))),x(ar,yn.BaseGreen,t(or||(or=k(["\n      color: ",";\n    "])),g.gray.light1)),ar)),tr),wr=t(lr||(lr=k(["\n  ",":hover &,\n  ",":active & {\n    color: currentColor;\n  } ;\n"])),Sn.selector,Sn.selector),vr=(x(gr={},mn.XSmall,t(ir||(ir=k(["\n    height: 14px;\n    width: 14px;\n  "])))),x(gr,mn.Small,t(dr||(dr=k(["\n    height: 16px;\n    width: 16px;\n  "])))),x(gr,mn.Default,t(cr||(cr=k(["\n    height: 16px;\n    width: 16px;\n  "])))),x(gr,mn.Large,t(sr||(sr=k(["\n    height: 20px;\n    width: 20px;\n  "])))),gr),Or=(x(br={},kn,t(pr||(pr=k(["\n    color: ",";\n  "])),s.gray.light2)),x(br,wn,t(ur||(ur=k(["\n    color: ",";\n  "])),g.gray.dark1)),br),Dr=t(hr||(hr=k(["\n  color: ",";\n"])),s.gray.light1);function Pr(r){var e,o=r.glyph,a=r.variant,t=r.size,i=r.darkMode,d=r.disabled,c=r.isIconOnlyButton,s=r.className,g=!c&&{"aria-hidden":!0,role:"presentation"},p=i?wn:kn,u=c?kr:mr;return n.cloneElement(o,f({className:l(u[p][a],vr[t],(e={},x(e,Or[p],d),x(e,wr,c),x(e,Dr,!i&&d&&c),e),s)},g))}Pr.displayName="ButtonIcon";var jr,zr,Gr,Sr,Br,Nr,Fr,Mr,qr,Er,Ir,Lr,Xr=["variant","size","darkMode","baseFontSize","disabled","leftGlyph","rightGlyph","children","className","as","type"],Cr=t(jr||(jr=k(["\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 6px;\n"]))),Rr=t(zr||(zr=k(["\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  position: relative;\n  z-index: 0;\n"]))),Tr=(x(Fr={},mn.XSmall,t(Gr||(Gr=k(["\n    padding: 0 8px;\n    gap: 6px;\n  "])))),x(Fr,mn.Small,t(Sr||(Sr=k(["\n    padding: 0 12px;\n    gap: 6px;\n  "])))),x(Fr,mn.Default,t(Br||(Br=k(["\n    padding: 0 12px;\n    gap: 6px;\n  "])))),x(Fr,mn.Large,t(Nr||(Nr=k(["\n    padding: 0 16px;\n    gap: 8px;\n  "])))),Fr),Yr=n.forwardRef((function(o,c){var s,g,u=o.variant,h=void 0===u?yn.Default:u,w=o.size,v=void 0===w?mn.Default:w,O=o.darkMode,D=void 0!==O&&O,P=o.baseFontSize,j=void 0===P?14:P,z=o.disabled,G=void 0!==z&&z,S=o.leftGlyph,B=o.rightGlyph,N=o.children,F=o.className,M=o.as,q=o.type,E=m(o,Xr),I=d().usingKeyboard,L=r(null);e((function(){var n,r=yr[D?wn:kn][h];return null!=L.current&&(n=i(L.current,{backgroundColor:r})),n}),[L,h,D]);var X=null!==(s=(S||B)&&!N)&&void 0!==s&&s,C=function(n){var r=n.variant,e=n.size,o=n.darkMode,a=n.baseFontSize,i=n.disabled,d=n.showFocus,c=o?wn:kn,s=Dn[c][r],g=Pn[c][r],u=zn[e],b=Gn[c][a];return l(On,s,x({},g,d),x({},jn[c],i),b,u,x({},t(bn||(bn=k(["\n        // TODO: Refresh - remove this logic\n        font-family: ",";\n        border-radius: 4px;\n      "])),p.default),"dark"===c))}({variant:h,size:v,darkMode:D,baseFontSize:j,disabled:G,showFocus:I}),R=!(!E.href&&"a"!==M||G),T=f(f(f({type:R?void 0:q||"button",className:l(C,F),ref:c,as:R?"a":"button"},"string"!=typeof E.href&&{disabled:G}),{},{"aria-disabled":G},Sn.prop),E),Y={variant:h,size:v,darkMode:D,disabled:G,isIconOnlyButton:X},A=b(n.Fragment,null,b("div",{className:l(Cr,x({},t(Mr||(Mr=k(["\n            border-radius: 3px;\n          "]))),D)),ref:L}),b("div",{className:l(Rr,Tr[v],(g={},x(g,t(qr||(qr=k(["\n            justify-content: space-between;\n          "]))),!!B&&D),x(g,t(Er||(Er=k(["\n            font-family: ",";\n          "])),p.legacy),D),g))},S&&b(Pr,y({glyph:S,className:t(Ir||(Ir=k(["\n              justify-self: right;\n            "])))},Y)),N,B&&b(Pr,y({glyph:B,className:t(Lr||(Lr=k(["\n              justify-self: left;\n            "])))},Y))));return b(a,T,A)}));Yr.displayName="Button",Yr.propTypes={variant:o.oneOf(Object.values(yn)),darkMode:o.bool,baseFontSize:o.oneOf([14,16]),size:o.oneOf(Object.values(mn)),disabled:o.bool,leftGlyph:o.element,rightGlyph:o.element,href:o.string};export default Yr;export{mn as Size,yn as Variant};
+import n,{useRef as e,useEffect as r}from"react";import o from"prop-types";import a from"@leafygreen-ui/box";import{css as t,cx as l}from"@leafygreen-ui/emotion";import{registerRipple as i}from"@leafygreen-ui/ripple";import{useUsingKeyboardContext as c}from"@leafygreen-ui/leafygreen-provider";import{transparentize as d,mix as g}from"polished";import{palette as s,uiColors as b}from"@leafygreen-ui/palette";import{fontFamilies as u,typeScales as p}from"@leafygreen-ui/tokens";import{createDataProp as h}from"@leafygreen-ui/lib";import{jsx as f}from"@emotion/react";function y(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,o)}return r}function x(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?y(Object(r),!0).forEach((function(e){k(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function k(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function m(){return m=Object.assign||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},m.apply(this,arguments)}function w(n,e){if(null==n)return{};var r,o,a=function(n,e){if(null==n)return{};var r,o,a={},t=Object.keys(n);for(o=0;o<t.length;o++)r=t[o],e.indexOf(r)>=0||(a[r]=n[r]);return a}(n,e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);for(o=0;o<t.length;o++)r=t[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(a[r]=n[r])}return a}function v(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var O,D,P,j,z,B,S,G,N,M,q,F,E,I,L,X,K,C,H,R,T,Y,A,J,Q,U,V,W,Z,$,_,nn,en,rn,on,an,tn,ln,cn,dn,gn,sn,bn,un,pn,hn,fn,yn,xn,kn,mn,wn,vn={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},On={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Dn="light",Pn="dark",jn={Body1:13,Body2:16},zn=function(n){return"\n    0 0 0 2px ".concat(n,", \n    0 0 0 4px ").concat(s.blue.light1,";\n")},Bn=t(O||(O=v(["\n  // unset browser default\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n  border: 1px solid transparent;\n  display: inline-flex;\n  align-items: stretch;\n  transition: all 150ms ease-in-out;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n  z-index: 0;\n  font-family: ",";\n  border-radius: 6px;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    pointer-events: none;\n  }\n\n  &:active,\n  &:focus,\n  &:hover {\n    text-decoration: none;\n  }\n"])),u.default),Sn=(k(X={},Dn,(k(G={},vn.Default,t(D||(D=v(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),s.gray.light3,s.gray.base,s.gray.dark3,s.white,s.gray.light2)),k(G,vn.Primary,t(P||(P=v(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        border-color: #00593f; // Not quite dark3\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),s.green.dark2,s.green.dark2,s.white,s.white,s.green.light2)),k(G,vn.PrimaryOutline,t(j||(j=v(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.green.dark2,s.green.dark2,d(.96,s.green.base),s.green.light2)),k(G,vn.Danger,t(z||(z=v(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        border-color: #c82222; // not quite dark1\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.red.base,s.red.base,s.white,s.white,s.red.light3)),k(G,vn.DangerOutline,t(B||(B=v(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.red.light1,s.red.base,s.red.dark2,d(.96,s.red.base),s.red.base,s.red.light3)),k(G,vn.BaseGreen,t(S||(S=v(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.green.base,s.green.dark2,s.green.dark3,g(.96,s.green.base,s.green.dark3),s.green.light2)),G)),k(X,Pn,(k(L={},vn.Default,t(N||(N=v(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        border-color: ",";\n        color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.gray.dark2,s.gray.base,s.white,s.white,s.gray.dark1,s.gray.base,s.white,s.gray.dark2)),k(L,vn.Primary,t(M||(M=v(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #00593f; // Off palette\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),s.green.dark2,s.green.base,s.white,s.white,s.white,s.green.dark3)),k(L,vn.PrimaryOutline,t(q||(q=v(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.green.base,s.green.base,s.green.base,s.green.base,d(.96,s.green.base),s.green.base,s.green.dark3)),k(L,vn.Danger,t(F||(F=v(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        border-color: ",";\n        color: ",";\n        background-color: #c82222; // Off palette\n        box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n      }\n    "])),s.red.base,s.red.light1,s.white,s.white,s.red.light1,s.white,s.yellow.dark3)),k(L,vn.DangerOutline,t(E||(E=v(["\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n      }\n    "])),s.red.light1,s.red.light1,s.red.light1,s.red.light1,d(.96,s.red.base),s.yellow.dark3)),k(L,vn.BaseGreen,t(I||(I=v(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),s.green.base,s.green.dark2,s.green.dark3,g(.96,s.green.base,s.green.light3),s.green.dark2,s.green.dark3)),L)),X),Gn=(k(_={},Dn,(k(A={},vn.Default,t(K||(K=v(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.white,zn(s.white))),k(A,vn.Primary,t(C||(C=v(["\n      &:focus {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        box-shadow: ",";\n      }\n    "])),s.white,zn(s.white))),k(A,vn.PrimaryOutline,t(H||(H=v(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),d(.96,s.green.base),zn(s.white))),k(A,vn.Danger,t(R||(R=v(["\n      &:focus {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        box-shadow: ",";\n      }\n    "])),s.white,zn(s.white))),k(A,vn.DangerOutline,t(T||(T=v(["\n      &:focus {\n        color: ",";\n        box-shadow: ",";\n      }\n    "])),s.red.dark2,zn(s.white))),k(A,vn.BaseGreen,t(Y||(Y=v(["\n      &:focus {\n        box-shadow: ",";\n      }\n    "])),zn(s.white))),A)),k(_,Pn,(k($={},vn.Default,t(J||(J=v(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.gray.dark1,zn(s.black))),k($,vn.Primary,t(Q||(Q=v(["\n      &:focus {\n        background-color: #00593f; // Off palette\n        box-shadow: ",";\n      }\n    "])),zn(s.black))),k($,vn.PrimaryOutline,t(U||(U=v(["\n      &:focus {\n        background-color: ",";\n        border-color: ",";\n        box-shadow: ",";\n      }\n    "])),d(.96,s.green.base),s.green.base,zn(s.black))),k($,vn.Danger,t(V||(V=v(["\n      &:focus {\n        background-color: #c82222; // Off palette\n        box-shadow: ",";\n      }\n    "])),zn(s.black))),k($,vn.DangerOutline,t(W||(W=v(["\n      &:focus {\n        background-color: ",";\n        border-color: ",";\n        box-shadow: ",";\n      }\n    "])),d(.96,s.red.base),s.red.light1,zn(s.black))),k($,vn.BaseGreen,t(Z||(Z=v(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.green.base,zn(s.black))),$)),_),Nn=(k(rn={},Dn,t(nn||(nn=v(["\n    &,\n    &:hover {\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n      cursor: not-allowed;\n    }\n\n    &:focus {\n      box-shadow: ",";\n    }\n  "])),s.gray.light2,s.gray.light1,s.gray.base,zn(s.white))),k(rn,Pn,t(en||(en=v(["\n    &,\n    &:hover {\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n      cursor: not-allowed;\n    }\n\n    &:focus {\n      box-shadow: ",";\n    }\n  "])),s.gray.dark3,s.gray.dark1,s.gray.dark1,zn(s.black))),rn),Mn=(k(cn={},On.XSmall,t(on||(on=v(["\n    height: 22px;\n    text-transform: uppercase;\n    font-size: 12px;\n    line-height: 1em;\n    font-weight: bold;\n    letter-spacing: 0.4px;\n  "])))),k(cn,On.Small,t(an||(an=v(["\n    height: 28px;\n  "])))),k(cn,On.Default,t(tn||(tn=v(["\n    height: 36px;\n  "])))),k(cn,On.Large,t(ln||(ln=v(["\n    height: 48px;\n    font-size: 18px;\n    line-height: 24px;\n  "])))),cn),qn=(k(sn={},jn.Body1,t(dn||(dn=v(["\n    font-size: ","px;\n    line-height: ","px;\n    font-weight: 500; // Medium\n  "])),p.body1.fontSize,p.body1.lineHeight)),k(sn,jn.Body2,t(gn||(gn=v(["\n    font-size: ","px;\n    line-height: ","px;\n    // Pixel pushing for optical alignment purposes\n    transform: translateY(1px);\n    font-weight: 500; // Medium\n  "])),p.body2.fontSize,p.body2.lineHeight)),sn),Fn=h("button");var En,In,Ln,Xn,Kn,Cn,Hn,Rn,Tn,Yn,An,Jn,Qn,Un,Vn,Wn,Zn,$n,_n,ne,ee,re,oe,ae,te,le,ie,ce,de,ge,se,be,ue,pe,he,fe,ye,xe,ke,me,we,ve,Oe,De=(k(pn={},Dn,(k(bn={},vn.Default,s.gray.light2),k(bn,vn.Primary,s.green.dark1),k(bn,vn.PrimaryOutline,d(.76,s.green.base)),k(bn,vn.Danger,s.red.light1),k(bn,vn.DangerOutline,d(.76,s.red.base)),k(bn,vn.BaseGreen,s.green.light1),bn)),k(pn,Pn,(k(un={},vn.Default,s.gray.base),k(un,vn.Primary,s.green.dark1),k(un,vn.PrimaryOutline,d(.76,s.green.base)),k(un,vn.Danger,s.red.dark2),k(un,vn.DangerOutline,d(.76,s.red.light1)),k(un,vn.BaseGreen,s.green.dark1),un)),pn),Pe=t(hn||(hn=v(["\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 5px;\n"]))),je=t(fn||(fn=v(["\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  position: relative;\n  z-index: 0;\n"]))),ze=(k(wn={},On.XSmall,t(yn||(yn=v(["\n    padding: 0 7px; // 8px - 1px border\n    gap: 6px;\n  "])))),k(wn,On.Small,t(xn||(xn=v(["\n    padding: 0 11px; // 12px - 1px border\n    gap: 6px;\n  "])))),k(wn,On.Default,t(kn||(kn=v(["\n    padding: 0 11px; // 12px - 1px border\n    gap: 6px;\n  "])))),k(wn,On.Large,t(mn||(mn=v(["\n    padding: 0 15px; // 16px - 1px border\n    gap: 8px;\n  "])))),wn),Be=(k(Vn={},Dn,(k(Hn={},vn.Default,t(En||(En=v(["\n      color: ",";\n    "])),s.gray.base)),k(Hn,vn.Primary,t(In||(In=v(["\n      color: ",";\n    "])),s.green.light2)),k(Hn,vn.PrimaryOutline,t(Ln||(Ln=v(["\n      color: ",";\n    "])),s.green.dark2)),k(Hn,vn.Danger,t(Xn||(Xn=v(["\n      color: ",";\n    "])),s.red.light3)),k(Hn,vn.DangerOutline,t(Kn||(Kn=v(["\n      color: ",";\n    "])),s.red.light1)),k(Hn,vn.BaseGreen,t(Cn||(Cn=v(["\n      color: ",";\n    "])),s.green.dark2)),Hn)),k(Vn,Pn,(k(Un={},vn.Default,t(Rn||(Rn=v(["\n      color: ",";\n    "])),s.gray.light2)),k(Un,vn.Primary,t(Tn||(Tn=v(["\n      color: ",";\n    "])),s.green.light2)),k(Un,vn.PrimaryOutline,t(Yn||(Yn=v(["\n      color: ",";\n    "])),s.green.base)),k(Un,vn.Danger,t(An||(An=v(["\n      color: ",";\n    "])),s.red.light2)),k(Un,vn.DangerOutline,t(Jn||(Jn=v(["\n      color: ",";\n    "])),s.red.light1)),k(Un,vn.BaseGreen,t(Qn||(Qn=v(["\n      color: ",";\n    "])),b.green.dark3)),Un)),Vn),Se=(k(ge={},Dn,(k(re={},vn.Default,t(Wn||(Wn=v(["\n      color: ",";\n    "])),s.gray.dark1)),k(re,vn.Primary,t(Zn||(Zn=v(["\n      color: ",";\n    "])),s.green.light3)),k(re,vn.PrimaryOutline,t($n||($n=v(["\n      color: ",";\n    "])),s.green.dark2)),k(re,vn.Danger,t(_n||(_n=v(["\n      color: ",";\n    "])),s.red.light3)),k(re,vn.DangerOutline,t(ne||(ne=v(["\n      color: ",";\n    "])),s.red.light1)),k(re,vn.BaseGreen,t(ee||(ee=v(["\n      color: ",";\n    "])),s.green.dark2)),re)),k(ge,Pn,(k(de={},vn.Default,t(oe||(oe=v(["\n      color: ",";\n    "])),s.gray.light3)),k(de,vn.Primary,t(ae||(ae=v(["\n      color: ",";\n    "])),s.green.light3)),k(de,vn.PrimaryOutline,t(te||(te=v(["\n      color: ",";\n    "])),s.green.base)),k(de,vn.Danger,t(le||(le=v(["\n      color: ",";\n    "])),s.red.light3)),k(de,vn.DangerOutline,t(ie||(ie=v(["\n      color: ",";\n    "])),s.red.light1)),k(de,vn.BaseGreen,t(ce||(ce=v(["\n      color: ",";\n    "])),b.green.dark3)),de)),ge),Ge=t(se||(se=v(["\n  ",":hover &,\n  ",":active & {\n    color: currentColor;\n  } ;\n"])),Fn.selector,Fn.selector),Ne=(k(fe={},On.XSmall,t(be||(be=v(["\n    height: 14px;\n    width: 14px;\n  "])))),k(fe,On.Small,t(ue||(ue=v(["\n    height: 16px;\n    width: 16px;\n  "])))),k(fe,On.Default,t(pe||(pe=v(["\n    height: 16px;\n    width: 16px;\n  "])))),k(fe,On.Large,t(he||(he=v(["\n    height: 20px;\n    width: 20px;\n  "])))),fe),Me=(k(ke={},Dn,t(ye||(ye=v(["\n    color: ",";\n  "])),s.gray.light2)),k(ke,Pn,t(xe||(xe=v(["\n    color: ",";\n  "])),s.gray.dark1)),ke),qe=t(me||(me=v(["\n  color: ",";\n"])),s.gray.light1);function Fe(e){var r,o=e.glyph,a=e.variant,t=e.size,i=e.darkMode,c=e.disabled,d=e.isIconOnlyButton,g=e.className,s=!d&&{"aria-hidden":!0,role:"presentation"},b=i?Pn:Dn,u=d?Se:Be;return n.cloneElement(o,x({className:l(u[b][a],Ne[t],(r={},k(r,Me[b],c),k(r,Ge,d),k(r,qe,!i&&c&&d),r),g)},s))}Fe.displayName="ButtonIcon";var Ee=["variant","size","darkMode","baseFontSize","disabled","leftGlyph","rightGlyph","children","className","as","type"],Ie=n.forwardRef((function(o,d){var g,s=o.variant,b=void 0===s?vn.Default:s,u=o.size,p=void 0===u?On.Default:u,h=o.darkMode,y=void 0!==h&&h,O=o.baseFontSize,D=void 0===O?jn.Body1:O,P=o.disabled,j=void 0!==P&&P,z=o.leftGlyph,B=o.rightGlyph,S=o.children,G=o.className,N=o.as,M=o.type,q=w(o,Ee),F=c().usingKeyboard,E=e(null);r((function(){var n,e=De[y?Pn:Dn][b];return null==E.current||j||(n=i(E.current,{backgroundColor:e})),n}),[E,b,y,j]);var I=null!==(g=(z||B)&&!S)&&void 0!==g&&g,L=function(n){var e=n.variant,r=n.size,o=n.darkMode,a=n.baseFontSize,t=n.disabled,i=n.usingKeyboard,c=o?Pn:Dn,d=Sn[c][e],g=Gn[c][e];return l(Bn,d,qn[a],Mn[r],k({},g,i&&!t),k({},Nn[c],t))}({variant:b,size:p,darkMode:y,baseFontSize:D,disabled:j,usingKeyboard:F}),X=!(!q.href&&"a"!==N||j),K=x(x(x({type:X?void 0:M||"button",className:l(L,G),ref:d,as:X?"a":"button"},"string"!=typeof q.href&&{disabled:j}),{},{"aria-disabled":j},Fn.prop),q),C={variant:b,size:p,darkMode:y,disabled:j,isIconOnlyButton:I},H=f(n.Fragment,null,f("div",{className:l(Pe),ref:E}),f("div",{className:l(je,ze[p],k({},t(we||(we=v(["\n              justify-content: space-between;\n            "]))),!!B&&y))},z&&f(Fe,m({glyph:z,className:t(ve||(ve=v(["\n                justify-self: right;\n              "])))},C)),S,B&&f(Fe,m({glyph:B,className:t(Oe||(Oe=v(["\n                justify-self: left;\n              "])))},C))));return f(a,K,H)}));Ie.displayName="Button",Ie.propTypes={variant:o.oneOf(Object.values(vn)),baseFontSize:o.oneOf(Object.values(jn)),size:o.oneOf(Object.values(On)),darkMode:o.bool,disabled:o.bool,leftGlyph:o.element,rightGlyph:o.element,href:o.string};export{jn as FontSize,On as Size,vn as Variant,Ie as default};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

 export { default } from './Button';
 export type { ButtonProps } from './types';
-export { Variant, Size } from './types';
+export { FontSize, Variant, Size } from './types';
 //# sourceMappingURL=index.d.ts.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/box"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/ripple"),require("@leafygreen-ui/leafygreen-provider"),require("polished"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/lib"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/box","@leafygreen-ui/emotion","@leafygreen-ui/ripple","@leafygreen-ui/leafygreen-provider","polished","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/lib","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/button"]={},e.React,e.PropTypes,e["@leafygreen-ui/box"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/ripple"],e["@leafygreen-ui/leafygreen-provider"],e.polished,e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/lib"],e.react)}(this,(function(e,n,r,o,a,t,l,s,i,c,p,u){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=d(n),f=d(r),b=d(o);function x(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,o)}return r}function h(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?x(Object(r),!0).forEach((function(n){y(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function y(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function k(){return(k=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function w(e,n){if(null==e)return{};var r,o,a=function(e,n){if(null==e)return{};var r,o,a={},t=Object.keys(e);for(o=0;o<t.length;o++)r=t[o],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(o=0;o<t.length;o++)r=t[o],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function m(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var v,O,C,D,P,j,z,G,S,q,B,N,F,M,E,R,T,I,L,X,K,Y,_,A,U,V,H,J,Q,W,Z,$,ee,ne,re,oe,ae,te,le,se,ie,ce,pe,ue,de,ge,fe,be,xe,he,ye={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},ke={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},we="light",me="dark",ve=function(e){return"\n    0 0 0 2px ".concat(e,", \n    0 0 0 4px ").concat(i.palette.blue.light1,";\n")},Oe=a.css(v||(v=m(["\n  // unset browser default\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n  border: 1px solid transparent;\n  display: inline-flex;\n  align-items: stretch;\n  transition: all 150ms ease-in-out;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n  z-index: 0;\n  font-family: ",";\n  border-radius: 6px;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    pointer-events: none;\n  }\n\n  &:active,\n  &:focus,\n  &:hover {\n    text-decoration: none;\n  }\n"])),c.fontFamilies.default),Ce=(y(R={},we,(y(G={},ye.Default,a.css(O||(O=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),i.palette.gray.light3,i.palette.gray.base,i.palette.gray.dark3,i.palette.white,i.palette.gray.light2)),y(G,ye.Primary,a.css(C||(C=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        border-color: #00593f; // Not quite dark3\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),i.palette.green.dark2,i.palette.green.dark2,i.palette.white,i.palette.white,i.palette.green.light2)),y(G,ye.PrimaryOutline,a.css(D||(D=m(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.green.dark2,i.palette.green.dark2,s.transparentize(.96,i.palette.green.base),i.palette.green.light2)),y(G,ye.Danger,a.css(P||(P=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        border-color: #c82222; // not quite dark1\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.red.base,i.palette.red.base,i.palette.white,i.palette.white,i.palette.red.light3)),y(G,ye.DangerOutline,a.css(j||(j=m(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.red.light1,i.palette.red.base,i.palette.red.dark2,s.transparentize(.96,i.palette.red.base),i.palette.red.base,i.uiColors.red.light3)),y(G,ye.BaseGreen,a.css(z||(z=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.green.base,i.palette.green.dark2,i.palette.green.dark3,i.palette.green.light2)),G)),y(R,me,(y(E={},ye.Primary,a.css(S||(S=m(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.green.dark2,i.uiColors.green.base,i.uiColors.white,i.uiColors.white,i.uiColors.white,i.uiColors.green.dark1,i.uiColors.green.dark2)),y(E,ye.PrimaryOutline,a.css(q||(q=m(["\n      border: 1px solid ",";\n      color: #0ad05b;\n\n      &:focus {\n        color: #0ad05b;\n      }\n\n      &:hover,\n      &:active {\n        color: #0ad05b;\n        background-color: rgba(10, 208, 91, 0.08);\n        border: 1px solid ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.green.base,i.uiColors.green.base,i.uiColors.green.dark2)),y(E,ye.Default,a.css(B||(B=m(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border: 1px solid ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.gray.dark2,i.uiColors.gray.base,i.uiColors.white,i.uiColors.white,i.uiColors.white,i.uiColors.gray.dark1,i.uiColors.gray.base,i.uiColors.gray.dark2)),y(E,ye.Danger,a.css(N||(N=m(["\n      background-color: ",";\n      border: 1px solid #f97216;\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border: 1px solid #f97216;\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.red.dark1,i.uiColors.white,i.uiColors.white,i.uiColors.white,i.uiColors.red.base,i.uiColors.red.dark2)),y(E,ye.DangerOutline,a.css(F||(F=m(["\n      border: 1px solid #f97216;\n      color: #f97216;\n\n      &:focus {\n        color: #f97216;\n      }\n\n      &:hover,\n      &:active {\n        color: #f97216;\n        background: rgba(249, 114, 22, 0.08);\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.red.dark2)),y(E,ye.BaseGreen,a.css(M||(M=m(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.green.dark2,i.uiColors.green.base,i.uiColors.white,i.uiColors.white,i.uiColors.white,i.uiColors.green.dark1,i.uiColors.green.dark2)),E)),R),De=(y(Z={},we,(y(_={},ye.Default,a.css(T||(T=m(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),i.palette.white,ve(i.palette.white))),y(_,ye.Primary,a.css(I||(I=m(["\n      &:focus {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        box-shadow: ",";\n      }\n    "])),i.palette.white,ve(i.palette.white))),y(_,ye.PrimaryOutline,a.css(L||(L=m(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.transparentize(.96,i.palette.green.base),ve(i.palette.white))),y(_,ye.Danger,a.css(X||(X=m(["\n      &:focus {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        box-shadow: ",";\n      }\n    "])),i.palette.white,ve(i.palette.white))),y(_,ye.DangerOutline,a.css(K||(K=m(["\n      &:focus {\n        color: ",";\n        box-shadow: ",";\n      }\n    "])),i.uiColors.red.dark2,ve(i.palette.white))),y(_,ye.BaseGreen,a.css(Y||(Y=m(["\n      &:focus {\n        box-shadow: ",";\n      }\n    "])),ve(i.palette.white))),_)),y(Z,me,(y(W={},ye.Primary,a.css(A||(A=m(["\n      &:focus {\n        background: ",";\n        box-shadow: 0px 4px 4px rgba(0, 124, 173, 0.4),\n          0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.green.dark1,i.uiColors.focus)),y(W,ye.PrimaryOutline,a.css(U||(U=m(["\n      &:focus {\n        background: rgba(10, 208, 91, 0.08);\n        border: 1px solid ",";\n        box-shadow: 0px 0px 0px 3px #139fd7;\n      }\n    "])),i.uiColors.green.dark1)),y(W,ye.Default,a.css(V||(V=m(["\n      &:focus {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px #2f9fc5;\n      }\n    "])),i.uiColors.gray.dark1)),y(W,ye.Danger,a.css(H||(H=m(["\n      &:focus {\n        background: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.red.base,i.uiColors.focus)),y(W,ye.DangerOutline,a.css(J||(J=m(["\n      &:focus {\n        background: rgba(249, 114, 22, 0.08);\n        border: 1px solid #f97216;\n        box-shadow: 0px 0px 0px 3px #019ee2;\n      }\n    "])))),y(W,ye.BaseGreen,a.css(Q||(Q=m(["\n      &:focus {\n        background: ",";\n        box-shadow: 0px 4px 4px rgba(0, 124, 173, 0.4),\n          0px 0px 0px 3px ",";\n      }\n    "])),i.uiColors.green.dark1,i.uiColors.focus)),W)),Z),Pe=(y(ne={},we,a.css($||($=m(["\n    background-color: ",";\n    border: 1px solid ",";\n    cursor: not-allowed;\n    color: ",";\n\n    &:hover {\n      background-color: ",";\n      border: 1px solid ",";\n      cursor: not-allowed;\n      color: ",";\n    }\n  "])),i.palette.gray.light2,i.palette.gray.light1,i.palette.gray.base,i.palette.gray.light2,i.palette.gray.light1,i.palette.gray.base)),y(ne,me,a.css(ee||(ee=m(["\n    background: rgba(61, 79, 88, 0.3);\n    border: 1px solid ",";\n    color: ",";\n    cursor: not-allowed;\n\n    &:hover {\n      background: rgba(61, 79, 88, 0.3);\n      border: 1px solid ",";\n      color: ",";\n      cursor: not-allowed;\n    }\n  "])),i.uiColors.gray.dark2,i.uiColors.gray.base,i.uiColors.gray.dark2,i.uiColors.gray.base)),ne),je=(y(le={},ke.XSmall,a.css(re||(re=m(["\n    height: 22px;\n    text-transform: uppercase;\n    font-size: 12px;\n    line-height: 1em;\n    font-weight: bold;\n    letter-spacing: 0.4px;\n  "])))),y(le,ke.Small,a.css(oe||(oe=m(["\n    height: 28px;\n  "])))),y(le,ke.Default,a.css(ae||(ae=m(["\n    height: 36px;\n  "])))),y(le,ke.Large,a.css(te||(te=m(["\n    height: 48px;\n    font-size: 18px;\n    line-height: 24px;\n  "])))),le),ze=(y(ge={},we,(y(ce={},14,a.css(se||(se=m(["\n      font-size: 13px;\n      font-weight: 500;\n    "])))),y(ce,16,a.css(ie||(ie=m(["\n      font-size: 16px;\n      // Pixel pushing for optical alignment purposes\n      transform: translateY(1px);\n      font-weight: 500;\n    "])))),ce)),y(ge,me,(y(de={},14,a.css(pe||(pe=m(["\n      font-size: 14px;\n    "])))),y(de,16,a.css(ue||(ue=m(["\n      font-size: 16px;\n      // Pixel pushing for optical alignment purposes\n      transform: translateY(1px);\n    "])))),de)),ge),Ge=p.createDataProp("button");var Se,qe,Be,Ne,Fe,Me,Ee,Re,Te,Ie,Le,Xe,Ke,Ye,_e,Ae,Ue,Ve,He,Je,Qe,We,Ze,$e,en,nn,rn,on,an,tn,ln,sn,cn,pn,un,dn,gn,fn,bn,xn,hn=.76,yn="#0AD05B",kn="#F97216",wn=(y(he={},we,(y(be={},ye.Primary,i.palette.green.dark1),y(be,ye.PrimaryOutline,s.transparentize(hn,i.palette.green.base)),y(be,ye.Default,i.palette.gray.light2),y(be,ye.Danger,i.palette.red.light1),y(be,ye.DangerOutline,s.transparentize(hn,i.palette.red.base)),y(be,ye.BaseGreen,i.palette.green.light1),be)),y(he,me,(y(xe={},ye.Primary,yn),y(xe,ye.PrimaryOutline,s.transparentize(hn,i.uiColors.green.base)),y(xe,ye.Default,i.uiColors.gray.base),y(xe,ye.Danger,kn),y(xe,ye.DangerOutline,s.transparentize(hn,kn)),y(xe,ye.BaseGreen,yn),xe)),he),mn=(y(_e={},we,(y(Ee={},ye.Default,a.css(Se||(Se=m(["\n      color: ",";\n    "])),i.palette.gray.base)),y(Ee,ye.Primary,a.css(qe||(qe=m(["\n      color: ",";\n    "])),i.palette.green.light2)),y(Ee,ye.PrimaryOutline,a.css(Be||(Be=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),y(Ee,ye.Danger,a.css(Ne||(Ne=m(["\n      color: ",";\n    "])),i.palette.red.light3)),y(Ee,ye.DangerOutline,a.css(Fe||(Fe=m(["\n      color: ",";\n    "])),i.palette.red.light1)),y(Ee,ye.BaseGreen,a.css(Me||(Me=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),Ee)),y(_e,me,(y(Ye={},ye.Primary,a.css(Re||(Re=m(["\n      color: ",";\n    "])),i.uiColors.green.light2)),y(Ye,ye.PrimaryOutline,a.css(Te||(Te=m(["\n      color: #13aa52;\n    "])))),y(Ye,ye.Default,a.css(Ie||(Ie=m(["\n      color: ",";\n    "])),i.uiColors.gray.light1)),y(Ye,ye.Danger,a.css(Le||(Le=m(["\n      color: ",";\n    "])),i.uiColors.red.light3)),y(Ye,ye.DangerOutline,a.css(Xe||(Xe=m(["\n      color: #f97216;\n    "])))),y(Ye,ye.BaseGreen,a.css(Ke||(Ke=m(["\n      color: ",";\n    "])),i.uiColors.gray.light1)),Ye)),_e),vn=(y(tn={},we,(y(We={},ye.Default,a.css(Ae||(Ae=m(["\n      color: ",";\n    "])),i.palette.gray.dark1)),y(We,ye.Primary,a.css(Ue||(Ue=m(["\n      color: ",";\n    "])),i.palette.green.light3)),y(We,ye.PrimaryOutline,a.css(Ve||(Ve=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),y(We,ye.Danger,a.css(He||(He=m(["\n      color: ",";\n    "])),i.palette.red.light3)),y(We,ye.DangerOutline,a.css(Je||(Je=m(["\n      color: ",";\n    "])),i.palette.red.light1)),y(We,ye.BaseGreen,a.css(Qe||(Qe=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),We)),y(tn,me,(y(an={},ye.Primary,a.css(Ze||(Ze=m(["\n      color: ",";\n    "])),i.uiColors.white)),y(an,ye.PrimaryOutline,a.css($e||($e=m(["\n      color: #0ad05b;\n    "])))),y(an,ye.Default,a.css(en||(en=m(["\n      color: ",";\n    "])),i.uiColors.white)),y(an,ye.Danger,a.css(nn||(nn=m(["\n      color: ",";\n    "])),i.uiColors.white)),y(an,ye.DangerOutline,a.css(rn||(rn=m(["\n      color: #f97216;\n    "])))),y(an,ye.BaseGreen,a.css(on||(on=m(["\n      color: ",";\n    "])),i.uiColors.gray.light1)),an)),tn),On=a.css(ln||(ln=m(["\n  ",":hover &,\n  ",":active & {\n    color: currentColor;\n  } ;\n"])),Ge.selector,Ge.selector),Cn=(y(dn={},ke.XSmall,a.css(sn||(sn=m(["\n    height: 14px;\n    width: 14px;\n  "])))),y(dn,ke.Small,a.css(cn||(cn=m(["\n    height: 16px;\n    width: 16px;\n  "])))),y(dn,ke.Default,a.css(pn||(pn=m(["\n    height: 16px;\n    width: 16px;\n  "])))),y(dn,ke.Large,a.css(un||(un=m(["\n    height: 20px;\n    width: 20px;\n  "])))),dn),Dn=(y(bn={},we,a.css(gn||(gn=m(["\n    color: ",";\n  "])),i.palette.gray.light2)),y(bn,me,a.css(fn||(fn=m(["\n    color: ",";\n  "])),i.uiColors.gray.dark1)),bn),Pn=a.css(xn||(xn=m(["\n  color: ",";\n"])),i.palette.gray.light1);function jn(e){var n,r=e.glyph,o=e.variant,t=e.size,l=e.darkMode,s=e.disabled,i=e.isIconOnlyButton,c=e.className,p=!i&&{"aria-hidden":!0,role:"presentation"},u=l?me:we,d=i?vn:mn;return g.default.cloneElement(r,h({className:a.cx(d[u][o],Cn[t],(n={},y(n,Dn[u],s),y(n,On,i),y(n,Pn,!l&&s&&i),n),c)},p))}jn.displayName="ButtonIcon";var zn,Gn,Sn,qn,Bn,Nn,Fn,Mn,En,Rn,Tn,In,Ln=["variant","size","darkMode","baseFontSize","disabled","leftGlyph","rightGlyph","children","className","as","type"],Xn=a.css(zn||(zn=m(["\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 6px;\n"]))),Kn=a.css(Gn||(Gn=m(["\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  position: relative;\n  z-index: 0;\n"]))),Yn=(y(Fn={},ke.XSmall,a.css(Sn||(Sn=m(["\n    padding: 0 8px;\n    gap: 6px;\n  "])))),y(Fn,ke.Small,a.css(qn||(qn=m(["\n    padding: 0 12px;\n    gap: 6px;\n  "])))),y(Fn,ke.Default,a.css(Bn||(Bn=m(["\n    padding: 0 12px;\n    gap: 6px;\n  "])))),y(Fn,ke.Large,a.css(Nn||(Nn=m(["\n    padding: 0 16px;\n    gap: 8px;\n  "])))),Fn),_n=g.default.forwardRef((function(e,r){var o,s,i=e.variant,p=void 0===i?ye.Default:i,d=e.size,f=void 0===d?ke.Default:d,x=e.darkMode,v=void 0!==x&&x,O=e.baseFontSize,C=void 0===O?14:O,D=e.disabled,P=void 0!==D&&D,j=e.leftGlyph,z=e.rightGlyph,G=e.children,S=e.className,q=e.as,B=e.type,N=w(e,Ln),F=l.useUsingKeyboardContext().usingKeyboard,M=n.useRef(null);n.useEffect((function(){var e,n=wn[v?me:we][p];return null!=M.current&&(e=t.registerRipple(M.current,{backgroundColor:n})),e}),[M,p,v]);var E=null!==(o=(j||z)&&!G)&&void 0!==o&&o,R=function(e){var n=e.variant,r=e.size,o=e.darkMode,t=e.baseFontSize,l=e.disabled,s=e.showFocus,i=o?me:we,p=Ce[i][n],u=De[i][n],d=je[r],g=ze[i][t];return a.cx(Oe,p,y({},u,s),y({},Pe[i],l),g,d,y({},a.css(fe||(fe=m(["\n        // TODO: Refresh - remove this logic\n        font-family: ",";\n        border-radius: 4px;\n      "])),c.fontFamilies.default),"dark"===i))}({variant:p,size:f,darkMode:v,baseFontSize:C,disabled:P,showFocus:F}),T=!(!N.href&&"a"!==q||P),I=h(h(h({type:T?void 0:B||"button",className:a.cx(R,S),ref:r,as:T?"a":"button"},"string"!=typeof N.href&&{disabled:P}),{},{"aria-disabled":P},Ge.prop),N),L={variant:p,size:f,darkMode:v,disabled:P,isIconOnlyButton:E},X=u.jsx(g.default.Fragment,null,u.jsx("div",{className:a.cx(Xn,y({},a.css(Mn||(Mn=m(["\n            border-radius: 3px;\n          "]))),v)),ref:M}),u.jsx("div",{className:a.cx(Kn,Yn[f],(s={},y(s,a.css(En||(En=m(["\n            justify-content: space-between;\n          "]))),!!z&&v),y(s,a.css(Rn||(Rn=m(["\n            font-family: ",";\n          "])),c.fontFamilies.legacy),v),s))},j&&u.jsx(jn,k({glyph:j,className:a.css(Tn||(Tn=m(["\n              justify-self: right;\n            "])))},L)),G,z&&u.jsx(jn,k({glyph:z,className:a.css(In||(In=m(["\n              justify-self: left;\n            "])))},L))));return u.jsx(b.default,I,X)}));_n.displayName="Button",_n.propTypes={variant:f.default.oneOf(Object.values(ye)),darkMode:f.default.bool,baseFontSize:f.default.oneOf([14,16]),size:f.default.oneOf(Object.values(ke)),disabled:f.default.bool,leftGlyph:f.default.element,rightGlyph:f.default.element,href:f.default.string},e.Size=ke,e.Variant=ye,e.default=_n,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/box"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/ripple"),require("@leafygreen-ui/leafygreen-provider"),require("polished"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/lib"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/box","@leafygreen-ui/emotion","@leafygreen-ui/ripple","@leafygreen-ui/leafygreen-provider","polished","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/lib","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/button"]={},e.React,e.PropTypes,e["@leafygreen-ui/box"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/ripple"],e["@leafygreen-ui/leafygreen-provider"],e.polished,e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/lib"],e.react)}(this,(function(e,n,r,t,a,o,l,s,i,c,p,d){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=g(n),b=g(r),f=g(t);function h(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function y(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?h(Object(r),!0).forEach((function(n){x(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function x(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function k(){return k=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},k.apply(this,arguments)}function w(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function m(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var v,O,D,P,j,z,S,B,G,q,N,M,F,C,E,I,K,L,R,T,X,H,_,U,V,Y,A,J,Q,W,Z,$,ee,ne,re,te,ae,oe,le,se,ie,ce,pe,de,ge,ue,be,fe,he,ye,xe,ke,we={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},me={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},ve="light",Oe="dark",De={Body1:13,Body2:16},Pe=function(e){return"\n    0 0 0 2px ".concat(e,", \n    0 0 0 4px ").concat(i.palette.blue.light1,";\n")},je=a.css(v||(v=m(["\n  // unset browser default\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n  border: 1px solid transparent;\n  display: inline-flex;\n  align-items: stretch;\n  transition: all 150ms ease-in-out;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n  z-index: 0;\n  font-family: ",";\n  border-radius: 6px;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    pointer-events: none;\n  }\n\n  &:active,\n  &:focus,\n  &:hover {\n    text-decoration: none;\n  }\n"])),c.fontFamilies.default),ze=(x(I={},ve,(x(B={},we.Default,a.css(O||(O=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),i.palette.gray.light3,i.palette.gray.base,i.palette.gray.dark3,i.palette.white,i.palette.gray.light2)),x(B,we.Primary,a.css(D||(D=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        border-color: #00593f; // Not quite dark3\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),i.palette.green.dark2,i.palette.green.dark2,i.palette.white,i.palette.white,i.palette.green.light2)),x(B,we.PrimaryOutline,a.css(P||(P=m(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.green.dark2,i.palette.green.dark2,s.transparentize(.96,i.palette.green.base),i.palette.green.light2)),x(B,we.Danger,a.css(j||(j=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        border-color: #c82222; // not quite dark1\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.red.base,i.palette.red.base,i.palette.white,i.palette.white,i.palette.red.light3)),x(B,we.DangerOutline,a.css(z||(z=m(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.red.light1,i.palette.red.base,i.palette.red.dark2,s.transparentize(.96,i.palette.red.base),i.palette.red.base,i.palette.red.light3)),x(B,we.BaseGreen,a.css(S||(S=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.green.base,i.palette.green.dark2,i.palette.green.dark3,s.mix(.96,i.palette.green.base,i.palette.green.dark3),i.palette.green.light2)),B)),x(I,Oe,(x(E={},we.Default,a.css(G||(G=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        border-color: ",";\n        color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.gray.dark2,i.palette.gray.base,i.palette.white,i.palette.white,i.palette.gray.dark1,i.palette.gray.base,i.palette.white,i.palette.gray.dark2)),x(E,we.Primary,a.css(q||(q=m(["\n      background-color: ",";\n      border: 1px solid ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: #00593f; // Off palette\n        box-shadow: 0 0 0 3px ",";\n      }\n    "])),i.palette.green.dark2,i.palette.green.base,i.palette.white,i.palette.white,i.palette.white,i.palette.green.dark3)),x(E,we.PrimaryOutline,a.css(N||(N=m(["\n      background-color: transparent;\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.green.base,i.palette.green.base,i.palette.green.base,i.palette.green.base,s.transparentize(.96,i.palette.green.base),i.palette.green.base,i.palette.green.dark3)),x(E,we.Danger,a.css(M||(M=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        border-color: ",";\n        color: ",";\n        background-color: #c82222; // Off palette\n        box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n      }\n    "])),i.palette.red.base,i.palette.red.light1,i.palette.white,i.palette.white,i.palette.red.light1,i.palette.white,i.palette.yellow.dark3)),x(E,we.DangerOutline,a.css(F||(F=m(["\n      border-color: ",";\n      color: ",";\n\n      &:focus {\n        color: ",";\n      }\n\n      &:hover,\n      &:active {\n        color: ",";\n        background-color: ",";\n        box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n      }\n    "])),i.palette.red.light1,i.palette.red.light1,i.palette.red.light1,i.palette.red.light1,s.transparentize(.96,i.palette.red.base),i.palette.yellow.dark3)),x(E,we.BaseGreen,a.css(C||(C=m(["\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n\n      &:hover,\n      &:active {\n        background-color: ",";\n        border-color: ",";\n        box-shadow: 0px 0px 0px 3px ",";\n      }\n    "])),i.palette.green.base,i.palette.green.dark2,i.palette.green.dark3,s.mix(.96,i.palette.green.base,i.palette.green.light3),i.palette.green.dark2,i.palette.green.dark3)),E)),I),Se=(x(Z={},ve,(x(_={},we.Default,a.css(K||(K=m(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),i.palette.white,Pe(i.palette.white))),x(_,we.Primary,a.css(L||(L=m(["\n      &:focus {\n        color: ",";\n        background-color: #00593f; // Not quite dark3\n        box-shadow: ",";\n      }\n    "])),i.palette.white,Pe(i.palette.white))),x(_,we.PrimaryOutline,a.css(R||(R=m(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.transparentize(.96,i.palette.green.base),Pe(i.palette.white))),x(_,we.Danger,a.css(T||(T=m(["\n      &:focus {\n        color: ",";\n        background-color: #c82222; // not quite dark1\n        box-shadow: ",";\n      }\n    "])),i.palette.white,Pe(i.palette.white))),x(_,we.DangerOutline,a.css(X||(X=m(["\n      &:focus {\n        color: ",";\n        box-shadow: ",";\n      }\n    "])),i.palette.red.dark2,Pe(i.palette.white))),x(_,we.BaseGreen,a.css(H||(H=m(["\n      &:focus {\n        box-shadow: ",";\n      }\n    "])),Pe(i.palette.white))),_)),x(Z,Oe,(x(W={},we.Default,a.css(U||(U=m(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),i.palette.gray.dark1,Pe(i.palette.black))),x(W,we.Primary,a.css(V||(V=m(["\n      &:focus {\n        background-color: #00593f; // Off palette\n        box-shadow: ",";\n      }\n    "])),Pe(i.palette.black))),x(W,we.PrimaryOutline,a.css(Y||(Y=m(["\n      &:focus {\n        background-color: ",";\n        border-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.transparentize(.96,i.palette.green.base),i.palette.green.base,Pe(i.palette.black))),x(W,we.Danger,a.css(A||(A=m(["\n      &:focus {\n        background-color: #c82222; // Off palette\n        box-shadow: ",";\n      }\n    "])),Pe(i.palette.black))),x(W,we.DangerOutline,a.css(J||(J=m(["\n      &:focus {\n        background-color: ",";\n        border-color: ",";\n        box-shadow: ",";\n      }\n    "])),s.transparentize(.96,i.palette.red.base),i.palette.red.light1,Pe(i.palette.black))),x(W,we.BaseGreen,a.css(Q||(Q=m(["\n      &:focus {\n        background-color: ",";\n        box-shadow: ",";\n      }\n    "])),i.palette.green.base,Pe(i.palette.black))),W)),Z),Be=(x(ne={},ve,a.css($||($=m(["\n    &,\n    &:hover {\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n      cursor: not-allowed;\n    }\n\n    &:focus {\n      box-shadow: ",";\n    }\n  "])),i.palette.gray.light2,i.palette.gray.light1,i.palette.gray.base,Pe(i.palette.white))),x(ne,Oe,a.css(ee||(ee=m(["\n    &,\n    &:hover {\n      background-color: ",";\n      border-color: ",";\n      color: ",";\n      cursor: not-allowed;\n    }\n\n    &:focus {\n      box-shadow: ",";\n    }\n  "])),i.palette.gray.dark3,i.palette.gray.dark1,i.palette.gray.dark1,Pe(i.palette.black))),ne),Ge=(x(le={},me.XSmall,a.css(re||(re=m(["\n    height: 22px;\n    text-transform: uppercase;\n    font-size: 12px;\n    line-height: 1em;\n    font-weight: bold;\n    letter-spacing: 0.4px;\n  "])))),x(le,me.Small,a.css(te||(te=m(["\n    height: 28px;\n  "])))),x(le,me.Default,a.css(ae||(ae=m(["\n    height: 36px;\n  "])))),x(le,me.Large,a.css(oe||(oe=m(["\n    height: 48px;\n    font-size: 18px;\n    line-height: 24px;\n  "])))),le),qe=(x(ce={},De.Body1,a.css(se||(se=m(["\n    font-size: ","px;\n    line-height: ","px;\n    font-weight: 500; // Medium\n  "])),c.typeScales.body1.fontSize,c.typeScales.body1.lineHeight)),x(ce,De.Body2,a.css(ie||(ie=m(["\n    font-size: ","px;\n    line-height: ","px;\n    // Pixel pushing for optical alignment purposes\n    transform: translateY(1px);\n    font-weight: 500; // Medium\n  "])),c.typeScales.body2.fontSize,c.typeScales.body2.lineHeight)),ce),Ne=p.createDataProp("button");var Me,Fe,Ce,Ee,Ie,Ke,Le,Re,Te,Xe,He,_e,Ue,Ve,Ye,Ae,Je,Qe,We,Ze,$e,en,nn,rn,tn,an,on,ln,sn,cn,pn,dn,gn,un,bn,fn,hn,yn,xn,kn,wn,mn,vn,On=.76,Dn=(x(ge={},ve,(x(pe={},we.Default,i.palette.gray.light2),x(pe,we.Primary,i.palette.green.dark1),x(pe,we.PrimaryOutline,s.transparentize(On,i.palette.green.base)),x(pe,we.Danger,i.palette.red.light1),x(pe,we.DangerOutline,s.transparentize(On,i.palette.red.base)),x(pe,we.BaseGreen,i.palette.green.light1),pe)),x(ge,Oe,(x(de={},we.Default,i.palette.gray.base),x(de,we.Primary,i.palette.green.dark1),x(de,we.PrimaryOutline,s.transparentize(On,i.palette.green.base)),x(de,we.Danger,i.palette.red.dark2),x(de,we.DangerOutline,s.transparentize(On,i.palette.red.light1)),x(de,we.BaseGreen,i.palette.green.dark1),de)),ge),Pn=a.css(ue||(ue=m(["\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 5px;\n"]))),jn=a.css(be||(be=m(["\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  position: relative;\n  z-index: 0;\n"]))),zn=(x(ke={},me.XSmall,a.css(fe||(fe=m(["\n    padding: 0 7px; // 8px - 1px border\n    gap: 6px;\n  "])))),x(ke,me.Small,a.css(he||(he=m(["\n    padding: 0 11px; // 12px - 1px border\n    gap: 6px;\n  "])))),x(ke,me.Default,a.css(ye||(ye=m(["\n    padding: 0 11px; // 12px - 1px border\n    gap: 6px;\n  "])))),x(ke,me.Large,a.css(xe||(xe=m(["\n    padding: 0 15px; // 16px - 1px border\n    gap: 8px;\n  "])))),ke),Sn=(x(Ye={},ve,(x(Le={},we.Default,a.css(Me||(Me=m(["\n      color: ",";\n    "])),i.palette.gray.base)),x(Le,we.Primary,a.css(Fe||(Fe=m(["\n      color: ",";\n    "])),i.palette.green.light2)),x(Le,we.PrimaryOutline,a.css(Ce||(Ce=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),x(Le,we.Danger,a.css(Ee||(Ee=m(["\n      color: ",";\n    "])),i.palette.red.light3)),x(Le,we.DangerOutline,a.css(Ie||(Ie=m(["\n      color: ",";\n    "])),i.palette.red.light1)),x(Le,we.BaseGreen,a.css(Ke||(Ke=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),Le)),x(Ye,Oe,(x(Ve={},we.Default,a.css(Re||(Re=m(["\n      color: ",";\n    "])),i.palette.gray.light2)),x(Ve,we.Primary,a.css(Te||(Te=m(["\n      color: ",";\n    "])),i.palette.green.light2)),x(Ve,we.PrimaryOutline,a.css(Xe||(Xe=m(["\n      color: ",";\n    "])),i.palette.green.base)),x(Ve,we.Danger,a.css(He||(He=m(["\n      color: ",";\n    "])),i.palette.red.light2)),x(Ve,we.DangerOutline,a.css(_e||(_e=m(["\n      color: ",";\n    "])),i.palette.red.light1)),x(Ve,we.BaseGreen,a.css(Ue||(Ue=m(["\n      color: ",";\n    "])),i.uiColors.green.dark3)),Ve)),Ye),Bn=(x(cn={},ve,(x(en={},we.Default,a.css(Ae||(Ae=m(["\n      color: ",";\n    "])),i.palette.gray.dark1)),x(en,we.Primary,a.css(Je||(Je=m(["\n      color: ",";\n    "])),i.palette.green.light3)),x(en,we.PrimaryOutline,a.css(Qe||(Qe=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),x(en,we.Danger,a.css(We||(We=m(["\n      color: ",";\n    "])),i.palette.red.light3)),x(en,we.DangerOutline,a.css(Ze||(Ze=m(["\n      color: ",";\n    "])),i.palette.red.light1)),x(en,we.BaseGreen,a.css($e||($e=m(["\n      color: ",";\n    "])),i.palette.green.dark2)),en)),x(cn,Oe,(x(sn={},we.Default,a.css(nn||(nn=m(["\n      color: ",";\n    "])),i.palette.gray.light3)),x(sn,we.Primary,a.css(rn||(rn=m(["\n      color: ",";\n    "])),i.palette.green.light3)),x(sn,we.PrimaryOutline,a.css(tn||(tn=m(["\n      color: ",";\n    "])),i.palette.green.base)),x(sn,we.Danger,a.css(an||(an=m(["\n      color: ",";\n    "])),i.palette.red.light3)),x(sn,we.DangerOutline,a.css(on||(on=m(["\n      color: ",";\n    "])),i.palette.red.light1)),x(sn,we.BaseGreen,a.css(ln||(ln=m(["\n      color: ",";\n    "])),i.uiColors.green.dark3)),sn)),cn),Gn=a.css(pn||(pn=m(["\n  ",":hover &,\n  ",":active & {\n    color: currentColor;\n  } ;\n"])),Ne.selector,Ne.selector),qn=(x(fn={},me.XSmall,a.css(dn||(dn=m(["\n    height: 14px;\n    width: 14px;\n  "])))),x(fn,me.Small,a.css(gn||(gn=m(["\n    height: 16px;\n    width: 16px;\n  "])))),x(fn,me.Default,a.css(un||(un=m(["\n    height: 16px;\n    width: 16px;\n  "])))),x(fn,me.Large,a.css(bn||(bn=m(["\n    height: 20px;\n    width: 20px;\n  "])))),fn),Nn=(x(xn={},ve,a.css(hn||(hn=m(["\n    color: ",";\n  "])),i.palette.gray.light2)),x(xn,Oe,a.css(yn||(yn=m(["\n    color: ",";\n  "])),i.palette.gray.dark1)),xn),Mn=a.css(kn||(kn=m(["\n  color: ",";\n"])),i.palette.gray.light1);function Fn(e){var n,r=e.glyph,t=e.variant,o=e.size,l=e.darkMode,s=e.disabled,i=e.isIconOnlyButton,c=e.className,p=!i&&{"aria-hidden":!0,role:"presentation"},d=l?Oe:ve,g=i?Bn:Sn;return u.default.cloneElement(r,y({className:a.cx(g[d][t],qn[o],(n={},x(n,Nn[d],s),x(n,Gn,i),x(n,Mn,!l&&s&&i),n),c)},p))}Fn.displayName="ButtonIcon";var Cn=["variant","size","darkMode","baseFontSize","disabled","leftGlyph","rightGlyph","children","className","as","type"],En=u.default.forwardRef((function(e,r){var t,s=e.variant,i=void 0===s?we.Default:s,c=e.size,p=void 0===c?me.Default:c,g=e.darkMode,b=void 0!==g&&g,h=e.baseFontSize,v=void 0===h?De.Body1:h,O=e.disabled,D=void 0!==O&&O,P=e.leftGlyph,j=e.rightGlyph,z=e.children,S=e.className,B=e.as,G=e.type,q=w(e,Cn),N=l.useUsingKeyboardContext().usingKeyboard,M=n.useRef(null);n.useEffect((function(){var e,n=Dn[b?Oe:ve][i];return null==M.current||D||(e=o.registerRipple(M.current,{backgroundColor:n})),e}),[M,i,b,D]);var F=null!==(t=(P||j)&&!z)&&void 0!==t&&t,C=function(e){var n=e.variant,r=e.size,t=e.darkMode,o=e.baseFontSize,l=e.disabled,s=e.usingKeyboard,i=t?Oe:ve,c=ze[i][n],p=Se[i][n],d=Ge[r],g=qe[o];return a.cx(je,c,g,d,x({},p,s&&!l),x({},Be[i],l))}({variant:i,size:p,darkMode:b,baseFontSize:v,disabled:D,usingKeyboard:N}),E=!(!q.href&&"a"!==B||D),I=y(y(y({type:E?void 0:G||"button",className:a.cx(C,S),ref:r,as:E?"a":"button"},"string"!=typeof q.href&&{disabled:D}),{},{"aria-disabled":D},Ne.prop),q),K={variant:i,size:p,darkMode:b,disabled:D,isIconOnlyButton:F},L=d.jsx(u.default.Fragment,null,d.jsx("div",{className:a.cx(Pn),ref:M}),d.jsx("div",{className:a.cx(jn,zn[p],x({},a.css(wn||(wn=m(["\n              justify-content: space-between;\n            "]))),!!j&&b))},P&&d.jsx(Fn,k({glyph:P,className:a.css(mn||(mn=m(["\n                justify-self: right;\n              "])))},K)),z,j&&d.jsx(Fn,k({glyph:j,className:a.css(vn||(vn=m(["\n                justify-self: left;\n              "])))},K))));return d.jsx(f.default,I,L)}));En.displayName="Button",En.propTypes={variant:b.default.oneOf(Object.values(we)),baseFontSize:b.default.oneOf(Object.values(De)),size:b.default.oneOf(Object.values(me)),darkMode:b.default.bool,disabled:b.default.bool,leftGlyph:b.default.element,rightGlyph:b.default.element,href:b.default.string},e.FontSize=De,e.Size=me,e.Variant=we,e.default=En,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

dist/styles.d.ts

@@ -1,2 +0,2 @@
-import { Variant, Mode, ButtonProps } from './types';
+import { Size, Variant, Mode, ButtonProps } from './types';
 export declare const ButtonDataProp: {
@@ -8,6 +8,9 @@ prop: {
 };
-export declare function getClassName({ variant, size: sizeProp, darkMode, baseFontSize, disabled, showFocus, }: Required<Pick<ButtonProps, 'baseFontSize' | 'variant' | 'size' | 'darkMode' | 'disabled'> & {
-    showFocus: boolean;
+export declare function getClassName({ variant, size: sizeProp, darkMode, baseFontSize, disabled, usingKeyboard, }: Required<Pick<ButtonProps, 'baseFontSize' | 'variant' | 'size' | 'darkMode' | 'disabled'> & {
+    usingKeyboard: boolean;
 }>): string;
 export declare const rippleColors: Record<Mode, Record<Variant, string>>;
+export declare const rippleStyle: string;
+export declare const buttonContentStyle: string;
+export declare const buttonContentSizeStyle: Record<Size, string>;
 //# sourceMappingURL=styles.d.ts.map

dist/types.d.ts

@@ -23,3 +23,7 @@ /// <reference types="react" />
 declare type Mode = typeof Mode[keyof typeof Mode];
-declare type FontSize = 14 | 16;
+declare const FontSize: {
+    readonly Body1: 13;
+    readonly Body2: 16;
+};
+declare type FontSize = typeof FontSize[keyof typeof FontSize];
 interface ButtonProps {
@@ -26,0 +30,0 @@ variant?: Variant;

package.json

 {
   "name": "@leafygreen-ui/button",
-  "version": "13.0.1",
+  "version": "14.0.0",
   "description": "leafyGreen UI Kit Button",
@@ -24,4 +24,4 @@ "main": "./dist/index.js",
     "@leafygreen-ui/box": "^3.0.6",
-    "@leafygreen-ui/lib": "^9.0.0",
-    "@leafygreen-ui/tokens": "^1.0.0",
+    "@leafygreen-ui/lib": "^9.2.1",
+    "@leafygreen-ui/tokens": "^1.2.0",
     "@leafygreen-ui/palette": "^3.3.1",
@@ -28,0 +28,0 @@ "@leafygreen-ui/emotion": "^4.0.0",

src/index.ts

 export { default } from './Button';
 export type { ButtonProps } from './types';
-export { Variant, Size } from './types';
+export { FontSize, Variant, Size } from './types';

src/styles.ts

@@ -1,6 +0,6 @@
-import { transparentize } from 'polished';
+import { mix, transparentize } from 'polished';
 import { css, cx } from '@leafygreen-ui/emotion';
-import { palette, uiColors } from '@leafygreen-ui/palette';
-import { Size, Variant, Mode, ButtonProps } from './types';
-import { fontFamilies } from '@leafygreen-ui/tokens';
+import { palette } from '@leafygreen-ui/palette';
+import { Size, Variant, Mode, ButtonProps, FontSize } from './types';
+import { fontFamilies, typeScales } from '@leafygreen-ui/tokens';
 import { createDataProp } from '@leafygreen-ui/lib';
@@ -109,3 +109,3 @@
         border-color: ${palette.red.base};
-        box-shadow: 0px 0px 0px 3px ${uiColors.red.light3};
+        box-shadow: 0px 0px 0px 3px ${palette.red.light3};
       }
@@ -121,2 +121,3 @@ `,
       &:active {
+        background-color: ${mix(0.96, palette.green.base, palette.green.dark3)};
         box-shadow: 0px 0px 0px 3px ${palette.green.light2};
@@ -127,9 +128,9 @@ }
   [Mode.Dark]: {
-    [Variant.Primary]: css`
-      background-color: ${uiColors.green.dark2};
-      border: 1px solid ${uiColors.green.base};
-      color: ${uiColors.white};
+    [Variant.Default]: css`
+      background-color: ${palette.gray.dark2};
+      border-color: ${palette.gray.base};
+      color: ${palette.white};
 
       &:focus {
-        color: ${uiColors.white};
+        color: ${palette.white};
       }
@@ -139,14 +140,15 @@
       &:active {
-        color: ${uiColors.white};
-        background-color: ${uiColors.green.dark1};
-        box-shadow: 0px 0px 0px 3px ${uiColors.green.dark2};
+        background-color: ${palette.gray.dark1};
+        border-color: ${palette.gray.base};
+        color: ${palette.white};
+        box-shadow: 0px 0px 0px 3px ${palette.gray.dark2};
       }
     `,
+    [Variant.Primary]: css`
+      background-color: ${palette.green.dark2};
+      border: 1px solid ${palette.green.base};
+      color: ${palette.white};
 
-    [Variant.PrimaryOutline]: css`
-      border: 1px solid ${uiColors.green.base};
-      color: #0ad05b;
-
       &:focus {
-        color: #0ad05b;
+        color: ${palette.white};
       }
@@ -156,16 +158,15 @@
       &:active {
-        color: #0ad05b;
-        background-color: rgba(10, 208, 91, 0.08);
-        border: 1px solid ${uiColors.green.base};
-        box-shadow: 0px 0px 0px 3px ${uiColors.green.dark2};
+        color: ${palette.white};
+        background-color: #00593f; // Off palette
+        box-shadow: 0 0 0 3px ${palette.green.dark3};
       }
     `,
 
-    [Variant.Default]: css`
-      background-color: ${uiColors.gray.dark2};
-      border: 1px solid ${uiColors.gray.base};
-      color: ${uiColors.white};
+    [Variant.PrimaryOutline]: css`
+      background-color: transparent;
+      border-color: ${palette.green.base};
+      color: ${palette.green.base};
 
       &:focus {
-        color: ${uiColors.white};
+        color: ${palette.green.base};
       }
@@ -175,6 +176,6 @@
       &:active {
-        color: ${uiColors.white};
-        background-color: ${uiColors.gray.dark1};
-        border: 1px solid ${uiColors.gray.base};
-        box-shadow: 0px 0px 0px 3px ${uiColors.gray.dark2};
+        color: ${palette.green.base};
+        background-color: ${transparentize(0.96, palette.green.base)};
+        border-color: ${palette.green.base};
+        box-shadow: 0px 0px 0px 3px ${palette.green.dark3};
       }
@@ -184,8 +185,8 @@ `,
     [Variant.Danger]: css`
-      background-color: ${uiColors.red.dark1};
-      border: 1px solid #f97216;
-      color: ${uiColors.white};
+      background-color: ${palette.red.base};
+      border-color: ${palette.red.light1};
+      color: ${palette.white};
 
       &:focus {
-        color: ${uiColors.white};
+        color: ${palette.white};
       }
@@ -195,6 +196,6 @@
       &:active {
-        color: ${uiColors.white};
-        background-color: ${uiColors.red.base};
-        border: 1px solid #f97216;
-        box-shadow: 0px 0px 0px 3px ${uiColors.red.dark2};
+        border-color: ${palette.red.light1};
+        color: ${palette.white};
+        background-color: #c82222; // Off palette
+        box-shadow: 0px 0px 0px 3px ${palette.yellow.dark3}; // yes, yellow
       }
@@ -204,7 +205,7 @@ `,
     [Variant.DangerOutline]: css`
-      border: 1px solid #f97216;
-      color: #f97216;
+      border-color: ${palette.red.light1};
+      color: ${palette.red.light1};
 
       &:focus {
-        color: #f97216;
+        color: ${palette.red.light1};
       }
@@ -214,23 +215,22 @@
       &:active {
-        color: #f97216;
-        background: rgba(249, 114, 22, 0.08);
-        box-shadow: 0px 0px 0px 3px ${uiColors.red.dark2};
+        color: ${palette.red.light1};
+        background-color: ${transparentize(0.96, palette.red.base)};
+        box-shadow: 0px 0px 0px 3px ${palette.yellow.dark3}; // yes, yellow
       }
     `,
 
-    // TODO: Refresh - Dark mode doesn't have a Base Green variant. This just duplicates `Primary`
     [Variant.BaseGreen]: css`
-      background-color: ${uiColors.green.dark2};
-      border: 1px solid ${uiColors.green.base};
-      color: ${uiColors.white};
+      background-color: ${palette.green.base};
+      border-color: ${palette.green.dark2};
+      color: ${palette.green.dark3};
 
-      &:focus {
-        color: ${uiColors.white};
-      }
-
       &:hover,
       &:active {
-        color: ${uiColors.white};
-        background-color: ${uiColors.green.dark1};
-        box-shadow: 0px 0px 0px 3px ${uiColors.green.dark2};
+        background-color: ${mix(
+          0.96,
+          palette.green.base,
+          palette.green.light3,
+        )};
+        border-color: ${palette.green.dark2};
+        box-shadow: 0px 0px 0px 3px ${palette.green.dark3};
       }
@@ -271,3 +271,3 @@ `,
       &:focus {
-        color: ${uiColors.red.dark2};
+        color: ${palette.red.dark2};
         box-shadow: ${focusBoxShadow(palette.white)};
@@ -283,20 +283,19 @@ }
   [Mode.Dark]: {
-    [Variant.Primary]: css`
+    [Variant.Default]: css`
       &:focus {
-        background: ${uiColors.green.dark1};
-        box-shadow: 0px 4px 4px rgba(0, 124, 173, 0.4),
-          0px 0px 0px 3px ${uiColors.focus};
+        background-color: ${palette.gray.dark1};
+        box-shadow: ${focusBoxShadow(palette.black)};
       }
     `,
-    [Variant.PrimaryOutline]: css`
+    [Variant.Primary]: css`
       &:focus {
-        background: rgba(10, 208, 91, 0.08);
-        border: 1px solid ${uiColors.green.dark1};
-        box-shadow: 0px 0px 0px 3px #139fd7;
+        background-color: #00593f; // Off palette
+        box-shadow: ${focusBoxShadow(palette.black)};
       }
     `,
-    [Variant.Default]: css`
+    [Variant.PrimaryOutline]: css`
       &:focus {
-        background-color: ${uiColors.gray.dark1};
-        box-shadow: 0px 0px 0px 3px #2f9fc5;
+        background-color: ${transparentize(0.96, palette.green.base)};
+        border-color: ${palette.green.base};
+        box-shadow: ${focusBoxShadow(palette.black)};
       }
@@ -306,4 +305,4 @@ `,
       &:focus {
-        background: ${uiColors.red.base};
-        box-shadow: 0px 0px 0px 3px ${uiColors.focus};
+        background-color: #c82222; // Off palette
+        box-shadow: ${focusBoxShadow(palette.black)};
       }
@@ -313,5 +312,5 @@ `,
       &:focus {
-        background: rgba(249, 114, 22, 0.08);
-        border: 1px solid #f97216;
-        box-shadow: 0px 0px 0px 3px #019ee2;
+        background-color: ${transparentize(0.96, palette.red.base)};
+        border-color: ${palette.red.light1};
+        box-shadow: ${focusBoxShadow(palette.black)};
       }
@@ -321,5 +320,4 @@ `,
       &:focus {
-        background: ${uiColors.green.dark1};
-        box-shadow: 0px 4px 4px rgba(0, 124, 173, 0.4),
-          0px 0px 0px 3px ${uiColors.focus};
+        background-color: ${palette.green.base};
+        box-shadow: ${focusBoxShadow(palette.black)};
       }
@@ -332,31 +330,31 @@ `,
   [Mode.Light]: css`
-    background-color: ${palette.gray.light2};
-    border: 1px solid ${palette.gray.light1};
-    cursor: not-allowed;
-    color: ${palette.gray.base};
-
+    &,
     &:hover {
       background-color: ${palette.gray.light2};
-      border: 1px solid ${palette.gray.light1};
+      border-color: ${palette.gray.light1};
+      color: ${palette.gray.base};
       cursor: not-allowed;
-      color: ${palette.gray.base};
     }
+
+    &:focus {
+      box-shadow: ${focusBoxShadow(palette.white)};
+    }
   `,
 
   [Mode.Dark]: css`
-    background: rgba(61, 79, 88, 0.3);
-    border: 1px solid ${uiColors.gray.dark2};
-    color: ${uiColors.gray.base};
-    cursor: not-allowed;
-
+    &,
     &:hover {
-      background: rgba(61, 79, 88, 0.3);
-      border: 1px solid ${uiColors.gray.dark2};
-      color: ${uiColors.gray.base};
+      background-color: ${palette.gray.dark3};
+      border-color: ${palette.gray.dark1};
+      color: ${palette.gray.dark1};
       cursor: not-allowed;
     }
+
+    &:focus {
+      box-shadow: ${focusBoxShadow(palette.black)};
+    }
   `,
 };
 
-const sizeSet: Record<Size, string> = {
+const sizeStyle: Record<Size, string> = {
   [Size.XSmall]: css`
@@ -386,25 +384,15 @@ height: 22px;
 
-const fontStyles = {
-  [Mode.Light]: {
-    [14]: css`
-      font-size: 13px;
-      font-weight: 500;
-    `,
-    [16]: css`
-      font-size: 16px;
-      // Pixel pushing for optical alignment purposes
-      transform: translateY(1px);
-      font-weight: 500;
-    `,
-  },
-  [Mode.Dark]: {
-    [14]: css`
-      font-size: 14px;
-    `,
-    [16]: css`
-      font-size: 16px;
-      // Pixel pushing for optical alignment purposes
-      transform: translateY(1px);
-    `,
-  },
+const fontStyles: Record<FontSize, string> = {
+  [FontSize.Body1]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+    font-weight: 500; // Medium
+  `,
+  [FontSize.Body2]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: ${typeScales.body2.lineHeight}px;
+    // Pixel pushing for optical alignment purposes
+    transform: translateY(1px);
+    font-weight: 500; // Medium
+  `,
 };
@@ -420,3 +408,3 @@
   disabled,
-  showFocus,
+  usingKeyboard,
 }: Required<
@@ -426,3 +414,3 @@ Pick<
     'baseFontSize' | 'variant' | 'size' | 'darkMode' | 'disabled'
-  > & { showFocus: boolean }
+  > & { usingKeyboard: boolean }
 >) {
@@ -432,4 +420,4 @@ const mode = darkMode ? Mode.Dark : Mode.Light;
   const focus = focusStyle[mode][variant];
-  const size = sizeSet[sizeProp];
-  const fontSize = fontStyles[mode][baseFontSize];
+  const size = sizeStyle[sizeProp];
+  const fontSize = fontStyles[baseFontSize];
 
@@ -439,46 +427,72 @@ return cx(
     color,
-    { [focus]: showFocus },
-    { [disabledStyle[mode]]: disabled },
     fontSize,
     size,
-    {
-      [css`
-        // TODO: Refresh - remove this logic
-        font-family: ${fontFamilies.default};
-        border-radius: 4px;
-      `]: mode === 'dark',
-    },
+    { [focus]: usingKeyboard && !disabled },
+    { [disabledStyle[mode]]: disabled },
   );
 }
 
-const buttonOpacity = 0.76;
+const rippleOpacity = 0.76;
 
-const visualDesignPalette = {
-  green5: '#0AD05B',
-  orange4: '#F97216',
-};
-
 export const rippleColors: Record<Mode, Record<Variant, string>> = {
   [Mode.Light]: {
+    [Variant.Default]: palette.gray.light2,
     [Variant.Primary]: palette.green.dark1,
-    [Variant.PrimaryOutline]: transparentize(buttonOpacity, palette.green.base),
-    [Variant.Default]: palette.gray.light2,
+    [Variant.PrimaryOutline]: transparentize(rippleOpacity, palette.green.base),
     [Variant.Danger]: palette.red.light1,
-    [Variant.DangerOutline]: transparentize(buttonOpacity, palette.red.base),
+    [Variant.DangerOutline]: transparentize(rippleOpacity, palette.red.base),
     [Variant.BaseGreen]: palette.green.light1,
   },
   [Mode.Dark]: {
-    [Variant.Primary]: visualDesignPalette.green5,
-    [Variant.PrimaryOutline]: transparentize(
-      buttonOpacity,
-      uiColors.green.base,
-    ),
-    [Variant.Default]: uiColors.gray.base,
-    [Variant.Danger]: visualDesignPalette.orange4,
-    [Variant.DangerOutline]: transparentize(
-      buttonOpacity,
-      visualDesignPalette.orange4,
-    ),
-    [Variant.BaseGreen]: visualDesignPalette.green5,
+    [Variant.Default]: palette.gray.base,
+    [Variant.Primary]: palette.green.dark1,
+    [Variant.PrimaryOutline]: transparentize(rippleOpacity, palette.green.base),
+    [Variant.Danger]: palette.red.dark2,
+    [Variant.DangerOutline]: transparentize(rippleOpacity, palette.red.light1),
+    [Variant.BaseGreen]: palette.green.dark1,
   },
 };
+
+export const rippleStyle = css`
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 5px;
+`;
+
+export const buttonContentStyle = css`
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  position: relative;
+  z-index: 0;
+`;
+
+export const buttonContentSizeStyle: Record<Size, string> = {
+  [Size.XSmall]: css`
+    padding: 0 7px; // 8px - 1px border
+    gap: 6px;
+  `,
+
+  [Size.Small]: css`
+    padding: 0 11px; // 12px - 1px border
+    gap: 6px;
+  `,
+
+  [Size.Default]: css`
+    padding: 0 11px; // 12px - 1px border
+    gap: 6px;
+  `,
+
+  [Size.Large]: css`
+    padding: 0 15px; // 16px - 1px border
+    gap: 8px;
+  `,
+};

src/types.ts

@@ -28,4 +28,9 @@ const Variant = {
 
-type FontSize = 14 | 16;
+const FontSize = {
+  Body1: 13,
+  Body2: 16,
+} as const;
 
+type FontSize = typeof FontSize[keyof typeof FontSize];
+
 interface ButtonProps {
@@ -32,0 +37,0 @@ variant?: Variant;

No alert changes

Worsened metrics

Total package byte prevSize

219986

decreased by-43.27%

Lines of code

1229

decreased by-1.44%

Dependency changes

• Updated@leafygreen-ui/lib@^9.2.1

• Updated@leafygreen-ui/tokens@^1.2.0