@elliemae/ds-form-checkbox 3.50.0-next.2 → 3.50.0-rc.1

package/dist/cjs/parts/ControlledCheckBoxContent.js

@@ -95,7 +95,8 @@ const ControlledCheckBoxContent = () => {
             getOwnerPropsArguments,
             children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label })
           }
-        )
+        ),
+        readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, children: "Read only" }) : null
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ControlledCheckBoxContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    checked,\n    device,\n    label,\n    hasError,\n    wrapLabel,\n    ariaControls: legacyAriaControls,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledContainer\n      wrapLabel={wrapLabel}\n      device={device}\n      data-testid=\"ds-checkbox-container\"\n      className={className}\n      hasLabel={Boolean(label)}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledCheckBox\n        device={device}\n        checked={checked}\n        hasError={hasError}\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        readOnly={readOnly}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAxBJ,mBAAkB;AAClB,uCAA2C;AAC3C,8BAA8B;AAC9B,oBAA8E;AAC9E,uBAA0B;AAC1B,mCAA0C;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/E,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACA,UAAU,QAAQ,KAAK;AAAA,MACtB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,sDAAC,8BAAU;AAAA;AAAA,QACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,WAAW;AAAA,YAClB,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YACxF;AAAA,YACA;AAAA,YAEC,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    checked,\n    device,\n    label,\n    hasError,\n    wrapLabel,\n    ariaControls: legacyAriaControls,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledContainer\n      wrapLabel={wrapLabel}\n      device={device}\n      data-testid=\"ds-checkbox-container\"\n      className={className}\n      hasLabel={Boolean(label)}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledCheckBox\n        device={device}\n        checked={checked}\n        hasError={hasError}\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        readOnly={readOnly}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n      {readOnly ? <StyledHiddenP id={`${instanceUid}-read-only-helper-msg`}>Read only</StyledHiddenP> : null}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAxBJ,mBAAkB;AAClB,uCAA2C;AAC3C,8BAA8B;AAC9B,oBAA6F;AAC7F,uBAA0B;AAC1B,mCAA0C;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/E,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACA,UAAU,QAAQ,KAAK;AAAA,MACtB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,sDAAC,8BAAU;AAAA;AAAA,QACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,WAAW;AAAA,YAClB,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YACxF;AAAA,YACA;AAAA,YAEC,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA,QAED,WAAW,4CAAC,+BAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/MainInput.js

