@elliemae/ds-form-checkbox 3.61.11 → 3.70.0-alpha.9

package/dist/cjs/typescript-testing/slot-props.js

@@ -0,0 +1,48 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+const SlotPropsAsObject = {
+  dsCheckboxRoot: { "aria-label": "just a typescript test" },
+  dsCheckboxInputWrapper: { "aria-label": "just a typescript test" },
+  dsCheckboxInput: { "aria-label": "just a typescript test" },
+  dsCheckboxLabel: { "aria-label": "just a typescript test" },
+  dsCheckboxLabelTypography: { "aria-label": "just a typescript test" },
+  dsCheckboxReadOnlyHelper: { "aria-label": "just a typescript test" },
+  dsCheckboxTruncatedLabel: { "aria-label": "just a typescript test" },
+  dsCheckboxTooltipContainer: { "aria-label": "just a typescript test" },
+  dsCheckboxTooltipText: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsCheckboxRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxInputWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxInput: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxLabelTypography: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxReadOnlyHelper: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxTruncatedLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxTooltipContainer: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxTooltipText: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/cjs/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSControlledCheckboxT } from '../index.js';\nimport type { DSCheckboxName, DSCheckboxSlots } from '../constants/index.js';\n\n// Exhaustiveness contract over DSCheckboxSlots \u2014 every slot must appear in SlotFunctionArguments.\n// NOTE: dsCheckboxReadOnlyHelper is listed here for TYPE exhaustiveness only; at runtime that slot\n// is intentionally NOT a functional getOwnerProps injection point (display:none SR-only helper) \u2014\n// see KNOWN_INTENTIONAL_DEVIATIONS.md.\n//\n// Slot props can be passed in two forms \u2014 object (static) and function (dynamic).\nconst SlotPropsAsObject: Partial<DSControlledCheckboxT.Props> = {\n  dsCheckboxRoot: { 'aria-label': 'just a typescript test' },\n  dsCheckboxInputWrapper: { 'aria-label': 'just a typescript test' },\n  dsCheckboxInput: { 'aria-label': 'just a typescript test' },\n  dsCheckboxLabel: { 'aria-label': 'just a typescript test' },\n  dsCheckboxLabelTypography: { 'aria-label': 'just a typescript test' },\n  dsCheckboxReadOnlyHelper: { 'aria-label': 'just a typescript test' },\n  dsCheckboxTruncatedLabel: { 'aria-label': 'just a typescript test' },\n  dsCheckboxTooltipContainer: { 'aria-label': 'just a typescript test' },\n  dsCheckboxTooltipText: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSControlledCheckboxT.SlotFunctionArguments = {\n  dsCheckboxRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxInputWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxInput: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxLabelTypography: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxReadOnlyHelper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxTruncatedLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxTooltipContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxTooltipText: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments.\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSCheckboxName, typeof DSCheckboxSlots>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACWvB,MAAM,oBAA0D;AAAA,EAC9D,gBAAgB,EAAE,cAAc,yBAAyB;AAAA,EACzD,wBAAwB,EAAE,cAAc,yBAAyB;AAAA,EACjE,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,2BAA2B,EAAE,cAAc,yBAAyB;AAAA,EACpE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,uBAAuB,EAAE,cAAc,yBAAyB;AAClE;AAEA,MAAM,uBAAoE;AAAA,EACxE,gBAAgB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChE,wBAAwB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,2BAA2B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AACzE;AAGA,MAAM,6CAEF;",
+  "names": []
+}

package/dist/esm/TruncatedTooltipText.js

