@cypress-design/react-checkbox 0.4.6 → 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,6 @@
+$ yarn build:module && yarn build:types
+$ rollup -c ./rollup.config.mjs
+
+./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
+created ./dist/index.umd.js, ./dist/index.es.mjs in 13.8s
+$ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # @cypress-design/react-checkbox
 
+## 1.0.0
+
+### Major Changes
+
+- [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
+
+### Patch Changes
+
+- Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
+  - @cypress-design/constants-checkbox@1.0.0
+  - @cypress-design/react-icon@1.0.0
+
+## 0.4.0
+
+### Minor Changes
+
+- [#272](https://github.com/cypress-io/cypress-design/pull/272) [`9a3e358`](https://github.com/cypress-io/cypress-design/commit/9a3e3582b8ca2dfdadd9198054042c9f0083be01) Thanks [@elevatebart](https://github.com/elevatebart)! - remove dark mode implementation to avoid wrong side effects
+
+## 0.3.3
+
+### Patch Changes
+
+- [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
+
+- Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
+  - @cypress-design/react-icon@0.22.1
+
+## 0.3.2
+
+### Patch Changes
+
+- [`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3) Thanks [@elevatebart](https://github.com/elevatebart)! - fix wind-keep plugin
+
+- Updated dependencies [[`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3)]:
+  - @cypress-design/react-icon@0.21.1
+
+## 0.3.1
+
+### Patch Changes
+
+- [`63ea78a`](https://github.com/cypress-io/cypress-design/commit/63ea78af2062fd5e3fb8c61fa4bcf85fd95e803b) Thanks [@elevatebart](https://github.com/elevatebart)! - add constants package to dependencies
+
+## 0.3.0
+
+### Minor Changes
+
+- [#196](https://github.com/cypress-io/cypress-design/pull/196) [`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: avoid constants relative imports
+
+### Patch Changes
+
+- Updated dependencies [[`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0)]:
+  - @cypress-design/react-icon@0.20.0
+
+## 0.2.0
+
+### Minor Changes
+
+- [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
+
+### Patch Changes
+
+- Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
+  - @cypress-design/react-icon@0.19.0
+
+## 0.1.1
+
+### Patch Changes
+
+- [#164](https://github.com/cypress-io/cypress-design/pull/164) [`4fd951a`](https://github.com/cypress-io/cypress-design/commit/4fd951a39335900da2508beef9b3565a6f8f9518) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: update active buttons borders
+
+## 0.1.0
+
+### Minor Changes
+
+- [#162](https://github.com/cypress-io/cypress-design/pull/162) [`76d4e60`](https://github.com/cypress-io/cypress-design/commit/76d4e601687d28578cdee0ddc67cd04b286ae2c3) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: functionalize classes used
+
+## 0.5.0
+
+### Minor Changes
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+### Patch Changes
+
+- Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
+  - @cypress-design/react-icon@0.17.0
+
 ## 0.4.6
 
 ### Patch Changes

package/Checkbox.rootstory.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import Checkbox from './Checkbox'
+
+export default (options: {
+  color?: 'jade' | 'indigo' | 'red'
+  checked?: boolean
+}) => {
+  const { checked = true, color } = options
+  return (
+    <Checkbox
+      checked={checked}
+      label="Checked"
+      color={color}
+      onChange={() => {}}
+    />
+  )
+}

package/Checkbox.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import * as React from 'react'
 import type { FunctionComponent, HTMLProps, ReactNode } from 'react'
 import { IconCheckmarkSmall } from '@cypress-design/react-icon'
+import { CheckboxColors, Classes } from '@cypress-design/constants-checkbox'
 
 export interface CheckboxProps
   extends Omit<HTMLProps<HTMLDivElement>, 'label' | 'onChange' | 'name'> {
@@ -38,7 +39,7 @@ export interface CheckboxProps
 const uid = () =>
   String(Date.now().toString(32) + Math.random().toString(16)).replace(
     /\./g,
-    ''
+    '',
   )
 
 export const Checkbox: FunctionComponent<CheckboxProps> = ({
@@ -60,13 +61,10 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
   }
 
   return (
-    <span
-      className={clsx(className, 'block relative flex items-center')}
-      {...rest}
-    >
+    <span className={clsx(className, Classes.wrapper)} {...rest}>
       <input
         id={id}
-        className="absolute inset-0 w-0 h-0 opacity-0"
+        className={Classes.hiddenInput}
         aria-describedby={`${id}-description`}
         name={name || id}
         type="checkbox"
@@ -74,30 +72,26 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
         disabled={disabled}
         checked={localChecked}
       />
-      <label className="flex items-center" htmlFor={id}>
+      <label className={Classes.labelTag} htmlFor={id}>
         {localChecked && (
-          // <windi-keep strokeColor="white"/>
+          // <tw-keep strokeColor="white"/>
           <IconCheckmarkSmall strokeColor="white" className="absolute" />
         )}
         <span
           className={clsx([
-            `block border-1 border-solid rounded h-16px w-16px flex flex-shrink-0 items-center text-white`,
+            Classes.visibleCheckbox,
             disabled
-              ? 'border-gray-200 bg-gray-100'
+              ? CheckboxColors.disabled
               : localChecked
-              ? {
-                  'border-indigo-500 bg-indigo-400': color === 'indigo',
-                  'border-jade-500 bg-jade-400': color === 'jade',
-                  'border-red-500 bg-red-400': color === 'red',
-                }
-              : 'border-gray-200 bg-white',
+                ? CheckboxColors[color]
+                : CheckboxColors.empty,
           ])}
         />
         {label && (
           <span
             className={clsx([
               disabled ? 'text-gray-500' : 'text-gray-800',
-              'block ml-8px text-16px leading-24px font-light select-none',
+              Classes.trueLabel,
             ])}
           >
             {label}

package/CheckboxReact.cy.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mount } from 'cypress/react'
+import { mount } from 'cypress/react18'
 import { Checkbox } from './Checkbox'
 
 describe('Checkbox', () => {
@@ -12,13 +12,15 @@ describe('Checkbox', () => {
         id="welcome-opt-out"
         checked={isChecked}
         onChange={() => (isChecked = !isChecked)}
-        className="m-2 px-2 py-1 border-1 border-gray-300 rounded"
-      />
+        className="px-2 py-1 m-2 border border-gray-300 rounded"
+      />,
     )
 
     cy.get('input[type="checkbox"]').should('be.checked')
+    cy.percySnapshot()
     cy.contains('Welcome guide settings').click()
     cy.get('input[type="checkbox"]').should('not.be.checked')
+    cy.percySnapshot()
   })
 
   it('changes when checkbox is clicked', () => {
@@ -30,8 +32,8 @@ describe('Checkbox', () => {
         id="welcome-opt-out"
         checked={isChecked}
         onChange={() => (isChecked = !isChecked)}
-        className="m-2 px-2 py-1 border-1 border-gray-300 rounded"
-      />
+        className="px-2 py-1 m-2 border border-gray-300 rounded"
+      />,
     )
 
     cy.get('input[type="checkbox"]').should('be.checked')
@@ -42,12 +44,21 @@ describe('Checkbox', () => {
   it('keeps its width when label is long', () => {
     mount(
       <Checkbox
-        label="lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        label={[
+          'lorem ipsum dolor sit amet, consectetur adipiscing elit,',
+          'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip',
+          'ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse',
+          'cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,',
+          'sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        ].join(' ')}
         id="lorem-checkbox"
         onChange={() => {}}
-      />
+      />,
     )
 
+    cy.percySnapshot()
+
     cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
   })
 })

package/ReadMe.md

@@ -0,0 +1,19 @@
+# Checkbox
+
+## Install
+
+```bash
+npm install @cypress-design/react-checkbox
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-checkbox
+```
+
+## Usage
+
+```ts
+import Checkbox from '@cypress-design/react-checkbox'
+```

package/dist/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACtE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D;AAQD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAiErD,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"./","sources":["Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIpE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACtE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D;AAQD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA0DrD,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"./","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.es.mjs

@@ -17,6 +17,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 var __assign$1 = function() {
     __assign$1 = Object.assign || function __assign(t) {
@@ -39,7 +41,12 @@ function __rest$1(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -55,6 +62,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -77,20 +86,47 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
-        if (!ICON_COLOR_PROP_NAMES.includes(attrName)) {
+        if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
+            attrName !== 'name') {
+            // @ts-expect-error the ky of React's SVGProps is too broad and
+            // breaks here. Since we do not need to check for it. We keep the expect error
             newAttributes[attrName] =
                 attributes[attrName];
         }
         return newAttributes;
     }, {});
-    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
-            __html: body
-        } }, filteredAttributes);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(function () {
+        var iconFileId = "".concat(name, "_").concat(size);
+        if (defs) {
+            if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
+                return;
+            }
+            var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgElement.setAttribute('data-cy-svg-defs', iconFileId);
+            svgElement.setAttribute('width', '0');
+            svgElement.setAttribute('height', '0');
+            svgElement.innerHTML = defs;
+            document.body.appendChild(svgElement);
+        }
+    }, [defs, name, size]);
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
+            __html: alt
+                ? "<title>".concat(alt.replace(/[><]/g, function (s) {
+                    return s === '>' ? '&gt;' : '&lt;';
+                }), "</title>").concat(body)
+                : body,
+        }, className: undefined }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
     }
@@ -99,19 +135,39 @@ var compileReactIconProperties = function (_a) {
     }
     return componentProps;
 };
-var IconCheckmarkSmall = function (props) {
-    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
-    var iconBodies = {
-        "16": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
-    };
-    var body = iconBodies[size];
+
+function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
+    var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
+    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
     if (!body) {
-        throw Error("Icon \"checkmark-small\" is not available in size " + size);
+        throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
     }
-    return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
-};
+    return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
+}
+var IconCheckmarkSmall = function (props) { return React.createElement('svg', useIconProps(props, {
+    "16": {
+        "body": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+    }
+}, ["16"], "checkmark-small")); };
 
-/* <windicss-keep class=""> */
+
+/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
+
+const Classes = {
+    wrapper: 'relative flex items-center',
+    hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',
+    labelTag: 'flex items-center',
+    visibleCheckbox: 'border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white',
+    trueLabel: 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
+};
+const CheckboxColors = {
+    indigo: 'border-indigo-500 bg-indigo-400',
+    jade: 'border-jade-500 bg-jade-400',
+    red: 'border-red-500 bg-red-400',
+    disabled: 'border-gray-200 bg-gray-100',
+    empty: 'border-gray-200 bg-white',
+};
 
 var uid = function () {
     return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
@@ -123,31 +179,27 @@ var Checkbox = function (_a) {
         setChecked(!localChecked);
         onChange(event);
     }
-    return (React.createElement("span", __assign$1({ className: clsx(className, 'block relative flex items-center') }, rest),
-        React.createElement("input", { id: id, className: "absolute inset-0 w-0 h-0 opacity-0", "aria-describedby": id + "-description", name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
-        React.createElement("label", { className: "flex items-center", htmlFor: id },
+    return (React.createElement("span", __assign$1({ className: clsx(className, Classes.wrapper) }, rest),
+        React.createElement("input", { id: id, className: Classes.hiddenInput, "aria-describedby": "".concat(id, "-description"), name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
+        React.createElement("label", { className: Classes.labelTag, htmlFor: id },
             localChecked && (
-            // <windi-keep strokeColor="white"/>
+            // <tw-keep strokeColor="white"/>
             React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
             React.createElement("span", { className: clsx([
-                    "block border-1 border-solid rounded h-16px w-16px flex flex-shrink-0 items-center text-white",
+                    Classes.visibleCheckbox,
                     disabled
-                        ? 'border-gray-200 bg-gray-100'
+                        ? CheckboxColors.disabled
                         : localChecked
-                            ? {
-                                'border-indigo-500 bg-indigo-400': color === 'indigo',
-                                'border-jade-500 bg-jade-400': color === 'jade',
-                                'border-red-500 bg-red-400': color === 'red'
-                            }
-                            : 'border-gray-200 bg-white',
+                            ? CheckboxColors[color]
+                            : CheckboxColors.empty,
                 ]) }),
             label && (React.createElement("span", { className: clsx([
                     disabled ? 'text-gray-500' : 'text-gray-800',
-                    'block ml-8px text-16px leading-24px font-light select-none',
+                    Classes.trueLabel,
                 ]) }, label)))));
 };
 
 export { Checkbox as default };
-
-/* <windicss-keep class="block relative flex items-center absolute inset-0 w-0 h-0 opacity-0 border-1 border-solid rounded h-16px w-16px flex-shrink-0 text-white border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white text-gray-500 text-gray-800 ml-8px text-16px leading-24px font-light select-none icon-dark-white"> */
 //# sourceMappingURL=index.es.mjs.map
+
+/* <wind-keep class="absolute text-gray-500 text-gray-800 icon-dark-white relative flex items-center inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white block ml-[8px] text-[16px] leading-[24px] font-light select-none border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 border-gray-200 bg-gray-100 bg-white"> */