@elliemae/ds-form-checkbox 3.16.0-next.2 → 3.16.0-next.20

package/dist/cjs/styles.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -34,8 +38,8 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_styleHelpers = require("./utils/styleHelpers");
-var import_exported_related = require("./exported-related");
+var import_styleHelpers = require("./utils/styleHelpers.js");
+var import_exported_related = require("./exported-related/index.js");
 const StyledCheckBox = (0, import_ds_system.styled)("span")`
   position: relative;
   background: ${({ theme, disabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled)};
@@ -63,9 +67,26 @@ const StyledCheckBox = (0, import_ds_system.styled)("span")`
 }}
 
   ${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, false, device)}
+
+  &:after {
+    content: '';
+    border-radius: 2px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+  }
+
   &:hover {
     background: ${({ theme, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
+
+    &:after {
+      border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
+    }
   }
+
   &:focus-within {
     &:hover {
       ${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true, device)}
@@ -81,17 +102,6 @@ const StyledCheckBox = (0, import_ds_system.styled)("span")`
       border: 2px solid ${({ theme }) => theme.colors.brand[600]};
     }
   }
-
-  &:after {
-    content: '';
-    border-radius: 2px;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
-  }
 `;
 const checkboxStyles = import_ds_system.css`
   &:hover {

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledInputMixed = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  ${({ 'aria-disabled': disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n  margin: 2px 0px -2px 8px;\n  ${({ wrapLabel, theme }) =>\n    wrapLabel\n      ? `\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  word-break: break-word;\n`\n      : `margin-left: ${theme.space.xxs}`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 13px;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 5px 0px -5px 8px;\n      font-size: 16px;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 5px 0px -5px 8px;\n          font-size: 16px;\n          line-height: 1.2;\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n    font-size: 13px;\n    line-height: 1.1;\n    `;\n  }}\n\n  display: inherit;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 24px auto;\n        }\n        grid-template-columns: ${theme.space.xs} auto;\n    `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n    `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: flex-start;\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledInputMixed = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  ${({ 'aria-disabled': disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n  margin: 2px 0px -2px 8px;\n  ${({ wrapLabel, theme }) =>\n    wrapLabel\n      ? `\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  word-break: break-word;\n`\n      : `margin-left: ${theme.space.xxs}`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 13px;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 5px 0px -5px 8px;\n      font-size: 16px;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 5px 0px -5px 8px;\n          font-size: 16px;\n          line-height: 1.2;\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n    font-size: 13px;\n    line-height: 1.1;\n    `;\n  }}\n\n  display: inherit;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 24px auto;\n        }\n        grid-template-columns: ${theme.space.xs} auto;\n    `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n    `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: flex-start;\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/utils/styleHelpers.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -41,7 +45,7 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
     return colors.neutral[500];
   }
   if (isHovering) {
-    return colors.brand[400];
+    return colors.brand[600];
   }
   return colors.brand[600];
 };

package/dist/cjs/utils/styleHelpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[400];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 7px;\n  left: 4px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: ${theme.space.xxs};\n  height: 2px;\n`;\n\n  const normalMixedCheckmark = `\n  @media (max-width: ${theme.breakpoints.small}) {\n    top:11px;\n    left:6px;\n    height:2px;\n    width:12px;\n  }\n  ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  top:11px;\n  left:6px;\n  height:2px;\n  width:12px;\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 4px;\nleft: 3px;\nborder-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 5px;\nwidth: 10px;\ntransform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 6px;\n  left: 4px;\n  height: 8px;\n  width: 17px;\n}\n${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n${desktopCheckmark}\ntop: 6px;\nleft: 4px;\nheight: 8px;\nwidth: 17px;\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,uBACR,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC;AAAA;AAEF,QAAM,uBAAuB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,2BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMtG,QAAM,kBAAkB;AAAA,qBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrC;AAAA;AAEA,QAAM,kBAAkB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 7px;\n  left: 4px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: ${theme.space.xxs};\n  height: 2px;\n`;\n\n  const normalMixedCheckmark = `\n  @media (max-width: ${theme.breakpoints.small}) {\n    top:11px;\n    left:6px;\n    height:2px;\n    width:12px;\n  }\n  ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  top:11px;\n  left:6px;\n  height:2px;\n  width:12px;\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 4px;\nleft: 3px;\nborder-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 5px;\nwidth: 10px;\ntransform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 6px;\n  left: 4px;\n  height: 8px;\n  width: 17px;\n}\n${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n${desktopCheckmark}\ntop: 6px;\nleft: 4px;\nheight: 8px;\nwidth: 17px;\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,uBACR,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC;AAAA;AAEF,QAAM,uBAAuB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,2BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMtG,QAAM,kBAAkB;AAAA,qBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrC;AAAA;AAEA,QAAM,kBAAkB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
   "names": []
 }

package/dist/esm/ControlledCheckbox.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe } from "@elliemae/ds-utilities";
-import { propTypes } from "./react-desc-prop-types";
-import { useCheckBox } from "./config/useCheckBox";
-import { ControlledCheckBoxContext } from "./ControlledCheckboxCTX";
-import { ControlledCheckBoxContent } from "./parts/ControlledCheckBoxContent";
+import { describe } from "@elliemae/ds-props-helpers";
+import { propTypes } from "./react-desc-prop-types.js";
+import { useCheckBox } from "./config/useCheckBox.js";
+import { ControlledCheckBoxContext } from "./ControlledCheckboxCTX.js";
+import { ControlledCheckBoxContent } from "./parts/ControlledCheckBoxContent.js";
 const DSControlledCheckbox = (props) => {
   const ctx = useCheckBox(props);
   return /* @__PURE__ */ jsx(ControlledCheckBoxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(ControlledCheckBoxContent, {}) });

package/dist/esm/ControlledCheckbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckbox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { useCheckBox } from './config/useCheckBox';\nimport { ControlledCheckBoxContext } from './ControlledCheckboxCTX';\nimport { ControlledCheckBoxContent } from './parts/ControlledCheckBoxContent';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n  const ctx = useCheckBox(props);\n  return (\n    <ControlledCheckBoxContext.Provider value={ctx}>\n      <ControlledCheckBoxContent />\n    </ControlledCheckBoxContext.Provider>\n  );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { useCheckBox } from './config/useCheckBox.js';\nimport { ControlledCheckBoxContext } from './ControlledCheckboxCTX.js';\nimport { ControlledCheckBoxContent } from './parts/ControlledCheckBoxContent.js';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n  const ctx = useCheckBox(props);\n  return (\n    <ControlledCheckBoxContext.Provider value={ctx}>\n      <ControlledCheckBoxContent />\n    </ControlledCheckBoxContext.Provider>\n  );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACcjB;AAXN,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAE1C,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACzC,8BAAC,6BAA0B,GAC7B;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
   "names": []
 }

package/dist/esm/ControlledCheckboxCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckboxCTX.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { ControlledCheckboxCTX } from './config/useCheckBox';\n\nconst defaultContext = {} as ControlledCheckboxCTX;\n\n/** Context for cross component communication */\nexport const ControlledCheckBoxContext = createContext<ControlledCheckboxCTX>(defaultContext);\n\nexport default ControlledCheckBoxContext;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { ControlledCheckboxCTX } from './config/useCheckBox.js';\n\nconst defaultContext = {} as ControlledCheckboxCTX;\n\n/** Context for cross component communication */\nexport const ControlledCheckBoxContext = createContext<ControlledCheckboxCTX>(defaultContext);\n\nexport default ControlledCheckBoxContext;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,4BAA4B,cAAqC,cAAc;AAE5F,IAAO,gCAAQ;",
   "names": []
 }

package/dist/esm/config/useCheckBox.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import React2 from "react";
-import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
-import { propTypes, defaultProps } from "../react-desc-prop-types";
-import { useValidateProps } from "./useValidateProps";
-import { useEventHandlers } from "./useEventHandlers";
+import { propTypes, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+import { useEventHandlers } from "./useEventHandlers.js";
 const useCheckBox = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateProps(props, propTypes);

package/dist/esm/config/useCheckBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCheckBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types';\nimport { propTypes, defaultProps } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useEventHandlers } from './useEventHandlers';\n\nexport interface ControlledCheckboxCTX extends ReturnType<typeof useEventHandlers> {\n  propsWithDefault: DSControlledCheckboxT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useCheckBox = (props: DSControlledCheckboxT.Props): ControlledCheckboxCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledCheckboxT.InternalProps>(props, defaultProps);\n  useValidateProps(props, propTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledCheckboxT.InternalProps>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { id } = globalProps;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const eventHandlers = useEventHandlers(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      ...eventHandlers,\n    }),\n    [eventHandlers, globalProps, instanceUid, propsWithDefault, xstyledProps],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\nimport { propTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useEventHandlers } from './useEventHandlers.js';\n\nexport interface ControlledCheckboxCTX extends ReturnType<typeof useEventHandlers> {\n  propsWithDefault: DSControlledCheckboxT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useCheckBox = (props: DSControlledCheckboxT.Props): ControlledCheckboxCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledCheckboxT.InternalProps>(props, defaultProps);\n  useValidateProps(props, propTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledCheckboxT.InternalProps>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { id } = globalProps;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const eventHandlers = useEventHandlers(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      ...eventHandlers,\n    }),\n    [eventHandlers, globalProps, instanceUid, propsWithDefault, xstyledProps],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AAEpB,SAAS,WAAW,oBAAoB;AACxC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAS1B,MAAM,cAAc,CAAC,UAA8D;AAIxF,QAAM,mBAAmB,6BAAkE,OAAO,YAAY;AAC9G,mBAAiB,OAAO,SAAS;AAIjC,QAAM,cAAc,uBAA4D,gBAAgB;AAChG,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAK1D,QAAM,gBAAgB,iBAAiB,gBAAgB;AAEvD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,aAAa,aAAa,kBAAkB,YAAY;AAAA,EAC1E;AACF;",
   "names": ["React"]
 }

package/dist/esm/config/useEventHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useEventHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types';\n\nexport const useEventHandlers = (props: DSControlledCheckboxT.InternalProps) => {\n  const { checked, onChange, onKeyDown } = props;\n  const handleOnChange = React.useCallback(\n    (\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (onChange) {\n        if (checked === 'mixed') onChange(true, e);\n        if (checked === true) onChange(false, e);\n        if (checked === false) onChange(true, e);\n      }\n    },\n    [checked, onChange],\n  );\n  const handleMixedCheckboxOnKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) {\n        // if user provides 'onKeyDown' event, he is in charge of what happens\n        onKeyDown(e);\n      }\n      if (e.code === 'Space' || e.code === 'Enter') {\n        handleOnChange(e);\n        e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\n      }\n    },\n    [handleOnChange, onKeyDown],\n  );\n\n  return React.useMemo(\n    () => ({\n      handleOnChange,\n      handleMixedCheckboxOnKeyDown,\n    }),\n    [handleMixedCheckboxOnKeyDown, handleOnChange],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useEventHandlers = (props: DSControlledCheckboxT.InternalProps) => {\n  const { checked, onChange, onKeyDown } = props;\n  const handleOnChange = React.useCallback(\n    (\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (onChange) {\n        if (checked === 'mixed') onChange(true, e);\n        if (checked === true) onChange(false, e);\n        if (checked === false) onChange(true, e);\n      }\n    },\n    [checked, onChange],\n  );\n  const handleMixedCheckboxOnKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) {\n        // if user provides 'onKeyDown' event, he is in charge of what happens\n        onKeyDown(e);\n      }\n      if (e.code === 'Space' || e.code === 'Enter') {\n        handleOnChange(e);\n        e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\n      }\n    },\n    [handleOnChange, onKeyDown],\n  );\n\n  return React.useMemo(\n    () => ({\n      handleOnChange,\n      handleMixedCheckboxOnKeyDown,\n    }),\n    [handleMixedCheckboxOnKeyDown, handleOnChange],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGX,MAAM,mBAAmB,CAAC,UAA+C;AAC9E,QAAM,EAAE,SAAS,UAAU,UAAU,IAAI;AACzC,QAAM,iBAAiBA,OAAM;AAAA,IAC3B,CACE,MAKG;AACH,UAAI,UAAU;AACZ,YAAI,YAAY;AAAS,mBAAS,MAAM,CAAC;AACzC,YAAI,YAAY;AAAM,mBAAS,OAAO,CAAC;AACvC,YAAI,YAAY;AAAO,mBAAS,MAAM,CAAC;AAAA,MACzC;AAAA,IACF;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AACA,QAAM,+BAA+BA,OAAM;AAAA,IACzC,CAAC,MAA2C;AAC1C,UAAI,WAAW;AAEb,kBAAU,CAAC;AAAA,MACb;AACA,UAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,SAAS;AAAA,EAC5B;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,8BAA8B,cAAc;AAAA,EAC/C;AACF;",
   "names": ["React"]
 }

package/dist/esm/config/useValidateProps.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
-import { DSCheckboxName } from "../exported-related";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSCheckboxName } from "../exported-related/index.js";
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);
 };

package/dist/esm/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSCheckboxName } from '../exported-related';\nimport type { WeakValidationMap } from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../exported-related/index.js';\nimport type { WeakValidationMap } from 'react';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAC/C,SAAS,sBAAsB;AAIxB,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,iCAA+B,OAAO,WAAW,cAAc;AACjE;",
   "names": []
 }

package/dist/esm/exported-related/index.js

@@ -1,4 +1,4 @@
 import * as React from "react";
-export * from "./data-test-ids";
-export * from "./theming";
+export * from "./data-test-ids.js";
+export * from "./theming.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/exported-related/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids';\nexport * from './theming';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids.js';\nexport * from './theming.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DSControlledCheckbox, DSControlledCheckboxWithSchema } from "./ControlledCheckbox";
+import { DSControlledCheckbox, DSControlledCheckboxWithSchema } from "./ControlledCheckbox.js";
 export {
   DSControlledCheckbox,
   DSControlledCheckboxWithSchema

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './ControlledCheckbox';\nexport type { DSControlledCheckboxT } from './react-desc-prop-types';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB,sCAAsC;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/parts/ControlledCheckBoxContent.js

@@ -2,9 +2,9 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from "../styles";
-import { MainInput } from "./MainInput";
-import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX";
+import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from "../styles.js";
+import { MainInput } from "./MainInput.js";
+import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX.js";
 const ControlledCheckBoxContent = () => {
   const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = React2.useContext(ControlledCheckBoxContext);
   const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;

package/dist/esm/parts/ControlledCheckBoxContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledCheckBoxContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles';\nimport { MainInput } from './MainInput';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n      <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n      <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACanB,SAEI,KAFJ;AAbJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,sBAAsB;AAC9E,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM,EAAE,SAAS,QAAQ,OAAO,UAAU,WAAW,cAAc,mBAAmB,IAAI;AAC1F,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,SACE,qBAAC,mBAAgB,QAAgB,eAAY,yBAAwB,WAAuB,GAAG,cAC7F;AAAA,wBAAC,kBAAe,QAAgB,SAAkB,UAAoB,UAAoB,UACxF,8BAAC,aAAU,GACb;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG;AAAA,QACP,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,QAEvF,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/MainInput.js

@@ -1,17 +1,20 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2 from "react";
-import { StyledInput, StyledInputMixed } from "../styles";
-import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX";
+import { StyledInput, StyledInputMixed } from "../styles.js";
+import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX.js";
 const MainInput = () => {
   const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } = React2.useContext(ControlledCheckBoxContext);
   const {
     disabled,
     readOnly,
+    // label,
     tabIndex,
     innerRef,
     checked,
     ariaControls: camelCaseAriaControls
+    // ariaLabel: camelCaseAriaLabel,
+    // externalLabel,
   } = propsWithDefault;
   const { "aria-controls": ariaControls } = globalProps;
   const canShowMixedState = ariaControls || camelCaseAriaControls;
@@ -20,7 +23,9 @@ const MainInput = () => {
     "data-testid": "ds-checkbox",
     "aria-labelledby": `${instanceUid}_label ${instanceUid}_block_label`,
     "aria-checked": checked,
+    // if user doesn't provide aria-checked, we make this the same as the actual value
     ...globalProps
+    // any props provided by the user will over-ride ours
   };
   if (canShowMixedState)
     return /* @__PURE__ */ jsx(

package/dist/esm/parts/MainInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledInput, StyledInputMixed } from '../styles';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    ariaControls: camelCaseAriaControls,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-labelledby': `${instanceUid}_label ${instanceUid}_block_label`,\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (canShowMixedState)\n    return (\n      <StyledInputMixed\n        {...mainInputProps}\n        role=\"checkbox\"\n        aria-controls={ariaControls || camelCaseAriaControls}\n        aria-disabled={disabled}\n        onClick={!disabled && !readOnly ? handleOnChange : undefined}\n        onKeyDown={handleMixedCheckboxOnKeyDown}\n        tabIndex={disabled ? -1 : tabIndex}\n        ref={innerRef}\n        onMouseDown={(e: React.MouseEvent) => {\n          if (disabled) e.preventDefault();\n        }}\n      />\n    );\n  return (\n    <StyledInput\n      {...mainInputProps}\n      type=\"checkbox\"\n      checked={checked as boolean | undefined}\n      onChange={handleOnChange}\n      onKeyDown={handleMixedCheckboxOnKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      ref={innerRef}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,OAAOA,YAAW;AAClB,SAAS,aAAa,wBAAwB;AAC9C,SAAS,iCAAiC;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/FA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAGhB,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAQ1C,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,mBAAmB,GAAG,qBAAqB;AAAA,IAC3C,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL;AAEA,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B,KAAK;AAAA,QACL,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,KAAK;AAAA;AAAA,EACP;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    ariaControls: camelCaseAriaControls,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-labelledby': `${instanceUid}_label ${instanceUid}_block_label`,\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (canShowMixedState)\n    return (\n      <StyledInputMixed\n        {...mainInputProps}\n        role=\"checkbox\"\n        aria-controls={ariaControls || camelCaseAriaControls}\n        aria-disabled={disabled}\n        onClick={!disabled && !readOnly ? handleOnChange : undefined}\n        onKeyDown={handleMixedCheckboxOnKeyDown}\n        tabIndex={disabled ? -1 : tabIndex}\n        ref={innerRef}\n        onMouseDown={(e: React.MouseEvent) => {\n          if (disabled) e.preventDefault();\n        }}\n      />\n    );\n  return (\n    <StyledInput\n      {...mainInputProps}\n      type=\"checkbox\"\n      checked={checked as boolean | undefined}\n      onChange={handleOnChange}\n      onKeyDown={handleMixedCheckboxOnKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      ref={innerRef}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,OAAOA,YAAW;AAClB,SAAS,aAAa,wBAAwB;AAC9C,SAAS,iCAAiC;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/FA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA;AAAA;AAAA,EAGhB,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAQ1C,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,mBAAmB,GAAG,qBAAqB;AAAA,IAC3C,gBAAgB;AAAA;AAAA,IAChB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B,KAAK;AAAA,QACL,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,KAAK;AAAA;AAAA,EACP;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/react-desc-prop-types.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
-import { DEVICE } from "./constants/device";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import { DEVICE } from "./constants/device.js";
 const defaultProps = {
   wrapLabel: false,
   hasError: false,

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\n\nexport declare namespace DSControlledCheckboxT {\n  type DevicesKeys = keyof typeof DEVICE;\n  type Devices = (typeof DEVICE)[DevicesKeys];\n\n  export interface DefaultProps {\n    checked: boolean | 'mixed';\n    tabIndex: WCAGTabIndex;\n    hasError: boolean;\n    wrapLabel: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    onChange: (\n      newVal: boolean,\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => void;\n  }\n\n  export interface OptionalProps {\n    onKeyDown?: React.KeyboardEventHandler;\n    innerRef?: React.RefObject<HTMLInputElement>;\n    'data-testid'?: string;\n    device?: Devices;\n  }\n\n  export interface LegacyAriaProps {\n    ariaControls?: string;\n    ariaLabel?: string;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      LegacyAriaProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      LegacyAriaProps {}\n\n  export interface StyledCheckBoxT {\n    checked: boolean | 'mixed';\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    readOnly?: boolean;\n    checked: boolean | 'mixed';\n    wrapLabel: boolean;\n    device?: Devices;\n  }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  readOnly: false,\n  tabIndex: 0,\n  onChange: () => {},\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n    .description('Wheter the checkbox is set as bool or mixed')\n    .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n    .defaultValue(false),\n  onChange: PropTypes.func\n    .description('function executed when the checkbox changes state')\n    .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n    .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n  'aria-controls': PropTypes.string\n    .description('a11y required attribute when \"mixed\" state is to be supported')\n    .isRequiredIf(\n      (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n    ),\n  ariaControls: PropTypes.string\n    .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n    .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n    .isRequiredIf(\n      (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n    ),\n  label: PropTypes.string.description(\n    'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n  ),\n  hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n  disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n  device: PropTypes.oneOf(Object.values(DEVICE)).description(\n    'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n  ),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,cAAc;AAgEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,UAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,UAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB;AAAA,EACzG;AAAA,EACF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,MAAM,OAAO,OAAO,MAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { DEVICE } from './constants/device.js';\n\nexport declare namespace DSControlledCheckboxT {\n  type DevicesKeys = keyof typeof DEVICE;\n  type Devices = (typeof DEVICE)[DevicesKeys];\n\n  export interface DefaultProps {\n    checked: boolean | 'mixed';\n    tabIndex: WCAGTabIndex;\n    hasError: boolean;\n    wrapLabel: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    onChange: (\n      newVal: boolean,\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => void;\n  }\n\n  export interface OptionalProps {\n    onKeyDown?: React.KeyboardEventHandler;\n    innerRef?: React.RefObject<HTMLInputElement>;\n    'data-testid'?: string;\n    device?: Devices;\n  }\n\n  export interface LegacyAriaProps {\n    ariaControls?: string;\n    ariaLabel?: string;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      LegacyAriaProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      LegacyAriaProps {}\n\n  export interface StyledCheckBoxT {\n    checked: boolean | 'mixed';\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    readOnly?: boolean;\n    checked: boolean | 'mixed';\n    wrapLabel: boolean;\n    device?: Devices;\n  }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  readOnly: false,\n  tabIndex: 0,\n  onChange: () => {},\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n    .description('Wheter the checkbox is set as bool or mixed')\n    .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n    .defaultValue(false),\n  onChange: PropTypes.func\n    .description('function executed when the checkbox changes state')\n    .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n    .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n  'aria-controls': PropTypes.string\n    .description('a11y required attribute when \"mixed\" state is to be supported')\n    .isRequiredIf(\n      (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n    ),\n  ariaControls: PropTypes.string\n    .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n    .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n    .isRequiredIf(\n      (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n    ),\n  label: PropTypes.string.description(\n    'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n  ),\n  hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n  disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n  device: PropTypes.oneOf(Object.values(DEVICE)).description(\n    'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n  ),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,cAAc;AAgEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,UAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,UAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,eAAe,MAAM;AAAA,EACzG;AAAA,EACF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,MAAM,OAAO,OAAO,MAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
   "names": []
 }

package/dist/esm/styles.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
-import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers";
-import { DSCheckboxName, DSCheckboxSlots } from "./exported-related";
+import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers.js";
+import { DSCheckboxName, DSCheckboxSlots } from "./exported-related/index.js";
 const StyledCheckBox = styled("span")`
   position: relative;
   background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
@@ -29,9 +29,26 @@ const StyledCheckBox = styled("span")`
 }}
 
   ${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}
+
+  &:after {
+    content: '';
+    border-radius: 2px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+  }
+
   &:hover {
     background: ${({ theme, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
+
+    &:after {
+      border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
+    }
   }
+
   &:focus-within {
     &:hover {
       ${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}
@@ -47,17 +64,6 @@ const StyledCheckBox = styled("span")`
       border: 2px solid ${({ theme }) => theme.colors.brand[600]};
     }
   }
-
-  &:after {
-    content: '';
-    border-radius: 2px;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
-  }
 `;
 const checkboxStyles = css`
   &:hover {

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledInputMixed = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  ${({ 'aria-disabled': disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n  margin: 2px 0px -2px 8px;\n  ${({ wrapLabel, theme }) =>\n    wrapLabel\n      ? `\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  word-break: break-word;\n`\n      : `margin-left: ${theme.space.xxs}`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 13px;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 5px 0px -5px 8px;\n      font-size: 16px;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 5px 0px -5px 8px;\n          font-size: 16px;\n          line-height: 1.2;\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n    font-size: 13px;\n    line-height: 1.1;\n    `;\n  }}\n\n  display: inherit;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 24px auto;\n        }\n        grid-template-columns: ${theme.space.xs} auto;\n    `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n    `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: flex-start;\n  ${xStyledCommonProps}\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledInputMixed = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  ${({ 'aria-disabled': disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n  margin: 2px 0px -2px 8px;\n  ${({ wrapLabel, theme }) =>\n    wrapLabel\n      ? `\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  word-break: break-word;\n`\n      : `margin-left: ${theme.space.xxs}`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 13px;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 5px 0px -5px 8px;\n      font-size: 16px;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 5px 0px -5px 8px;\n          font-size: 16px;\n          line-height: 1.2;\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n    font-size: 13px;\n    line-height: 1.1;\n    `;\n  }}\n\n  display: inherit;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 24px auto;\n        }\n        grid-template-columns: ${theme.space.xs} auto;\n    `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n    `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: flex-start;\n  ${xStyledCommonProps}\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/utils/styleHelpers.js

@@ -10,7 +10,7 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
     return colors.neutral[500];
   }
   if (isHovering) {
-    return colors.brand[400];
+    return colors.brand[600];
   }
   return colors.brand[600];
 };