@elliemae/ds-form-checkbox 3.14.0-next.9 → 3.14.0-rc.1

package/dist/cjs/styles.js

@@ -52,13 +52,13 @@ const StyledCheckBox = (0, import_ds_system.styled)("span")`
           width: 1.8rem;
           height: 1.8rem;
         }
-        width: 1.2rem;
-        height: 1.2rem;
+        width: 1.23rem;
+        height: 1.23rem;
       `;
   }
   return `
-      width: 1.2rem;
-      height: 1.2rem;
+      width: 1.23rem;
+      height: 1.23rem;
     `;
 }}
 
@@ -71,6 +71,12 @@ const StyledCheckBox = (0, import_ds_system.styled)("span")`
       ${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true, device)}
     }
 
+    &:after {
+      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    }
+  }
+
+  &:active {
     &:after {
       border: 2px solid ${({ theme }) => theme.colors.brand[600]};
     }
@@ -121,22 +127,21 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
   name: import_exported_related.DSCheckboxName,
   slot: import_exported_related.DSCheckboxSlots.LABEL
 })`
-  margin: 0px 0px 0px 0.6rem;
+  margin: 0.154rem 0px -0.154rem 0.615rem;
   ${({ wrapLabel, theme }) => wrapLabel ? `
   overflow-wrap: break-word;
   white-space: pre-wrap;
   word-break: break-word;
-` : `margin-left: 0.6rem`};
+` : `margin-left: 0.615rem`};
 
-  color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
+  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
   font-size: 1rem;
-  line-height: 1.1;
 
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `
       margin: 0.4rem 0px -0.4rem 0.6rem;
-      font-size: 1.2rem;
+      font-size: 1.23rem;
       line-height: 1.2;
       `;
   }
@@ -144,7 +149,7 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
           margin: 0.4rem 0px -0.4rem 0.6rem;
-          font-size: 1.2rem;
+          font-size: 1.23rem;
           line-height: 1.2;
         }
 
@@ -181,16 +186,16 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
         @media (max-width: ${theme.breakpoints.small}) {
           grid-template-columns: 1.8rem auto;
         }
-        grid-template-columns: 1.2rem auto;
+        grid-template-columns: 1.23rem auto;
     `;
   }
   return `
-      grid-template-columns: 1.2rem auto;
+      grid-template-columns: 1.23rem auto;
   `;
 }}
   display: inline-grid;
   grid-template-rows: min-content;
-  align-items: center;
+  align-items: flex-start;
   ${import_ds_system.xStyledCommonProps}
 `;
 //# sourceMappingURL=styles.js.map

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: 1.8rem;\n      height: 1.8rem;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n        width: 1.2rem;\n        height: 1.2rem;\n      `;\n    }\n    return `\n      width: 1.2rem;\n      height: 1.2rem;\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[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: 0px 0px 0px 0.6rem;\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: 0.6rem`};\n\n  color: ${({ theme, disabled, readOnly }) =>\n    disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  font-size: 1rem;\n  line-height: 1.1;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 0.4rem 0px -0.4rem 0.6rem;\n      font-size: 1.2rem;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 0.4rem 0px -0.4rem 0.6rem;\n          font-size: 1.2rem;\n          line-height: 1.2;\n        }\n\n        font-size: 1rem;\n        line-height: 1.1;\n      `;\n    }\n    return `\n      font-size: 1rem;\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: 1.8rem auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.8rem auto;\n        }\n        grid-template-columns: 1.2rem auto;\n    `;\n    }\n    return `\n      grid-template-columns: 1.2rem auto;\n  `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: center;\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';\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: 1.8rem;\n      height: 1.8rem;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n        width: 1.23rem;\n        height: 1.23rem;\n      `;\n    }\n    return `\n      width: 1.23rem;\n      height: 1.23rem;\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: 0.154rem 0px -0.154rem 0.615rem;\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: 0.615rem`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 1rem;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 0.4rem 0px -0.4rem 0.6rem;\n      font-size: 1.23rem;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 0.4rem 0px -0.4rem 0.6rem;\n          font-size: 1.23rem;\n          line-height: 1.2;\n        }\n\n        font-size: 1rem;\n        line-height: 1.1;\n      `;\n    }\n    return `\n      font-size: 1rem;\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: 1.8rem auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.8rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n      grid-template-columns: 1.23rem 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