@@ -0,0 +1,107 @@
+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";
+import { DSCheckboxName, DSCheckboxSlots, DSCheckboxDataTestIds } from "./constants/index.js";
+const TruncatedSpan = styled(DSTypography, {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.TRUNCATED_LABEL
+})`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`;
+const TooltipContainer = styled("div", {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.TOOLTIP_CONTAINER
+})`
+  text-align: center;
+  min-width: ${({ theme }) => theme.space.l};
+  max-width: 250px;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  min-height: 30px;
+  display: grid;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
+  position: relative;
+  background-color: white;
+  border-radius: 2px;
+  pointer-events: none;
+`;
+const StyledTooltipText = styled(DSTypography, {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.TOOLTIP_TEXT
+})``;
+const TruncatedTooltipText = ({
+  value = "",
+  placement = "top",
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
+    placement,
+    externallyControlledIsOpen: showTooltip,
+    withoutAnimation: true
+  });
+  const handleMouseEnter = useCallback((e) => {
+    const el = e.currentTarget;
+    setShowTooltip(el.offsetWidth < el.scrollWidth);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setShowTooltip(false);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TruncatedSpan,
+      {
+        component: "span",
+        variant: "b2",
+        "data-testid": DSCheckboxDataTestIds.TRUNCATED_LABEL,
+        innerRef: refs.setReference,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: value
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FloatingWrapper,
+      {
+        innerRef: refs.setFloating,
+        isOpen: showTooltip,
+        floatingStyles,
+        context,
+        children: /* @__PURE__ */ jsxs(TooltipContainer, { getOwnerProps, getOwnerPropsArguments, children: [
+          /* @__PURE__ */ jsx(
+            StyledTooltipText,
+            {
+              component: "span",
+              variant: "b2-light",
+              getOwnerProps,
+              getOwnerPropsArguments,
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
+        ] })
+      }
+    )
+  ] });
+};
+var TruncatedTooltipText_default = TruncatedTooltipText;
+export {
+  TruncatedTooltipText,
+  TruncatedTooltipText_default as default
+};
+//# sourceMappingURL=TruncatedTooltipText.js.map

package/dist/esm/TruncatedTooltipText.js.map

@@ -0,0 +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 { DSTypography } from '@elliemae/ds-typography';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSCheckboxName, DSCheckboxSlots, DSCheckboxDataTestIds } from './constants/index.js';\n\nconst TruncatedSpan = styled(DSTypography, {\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  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nconst TruncatedTooltipText = ({\n  value = '',\n  placement = 'top',\n  getOwnerProps,\n  getOwnerPropsArguments,\n}: 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\n        component=\"span\"\n        variant=\"b2\"\n        data-testid={DSCheckboxDataTestIds.TRUNCATED_LABEL}\n        innerRef={refs.setReference}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <StyledTooltipText\n            component=\"span\"\n            variant=\"b2-light\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\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;AC8EnB,mBACE,KAkBE,YAnBJ;AA9EJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB,iBAAiB,6BAA6B;AAEvE,MAAM,gBAAgB,OAAO,cAAc;AAAA,EACzC,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;AASD,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,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;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,eAAa,sBAAsB;AAAA,QACnC,UAAU,KAAK;AAAA,QACf,cAAc;AAAA,QACd,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,oBAAiB,eAA8B,wBAC9C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;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

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
-import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from "../styles.js";
+import { TruncatedTooltipText } from "../TruncatedTooltipText.js";
+import { StyledContainer, StyledLabelTypography, StyledLabel, StyledCheckBox, StyledHiddenP } from "../styles.js";
 import { MainInput } from "./MainInput.js";
 import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX.js";
+import { DSCheckboxDataTestIds } from "../constants/index.js";
 const ControlledCheckBoxContent = () => {
   const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = React2.useContext(ControlledCheckBoxContext);
   const {
@@ -74,10 +75,31 @@ const ControlledCheckBoxContent = () => {
             ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleLabelClick } : {},
             getOwnerProps,
             getOwnerPropsArguments,
-            children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label })
+            children: wrapLabel ? /* @__PURE__ */ jsx(
+              StyledLabelTypography,
+              {
+                component: "span",
+                variant: "b2",
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: label
+              }
+            ) : /* @__PURE__ */ jsx(
+              TruncatedTooltipText,
+              {
+                value: label,
+                getOwnerProps,
+                getOwnerPropsArguments
+              }
+            )
           }
         ),
-        readOnly ? /* @__PURE__ */ jsx(StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, children: "Read only" }) : null
+        readOnly ? (
+          // READ_ONLY_HELPER is a display:none, SR-only helper — intentionally NOT a getOwnerProps
+          // injection point (no consumer use case). The slot/data-testid exist only for naming +
+          // QA targeting consistency. Tracked in KNOWN_INTENTIONAL_DEVIATIONS.md.
+          /* @__PURE__ */ jsx(StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, "data-testid": DSCheckboxDataTestIds.READ_ONLY_HELPER, children: "Read only" })
+        ) : null
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledCheckBoxContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, 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> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n      {readOnly ? <StyledHiddenP id={`${instanceUid}-read-only-helper-msg`}>Read only</StyledHiddenP> : null}\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuDnB,SAoBI,KApBJ;AAvDJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,iBAAiB,aAAa,gBAAgB,qBAAqB;AAC7F,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAEhF,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,8BAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;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';\nimport { DSCheckboxDataTestIds } from '../constants/index.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 ? (\n            <StyledLabelTypography\n              component=\"span\"\n              variant=\"b2\"\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              {label}\n            </StyledLabelTypography>\n          ) : (\n            <TruncatedTooltipText\n              value={label}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          )}\n        </StyledLabel>\n      )}\n      {readOnly ? (\n        // READ_ONLY_HELPER is a display:none, SR-only helper \u2014 intentionally NOT a getOwnerProps\n        // injection point (no consumer use case). The slot/data-testid exist only for naming +\n        // QA targeting consistency. Tracked in KNOWN_INTENTIONAL_DEVIATIONS.md.\n        <StyledHiddenP id={`${instanceUid}-read-only-helper-msg`} data-testid={DSCheckboxDataTestIds.READ_ONLY_HELPER}>\n          Read only\n        </StyledHiddenP>\n      ) : null}\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwDnB,SAoBI,KApBJ;AAxDJ,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,iBAAiB,uBAAuB,aAAa,gBAAgB,qBAAqB;AACnG,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AAE/B,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,sBACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBAEC;AAAA;AAAA,YACH,IAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,QAED;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,iBAAc,IAAI,GAAG,WAAW,yBAAyB,eAAa,sBAAsB,kBAAkB,uBAE/G;AAAA,YACE;AAAA;AAAA;AAAA,EACN;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 extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSCheckboxName,\n    typeof DSCheckboxSlots\n  > {\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\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      LegacyAriaProps {}\n\n  export interface InternalProps\n    extends\n      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;AAwFhB,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 { styled, 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
@@ -65,6 +66,7 @@ const StyledCheckBox = styled("span", {
     }
   }
   &:focus-within {
+    background: ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError }) => checked === true && !disabled && !applyAriaDisabled && !readOnly && !hasError ? theme.colors.brand[200] : void 0};
     &:hover {
       ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}
     }
