@elliemae/ds-form-checkbox 3.29.2-rc.0 → 3.30.0-next.0

package/dist/cjs/parts/ControlledCheckBoxContent.js

@@ -42,23 +42,33 @@ const ControlledCheckBoxContent = () => {
   const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = import_react.default.useContext(import_ControlledCheckboxCTX.ControlledCheckBoxContext);
   const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;
   const { disabled, readOnly, "aria-controls": ariaControls, className } = globalProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledContainer, { device, "data-testid": "ds-checkbox-container", className, ...xstyledProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCheckBox, { device, checked, hasError, disabled, readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MainInput.MainInput, {}) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledLabel,
-      {
-        id: `${instanceUid}_label`,
-        htmlFor: instanceUid,
-        disabled,
-        readOnly,
-        checked,
-        "data-testid": "ds-checkbox-label",
-        wrapLabel,
-        device,
-        ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {},
-        children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styles.StyledContainer,
+    {
+      wrapLabel,
+      device,
+      "data-testid": "ds-checkbox-container",
+      className,
+      ...xstyledProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCheckBox, { device, checked, hasError, disabled, readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MainInput.MainInput, {}) }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.StyledLabel,
+          {
+            id: `${instanceUid}_label`,
+            htmlFor: instanceUid,
+            disabled,
+            readOnly,
+            checked,
+            "data-testid": "ds-checkbox-label",
+            wrapLabel,
+            device,
+            ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {},
+            children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label })
+          }
+        )
+      ]
+    }
+  );
 };
 //# sourceMappingURL=ControlledCheckBoxContent.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ControlledCheckBoxContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n      <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkB;AAClB,uCAA2C;AAC3C,oBAA8E;AAC9E,uBAA0B;AAC1B,mCAA0C;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/E,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM,EAAE,SAAS,QAAQ,OAAO,UAAU,WAAW,cAAc,mBAAmB,IAAI;AAC1F,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,SACE,6CAAC,iCAAgB,QAAgB,eAAY,yBAAwB,WAAuB,GAAG,cAC7F;AAAA,gDAAC,gCAAe,QAAgB,SAAkB,UAAoB,UAAoB,UACxF,sDAAC,8BAAU,GACb;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG;AAAA,QACP,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,QAEvF,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n  return (\n    <StyledContainer\n      wrapLabel={wrapLabel}\n      device={device}\n      data-testid=\"ds-checkbox-container\"\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAZJ,mBAAkB;AAClB,uCAA2C;AAC3C,oBAA8E;AAC9E,uBAA0B;AAC1B,mCAA0C;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/E,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM,EAAE,SAAS,QAAQ,OAAO,UAAU,WAAW,cAAc,mBAAmB,IAAI;AAC1F,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,gCAAe,QAAgB,SAAkB,UAAoB,UAAoB,UACxF,sDAAC,8BAAU,GACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG;AAAA,YACP,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YAEvF,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": ["React"]
 }

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

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

package/dist/cjs/styles.js

@@ -50,23 +50,31 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      width: 24px;
-      height: 24px;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+        width: 1.5rem;  /* 24px / 16 */
+        height: 1.5rem;  /* 24px / 16 */
+      }
+      width: 1.846rem; /* 24px / 13 */
+      height: 1.846rem;  /* 24px / 13 */`;
   }
   if (device === void 0) {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          width: 24px;
-          height: 24px;
+          width: 1.5rem;  /* 24px / 16 */
+          height: 1.5rem;  /* 24px / 16 */
         }
-        width: ${theme.space.xs};
-        height: ${theme.space.xs};
+        width: 1.2307rem;
+        height: 1.2307rem;
       `;
   }
   return `
-      width: ${theme.space.xs};
-      height: ${theme.space.xs};
-    `;
+    @media (max-width: ${theme.breakpoints.small}) {
+      width: 1rem;  /* 16px / 16 */
+      height: 1rem;  /* 16px / 16 */
+    }
+    width: 1.2307rem; /* 16px / 13 */
+    height: 1.2307rem; /* 16px / 13 */
+  `;
 }}
 
   ${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, false, device)}
@@ -81,7 +89,6 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
     left: 0px;
     border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
   }
-
   &:hover {
     background: ${({ theme, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
 
@@ -89,17 +96,14 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
       border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
     }
   }
-
   &:focus-within {
     &:hover {
       ${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true, device)}
     }
-
     &:after {
       border: 2px solid ${({ theme }) => theme.colors.brand[700]};
     }
   }
-
   &:active {
     &:after {
       border: 2px solid ${({ theme }) => theme.colors.brand[600]};
@@ -140,44 +144,40 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
   name: import_exported_related.DSCheckboxName,
   slot: import_exported_related.DSCheckboxSlots.LABEL
 })`
-  margin: 2px 0px -2px 8px;
-  ${({ wrapLabel, theme }) => wrapLabel ? `
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: break-word;
-` : `margin-left: ${theme.space.xxs}`};
-
+  ${({ wrapLabel }) => wrapLabel && `
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: break-word;
+`};
+  width: fit-content;
   color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
