@elliemae/ds-form-checkbox 3.33.1 → 3.34.0-next.2

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

@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -13,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -24,8 +27,25 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var exported_related_exports = {};
+__export(exported_related_exports, {
+  DSCheckboxDataTestIds: () => DSCheckboxDataTestIds,
+  DSCheckboxName: () => DSCheckboxName,
+  DSCheckboxSlots: () => DSCheckboxSlots
+});
 module.exports = __toCommonJS(exported_related_exports);
 var React = __toESM(require("react"));
-__reExport(exported_related_exports, require("./data-test-ids.js"), module.exports);
-__reExport(exported_related_exports, require("./theming.js"), module.exports);
+var import_ds_system = require("@elliemae/ds-system");
+const DSCheckboxName = "DSCheckbox";
+const DSCheckboxSlots = {
+  CONTAINER: "root",
+  INPUT: "input",
+  INPUT_WRAPPER: "input-wrapper",
+  LABEL: "label"
+};
+const DSCheckboxDataTestIds = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSCheckboxName, DSCheckboxSlots),
+  // for legacy reasons we have to keep those around and override the slots...
+  CONTAINER: "ds-checkbox-container",
+  INPUT: "ds-checkbox"
+};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './data-test-ids.js';\nexport * from './theming.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,+BAAd;AACA,qCAAc,yBADd;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  INPUT_WRAPPER: 'input-wrapper',\n  LABEL: 'label',\n} as const;\n\nexport const DSCheckboxDataTestIds = {\n  ...slotObjectToDataTestIds(DSCheckboxName, DSCheckboxSlots),\n  // for legacy reasons we have to keep those around and override the slots...\n  CONTAINER: 'ds-checkbox-container',\n  INPUT: 'ds-checkbox',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,OAAO;AACT;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAG,0CAAwB,gBAAgB,eAAe;AAAA;AAAA,EAE1D,WAAW;AAAA,EACX,OAAO;AACT;",
   "names": []
 }

package/dist/cjs/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -29,6 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
+  DSCheckboxDataTestIds: () => import_exported_related.DSCheckboxDataTestIds,
+  DSCheckboxName: () => import_exported_related.DSCheckboxName,
+  DSCheckboxSlots: () => import_exported_related.DSCheckboxSlots,
   DSControlledCheckbox: () => DSControlledCheckbox,
   DSControlledCheckboxWithSchema: () => import_ControlledCheckbox2.DSControlledCheckboxWithSchema,
   PresentationalCheckbox: () => PresentationalCheckbox
@@ -37,7 +39,7 @@ module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ControlledCheckbox = require("./ControlledCheckbox.js");
-__reExport(src_exports, require("./exported-related/index.js"), module.exports);
+var import_exported_related = require("./exported-related/index.js");
 var import_ControlledCheckbox2 = require("./ControlledCheckbox.js");
 const DSControlledCheckbox = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckbox.DSControlledCheckbox, { ...props });
 const PresentationalCheckbox = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckbox.DSControlledCheckbox, { ...props, visualOnly: true });

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\nexport const DSControlledCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} visualOnly />;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADM4D;AANnF,gCAAiD;AAIjD,wBAAc,wCAJd;AAKA,IAAAA,6BAA+C;AACxC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAmC,4CAAC,0BAAAC,sBAAA,EAAU,GAAG,OAAO;AACjG,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAmC,4CAAC,0BAAAA,sBAAA,EAAU,GAAG,OAAO,YAAU,MAAC;",
+  "sourcesContent": ["import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\n\nexport const DSControlledCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} visualOnly />;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADO4D;AAPnF,gCAAiD;AAIjD,8BAAuE;AACvE,IAAAA,6BAA+C;AAExC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAmC,4CAAC,0BAAAC,sBAAA,EAAU,GAAG,OAAO;AACjG,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAmC,4CAAC,0BAAAA,sBAAA,EAAU,GAAG,OAAO,YAAU,MAAC;",
   "names": ["import_ControlledCheckbox", "Checkbox"]
 }

package/dist/cjs/parts/MainInput.js

