@leafygreen-ui/checkbox - npm Package Compare versions

Comparing version 13.0.0 to 13.1.0

CHANGELOG.md

 # @leafygreen-ui/checkbox
 
+## 13.1.0
+
+### Minor Changes
+
+- 1ec45a7e: - Exports `getTestUtils`, a util to reliably interact with `LG Checkbox` in a product test suite. For more details, check out the [README](https://github.com/mongodb/leafygreen-ui/tree/main/packages/checkbox#test-harnesses)
+  - Exports the constant, `LGIDS_CHECKBOX`, which stores `data-lgid` values.
+  - Leverages the `'aria-label'` prop when passed
+
+### Patch Changes
+
+- Updated dependencies [dfd6972c]
+  - @leafygreen-ui/typography@19.0.0
+
 ## 13.0.0
@@ -4,0 +17,0 @@

dist/Checkbox/Checkbox.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
  */
-declare function Checkbox({ animate, baseFontSize: baseFontSizeProp, bold: boldProp, checked: checkedProp, className, darkMode: darkModeProp, description, disabled, id: idProp, indeterminate: indeterminateProp, label, onClick: onClickProp, onChange: onChangeProp, name, style, ...rest }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ animate, 'aria-label': ariaLabel, baseFontSize: baseFontSizeProp, bold: boldProp, checked: checkedProp, className, darkMode: darkModeProp, 'data-lgid': dataLgId, description, disabled, id: idProp, indeterminate: indeterminateProp, label, onClick: onClickProp, onChange: onChangeProp, name, style, ...rest }: CheckboxProps): React.JSX.Element;
 declare namespace Checkbox {
@@ -12,0 +12,0 @@ var displayName: string;

dist/Checkbox/Checkbox.types.d.ts

 /// <reference types="react" />
-import { createUniqueClassName, Either, HTMLElementProps, Theme } from '@leafygreen-ui/lib';
+import { createUniqueClassName, Either, HTMLElementProps, LgIdProps, Theme } from '@leafygreen-ui/lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
@@ -56,3 +56,3 @@ interface InternalCheckboxProps extends HTMLElementProps<'input'> {
 }
-export type CheckboxProps = Either<InternalCheckboxProps, 'label' | 'aria-label' | 'aria-labelledby'>;
+export type CheckboxProps = Either<InternalCheckboxProps, 'label' | 'aria-label' | 'aria-labelledby'> & LgIdProps;
 /**
@@ -59,0 +59,0 @@ * Props for the internal Check SVG

dist/constants.d.ts

@@ -8,2 +8,5 @@ export declare const checkBoxSize = 14;
 export declare const rippleTransitionDelay: number;
+export declare const LGIDS_CHECKBOX: {
+    readonly root: "lg-checkbox";
+};
 //# sourceMappingURL=constants.d.ts.map

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useRef as n}from"react";import r from"prop-types";import{css as t,cx as o}from"@leafygreen-ui/emotion";import{useIdAllocator as a}from"@leafygreen-ui/hooks";import i,{useDarkMode as l}from"@leafygreen-ui/leafygreen-provider";import{transitionDuration as s,hoverRing as c,focusRing as d,fontWeights as u}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as m,Label as b,Description as g}from"@leafygreen-ui/typography";import{Transition as f}from"react-transition-group";import{usePrefersReducedMotion as p}from"@leafygreen-ui/a11y";import{createUniqueClassName as h,Theme as y}from"@leafygreen-ui/lib";import{palette as k}from"@leafygreen-ui/palette";function v(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function x(){return x=Object.assign?Object.assign.bind():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},x.apply(this,arguments)}function w(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function j(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function O(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,a,i,l=[],s=!0,c=!1;try{if(a=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;s=!1}else for(;!(s=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);s=!0);}catch(e){c=!0,o=e}finally{try{if(!s&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return E(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return E(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 E(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var L,N,S,C,z,D,M,P,A,F,T,I,B,W,q,R,U,$,G,H,J,K,Q,V,X,Y,Z,_,ee,ne,re,te,oe,ae,ie,le,se,ce,de,ue,me=14,be=s.faster,ge=100-100*Math.sqrt(2),fe=h("ripple"),pe=t(L||(L=j(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),he=t(N||(N=j(["\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"])),me,me,2,be,ge,be,be/2),ye=(v(z={},y.Light,t(S||(S=j(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),k.gray.dark2,k.blue.base)),v(z,y.Dark,t(C||(C=j(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),k.gray.base,k.blue.light1)),z),ke=t(D||(D=j(["\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"])),be),ve=(v(A={},y.Light,t(M||(M=j(["\n    background-color: ",";\n    border-color: ",";\n  "])),k.blue.base,k.blue.base)),v(A,y.Dark,t(P||(P=j(["\n    background-color: ",";\n    border-color: ",";\n  "])),k.blue.light1,k.blue.light1)),A),xe=(v(I={},y.Light,t(F||(F=j(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),k.gray.light2,k.gray.light3,k.gray.light3)),v(I,y.Dark,t(T||(T=j(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),k.gray.dark2,k.gray.dark3,k.gray.dark3)),I),we=(v(q={},y.Light,t(B||(B=j(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),k.gray.light2,k.gray.light2)),v(q,y.Dark,t(W||(W=j(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),k.gray.dark2,k.gray.dark2)),q),je=t(R||(R=j(["\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,me,me),Oe=(v(G={},y.Light,t(U||(U=j(["\n    background-color: ",";\n  "])),k.blue.dark1)),v(G,y.Dark,t($||($=j(["\n    background-color: ",";\n  "])),k.blue.light2)),G),Ee=t(H||(H=j(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*be,-1.7777777777777777*be,2.25),Le=t(J||(J=j(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),be),Ne=t(K||(K=j(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),be/8),Se=t(Q||(Q=j(["\n  transform: scale(0) rotate(-45deg);\n"]))),Ce={entering:Se,entered:Ne,exiting:Se,exited:Se,unmounted:Se},ze=function(n){var r;return e.createElement("svg",x({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(r=n.stroke)&&void 0!==r?r:k.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},De=function(n){var r;return e.createElement("svg",x({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(r=n.stroke)&&void 0!==r?r:k.white}))},Me=(v(V={},y.Light,{default:k.white,disabled:k.gray.light3}),v(V,y.Dark,{default:k.white,disabled:k.gray.dark1}),V);function Pe(r){var t,a,i=r.theme,l=r.isChecked,s=r.indeterminate,c=r.disabled,d=r.animate,u=r.selector,m=p(),b=s?De:ze,g=s||l,h=d&&!s&&!m,y=n(null);return e.createElement(e.Fragment,null,e.createElement("div",{className:o(u,he,ye[i],(t={},v(t,ke,g),v(t,ve[i],g),v(t,xe[i],c),v(t,we[i],c&&g),v(t,pe,!h),t))},e.createElement(f,{in:g,timeout:m?0:be,enter:h,exit:h,nodeRef:y},(function(n){return e.createElement(b,{stroke:c?Me[i].disabled:Me[i].default,className:o(Le,Ce[n],v({},pe,!h))})}))),e.createElement("div",{className:o(fe,je,Oe[i],(a={},v(a,Ee,l&&h),v(a,pe,!h),a))}))}var Ae,Fe=h("check-wrapper"),Te=h("input"),Ie=t(X||(X=j(["\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"])),me),Be=t(Y||(Y=j(["\n  cursor: not-allowed;\n"]))),We=t(Z||(Z=j(["\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"])),me),qe="\n  &:hover:not(:focus-within)\n    > .".concat(Te,":not([disabled])\n      + .").concat(Fe,"\n"),Re=(v(ne={},y.Light,t(_||(_=j(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),qe,c.light.gray)),v(ne,y.Dark,t(ee||(ee=j(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),qe,c.dark.gray)),ne),Ue=t(re||(re=j(["\n  cursor: not-allowed;\n"]))),$e=t(te||(te=j(["\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"]))),Ge=(v(ie={},y.Light,t(oe||(oe=j(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Fe,d.light.default)),v(ie,y.Dark,t(ae||(ae=j(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Fe,d.dark.default)),ie),He=t(le||(le=j(["\n  align-self: baseline;\n"]))),Je=t(se||(se=j(["\n  grid-area: description;\n"])));v(ue={},y.Light,t(ce||(ce=j(["\n    color: ",";\n  "])),k.black)),v(ue,y.Dark,t(de||(de=j(["\n    color: ",";\n  "])),k.gray.light2));var Ke=["animate","baseFontSize","bold","checked","className","darkMode","description","disabled","id","indeterminate","label","onClick","onChange","name","style"];function Qe(n){var r=n.animate,s=void 0===r||r,c=n.baseFontSize,d=n.bold,f=n.checked,p=n.className,h=n.darkMode,y=n.description,k=n.disabled,E=void 0!==k&&k,L=n.id,N=n.indeterminate,S=n.label,C=void 0===S?"":S,z=n.onClick,D=n.onChange,M=n.name,P=n.style,A=w(n,Ke),F=l(h),T=F.darkMode,I=F.theme,B=m(c),W=O(e.useState(!1),2),q=W[0],R=W[1],U=e.useMemo((function(){return null!=f?f:q}),[f,q]),$=a({prefix:"checkbox",id:L}),G="".concat($,"-label"),H=null!=d?d:!!y,J=function(e){D&&D(e),null==f&&R(e.target.checked)};return e.createElement(i,{baseFontSize:16===B?B:14,darkMode:T},e.createElement("div",{className:o(Ie,v({},Be,E),p),style:P},e.createElement(b,{id:G,htmlFor:$,disabled:E,className:o(We,Re[I],v({},Ue,E))},e.createElement("input",x({},A,{id:$,className:o(Te,$e,Ge[I]),type:"checkbox",name:M,checked:U,"aria-label":"checkbox","aria-disabled":E,"aria-checked":N?"mixed":U,"aria-labelledby":G,onClick:function(e){z&&z(e),N&&(J(e),e.stopPropagation())},onChange:J})),e.createElement(Pe,{theme:I,isChecked:U,indeterminate:N,disabled:E,animate:s,selector:Fe}),C&&e.createElement("span",{className:o(He,v({},t(Ae||(Ae=j(["\n                  font-weight: ",";\n                "])),u.regular),!H))},C)),y&&e.createElement(g,{className:Je,disabled:E},y)))}Qe.displayName="Checkbox",Qe.propTypes={darkMode:r.bool,description:r.string,checked:r.bool,label:r.node,disabled:r.bool,indeterminate:r.bool,className:r.string,onChange:r.func,id:r.oneOfType([r.number,r.string]),animate:r.bool};export{Qe as default};
+import e,{useRef as n}from"react";import r from"prop-types";import{css as t,cx as o}from"@leafygreen-ui/emotion";import{useIdAllocator as a}from"@leafygreen-ui/hooks";import i,{useDarkMode as l}from"@leafygreen-ui/leafygreen-provider";import{transitionDuration as c,hoverRing as s,focusRing as d,fontWeights as u}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as b,Label as m,Description as g,LGIDS_TYPOGRAPHY as f}from"@leafygreen-ui/typography";import{Transition as p}from"react-transition-group";import{usePrefersReducedMotion as h}from"@leafygreen-ui/a11y";import{createUniqueClassName as y,Theme as k}from"@leafygreen-ui/lib";import{palette as v}from"@leafygreen-ui/palette";import{getByLgId as x,queryBySelector as w}from"@lg-tools/test-harnesses";function j(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}function O(e,n,r){return(n=j(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function E(){return E=Object.assign?Object.assign.bind():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},E.apply(this,arguments)}function L(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function N(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function S(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,a,i,l=[],c=!0,s=!1;try{if(a=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){s=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw o}}return l}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return D(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return D(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 D(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var C,z,M,P,I,A,F,T,B,W,q,R,U,V,$,G,H,J,K,Q,X,Y,Z,_,ee,ne,re,te,oe,ae,ie,le=14,ce=c.faster,se=100-100*Math.sqrt(2),de={root:"lg-checkbox"},ue=y("ripple"),be=t(C||(C=N(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),me=t(z||(z=N(["\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"])),le,le,2,ce,se,ce,ce/2),ge=O(O({},k.Light,t(M||(M=N(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),v.gray.dark2,v.blue.base)),k.Dark,t(P||(P=N(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),v.gray.base,v.blue.light1)),fe=t(I||(I=N(["\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),pe=O(O({},k.Light,t(A||(A=N(["\n    background-color: ",";\n    border-color: ",";\n  "])),v.blue.base,v.blue.base)),k.Dark,t(F||(F=N(["\n    background-color: ",";\n    border-color: ",";\n  "])),v.blue.light1,v.blue.light1)),he=O(O({},k.Light,t(T||(T=N(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),v.gray.light2,v.gray.light3,v.gray.light3)),k.Dark,t(B||(B=N(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),v.gray.dark2,v.gray.dark3,v.gray.dark3)),ye=O(O({},k.Light,t(W||(W=N(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),v.gray.light2,v.gray.light2)),k.Dark,t(q||(q=N(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),v.gray.dark2,v.gray.dark2)),ke=t(R||(R=N(["\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,le,le),ve=O(O({},k.Light,t(U||(U=N(["\n    background-color: ",";\n  "])),v.blue.dark1)),k.Dark,t(V||(V=N(["\n    background-color: ",";\n  "])),v.blue.light2)),xe=t($||($=N(["\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(G||(G=N(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),ce),je=t(H||(H=N(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),ce/8),Oe=t(J||(J=N(["\n  transform: scale(0) rotate(-45deg);\n"]))),Ee={entering:Oe,entered:je,exiting:Oe,exited:Oe,unmounted:Oe},Le=function(n){var r;return e.createElement("svg",E({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(r=n.stroke)&&void 0!==r?r:v.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},Ne=function(n){var r;return e.createElement("svg",E({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(r=n.stroke)&&void 0!==r?r:v.white}))},Se=O(O({},k.Light,{default:v.white,disabled:v.gray.light3}),k.Dark,{default:v.white,disabled:v.gray.dark1});function De(r){var t=r.theme,a=r.isChecked,i=r.indeterminate,l=r.disabled,c=r.animate,s=r.selector,d=h(),u=i?Ne:Le,b=i||a,m=c&&!i&&!d,g=n(null);return e.createElement(e.Fragment,null,e.createElement("div",{className:o(s,me,ge[t],O(O(O(O(O({},fe,b),pe[t],b),he[t],l),ye[t],l&&b),be,!m))},e.createElement(p,{in:b,timeout:d?0:ce,enter:m,exit:m,nodeRef:g},(function(n){return e.createElement(u,{stroke:l?Se[t].disabled:Se[t].default,className:o(we,Ee[n],O({},be,!m))})}))),e.createElement("div",{className:o(ue,ke,ve[t],O(O({},xe,a&&m),be,!m))}))}var Ce,ze=y("check-wrapper"),Me=y("input"),Pe=t(K||(K=N(["\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"])),le),Ie=t(Q||(Q=N(["\n  cursor: not-allowed;\n"]))),Ae=t(X||(X=N(["\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"])),le),Fe="\n  &:hover:not(:focus-within)\n    > .".concat(Me,":not([disabled])\n      + .").concat(ze,"\n"),Te=O(O({},k.Light,t(Y||(Y=N(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Fe,s.light.gray)),k.Dark,t(Z||(Z=N(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Fe,s.dark.gray)),Be=t(_||(_=N(["\n  cursor: not-allowed;\n"]))),We=t(ee||(ee=N(["\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"]))),qe=O(O({},k.Light,t(ne||(ne=N(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),ze,d.light.default)),k.Dark,t(re||(re=N(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),ze,d.dark.default)),Re=t(te||(te=N(["\n  align-self: baseline;\n"]))),Ue=t(oe||(oe=N(["\n  grid-area: description;\n"])));O(O({},k.Light,t(ae||(ae=N(["\n    color: ",";\n  "])),v.black)),k.Dark,t(ie||(ie=N(["\n    color: ",";\n  "])),v.gray.light2));var Ve=["animate","aria-label","baseFontSize","bold","checked","className","darkMode","data-lgid","description","disabled","id","indeterminate","label","onClick","onChange","name","style"];function $e(n){var r=n.animate,c=void 0===r||r,s=n["aria-label"],d=void 0===s?"checkbox":s,f=n.baseFontSize,p=n.bold,h=n.checked,y=n.className,k=n.darkMode,v=n["data-lgid"],x=void 0===v?de.root:v,w=n.description,j=n.disabled,D=void 0!==j&&j,C=n.id,z=n.indeterminate,M=n.label,P=void 0===M?"":M,I=n.onClick,A=n.onChange,F=n.name,T=n.style,B=L(n,Ve),W=l(k),q=W.darkMode,R=W.theme,U=b(f),V=S(e.useState(!1),2),$=V[0],G=V[1],H=e.useMemo((function(){return null!=h?h:$}),[h,$]),J=a({prefix:"checkbox",id:C}),K="".concat(J,"-label"),Q=null!=p?p:!!w,X=function(e){A&&A(e),null==h&&G(e.target.checked)};return e.createElement(i,{baseFontSize:16===U?U:14,darkMode:q},e.createElement("div",{className:o(Pe,O({},Ie,D),y),"data-lgid":x,style:T},e.createElement(m,{id:K,htmlFor:J,disabled:D,className:o(Ae,Te[R],O({},Be,D))},e.createElement("input",E({},B,{id:J,className:o(Me,We,qe[R]),type:"checkbox",name:F,checked:H,"aria-label":d,"aria-disabled":D,"aria-checked":z?"mixed":H,"aria-labelledby":K,onClick:function(e){I&&I(e),z&&(X(e),e.stopPropagation())},onChange:X})),e.createElement(De,{theme:R,isChecked:H,indeterminate:z,disabled:D,animate:c,selector:ze}),P&&e.createElement("span",{className:o(Re,O({},t(Ce||(Ce=N(["\n                  font-weight: ",";\n                "])),u.regular),!Q))},P)),w&&e.createElement(g,{className:Ue,disabled:D},w)))}$e.displayName="Checkbox",$e.propTypes={darkMode:r.bool,description:r.string,checked:r.bool,label:r.node,disabled:r.bool,indeterminate:r.bool,className:r.string,onChange:r.func,id:r.oneOfType([r.number,r.string]),animate:r.bool};var Ge=function(){var e=x(arguments.length>0&&void 0!==arguments[0]?arguments[0]:de.root),n=w(e,"[data-lgid=".concat(f.label,"]")),r=w(e,"[data-lgid=".concat(f.description,"]")),t=w(e,'input[type="checkbox"]');return{getLabel:function(){return n},getDescription:function(){return r},getInput:function(){return t},isDisabled:function(){return!!w(e,'[aria-disabled="true"]')},isIndeterminate:function(){return!!w(e,'[aria-checked="mixed"]')},getInputValue:function(){return t.checked}}};export{de as LGIDS_CHECKBOX,$e as default,Ge as getTestUtils};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

 export { type CheckboxProps, default } from './Checkbox';
+export { LGIDS_CHECKBOX } from './constants';
+export { getTestUtils } from './utils';
 //# sourceMappingURL=index.d.ts.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/tokens"),require("@leafygreen-ui/typography"),require("react-transition-group"),require("@leafygreen-ui/a11y"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/hooks","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","react-transition-group","@leafygreen-ui/a11y","@leafygreen-ui/lib","@leafygreen-ui/palette"],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/tokens"],e["@leafygreen-ui/typography"],e["react-transition-group"],e["@leafygreen-ui/a11y"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,n,t,r,a,o,i,l,s,c,u){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=d(e),g=d(n),p=d(a);function b(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(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?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},m.apply(this,arguments)}function h(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 k(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){var r,a,o,i,l=[],s=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;s=!1}else for(;!(s=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return v(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 v(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 v(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,w,T,j,O,E,N,q,L,S,C,D,z,M,P,R,A,F,I,U,B,W,$,G,H,J,K,Q,V,X,Y,Z,_,ee,ne,te,re,ae,oe,ie,le=14,se=o.transitionDuration.faster,ce=100-100*Math.sqrt(2),ue=c.createUniqueClassName("ripple"),de=t.css(x||(x=y(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),fe=t.css(w||(w=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"])),le,le,2,se,ce,se,se/2),ge=(b(O={},c.Theme.Light,t.css(T||(T=y(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),u.palette.gray.dark2,u.palette.blue.base)),b(O,c.Theme.Dark,t.css(j||(j=y(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),u.palette.gray.base,u.palette.blue.light1)),O),pe=t.css(E||(E=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"])),se),be=(b(L={},c.Theme.Light,t.css(N||(N=y(["\n    background-color: ",";\n    border-color: ",";\n  "])),u.palette.blue.base,u.palette.blue.base)),b(L,c.Theme.Dark,t.css(q||(q=y(["\n    background-color: ",";\n    border-color: ",";\n  "])),u.palette.blue.light1,u.palette.blue.light1)),L),me=(b(D={},c.Theme.Light,t.css(S||(S=y(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),u.palette.gray.light2,u.palette.gray.light3,u.palette.gray.light3)),b(D,c.Theme.Dark,t.css(C||(C=y(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),u.palette.gray.dark2,u.palette.gray.dark3,u.palette.gray.dark3)),D),he=(b(P={},c.Theme.Light,t.css(z||(z=y(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),u.palette.gray.light2,u.palette.gray.light2)),b(P,c.Theme.Dark,t.css(M||(M=y(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),u.palette.gray.dark2,u.palette.gray.dark2)),P),ye=t.css(R||(R=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,le,le),ke=(b(I={},c.Theme.Light,t.css(A||(A=y(["\n    background-color: ",";\n  "])),u.palette.blue.dark1)),b(I,c.Theme.Dark,t.css(F||(F=y(["\n    background-color: ",";\n  "])),u.palette.blue.light2)),I),ve=t.css(U||(U=y(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*se,-1.7777777777777777*se,2.25),xe=t.css(B||(B=y(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),se),we=t.css(W||(W=y(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),se/8),Te=t.css($||($=y(["\n  transform: scale(0) rotate(-45deg);\n"]))),je={entering:Te,entered:we,exiting:Te,exited:Te,unmounted:Te},Oe=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:u.palette.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},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("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(n=e.stroke)&&void 0!==n?n:u.palette.white}))},Ne=(b(G={},c.Theme.Light,{default:u.palette.white,disabled:u.palette.gray.light3}),b(G,c.Theme.Dark,{default:u.palette.white,disabled:u.palette.gray.dark1}),G);function qe(n){var r,a,o=n.theme,i=n.isChecked,c=n.indeterminate,u=n.disabled,d=n.animate,g=n.selector,p=s.usePrefersReducedMotion(),m=c?Ee:Oe,h=c||i,y=d&&!c&&!p,k=e.useRef(null);return f.default.createElement(f.default.Fragment,null,f.default.createElement("div",{className:t.cx(g,fe,ge[o],(r={},b(r,pe,h),b(r,be[o],h),b(r,me[o],u),b(r,he[o],u&&h),b(r,de,!y),r))},f.default.createElement(l.Transition,{in:h,timeout:p?0:se,enter:y,exit:y,nodeRef:k},(function(e){return f.default.createElement(m,{stroke:u?Ne[o].disabled:Ne[o].default,className:t.cx(xe,je[e],b({},de,!y))})}))),f.default.createElement("div",{className:t.cx(ue,ye,ke[o],(a={},b(a,ve,i&&y),b(a,de,!y),a))}))}var Le,Se=c.createUniqueClassName("check-wrapper"),Ce=c.createUniqueClassName("input"),De=t.css(H||(H=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"])),le),ze=t.css(J||(J=y(["\n  cursor: not-allowed;\n"]))),Me=t.css(K||(K=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"])),le),Pe="\n  &:hover:not(:focus-within)\n    > .".concat(Ce,":not([disabled])\n      + .").concat(Se,"\n"),Re=(b(X={},c.Theme.Light,t.css(Q||(Q=y(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Pe,o.hoverRing.light.gray)),b(X,c.Theme.Dark,t.css(V||(V=y(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Pe,o.hoverRing.dark.gray)),X),Ae=t.css(Y||(Y=y(["\n  cursor: not-allowed;\n"]))),Fe=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"]))),Ie=(b(ne={},c.Theme.Light,t.css(_||(_=y(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Se,o.focusRing.light.default)),b(ne,c.Theme.Dark,t.css(ee||(ee=y(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Se,o.focusRing.dark.default)),ne),Ue=t.css(te||(te=y(["\n  align-self: baseline;\n"]))),Be=t.css(re||(re=y(["\n  grid-area: description;\n"])));b(ie={},c.Theme.Light,t.css(ae||(ae=y(["\n    color: ",";\n  "])),u.palette.black)),b(ie,c.Theme.Dark,t.css(oe||(oe=y(["\n    color: ",";\n  "])),u.palette.gray.light2));var We=["animate","baseFontSize","bold","checked","className","darkMode","description","disabled","id","indeterminate","label","onClick","onChange","name","style"];function $e(e){var n=e.animate,l=void 0===n||n,s=e.baseFontSize,c=e.bold,u=e.checked,d=e.className,g=e.darkMode,v=e.description,x=e.disabled,w=void 0!==x&&x,T=e.id,j=e.indeterminate,O=e.label,E=void 0===O?"":O,N=e.onClick,q=e.onChange,L=e.name,S=e.style,C=h(e,We),D=a.useDarkMode(g),z=D.darkMode,M=D.theme,P=i.useUpdatedBaseFontSize(s),R=k(f.default.useState(!1),2),A=R[0],F=R[1],I=f.default.useMemo((function(){return null!=u?u:A}),[u,A]),U=r.useIdAllocator({prefix:"checkbox",id:T}),B="".concat(U,"-label"),W=null!=c?c:!!v,$=function(e){q&&q(e),null==u&&F(e.target.checked)};return f.default.createElement(p.default,{baseFontSize:16===P?P:14,darkMode:z},f.default.createElement("div",{className:t.cx(De,b({},ze,w),d),style:S},f.default.createElement(i.Label,{id:B,htmlFor:U,disabled:w,className:t.cx(Me,Re[M],b({},Ae,w))},f.default.createElement("input",m({},C,{id:U,className:t.cx(Ce,Fe,Ie[M]),type:"checkbox",name:L,checked:I,"aria-label":"checkbox","aria-disabled":w,"aria-checked":j?"mixed":I,"aria-labelledby":B,onClick:function(e){N&&N(e),j&&($(e),e.stopPropagation())},onChange:$})),f.default.createElement(qe,{theme:M,isChecked:I,indeterminate:j,disabled:w,animate:l,selector:Se}),E&&f.default.createElement("span",{className:t.cx(Ue,b({},t.css(Le||(Le=y(["\n                  font-weight: ",";\n                "])),o.fontWeights.regular),!W))},E)),v&&f.default.createElement(i.Description,{className:Be,disabled:w},v)))}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?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("react-transition-group"),require("@leafygreen-ui/a11y"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@lg-tools/test-harnesses")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/hooks","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","react-transition-group","@leafygreen-ui/a11y","@leafygreen-ui/lib","@leafygreen-ui/palette","@lg-tools/test-harnesses"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/checkbox"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"],e["react-transition-group"],e["@leafygreen-ui/a11y"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@lg-tools/test-harnesses"])}(this,(function(e,n,t,r,a,o,i,l,s,c,u,d,f){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=g(n),b=g(t),m=g(o);function y(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}function h(e,n,t){return(n=y(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function k(){return k=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},k.apply(this,arguments)}function v(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 x(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function w(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){var r,a,o,i,l=[],s=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;s=!1}else for(;!(s=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return T(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 T(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 T(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 j,O,S,q,E,L,D,N,C,P,I,M,z,B,R,A,F,U,G,_,Y,H,W,K,V,X,$,J,Q,Z,ee,ne=14,te=i.transitionDuration.faster,re=100-100*Math.sqrt(2),ae={root:"lg-checkbox"},oe=u.createUniqueClassName("ripple"),ie=r.css(j||(j=x(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),le=r.css(O||(O=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"])),ne,ne,2,te,re,te,te/2),se=h(h({},u.Theme.Light,r.css(S||(S=x(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),d.palette.gray.dark2,d.palette.blue.base)),u.Theme.Dark,r.css(q||(q=x(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),d.palette.gray.base,d.palette.blue.light1)),ce=r.css(E||(E=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"])),te),ue=h(h({},u.Theme.Light,r.css(L||(L=x(["\n    background-color: ",";\n    border-color: ",";\n  "])),d.palette.blue.base,d.palette.blue.base)),u.Theme.Dark,r.css(D||(D=x(["\n    background-color: ",";\n    border-color: ",";\n  "])),d.palette.blue.light1,d.palette.blue.light1)),de=h(h({},u.Theme.Light,r.css(N||(N=x(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),d.palette.gray.light2,d.palette.gray.light3,d.palette.gray.light3)),u.Theme.Dark,r.css(C||(C=x(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),d.palette.gray.dark2,d.palette.gray.dark3,d.palette.gray.dark3)),fe=h(h({},u.Theme.Light,r.css(P||(P=x(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),d.palette.gray.light2,d.palette.gray.light2)),u.Theme.Dark,r.css(I||(I=x(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),d.palette.gray.dark2,d.palette.gray.dark2)),ge=r.css(M||(M=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,ne,ne),pe=h(h({},u.Theme.Light,r.css(z||(z=x(["\n    background-color: ",";\n  "])),d.palette.blue.dark1)),u.Theme.Dark,r.css(B||(B=x(["\n    background-color: ",";\n  "])),d.palette.blue.light2)),be=r.css(R||(R=x(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*te,-1.7777777777777777*te,2.25),me=r.css(A||(A=x(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),te),ye=r.css(F||(F=x(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),te/8),he=r.css(U||(U=x(["\n  transform: scale(0) rotate(-45deg);\n"]))),ke={entering:he,entered:ye,exiting:he,exited:he,unmounted:he},ve=function(e){var n;return p.default.createElement("svg",k({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),p.default.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(n=e.stroke)&&void 0!==n?n:d.palette.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},xe=function(e){var n;return p.default.createElement("svg",k({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),p.default.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(n=e.stroke)&&void 0!==n?n:d.palette.white}))},we=h(h({},u.Theme.Light,{default:d.palette.white,disabled:d.palette.gray.light3}),u.Theme.Dark,{default:d.palette.white,disabled:d.palette.gray.dark1});function Te(e){var t=e.theme,a=e.isChecked,o=e.indeterminate,i=e.disabled,l=e.animate,u=e.selector,d=c.usePrefersReducedMotion(),f=o?xe:ve,g=o||a,b=l&&!o&&!d,m=n.useRef(null);return p.default.createElement(p.default.Fragment,null,p.default.createElement("div",{className:r.cx(u,le,se[t],h(h(h(h(h({},ce,g),ue[t],g),de[t],i),fe[t],i&&g),ie,!b))},p.default.createElement(s.Transition,{in:g,timeout:d?0:te,enter:b,exit:b,nodeRef:m},(function(e){return p.default.createElement(f,{stroke:i?we[t].disabled:we[t].default,className:r.cx(me,ke[e],h({},ie,!b))})}))),p.default.createElement("div",{className:r.cx(oe,ge,pe[t],h(h({},be,a&&b),ie,!b))}))}var je,Oe=u.createUniqueClassName("check-wrapper"),Se=u.createUniqueClassName("input"),qe=r.css(G||(G=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"])),ne),Ee=r.css(_||(_=x(["\n  cursor: not-allowed;\n"]))),Le=r.css(Y||(Y=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"])),ne),De="\n  &:hover:not(:focus-within)\n    > .".concat(Se,":not([disabled])\n      + .").concat(Oe,"\n"),Ne=h(h({},u.Theme.Light,r.css(H||(H=x(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),De,i.hoverRing.light.gray)),u.Theme.Dark,r.css(W||(W=x(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),De,i.hoverRing.dark.gray)),Ce=r.css(K||(K=x(["\n  cursor: not-allowed;\n"]))),Pe=r.css(V||(V=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"]))),Ie=h(h({},u.Theme.Light,r.css(X||(X=x(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Oe,i.focusRing.light.default)),u.Theme.Dark,r.css($||($=x(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Oe,i.focusRing.dark.default)),Me=r.css(J||(J=x(["\n  align-self: baseline;\n"]))),ze=r.css(Q||(Q=x(["\n  grid-area: description;\n"])));h(h({},u.Theme.Light,r.css(Z||(Z=x(["\n    color: ",";\n  "])),d.palette.black)),u.Theme.Dark,r.css(ee||(ee=x(["\n    color: ",";\n  "])),d.palette.gray.light2));var Be=["animate","aria-label","baseFontSize","bold","checked","className","darkMode","data-lgid","description","disabled","id","indeterminate","label","onClick","onChange","name","style"];function Re(e){var n=e.animate,t=void 0===n||n,s=e["aria-label"],c=void 0===s?"checkbox":s,u=e.baseFontSize,d=e.bold,f=e.checked,g=e.className,b=e.darkMode,y=e["data-lgid"],T=void 0===y?ae.root:y,j=e.description,O=e.disabled,S=void 0!==O&&O,q=e.id,E=e.indeterminate,L=e.label,D=void 0===L?"":L,N=e.onClick,C=e.onChange,P=e.name,I=e.style,M=v(e,Be),z=o.useDarkMode(b),B=z.darkMode,R=z.theme,A=l.useUpdatedBaseFontSize(u),F=w(p.default.useState(!1),2),U=F[0],G=F[1],_=p.default.useMemo((function(){return null!=f?f:U}),[f,U]),Y=a.useIdAllocator({prefix:"checkbox",id:q}),H="".concat(Y,"-label"),W=null!=d?d:!!j,K=function(e){C&&C(e),null==f&&G(e.target.checked)};return p.default.createElement(m.default,{baseFontSize:16===A?A:14,darkMode:B},p.default.createElement("div",{className:r.cx(qe,h({},Ee,S),g),"data-lgid":T,style:I},p.default.createElement(l.Label,{id:H,htmlFor:Y,disabled:S,className:r.cx(Le,Ne[R],h({},Ce,S))},p.default.createElement("input",k({},M,{id:Y,className:r.cx(Se,Pe,Ie[R]),type:"checkbox",name:P,checked:_,"aria-label":c,"aria-disabled":S,"aria-checked":E?"mixed":_,"aria-labelledby":H,onClick:function(e){N&&N(e),E&&(K(e),e.stopPropagation())},onChange:K})),p.default.createElement(Te,{theme:R,isChecked:_,indeterminate:E,disabled:S,animate:t,selector:Oe}),D&&p.default.createElement("span",{className:r.cx(Me,h({},r.css(je||(je=x(["\n                  font-weight: ",";\n                "])),i.fontWeights.regular),!W))},D)),j&&p.default.createElement(l.Description,{className:ze,disabled:S},j)))}Re.displayName="Checkbox",Re.propTypes={darkMode:b.default.bool,description:b.default.string,checked:b.default.bool,label:b.default.node,disabled:b.default.bool,indeterminate:b.default.bool,className:b.default.string,onChange:b.default.func,id:b.default.oneOfType([b.default.number,b.default.string]),animate:b.default.bool};e.LGIDS_CHECKBOX=ae,e.default=Re,e.getTestUtils=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:ae.root,n=f.getByLgId(e),t=f.queryBySelector(n,"[data-lgid=".concat(l.LGIDS_TYPOGRAPHY.label,"]")),r=f.queryBySelector(n,"[data-lgid=".concat(l.LGIDS_TYPOGRAPHY.description,"]")),a=f.queryBySelector(n,'input[type="checkbox"]');return{getLabel:function(){return t},getDescription:function(){return r},getInput:function(){return a},isDisabled:function(){return!!f.queryBySelector(n,'[aria-disabled="true"]')},isIndeterminate:function(){return!!f.queryBySelector(n,'[aria-checked="mixed"]')},getInputValue:function(){return a.checked}}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/checkbox",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "description": "LeafyGreen UI Kit Checkbox",
@@ -28,6 +28,7 @@ "main": "./dist/index.js",
     "@leafygreen-ui/hooks": "^8.1.3",
-    "@leafygreen-ui/lib": "^13.3.0",
-    "@leafygreen-ui/palette": "^4.0.9",
+    "@leafygreen-ui/lib": "^13.4.0",
+    "@leafygreen-ui/palette": "^4.0.10",
     "@leafygreen-ui/tokens": "^2.5.2",
-    "@leafygreen-ui/typography": "^18.3.0",
+    "@leafygreen-ui/typography": "^19.0.0",
+    "@lg-tools/test-harnesses": "^0.1.2",
     "react-transition-group": "^4.4.5"
@@ -48,4 +49,4 @@ },
   "devDependencies": {
-    "@lg-tools/storybook-utils": "^0.1.0"
+    "@lg-tools/storybook-utils": "^0.1.1"
   }
 }

README.md

@@ -87,1 +87,122 @@ # Checkbox
 _Any other properties will be spread on the `input` element._
+
+# Test Harnesses
+
+## getTestUtils()
+
+`getTestUtils()` is a util that allows consumers to reliably interact with `LG Checkbox` in a product test suite. If the `Checkbox` component cannot be found, an error will be thrown.
+
+### Usage
+
+```tsx
+import Checkbox, { getTestUtils } from '@leafygreen-ui/checkbox';
+
+const utils = getTestUtils(lgId?: string); // lgId refers to the custom `data-lgid` attribute passed to `Checkbox`. It defaults to 'lg-checkbox' if left empty.
+```
+
+#### Single `Checkbox`
+
+```tsx
+import { render } from '@testing-library/react';
+import Checkbox, { getTestUtils } from '@leafygreen-ui/checkbox';
+
+...
+
+test('checkbox', () => {
+  render(<Checkbox label="label" checked />);
+  const { getInput, getInputValue } = getTestUtils();
+
+  expect(getInput()).toBeInTheDocument();
+  expect(getInputValue()).toBe(true);
+});
+```
+
+#### Multiple `Checkbox` components
+
+When testing multiple `Checkbox` components it is recommended to add the custom `data-lgid` attribute to each `Checkbox`.
+
+```tsx
+import { render } from '@testing-library/react';
+import Checkbox, { getTestUtils } from '@leafygreen-ui/checkbox';
+
+...
+
+test('checkbox', () => {
+  render(
+    <>
+      <Checkbox data-lgid="checkbox-1" label="label 1" />
+      <Checkbox data-lgid="checkbox-2" label="label 2" checked />
+    </>,
+  );
+  const utilsOne = getTestUtils('checkbox-1'); // data-lgid
+  const utilsTwo = getTestUtils('checkbox-2'); // data-lgid
+  // First Checkbox
+  expect(utilsOne.checkboxetInput()).toBeInTheDocument();
+  expect(utilsOne.getInputValue()).toBe(false);
+
+  // Second Checkbox
+  expect(utilsTwo.getInput()).toBeInTheDocument();
+  expect(utilsTwo.getInputValue()).toBe(true);
+});
+```
+
+#### Checkbox with other LG form elements
+
+```tsx
+import { render } from '@testing-library/react';
+import Toggle, { getTestUtils as getLGToggleTestUtils } from '@leafygreen-ui/toggle';
+import TextInput, { getTestUtils as getLGTextInputTestUtils } from '@leafygreen-ui/text-input';
+import Checkbox, { getTestUtils } from '@leafygreen-ui/checkbox';
+
+...
+
+test('Form', () => {
+  render(
+    <Form>
+      <Toggle aria-label="Toggle label" />
+      <TextInput label="TextInput label" />
+      <Checkbox label="Checkbox label" />
+    </Form>,
+  );
+
+  const toggleInputUtils = getLGToggleTestUtils();
+  const textInputUtils = getLGTextInputTestUtils();
+  const checkboxUtils = getTestUtils();
+
+  // LG Toggle
+  expect(toggleInputUtils.getInput()).toBeInTheDocument();
+  expect(toggleInputUtils.getInputValue()).toBe('false');
+
+  // LG TextInput
+  expect(textInputUtils.getInput()).toBeInTheDocument();
+  expect(textInputUtils.getInputValue()).toBe('');
+
+  // LG Checkbox
+  expect(checkboxUtils.getInput()).toBeInTheDocument();
+  expect(checkboxUtils.getInputValue()).toBe(false);
+});
+```
+
+### Test Utils
+
+#### Elements
+
+```tsx
+const {
+  getInput,
+  getLabel,
+  getDescription,
+  getInputValue,
+  isDisabled,
+  isIndeterminate,
+} = getTestUtils();
+```
+
+| Util              | Description                                | Returns                       |
+| ----------------- | ------------------------------------------ | ----------------------------- |
+| `getInput`        | Returns the input node                     | `HTMLButtonElement`           |
+| `getLabel`        | Returns the label node                     | `HTMLButtonElement` \| `null` |
+| `getDescription`  | Returns the description node               | `HTMLButtonElement` \| `null` |
+| `getInputValue`   | Returns the input value                    | `boolean`                     |
+| `isDisabled`      | Returns whether the input is disabled      | `boolean`                     |
+| `isIndeterminate` | Returns whether the input is indeterminate | `boolean`                     |

src/Checkbox/Checkbox.types.ts

@@ -5,2 +5,3 @@ import {
   HTMLElementProps,
+  LgIdProps,
   Theme,
@@ -73,3 +74,4 @@ } from '@leafygreen-ui/lib';
   'label' | 'aria-label' | 'aria-labelledby'
->;
+> &
+  LgIdProps;
 
@@ -76,0 +78,0 @@ /**

src/constants.ts

@@ -10,1 +10,7 @@ import { transitionDuration } from '@leafygreen-ui/tokens';
 export const rippleTransitionDelay = -rippleTransitionScale / rippleScale;
+
+const LGID_ROOT = 'lg-checkbox';
+
+export const LGIDS_CHECKBOX = {
+  root: LGID_ROOT,
+} as const;

src/index.ts

 export { type CheckboxProps, default } from './Checkbox';
+export { LGIDS_CHECKBOX } from './constants';
+export { getTestUtils } from './utils';

stories.js

@@ -1,1 +0,1 @@
-import e,{useRef as n}from"react";import{storybookArgTypes as r,storybookExcludedControlParams as t}from"@lg-tools/storybook-utils";import{css as o,cx as a}from"@leafygreen-ui/emotion";import i,{useDarkMode as l}from"@leafygreen-ui/leafygreen-provider";import s from"prop-types";import{useIdAllocator as c}from"@leafygreen-ui/hooks";import{transitionDuration as d,hoverRing as u,focusRing as b,fontWeights as m}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as g,Label as f,Description as p}from"@leafygreen-ui/typography";import{Transition as h}from"react-transition-group";import{usePrefersReducedMotion as y}from"@leafygreen-ui/a11y";import{createUniqueClassName as k,Theme as v}from"@leafygreen-ui/lib";import{palette as x}from"@leafygreen-ui/palette";function w(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function S(){return S=Object.assign?Object.assign.bind():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},S.apply(this,arguments)}function j(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function E(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function O(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,a,i,l=[],s=!0,c=!1;try{if(a=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;s=!1}else for(;!(s=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);s=!0);}catch(e){c=!0,o=e}finally{try{if(!s&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(e,n)||z(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 N(e){return function(e){if(Array.isArray(e))return L(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||z(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function z(e,n){if(e){if("string"==typeof e)return L(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?L(e,n):void 0}}function L(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var C,M,A,D,F,T,I,P,B,W,q,R,U,$,G,H,J,K,Q,V,X,Y,Z,_,ee,ne,re,te,oe,ae,ie,le,se,ce,de,ue,be,me,ge,fe,pe=14,he=d.faster,ye=100-100*Math.sqrt(2),ke=k("ripple"),ve=o(C||(C=E(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),xe=o(M||(M=E(["\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"])),pe,pe,2,he,ye,he,he/2),we=(w(F={},v.Light,o(A||(A=E(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.dark2,x.blue.base)),w(F,v.Dark,o(D||(D=E(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.base,x.blue.light1)),F),Se=o(T||(T=E(["\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"])),he),je=(w(B={},v.Light,o(I||(I=E(["\n    background-color: ",";\n    border-color: ",";\n  "])),x.blue.base,x.blue.base)),w(B,v.Dark,o(P||(P=E(["\n    background-color: ",";\n    border-color: ",";\n  "])),x.blue.light1,x.blue.light1)),B),Ee=(w(R={},v.Light,o(W||(W=E(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.light2,x.gray.light3,x.gray.light3)),w(R,v.Dark,o(q||(q=E(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.dark2,x.gray.dark3,x.gray.dark3)),R),Oe=(w(G={},v.Light,o(U||(U=E(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.light2,x.gray.light2)),w(G,v.Dark,o($||($=E(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.dark2,x.gray.dark2)),G),Ne=o(H||(H=E(["\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,pe,pe),ze=(w(Q={},v.Light,o(J||(J=E(["\n    background-color: ",";\n  "])),x.blue.dark1)),w(Q,v.Dark,o(K||(K=E(["\n    background-color: ",";\n  "])),x.blue.light2)),Q),Le=o(V||(V=E(["\n  // only animate ripple on enter\n  transition-duration: ","ms;\n  transition-delay: ","ms;\n  transform: scale(",");\n  opacity: 0;\n"])),4*he,-1.7777777777777777*he,2.25),Ce=o(X||(X=E(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),he),Me=o(Y||(Y=E(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),he/8),Ae=o(Z||(Z=E(["\n  transform: scale(0) rotate(-45deg);\n"]))),De={entering:Ae,entered:Me,exiting:Ae,exited:Ae,unmounted:Ae},Fe=function(n){var r;return e.createElement("svg",S({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(r=n.stroke)&&void 0!==r?r:x.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},Te=function(n){var r;return e.createElement("svg",S({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(r=n.stroke)&&void 0!==r?r:x.white}))},Ie=(w(_={},v.Light,{default:x.white,disabled:x.gray.light3}),w(_,v.Dark,{default:x.white,disabled:x.gray.dark1}),_);function Pe(r){var t,o,i=r.theme,l=r.isChecked,s=r.indeterminate,c=r.disabled,d=r.animate,u=r.selector,b=y(),m=s?Te:Fe,g=s||l,f=d&&!s&&!b,p=n(null);return e.createElement(e.Fragment,null,e.createElement("div",{className:a(u,xe,we[i],(t={},w(t,Se,g),w(t,je[i],g),w(t,Ee[i],c),w(t,Oe[i],c&&g),w(t,ve,!f),t))},e.createElement(h,{in:g,timeout:b?0:he,enter:f,exit:f,nodeRef:p},(function(n){return e.createElement(m,{stroke:c?Ie[i].disabled:Ie[i].default,className:a(Ce,De[n],w({},ve,!f))})}))),e.createElement("div",{className:a(ke,Ne,ze[i],(o={},w(o,Le,l&&f),w(o,ve,!f),o))}))}var Be,We=k("check-wrapper"),qe=k("input"),Re=o(ee||(ee=E(["\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"])),pe),Ue=o(ne||(ne=E(["\n  cursor: not-allowed;\n"]))),$e=o(re||(re=E(["\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"])),pe),Ge="\n  &:hover:not(:focus-within)\n    > .".concat(qe,":not([disabled])\n      + .").concat(We,"\n"),He=(w(ae={},v.Light,o(te||(te=E(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Ge,u.light.gray)),w(ae,v.Dark,o(oe||(oe=E(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Ge,u.dark.gray)),ae),Je=o(ie||(ie=E(["\n  cursor: not-allowed;\n"]))),Ke=o(le||(le=E(["\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"]))),Qe=(w(de={},v.Light,o(se||(se=E(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),We,b.light.default)),w(de,v.Dark,o(ce||(ce=E(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),We,b.dark.default)),de),Ve=o(ue||(ue=E(["\n  align-self: baseline;\n"]))),Xe=o(be||(be=E(["\n  grid-area: description;\n"])));w(fe={},v.Light,o(me||(me=E(["\n    color: ",";\n  "])),x.black)),w(fe,v.Dark,o(ge||(ge=E(["\n    color: ",";\n  "])),x.gray.light2));var Ye=["animate","baseFontSize","bold","checked","className","darkMode","description","disabled","id","indeterminate","label","onClick","onChange","name","style"];function Ze(n){var r=n.animate,t=void 0===r||r,s=n.baseFontSize,d=n.bold,u=n.checked,b=n.className,h=n.darkMode,y=n.description,k=n.disabled,v=void 0!==k&&k,x=n.id,N=n.indeterminate,z=n.label,L=void 0===z?"":z,C=n.onClick,M=n.onChange,A=n.name,D=n.style,F=j(n,Ye),T=l(h),I=T.darkMode,P=T.theme,B=g(s),W=O(e.useState(!1),2),q=W[0],R=W[1],U=e.useMemo((function(){return null!=u?u:q}),[u,q]),$=c({prefix:"checkbox",id:x}),G="".concat($,"-label"),H=null!=d?d:!!y,J=function(e){M&&M(e),null==u&&R(e.target.checked)};return e.createElement(i,{baseFontSize:16===B?B:14,darkMode:I},e.createElement("div",{className:a(Re,w({},Ue,v),b),style:D},e.createElement(f,{id:G,htmlFor:$,disabled:v,className:a($e,He[P],w({},Je,v))},e.createElement("input",S({},F,{id:$,className:a(qe,Ke,Qe[P]),type:"checkbox",name:A,checked:U,"aria-label":"checkbox","aria-disabled":v,"aria-checked":N?"mixed":U,"aria-labelledby":G,onClick:function(e){C&&C(e),N&&(J(e),e.stopPropagation())},onChange:J})),e.createElement(Pe,{theme:P,isChecked:U,indeterminate:N,disabled:v,animate:t,selector:We}),L&&e.createElement("span",{className:a(Ve,w({},o(Be||(Be=E(["\n                  font-weight: ",";\n                "])),m.regular),!H))},L)),y&&e.createElement(p,{className:Xe,disabled:v},y)))}Ze.displayName="Checkbox",Ze.propTypes={darkMode:s.bool,description:s.string,checked:s.bool,label:s.node,disabled:s.bool,indeterminate:s.bool,className:s.string,onChange:s.func,id:s.oneOfType([s.number,s.string]),animate:s.bool};var _e,en,nn=["baseFontSize"],rn="This is a description for the checkbox",tn={title:"Components/Checkbox",component:Ze,parameters:{default:"LiveExample",controls:{exclude:[].concat(N(t),["checked"])},generate:{combineArgs:{darkMode:[!1,!0],checked:[!0,!1],indeterminate:[!1,!0],bold:[!0,!1],disabled:[!1,!0],description:[void 0,rn],label:["I agree to this thing",void 0]},excludeCombinations:[["description",{label:void 0}],{bold:!0,label:void 0},{checked:!0,indeterminate:!0}],args:{className:o(_e||(_e=E(["\n          text-align: initial;\n          max-width: 300px;\n        "])))}}},args:{animate:!0,label:"I agree to this thing.",description:rn,className:o(en||(en=E(["\n      max-width: 700px;\n    "])))},argTypes:{label:{control:"text"},description:{control:"text"},darkMode:r.darkMode,disabled:{control:"boolean"},bold:{control:"boolean"},indeterminate:{control:"boolean"},animate:{control:"boolean",default:!0},baseFontSize:r.baseFontSize}},on=function(n){var r=n.baseFontSize,t=j(n,nn);return e.createElement(i,{baseFontSize:r},e.createElement(Ze,t))};on.parameters={chromatic:{disableSnapshot:!0}};var an=on.bind({});an.parameters={controls:{exclude:N(t)},chromatic:{disableSnapshot:!0}},an.args={checked:!1},an.argTypes={checked:{control:"boolean"}};var ln=function(){};export{an as Controlled,ln as Generated,on as LiveExample,tn as default};
+import e,{useRef as n}from"react";import{storybookArgTypes as r,storybookExcludedControlParams as t}from"@lg-tools/storybook-utils";import{css as o,cx as a}from"@leafygreen-ui/emotion";import i,{useDarkMode as l}from"@leafygreen-ui/leafygreen-provider";import s from"prop-types";import{useIdAllocator as c}from"@leafygreen-ui/hooks";import{transitionDuration as d,hoverRing as u,focusRing as b,fontWeights as m}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as g,Label as f,Description as p}from"@leafygreen-ui/typography";import{Transition as h}from"react-transition-group";import{usePrefersReducedMotion as y}from"@leafygreen-ui/a11y";import{createUniqueClassName as k,Theme as v}from"@leafygreen-ui/lib";import{palette as x}from"@leafygreen-ui/palette";import"@lg-tools/test-harnesses";function w(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}function j(e,n,r){return(n=w(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function E(){return E=Object.assign?Object.assign.bind():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},E.apply(this,arguments)}function S(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function O(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function N(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,a,i,l=[],s=!0,c=!1;try{if(a=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;s=!1}else for(;!(s=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);s=!0);}catch(e){c=!0,o=e}finally{try{if(!s&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(e,n)||L(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 z(e){return function(e){if(Array.isArray(e))return C(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||L(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function L(e,n){if(e){if("string"==typeof e)return C(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?C(e,n):void 0}}function C(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var M,A,D,F,T,I,P,B,W,q,R,U,$,G,H,J,K,Q,V,X,Y,Z,_,ee,ne,re,te,oe,ae,ie,le,se=14,ce=d.faster,de=100-100*Math.sqrt(2),ue="lg-checkbox",be=k("ripple"),me=o(M||(M=O(["\n  &,\n  &:before {\n    transition: unset;\n    transition-delay: 0ms;\n    transition-duration: 0ms;\n  }\n"]))),ge=o(A||(A=O(["\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),fe=j(j({},v.Light,o(D||(D=O(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.dark2,x.blue.base)),v.Dark,o(F||(F=O(["\n    border-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.base,x.blue.light1)),pe=o(T||(T=O(["\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),he=j(j({},v.Light,o(I||(I=O(["\n    background-color: ",";\n    border-color: ",";\n  "])),x.blue.base,x.blue.base)),v.Dark,o(P||(P=O(["\n    background-color: ",";\n    border-color: ",";\n  "])),x.blue.light1,x.blue.light1)),ye=j(j({},v.Light,o(B||(B=O(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.light2,x.gray.light3,x.gray.light3)),v.Dark,o(W||(W=O(["\n    border-color: ",";\n    background-color: ",";\n    box-shadow: unset;\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.dark2,x.gray.dark3,x.gray.dark3)),ke=j(j({},v.Light,o(q||(q=O(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.light2,x.gray.light2)),v.Dark,o(R||(R=O(["\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),x.gray.dark2,x.gray.dark2)),ve=o(U||(U=O(["\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=j(j({},v.Light,o($||($=O(["\n    background-color: ",";\n  "])),x.blue.dark1)),v.Dark,o(G||(G=O(["\n    background-color: ",";\n  "])),x.blue.light2)),we=o(H||(H=O(["\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),je=o(J||(J=O(["\n  z-index: 1;\n  transform-origin: center;\n  transition: transform ","ms ease-in-out;\n"])),ce),Ee=o(K||(K=O(["\n  transform: scale(1) rotate(0);\n  transition-delay: ","ms;\n"])),ce/8),Se=o(Q||(Q=O(["\n  transform: scale(0) rotate(-45deg);\n"]))),Oe={entering:Se,entered:Ee,exiting:Se,exited:Se,unmounted:Se},Ne=function(n){var r;return e.createElement("svg",E({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("path",{d:"M2 5.5L4.12132 7.62132L8.36396 3.37868",stroke:null!==(r=n.stroke)&&void 0!==r?r:x.white,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))},ze=function(n){var r;return e.createElement("svg",E({width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),e.createElement("line",{x1:"2",x2:"8",y1:"5",y2:"5",strokeWidth:"2",strokeLinecap:"round",stroke:null!==(r=n.stroke)&&void 0!==r?r:x.white}))},Le=j(j({},v.Light,{default:x.white,disabled:x.gray.light3}),v.Dark,{default:x.white,disabled:x.gray.dark1});function Ce(r){var t=r.theme,o=r.isChecked,i=r.indeterminate,l=r.disabled,s=r.animate,c=r.selector,d=y(),u=i?ze:Ne,b=i||o,m=s&&!i&&!d,g=n(null);return e.createElement(e.Fragment,null,e.createElement("div",{className:a(c,ge,fe[t],j(j(j(j(j({},pe,b),he[t],b),ye[t],l),ke[t],l&&b),me,!m))},e.createElement(h,{in:b,timeout:d?0:ce,enter:m,exit:m,nodeRef:g},(function(n){return e.createElement(u,{stroke:l?Le[t].disabled:Le[t].default,className:a(je,Oe[n],j({},me,!m))})}))),e.createElement("div",{className:a(be,ve,xe[t],j(j({},we,o&&m),me,!m))}))}var Me,Ae=k("check-wrapper"),De=k("input"),Fe=o(V||(V=O(["\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),Te=o(X||(X=O(["\n  cursor: not-allowed;\n"]))),Ie=o(Y||(Y=O(["\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),Pe="\n  &:hover:not(:focus-within)\n    > .".concat(De,":not([disabled])\n      + .").concat(Ae,"\n"),Be=j(j({},v.Light,o(Z||(Z=O(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Pe,u.light.gray)),v.Dark,o(_||(_=O(["\n    "," {\n      box-shadow: ",";\n    }\n  "])),Pe,u.dark.gray)),We=o(ee||(ee=O(["\n  cursor: not-allowed;\n"]))),qe=o(ne||(ne=O(["\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"]))),Re=j(j({},v.Light,o(re||(re=O(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Ae,b.light.default)),v.Dark,o(te||(te=O(["\n    &:focus-visible + ."," {\n      box-shadow: ",";\n    }\n  "])),Ae,b.dark.default)),Ue=o(oe||(oe=O(["\n  align-self: baseline;\n"]))),$e=o(ae||(ae=O(["\n  grid-area: description;\n"])));j(j({},v.Light,o(ie||(ie=O(["\n    color: ",";\n  "])),x.black)),v.Dark,o(le||(le=O(["\n    color: ",";\n  "])),x.gray.light2));var Ge=["animate","aria-label","baseFontSize","bold","checked","className","darkMode","data-lgid","description","disabled","id","indeterminate","label","onClick","onChange","name","style"];function He(n){var r=n.animate,t=void 0===r||r,s=n["aria-label"],d=void 0===s?"checkbox":s,u=n.baseFontSize,b=n.bold,h=n.checked,y=n.className,k=n.darkMode,v=n["data-lgid"],x=void 0===v?ue:v,w=n.description,z=n.disabled,L=void 0!==z&&z,C=n.id,M=n.indeterminate,A=n.label,D=void 0===A?"":A,F=n.onClick,T=n.onChange,I=n.name,P=n.style,B=S(n,Ge),W=l(k),q=W.darkMode,R=W.theme,U=g(u),$=N(e.useState(!1),2),G=$[0],H=$[1],J=e.useMemo((function(){return null!=h?h:G}),[h,G]),K=c({prefix:"checkbox",id:C}),Q="".concat(K,"-label"),V=null!=b?b:!!w,X=function(e){T&&T(e),null==h&&H(e.target.checked)};return e.createElement(i,{baseFontSize:16===U?U:14,darkMode:q},e.createElement("div",{className:a(Fe,j({},Te,L),y),"data-lgid":x,style:P},e.createElement(f,{id:Q,htmlFor:K,disabled:L,className:a(Ie,Be[R],j({},We,L))},e.createElement("input",E({},B,{id:K,className:a(De,qe,Re[R]),type:"checkbox",name:I,checked:J,"aria-label":d,"aria-disabled":L,"aria-checked":M?"mixed":J,"aria-labelledby":Q,onClick:function(e){F&&F(e),M&&(X(e),e.stopPropagation())},onChange:X})),e.createElement(Ce,{theme:R,isChecked:J,indeterminate:M,disabled:L,animate:t,selector:Ae}),D&&e.createElement("span",{className:a(Ue,j({},o(Me||(Me=O(["\n                  font-weight: ",";\n                "])),m.regular),!V))},D)),w&&e.createElement(p,{className:$e,disabled:L},w)))}He.displayName="Checkbox",He.propTypes={darkMode:s.bool,description:s.string,checked:s.bool,label:s.node,disabled:s.bool,indeterminate:s.bool,className:s.string,onChange:s.func,id:s.oneOfType([s.number,s.string]),animate:s.bool};var Je,Ke,Qe=["baseFontSize"],Ve="This is a description for the checkbox",Xe={title:"Components/Checkbox",component:He,parameters:{default:"LiveExample",controls:{exclude:[].concat(z(t),["checked"])},generate:{combineArgs:{darkMode:[!1,!0],checked:[!0,!1],indeterminate:[!1,!0],bold:[!0,!1],disabled:[!1,!0],description:[void 0,Ve],label:["I agree to this thing",void 0]},excludeCombinations:[["description",{label:void 0}],{bold:!0,label:void 0},{checked:!0,indeterminate:!0}],args:{className:o(Je||(Je=O(["\n          text-align: initial;\n          max-width: 300px;\n        "])))}}},args:{animate:!0,label:"I agree to this thing.",description:Ve,className:o(Ke||(Ke=O(["\n      max-width: 700px;\n    "])))},argTypes:{label:{control:"text"},description:{control:"text"},darkMode:r.darkMode,disabled:{control:"boolean"},bold:{control:"boolean"},indeterminate:{control:"boolean"},animate:{control:"boolean",default:!0},baseFontSize:r.baseFontSize}},Ye=function(n){var r=n.baseFontSize,t=S(n,Qe);return e.createElement(i,{baseFontSize:r},e.createElement(He,t))};Ye.parameters={chromatic:{disableSnapshot:!0}};var Ze=Ye.bind({});Ze.parameters={controls:{exclude:z(t)},chromatic:{disableSnapshot:!0}},Ze.args={checked:!1},Ze.argTypes={checked:{control:"boolean"}};var _e=function(){};export{Ze as Controlled,_e as Generated,Ye as LiveExample,Xe as default};

tsdoc.json

@@ -239,5 +239,38 @@ [
       "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",
-      "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes"
+      "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
+      "LgIdProps": {
+        "data-lgid": {
+          "name": "data-lgid",
+          "defaultValue": null,
+          "description": "LG test id passed to the component wrapper.",
+          "required": false,
+          "type": {
+            "name": "`lg-${string}`"
+          },
+          "tags": {}
+        }
+      }
     }
+  },
+  {
+    "tags": {},
+    "description": "",
+    "methods": [],
+    "displayName": "getTestUtils",
+    "props": {
+      "String": "",
+      "RelativeIndexable": {
+        "at": {
+          "name": "at",
+          "defaultValue": null,
+          "description": "Takes an integer value and returns the item at that index,\nallowing for positive and negative integers.\nNegative integers count back from the last item in the array.",
+          "required": true,
+          "type": {
+            "name": "(index: number) => string"
+          },
+          "tags": {}
+        }
+      }
+    }
   }
 ]

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

257632

increased by10.12%

Number of package files

66

increased by17.86%

Lines of code

1891

increased by20.6%

Number of lines in readme file

208

increased by139.08%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

10

increased by11.11%

Dependency changes

• + Added@lg-tools/test-harnesses@^0.1.2

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

• + Added@lg-tools/test-harnesses@0.1.2(transitive)

• + Added@testing-library/dom@9.3.1(transitive)

• + Added@types/aria-query@5.0.4(transitive)

• + Addedansi-regex@5.0.1(transitive)

• + Addedansi-styles@4.3.05.2.0(transitive)

• + Addedaria-query@5.1.3(transitive)

• + Addedarray-buffer-byte-length@1.0.1(transitive)

• + Addedavailable-typed-arrays@1.0.7(transitive)

• + Addedcall-bind@1.0.7(transitive)

• + Addedchalk@4.1.2(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addeddeep-equal@2.2.3(transitive)

• + Addeddefine-data-property@1.1.4(transitive)

• + Addeddefine-properties@1.2.1(transitive)

• + Addeddom-accessibility-api@0.5.16(transitive)

• + Addedes-define-property@1.0.0(transitive)

• + Addedes-errors@1.3.0(transitive)

• + Addedes-get-iterator@1.1.3(transitive)

• + Addedfor-each@0.3.3(transitive)

• + Addedfunctions-have-names@1.2.3(transitive)

• + Addedget-intrinsic@1.2.4(transitive)

• + Addedgopd@1.0.1(transitive)

• + Addedhas-bigints@1.0.2(transitive)

• + Addedhas-flag@4.0.0(transitive)

• + Addedhas-property-descriptors@1.0.2(transitive)

• + Addedhas-proto@1.0.3(transitive)

• + Addedhas-symbols@1.0.3(transitive)

• + Addedhas-tostringtag@1.0.2(transitive)

• + Addedinternal-slot@1.0.7(transitive)

• + Addedis-arguments@1.1.1(transitive)

• + Addedis-array-buffer@3.0.4(transitive)

• + Addedis-bigint@1.0.4(transitive)

• + Addedis-boolean-object@1.1.2(transitive)

• + Addedis-callable@1.2.7(transitive)

• + Addedis-date-object@1.0.5(transitive)

• + Addedis-map@2.0.3(transitive)

• + Addedis-number-object@1.0.7(transitive)

• + Addedis-regex@1.1.4(transitive)

• + Addedis-set@2.0.3(transitive)

• + Addedis-shared-array-buffer@1.0.3(transitive)

• + Addedis-string@1.0.7(transitive)

• + Addedis-symbol@1.0.4(transitive)

• + Addedis-weakmap@2.0.2(transitive)

• + Addedis-weakset@2.0.3(transitive)

• + Addedisarray@2.0.5(transitive)

• + Addedlz-string@1.5.0(transitive)

• + Addedobject-inspect@1.13.1(transitive)

• + Addedobject-is@1.1.6(transitive)

• + Addedobject-keys@1.1.1(transitive)

• + Addedobject.assign@4.1.5(transitive)

• + Addedpossible-typed-array-names@1.0.0(transitive)

• + Addedpretty-format@27.5.1(transitive)

• + Addedreact-is@17.0.2(transitive)

• + Addedregexp.prototype.flags@1.5.2(transitive)

• + Addedset-function-length@1.2.2(transitive)

• + Addedset-function-name@2.0.2(transitive)

• + Addedside-channel@1.0.6(transitive)

• + Addedstop-iteration-iterator@1.0.0(transitive)

• + Addedsupports-color@7.2.0(transitive)

• + Addedwhich-boxed-primitive@1.0.2(transitive)

• + Addedwhich-collection@1.0.2(transitive)

• + Addedwhich-typed-array@1.1.15(transitive)

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

• Updated@leafygreen-ui/lib@^13.4.0

• Updated@leafygreen-ui/palette@^4.0.10

• Updated@leafygreen-ui/typography@^19.0.0