@@ -34,13 +34,16 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
   if (hasError) {
     return colors.danger[900];
   }
-  if (disabled || readOnly) {
+  if (readOnly) {
+    return colors.neutral[500];
+  }
+  if (disabled) {
     return colors.neutral[500];
   }
   if (isHovering) {
-    return colors.brand[800];
+    return colors.brand[400];
   }
-  return colors.brand[500];
+  return colors.brand[600];
 };
 const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
   const desktopMixedCheckmark = `
@@ -84,7 +87,7 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
       top: 0.45rem;
       left: 0.3rem;
       height: 0.6rem;
-      width: 1.2rem;
+      width: 1.23rem;
     }
     ${desktopCheckmark}
 `;
@@ -93,7 +96,7 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
     top: 0.45rem;
     left: 0.3rem;
     height: 0.6rem;
-    width: 1.2rem;
+    width: 1.23rem;
   `;
   if (checked === "mixed") {
     return `&:before {

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 (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[800];\n  }\n  return colors.brand[500];\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: 0.525rem;\n  left: 0.3rem;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: 0.6rem;\n  height: 0.15rem;\n`;\n\n  const normalMixedCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top:0.85rem;\n      left:0.45rem;\n      height:0.15rem;\n      width:0.9rem;\n    }\n    ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n    ${desktopMixedCheckmark}\n    top:0.85rem;\n    left:0.45rem;\n    height:0.15rem;\n    width:0.9rem;\n  `;\n  const desktopCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.3rem;\n  left: 0.225rem;\n  border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  height: 0.4rem;\n  width: 0.75rem;\n  transform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.45rem;\n      left: 0.3rem;\n      height: 0.6rem;\n      width: 1.2rem;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    top: 0.45rem;\n    left: 0.3rem;\n    height: 0.6rem;\n    width: 1.2rem;\n  `;\n\n  if (checked === 'mixed') {\n    return `&:before {\n      ${\n        device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n      }\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,YAAY,UAAU;AACxB,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;AAAA;AAAA;AAK3F,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM3G,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;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[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: 0.525rem;\n  left: 0.3rem;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: 0.6rem;\n  height: 0.15rem;\n`;\n\n  const normalMixedCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top:0.85rem;\n      left:0.45rem;\n      height:0.15rem;\n      width:0.9rem;\n    }\n    ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n    ${desktopMixedCheckmark}\n    top:0.85rem;\n    left:0.45rem;\n    height:0.15rem;\n    width:0.9rem;\n  `;\n  const desktopCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.3rem;\n  left: 0.225rem;\n  border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  height: 0.4rem;\n  width: 0.75rem;\n  transform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.45rem;\n      left: 0.3rem;\n      height: 0.6rem;\n      width: 1.23rem;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    top: 0.45rem;\n    left: 0.3rem;\n    height: 0.6rem;\n    width: 1.23rem;\n  `;\n\n  if (checked === 'mixed') {\n    return `&:before {\n      ${\n        device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n      }\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;AAAA;AAAA;AAK3F,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM3G,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;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;",
   "names": []
 }

package/dist/esm/styles.js

@@ -18,13 +18,13 @@ const StyledCheckBox = styled("span")`
           width: 1.8rem;
           height: 1.8rem;
         }
-        width: 1.2rem;
-        height: 1.2rem;
+        width: 1.23rem;
+        height: 1.23rem;
       `;
   }
   return `
-      width: 1.2rem;
-      height: 1.2rem;
+      width: 1.23rem;
+      height: 1.23rem;
     `;
 }}
 
@@ -37,6 +37,12 @@ const StyledCheckBox = styled("span")`
       ${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}
     }
 
+    &:after {
+      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    }
+  }
+
+  &:active {
     &:after {
       border: 2px solid ${({ theme }) => theme.colors.brand[600]};
     }
@@ -87,22 +93,21 @@ const StyledLabel = styled("label", {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.LABEL
 })`