-  font-size: 13px;
-
+  line-height: 1.2307rem;
+  @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
+    line-height: 1rem; /* 13px / 16 */
+  }
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `
-      margin: 5px 0px -5px 8px;
-      font-size: 16px;
-      line-height: 1.2;
+      @media (max-width: ${theme.breakpoints.small}) {
+        font-size: 1rem;  /* 16px / 16 */
+      }
+      font-size: 1.2307rem; /* 16px / 13 */
       `;
   }
   if (device === void 0) {
     return `
-        @media (max-width: ${theme.breakpoints.small}) {
-          margin: 5px 0px -5px 8px;
-          font-size: 16px;
-          line-height: 1.2;
-        }
-
-        font-size: 13px;
-        line-height: 1.1;
+        font-size: 1rem; 
       `;
   }
   return `
-    font-size: 13px;
-    line-height: 1.1;
-    `;
-}}
+    @media (max-width: ${theme.breakpoints.small}) {
+      font-size: 0.8125rem;  /* 13px / 16 */
+    }
 
+    font-size: 1rem;  /* 13px / 13 */
+  `;
+}}
   display: inherit;
-
   ${({ disabled }) => disabled ? `&:hover {
     cursor: not-allowed;
   }` : `&:hover {
@@ -192,23 +192,31 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      grid-template-columns: 24px auto;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1.5rem auto; /* 24px / 16px */
+    }
+      grid-template-columns: 1.846rem auto;
+      `;
   }
   if (device === void 0) {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          grid-template-columns: 24px auto;
+          grid-template-columns: 1.5rem auto;
         }
-        grid-template-columns: ${theme.space.xs} auto;
+        grid-template-columns: 1.23rem auto;
     `;
   }
   return `
-    grid-template-columns: ${theme.space.xs} auto;
+    @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1rem auto; /* 16px / 16px */
+    }
+    grid-template-columns: 1.2307rem auto; /* 16px / 13 */
+
     `;
 }}
+  column-gap: 8px;
   display: inline-grid;
-  grid-template-rows: min-content;
-  align-items: flex-start;
+  align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
   ${import_ds_system.xStyledCommonProps}
 `;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.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 }) => handleBackgroundColor(theme, disabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, 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\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledInputMixed = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  ${({ 'aria-disabled': disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n  margin: 2px 0px -2px 8px;\n  ${({ wrapLabel, theme }) =>\n    wrapLabel\n      ? `\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  word-break: break-word;\n`\n      : `margin-left: ${theme.space.xxs}`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 13px;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 5px 0px -5px 8px;\n      font-size: 16px;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 5px 0px -5px 8px;\n          font-size: 16px;\n          line-height: 1.2;\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n    font-size: 13px;\n    line-height: 1.1;\n    `;\n  }}\n\n  display: inherit;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 24px auto;\n        }\n        grid-template-columns: ${theme.space.xs} auto;\n    `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n    `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: flex-start;\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAEhD,0BAAuD;AACvD,8BAAgD;AAEzC,MAAM,qBAAiB,yBAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,SAAS,UAAM,2CAAsB,OAAO,QAAQ;AAAA;AAAA,IAE1E,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,iBAI9B,MAAM,MAAM;AAAA,kBACX,MAAM,MAAM;AAAA;AAAA,EAE1B;AACA,SAAO;AAAA,eACI,MAAM,MAAM;AAAA,gBACX,MAAM,MAAM;AAAA;AAE1B;AAAA;AAAA,IAEE,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,UACxD,qCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUvD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,kBAI9F,CAAC,EAAE,OAAO,SAAS,MAAO,CAAC,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,0BAGxD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxG,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,UACxD,qCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,0BAIxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAK/D,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahB,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,iBAAiB,SAAS,MAC7B,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAM,MACpB,YACI;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAgB,MAAM,MAAM;AAAA;AAAA,WAEzB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,IAGhG,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS3C;AACA,SAAO;AAAA;AAAA;AAAA;AAIT;AAAA;AAAA;AAAA;AAAA,IAIE,CAAC,EAAE,SAAS,MACZ,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,sBAAkB,yBAAO,MAAM;AAErC,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA,EAET;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA,iCAGd,MAAM,MAAM;AAAA;AAAA,EAEzC;AACA,SAAO;AAAA,6BACkB,MAAM,MAAM;AAAA;AAEvC;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA;",