@@ -74,7 +76,7 @@ const StyledCheckBox = styled("span", {
   }
   &:active {
     &:after {
-      border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `2px solid ${theme.colors.brand[600]}`};
+      border: ${({ disabled, theme }) => disabled ? `1px solid ${theme.colors.neutral[400]}` : `1px solid ${theme.colors.brand[600]}`};
     }
   }
 `;
@@ -121,41 +123,19 @@ const StyledLabel = styled("label", {
     word-break: break-word;
 `};
   width: fit-content;
-  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
-  line-height: 1.2307rem;
-  @media (max-width: ${th.breakpoint("small")}) {
-    line-height: 1rem; /* 13px / 16 */
-  }
-  ${({ device, theme }) => {
-  if (device === "mobile") {
-    return `
-      @media (max-width: ${theme.breakpoints.small}) {
-        font-size: 1rem;  /* 16px / 16 */
-      }
-      font-size: 1.2307rem; /* 16px / 13 */
-      `;
-  }
-  if (device === void 0) {
-    return `
-        font-size: 1rem; 
-      `;
-  }
-  return `
-    @media (max-width: ${theme.breakpoints.small}) {
-      font-size: 0.8125rem;  /* 13px / 16 */
-    }
-
-    font-size: 1rem;  /* 13px / 13 */
-  `;
-}}
+  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
+  /* Typography metrics delegated to child DSTypography b2 */
   display: inherit;
