@elliemae/ds-form-checkbox 3.70.0-next.24 → 3.70.0-next.26

package/dist/cjs/TruncatedTooltipText.js

@@ -36,15 +36,23 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_ds_floating_context = require("@elliemae/ds-floating-context");
-const TruncatedSpan = import_ds_system.styled.span`
+var import_constants = require("./constants/index.js");
+const TruncatedSpan = (0, import_ds_system.styled)("span", {
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.TRUNCATED_LABEL
+})`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: inline-block;
   max-width: 100%;
 `;
-const TooltipContainer = import_ds_system.styled.div`
+const TooltipContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.TOOLTIP_CONTAINER
+})`
   text-align: center;
   min-width: ${({ theme }) => theme.space.l};
   max-width: 250px;
@@ -57,10 +65,12 @@ const TooltipContainer = import_ds_system.styled.div`
   position: relative;
   background-color: white;
   border-radius: 2px;
-  font-size: 13px;
-  color: ${({ theme }) => theme.colors.neutral[600]};
   pointer-events: none;
 `;
+const StyledTooltipText = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.TOOLTIP_TEXT
+})``;
 const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
   const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
   const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
@@ -85,7 +95,7 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
         floatingStyles,
         context,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
-          value,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTooltipText, { component: "span", variant: "b2-light", children: value }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
         ] })
       }

package/dist/cjs/TruncatedTooltipText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DnB;AA5DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AASnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
+  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\n\nconst TruncatedSpan = styled('span', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.TRUNCATED_LABEL,\n})`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.TOOLTIP_CONTAINER,\n})`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  pointer-events: none;\n`;\n\nconst StyledTooltipText = styled(DSTypography, {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.TOOLTIP_TEXT,\n})``;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          <StyledTooltipText component=\"span\" variant=\"b2-light\">\n            {value}\n          </StyledTooltipText>\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuEnB;AAvEJ,mBAA6C;AAC7C,uBAAuB;AACvB,2BAA6B;AAC7B,iCAKO;AACP,uBAAgD;AAEhD,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASD,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlE,MAAM,wBAAoB,yBAAO,mCAAc;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAOD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACC;AAAA,sDAAC,qBAAkB,WAAU,QAAO,SAAQ,YACzC,iBACH;AAAA,UACA,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
   "names": []
 }

package/dist/cjs/config/useValidateProps.js

@@ -33,8 +33,8 @@ __export(useValidateProps_exports, {
 module.exports = __toCommonJS(useValidateProps_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_exported_related = require("../exported-related/index.js");
+var import_constants = require("../constants/index.js");
 const useValidateProps = (props, propTypes) => {
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_exported_related.DSCheckboxName);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_constants.DSCheckboxName);
 };
 //# sourceMappingURL=useValidateProps.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../exported-related/index.js';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AACnE,8BAA+B;AAGxB,MAAM,mBAAmB,CAAC,OAAoC,cAA4C;AAE/G,8DAA+B,OAAO,WAAW,sCAAc;AACjE;",
+  "sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../constants/index.js';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AACnE,uBAA+B;AAGxB,MAAM,mBAAmB,CAAC,OAAoC,cAA4C;AAE/G,8DAA+B,OAAO,WAAW,+BAAc;AACjE;",
   "names": []
 }

package/dist/cjs/{exported-related → constants}/index.js