+  "sourcesContent": ["import { 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 }) => handleBackgroundColor(theme, disabled)};\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, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, 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, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\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 }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: 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: 8px;\n  display: inline-grid;\n  align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoD;AAEpD,0BAAuD;AACvD,8BAAgD;AAEzC,MAAM,qBAAiB,yBAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,SAAS,UAAM,2CAAsB,OAAO,QAAQ;AAAA;AAAA,IAE1E,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3C;AACA,SAAO;AAAA,yBACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC;AAAA;AAAA,IAEE,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,UACxD,qCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUvD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,kBAG9F,CAAC,EAAE,OAAO,SAAS,MAAO,CAAC,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,0BAGxD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,QAKxG,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,UACxD,qCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA,0BAGxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAK/D,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahB,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,iBAAiB,SAAS,MAC7B,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MACb,aACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMO,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,uBAE7E,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA,IAGxC,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AAAA,yBACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMzC;AAAA;AAAA,IAEE,CAAC,EAAE,SAAS,MACZ,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,sBAAkB,yBAAO,MAAM;AAErC,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3C;AACA,SAAO;AAAA,yBACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMzC;AAAA;AAAA;AAAA,iBAGe,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA,IAC5D;AAAA;",
   "names": []
 }

package/dist/cjs/utils/styleHelpers.js

@@ -50,57 +50,91 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
   return colors.brand[600];
 };
 const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