@@ -76,7 +76,7 @@ const MainInput = () => {
         ...mainInputProps,
         role: "checkbox",
         "aria-controls": ariaControls || camelCaseAriaControls,
-        "aria-disabled": disabled || applyAriaDisabled,
+        "aria-disabled": disabled || applyAriaDisabled || readOnly,
         "aria-invalid": hasError,
         onClick: !disabled && !readOnly ? handleOnChange : void 0,
         onKeyDown: handleMixedCheckboxOnKeyDown,
@@ -85,6 +85,7 @@ const MainInput = () => {
         onMouseDown: (e) => {
           if (disabled) e.preventDefault();
         },
+        "aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
         getOwnerProps,
         getOwnerPropsArguments
       }
@@ -100,10 +101,11 @@ const MainInput = () => {
       disabled,
       tabIndex,
       innerRef,
-      getOwnerProps,
-      getOwnerPropsArguments,
       "aria-invalid": hasError,
-      "aria-disabled": applyAriaDisabled
+      "aria-disabled": applyAriaDisabled || readOnly,
+      "aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
+      getOwnerProps,
+      getOwnerPropsArguments
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MainInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    visualOnly,\n    ariaControls: camelCaseAriaControls,\n    withRelatedBlockLabel,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n    hasError,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n  // if aria-label is provided we are probably printing a 'label-less' checkbox (like data-table, or mixed parent in a group)\n  // in such scenarios having the aria-labelledby may results in 'referencing a non-existing element' error\n  const outOfTheBoxAriaLabelledBy = !globalProps['aria-label']\n    ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ''}`\n    : undefined;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    'aria-labelledby': outOfTheBoxAriaLabelledBy,\n    // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (visualOnly) return null;\n\n  if (canShowMixedState)\n    return (\n      <StyledInputMixed\n        {...mainInputProps}\n        role=\"checkbox\"\n        aria-controls={ariaControls || camelCaseAriaControls}\n        aria-disabled={disabled || applyAriaDisabled}\n        aria-invalid={hasError}\n        onClick={!disabled && !readOnly ? handleOnChange : undefined}\n        onKeyDown={handleMixedCheckboxOnKeyDown}\n        tabIndex={disabled ? -1 : tabIndex}\n        innerRef={innerRef}\n        onMouseDown={(e: React.MouseEvent) => {\n          if (disabled) e.preventDefault();\n        }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n  return (\n    <StyledInput\n      {...mainInputProps}\n      type=\"checkbox\"\n      checked={checked as boolean | undefined}\n      onChange={handleOnChange}\n      onKeyDown={handleMixedCheckboxOnKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      aria-invalid={hasError}\n      aria-disabled={applyAriaDisabled}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDjB;AArDN,mBAAkB;AAClB,8BAA8B;AAC9B,oBAA8C;AAC9C,mCAA0C;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/F,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAE1C,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAQhF,QAAM,oBAAoB,gBAAgB;AAG1C,QAAM,4BAA4B,CAAC,YAAY,YAAY,IACvD,GAAG,WAAW,SAAS,wBAAwB,IAAI,WAAW,iBAAiB,EAAE,KACjF;AAEJ,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA,IAChB,mBAAmB;AAAA;AAAA,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI,WAAY,QAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe,YAAY;AAAA,QAC3B,gBAAc;AAAA,QACd,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI,SAAU,GAAE,eAAe;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,iBAAe;AAAA;AAAA,EACjB;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    visualOnly,\n    ariaControls: camelCaseAriaControls,\n    withRelatedBlockLabel,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n    hasError,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n  // if aria-label is provided we are probably printing a 'label-less' checkbox (like data-table, or mixed parent in a group)\n  // in such scenarios having the aria-labelledby may results in 'referencing a non-existing element' error\n  const outOfTheBoxAriaLabelledBy = !globalProps['aria-label']\n    ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ''}`\n    : undefined;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    'aria-labelledby': outOfTheBoxAriaLabelledBy,\n    // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (visualOnly) return null;\n\n  if (canShowMixedState)\n    return (\n      <StyledInputMixed\n        {...mainInputProps}\n        role=\"checkbox\"\n        aria-controls={ariaControls || camelCaseAriaControls}\n        aria-disabled={disabled || applyAriaDisabled || readOnly}\n        aria-invalid={hasError}\n        onClick={!disabled && !readOnly ? handleOnChange : undefined}\n        onKeyDown={handleMixedCheckboxOnKeyDown}\n        tabIndex={disabled ? -1 : tabIndex}\n        innerRef={innerRef}\n        onMouseDown={(e: React.MouseEvent) => {\n          if (disabled) e.preventDefault();\n        }}\n        aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n  return (\n    <StyledInput\n      {...mainInputProps}\n      type=\"checkbox\"\n      checked={checked as boolean | undefined}\n      onChange={handleOnChange}\n      onKeyDown={handleMixedCheckboxOnKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      innerRef={innerRef}\n      aria-invalid={hasError}\n      aria-disabled={applyAriaDisabled || readOnly}\n      aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDjB;AArDN,mBAAkB;AAClB,8BAA8B;AAC9B,oBAA8C;AAC9C,mCAA0C;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/F,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAE1C,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAQhF,QAAM,oBAAoB,gBAAgB;AAG1C,QAAM,4BAA4B,CAAC,YAAY,YAAY,IACvD,GAAG,WAAW,SAAS,wBAAwB,IAAI,WAAW,iBAAiB,EAAE,KACjF;AAEJ,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA,IAChB,mBAAmB;AAAA;AAAA,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI,WAAY,QAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe,YAAY,qBAAqB;AAAA,QAChD,gBAAc;AAAA,QACd,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI,SAAU,GAAE,eAAe;AAAA,QACjC;AAAA,QACA,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,QACrE;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,iBAAe,qBAAqB;AAAA,MACpC,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,MACrE;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/styles.js

@@ -30,6 +30,7 @@ var styles_exports = {};
 __export(styles_exports, {
   StyledCheckBox: () => StyledCheckBox,
   StyledContainer: () => StyledContainer,
+  StyledHiddenP: () => StyledHiddenP,
   StyledInput: () => StyledInput,
   StyledInputMixed: () => StyledInputMixed,
   StyledLabel: () => StyledLabel,
@@ -45,7 +46,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
   slot: import_exported_related.DSCheckboxSlots.INPUT_WRAPPER
 })`
   position: relative;
-  background: ${({ theme, disabled, applyAriaDisabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled, applyAriaDisabled)};
+  background: ${({ theme, disabled, applyAriaDisabled, readOnly }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled, applyAriaDisabled, readOnly)};
 
   ${({ device, theme }) => {
   if (device === "mobile") {
@@ -90,10 +91,16 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
     border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
   }
   &:hover {
-    background: ${({ theme, applyAriaDisabled, disabled }) => !disabled && !applyAriaDisabled ? theme.colors.brand[200] : void 0};
+    background: ${({ theme, applyAriaDisabled, disabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : void 0};
 
     &:after {
-      border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
+      border: 1px solid
+        ${({ theme, hasError, disabled, applyAriaDisabled, readOnly }) => {
+  if (hasError) return theme.colors.danger[900];
+  if (applyAriaDisabled || readOnly) return theme.colors.brand[700];
+  if (disabled) return theme.colors.neutral[400];
+  return theme.colors.brand[600];
+}};
     }
   }
   &:focus-within {
@@ -106,7 +113,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
   }
   &:active {
     &:after {
-      border: 2px solid ${({ theme }) => theme.colors.brand[600]};
+      border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `2px solid ${theme.colors.brand[600]}`};
     }
   }
 `;
@@ -153,7 +160,7 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
     word-break: break-word;
 `};
   width: fit-content;
-  color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
+  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
   line-height: 1.2307rem;
   @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
     line-height: 1rem; /* 13px / 16 */
@@ -223,4 +230,7 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
   align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
   ${import_ds_system.xStyledCommonProps}
 `;
+const StyledHiddenP = import_ds_system.styled.p`
+  display: none;
+`;
 //# 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": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n        width: 1.5rem;  /* 24px / 16 */\n        height: 1.5rem;  /* 24px / 16 */\n      }\n      width: 1.846rem; /* 24px / 13 */\n      height: 1.846rem;  /* 24px / 13 */`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.5rem;  /* 24px / 16 */\n          height: 1.5rem;  /* 24px / 16 */\n        }\n        width: 1.2307rem;\n        height: 1.2307rem;\n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 1rem;  /* 16px / 16 */\n      height: 1rem;  /* 16px / 16 */\n    }\n    width: 1.2307rem; /* 16px / 13 */\n    height: 1.2307rem; /* 16px / 13 */\n  `;\n  }}\n\n  ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n  &:hover {\n    background: ${({ theme, applyAriaDisabled, disabled }) =>\n      !disabled && !applyAriaDisabled ? theme.colors.brand[200] : undefined};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n    }\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &[aria-disabled='true'] {\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  ${({ wrapLabel }) =>\n    wrapLabel &&\n    `\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n    word-break: break-word;\n`};\n  width: fit-content;\n  color: ${({ theme, disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  line-height: 1.2307rem;\n  @media (max-width: ${th.breakpoint('small')}) {\n    line-height: 1rem; /* 13px / 16 */\n  }\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        font-size: 1rem;  /* 16px / 16 */\n      }\n      font-size: 1.2307rem; /* 16px / 13 */\n      `;\n    }\n    if (device === undefined) {\n      return `\n        font-size: 1rem; \n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      font-size: 0.8125rem;  /* 13px / 16 */\n    }\n\n    font-size: 1rem;  /* 13px / 13 */\n  `;\n  }}\n  display: inherit;\n  ${({ disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled\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'; wrapLabel?: boolean; hasLabel: boolean }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1.5rem auto; /* 24px / 16px */\n    }\n      grid-template-columns: 1.846rem auto;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.5rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1rem auto; /* 16px / 16px */\n    }\n    grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n    `;\n  }}\n  column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n        width: 1.5rem;  /* 24px / 16 */\n        height: 1.5rem;  /* 24px / 16 */\n      }\n      width: 1.846rem; /* 24px / 13 */\n      height: 1.846rem;  /* 24px / 13 */`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.5rem;  /* 24px / 16 */\n          height: 1.5rem;  /* 24px / 16 */\n        }\n        width: 1.2307rem;\n        height: 1.2307rem;\n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 1rem;  /* 16px / 16 */\n      height: 1rem;  /* 16px / 16 */\n    }\n    width: 1.2307rem; /* 16px / 13 */\n    height: 1.2307rem; /* 16px / 13 */\n  `;\n  }}\n\n  ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n  &:hover {\n    background: ${({ theme, applyAriaDisabled, disabled, readOnly }) =>\n      !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n\n    &:after {\n      border: 1px solid\n        ${({ theme, hasError, disabled, applyAriaDisabled, readOnly }) => {\n          if (hasError) return theme.colors.danger[900];\n          if (applyAriaDisabled || readOnly) return theme.colors.brand[700];\n          if (disabled) return theme.colors.neutral[400];\n          return theme.colors.brand[600];\n        }};\n    }\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n    }\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n  &:active {\n    &:after {\n      border: ${({ disabled, theme }) =>\n        disabled ? `1px solid ${theme.colors.neutral[400]}` : `2px solid ${theme.colors.brand[600]}`};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &[aria-disabled='true'] {\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  ${({ wrapLabel }) =>\n    wrapLabel &&\n    `\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n    word-break: break-word;\n`};\n  width: fit-content;\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  line-height: 1.2307rem;\n  @media (max-width: ${th.breakpoint('small')}) {\n    line-height: 1rem; /* 13px / 16 */\n  }\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        font-size: 1rem;  /* 16px / 16 */\n      }\n      font-size: 1.2307rem; /* 16px / 13 */\n      `;\n    }\n    if (device === undefined) {\n      return `\n        font-size: 1rem; \n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      font-size: 0.8125rem;  /* 13px / 16 */\n    }\n\n    font-size: 1rem;  /* 13px / 13 */\n  `;\n  }}\n  display: inherit;\n  ${({ disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled\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'; wrapLabel?: boolean; hasLabel: boolean }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1.5rem auto; /* 24px / 16px */\n    }\n      grid-template-columns: 1.846rem auto;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.5rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1rem auto; /* 16px / 16px */\n    }\n    grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n    `;\n  }}\n  column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled.p`\n  display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/utils/styleHelpers.js

@@ -183,12 +183,15 @@ transform: rotate(-45deg);
   }
   return "";
 };