-  margin: 0px 0px 0px 0.6rem;
+  margin: 0.154rem 0px -0.154rem 0.615rem;
   ${({ wrapLabel, theme }) => wrapLabel ? `
   overflow-wrap: break-word;
   white-space: pre-wrap;
   word-break: break-word;
-` : `margin-left: 0.6rem`};
+` : `margin-left: 0.615rem`};
 
-  color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
+  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
   font-size: 1rem;
-  line-height: 1.1;
 
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `
       margin: 0.4rem 0px -0.4rem 0.6rem;
-      font-size: 1.2rem;
+      font-size: 1.23rem;
       line-height: 1.2;
       `;
   }
@@ -110,7 +115,7 @@ const StyledLabel = styled("label", {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
           margin: 0.4rem 0px -0.4rem 0.6rem;
-          font-size: 1.2rem;
+          font-size: 1.23rem;
           line-height: 1.2;
         }
 
@@ -147,16 +152,16 @@ const StyledContainer = styled("div", {
         @media (max-width: ${theme.breakpoints.small}) {
           grid-template-columns: 1.8rem auto;
         }
-        grid-template-columns: 1.2rem auto;
+        grid-template-columns: 1.23rem auto;
     `;
   }
   return `
-      grid-template-columns: 1.2rem auto;
+      grid-template-columns: 1.23rem auto;
   `;
 }}
   display: inline-grid;
   grid-template-rows: min-content;
-  align-items: center;
+  align-items: flex-start;
   ${xStyledCommonProps}
 `;
 export {

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: 1.8rem;\n      height: 1.8rem;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n        width: 1.2rem;\n        height: 1.2rem;\n      `;\n    }\n    return `\n      width: 1.2rem;\n      height: 1.2rem;\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[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: 0px 0px 0px 0.6rem;\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: 0.6rem`};\n\n  color: ${({ theme, disabled, readOnly }) =>\n    disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  font-size: 1rem;\n  line-height: 1.1;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 0.4rem 0px -0.4rem 0.6rem;\n      font-size: 1.2rem;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 0.4rem 0px -0.4rem 0.6rem;\n          font-size: 1.2rem;\n          line-height: 1.2;\n        }\n\n        font-size: 1rem;\n        line-height: 1.1;\n      `;\n    }\n    return `\n      font-size: 1rem;\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: 1.8rem auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.8rem auto;\n        }\n        grid-template-columns: 1.2rem auto;\n    `;\n    }\n    return `\n      grid-template-columns: 1.2rem auto;\n  `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: center;\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';\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: 1.8rem;\n      height: 1.8rem;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n        width: 1.23rem;\n        height: 1.23rem;\n      `;\n    }\n    return `\n      width: 1.23rem;\n      height: 1.23rem;\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: 0.154rem 0px -0.154rem 0.615rem;\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: 0.615rem`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 1rem;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 0.4rem 0px -0.4rem 0.6rem;\n      font-size: 1.23rem;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 0.4rem 0px -0.4rem 0.6rem;\n          font-size: 1.23rem;\n          line-height: 1.2;\n        }\n\n        font-size: 1rem;\n        line-height: 1.1;\n      `;\n    }\n    return `\n      font-size: 1rem;\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: 1.8rem auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.8rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n      grid-template-columns: 1.23rem auto;\n  `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: flex-start;\n  ${xStyledCommonProps}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,iBAAiB,OAAO,MAAM;AAAA;AAAA,gBAE3B,CAAC,EAAE,OAAO,SAAS,MAAM,sBAAsB,OAAO,QAAQ;AAAA;AAAA,IAE1E,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3C;AACA,SAAO;AAAA;AAAA;AAAA;AAIT;AAAA;AAAA,IAEE,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA,kBAE7D,CAAC,EAAE,OAAO,SAAS,MAAO,CAAC,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA,QAI1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,0BAIxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMlC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYpC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI7G,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahB,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,iBAAiB,SAAS,MAC7B,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAM,MACpB,YACI;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA,WAEG,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7F,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS3C;AACA,SAAO;AAAA;AAAA;AAAA;AAIT;AAAA;AAAA;AAAA;AAAA,IAIE,CAAC,EAAE,SAAS,MACZ,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;AAErC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA,EAET;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3C;AACA,SAAO;AAAA;AAAA;AAGT;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA;",
   "names": []
 }

package/dist/esm/utils/styleHelpers.js

@@ -3,13 +3,16 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
   if (hasError) {
     return colors.danger[900];
   }
-  if (disabled || readOnly) {
+  if (readOnly) {
+    return colors.neutral[500];
+  }
+  if (disabled) {
     return colors.neutral[500];
   }
   if (isHovering) {
-    return colors.brand[800];
+    return colors.brand[400];
   }
-  return colors.brand[500];
+  return colors.brand[600];
 };
 const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
   const desktopMixedCheckmark = `