+  const commonStyles = `
+    position: absolute;
+    content: '';
+    border-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+    border-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+  `;
   const desktopMixedCheckmark = `
   position: absolute;
   content: '';
-  top: 7px;
-  left: 4px;
+  top: 0.538rem; /* 7px / baseFontSize */
+  left: 0.308rem; /* 4px / baseFontSize */
   background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
-  width: ${theme.space.xxs};
-  height: 2px;
+  width: 0.615rem; /* theme.space.xxs / baseFontSize */
+  height: 0.154rem; /* 2px / baseFontSize */
+  @media (max-width: ${theme.breakpoints.small}) {
+    top: 0.4375rem; /* 7px / 16 */
+    left: 0.25rem; /* 4px / 16 */
+    height: 0.125rem;  /* 8px / 16 */
+    width: 0.5rem;/* 2px / 16 */
+  }
 `;
   const normalMixedCheckmark = `
+  ${desktopMixedCheckmark}
   @media (max-width: ${theme.breakpoints.small}) {
-    top:11px;
-    left:6px;
-    height:2px;
-    width:12px;
+    top: 0.6875rem; /* 11px / 16 */
+    left: 0.375rem; /* 6px / 16 */
+    height: 0.125rem; /* 2px / 16 */
+    width: 0.75rem; /* 12px / 16 */
   }
-  ${desktopMixedCheckmark}
 `;
   const mobileMixedCheckmark = `
-  ${desktopMixedCheckmark}
-  top:11px;
-  left:6px;
-  height:2px;
-  width:12px;
+  ${commonStyles}
+  @media (max-width: ${theme.breakpoints.small}) {
+    top: 0.6875rem; /* 11px / 16 */
+    left: 0.375rem; /* 6px / 16 */
+    height: 0.125rem; /* 2px / 16 */
+    width: 0.75rem; /* 12px / 16 */
+  }
+  top: 0.8461rem; /* 11px / 13 */
+  left: 0.4615rem; /* 6px / 13 */
+  height: 0.1538rem; /* 2px / 13 */
+  width: 0.9231rem; /* 12px / 13 */
+
 `;
   const desktopCheckmark = `
 position: absolute;
 content: '';
-top: 4px;
-left: 3px;
-border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
-border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
-height: 5px;
-width: 10px;
+top: 0.308rem; /* 4px / baseFontSize */
+left: 0.231rem; /* 3px / baseFontSize */
+border-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+border-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+height: 0.385rem; /* 5px / baseFontSize */
+width: 0.769rem; /* 10px / baseFontSize */
 transform: rotate(-45deg);
-`;
-  const normalCheckmark = `
+
 @media (max-width: ${theme.breakpoints.small}) {
-  top: 6px;
-  left: 4px;
-  height: 8px;
-  width: 17px;
+  top: 0.25rem; /* 4px / 16 */
+  left: 0.1875rem; /* 3px / 16 */
+  height: 0.3125rem; /* 5px / 16 */
+  width: 0.625rem; /* 10px / 16 */
 }
-${desktopCheckmark}
+`;
+  const normalCheckmark = `
+
+  ${desktopCheckmark}
+  @media (max-width: ${theme.breakpoints.small}) {
+    top: 0.375rem; /* 6px / 16 */
+    left: 0.25rem; /* 4px / 16 */
+    height: 0.5rem; /* 8px / 16 */
+    width: 1.0625rem; /* 17px / 16 */
+  }
 `;
   const mobileCheckmark = `
-${desktopCheckmark}
-top: 6px;
-left: 4px;
-height: 8px;
-width: 17px;
+    ${commonStyles}
+    @media (max-width: ${theme.breakpoints.small}) {
+      top: 0.375rem; /* 6px / 16 */
+      left: 0.25rem; /* 4px / 16 */
+      height: 0.5rem; /* 8px / 16 */
+      width: 1.0625rem; /* 17px / 16 */
+    }
+    top: 0.4615rem; /* 6px / 13 */
+    left: 0.3077rem; /* 4px / 13 */
+    height: 0.6154rem; /* 8px / 13 */
+    width: 1.3077rem; /* 17px / 13 */
+    transform: rotate(-45deg);
 `;
   if (checked === "mixed") {
     return `&:before {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 7px;\n  left: 4px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: ${theme.space.xxs};\n  height: 2px;\n`;\n\n  const normalMixedCheckmark = `\n  @media (max-width: ${theme.breakpoints.small}) {\n    top:11px;\n    left:6px;\n    height:2px;\n    width:12px;\n  }\n  ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  top:11px;\n  left:6px;\n  height:2px;\n  width:12px;\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 4px;\nleft: 3px;\nborder-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 5px;\nwidth: 10px;\ntransform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 6px;\n  left: 4px;\n  height: 8px;\n  width: 17px;\n}\n${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n${desktopCheckmark}\ntop: 6px;\nleft: 4px;\nheight: 8px;\nwidth: 17px;\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,uBACR,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC;AAAA;AAEF,QAAM,uBAAuB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,2BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMtG,QAAM,kBAAkB;AAAA,qBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrC;AAAA;AAEA,QAAM,kBAAkB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const commonStyles = `\n    position: absolute;\n    content: '';\n    border-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n    border-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  `;\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.538rem; /* 7px / baseFontSize */\n  left: 0.308rem; /* 4px / baseFontSize */\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: 0.615rem; /* theme.space.xxs / baseFontSize */\n  height: 0.154rem; /* 2px / baseFontSize */\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.4375rem; /* 7px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.125rem;  /* 8px / 16 */\n    width: 0.5rem;/* 2px / 16 */\n  }\n`;\n\n  const normalMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n`;\n  const mobileMixedCheckmark = `\n  ${commonStyles}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n  top: 0.8461rem; /* 11px / 13 */\n  left: 0.4615rem; /* 6px / 13 */\n  height: 0.1538rem; /* 2px / 13 */\n  width: 0.9231rem; /* 12px / 13 */\n\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 0.25rem; /* 4px / 16 */\n  left: 0.1875rem; /* 3px / 16 */\n  height: 0.3125rem; /* 5px / 16 */\n  width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n  const normalCheckmark = `\n\n  ${desktopCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.375rem; /* 6px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.5rem; /* 8px / 16 */\n    width: 1.0625rem; /* 17px / 16 */\n  }\n`;\n  const mobileCheckmark = `\n    ${commonStyles}\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.375rem; /* 6px / 16 */\n      left: 0.25rem; /* 4px / 16 */\n      height: 0.5rem; /* 8px / 16 */\n      width: 1.0625rem; /* 17px / 16 */\n    }\n    top: 0.4615rem; /* 6px / 13 */\n    left: 0.3077rem; /* 4px / 13 */\n    height: 0.6154rem; /* 8px / 13 */\n    width: 1.3077rem; /* 17px / 13 */\n    transform: rotate(-45deg);\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,eAAe;AAAA;AAAA;AAAA,kCAGW,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,oCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAE/G,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA,uBAGtE,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,QAAM,uBAAuB;AAAA,IAC3B;AAAA,uBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,QAAM,uBAAuB;AAAA,IAC3B;AAAA,uBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvC,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKxF,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrC,QAAM,kBAAkB;AAAA;AAAA,IAEtB;AAAA,uBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,QAAM,kBAAkB;AAAA,MACpB;AAAA,yBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazC,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
   "names": []
 }

package/dist/esm/parts/ControlledCheckBoxContent.js

@@ -9,24 +9,34 @@ const ControlledCheckBoxContent = () => {
   const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = React2.useContext(ControlledCheckBoxContext);
   const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;
   const { disabled, readOnly, "aria-controls": ariaControls, className } = globalProps;
-  return /* @__PURE__ */ jsxs(StyledContainer, { device, "data-testid": "ds-checkbox-container", className, ...xstyledProps, children: [
-    /* @__PURE__ */ jsx(StyledCheckBox, { device, checked, hasError, disabled, readOnly, children: /* @__PURE__ */ jsx(MainInput, {}) }),
-    label && /* @__PURE__ */ jsx(
-      StyledLabel,
-      {
-        id: `${instanceUid}_label`,
-        htmlFor: instanceUid,
-        disabled,
-        readOnly,
-        checked,
-        "data-testid": "ds-checkbox-label",
-        wrapLabel,
-        device,
-        ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {},
-        children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    StyledContainer,
+    {
+      wrapLabel,
+      device,
+      "data-testid": "ds-checkbox-container",
+      className,
+      ...xstyledProps,
+      children: [
+        /* @__PURE__ */ jsx(StyledCheckBox, { device, checked, hasError, disabled, readOnly, children: /* @__PURE__ */ jsx(MainInput, {}) }),
+        label && /* @__PURE__ */ jsx(
+          StyledLabel,
+          {
+            id: `${instanceUid}_label`,
+            htmlFor: instanceUid,
+            disabled,
+            readOnly,
+            checked,
+            "data-testid": "ds-checkbox-label",
+            wrapLabel,
+            device,
+            ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {},
+            children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   ControlledCheckBoxContent

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 { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n  return (\n    <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n      <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACanB,SAEI,KAFJ;AAbJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,sBAAsB;AAC9E,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM,EAAE,SAAS,QAAQ,OAAO,UAAU,WAAW,cAAc,mBAAmB,IAAI;AAC1F,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,SACE,qBAAC,mBAAgB,QAAgB,eAAY,yBAAwB,WAAuB,GAAG,cAC7F;AAAA,wBAAC,kBAAe,QAAgB,SAAkB,UAAoB,UAAoB,UACxF,8BAAC,aAAU,GACb;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG;AAAA,QACP,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,QAEvF,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,IACtG;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n    React.useContext(ControlledCheckBoxContext);\n  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;\n  const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n  return (\n    <StyledContainer\n      wrapLabel={wrapLabel}\n      device={device}\n      data-testid=\"ds-checkbox-container\"\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        <MainInput />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          id={`${instanceUid}_label`}\n          htmlFor={instanceUid}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n          wrapLabel={wrapLabel}\n          device={device}\n          {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAQI,KARJ;AAZJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,sBAAsB;AAC9E,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM,EAAE,SAAS,QAAQ,OAAO,UAAU,WAAW,cAAc,mBAAmB,IAAI;AAC1F,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,kBAAe,QAAgB,SAAkB,UAAoB,UAAoB,UACxF,8BAAC,aAAU,GACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG;AAAA,YACP,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YAEvF,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": ["React"]
 }

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

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

package/dist/esm/styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
+import { styled, th, css, xStyledCommonProps } from "@elliemae/ds-system";
 import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers.js";
 import { DSCheckboxName, DSCheckboxSlots } from "./exported-related/index.js";
 const StyledCheckBox = styled("span", {
@@ -12,23 +12,31 @@ const StyledCheckBox = styled("span", {
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      width: 24px;
-      height: 24px;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+        width: 1.5rem;  /* 24px / 16 */
+        height: 1.5rem;  /* 24px / 16 */
+      }
+      width: 1.846rem; /* 24px / 13 */
+      height: 1.846rem;  /* 24px / 13 */`;
   }
   if (device === void 0) {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          width: 24px;
-          height: 24px;
+          width: 1.5rem;  /* 24px / 16 */
+          height: 1.5rem;  /* 24px / 16 */
         }