-const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled) => {
+const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled, readOnly) => {
   if (disabled) {
     return colors.neutral["080"];
   }
   if (applyAriaDisabled) {
-    return colors.neutral["080"];
+    return colors.neutral["050"];
+  }
+  if (readOnly) {
+    return colors.neutral["050"];
   }
   return colors.neutral["000"];
 };

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  applyAriaDisabled?: 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 (applyAriaDisabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  applyAriaDisabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const commonStyles = `\n    position: absolute;\n    content: '';\n    border-left: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n    border-bottom: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n  `;\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.538rem; /* 7px / baseFontSize */\n  left: 0.308rem; /* 4px / baseFontSize */\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n  width: 0.615rem; /* theme.space.xxs / baseFontSize */\n  height: 0.154rem; /* 2px / baseFontSize */\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.4375rem; /* 7px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.125rem;  /* 8px / 16 */\n    width: 0.5rem;/* 2px / 16 */\n  }\n`;\n\n  const normalMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n`;\n  const mobileMixedCheckmark = `\n  ${commonStyles}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n  top: 0.8461rem; /* 11px / 13 */\n  left: 0.4615rem; /* 6px / 13 */\n  height: 0.1538rem; /* 2px / 13 */\n  width: 0.9231rem; /* 12px / 13 */\n\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 0.25rem; /* 4px / 16 */\n  left: 0.1875rem; /* 3px / 16 */\n  height: 0.3125rem; /* 5px / 16 */\n  width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n  const normalCheckmark = `\n\n  ${desktopCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.375rem; /* 6px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.5rem; /* 8px / 16 */\n    width: 1.0625rem; /* 17px / 16 */\n  }\n`;\n  const mobileCheckmark = `\n    ${commonStyles}\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.375rem; /* 6px / 16 */\n      left: 0.25rem; /* 4px / 16 */\n      height: 0.5rem; /* 8px / 16 */\n      width: 1.0625rem; /* 17px / 16 */\n    }\n    top: 0.4615rem; /* 6px / 13 */\n    left: 0.3077rem; /* 4px / 13 */\n    height: 0.6154rem; /* 8px / 13 */\n    width: 1.3077rem; /* 17px / 13 */\n    transform: rotate(-45deg);\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean, applyAriaDisabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  if (applyAriaDisabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "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  applyAriaDisabled?: 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 (applyAriaDisabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  applyAriaDisabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const commonStyles = `\n    position: absolute;\n    content: '';\n    border-left: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n    border-bottom: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n  `;\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.538rem; /* 7px / baseFontSize */\n  left: 0.308rem; /* 4px / baseFontSize */\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n  width: 0.615rem; /* theme.space.xxs / baseFontSize */\n  height: 0.154rem; /* 2px / baseFontSize */\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.4375rem; /* 7px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.125rem;  /* 8px / 16 */\n    width: 0.5rem;/* 2px / 16 */\n  }\n`;\n\n  const normalMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n`;\n  const mobileMixedCheckmark = `\n  ${commonStyles}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n  top: 0.8461rem; /* 11px / 13 */\n  left: 0.4615rem; /* 6px / 13 */\n  height: 0.1538rem; /* 2px / 13 */\n  width: 0.9231rem; /* 12px / 13 */\n\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 0.25rem; /* 4px / 16 */\n  left: 0.1875rem; /* 3px / 16 */\n  height: 0.3125rem; /* 5px / 16 */\n  width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n  const normalCheckmark = `\n\n  ${desktopCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.375rem; /* 6px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.5rem; /* 8px / 16 */\n    width: 1.0625rem; /* 17px / 16 */\n  }\n`;\n  const mobileCheckmark = `\n    ${commonStyles}\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.375rem; /* 6px / 16 */\n      left: 0.25rem; /* 4px / 16 */\n      height: 0.5rem; /* 8px / 16 */\n      width: 1.0625rem; /* 17px / 16 */\n    }\n    top: 0.4615rem; /* 6px / 13 */\n    left: 0.3077rem; /* 4px / 13 */\n    height: 0.6154rem; /* 8px / 13 */\n    width: 1.3077rem; /* 17px / 13 */\n    transform: rotate(-45deg);\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = (\n  { colors }: Theme,\n  disabled?: boolean,\n  applyAriaDisabled?: boolean,\n  readOnly?: boolean,\n): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  if (applyAriaDisabled) {\n    return colors.neutral['050'];\n  }\n\n  if (readOnly) {\n    return colors.neutral['050'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/ControlledCheckBoxContent.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
-import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from "../styles.js";
+import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from "../styles.js";
 import { MainInput } from "./MainInput.js";
 import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX.js";
 const ControlledCheckBoxContent = () => {
@@ -62,7 +62,8 @@ const ControlledCheckBoxContent = () => {
             getOwnerPropsArguments,
             children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label })
           }