@@ -53,7 +56,7 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
       top: 0.45rem;
       left: 0.3rem;
       height: 0.6rem;
-      width: 1.2rem;
+      width: 1.23rem;
     }
     ${desktopCheckmark}
 `;
@@ -62,7 +65,7 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
     top: 0.45rem;
     left: 0.3rem;
     height: 0.6rem;
-    width: 1.2rem;
+    width: 1.23rem;
   `;
   if (checked === "mixed") {
     return `&:before {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[800];\n  }\n  return colors.brand[500];\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: 0.525rem;\n  left: 0.3rem;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: 0.6rem;\n  height: 0.15rem;\n`;\n\n  const normalMixedCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top:0.85rem;\n      left:0.45rem;\n      height:0.15rem;\n      width:0.9rem;\n    }\n    ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n    ${desktopMixedCheckmark}\n    top:0.85rem;\n    left:0.45rem;\n    height:0.15rem;\n    width:0.9rem;\n  `;\n  const desktopCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.3rem;\n  left: 0.225rem;\n  border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  height: 0.4rem;\n  width: 0.75rem;\n  transform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.45rem;\n      left: 0.3rem;\n      height: 0.6rem;\n      width: 1.2rem;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    top: 0.45rem;\n    left: 0.3rem;\n    height: 0.6rem;\n    width: 1.2rem;\n  `;\n\n  if (checked === 'mixed') {\n    return `&:before {\n      ${\n        device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n      }\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,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;AAAA;AAAA;AAK3F,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM3G,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;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": ["import * as React from 'react';\nexport { React };\n", "/* 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: 0.525rem;\n  left: 0.3rem;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: 0.6rem;\n  height: 0.15rem;\n`;\n\n  const normalMixedCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top:0.85rem;\n      left:0.45rem;\n      height:0.15rem;\n      width:0.9rem;\n    }\n    ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n    ${desktopMixedCheckmark}\n    top:0.85rem;\n    left:0.45rem;\n    height:0.15rem;\n    width:0.9rem;\n  `;\n  const desktopCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.3rem;\n  left: 0.225rem;\n  border-left: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  border-bottom: 0.2rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  height: 0.4rem;\n  width: 0.75rem;\n  transform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.45rem;\n      left: 0.3rem;\n      height: 0.6rem;\n      width: 1.23rem;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    top: 0.45rem;\n    left: 0.3rem;\n    height: 0.6rem;\n    width: 1.23rem;\n  `;\n\n  if (checked === 'mixed') {\n    return `&:before {\n      ${\n        device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n      }\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACKhB,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;AAAA;AAAA;AAK3F,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM3G,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;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;",
   "names": []
 }

package/dist/types/ControlledCheckbox.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DSControlledCheckboxT } from './react-desc-prop-types';
+declare const DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props>;
+declare const DSControlledCheckboxWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSControlledCheckboxT.Props>;
+export { DSControlledCheckbox, DSControlledCheckboxWithSchema };

package/dist/types/ControlledCheckboxCTX.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ControlledCheckboxCTX } from './config/useCheckBox';
+/** Context for cross component communication */
+export declare const ControlledCheckBoxContext: import("react").Context<ControlledCheckboxCTX>;
+export default ControlledCheckBoxContext;

package/dist/types/config/useCheckBox.d.ts

@@ -0,0 +1,10 @@
+import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';
+import type { DSControlledCheckboxT } from '../react-desc-prop-types';
+import { useEventHandlers } from './useEventHandlers';
+export interface ControlledCheckboxCTX extends ReturnType<typeof useEventHandlers> {
+    propsWithDefault: DSControlledCheckboxT.InternalProps;
+    globalProps: ReturnType<typeof useGetGlobalAttributes>;
+    xstyledProps: ReturnType<typeof useGetXstyledProps>;
+    instanceUid: string;
+}
+export declare const useCheckBox: (props: DSControlledCheckboxT.Props) => ControlledCheckboxCTX;

package/dist/types/config/useEventHandlers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DSControlledCheckboxT } from '../react-desc-prop-types';
+export declare const useEventHandlers: (props: DSControlledCheckboxT.InternalProps) => {
+    handleOnChange: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLabelElement> | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    handleMixedCheckboxOnKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/types/config/useValidateProps.d.ts

@@ -0,0 +1,3 @@
+import type { WeakValidationMap } from 'react';
+import type { DSControlledCheckboxT } from '../react-desc-prop-types';
+export declare const useValidateProps: (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>) => void;

package/dist/types/constants/device.d.ts

@@ -0,0 +1,4 @@
+export declare const DEVICE: {
+    readonly MOBILE: "mobile";
+    readonly DESKTOP: "desktop";
+};

package/dist/types/exported-related/data-test-ids.d.ts

@@ -0,0 +1,4 @@
+export declare const DSCheckboxDataTestIds: {
+    readonly CONTAINER: "ds-checkbox-container";
+    readonly INPUT: "ds-checkbox";
+};

package/dist/types/exported-related/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data-test-ids';
+export * from './theming';

package/dist/types/exported-related/theming.d.ts

@@ -0,0 +1,6 @@
+export declare const DSCheckboxName: "DSCheckbox";
+export declare const DSCheckboxSlots: {
+    readonly CONTAINER: "root";
+    readonly INPUT: "input";
+    readonly LABEL: "label";
+};

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './ControlledCheckbox';
+export type { DSControlledCheckboxT } from './react-desc-prop-types';

package/dist/types/parts/ControlledCheckBoxContent.d.ts

@@ -0,0 +1 @@
+export declare const ControlledCheckBoxContent: () => JSX.Element;

package/dist/types/parts/MainInput.d.ts

@@ -0,0 +1 @@
+export declare const MainInput: () => JSX.Element;

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,495 @@
+import type React from 'react';
+import type { GlobalAttributesT } from '@elliemae/ds-utilities';
+import { DEVICE } from './constants/device';
+export declare namespace DSControlledCheckboxT {
+    type DevicesKeys = keyof typeof DEVICE;
+    type Devices = (typeof DEVICE)[DevicesKeys];
+    interface DefaultProps {
+        checked: boolean | 'mixed';
+        tabIndex: WCAGTabIndex;
+        hasError: boolean;
+        wrapLabel: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        onChange: (newVal: boolean, e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLabelElement> | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    }
+    interface OptionalProps {
+        onKeyDown?: React.KeyboardEventHandler;
+        innerRef?: React.RefObject<HTMLInputElement>;
+        'data-testid'?: string;
+        device?: Devices;
+    }
+    interface LegacyAriaProps {
+        ariaControls?: string;
+        ariaLabel?: string;
+    }
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>, LegacyAriaProps {
+    }
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>, LegacyAriaProps {
+    }
+    interface StyledCheckBoxT {
+        checked: boolean | 'mixed';
+        readOnly?: boolean;
+        hasError?: boolean;
+        disabled?: boolean;
+        device?: Devices;
+    }
+    interface StyledLabelT {
+        disabled?: boolean;
+        readOnly?: boolean;
+        checked: boolean | 'mixed';
+        wrapLabel: boolean;
+        device?: Devices;
+    }
+}
+export declare const defaultProps: DSControlledCheckboxT.DefaultProps;
+export declare const propTypes: {
+    checked: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onChange: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-controls': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    ariaControls: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    label: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    hasError: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    disabled: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    readOnly: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    wrapLabel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    device: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    innerRef: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    margin: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    m: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    marginTop: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    mt: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    marginRight: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    mr: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    marginBottom: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    mb: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    marginLeft: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    ml: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    mx: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    my: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    padding: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    p: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    paddingTop: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    pt: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    paddingRight: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    pr: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    paddingBottom: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    pb: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    paddingLeft: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    pl: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    px: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    py: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    spaceY: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    spaceX: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    spaceXReverse: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    spaceYReverse: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    w: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    width: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    maxWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    maxW: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    minWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    minW: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    h: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    height: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    maxHeight: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    maxH: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    minHeight: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    minH: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    maskSize: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    display: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    float: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    boxSizing: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    container: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    overflow: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    overflowX: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    overflowY: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    zIndex: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    position: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    top: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    right: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    bottom: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    left: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    visibility: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    overscrollBehavior: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    objectFit: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    color: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    bg: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    backgroundColor: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    border: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderTop: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderBottom: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderRight: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderLeft: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderColor: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderTopColor: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderBottomColor: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderRightColor: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderLeftColor: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderStyle: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderTopStyle: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderBottomStyle: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderRightStyle: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderLeftStyle: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderTopWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderBottomWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderRightWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderLeftWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    borderRadius: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    boxShadow: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-*': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'on-*': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'data-*': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'all HTML attributes': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    about: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    accept: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    acceptCharset: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    accessKey: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    action: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    allowFullScreen: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    allowTransparency: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    alt: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-activedescendant': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-atomic': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-autocomplete': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-busy': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-checked': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-colcount': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-colindex': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-colspan': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-current': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-describedby': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-details': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-disabled': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-dropeffect': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-errormessage': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-expanded': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-flowto': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-grabbed': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-haspopup': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-hidden': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-invalid': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-keyshortcuts': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-label': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-labelledby': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-level': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-live': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-modal': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-multiline': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-multiselectable': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-orientation': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-owns': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-placeholder': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-posinset': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-pressed': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-readonly': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-relevant': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-required': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-roledescription': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-rowcount': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-rowindex': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-rowspan': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-selected': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-setsize': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-sort': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-valuemax': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-valuemin': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-valuenow': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    'aria-valuetext': import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    as: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    async: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    autoCapitalize: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    autoComplete: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    autoCorrect: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    autoFocus: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    autoPlay: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    autoSave: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    capture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    cellPadding: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    cellSpacing: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    challenge: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    charSet: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    children: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    cite: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    classID: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    className: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    cols: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    colSpan: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    content: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    contentEditable: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    contextMenu: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    controls: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    coords: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    crossOrigin: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    data: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    datatype: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    dateTime: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    default: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    defaultChecked: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    defaultValue: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    defer: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    dir: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    download: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    draggable: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    encType: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    form: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    formAction: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    formEncType: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    formMethod: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    formNoValidate: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    formTarget: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    frameBorder: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    headers: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    hidden: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    high: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    href: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    hrefLang: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    htmlFor: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    httpEquiv: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    id: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    inlist: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    inputMode: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    integrity: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    is: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    itemID: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    itemProp: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    itemRef: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    itemScope: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    itemType: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    keyParams: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    keyType: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    kind: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    lang: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    list: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    loop: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    low: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    manifest: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    marginHeight: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    marginWidth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    max: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    maxLength: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    media: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    mediaGroup: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    method: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    min: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    minLength: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    multiple: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    muted: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    name: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    nonce: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    noValidate: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAbort: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAbortCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAnimationEnd: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAnimationEndCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAnimationIteration: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAnimationIterationCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAnimationStart: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAnimationStartCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAuxClick: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onAuxClickCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onBeforeInput: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onBeforeInputCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onBlur: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onBlurCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCanPlay: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCanPlayCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCanPlayThrough: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCanPlayThroughCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onChangeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onClick: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onClickCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCompositionEnd: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCompositionEndCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCompositionStart: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCompositionStartCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCompositionUpdate: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCompositionUpdateCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onContextMenu: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onContextMenuCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCopy: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCopyCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCut: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onCutCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDoubleClick: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDoubleClickCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDrag: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragEnd: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragEndCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragEnter: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragEnterCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragExit: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragExitCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragLeave: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragLeaveCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragOver: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragOverCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragStart: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDragStartCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDrop: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDropCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDurationChange: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onDurationChangeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onEmptied: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onEmptiedCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onEncrypted: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onEncryptedCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onEnded: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onEndedCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onError: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onErrorCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onFocus: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onFocusCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onGotPointerCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onGotPointerCaptureCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onInput: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onInputCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onInvalid: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onInvalidCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onKeyDown: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onKeyDownCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onKeyPress: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onKeyPressCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onKeyUp: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onKeyUpCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoad: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoadCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoadedData: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoadedDataCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoadedMetadata: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoadedMetadataCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoadStart: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLoadStartCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLostPointerCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onLostPointerCaptureCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseDown: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseDownCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseEnter: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseLeave: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseMove: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseMoveCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseOut: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseOutCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseOver: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseOverCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseUp: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onMouseUpCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPaste: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPasteCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPause: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPauseCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPlay: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPlayCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPlaying: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPlayingCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerCancel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerCancelCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerDown: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerDownCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerEnter: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerEnterCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerLeave: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerLeaveCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerMove: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerMoveCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerOut: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerOutCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerOver: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerOverCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerUp: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onPointerUpCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onProgress: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onProgressCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onRateChange: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onRateChangeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onReset: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onResetCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onResize: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onResizeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onScroll: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onScrollCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSeeked: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSeekedCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSeeking: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSeekingCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSelect: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSelectCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onStalled: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onStalledCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSubmit: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSubmitCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSuspend: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onSuspendCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTimeUpdate: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTimeUpdateCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchCancel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchCancelCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchEnd: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchEndCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchMove: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchMoveCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchStart: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTouchStartCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTransitionEnd: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTransitionEndCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onVolumeChange: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onVolumeChangeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onWaiting: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onWaitingCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onWheel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onWheelCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    open: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    optimum: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    pattern: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    placeholder: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    playsInline: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    poster: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    prefix: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    preload: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    property: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    radioGroup: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    rel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    required: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    resource: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    results: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    reversed: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    role: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    rows: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    rowSpan: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    sandbox: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    scope: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    scoped: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    scrolling: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    seamless: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    security: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    selected: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    shape: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    size: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    sizes: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    slot: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    span: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    spellCheck: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    src: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    srcDoc: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    srcLang: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    srcSet: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    start: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    step: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    style: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    summary: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    suppressContentEditableWarning: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    suppressHydrationWarning: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    tabIndex: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    target: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    title: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    translate: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    type: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    typeof: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    unselectable: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    useMap: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    value: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    vocab: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    wmode: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    wrap: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+};

package/dist/types/styles.d.ts

@@ -0,0 +1,9 @@
+import type { DSControlledCheckboxT } from './react-desc-prop-types';
+export declare const StyledCheckBox: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, DSControlledCheckboxT.StyledCheckBoxT, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, object, never>;
+export declare const StyledInputMixed: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("@elliemae/ds-system").Theme, DSControlledCheckboxT.StyledLabelT, never>;
+export declare const StyledWrapLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    device?: "mobile" | "desktop" | undefined;
+}, never>;

package/dist/types/tests/DSControlledCheckbox.keyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSControlledCheckbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSControlledCheckboxMixed.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSControllledCheckbox.events.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/styleHelpers.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from '@elliemae/pui-theme';
+export declare const handleCheckMarkColor: ({ colors }: Theme, checked: boolean | 'mixed', isHovering: boolean, disabled?: boolean, readOnly?: boolean, hasError?: boolean) => string;
+export declare const handleCheckmark: (theme: Theme, checked: boolean | 'mixed', disabled?: boolean, readOnly?: boolean, hasError?: boolean, isHovering?: boolean, device?: string | undefined) => string;
+export declare const handleBackgroundColor: ({ colors }: Theme, disabled?: boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-checkbox",
-  "version": "3.14.0-next.9",
+  "version": "3.14.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Checkbox",
   "files": [
@@ -36,9 +36,9 @@
   },
   "dependencies": {
     "uid": "~2.0.0",
-    "@elliemae/ds-system": "3.14.0-next.9",
-    "@elliemae/ds-truncated-tooltip-text": "3.14.0-next.9",
-    "@elliemae/ds-utilities": "3.14.0-next.9"
+    "@elliemae/ds-system": "3.14.0-rc.1",
+    "@elliemae/ds-truncated-tooltip-text": "3.14.0-rc.1",
+    "@elliemae/ds-utilities": "3.14.0-rc.1"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.6.0",