@@ -26,13 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var exported_related_exports = {};
-__export(exported_related_exports, {
+var constants_exports = {};
+__export(constants_exports, {
   DSCheckboxDataTestIds: () => DSCheckboxDataTestIds,
   DSCheckboxName: () => DSCheckboxName,
   DSCheckboxSlots: () => DSCheckboxSlots
 });
-module.exports = __toCommonJS(exported_related_exports);
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 const DSCheckboxName = "DSCheckbox";
@@ -40,7 +40,12 @@ const DSCheckboxSlots = {
   CONTAINER: "root",
   INPUT: "input",
   INPUT_WRAPPER: "input-wrapper",
-  LABEL: "label"
+  LABEL: "label",
+  LABEL_TYPOGRAPHY: "label-typography",
+  READ_ONLY_HELPER: "read-only-helper",
+  TRUNCATED_LABEL: "truncated-label",
+  TOOLTIP_CONTAINER: "tooltip-container",
+  TOOLTIP_TEXT: "tooltip-text"
 };
 const DSCheckboxDataTestIds = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSCheckboxName, DSCheckboxSlots),

package/dist/cjs/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCheckboxName = 'DSCheckbox';\n\nexport const DSCheckboxSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  INPUT_WRAPPER: 'input-wrapper',\n  LABEL: 'label',\n  LABEL_TYPOGRAPHY: 'label-typography',\n  READ_ONLY_HELPER: 'read-only-helper',\n  TRUNCATED_LABEL: 'truncated-label',\n  TOOLTIP_CONTAINER: 'tooltip-container',\n  TOOLTIP_TEXT: 'tooltip-text',\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;AAAA,EACP,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,cAAc;AAChB;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAG,0CAAwB,gBAAgB,eAAe;AAAA;AAAA,EAE1D,WAAW;AAAA,EACX,OAAO;AACT;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -28,9 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
-  DSCheckboxDataTestIds: () => import_exported_related.DSCheckboxDataTestIds,
-  DSCheckboxName: () => import_exported_related.DSCheckboxName,
-  DSCheckboxSlots: () => import_exported_related.DSCheckboxSlots,
+  DSCheckboxDataTestIds: () => import_constants.DSCheckboxDataTestIds,
+  DSCheckboxName: () => import_constants.DSCheckboxName,
+  DSCheckboxSlots: () => import_constants.DSCheckboxSlots,
   DSControlledCheckbox: () => DSControlledCheckbox,
   DSControlledCheckboxWithSchema: () => import_ControlledCheckbox2.DSControlledCheckboxWithSchema,
   PresentationalCheckbox: () => PresentationalCheckbox
@@ -39,7 +39,7 @@ module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ControlledCheckbox = require("./ControlledCheckbox.js");
-var import_exported_related = require("./exported-related/index.js");
+var import_constants = require("./constants/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 { 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;",
+  "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 './constants/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,uBAAuE;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/ControlledCheckBoxContent.js

@@ -107,7 +107,16 @@ const ControlledCheckBoxContent = () => {
             ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleLabelClick } : {},
             getOwnerProps,
             getOwnerPropsArguments,
-            children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: label })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styles.StyledLabelTypography,
+              {
+                component: "span",
+                variant: "b2",
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: wrapLabel ? label : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { 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 { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\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  const { ariaControls: camelCaseAriaControls } = propsWithDefault;\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 handleLabelClick = React.useCallback(\n    (\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      handleOnChange(e);\n      // if we are in a mixed state, we want to focus the input when the label is clicked\n      // this is because the auto-focus work only on the input itself, not a div with role=checkbox\n      // so we need to manually focus the input: https://jira.elliemae.io/browse/PUI-15422\n      if (canShowMixedState) {\n        const input = document.getElementById(instanceUid);\n        if (input) {\n          input.focus();\n        }\n      }\n    },\n    [canShowMixedState, handleOnChange, instanceUid],\n  );\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: handleLabelClick } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <TruncatedTooltipText 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;ADuDnB;AAvDJ,mBAAkB;AAClB,8BAA8B;AAC9B,kCAAqC;AACrC,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,QAAM,EAAE,cAAc,sBAAsB,IAAI;AAOhD,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CACE,MAKG;AACH,qBAAe,CAAC;AAIhB,UAAI,mBAAmB;AACrB,cAAM,QAAQ,SAAS,eAAe,WAAW;AACjD,YAAI,OAAO;AACT,gBAAM,MAAM;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,gBAAgB,WAAW;AAAA,EACjD;AAEA,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,iBAAiB,IAAI,CAAC;AAAA,YAC1F;AAAA,YACA;AAAA,YAEC,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,oDAAqB,OAAO,OAAO;AAAA;AAAA,QAChG;AAAA,QAED,WAAW,4CAAC,+BAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport { StyledContainer, StyledLabelTypography, 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  const { ariaControls: camelCaseAriaControls } = propsWithDefault;\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 handleLabelClick = React.useCallback(\n    (\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      handleOnChange(e);\n      // if we are in a mixed state, we want to focus the input when the label is clicked\n      // this is because the auto-focus work only on the input itself, not a div with role=checkbox\n      // so we need to manually focus the input: https://jira.elliemae.io/browse/PUI-15422\n      if (canShowMixedState) {\n        const input = document.getElementById(instanceUid);\n        if (input) {\n          input.focus();\n        }\n      }\n    },\n    [canShowMixedState, handleOnChange, instanceUid],\n  );\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: handleLabelClick } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledLabelTypography\n            component=\"span\"\n            variant=\"b2\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {wrapLabel ? label : <TruncatedTooltipText value={label} />}\n          </StyledLabelTypography>\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;ADuDnB;AAvDJ,mBAAkB;AAClB,8BAA8B;AAC9B,kCAAqC;AACrC,oBAAmG;AACnG,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,QAAM,EAAE,cAAc,sBAAsB,IAAI;AAOhD,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,CACE,MAKG;AACH,qBAAe,CAAC;AAIhB,UAAI,mBAAmB;AACrB,cAAM,QAAQ,SAAS,eAAe,WAAW;AACjD,YAAI,OAAO;AACT,gBAAM,MAAM;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,gBAAgB,WAAW;AAAA,EACjD;AAEA,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,iBAAiB,IAAI,CAAC;AAAA,YAC1F;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBAEC,sBAAY,QAAQ,4CAAC,oDAAqB,OAAO,OAAO;AAAA;AAAA,YAC3D;AAAA;AAAA,QACF;AAAA,QAED,WAAW,4CAAC,+BAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
   "names": ["React"]
 }

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

@@ -34,7 +34,7 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_exported_related = require("./exported-related/index.js");
+var import_constants = require("./constants/index.js");
 var import_device = require("./constants/device.js");
 const defaultProps = {
   wrapLabel: false,
@@ -52,7 +52,7 @@ const defaultProps = {
 const propTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
-  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_exported_related.DSCheckboxName, import_exported_related.DSCheckboxSlots),
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSCheckboxName, import_constants.DSCheckboxSlots),
   checked: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.bool, import_ds_props_helpers.PropTypes.string]).description("Wheter the checkbox is set as bool or mixed").isRequiredIf((props) => !props.disabled && !props.readOnly).defaultValue(false),
   onChange: import_ds_props_helpers.PropTypes.func.description("function executed when the checkbox changes state").signature("(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )").isRequiredIf(
     (props) => !props.disabled && !props.readOnly && !props.applyAriaDisabled

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 { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\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    applyAriaDisabled: 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    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCheckboxName, typeof DSCheckboxSlots> {\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    applyAriaDisabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    applyAriaDisabled?: 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  applyAriaDisabled: 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  ...getPropsPerSlotPropTypes(DSCheckboxName, DSCheckboxSlots),\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(\n      (props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly && !props.applyAriaDisabled,\n    ),\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .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;ADEvB,8BAKO;AAEP,8BAAgD;AAChD,oBAAuB;AAwEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,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,OAAG,kDAAyB,wCAAgB,uCAAe;AAAA,EAC3D,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,IACC,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,EACvF;AAAA,EACF,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,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,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;",
+  "sourcesContent": ["import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\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 type SlotFunctionArguments = {\n    dsCheckboxRoot: () => object;\n    dsCheckboxInputWrapper: () => object;\n    dsCheckboxInput: () => object;\n    dsCheckboxLabel: () => object;\n    dsCheckboxLabelTypography: () => object;\n    dsCheckboxReadOnlyHelper: () => object;\n    dsCheckboxTruncatedLabel: () => object;\n    dsCheckboxTooltipContainer: () => object;\n    dsCheckboxTooltipText: () => object;\n  };\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    applyAriaDisabled: 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    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCheckboxName, typeof DSCheckboxSlots> {\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    applyAriaDisabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    applyAriaDisabled?: 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  applyAriaDisabled: 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  ...getPropsPerSlotPropTypes(DSCheckboxName, DSCheckboxSlots),\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(\n      (props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly && !props.applyAriaDisabled,\n    ),\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .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;ADEvB,8BAKO;AAEP,uBAAgD;AAChD,oBAAuB;AAoFhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,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,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,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,IACC,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,EACvF;AAAA,EACF,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,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,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/styles.js

@@ -34,16 +34,17 @@ __export(styles_exports, {
   StyledInput: () => StyledInput,
   StyledInputMixed: () => StyledInputMixed,
   StyledLabel: () => StyledLabel,
-  StyledWrapLabel: () => StyledWrapLabel
+  StyledLabelTypography: () => StyledLabelTypography
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_styleHelpers = require("./utils/styleHelpers.js");
-var import_exported_related = require("./exported-related/index.js");
+var import_constants = require("./constants/index.js");
 const StyledCheckBox = (0, import_ds_system.styled)("span", {
-  name: import_exported_related.DSCheckboxName,
-  slot: import_exported_related.DSCheckboxSlots.INPUT_WRAPPER
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.INPUT_WRAPPER
 })`
   position: relative;
   background: ${({ theme, disabled, applyAriaDisabled, readOnly }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled, applyAriaDisabled, readOnly)};
@@ -130,8 +131,8 @@ const checkboxStyles = import_ds_system.css`
   z-index: 1;
 `;
 const StyledInput = (0, import_ds_system.styled)("input", {
-  name: import_exported_related.DSCheckboxName,
-  slot: import_exported_related.DSCheckboxSlots.INPUT
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
   &:disabled {
@@ -142,8 +143,8 @@ const StyledInput = (0, import_ds_system.styled)("input", {
   }
 `;
 const StyledInputMixed = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSCheckboxName,
-  slot: import_exported_related.DSCheckboxSlots.INPUT
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
   ${({ "aria-disabled": disabled }) => disabled ? `&:hover {
@@ -151,8 +152,8 @@ const StyledInputMixed = (0, import_ds_system.styled)("div", {
   }` : ""}
 `;
 const StyledLabel = (0, import_ds_system.styled)("label", {
-  name: import_exported_related.DSCheckboxName,
-  slot: import_exported_related.DSCheckboxSlots.LABEL
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.LABEL
 })`
   ${({ wrapLabel }) => wrapLabel && `
     overflow-wrap: break-word;
@@ -194,10 +195,13 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
     cursor: pointer;
   }`}
 `;
-const StyledWrapLabel = (0, import_ds_system.styled)("span")``;
+const StyledLabelTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.LABEL_TYPOGRAPHY
+})``;
 const StyledContainer = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSCheckboxName,
-  slot: import_exported_related.DSCheckboxSlots.CONTAINER
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.CONTAINER
 })`
   ${({ device, theme }) => {
   if (device === "mobile") {
@@ -230,7 +234,10 @@ 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`
+const StyledHiddenP = (0, import_ds_system.styled)("p", {
+  name: import_constants.DSCheckboxName,
+  slot: import_constants.DSCheckboxSlots.READ_ONLY_HELPER
+})`
   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, 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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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/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 StyledLabelTypography = styled(DSTypography, {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL_TYPOGRAPHY,\n})``;\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  name: DSCheckboxName,\n  slot: DSCheckboxSlots.READ_ONLY_HELPER,\n})`\n  display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/TruncatedTooltipText.js

@@ -2,19 +2,27 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { styled } from "@elliemae/ds-system";
+import { DSTypography } from "@elliemae/ds-typography";
 import {
   useFloatingContext,
   FloatingWrapper,
   PopoverArrow
 } from "@elliemae/ds-floating-context";
-const TruncatedSpan = styled.span`
+import { DSCheckboxName, DSCheckboxSlots } from "./constants/index.js";
+const TruncatedSpan = styled("span", {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.TRUNCATED_LABEL
+})`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: inline-block;
   max-width: 100%;
 `;
-const TooltipContainer = styled.div`
+const TooltipContainer = styled("div", {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.TOOLTIP_CONTAINER
+})`
   text-align: center;
   min-width: ${({ theme }) => theme.space.l};
   max-width: 250px;
@@ -27,10 +35,12 @@ const TooltipContainer = styled.div`
   position: relative;
   background-color: white;
   border-radius: 2px;
-  font-size: 13px;
-  color: ${({ theme }) => theme.colors.neutral[600]};
   pointer-events: none;
 `;
+const StyledTooltipText = styled(DSTypography, {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.TOOLTIP_TEXT
+})``;
 const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
   const [showTooltip, setShowTooltip] = useState(false);
   const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
@@ -55,7 +65,7 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
         floatingStyles,
         context,
         children: /* @__PURE__ */ jsxs(TooltipContainer, { children: [
-          value,
+          /* @__PURE__ */ jsx(StyledTooltipText, { component: "span", variant: "b2-light", children: value }),
           /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
         ] })
       }

package/dist/esm/TruncatedTooltipText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedTooltipText.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4DnB,mBACE,KASE,YAVJ;AA5DJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AASnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,mBAAmB,YAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,wBAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,oBACE;AAAA;AAAA,UACD,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\n\nconst TruncatedSpan = styled('span', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.TRUNCATED_LABEL,\n})`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.TOOLTIP_CONTAINER,\n})`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  pointer-events: none;\n`;\n\nconst StyledTooltipText = styled(DSTypography, {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.TOOLTIP_TEXT,\n})``;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          <StyledTooltipText component=\"span\" variant=\"b2-light\">\n            {value}\n          </StyledTooltipText>\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuEnB,mBACE,KASE,YAVJ;AAvEJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB,uBAAuB;AAEhD,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASD,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlE,MAAM,oBAAoB,OAAO,cAAc;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAOD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,mBAAmB,YAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,wBAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,oBACC;AAAA,8BAAC,qBAAkB,WAAU,QAAO,SAAQ,YACzC,iBACH;AAAA,UACA,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
   "names": []
 }

package/dist/esm/config/useValidateProps.js

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

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

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

package/dist/esm/{exported-related → constants}/index.js

@@ -5,7 +5,12 @@ const DSCheckboxSlots = {
   CONTAINER: "root",
   INPUT: "input",
   INPUT_WRAPPER: "input-wrapper",
-  LABEL: "label"
+  LABEL: "label",
+  LABEL_TYPOGRAPHY: "label-typography",
+  READ_ONLY_HELPER: "read-only-helper",
+  TRUNCATED_LABEL: "truncated-label",
+  TOOLTIP_CONTAINER: "tooltip-container",
+  TOOLTIP_TEXT: "tooltip-text"
 };
 const DSCheckboxDataTestIds = {
   ...slotObjectToDataTestIds(DSCheckboxName, DSCheckboxSlots),

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCheckboxName = 'DSCheckbox';\n\nexport const DSCheckboxSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  INPUT_WRAPPER: 'input-wrapper',\n  LABEL: 'label',\n  LABEL_TYPOGRAPHY: 'label-typography',\n  READ_ONLY_HELPER: 'read-only-helper',\n  TRUNCATED_LABEL: 'truncated-label',\n  TOOLTIP_CONTAINER: 'tooltip-container',\n  TOOLTIP_TEXT: 'tooltip-text',\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;AAAA,EACP,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,cAAc;AAChB;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,gBAAgB,eAAe;AAAA;AAAA,EAE1D,WAAW;AAAA,EACX,OAAO;AACT;",
+  "names": []
+}

package/dist/esm/index.js

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

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 { 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"],
+  "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 './constants/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/ControlledCheckBoxContent.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { TruncatedTooltipText } from "../TruncatedTooltipText.js";
-import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from "../styles.js";
+import { StyledContainer, StyledLabelTypography, StyledLabel, StyledCheckBox, StyledHiddenP } from "../styles.js";
 import { MainInput } from "./MainInput.js";
 import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX.js";
 const ControlledCheckBoxContent = () => {
@@ -74,7 +74,16 @@ const ControlledCheckBoxContent = () => {
             ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleLabelClick } : {},
             getOwnerProps,
             getOwnerPropsArguments,
-            children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(TruncatedTooltipText, { value: label })
+            children: /* @__PURE__ */ jsx(
+              StyledLabelTypography,
+              {
+                component: "span",
+                variant: "b2",
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: wrapLabel ? label : /* @__PURE__ */ jsx(TruncatedTooltipText, { 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 { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\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  const { ariaControls: camelCaseAriaControls } = propsWithDefault;\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 handleLabelClick = React.useCallback(\n    (\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      handleOnChange(e);\n      // if we are in a mixed state, we want to focus the input when the label is clicked\n      // this is because the auto-focus work only on the input itself, not a div with role=checkbox\n      // so we need to manually focus the input: https://jira.elliemae.io/browse/PUI-15422\n      if (canShowMixedState) {\n        const input = document.getElementById(instanceUid);\n        if (input) {\n          input.focus();\n        }\n      }\n    },\n    [canShowMixedState, handleOnChange, instanceUid],\n  );\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: handleLabelClick } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <TruncatedTooltipText 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;ACuDnB,SAoBI,KApBJ;AAvDJ,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,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,QAAM,EAAE,cAAc,sBAAsB,IAAI;AAOhD,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,CACE,MAKG;AACH,qBAAe,CAAC;AAIhB,UAAI,mBAAmB;AACrB,cAAM,QAAQ,SAAS,eAAe,WAAW;AACjD,YAAI,OAAO;AACT,gBAAM,MAAM;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,gBAAgB,WAAW;AAAA,EACjD;AAEA,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,iBAAiB,IAAI,CAAC;AAAA,YAC1F;AAAA,YACA;AAAA,YAEC,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,wBAAqB,OAAO,OAAO;AAAA;AAAA,QAChG;AAAA,QAED,WAAW,oBAAC,iBAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport { StyledContainer, StyledLabelTypography, 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  const { ariaControls: camelCaseAriaControls } = propsWithDefault;\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 handleLabelClick = React.useCallback(\n    (\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      handleOnChange(e);\n      // if we are in a mixed state, we want to focus the input when the label is clicked\n      // this is because the auto-focus work only on the input itself, not a div with role=checkbox\n      // so we need to manually focus the input: https://jira.elliemae.io/browse/PUI-15422\n      if (canShowMixedState) {\n        const input = document.getElementById(instanceUid);\n        if (input) {\n          input.focus();\n        }\n      }\n    },\n    [canShowMixedState, handleOnChange, instanceUid],\n  );\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: handleLabelClick } : {})}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledLabelTypography\n            component=\"span\"\n            variant=\"b2\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {wrapLabel ? label : <TruncatedTooltipText value={label} />}\n          </StyledLabelTypography>\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;ACuDnB,SAoBI,KApBJ;AAvDJ,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,iBAAiB,uBAAuB,aAAa,gBAAgB,qBAAqB;AACnG,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,QAAM,EAAE,cAAc,sBAAsB,IAAI;AAOhD,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,CACE,MAKG;AACH,qBAAe,CAAC;AAIhB,UAAI,mBAAmB;AACrB,cAAM,QAAQ,SAAS,eAAe,WAAW;AACjD,YAAI,OAAO;AACT,gBAAM,MAAM;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,gBAAgB,WAAW;AAAA,EACjD;AAEA,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,iBAAiB,IAAI,CAAC;AAAA,YAC1F;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBAEC,sBAAY,QAAQ,oBAAC,wBAAqB,OAAO,OAAO;AAAA;AAAA,YAC3D;AAAA;AAAA,QACF;AAAA,QAED,WAAW,oBAAC,iBAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
   "names": ["React"]
 }

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

@@ -5,7 +5,7 @@ import {
   xstyledPropTypes,
   getPropsPerSlotPropTypes
 } from "@elliemae/ds-props-helpers";
-import { DSCheckboxName, DSCheckboxSlots } from "./exported-related/index.js";
+import { DSCheckboxName, DSCheckboxSlots } from "./constants/index.js";
 import { DEVICE } from "./constants/device.js";
 const defaultProps = {
   wrapLabel: false,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\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    applyAriaDisabled: 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    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCheckboxName, typeof DSCheckboxSlots> {\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    applyAriaDisabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    applyAriaDisabled?: 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  applyAriaDisabled: 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  ...getPropsPerSlotPropTypes(DSCheckboxName, DSCheckboxSlots),\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(\n      (props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly && !props.applyAriaDisabled,\n    ),\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .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;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,cAAc;AAwEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,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,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,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,IACC,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,EACvF;AAAA,EACF,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,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\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 type SlotFunctionArguments = {\n    dsCheckboxRoot: () => object;\n    dsCheckboxInputWrapper: () => object;\n    dsCheckboxInput: () => object;\n    dsCheckboxLabel: () => object;\n    dsCheckboxLabelTypography: () => object;\n    dsCheckboxReadOnlyHelper: () => object;\n    dsCheckboxTruncatedLabel: () => object;\n    dsCheckboxTooltipContainer: () => object;\n    dsCheckboxTooltipText: () => object;\n  };\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    applyAriaDisabled: 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    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCheckboxName, typeof DSCheckboxSlots> {\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    applyAriaDisabled?: boolean;\n    device?: Devices;\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    applyAriaDisabled?: 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  applyAriaDisabled: 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  ...getPropsPerSlotPropTypes(DSCheckboxName, DSCheckboxSlots),\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(\n      (props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly && !props.applyAriaDisabled,\n    ),\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .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;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,cAAc;AAoFhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,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,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,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,IACC,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,EACvF;AAAA,EACF,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,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,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/styles.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { styled, th, css, xStyledCommonProps } from "@elliemae/ds-system";
+import { DSTypography } from "@elliemae/ds-typography";
 import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers.js";
-import { DSCheckboxName, DSCheckboxSlots } from "./exported-related/index.js";
+import { DSCheckboxName, DSCheckboxSlots } from "./constants/index.js";
 const StyledCheckBox = styled("span", {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.INPUT_WRAPPER
@@ -155,7 +156,10 @@ const StyledLabel = styled("label", {
     cursor: pointer;
   }`}
 `;
-const StyledWrapLabel = styled("span")``;
+const StyledLabelTypography = styled(DSTypography, {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.LABEL_TYPOGRAPHY
+})``;
 const StyledContainer = styled("div", {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.CONTAINER
@@ -191,7 +195,10 @@ const StyledContainer = styled("div", {
   align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
   ${xStyledCommonProps}
 `;
-const StyledHiddenP = styled.p`
+const StyledHiddenP = styled("p", {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.READ_ONLY_HELPER
+})`
   display: none;
 `;
 export {
@@ -201,6 +208,6 @@ export {
   StyledInput,
   StyledInputMixed,
   StyledLabel,
-  StyledWrapLabel
+  StyledLabelTypography
 };
 //# sourceMappingURL=styles.js.map

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, 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": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,IAAI,KAAK,0BAA0B;AAEpD,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAC5D,sBAAsB,OAAO,UAAU,mBAAmB,QAAQ,CAAC;AAAA;AAAA,IAEnE,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9C;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD;AACA,SAAO;AAAA,yBACc,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,CAAC;AAAA;AAAA,IAEC,CAAC,EAAE,OAAO,SAAS,UAAU,mBAAmB,UAAU,UAAU,OAAO,MAC3E,gBAAgB,OAAO,SAAS,UAAU,mBAAmB,UAAU,UAAU,OAAO,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAU3E,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA,kBAGhG,CAAC,EAAE,OAAO,mBAAmB,UAAU,SAAS,MAC5D,CAAC,YAAY,CAAC,qBAAqB,CAAC,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI,MAAS;AAAA;AAAA;AAAA;AAAA,UAI9E,CAAC,EAAE,OAAO,UAAU,UAAU,mBAAmB,SAAS,MAAM;AAChE,MAAI,SAAU,QAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,MAAM,GAAG;AAChE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,QAKD,CAAC,EAAE,OAAO,SAAS,UAAU,mBAAmB,UAAU,UAAU,OAAO,MAC3E,gBAAgB,OAAO,SAAS,UAAU,mBAAmB,UAAU,UAAU,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,0BAG5E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhD,CAAC,EAAE,UAAU,MAAM,MAC3B,WAAW,aAAa,MAAM,OAAO,QAAQ,GAAG,CAAC,KAAK,aAAa,MAAM,OAAO,MAAM,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA;AAKpG,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahB,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,cAAc;AAAA,IACd,CAAC,EAAE,iBAAiB,SAAS,MAC7B,WACI;AAAA;AAAA,OAGA,EAAE;AAAA;AAGH,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MACb,aACA;AAAA;AAAA;AAAA;AAAA,CAIH;AAAA;AAAA,WAEU,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA,uBAE/E,GAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,IAGzC,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AAAA,yBACc,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAM9C,CAAC;AAAA;AAAA,IAEC,CAAC,EAAE,UAAU,kBAAkB,MAC/B,YAAY,oBACR;AAAA;AAAA,OAGA;AAAA;AAAA,IAEJ;AAAA;AAGG,MAAM,kBAAkB,OAAO,MAAM;AAErC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD;AACA,SAAO;AAAA,yBACc,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAM9C,CAAC;AAAA,gBACa,CAAC,EAAE,SAAS,MAAO,WAAW,QAAQ,MAAO;AAAA;AAAA;AAAA,iBAG5C,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe,QAAS;AAAA,IACrE,kBAAkB;AAAA;AAGf,MAAM,gBAAgB,OAAO;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/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 StyledLabelTypography = styled(DSTypography, {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL_TYPOGRAPHY,\n})``;\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  name: DSCheckboxName,\n  slot: DSCheckboxSlots.READ_ONLY_HELPER,\n})`\n  display: none;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/TruncatedTooltipText.d.ts

@@ -3,6 +3,6 @@ interface TruncatedTooltipTextProps {
     value?: string;
     placement?: DSHookFloatingContextT.PopperPlacementsT;
 }
-declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => import("react/jsx-runtime.js").JSX.Element;
 export { TruncatedTooltipText };
 export default TruncatedTooltipText;

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

@@ -0,0 +1,23 @@
+export declare const DSCheckboxName = "DSCheckbox";
+export declare const DSCheckboxSlots: {
+    readonly CONTAINER: "root";
+    readonly INPUT: "input";
+    readonly INPUT_WRAPPER: "input-wrapper";
+    readonly LABEL: "label";
+    readonly LABEL_TYPOGRAPHY: "label-typography";
+    readonly READ_ONLY_HELPER: "read-only-helper";
+    readonly TRUNCATED_LABEL: "truncated-label";
+    readonly TOOLTIP_CONTAINER: "tooltip-container";
+    readonly TOOLTIP_TEXT: "tooltip-text";
+};
+export declare const DSCheckboxDataTestIds: {
+    readonly CONTAINER: "ds-checkbox-container";
+    readonly INPUT: "ds-checkbox";
+    readonly INPUT_WRAPPER: "ds-checkbox-input-wrapper";
+    readonly LABEL: "ds-checkbox-label";
+    readonly LABEL_TYPOGRAPHY: "ds-checkbox-label-typography";
+    readonly READ_ONLY_HELPER: "ds-checkbox-read-only-helper";
+    readonly TRUNCATED_LABEL: "ds-checkbox-truncated-label";
+    readonly TOOLTIP_CONTAINER: "ds-checkbox-tooltip-container";
+    readonly TOOLTIP_TEXT: "ds-checkbox-tooltip-text";
+};

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 { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';
+export { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './constants/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

@@ -1,11 +1,22 @@
 import type React from 'react';
 import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';
 import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
-import { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';
+import { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';
 import { DEVICE } from './constants/device.js';
 export declare namespace DSControlledCheckboxT {
     type DevicesKeys = keyof typeof DEVICE;
     type Devices = (typeof DEVICE)[DevicesKeys];
+    type SlotFunctionArguments = {
+        dsCheckboxRoot: () => object;
+        dsCheckboxInputWrapper: () => object;
+        dsCheckboxInput: () => object;
+        dsCheckboxLabel: () => object;
+        dsCheckboxLabelTypography: () => object;
+        dsCheckboxReadOnlyHelper: () => object;
+        dsCheckboxTruncatedLabel: () => object;
+        dsCheckboxTooltipContainer: () => object;
+        dsCheckboxTooltipText: () => object;
+    };
     interface RequiredProps {
     }
     interface DefaultProps {
@@ -70,6 +81,11 @@ export declare const propTypes: {
     dsCheckboxInput: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     dsCheckboxInputWrapper: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     dsCheckboxLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    dsCheckboxLabelTypography: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    dsCheckboxReadOnlyHelper: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    dsCheckboxTruncatedLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    dsCheckboxTooltipContainer: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    dsCheckboxTooltipText: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     margin: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     m: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     marginTop: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;

package/dist/types/styles.d.ts

@@ -3,7 +3,7 @@ export declare const StyledCheckBox: import("styled-components").StyledComponent
 export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
 export declare const StyledInputMixed: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("@elliemae/ds-system").Theme, DSControlledCheckboxT.StyledLabelT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"label">, never>;
-export declare const StyledWrapLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledLabelTypography: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
 export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     device?: "mobile" | "desktop";
     wrapLabel?: boolean;

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

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

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

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

package/dist/types/tests/DSControlledCheckbox.get-owner-props-arguments.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-checkbox",
-  "version": "3.70.0-next.24",
+  "version": "3.70.0-next.26",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Checkbox",
   "files": [
@@ -37,17 +37,18 @@
   },
   "dependencies": {
     "uid": "^2.0.2",
-    "@elliemae/ds-floating-context": "3.70.0-next.24",
-    "@elliemae/ds-system": "3.70.0-next.24",
-    "@elliemae/ds-typescript-helpers": "3.70.0-next.24",
-    "@elliemae/ds-props-helpers": "3.70.0-next.24"
+    "@elliemae/ds-floating-context": "3.70.0-next.26",
+    "@elliemae/ds-props-helpers": "3.70.0-next.26",
+    "@elliemae/ds-system": "3.70.0-next.26",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.26",
+    "@elliemae/ds-typography": "3.70.0-next.26"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.24",
-    "@elliemae/ds-test-utils": "3.70.0-next.24"
+    "@elliemae/ds-test-utils": "3.70.0-next.26",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.26"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCheckboxName = 'DSCheckbox';\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/esm/exported-related/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCheckboxName = 'DSCheckbox';\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/types/exported-related/index.d.ts

@@ -1,13 +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";
-};
-export declare const DSCheckboxDataTestIds: {
-    readonly CONTAINER: "ds-checkbox-container";
-    readonly INPUT: "ds-checkbox";
-    readonly INPUT_WRAPPER: "ds-checkbox-input-wrapper";
-    readonly LABEL: "ds-checkbox-label";
-};