-        width: ${theme.space.xs};
-        height: ${theme.space.xs};
+        width: 1.2307rem;
+        height: 1.2307rem;
       `;
   }
   return `
-      width: ${theme.space.xs};
-      height: ${theme.space.xs};
-    `;
+    @media (max-width: ${theme.breakpoints.small}) {
+      width: 1rem;  /* 16px / 16 */
+      height: 1rem;  /* 16px / 16 */
+    }
+    width: 1.2307rem; /* 16px / 13 */
+    height: 1.2307rem; /* 16px / 13 */
+  `;
 }}
 
   ${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}
@@ -43,7 +51,6 @@ const StyledCheckBox = styled("span", {
     left: 0px;
     border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
   }
-
   &:hover {
     background: ${({ theme, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
 
@@ -51,17 +58,14 @@ const StyledCheckBox = styled("span", {
       border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
     }
   }
-
   &:focus-within {
     &:hover {
       ${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}
     }
-
     &:after {
       border: 2px solid ${({ theme }) => theme.colors.brand[700]};
     }
   }
-
   &:active {
     &:after {
       border: 2px solid ${({ theme }) => theme.colors.brand[600]};
@@ -102,44 +106,40 @@ const StyledLabel = styled("label", {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.LABEL
 })`
-  margin: 2px 0px -2px 8px;
-  ${({ wrapLabel, theme }) => wrapLabel ? `
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: break-word;
-` : `margin-left: ${theme.space.xxs}`};
-
+  ${({ wrapLabel }) => wrapLabel && `
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: break-word;
+`};
+  width: fit-content;
   color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
-  font-size: 13px;
-
+  line-height: 1.2307rem;
+  @media (max-width: ${th.breakpoint("small")}) {
+    line-height: 1rem; /* 13px / 16 */
+  }
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `
-      margin: 5px 0px -5px 8px;
-      font-size: 16px;
-      line-height: 1.2;
+      @media (max-width: ${theme.breakpoints.small}) {
+        font-size: 1rem;  /* 16px / 16 */
+      }
+      font-size: 1.2307rem; /* 16px / 13 */
       `;
   }
   if (device === void 0) {
     return `
-        @media (max-width: ${theme.breakpoints.small}) {
-          margin: 5px 0px -5px 8px;
-          font-size: 16px;
-          line-height: 1.2;
-        }
-
-        font-size: 13px;
-        line-height: 1.1;
+        font-size: 1rem; 
       `;
   }
   return `
-    font-size: 13px;
-    line-height: 1.1;
-    `;
-}}
+    @media (max-width: ${theme.breakpoints.small}) {
+      font-size: 0.8125rem;  /* 13px / 16 */
+    }
 
+    font-size: 1rem;  /* 13px / 13 */
+  `;
+}}
   display: inherit;
-
   ${({ disabled }) => disabled ? `&:hover {
     cursor: not-allowed;
   }` : `&:hover {
@@ -154,23 +154,31 @@ const StyledContainer = styled("div", {
   ${({ device, theme }) => {
   if (device === "mobile") {
     return `    
-      grid-template-columns: 24px auto;`;
+      @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1.5rem auto; /* 24px / 16px */
+    }
+      grid-template-columns: 1.846rem auto;
+      `;
   }
   if (device === void 0) {
     return `
         @media (max-width: ${theme.breakpoints.small}) {
-          grid-template-columns: 24px auto;
+          grid-template-columns: 1.5rem auto;
         }
-        grid-template-columns: ${theme.space.xs} auto;
+        grid-template-columns: 1.23rem auto;
     `;
   }
   return `
-    grid-template-columns: ${theme.space.xs} auto;
+    @media (max-width: ${theme.breakpoints.small}) {
+      grid-template-columns: 1rem auto; /* 16px / 16px */
+    }
+    grid-template-columns: 1.2307rem auto; /* 16px / 13 */
+
     `;
 }}
+  column-gap: 8px;
   display: inline-grid;
-  grid-template-rows: min-content;
-  align-items: flex-start;
+  align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
   ${xStyledCommonProps}
 `;
 export {

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.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 }) => handleBackgroundColor(theme, disabled)};\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      width: 24px;\n      height: 24px;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          width: 24px;\n          height: 24px;\n        }\n        width: ${theme.space.xs};\n        height: ${theme.space.xs};\n      `;\n    }\n    return `\n      width: ${theme.space.xs};\n      height: ${theme.space.xs};\n    `;\n  }}\n\n  ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, 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\n  &:hover {\n    background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledInputMixed = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  ${({ 'aria-disabled': disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n  margin: 2px 0px -2px 8px;\n  ${({ wrapLabel, theme }) =>\n    wrapLabel\n      ? `\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  word-break: break-word;\n`\n      : `margin-left: ${theme.space.xxs}`};\n\n  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n  font-size: 13px;\n\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `\n      margin: 5px 0px -5px 8px;\n      font-size: 16px;\n      line-height: 1.2;\n      `;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          margin: 5px 0px -5px 8px;\n          font-size: 16px;\n          line-height: 1.2;\n        }\n\n        font-size: 13px;\n        line-height: 1.1;\n      `;\n    }\n    return `\n    font-size: 13px;\n    line-height: 1.1;\n    `;\n  }}\n\n  display: inherit;\n\n  ${({ disabled }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n  ${({ device, theme }) => {\n    if (device === 'mobile') {\n      return `    \n      grid-template-columns: 24px auto;`;\n    }\n    if (device === undefined) {\n      return `\n        @media (max-width: ${theme.breakpoints.small}) {\n          grid-template-columns: 24px auto;\n        }\n        grid-template-columns: ${theme.space.xs} auto;\n    `;\n    }\n    return `\n    grid-template-columns: ${theme.space.xs} auto;\n    `;\n  }}\n  display: inline-grid;\n  grid-template-rows: min-content;\n  align-items: flex-start;\n  ${xStyledCommonProps}\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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 }) => handleBackgroundColor(theme, disabled)};\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, readOnly, hasError, device }) =>\n    handleCheckmark(theme, checked, disabled, 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, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n\n    &:after {\n      border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n    }\n  }\n  &:focus-within {\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n    }\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n  &:active {\n    &:after {\n      border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n    }\n  }\n`;\n\nconst checkboxStyles = css`\n  &:hover {\n    cursor: pointer;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.INPUT,\n})`\n  ${checkboxStyles}\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\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 }) =>\n    disabled\n      ? `&:hover {\n    cursor: not-allowed;\n  }`\n      : `&:hover {\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n  name: DSCheckboxName,\n  slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: 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: 8px;\n  display: inline-grid;\n  align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n  ${xStyledCommonProps}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,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,SAAS,MAAM,sBAAsB,OAAO,QAAQ;AAAA;AAAA,IAE1E,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3C;AACA,SAAO;AAAA,yBACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC;AAAA;AAAA,IAEE,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUvD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,kBAG9F,CAAC,EAAE,OAAO,SAAS,MAAO,CAAC,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,0BAGxD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,QAKxG,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA,0BAGxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAK/D,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahB,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,iBAAiB,SAAS,MAC7B,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MACb,aACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMO,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,uBAE7E,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA,IAGxC,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AAAA,yBACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMzC;AAAA;AAAA,IAEE,CAAC,EAAE,SAAS,MACZ,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;AAErC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA,2BACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3C;AACA,SAAO;AAAA,yBACc,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMzC;AAAA;AAAA;AAAA,iBAGe,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA,IAC5D;AAAA;",
   "names": []
 }

package/dist/esm/utils/styleHelpers.js

@@ -15,57 +15,91 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
   return colors.brand[600];
 };
 const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
+  const commonStyles = `
+    position: absolute;
+    content: '';
+    border-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+    border-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+  `;
   const desktopMixedCheckmark = `
   position: absolute;
   content: '';
-  top: 7px;
-  left: 4px;
+  top: 0.538rem; /* 7px / baseFontSize */
+  left: 0.308rem; /* 4px / baseFontSize */
   background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
-  width: ${theme.space.xxs};
-  height: 2px;
+  width: 0.615rem; /* theme.space.xxs / baseFontSize */
+  height: 0.154rem; /* 2px / baseFontSize */
+  @media (max-width: ${theme.breakpoints.small}) {
+    top: 0.4375rem; /* 7px / 16 */
+    left: 0.25rem; /* 4px / 16 */
+    height: 0.125rem;  /* 8px / 16 */
+    width: 0.5rem;/* 2px / 16 */
+  }
 `;
   const normalMixedCheckmark = `
+  ${desktopMixedCheckmark}
   @media (max-width: ${theme.breakpoints.small}) {
-    top:11px;
-    left:6px;
-    height:2px;
-    width:12px;
+    top: 0.6875rem; /* 11px / 16 */
+    left: 0.375rem; /* 6px / 16 */
+    height: 0.125rem; /* 2px / 16 */
+    width: 0.75rem; /* 12px / 16 */
   }
-  ${desktopMixedCheckmark}
 `;
   const mobileMixedCheckmark = `
-  ${desktopMixedCheckmark}
-  top:11px;
-  left:6px;
-  height:2px;
-  width:12px;
+  ${commonStyles}
+  @media (max-width: ${theme.breakpoints.small}) {
+    top: 0.6875rem; /* 11px / 16 */
+    left: 0.375rem; /* 6px / 16 */
+    height: 0.125rem; /* 2px / 16 */
+    width: 0.75rem; /* 12px / 16 */
+  }
+  top: 0.8461rem; /* 11px / 13 */
+  left: 0.4615rem; /* 6px / 13 */
+  height: 0.1538rem; /* 2px / 13 */
+  width: 0.9231rem; /* 12px / 13 */
+
 `;
   const desktopCheckmark = `
 position: absolute;
 content: '';
-top: 4px;
-left: 3px;
-border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
-border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
-height: 5px;
-width: 10px;
+top: 0.308rem; /* 4px / baseFontSize */
+left: 0.231rem; /* 3px / baseFontSize */
+border-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+border-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+height: 0.385rem; /* 5px / baseFontSize */
+width: 0.769rem; /* 10px / baseFontSize */
 transform: rotate(-45deg);
-`;
-  const normalCheckmark = `
+
 @media (max-width: ${theme.breakpoints.small}) {
-  top: 6px;
-  left: 4px;
-  height: 8px;
-  width: 17px;
+  top: 0.25rem; /* 4px / 16 */
+  left: 0.1875rem; /* 3px / 16 */
+  height: 0.3125rem; /* 5px / 16 */
+  width: 0.625rem; /* 10px / 16 */
 }
-${desktopCheckmark}
+`;
+  const normalCheckmark = `
+
+  ${desktopCheckmark}
+  @media (max-width: ${theme.breakpoints.small}) {
+    top: 0.375rem; /* 6px / 16 */
+    left: 0.25rem; /* 4px / 16 */
+    height: 0.5rem; /* 8px / 16 */
+    width: 1.0625rem; /* 17px / 16 */
+  }
 `;
   const mobileCheckmark = `
-${desktopCheckmark}
-top: 6px;
-left: 4px;
-height: 8px;
-width: 17px;
+    ${commonStyles}
+    @media (max-width: ${theme.breakpoints.small}) {
+      top: 0.375rem; /* 6px / 16 */
+      left: 0.25rem; /* 4px / 16 */
+      height: 0.5rem; /* 8px / 16 */
+      width: 1.0625rem; /* 17px / 16 */
+    }
+    top: 0.4615rem; /* 6px / 13 */
+    left: 0.3077rem; /* 4px / 13 */
+    height: 0.6154rem; /* 8px / 13 */
+    width: 1.3077rem; /* 17px / 13 */
+    transform: rotate(-45deg);
 `;
   if (checked === "mixed") {
     return `&:before {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 7px;\n  left: 4px;\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: ${theme.space.xxs};\n  height: 2px;\n`;\n\n  const normalMixedCheckmark = `\n  @media (max-width: ${theme.breakpoints.small}) {\n    top:11px;\n    left:6px;\n    height:2px;\n    width:12px;\n  }\n  ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  top:11px;\n  left:6px;\n  height:2px;\n  width:12px;\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 4px;\nleft: 3px;\nborder-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 5px;\nwidth: 10px;\ntransform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 6px;\n  left: 4px;\n  height: 8px;\n  width: 17px;\n}\n${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n${desktopCheckmark}\ntop: 6px;\nleft: 4px;\nheight: 8px;\nwidth: 17px;\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,uBACR,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC;AAAA;AAEF,QAAM,uBAAuB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKF,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,2BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMtG,QAAM,kBAAkB;AAAA,qBACL,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrC;AAAA;AAEA,QAAM,kBAAkB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  checked: boolean | 'mixed',\n  isHovering: boolean,\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n): string => {\n  if (hasError) {\n    return colors.danger[900];\n  }\n  if (readOnly) {\n    return colors.neutral[500];\n  }\n  if (disabled) {\n    return colors.neutral[500];\n  }\n  if (isHovering) {\n    return colors.brand[600];\n  }\n  return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n  theme: Theme,\n  checked: boolean | 'mixed',\n  disabled?: boolean,\n  readOnly?: boolean,\n  hasError?: boolean,\n  isHovering = false,\n  device: string | undefined = undefined,\n): string => {\n  const commonStyles = `\n    position: absolute;\n    content: '';\n    border-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n    border-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  `;\n  const desktopMixedCheckmark = `\n  position: absolute;\n  content: '';\n  top: 0.538rem; /* 7px / baseFontSize */\n  left: 0.308rem; /* 4px / baseFontSize */\n  background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  width: 0.615rem; /* theme.space.xxs / baseFontSize */\n  height: 0.154rem; /* 2px / baseFontSize */\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.4375rem; /* 7px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.125rem;  /* 8px / 16 */\n    width: 0.5rem;/* 2px / 16 */\n  }\n`;\n\n  const normalMixedCheckmark = `\n  ${desktopMixedCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n`;\n  const mobileMixedCheckmark = `\n  ${commonStyles}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.6875rem; /* 11px / 16 */\n    left: 0.375rem; /* 6px / 16 */\n    height: 0.125rem; /* 2px / 16 */\n    width: 0.75rem; /* 12px / 16 */\n  }\n  top: 0.8461rem; /* 11px / 13 */\n  left: 0.4615rem; /* 6px / 13 */\n  height: 0.1538rem; /* 2px / 13 */\n  width: 0.9231rem; /* 12px / 13 */\n\n`;\n  const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n  top: 0.25rem; /* 4px / 16 */\n  left: 0.1875rem; /* 3px / 16 */\n  height: 0.3125rem; /* 5px / 16 */\n  width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n  const normalCheckmark = `\n\n  ${desktopCheckmark}\n  @media (max-width: ${theme.breakpoints.small}) {\n    top: 0.375rem; /* 6px / 16 */\n    left: 0.25rem; /* 4px / 16 */\n    height: 0.5rem; /* 8px / 16 */\n    width: 1.0625rem; /* 17px / 16 */\n  }\n`;\n  const mobileCheckmark = `\n    ${commonStyles}\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 0.375rem; /* 6px / 16 */\n      left: 0.25rem; /* 4px / 16 */\n      height: 0.5rem; /* 8px / 16 */\n      width: 1.0625rem; /* 17px / 16 */\n    }\n    top: 0.4615rem; /* 6px / 13 */\n    left: 0.3077rem; /* 4px / 13 */\n    height: 0.6154rem; /* 8px / 13 */\n    width: 1.3077rem; /* 17px / 13 */\n    transform: rotate(-45deg);\n`;\n\n  if (checked === 'mixed') {\n    return `&:before {\n  ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n  }\n  if (checked) {\n    return `&:before {\n    ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n  }\n  return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,eAAe;AAAA;AAAA;AAAA,kCAGW,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,oCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAE/G,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA,uBAGtE,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,QAAM,uBAAuB;AAAA,IAC3B;AAAA,uBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,QAAM,uBAAuB;AAAA,IAC3B;AAAA,uBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvC,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,gCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKxF,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrC,QAAM,kBAAkB;AAAA;AAAA,IAEtB;AAAA,uBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,QAAM,kBAAkB;AAAA,MACpB;AAAA,yBACmB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazC,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAE7F;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAErF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,QAAQ,KAAK;AAC7B;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import type React from 'react';
 import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import { DEVICE } from './constants/device.js';
 export declare namespace DSControlledCheckboxT {
     type DevicesKeys = keyof typeof DEVICE;
@@ -8,7 +9,7 @@ export declare namespace DSControlledCheckboxT {
     }
     interface DefaultProps {
         checked: boolean | 'mixed';
-        tabIndex: WCAGTabIndex;
+        tabIndex: TypescriptHelpersT.WCAGTabIndex;
         hasError: boolean;
         wrapLabel: boolean;
         disabled: boolean;
@@ -140,6 +141,8 @@ export declare const propTypes: {
     borderLeftWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     borderRadius: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     boxShadow: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    fontWeight: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    textAlign: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     'aria-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;

package/dist/types/styles.d.ts

@@ -6,4 +6,5 @@ export declare const StyledLabel: import("styled-components").StyledComponent<"l
 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 StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     device?: "mobile" | "desktop" | undefined;
+    wrapLabel?: boolean | undefined;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/package.json

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