-  ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? `&:hover {
+  ${({ disabled }) => disabled ? `&:hover {
     cursor: not-allowed;
   }` : `&:hover {
     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
@@ -185,13 +165,16 @@ const StyledContainer = styled("div", {
 
     `;
 }}
-  column-gap: ${({ hasLabel }) => hasLabel ? "8px" : "0px}"};
+  column-gap: ${({ hasLabel }) => hasLabel ? "8px" : "0px"};
   display: inline-grid;
   grid-template-rows: min-content;
   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 +184,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": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, 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    background: ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError }) =>\n      checked === true && !disabled && !applyAriaDisabled && !readOnly && !hasError\n        ? theme.colors.brand[200]\n        : undefined};\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]}` : `1px 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[700])};\n  /* Typography metrics delegated to child DSTypography b2 */\n  display: inherit;\n  ${({ disabled }) =>\n    disabled\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/esm/typescript-testing/slot-props.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+const SlotPropsAsObject = {
+  dsCheckboxRoot: { "aria-label": "just a typescript test" },
+  dsCheckboxInputWrapper: { "aria-label": "just a typescript test" },
+  dsCheckboxInput: { "aria-label": "just a typescript test" },
+  dsCheckboxLabel: { "aria-label": "just a typescript test" },
+  dsCheckboxLabelTypography: { "aria-label": "just a typescript test" },
+  dsCheckboxReadOnlyHelper: { "aria-label": "just a typescript test" },
+  dsCheckboxTruncatedLabel: { "aria-label": "just a typescript test" },
+  dsCheckboxTooltipContainer: { "aria-label": "just a typescript test" },
+  dsCheckboxTooltipText: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsCheckboxRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxInputWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxInput: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxLabelTypography: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxReadOnlyHelper: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxTruncatedLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxTooltipContainer: () => ({ "aria-label": "just a typescript test" }),
+  dsCheckboxTooltipText: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSControlledCheckboxT } from '../index.js';\nimport type { DSCheckboxName, DSCheckboxSlots } from '../constants/index.js';\n\n// Exhaustiveness contract over DSCheckboxSlots \u2014 every slot must appear in SlotFunctionArguments.\n// NOTE: dsCheckboxReadOnlyHelper is listed here for TYPE exhaustiveness only; at runtime that slot\n// is intentionally NOT a functional getOwnerProps injection point (display:none SR-only helper) \u2014\n// see KNOWN_INTENTIONAL_DEVIATIONS.md.\n//\n// Slot props can be passed in two forms \u2014 object (static) and function (dynamic).\nconst SlotPropsAsObject: Partial<DSControlledCheckboxT.Props> = {\n  dsCheckboxRoot: { 'aria-label': 'just a typescript test' },\n  dsCheckboxInputWrapper: { 'aria-label': 'just a typescript test' },\n  dsCheckboxInput: { 'aria-label': 'just a typescript test' },\n  dsCheckboxLabel: { 'aria-label': 'just a typescript test' },\n  dsCheckboxLabelTypography: { 'aria-label': 'just a typescript test' },\n  dsCheckboxReadOnlyHelper: { 'aria-label': 'just a typescript test' },\n  dsCheckboxTruncatedLabel: { 'aria-label': 'just a typescript test' },\n  dsCheckboxTooltipContainer: { 'aria-label': 'just a typescript test' },\n  dsCheckboxTooltipText: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSControlledCheckboxT.SlotFunctionArguments = {\n  dsCheckboxRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxInputWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxInput: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxLabelTypography: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxReadOnlyHelper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxTruncatedLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxTooltipContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCheckboxTooltipText: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments.\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSCheckboxName, typeof DSCheckboxSlots>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWvB,MAAM,oBAA0D;AAAA,EAC9D,gBAAgB,EAAE,cAAc,yBAAyB;AAAA,EACzD,wBAAwB,EAAE,cAAc,yBAAyB;AAAA,EACjE,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,2BAA2B,EAAE,cAAc,yBAAyB;AAAA,EACpE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,uBAAuB,EAAE,cAAc,yBAAyB;AAClE;AAEA,MAAM,uBAAoE;AAAA,EACxE,gBAAgB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChE,wBAAwB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,2BAA2B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AACzE;AAGA,MAAM,6CAEF;",
+  "names": []
+}

package/dist/types/TruncatedTooltipText.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type DSHookFloatingContextT } from '@elliemae/ds-floating-context';
+interface TruncatedTooltipTextProps {
+    value?: string;
+    placement?: DSHookFloatingContextT.PopperPlacementsT;
+    getOwnerProps?: () => object;
+    getOwnerPropsArguments?: () => object;
+}
+declare const TruncatedTooltipText: ({ value, placement, getOwnerProps, getOwnerPropsArguments, }: TruncatedTooltipTextProps) => React.JSX.Element;
+export { TruncatedTooltipText };
+export default TruncatedTooltipText;