@@ -46,18 +46,21 @@ const MainInput = () => {
     innerRef,
     checked,
     visualOnly,
-    ariaControls: camelCaseAriaControls
+    ariaControls: camelCaseAriaControls,
+    withRelatedBlockLabel
     // ariaLabel: camelCaseAriaLabel,
     // externalLabel,
   } = propsWithDefault;
   const { "aria-controls": ariaControls } = globalProps;
   const canShowMixedState = ariaControls || camelCaseAriaControls;
+  const outOfTheBoxAriaLabelledBy = !globalProps["aria-label"] ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ""}` : void 0;
   const mainInputProps = {
     id: instanceUid,
     "data-testid": "ds-checkbox",
-    "aria-labelledby": `${instanceUid}_label ${instanceUid}_block_label`,
     "aria-checked": checked,
     // if user doesn't provide aria-checked, we make this the same as the actual value
+    "aria-labelledby": outOfTheBoxAriaLabelledBy,
+    // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations
     ...globalProps
     // any props provided by the user will over-ride ours
   };

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": ["import React from 'react';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    visualOnly,\n    ariaControls: camelCaseAriaControls,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-labelledby': `${instanceUid}_label ${instanceUid}_block_label`,\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (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}\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      />\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    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCjB;AAzCN,mBAAkB;AAClB,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;AAAA;AAAA,EAGhB,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAQ1C,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,mBAAmB,GAAG,qBAAqB;AAAA,IAC3C,gBAAgB;AAAA;AAAA,IAChB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI;AAAY,WAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    visualOnly,\n    ariaControls: camelCaseAriaControls,\n    withRelatedBlockLabel,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n  // 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}\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      />\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    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAhDN,mBAAkB;AAClB,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,EAGF,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAQ1C,QAAM,oBAAoB,gBAAgB;AAG1C,QAAM,4BAA4B,CAAC,YAAY,YAAY,IACvD,GAAG,oBAAoB,wBAAwB,IAAI,4BAA4B,OAC/E;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;AAAY,WAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

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

@@ -44,7 +44,8 @@ const defaultProps = {
   tabIndex: 0,
   onChange: () => {
   },
-  visualOnly: false
+  visualOnly: false,
+  withRelatedBlockLabel: false
 };
 const propTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
@@ -64,6 +65,7 @@ const propTypes = {
   disabled: import_ds_props_helpers.PropTypes.bool.description("Whether the checkbox is disabled or not.").defaultValue(false),
   readOnly: import_ds_props_helpers.PropTypes.bool.description("Whether the checkbox is readOnly or not.").defaultValue(false),
   wrapLabel: import_ds_props_helpers.PropTypes.bool.description("Whether to wrap or truncate the label").defaultValue(false),
+  withRelatedBlockLabel: import_ds_props_helpers.PropTypes.bool.description("wheter the autogenerated aria-labelledby should also include a reference to the block label").defaultValue(false),
   device: import_ds_props_helpers.PropTypes.oneOf(Object.values(import_device.DEVICE)).description(
     "When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration"
   ),

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

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

package/dist/cjs/typescript-testing/typescript-checkbox-valid.js

@@ -55,7 +55,8 @@ const testCompleteDefaults = {
   tabIndex: 0,
   onChange: () => {
   },
-  visualOnly: false
+  visualOnly: false,
+  withRelatedBlockLabel: false
 };
 const testInternalProps = {
   ...testRequiredProps,

package/dist/cjs/typescript-testing/typescript-checkbox-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-checkbox-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledCheckbox } from '../index.js';\nimport type { DSControlledCheckboxT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledCheckboxT.Props;\ntype ComponentPropsInternals = DSControlledCheckboxT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledCheckboxT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledCheckboxT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledCheckboxT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  onKeyDown: () => null,\n  innerRef: () => null,\n  'data-testid': 'hello',\n  device: 'mobile',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: 'mixed',\n  tabIndex: 0,\n  readOnly: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  readOnly: false,\n  tabIndex: 0,\n  onChange: () => {},\n  visualOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSControlledCheckbox {...testExplicitDefinition} />\n    <DSControlledCheckbox {...testInferedTypeCompatibility} />\n    <DSControlledCheckbox {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked value=\"checkbox1\" />\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked=\"mixed\" value=\"checkbox2\" />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;AC+ErB;AA9EF,eAAqC;AAUrC,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,WAAW,MAAM;AAAA,EACjB,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,EACf,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iCAAsB,GAAG,wBAAwB;AAAA,EAClD,4CAAC,iCAAsB,GAAG,8BAA8B;AAAA,EACxD,4CAAC,iCAAsB,GAAG,uBAAuB;AAAA,EAEjD,4CAAC,iCAAqB,UAAU,CAAC,WAAW,QAAQ,SAAO,MAAC,OAAM,aAAY;AAAA,EAC9E,4CAAC,iCAAqB,UAAU,CAAC,WAAW,QAAQ,SAAQ,SAAQ,OAAM,aAAY;AAAA,GACxF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledCheckbox } from '../index.js';\nimport type { DSControlledCheckboxT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledCheckboxT.Props;\ntype ComponentPropsInternals = DSControlledCheckboxT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledCheckboxT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledCheckboxT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledCheckboxT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  onKeyDown: () => null,\n  innerRef: () => null,\n  'data-testid': 'hello',\n  device: 'mobile',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: 'mixed',\n  tabIndex: 0,\n  readOnly: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  readOnly: false,\n  tabIndex: 0,\n  onChange: () => {},\n  visualOnly: false,\n  withRelatedBlockLabel: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSControlledCheckbox {...testExplicitDefinition} />\n    <DSControlledCheckbox {...testInferedTypeCompatibility} />\n    <DSControlledCheckbox {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked value=\"checkbox1\" />\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked=\"mixed\" value=\"checkbox2\" />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACgFrB;AA/EF,eAAqC;AAUrC,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,WAAW,MAAM;AAAA,EACjB,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,EACf,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AAAA,EACZ,uBAAuB;AACzB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iCAAsB,GAAG,wBAAwB;AAAA,EAClD,4CAAC,iCAAsB,GAAG,8BAA8B;AAAA,EACxD,4CAAC,iCAAsB,GAAG,uBAAuB;AAAA,EAEjD,4CAAC,iCAAqB,UAAU,CAAC,WAAW,QAAQ,SAAO,MAAC,OAAM,aAAY;AAAA,EAC9E,4CAAC,iCAAqB,UAAU,CAAC,WAAW,QAAQ,SAAQ,SAAQ,OAAM,aAAY;AAAA,GACxF;",
   "names": []
 }

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

@@ -1,4 +1,21 @@
 import * as React from "react";
-export * from "./data-test-ids.js";
-export * from "./theming.js";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSCheckboxName = "DSCheckbox";
+const DSCheckboxSlots = {
+  CONTAINER: "root",
+  INPUT: "input",
+  INPUT_WRAPPER: "input-wrapper",
+  LABEL: "label"
+};
+const DSCheckboxDataTestIds = {
+  ...slotObjectToDataTestIds(DSCheckboxName, DSCheckboxSlots),
+  // for legacy reasons we have to keep those around and override the slots...
+  CONTAINER: "ds-checkbox-container",
+  INPUT: "ds-checkbox"
+};
+export {
+  DSCheckboxDataTestIds,
+  DSCheckboxName,
+  DSCheckboxSlots
+};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids.js';\nexport * from './theming.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  INPUT_WRAPPER: 'input-wrapper',\n  LABEL: 'label',\n} as const;\n\nexport const DSCheckboxDataTestIds = {\n  ...slotObjectToDataTestIds(DSCheckboxName, DSCheckboxSlots),\n  // for legacy reasons we have to keep those around and override the slots...\n  CONTAINER: 'ds-checkbox-container',\n  INPUT: 'ds-checkbox',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,OAAO;AACT;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,gBAAgB,eAAe;AAAA;AAAA,EAE1D,WAAW;AAAA,EACX,OAAO;AACT;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,11 +1,14 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { DSControlledCheckbox as Checkbox } from "./ControlledCheckbox.js";
-export * from "./exported-related/index.js";
+import { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from "./exported-related/index.js";
 import { DSControlledCheckboxWithSchema } from "./ControlledCheckbox.js";
 const DSControlledCheckbox = ({ ...props }) => /* @__PURE__ */ jsx(Checkbox, { ...props });
 const PresentationalCheckbox = ({ ...props }) => /* @__PURE__ */ jsx(Checkbox, { ...props, visualOnly: true });
 export {
+  DSCheckboxDataTestIds,
+  DSCheckboxName,
+  DSCheckboxSlots,
   DSControlledCheckbox,
   DSControlledCheckboxWithSchema,
   PresentationalCheckbox

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\nexport const DSControlledCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} visualOnly />;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACM4D;AANnF,SAAS,wBAAwB,gBAAgB;AAIjD,cAAc;AACd,SAAS,sCAAsC;AACxC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAmC,oBAAC,YAAU,GAAG,OAAO;AACjG,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAmC,oBAAC,YAAU,GAAG,OAAO,YAAU,MAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\n\nexport const DSControlledCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} visualOnly />;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACO4D;AAPnF,SAAS,wBAAwB,gBAAgB;AAIjD,SAAS,uBAAuB,gBAAgB,uBAAuB;AACvE,SAAS,sCAAsC;AAExC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAmC,oBAAC,YAAU,GAAG,OAAO;AACjG,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAmC,oBAAC,YAAU,GAAG,OAAO,YAAU,MAAC;",
   "names": []
 }

package/dist/esm/parts/MainInput.js

@@ -13,18 +13,21 @@ const MainInput = () => {
     innerRef,
     checked,
     visualOnly,
-    ariaControls: camelCaseAriaControls
+    ariaControls: camelCaseAriaControls,
+    withRelatedBlockLabel
     // ariaLabel: camelCaseAriaLabel,
     // externalLabel,
   } = propsWithDefault;
   const { "aria-controls": ariaControls } = globalProps;
   const canShowMixedState = ariaControls || camelCaseAriaControls;
+  const outOfTheBoxAriaLabelledBy = !globalProps["aria-label"] ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ""}` : void 0;
   const mainInputProps = {
     id: instanceUid,
     "data-testid": "ds-checkbox",
-    "aria-labelledby": `${instanceUid}_label ${instanceUid}_block_label`,
     "aria-checked": checked,
     // if user doesn't provide aria-checked, we make this the same as the actual value
+    "aria-labelledby": outOfTheBoxAriaLabelledBy,
+    // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations
     ...globalProps
     // any props provided by the user will over-ride ours
   };

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

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

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