-        )
+        ),
+        readOnly ? /* @__PURE__ */ jsx(StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, children: "Read only" }) : null
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledCheckBoxContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    checked,\n    device,\n    label,\n    hasError,\n    wrapLabel,\n    ariaControls: legacyAriaControls,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledContainer\n      wrapLabel={wrapLabel}\n      device={device}\n      data-testid=\"ds-checkbox-container\"\n      className={className}\n      hasLabel={Boolean(label)}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledCheckBox\n        device={device}\n        checked={checked}\n        hasError={hasError}\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        readOnly={readOnly}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwBnB,SAoBI,KApBJ;AAxBJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,iBAAiB,aAAa,sBAAsB;AAC9E,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACA,UAAU,QAAQ,KAAK;AAAA,MACtB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,WAAW;AAAA,YAClB,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YACxF;AAAA,YACA;AAAA,YAEC,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    checked,\n    device,\n    label,\n    hasError,\n    wrapLabel,\n    ariaControls: legacyAriaControls,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledContainer\n      wrapLabel={wrapLabel}\n      device={device}\n      data-testid=\"ds-checkbox-container\"\n      className={className}\n      hasLabel={Boolean(label)}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledCheckBox\n        device={device}\n        checked={checked}\n        hasError={hasError}\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        readOnly={readOnly}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n      {readOnly ? <StyledHiddenP id={`${instanceUid}-read-only-helper-msg`}>Read only</StyledHiddenP> : null}\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwBnB,SAoBI,KApBJ;AAxBJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,iBAAiB,aAAa,gBAAgB,qBAAqB;AAC7F,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACA,UAAU,QAAQ,KAAK;AAAA,MACtB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,WAAW;AAAA,YAClB,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YACxF;AAAA,YACA;AAAA,YAEC,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA,QAED,WAAW,oBAAC,iBAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/MainInput.js

