@leafygreen-ui/checkbox - npm Package Compare versions

Comparing version 12.0.4 to 12.0.5

CHANGELOG.md

 # @leafygreen-ui/checkbox
 
+## 12.0.5
+
+### Patch Changes
+
+- cccc1cebe: Removes useUsingKeyboard from component in favor of `&:focus-visible`
+
 ## 12.0.4
@@ -4,0 +10,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n from"react";import e from"prop-types";import{css as r,cx as t}from"@leafygreen-ui/emotion";import{useIdAllocator as o}from"@leafygreen-ui/hooks";import{useUsingKeyboardContext as a,useDarkMode as i}from"@leafygreen-ui/leafygreen-provider";import{Label as l,Description as s}from"@leafygreen-ui/typography";import{Transition as c}from"react-transition-group";import{usePrefersReducedMotion as d}from"@leafygreen-ui/a11y";import{createUniqueClassName as u,Theme as m}from"@leafygreen-ui/lib";import{palette as g}from"@leafygreen-ui/palette";import{transitionDuration as b,hoverRing as f,focusRing as p}from"@leafygreen-ui/tokens";function h(n,e,r){return 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||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},y.apply(this,arguments)}function k(n,e){if(null==n)return{};var r,t,o=function(n,e){if(null==n)return{};var r,t,o={},a=Object.keys(n);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||(o[r]=n[r]);return o}(n,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(o[r]=n[r])}return o}function x(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function v(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==r)return;var t,o,a=[],i=!0,l=!1;try{for(r=r.call(n);!(i=(t=r.next()).done)&&(a.push(t.value),!e||a.length!==e);i=!0);}catch(n){l=!0,o=n}finally{try{i||null==r.return||r.return()}finally{if(l)throw o}}return a}(n,e)||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,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r<e;r++)t[r]=n[r];return t}var O,j,E,L,N,C,D,M,S,z,A,P,I,T,B,F,K,W,q,U,$,G,H,J,Q,R,V,X,Y,Z,_,nn,en,rn,tn,on,an,ln,sn,cn,dn,un,mn=b.faster,gn=100-100*Math.sqrt(2),bn=u("ripple"),fn=r(O||(O=x(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),pn=r(j||(j=x(["\n  grid-area: check;\n  position: relative;\n  display: flex;\n  z-index: 1;\n  height: ","px;\n  width: ","px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  border: ","px solid;\n  overflow: hidden;\n  background-color: transparent;\n  transition: box-shadow 100ms ease-in-out, background-color 0ms linear,\n    border-color 0ms linear;\n\n  // delay border-color out\n  transition-delay: 0ms, 0ms, ","ms;\n\n  /**\n   * The animated background circle\n   */\n  &:before {\n    content: '';\n    position: absolute;\n    inset: ","%;\n    z-index: 1;\n    border-radius: 100%;\n    transform: scale(0);\n    transform-origin: center center;\n    transition: transform ","ms ease-in-out;\n    transition-delay: ","ms;\n  }\n"])),14,14,2,mn,gn,mn,mn/2),hn=(h(N={},m.Light,r(E||(E=x(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),g.gray.dark2,g.blue.base)),h(N,m.Dark,r(L||(L=x(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),g.gray.base,g.blue.light1)),N),yn=r(C||(C=x(["\n  // Delay background transition in\n  transition-delay: 0ms, ","ms, 0ms;\n\n  &:before {\n    transform: scale(1);\n    // No delay on enter\n    transition-delay: 0ms;\n  }\n"])),mn),kn=(h(S={},m.Light,r(D||(D=x(["\n    background-color: ",";\n    border-color: ",";\n  "])),g.blue.base,g.blue.base)),h(S,m.Dark,r(M||(M=x(["\n    background-color: ",";\n    border-color: ",";\n  "])),g.blue.light1,g.blue.light1)),S),xn=(h(P={},m.Light,r(z||(z=x(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),g.gray.light2,g.gray.light3,g.gray.light3)),h(P,m.Dark,r(A||(A=x(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),g.gray.dark2,g.gray.dark3,g.gray.dark3)),P),vn=(h(B={},m.Light,r(I||(I=x(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),g.gray.light2,g.gray.light2)),h(B,m.Dark,r(T||(T=x(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),g.gray.dark2,g.gray.dark2)),B),wn=r(F||(F=x(["\n  grid-area: check;\n  position: relative;\n  top: ","px;\n  height: ","px;\n  width: ","px;\n  z-index: 0;\n  border-radius: 100%;\n  opacity: 1;\n  transform: scale(0);\n  transform-origin: center center;\n  transition: 0ms ease-in-out;\n  transition-property: transform, opacity;\n"])),2,14,14),On=(h(q={},m.Light,r(K||(K=x(["\n    background-color: ",";\n  "])),g.blue.dark1)),h(q,m.Dark,r(W||(W=x(["\n    background-color: ",";\n  "])),g.blue.light2)),q),jn=r(U||(U=x(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*mn,-1.7777777777777777*mn,2.25),En=r($||($=x(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),mn),Ln=r(G||(G=x(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),mn/8),Nn=r(H||(H=x(["\n  transform: scale(0) rotate(-45deg);\n"]))),Cn={entering:Nn,entered:Ln,exiting:Nn,exited:Nn,unmounted:Nn},Dn=function(e){var r;return n.createElement("svg",y({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),n.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(r=e.stroke)&&void 0!==r?r:g.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},Mn=function(e){var r;return n.createElement("svg",y({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),n.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(r=e.stroke)&&void 0!==r?r:g.white}))},Sn=(h(J={},m.Light,{default:g.white,disabled:g.gray.light3}),h(J,m.Dark,{default:g.white,disabled:g.gray.dark1}),J);function zn(e){var r,o,i=e.theme,l=e.isChecked,s=e.indeterminate,u=e.disabled,m=e.animate,g=e.selector,b=a().usingKeyboard,f=d(),p=s?Mn:Dn,y=s||l,k=m&&!s&&!f;return n.createElement(n.Fragment,null,n.createElement("div",{className:t(g,pn,hn[i],(r={},h(r,yn,y),h(r,kn[i],y),h(r,xn[i],u),h(r,vn[i],u&&y),h(r,fn,!k),r))},n.createElement(c,{in:y,timeout:f?0:mn,enter:k,exit:k},(function(e){return n.createElement(p,{stroke:u?Sn[i].disabled:Sn[i].default,className:t(En,Cn[e],h({},fn,!k))})}))),!b&&n.createElement("div",{className:t(bn,wn,On[i],(o={},h(o,jn,l&&k),h(o,fn,!k),o))}))}var An,Pn=u("check-wrapper"),In=u("input"),Tn=r(Q||(Q=x(["\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'label label' '. description';\n  gap: 0 8px;\n  position: relative;\n  align-items: center;\n  justify-content: flex-start;\n  z-index: 0;\n"])),14),Bn=r(R||(R=x(["\n  cursor: not-allowed;\n"]))),Fn=r(V||(V=x(["\n  grid-area: label;\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'check text';\n  gap: 8px;\n  justify-content: flex-start;\n  align-items: baseline;\n  cursor: pointer;\n"])),14),Kn="\n  &:hover:not(:focus-within)\n    > .".concat(In,":not([disabled])\n      + .").concat(Pn,"\n"),Wn=(h(Z={},m.Light,r(X||(X=x(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Kn,f.light.gray)),h(Z,m.Dark,r(Y||(Y=x(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Kn,f.dark.gray)),Z),qn=r(_||(_=x(["\n  cursor: not-allowed;\n"]))),Un=r(nn||(nn=x(["\n  color: ",";\n"])),g.gray.base),$n=r(en||(en=x(["\n  margin: 0;\n  position: absolute;\n  height: 0;\n  width: 0;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  opacity: 0;\n"]))),Gn=(h(on={},m.Light,r(rn||(rn=x(["\n    &:focus + ."," {\n      box-shadow: ",";\n    }\n  "])),Pn,p.light.default)),h(on,m.Dark,r(tn||(tn=x(["\n    &:focus + ."," {\n      box-shadow: ",";\n    }\n  "])),Pn,p.dark.default)),on),Hn=r(an||(an=x(["\n  align-self: baseline;\n"]))),Jn=r(ln||(ln=x(["\n  grid-area: description;\n"])));h(dn={},m.Light,r(sn||(sn=x(["\n    color: ",";\n  "])),g.black)),h(dn,m.Dark,r(cn||(cn=x(["\n    color: ",";\n  "])),g.gray.light2)),r(un||(un=x(["\n  color: ",";\n"])),g.gray.dark1);var Qn=["darkMode","checked","label","description","disabled","bold","indeterminate","animate","className","onClick","onChange","id","style","name"];function Rn(e){var c,d=e.darkMode,u=e.checked,m=e.label,g=void 0===m?"":m,b=e.description,f=e.disabled,p=void 0!==f&&f,w=e.bold,O=e.indeterminate,j=e.animate,E=void 0===j||j,L=e.className,N=e.onClick,C=e.onChange,D=e.id,M=e.style,S=e.name,z=k(e,Qn),A=v(n.useState(!1),2),P=A[0],I=A[1],T=n.useMemo((function(){return null!=u?u:P}),[u,P]),B=a().usingKeyboard,F=i(d),K=F.darkMode,W=F.theme,q=o({prefix:"checkbox",id:D}),U="".concat(q,"-label"),$=null!=w?w:!!b,G=function(n){C&&C(n),null==u&&I(n.target.checked)};return n.createElement("div",{className:t(Tn,h({},Bn,p),L),style:M},n.createElement(l,{id:U,htmlFor:q,darkMode:K,disabled:p,className:t(Fn,Wn[W],(c={},h(c,qn,p),h(c,Un,p&&K),c))},n.createElement("input",y({},z,{id:q,className:t(In,$n,h({},Gn[W],B)),type:"checkbox",name:S,disabled:p,checked:T,"aria-label":"checkbox","aria-disabled":p,"aria-checked":O?"mixed":T,"aria-labelledby":U,onClick:function(n){N&&N(n),O&&(G(n),n.stopPropagation())},onChange:G})),n.createElement(zn,{theme:W,isChecked:T,indeterminate:O,disabled:p,animate:E,selector:Pn}),g&&n.createElement("span",{className:t(Hn,h({},r(An||(An=x(["\n                font-weight: 400;\n              "]))),!$))},g)),b&&n.createElement(s,{className:t(Jn,h({},Un,p&&K)),darkMode:K,disabled:p},b))}Rn.displayName="Checkbox",Rn.propTypes={darkMode:e.bool,description:e.string,checked:e.bool,label:e.node,disabled:e.bool,indeterminate:e.bool,className:e.string,onChange:e.func,id:e.oneOfType([e.number,e.string]),animate:e.bool};export{Rn as default};
+import n from"react";import e from"prop-types";import{css as r,cx as t}from"@leafygreen-ui/emotion";import{useIdAllocator as o}from"@leafygreen-ui/hooks";import{useDarkMode as a}from"@leafygreen-ui/leafygreen-provider";import{Label as i,Description as l}from"@leafygreen-ui/typography";import{Transition as s}from"react-transition-group";import{usePrefersReducedMotion as c}from"@leafygreen-ui/a11y";import{createUniqueClassName as d,Theme as u}from"@leafygreen-ui/lib";import{palette as m}from"@leafygreen-ui/palette";import{transitionDuration as g,hoverRing as b,focusRing as f}from"@leafygreen-ui/tokens";function p(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function h(){return h=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},h.apply(this,arguments)}function y(n,e){if(null==n)return{};var r,t,o=function(n,e){if(null==n)return{};var r,t,o={},a=Object.keys(n);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||(o[r]=n[r]);return o}(n,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(o[r]=n[r])}return o}function k(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function x(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==r)return;var t,o,a=[],i=!0,l=!1;try{for(r=r.call(n);!(i=(t=r.next()).done)&&(a.push(t.value),!e||a.length!==e);i=!0);}catch(n){l=!0,o=n}finally{try{i||null==r.return||r.return()}finally{if(l)throw o}}return a}(n,e)||function(n,e){if(!n)return;if("string"==typeof n)return v(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 v(n,e)}(n,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r<e;r++)t[r]=n[r];return t}var w,O,j,E,L,N,C,D,M,S,z,A,P,I,T,B,F,W,q,U,$,G,H,J,K,Q,R,V,X,Y,Z,_,nn,en,rn,tn,on,an,ln,sn,cn,dn,un=g.faster,mn=100-100*Math.sqrt(2),gn=d("ripple"),bn=r(w||(w=k(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),fn=r(O||(O=k(["\n  grid-area: check;\n  position: relative;\n  display: flex;\n  z-index: 1;\n  height: ","px;\n  width: ","px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  border: ","px solid;\n  overflow: hidden;\n  background-color: transparent;\n  transition: box-shadow 100ms ease-in-out, background-color 0ms linear,\n    border-color 0ms linear;\n\n  // delay border-color out\n  transition-delay: 0ms, 0ms, ","ms;\n\n  /**\n   * The animated background circle\n   */\n  &:before {\n    content: '';\n    position: absolute;\n    inset: ","%;\n    z-index: 1;\n    border-radius: 100%;\n    transform: scale(0);\n    transform-origin: center center;\n    transition: transform ","ms ease-in-out;\n    transition-delay: ","ms;\n  }\n"])),14,14,2,un,mn,un,un/2),pn=(p(L={},u.Light,r(j||(j=k(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),m.gray.dark2,m.blue.base)),p(L,u.Dark,r(E||(E=k(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),m.gray.base,m.blue.light1)),L),hn=r(N||(N=k(["\n  // Delay background transition in\n  transition-delay: 0ms, ","ms, 0ms;\n\n  &:before {\n    transform: scale(1);\n    // No delay on enter\n    transition-delay: 0ms;\n  }\n"])),un),yn=(p(M={},u.Light,r(C||(C=k(["\n    background-color: ",";\n    border-color: ",";\n  "])),m.blue.base,m.blue.base)),p(M,u.Dark,r(D||(D=k(["\n    background-color: ",";\n    border-color: ",";\n  "])),m.blue.light1,m.blue.light1)),M),kn=(p(A={},u.Light,r(S||(S=k(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),m.gray.light2,m.gray.light3,m.gray.light3)),p(A,u.Dark,r(z||(z=k(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),m.gray.dark2,m.gray.dark3,m.gray.dark3)),A),xn=(p(T={},u.Light,r(P||(P=k(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),m.gray.light2,m.gray.light2)),p(T,u.Dark,r(I||(I=k(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),m.gray.dark2,m.gray.dark2)),T),vn=r(B||(B=k(["\n  grid-area: check;\n  position: relative;\n  top: ","px;\n  height: ","px;\n  width: ","px;\n  z-index: 0;\n  border-radius: 100%;\n  opacity: 1;\n  transform: scale(0);\n  transform-origin: center center;\n  transition: 0ms ease-in-out;\n  transition-property: transform, opacity;\n"])),2,14,14),wn=(p(q={},u.Light,r(F||(F=k(["\n    background-color: ",";\n  "])),m.blue.dark1)),p(q,u.Dark,r(W||(W=k(["\n    background-color: ",";\n  "])),m.blue.light2)),q),On=r(U||(U=k(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*un,-1.7777777777777777*un,2.25),jn=r($||($=k(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),un),En=r(G||(G=k(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),un/8),Ln=r(H||(H=k(["\n  transform: scale(0) rotate(-45deg);\n"]))),Nn={entering:Ln,entered:En,exiting:Ln,exited:Ln,unmounted:Ln},Cn=function(e){var r;return n.createElement("svg",h({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),n.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(r=e.stroke)&&void 0!==r?r:m.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},Dn=function(e){var r;return n.createElement("svg",h({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),n.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(r=e.stroke)&&void 0!==r?r:m.white}))},Mn=(p(J={},u.Light,{default:m.white,disabled:m.gray.light3}),p(J,u.Dark,{default:m.white,disabled:m.gray.dark1}),J);function Sn(e){var r,o,a=e.theme,i=e.isChecked,l=e.indeterminate,d=e.disabled,u=e.animate,m=e.selector,g=c(),b=l?Dn:Cn,f=l||i,h=u&&!l&&!g;return n.createElement(n.Fragment,null,n.createElement("div",{className:t(m,fn,pn[a],(r={},p(r,hn,f),p(r,yn[a],f),p(r,kn[a],d),p(r,xn[a],d&&f),p(r,bn,!h),r))},n.createElement(s,{in:f,timeout:g?0:un,enter:h,exit:h},(function(e){return n.createElement(b,{stroke:d?Mn[a].disabled:Mn[a].default,className:t(jn,Nn[e],p({},bn,!h))})}))),n.createElement("div",{className:t(gn,vn,wn[a],(o={},p(o,On,i&&h),p(o,bn,!h),o))}))}var zn,An=d("check-wrapper"),Pn=d("input"),In=r(K||(K=k(["\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'label label' '. description';\n  gap: 0 8px;\n  position: relative;\n  align-items: center;\n  justify-content: flex-start;\n  z-index: 0;\n"])),14),Tn=r(Q||(Q=k(["\n  cursor: not-allowed;\n"]))),Bn=r(R||(R=k(["\n  grid-area: label;\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'check text';\n  gap: 8px;\n  justify-content: flex-start;\n  align-items: baseline;\n  cursor: pointer;\n"])),14),Fn="\n  &:hover:not(:focus-within)\n    > .".concat(Pn,":not([disabled])\n      + .").concat(An,"\n"),Wn=(p(Y={},u.Light,r(V||(V=k(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Fn,b.light.gray)),p(Y,u.Dark,r(X||(X=k(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Fn,b.dark.gray)),Y),qn=r(Z||(Z=k(["\n  cursor: not-allowed;\n"]))),Un=r(_||(_=k(["\n  color: ",";\n"])),m.gray.base),$n=r(nn||(nn=k(["\n  margin: 0;\n  position: absolute;\n  height: 0;\n  width: 0;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  opacity: 0;\n"]))),Gn=(p(tn={},u.Light,r(en||(en=k(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),An,f.light.default)),p(tn,u.Dark,r(rn||(rn=k(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),An,f.dark.default)),tn),Hn=r(on||(on=k(["\n  align-self: baseline;\n"]))),Jn=r(an||(an=k(["\n  grid-area: description;\n"])));p(cn={},u.Light,r(ln||(ln=k(["\n    color: ",";\n  "])),m.black)),p(cn,u.Dark,r(sn||(sn=k(["\n    color: ",";\n  "])),m.gray.light2)),r(dn||(dn=k(["\n  color: ",";\n"])),m.gray.dark1);var Kn=["darkMode","checked","label","description","disabled","bold","indeterminate","animate","className","onClick","onChange","id","style","name"];function Qn(e){var s,c=e.darkMode,d=e.checked,u=e.label,m=void 0===u?"":u,g=e.description,b=e.disabled,f=void 0!==b&&b,v=e.bold,w=e.indeterminate,O=e.animate,j=void 0===O||O,E=e.className,L=e.onClick,N=e.onChange,C=e.id,D=e.style,M=e.name,S=y(e,Kn),z=x(n.useState(!1),2),A=z[0],P=z[1],I=n.useMemo((function(){return null!=d?d:A}),[d,A]),T=a(c),B=T.darkMode,F=T.theme,W=o({prefix:"checkbox",id:C}),q="".concat(W,"-label"),U=null!=v?v:!!g,$=function(n){N&&N(n),null==d&&P(n.target.checked)};return n.createElement("div",{className:t(In,p({},Tn,f),E),style:D},n.createElement(i,{id:q,htmlFor:W,darkMode:B,disabled:f,className:t(Bn,Wn[F],(s={},p(s,qn,f),p(s,Un,f&&B),s))},n.createElement("input",h({},S,{id:W,className:t(Pn,$n,Gn[F]),type:"checkbox",name:M,disabled:f,checked:I,"aria-label":"checkbox","aria-disabled":f,"aria-checked":w?"mixed":I,"aria-labelledby":q,onClick:function(n){L&&L(n),w&&($(n),n.stopPropagation())},onChange:$})),n.createElement(Sn,{theme:F,isChecked:I,indeterminate:w,disabled:f,animate:j,selector:An}),m&&n.createElement("span",{className:t(Hn,p({},r(zn||(zn=k(["\n                font-weight: 400;\n              "]))),!U))},m)),g&&n.createElement(l,{className:t(Jn,p({},Un,f&&B)),darkMode:B,disabled:f},g))}Qn.displayName="Checkbox",Qn.propTypes={darkMode:e.bool,description:e.string,checked:e.bool,label:e.node,disabled:e.bool,indeterminate:e.bool,className:e.string,onChange:e.func,id:e.oneOfType([e.number,e.string]),animate:e.bool};export{Qn as default};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/typography"),require("react-transition-group"),require("@leafygreen-ui/a11y"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens")):"function"==typeof define&&define.amd?define(["react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/hooks","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/typography","react-transition-group","@leafygreen-ui/a11y","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/tokens"],n):(e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/checkbox"]=n(e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/typography"],e.reactTransitionGroup,e["@leafygreen-ui/a11y"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"])}(this,(function(e,n,t,r,a,o,i,l,s,c,d){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=u(e),g=u(n);function p(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function b(){return b=Object.assign||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},b.apply(this,arguments)}function m(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function y(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function h(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],i=!0,l=!1;try{for(t=t.call(e);!(i=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);i=!0);}catch(e){l=!0,a=e}finally{try{i||null==t.return||t.return()}finally{if(l)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return k(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return k(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function k(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var x,v,w,T,j,O,E,C,N,q,L,D,M,P,S,z,A,R,U,I,K,B,F,W,G,$,H,J,Q,V,X,Y,Z,_,ee,ne,te,re,ae,oe,ie,le,se=14,ce=d.transitionDuration.faster,de=100-100*Math.sqrt(2),ue=s.createUniqueClassName("ripple"),fe=t.css(x||(x=y(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),ge=t.css(v||(v=y(["\n  grid-area: check;\n  position: relative;\n  display: flex;\n  z-index: 1;\n  height: ","px;\n  width: ","px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  border: ","px solid;\n  overflow: hidden;\n  background-color: transparent;\n  transition: box-shadow 100ms ease-in-out, background-color 0ms linear,\n    border-color 0ms linear;\n\n  // delay border-color out\n  transition-delay: 0ms, 0ms, ","ms;\n\n  /**\n   * The animated background circle\n   */\n  &:before {\n    content: '';\n    position: absolute;\n    inset: ","%;\n    z-index: 1;\n    border-radius: 100%;\n    transform: scale(0);\n    transform-origin: center center;\n    transition: transform ","ms ease-in-out;\n    transition-delay: ","ms;\n  }\n"])),se,se,2,ce,de,ce,ce/2),pe=(p(j={},s.Theme.Light,t.css(w||(w=y(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.dark2,c.palette.blue.base)),p(j,s.Theme.Dark,t.css(T||(T=y(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.base,c.palette.blue.light1)),j),be=t.css(O||(O=y(["\n  // Delay background transition in\n  transition-delay: 0ms, ","ms, 0ms;\n\n  &:before {\n    transform: scale(1);\n    // No delay on enter\n    transition-delay: 0ms;\n  }\n"])),ce),me=(p(N={},s.Theme.Light,t.css(E||(E=y(["\n    background-color: ",";\n    border-color: ",";\n  "])),c.palette.blue.base,c.palette.blue.base)),p(N,s.Theme.Dark,t.css(C||(C=y(["\n    background-color: ",";\n    border-color: ",";\n  "])),c.palette.blue.light1,c.palette.blue.light1)),N),ye=(p(D={},s.Theme.Light,t.css(q||(q=y(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.light2,c.palette.gray.light3,c.palette.gray.light3)),p(D,s.Theme.Dark,t.css(L||(L=y(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.dark2,c.palette.gray.dark3,c.palette.gray.dark3)),D),he=(p(S={},s.Theme.Light,t.css(M||(M=y(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.light2,c.palette.gray.light2)),p(S,s.Theme.Dark,t.css(P||(P=y(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.dark2,c.palette.gray.dark2)),S),ke=t.css(z||(z=y(["\n  grid-area: check;\n  position: relative;\n  top: ","px;\n  height: ","px;\n  width: ","px;\n  z-index: 0;\n  border-radius: 100%;\n  opacity: 1;\n  transform: scale(0);\n  transform-origin: center center;\n  transition: 0ms ease-in-out;\n  transition-property: transform, opacity;\n"])),2,se,se),xe=(p(U={},s.Theme.Light,t.css(A||(A=y(["\n    background-color: ",";\n  "])),c.palette.blue.dark1)),p(U,s.Theme.Dark,t.css(R||(R=y(["\n    background-color: ",";\n  "])),c.palette.blue.light2)),U),ve=t.css(I||(I=y(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*ce,-1.7777777777777777*ce,2.25),we=t.css(K||(K=y(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),ce),Te=t.css(B||(B=y(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),ce/8),je=t.css(F||(F=y(["\n  transform: scale(0) rotate(-45deg);\n"]))),Oe={entering:je,entered:Te,exiting:je,exited:je,unmounted:je},Ee=function(e){var n;return f.default.createElement("svg",b({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),f.default.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(n=e.stroke)&&void 0!==n?n:c.palette.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},Ce=function(e){var n;return f.default.createElement("svg",b({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),f.default.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(n=e.stroke)&&void 0!==n?n:c.palette.white}))},Ne=(p(W={},s.Theme.Light,{default:c.palette.white,disabled:c.palette.gray.light3}),p(W,s.Theme.Dark,{default:c.palette.white,disabled:c.palette.gray.dark1}),W);function qe(e){var n,r,o=e.theme,s=e.isChecked,c=e.indeterminate,d=e.disabled,u=e.animate,g=e.selector,b=a.useUsingKeyboardContext().usingKeyboard,m=l.usePrefersReducedMotion(),y=c?Ce:Ee,h=c||s,k=u&&!c&&!m;return f.default.createElement(f.default.Fragment,null,f.default.createElement("div",{className:t.cx(g,ge,pe[o],(n={},p(n,be,h),p(n,me[o],h),p(n,ye[o],d),p(n,he[o],d&&h),p(n,fe,!k),n))},f.default.createElement(i.Transition,{in:h,timeout:m?0:ce,enter:k,exit:k},(function(e){return f.default.createElement(y,{stroke:d?Ne[o].disabled:Ne[o].default,className:t.cx(we,Oe[e],p({},fe,!k))})}))),!b&&f.default.createElement("div",{className:t.cx(ue,ke,xe[o],(r={},p(r,ve,s&&k),p(r,fe,!k),r))}))}var Le,De=s.createUniqueClassName("check-wrapper"),Me=s.createUniqueClassName("input"),Pe=t.css(G||(G=y(["\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'label label' '. description';\n  gap: 0 8px;\n  position: relative;\n  align-items: center;\n  justify-content: flex-start;\n  z-index: 0;\n"])),se),Se=t.css($||($=y(["\n  cursor: not-allowed;\n"]))),ze=t.css(H||(H=y(["\n  grid-area: label;\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'check text';\n  gap: 8px;\n  justify-content: flex-start;\n  align-items: baseline;\n  cursor: pointer;\n"])),se),Ae="\n  &:hover:not(:focus-within)\n    > .".concat(Me,":not([disabled])\n      + .").concat(De,"\n"),Re=(p(V={},s.Theme.Light,t.css(J||(J=y(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Ae,d.hoverRing.light.gray)),p(V,s.Theme.Dark,t.css(Q||(Q=y(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Ae,d.hoverRing.dark.gray)),V),Ue=t.css(X||(X=y(["\n  cursor: not-allowed;\n"]))),Ie=t.css(Y||(Y=y(["\n  color: ",";\n"])),c.palette.gray.base),Ke=t.css(Z||(Z=y(["\n  margin: 0;\n  position: absolute;\n  height: 0;\n  width: 0;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  opacity: 0;\n"]))),Be=(p(ne={},s.Theme.Light,t.css(_||(_=y(["\n    &:focus + ."," {\n      box-shadow: ",";\n    }\n  "])),De,d.focusRing.light.default)),p(ne,s.Theme.Dark,t.css(ee||(ee=y(["\n    &:focus + ."," {\n      box-shadow: ",";\n    }\n  "])),De,d.focusRing.dark.default)),ne),Fe=t.css(te||(te=y(["\n  align-self: baseline;\n"]))),We=t.css(re||(re=y(["\n  grid-area: description;\n"])));p(ie={},s.Theme.Light,t.css(ae||(ae=y(["\n    color: ",";\n  "])),c.palette.black)),p(ie,s.Theme.Dark,t.css(oe||(oe=y(["\n    color: ",";\n  "])),c.palette.gray.light2)),t.css(le||(le=y(["\n  color: ",";\n"])),c.palette.gray.dark1);var Ge=["darkMode","checked","label","description","disabled","bold","indeterminate","animate","className","onClick","onChange","id","style","name"];function $e(e){var n,i=e.darkMode,l=e.checked,s=e.label,c=void 0===s?"":s,d=e.description,u=e.disabled,g=void 0!==u&&u,k=e.bold,x=e.indeterminate,v=e.animate,w=void 0===v||v,T=e.className,j=e.onClick,O=e.onChange,E=e.id,C=e.style,N=e.name,q=m(e,Ge),L=h(f.default.useState(!1),2),D=L[0],M=L[1],P=f.default.useMemo((function(){return null!=l?l:D}),[l,D]),S=a.useUsingKeyboardContext().usingKeyboard,z=a.useDarkMode(i),A=z.darkMode,R=z.theme,U=r.useIdAllocator({prefix:"checkbox",id:E}),I="".concat(U,"-label"),K=null!=k?k:!!d,B=function(e){O&&O(e),null==l&&M(e.target.checked)};return f.default.createElement("div",{className:t.cx(Pe,p({},Se,g),T),style:C},f.default.createElement(o.Label,{id:I,htmlFor:U,darkMode:A,disabled:g,className:t.cx(ze,Re[R],(n={},p(n,Ue,g),p(n,Ie,g&&A),n))},f.default.createElement("input",b({},q,{id:U,className:t.cx(Me,Ke,p({},Be[R],S)),type:"checkbox",name:N,disabled:g,checked:P,"aria-label":"checkbox","aria-disabled":g,"aria-checked":x?"mixed":P,"aria-labelledby":I,onClick:function(e){j&&j(e),x&&(B(e),e.stopPropagation())},onChange:B})),f.default.createElement(qe,{theme:R,isChecked:P,indeterminate:x,disabled:g,animate:w,selector:De}),c&&f.default.createElement("span",{className:t.cx(Fe,p({},t.css(Le||(Le=y(["\n                font-weight: 400;\n              "]))),!K))},c)),d&&f.default.createElement(o.Description,{className:t.cx(We,p({},Ie,g&&A)),darkMode:A,disabled:g},d))}return $e.displayName="Checkbox",$e.propTypes={darkMode:g.default.bool,description:g.default.string,checked:g.default.bool,label:g.default.node,disabled:g.default.bool,indeterminate:g.default.bool,className:g.default.string,onChange:g.default.func,id:g.default.oneOfType([g.default.number,g.default.string]),animate:g.default.bool},$e}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/typography"),require("react-transition-group"),require("@leafygreen-ui/a11y"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens")):"function"==typeof define&&define.amd?define(["react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/hooks","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/typography","react-transition-group","@leafygreen-ui/a11y","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/tokens"],n):(e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/checkbox"]=n(e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/typography"],e.reactTransitionGroup,e["@leafygreen-ui/a11y"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"])}(this,(function(e,n,t,r,a,o,i,l,s,c,d){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=u(e),g=u(n);function p(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function m(){return m=Object.assign||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},m.apply(this,arguments)}function b(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function h(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function y(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],i=!0,l=!1;try{for(t=t.call(e);!(i=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);i=!0);}catch(e){l=!0,a=e}finally{try{i||null==t.return||t.return()}finally{if(l)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return k(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return k(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function k(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var x,v,w,T,j,O,E,N,q,L,C,D,M,P,S,z,A,R,I,U,B,F,W,G,$,H,J,K,Q,V,X,Y,Z,_,ee,ne,te,re,ae,oe,ie,le,se=14,ce=d.transitionDuration.faster,de=100-100*Math.sqrt(2),ue=s.createUniqueClassName("ripple"),fe=t.css(x||(x=h(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),ge=t.css(v||(v=h(["\n  grid-area: check;\n  position: relative;\n  display: flex;\n  z-index: 1;\n  height: ","px;\n  width: ","px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  border: ","px solid;\n  overflow: hidden;\n  background-color: transparent;\n  transition: box-shadow 100ms ease-in-out, background-color 0ms linear,\n    border-color 0ms linear;\n\n  // delay border-color out\n  transition-delay: 0ms, 0ms, ","ms;\n\n  /**\n   * The animated background circle\n   */\n  &:before {\n    content: '';\n    position: absolute;\n    inset: ","%;\n    z-index: 1;\n    border-radius: 100%;\n    transform: scale(0);\n    transform-origin: center center;\n    transition: transform ","ms ease-in-out;\n    transition-delay: ","ms;\n  }\n"])),se,se,2,ce,de,ce,ce/2),pe=(p(j={},s.Theme.Light,t.css(w||(w=h(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.dark2,c.palette.blue.base)),p(j,s.Theme.Dark,t.css(T||(T=h(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.base,c.palette.blue.light1)),j),me=t.css(O||(O=h(["\n  // Delay background transition in\n  transition-delay: 0ms, ","ms, 0ms;\n\n  &:before {\n    transform: scale(1);\n    // No delay on enter\n    transition-delay: 0ms;\n  }\n"])),ce),be=(p(q={},s.Theme.Light,t.css(E||(E=h(["\n    background-color: ",";\n    border-color: ",";\n  "])),c.palette.blue.base,c.palette.blue.base)),p(q,s.Theme.Dark,t.css(N||(N=h(["\n    background-color: ",";\n    border-color: ",";\n  "])),c.palette.blue.light1,c.palette.blue.light1)),q),he=(p(D={},s.Theme.Light,t.css(L||(L=h(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.light2,c.palette.gray.light3,c.palette.gray.light3)),p(D,s.Theme.Dark,t.css(C||(C=h(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.dark2,c.palette.gray.dark3,c.palette.gray.dark3)),D),ye=(p(S={},s.Theme.Light,t.css(M||(M=h(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.light2,c.palette.gray.light2)),p(S,s.Theme.Dark,t.css(P||(P=h(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.palette.gray.dark2,c.palette.gray.dark2)),S),ke=t.css(z||(z=h(["\n  grid-area: check;\n  position: relative;\n  top: ","px;\n  height: ","px;\n  width: ","px;\n  z-index: 0;\n  border-radius: 100%;\n  opacity: 1;\n  transform: scale(0);\n  transform-origin: center center;\n  transition: 0ms ease-in-out;\n  transition-property: transform, opacity;\n"])),2,se,se),xe=(p(I={},s.Theme.Light,t.css(A||(A=h(["\n    background-color: ",";\n  "])),c.palette.blue.dark1)),p(I,s.Theme.Dark,t.css(R||(R=h(["\n    background-color: ",";\n  "])),c.palette.blue.light2)),I),ve=t.css(U||(U=h(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*ce,-1.7777777777777777*ce,2.25),we=t.css(B||(B=h(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),ce),Te=t.css(F||(F=h(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),ce/8),je=t.css(W||(W=h(["\n  transform: scale(0) rotate(-45deg);\n"]))),Oe={entering:je,entered:Te,exiting:je,exited:je,unmounted:je},Ee=function(e){var n;return f.default.createElement("svg",m({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),f.default.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(n=e.stroke)&&void 0!==n?n:c.palette.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},Ne=function(e){var n;return f.default.createElement("svg",m({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),f.default.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(n=e.stroke)&&void 0!==n?n:c.palette.white}))},qe=(p(G={},s.Theme.Light,{default:c.palette.white,disabled:c.palette.gray.light3}),p(G,s.Theme.Dark,{default:c.palette.white,disabled:c.palette.gray.dark1}),G);function Le(e){var n,r,a=e.theme,o=e.isChecked,s=e.indeterminate,c=e.disabled,d=e.animate,u=e.selector,g=l.usePrefersReducedMotion(),m=s?Ne:Ee,b=s||o,h=d&&!s&&!g;return f.default.createElement(f.default.Fragment,null,f.default.createElement("div",{className:t.cx(u,ge,pe[a],(n={},p(n,me,b),p(n,be[a],b),p(n,he[a],c),p(n,ye[a],c&&b),p(n,fe,!h),n))},f.default.createElement(i.Transition,{in:b,timeout:g?0:ce,enter:h,exit:h},(function(e){return f.default.createElement(m,{stroke:c?qe[a].disabled:qe[a].default,className:t.cx(we,Oe[e],p({},fe,!h))})}))),f.default.createElement("div",{className:t.cx(ue,ke,xe[a],(r={},p(r,ve,o&&h),p(r,fe,!h),r))}))}var Ce,De=s.createUniqueClassName("check-wrapper"),Me=s.createUniqueClassName("input"),Pe=t.css($||($=h(["\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'label label' '. description';\n  gap: 0 8px;\n  position: relative;\n  align-items: center;\n  justify-content: flex-start;\n  z-index: 0;\n"])),se),Se=t.css(H||(H=h(["\n  cursor: not-allowed;\n"]))),ze=t.css(J||(J=h(["\n  grid-area: label;\n  display: grid;\n  grid-template-columns: ","px auto;\n  grid-template-areas: 'check text';\n  gap: 8px;\n  justify-content: flex-start;\n  align-items: baseline;\n  cursor: pointer;\n"])),se),Ae="\n  &:hover:not(:focus-within)\n    > .".concat(Me,":not([disabled])\n      + .").concat(De,"\n"),Re=(p(V={},s.Theme.Light,t.css(K||(K=h(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Ae,d.hoverRing.light.gray)),p(V,s.Theme.Dark,t.css(Q||(Q=h(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Ae,d.hoverRing.dark.gray)),V),Ie=t.css(X||(X=h(["\n  cursor: not-allowed;\n"]))),Ue=t.css(Y||(Y=h(["\n  color: ",";\n"])),c.palette.gray.base),Be=t.css(Z||(Z=h(["\n  margin: 0;\n  position: absolute;\n  height: 0;\n  width: 0;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  opacity: 0;\n"]))),Fe=(p(ne={},s.Theme.Light,t.css(_||(_=h(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),De,d.focusRing.light.default)),p(ne,s.Theme.Dark,t.css(ee||(ee=h(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),De,d.focusRing.dark.default)),ne),We=t.css(te||(te=h(["\n  align-self: baseline;\n"]))),Ge=t.css(re||(re=h(["\n  grid-area: description;\n"])));p(ie={},s.Theme.Light,t.css(ae||(ae=h(["\n    color: ",";\n  "])),c.palette.black)),p(ie,s.Theme.Dark,t.css(oe||(oe=h(["\n    color: ",";\n  "])),c.palette.gray.light2)),t.css(le||(le=h(["\n  color: ",";\n"])),c.palette.gray.dark1);var $e=["darkMode","checked","label","description","disabled","bold","indeterminate","animate","className","onClick","onChange","id","style","name"];function He(e){var n,i=e.darkMode,l=e.checked,s=e.label,c=void 0===s?"":s,d=e.description,u=e.disabled,g=void 0!==u&&u,k=e.bold,x=e.indeterminate,v=e.animate,w=void 0===v||v,T=e.className,j=e.onClick,O=e.onChange,E=e.id,N=e.style,q=e.name,L=b(e,$e),C=y(f.default.useState(!1),2),D=C[0],M=C[1],P=f.default.useMemo((function(){return null!=l?l:D}),[l,D]),S=a.useDarkMode(i),z=S.darkMode,A=S.theme,R=r.useIdAllocator({prefix:"checkbox",id:E}),I="".concat(R,"-label"),U=null!=k?k:!!d,B=function(e){O&&O(e),null==l&&M(e.target.checked)};return f.default.createElement("div",{className:t.cx(Pe,p({},Se,g),T),style:N},f.default.createElement(o.Label,{id:I,htmlFor:R,darkMode:z,disabled:g,className:t.cx(ze,Re[A],(n={},p(n,Ie,g),p(n,Ue,g&&z),n))},f.default.createElement("input",m({},L,{id:R,className:t.cx(Me,Be,Fe[A]),type:"checkbox",name:q,disabled:g,checked:P,"aria-label":"checkbox","aria-disabled":g,"aria-checked":x?"mixed":P,"aria-labelledby":I,onClick:function(e){j&&j(e),x&&(B(e),e.stopPropagation())},onChange:B})),f.default.createElement(Le,{theme:A,isChecked:P,indeterminate:x,disabled:g,animate:w,selector:De}),c&&f.default.createElement("span",{className:t.cx(We,p({},t.css(Ce||(Ce=h(["\n                font-weight: 400;\n              "]))),!U))},c)),d&&f.default.createElement(o.Description,{className:t.cx(Ge,p({},Ue,g&&z)),darkMode:z,disabled:g},d))}return He.displayName="Checkbox",He.propTypes={darkMode:g.default.bool,description:g.default.string,checked:g.default.bool,label:g.default.node,disabled:g.default.bool,indeterminate:g.default.bool,className:g.default.string,onChange:g.default.func,id:g.default.oneOfType([g.default.number,g.default.string]),animate:g.default.bool},He}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/checkbox",
-  "version": "12.0.4",
+  "version": "12.0.5",
   "description": "LeafyGreen UI Kit Checkbox",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/Checkbox.style.ts

@@ -78,3 +78,3 @@ import { css } from '@leafygreen-ui/emotion';
   [Theme.Light]: css`
-    &:focus + .${checkWrapperClassName} {
+    &:focus-visible + .${checkWrapperClassName} {
       box-shadow: ${focusRing.light.default};
@@ -84,3 +84,3 @@ }
   [Theme.Dark]: css`
-    &:focus + .${checkWrapperClassName} {
+    &:focus-visible + .${checkWrapperClassName} {
       box-shadow: ${focusRing.dark.default};
@@ -87,0 +87,0 @@ }

No alert changes

Worsened metrics

Total package byte prevSize

260526

-0.46%

Lines of code

1456

-0.75%

No dependency changes