@@ -10,7 +10,8 @@ const defaultProps = {
   tabIndex: 0,
   onChange: () => {
   },
-  visualOnly: false
+  visualOnly: false,
+  withRelatedBlockLabel: false
 };
 const propTypes = {
   ...globalAttributesPropTypes,
@@ -30,6 +31,7 @@ const propTypes = {
   disabled: PropTypes.bool.description("Whether the checkbox is disabled or not.").defaultValue(false),
   readOnly: PropTypes.bool.description("Whether the checkbox is readOnly or not.").defaultValue(false),
   wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label").defaultValue(false),
+  withRelatedBlockLabel: PropTypes.bool.description("wheter the autogenerated aria-labelledby should also include a reference to the block label").defaultValue(false),
   device: PropTypes.oneOf(Object.values(DEVICE)).description(
     "When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration"
   ),

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

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

package/dist/esm/typescript-testing/typescript-checkbox-valid.js

@@ -32,7 +32,8 @@ const testCompleteDefaults = {
   tabIndex: 0,
   onChange: () => {
   },
-  visualOnly: false
+  visualOnly: false,
+  withRelatedBlockLabel: false
 };
 const testInternalProps = {
   ...testRequiredProps,

package/dist/esm/typescript-testing/typescript-checkbox-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-checkbox-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledCheckbox } from '../index.js';\nimport type { DSControlledCheckboxT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledCheckboxT.Props;\ntype ComponentPropsInternals = DSControlledCheckboxT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledCheckboxT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledCheckboxT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledCheckboxT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  onKeyDown: () => null,\n  innerRef: () => null,\n  'data-testid': 'hello',\n  device: 'mobile',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: 'mixed',\n  tabIndex: 0,\n  readOnly: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  readOnly: false,\n  tabIndex: 0,\n  onChange: () => {},\n  visualOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSControlledCheckbox {...testExplicitDefinition} />\n    <DSControlledCheckbox {...testInferedTypeCompatibility} />\n    <DSControlledCheckbox {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked value=\"checkbox1\" />\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked=\"mixed\" value=\"checkbox2\" />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+ErB,mBAEE,KAFF;AA9EF,SAAS,4BAA4B;AAUrC,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,WAAW,MAAM;AAAA,EACjB,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,EACf,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,wBAAsB,GAAG,wBAAwB;AAAA,EAClD,oBAAC,wBAAsB,GAAG,8BAA8B;AAAA,EACxD,oBAAC,wBAAsB,GAAG,uBAAuB;AAAA,EAEjD,oBAAC,wBAAqB,UAAU,CAAC,WAAW,QAAQ,SAAO,MAAC,OAAM,aAAY;AAAA,EAC9E,oBAAC,wBAAqB,UAAU,CAAC,WAAW,QAAQ,SAAQ,SAAQ,OAAM,aAAY;AAAA,GACxF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledCheckbox } from '../index.js';\nimport type { DSControlledCheckboxT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledCheckboxT.Props;\ntype ComponentPropsInternals = DSControlledCheckboxT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledCheckboxT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledCheckboxT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledCheckboxT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  onKeyDown: () => null,\n  innerRef: () => null,\n  'data-testid': 'hello',\n  device: 'mobile',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: 'mixed',\n  tabIndex: 0,\n  readOnly: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  wrapLabel: false,\n  hasError: false,\n  checked: false,\n  disabled: false,\n  readOnly: false,\n  tabIndex: 0,\n  onChange: () => {},\n  visualOnly: false,\n  withRelatedBlockLabel: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  onChange: () => null,\n  checked: true,\n  value: 'checkbox1',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSControlledCheckbox {...testExplicitDefinition} />\n    <DSControlledCheckbox {...testInferedTypeCompatibility} />\n    <DSControlledCheckbox {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked value=\"checkbox1\" />\n    <DSControlledCheckbox onChange={(newVal) => newVal} checked=\"mixed\" value=\"checkbox2\" />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgFrB,mBAEE,KAFF;AA/EF,SAAS,4BAA4B;AAUrC,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,WAAW,MAAM;AAAA,EACjB,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,EACf,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AAAA,EACZ,uBAAuB;AACzB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,wBAAsB,GAAG,wBAAwB;AAAA,EAClD,oBAAC,wBAAsB,GAAG,8BAA8B;AAAA,EACxD,oBAAC,wBAAsB,GAAG,uBAAuB;AAAA,EAEjD,oBAAC,wBAAqB,UAAU,CAAC,WAAW,QAAQ,SAAO,MAAC,OAAM,aAAY;AAAA,EAC9E,oBAAC,wBAAqB,UAAU,CAAC,WAAW,QAAQ,SAAQ,SAAQ,OAAM,aAAY;AAAA,GACxF;",
   "names": []
 }

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

@@ -1,2 +1,11 @@
-export * from './data-test-ids.js';
-export * from './theming.js';
+export declare const DSCheckboxName: "DSCheckbox";
+export declare const DSCheckboxSlots: {
+    readonly CONTAINER: "root";
+    readonly INPUT: "input";
+    readonly INPUT_WRAPPER: "input-wrapper";
+    readonly LABEL: "label";
+};
+export declare const DSCheckboxDataTestIds: {
+    readonly CONTAINER: "ds-checkbox-container";
+    readonly INPUT: "ds-checkbox";
+};

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { DSControlledCheckboxT } from './react-desc-prop-types.js';
 export type { DSControlledCheckboxT } from './react-desc-prop-types.js';
-export * from './exported-related/index.js';
+export { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';
 export { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';
 export declare const DSControlledCheckbox: ({ ...props }: DSControlledCheckboxT.Props) => import("react/jsx-runtime.js").JSX.Element;
 export declare const PresentationalCheckbox: ({ ...props }: DSControlledCheckboxT.Props) => import("react/jsx-runtime.js").JSX.Element;

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

@@ -15,6 +15,7 @@ export declare namespace DSControlledCheckboxT {
         disabled: boolean;
         readOnly: boolean;
         visualOnly: boolean;
+        withRelatedBlockLabel: boolean;
         onChange: (newVal: boolean, e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLabelElement> | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
     }
     interface OptionalProps {
@@ -57,6 +58,7 @@ export declare const propTypes: {
     disabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     readOnly: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     wrapLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    withRelatedBlockLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     device: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     margin: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-checkbox",
-  "version": "3.33.1",
+  "version": "3.34.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Checkbox",
   "files": [
@@ -36,17 +36,17 @@
   },
   "dependencies": {
     "uid": "~2.0.1",
-    "@elliemae/ds-props-helpers": "3.33.1",
-    "@elliemae/ds-system": "3.33.1",
-    "@elliemae/ds-truncated-tooltip-text": "3.33.1",
-    "@elliemae/ds-typescript-helpers": "3.33.1",
-    "@elliemae/ds-utilities": "3.33.1"
+    "@elliemae/ds-props-helpers": "3.34.0-next.2",
+    "@elliemae/ds-system": "3.34.0-next.2",
+    "@elliemae/ds-truncated-tooltip-text": "3.34.0-next.2",
+    "@elliemae/ds-typescript-helpers": "3.34.0-next.2",
+    "@elliemae/ds-utilities": "3.34.0-next.2"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "@elliemae/pui-theme": "~2.9.3",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.33.1"
+    "@elliemae/ds-monorepo-devops": "3.34.0-next.2"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.9.3",

package/dist/cjs/exported-related/data-test-ids.js

@@ -1,39 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var data_test_ids_exports = {};
-__export(data_test_ids_exports, {
-  DSCheckboxDataTestIds: () => DSCheckboxDataTestIds
-});
-module.exports = __toCommonJS(data_test_ids_exports);
-var React = __toESM(require("react"));
-const DSCheckboxDataTestIds = {
-  CONTAINER: "ds-checkbox-container",
-  INPUT: "ds-checkbox"
-};
-//# sourceMappingURL=data-test-ids.js.map

package/dist/cjs/exported-related/data-test-ids.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/exported-related/data-test-ids.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSCheckboxDataTestIds = {\n  CONTAINER: 'ds-checkbox-container',\n  INPUT: 'ds-checkbox',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AACT;",
-  "names": []
-}

package/dist/cjs/exported-related/theming.js

@@ -1,43 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var theming_exports = {};
-__export(theming_exports, {
-  DSCheckboxName: () => DSCheckboxName,
-  DSCheckboxSlots: () => DSCheckboxSlots
-});
-module.exports = __toCommonJS(theming_exports);
-var React = __toESM(require("react"));
-const DSCheckboxName = "DSCheckbox";
-const DSCheckboxSlots = {
-  CONTAINER: "root",
-  INPUT: "input",
-  INPUT_WRAPPER: "input-wrapper",
-  LABEL: "label"
-};
-//# sourceMappingURL=theming.js.map

package/dist/cjs/exported-related/theming.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  INPUT_WRAPPER: 'input-wrapper',\n  LABEL: 'label',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,OAAO;AACT;",
-  "names": []
-}

package/dist/esm/exported-related/data-test-ids.js

@@ -1,9 +0,0 @@
-import * as React from "react";
-const DSCheckboxDataTestIds = {
-  CONTAINER: "ds-checkbox-container",
-  INPUT: "ds-checkbox"
-};
-export {
-  DSCheckboxDataTestIds
-};
-//# sourceMappingURL=data-test-ids.js.map

package/dist/esm/exported-related/data-test-ids.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxDataTestIds = {\n  CONTAINER: 'ds-checkbox-container',\n  INPUT: 'ds-checkbox',\n} as const;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AACT;",
-  "names": []
-}

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

@@ -1,13 +0,0 @@
-import * as React from "react";
-const DSCheckboxName = "DSCheckbox";
-const DSCheckboxSlots = {
-  CONTAINER: "root",
-  INPUT: "input",
-  INPUT_WRAPPER: "input-wrapper",
-  LABEL: "label"
-};
-export {
-  DSCheckboxName,
-  DSCheckboxSlots
-};
-//# sourceMappingURL=theming.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  INPUT_WRAPPER: 'input-wrapper',\n  LABEL: 'label',\n} as const;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,OAAO;AACT;",
-  "names": []
-}

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

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

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

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