@@ -43,7 +43,7 @@ const MainInput = () => {
         ...mainInputProps,
         role: "checkbox",
         "aria-controls": ariaControls || camelCaseAriaControls,
-        "aria-disabled": disabled || applyAriaDisabled,
+        "aria-disabled": disabled || applyAriaDisabled || readOnly,
         "aria-invalid": hasError,
         onClick: !disabled && !readOnly ? handleOnChange : void 0,
         onKeyDown: handleMixedCheckboxOnKeyDown,
@@ -52,6 +52,7 @@ const MainInput = () => {
         onMouseDown: (e) => {
           if (disabled) e.preventDefault();
         },
+        "aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
         getOwnerProps,
         getOwnerPropsArguments
       }
@@ -67,10 +68,11 @@ const MainInput = () => {
       disabled,
       tabIndex,
       innerRef,
-      getOwnerProps,
-      getOwnerPropsArguments,
       "aria-invalid": hasError,
-      "aria-disabled": applyAriaDisabled
+      "aria-disabled": applyAriaDisabled || readOnly,
+      "aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
+      getOwnerProps,
+      getOwnerPropsArguments
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    visualOnly,\n    ariaControls: camelCaseAriaControls,\n    withRelatedBlockLabel,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n    hasError,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n  // if aria-label is provided we are probably printing a 'label-less' checkbox (like data-table, or mixed parent in a group)\n  // in such scenarios having the aria-labelledby may results in 'referencing a non-existing element' error\n  const outOfTheBoxAriaLabelledBy = !globalProps['aria-label']\n    ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ''}`\n    : undefined;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    'aria-labelledby': outOfTheBoxAriaLabelledBy,\n    // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (visualOnly) return null;\n\n  if (canShowMixedState)\n    return (\n      <StyledInputMixed\n        {...mainInputProps}\n        role=\"checkbox\"\n        aria-controls={ariaControls || camelCaseAriaControls}\n        aria-disabled={disabled || applyAriaDisabled}\n        aria-invalid={hasError}\n        onClick={!disabled && !readOnly ? handleOnChange : undefined}\n        onKeyDown={handleMixedCheckboxOnKeyDown}\n        tabIndex={disabled ? -1 : tabIndex}\n        innerRef={innerRef}\n        onMouseDown={(e: React.MouseEvent) => {\n          if (disabled) e.preventDefault();\n        }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n  return (\n    <StyledInput\n      {...mainInputProps}\n      type=\"checkbox\"\n      checked={checked as boolean | undefined}\n      onChange={handleOnChange}\n      onKeyDown={handleMixedCheckboxOnKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      aria-invalid={hasError}\n      aria-disabled={applyAriaDisabled}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsDjB;AArDN,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,wBAAwB;AAC9C,SAAS,iCAAiC;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/FA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAE1C,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAQhF,QAAM,oBAAoB,gBAAgB;AAG1C,QAAM,4BAA4B,CAAC,YAAY,YAAY,IACvD,GAAG,WAAW,SAAS,wBAAwB,IAAI,WAAW,iBAAiB,EAAE,KACjF;AAEJ,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA,IAChB,mBAAmB;AAAA;AAAA,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI,WAAY,QAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe,YAAY;AAAA,QAC3B,gBAAc;AAAA,QACd,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI,SAAU,GAAE,eAAe;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,iBAAe;AAAA;AAAA,EACjB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    visualOnly,\n    ariaControls: camelCaseAriaControls,\n    withRelatedBlockLabel,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n    hasError,\n    applyAriaDisabled,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n  // if aria-label is provided we are probably printing a 'label-less' checkbox (like data-table, or mixed parent in a group)\n  // in such scenarios having the aria-labelledby may results in 'referencing a non-existing element' error\n  const outOfTheBoxAriaLabelledBy = !globalProps['aria-label']\n    ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ''}`\n    : undefined;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    'aria-labelledby': outOfTheBoxAriaLabelledBy,\n    // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (visualOnly) return null;\n\n  if (canShowMixedState)\n    return (\n      <StyledInputMixed\n        {...mainInputProps}\n        role=\"checkbox\"\n        aria-controls={ariaControls || camelCaseAriaControls}\n        aria-disabled={disabled || applyAriaDisabled || readOnly}\n        aria-invalid={hasError}\n        onClick={!disabled && !readOnly ? handleOnChange : undefined}\n        onKeyDown={handleMixedCheckboxOnKeyDown}\n        tabIndex={disabled ? -1 : tabIndex}\n        innerRef={innerRef}\n        onMouseDown={(e: React.MouseEvent) => {\n          if (disabled) e.preventDefault();\n        }}\n        aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n  return (\n    <StyledInput\n      {...mainInputProps}\n      type=\"checkbox\"\n      checked={checked as boolean | undefined}\n      onChange={handleOnChange}\n      onKeyDown={handleMixedCheckboxOnKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      innerRef={innerRef}\n      aria-invalid={hasError}\n      aria-disabled={applyAriaDisabled || readOnly}\n      aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsDjB;AArDN,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,wBAAwB;AAC9C,SAAS,iCAAiC;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/FA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAE1C,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAQhF,QAAM,oBAAoB,gBAAgB;AAG1C,QAAM,4BAA4B,CAAC,YAAY,YAAY,IACvD,GAAG,WAAW,SAAS,wBAAwB,IAAI,WAAW,iBAAiB,EAAE,KACjF;AAEJ,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA,IAChB,mBAAmB;AAAA;AAAA,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI,WAAY,QAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe,YAAY,qBAAqB;AAAA,QAChD,gBAAc;AAAA,QACd,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI,SAAU,GAAE,eAAe;AAAA,QACjC;AAAA,QACA,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,QACrE;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,iBAAe,qBAAqB;AAAA,MACpC,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,MACrE;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/styles.js

@@ -7,7 +7,7 @@ const StyledCheckBox = styled("span", {
   slot: DSCheckboxSlots.INPUT_WRAPPER
 })`
   position: relative;
-  background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};
+  background: ${({ theme, disabled, applyAriaDisabled, readOnly }) => handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};
 
   ${({ device, theme }) => {
   if (device === "mobile") {
@@ -52,10 +52,16 @@ const StyledCheckBox = styled("span", {
     border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
   }
   &:hover {
-    background: ${({ theme, applyAriaDisabled, disabled }) => !disabled && !applyAriaDisabled ? theme.colors.brand[200] : void 0};
+    background: ${({ theme, applyAriaDisabled, disabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : void 0};
 
     &:after {
-      border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
+      border: 1px solid
+        ${({ theme, hasError, disabled, applyAriaDisabled, readOnly }) => {
+  if (hasError) return theme.colors.danger[900];
+  if (applyAriaDisabled || readOnly) return theme.colors.brand[700];
+  if (disabled) return theme.colors.neutral[400];
+  return theme.colors.brand[600];
+}};
     }
   }
   &:focus-within {
@@ -68,7 +74,7 @@ const StyledCheckBox = styled("span", {
   }
   &:active {
     &:after {
-      border: 2px solid ${({ theme }) => theme.colors.brand[600]};
+      border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `2px solid ${theme.colors.brand[600]}`};
     }
   }
 `;
@@ -115,7 +121,7 @@ const StyledLabel = styled("label", {
     word-break: break-word;
 `};
   width: fit-content;
-  color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
+  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
   line-height: 1.2307rem;
   @media (max-width: ${th.breakpoint("small")}) {
     line-height: 1rem; /* 13px / 16 */
@@ -185,9 +191,13 @@ const StyledContainer = styled("div", {
   align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
   ${xStyledCommonProps}
 `;
+const StyledHiddenP = styled.p`
+  display: none;
+`;
 export {
   StyledCheckBox,
   StyledContainer,
+  StyledHiddenP,
   StyledInput,
   StyledInputMixed,
   StyledLabel,

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", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n        width: 1.5rem;  /* 24px / 16 */\n        height: 1.5rem;  /* 24px / 16 */\n      }\n      width: 1.846rem; /* 24px / 13 */\n      height: 1.846rem;  /* 24px / 13 */`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.5rem;  /* 24px / 16 */\n          height: 1.5rem;  /* 24px / 16 */\n        }\n        width: 1.2307rem;\n        height: 1.2307rem;\n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 1rem;  /* 16px / 16 */\n      height: 1rem;  /* 16px / 16 */\n    }\n    width: 1.2307rem; /* 16px / 13 */\n    height: 1.2307rem; /* 16px / 13 */\n  `;\n  }}\n\n  ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n  &:hover {\n    background: ${({ theme, applyAriaDisabled, disabled }) =>\n      !disabled && !applyAriaDisabled ? theme.colors.brand[200] : undefined};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n    }\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &[aria-disabled='true'] {\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  ${({ wrapLabel }) =>\n    wrapLabel &&\n    `\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n    word-break: break-word;\n`};\n  width: fit-content;\n  color: ${({ theme, disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  line-height: 1.2307rem;\n  @media (max-width: ${th.breakpoint('small')}) {\n    line-height: 1rem; /* 13px / 16 */\n  }\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        font-size: 1rem;  /* 16px / 16 */\n      }\n      font-size: 1.2307rem; /* 16px / 13 */\n      `;\n    }\n    if (device === undefined) {\n      return `\n        font-size: 1rem; \n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      font-size: 0.8125rem;  /* 13px / 16 */\n    }\n\n    font-size: 1rem;  /* 13px / 13 */\n  `;\n  }}\n  display: inherit;\n  ${({ disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled\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'; wrapLabel?: boolean; hasLabel: boolean }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1.5rem auto; /* 24px / 16px */\n    }\n      grid-template-columns: 1.846rem auto;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.5rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1rem auto; /* 16px / 16px */\n    }\n    grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n    `;\n  }}\n  column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n  ${xStyledCommonProps}\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n  position: relative;\n  background: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n        width: 1.5rem;  /* 24px / 16 */\n        height: 1.5rem;  /* 24px / 16 */\n      }\n      width: 1.846rem; /* 24px / 13 */\n      height: 1.846rem;  /* 24px / 13 */`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 1.5rem;  /* 24px / 16 */\n          height: 1.5rem;  /* 24px / 16 */\n        }\n        width: 1.2307rem;\n        height: 1.2307rem;\n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      width: 1rem;  /* 16px / 16 */\n      height: 1rem;  /* 16px / 16 */\n    }\n    width: 1.2307rem; /* 16px / 13 */\n    height: 1.2307rem; /* 16px / 13 */\n  `;\n  }}\n\n  ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n  &:after {\n    content: '';\n    border-radius: 2px;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    bottom: 0px;\n    left: 0px;\n    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  }\n  &:hover {\n    background: ${({ theme, applyAriaDisabled, disabled, readOnly }) =>\n      !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n\n    &:after {\n      border: 1px solid\n        ${({ theme, hasError, disabled, applyAriaDisabled, readOnly }) => {\n          if (hasError) return theme.colors.danger[900];\n          if (applyAriaDisabled || readOnly) return theme.colors.brand[700];\n          if (disabled) return theme.colors.neutral[400];\n          return theme.colors.brand[600];\n        }};\n    }\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n    }\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n  &:active {\n    &:after {\n      border: ${({ disabled, theme }) =>\n        disabled ? `1px solid ${theme.colors.neutral[400]}` : `2px solid ${theme.colors.brand[600]}`};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &[aria-disabled='true'] {\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  ${({ wrapLabel }) =>\n    wrapLabel &&\n    `\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n    word-break: break-word;\n`};\n  width: fit-content;\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  line-height: 1.2307rem;\n  @media (max-width: ${th.breakpoint('small')}) {\n    line-height: 1rem; /* 13px / 16 */\n  }\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      @media (max-width: ${theme.breakpoints.small}) {\n        font-size: 1rem;  /* 16px / 16 */\n      }\n      font-size: 1.2307rem; /* 16px / 13 */\n      `;\n    }\n    if (device === undefined) {\n      return `\n        font-size: 1rem; \n      `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      font-size: 0.8125rem;  /* 13px / 16 */\n    }\n\n    font-size: 1rem;  /* 13px / 13 */\n  `;\n  }}\n  display: inherit;\n  ${({ disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled\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'; wrapLabel?: boolean; hasLabel: boolean }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1.5rem auto; /* 24px / 16px */\n    }\n      grid-template-columns: 1.846rem auto;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 1.5rem auto;\n        }\n        grid-template-columns: 1.23rem auto;\n    `;\n    }\n    return `\n    @media (max-width: ${theme.breakpoints.small}) {\n      grid-template-columns: 1rem auto; /* 16px / 16px */\n    }\n    grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n    `;\n  }}\n  column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled.p`\n  display: none;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/utils/styleHelpers.js

@@ -148,12 +148,15 @@ transform: rotate(-45deg);
   }
   return "";
 };
-const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled) => {
+const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled, readOnly) => {
   if (disabled) {
     return colors.neutral["080"];
   }
   if (applyAriaDisabled) {
-    return colors.neutral["080"];
+    return colors.neutral["050"];
+  }
+  if (readOnly) {
+    return colors.neutral["050"];
   }
   return colors.neutral["000"];
 };

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  applyAriaDisabled?: 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 (applyAriaDisabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  applyAriaDisabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const commonStyles = `\n    position: absolute;\n    content: '';\n    border-left: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n    border-bottom: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n  `;\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.538rem; /* 7px / baseFontSize */\n  left: 0.308rem; /* 4px / baseFontSize */\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n  width: 0.615rem; /* theme.space.xxs / baseFontSize */\n  height: 0.154rem; /* 2px / baseFontSize */\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.4375rem; /* 7px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.125rem;  /* 8px / 16 */\n    width: 0.5rem;/* 2px / 16 */\n  }\n`;\n\n  const normalMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n`;\n  const mobileMixedCheckmark = `\n  ${commonStyles}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n  top: 0.8461rem; /* 11px / 13 */\n  left: 0.4615rem; /* 6px / 13 */\n  height: 0.1538rem; /* 2px / 13 */\n  width: 0.9231rem; /* 12px / 13 */\n\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 0.25rem; /* 4px / 16 */\n  left: 0.1875rem; /* 3px / 16 */\n  height: 0.3125rem; /* 5px / 16 */\n  width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n  const normalCheckmark = `\n\n  ${desktopCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.375rem; /* 6px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.5rem; /* 8px / 16 */\n    width: 1.0625rem; /* 17px / 16 */\n  }\n`;\n  const mobileCheckmark = `\n    ${commonStyles}\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.375rem; /* 6px / 16 */\n      left: 0.25rem; /* 4px / 16 */\n      height: 0.5rem; /* 8px / 16 */\n      width: 1.0625rem; /* 17px / 16 */\n    }\n    top: 0.4615rem; /* 6px / 13 */\n    left: 0.3077rem; /* 4px / 13 */\n    height: 0.6154rem; /* 8px / 13 */\n    width: 1.3077rem; /* 17px / 13 */\n    transform: rotate(-45deg);\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean, applyAriaDisabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  if (applyAriaDisabled) {\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,mBACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,mBAAmB;AACrB,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,mBACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,eAAe;AAAA;AAAA;AAAA,kCAGW;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA,oCAC+B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA;AAEH,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,mBAAmB,UAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,uBAG1F,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5C,QAAM,uBAAuB;AAAA,IAC3B,qBAAqB;AAAA,uBACF,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,QAAM,uBAAuB;AAAA,IAC3B,YAAY;AAAA,uBACO,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY5C,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA,gCAC6B;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKkB,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1C,QAAM,kBAAkB;AAAA;AAAA,IAEtB,gBAAgB;AAAA,uBACG,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,QAAM,kBAAkB;AAAA,MACpB,YAAY;AAAA,yBACO,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa9C,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB,qBAAqB;AAAA;AAAA,EAElH;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB,gBAAgB;AAAA;AAAA,EAErG;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,UAAoB,sBAAwC;AACnH,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,MAAI,mBAAmB;AACrB,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
+  "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  applyAriaDisabled?: 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 (applyAriaDisabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  applyAriaDisabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const commonStyles = `\n    position: absolute;\n    content: '';\n    border-left: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n    border-bottom: 0.154rem solid ${handleCheckMarkColor(\n      theme,\n      checked,\n      isHovering,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n    )};\n  `;\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.538rem; /* 7px / baseFontSize */\n  left: 0.308rem; /* 4px / baseFontSize */\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n  width: 0.615rem; /* theme.space.xxs / baseFontSize */\n  height: 0.154rem; /* 2px / baseFontSize */\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.4375rem; /* 7px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.125rem;  /* 8px / 16 */\n    width: 0.5rem;/* 2px / 16 */\n  }\n`;\n\n  const normalMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n`;\n  const mobileMixedCheckmark = `\n  ${commonStyles}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n  top: 0.8461rem; /* 11px / 13 */\n  left: 0.4615rem; /* 6px / 13 */\n  height: 0.1538rem; /* 2px / 13 */\n  width: 0.9231rem; /* 12px / 13 */\n\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n    theme,\n    checked,\n    isHovering,\n    disabled,\n    applyAriaDisabled,\n    readOnly,\n    hasError,\n  )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 0.25rem; /* 4px / 16 */\n  left: 0.1875rem; /* 3px / 16 */\n  height: 0.3125rem; /* 5px / 16 */\n  width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n  const normalCheckmark = `\n\n  ${desktopCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.375rem; /* 6px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.5rem; /* 8px / 16 */\n    width: 1.0625rem; /* 17px / 16 */\n  }\n`;\n  const mobileCheckmark = `\n    ${commonStyles}\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.375rem; /* 6px / 16 */\n      left: 0.25rem; /* 4px / 16 */\n      height: 0.5rem; /* 8px / 16 */\n      width: 1.0625rem; /* 17px / 16 */\n    }\n    top: 0.4615rem; /* 6px / 13 */\n    left: 0.3077rem; /* 4px / 13 */\n    height: 0.6154rem; /* 8px / 13 */\n    width: 1.3077rem; /* 17px / 13 */\n    transform: rotate(-45deg);\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = (\n  { colors }: Theme,\n  disabled?: boolean,\n  applyAriaDisabled?: boolean,\n  readOnly?: boolean,\n): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  if (applyAriaDisabled) {\n    return colors.neutral['050'];\n  }\n\n  if (readOnly) {\n    return colors.neutral['050'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/styles.d.ts

@@ -9,3 +9,4 @@ export declare const StyledContainer: import("styled-components").StyledComponen
     wrapLabel?: boolean | undefined;
     hasLabel: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledHiddenP: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"p">, never>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-checkbox",
-  "version": "3.50.0-next.2",
+  "version": "3.50.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Checkbox",
   "files": [
@@ -25,8 +25,8 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "pnpm": ">=9",
+    "node": ">=22"
   },
   "author": "ICE MT",
   "jestSonar": {
@@ -37,16 +37,18 @@
   },
   "dependencies": {
     "uid": "~2.0.1",
-    "@elliemae/ds-props-helpers": "3.50.0-next.2",
-    "@elliemae/ds-system": "3.50.0-next.2",
-    "@elliemae/ds-truncated-tooltip-text": "3.50.0-next.2",
-    "@elliemae/ds-typescript-helpers": "3.50.0-next.2"
+    "@elliemae/ds-props-helpers": "3.50.0-rc.1",
+    "@elliemae/ds-system": "3.50.0-rc.1",
+    "@elliemae/ds-typescript-helpers": "3.50.0-rc.1",
+    "@elliemae/ds-truncated-tooltip-text": "3.50.0-rc.1"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.31",
+    "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.10.0",
+    "jest": "~29.7.0",
+    "jest-cli": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.50.0-next.2"
+    "@elliemae/ds-monorepo-devops": "3.50.0-rc.1"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",