@elliemae/ds-form-checkbox 3.10.0-next.9 → 3.10.2

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

@@ -30,25 +30,38 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_device = require("./constants/device");
 const defaultProps = {
   wrapLabel: false,
   hasError: false,
-  tabIndex: void 0,
   checked: false,
-  onKeyDown: () => null
+  disabled: false,
+  readOnly: false,
+  tabIndex: 0,
+  onChange: () => {
+  }
 };
 const propTypes = {
   ...import_ds_utilities.globalAttributesPropTypes,
+  ...import_ds_utilities.xstyledPropTypes,
+  checked: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.bool, import_ds_utilities.PropTypes.string]).description("Wheter the checkbox is set as bool or mixed").defaultValue(false).isRequired,
+  onChange: import_ds_utilities.PropTypes.func.description("function executed when the checkbox changes state").signature("(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )").isRequiredIf((props) => !props.disabled && !props.readOnly),
+  "aria-controls": import_ds_utilities.PropTypes.string.description('a11y required attribute when "mixed" state is to be supported').isRequiredIf(
+    (props) => props.checked === "mixed" && typeof props.ariaControls !== "string"
+  ),
+  ariaControls: import_ds_utilities.PropTypes.string.description('deprecated equivalent of "aria-controls", please use "aria-controls" instead').deprecated({ version: "3.x", message: 'use "aria-controls" instead' }).isRequiredIf(
+    (props) => props.checked === "mixed" && typeof props["aria-controls"] !== "string"
+  ),
   label: import_ds_utilities.PropTypes.string.description(
     "Checkbox Label property. This label is also going to be used as an aria-label for screen readers."
   ),
-  checked: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.bool, import_ds_utilities.PropTypes.string]).description(
-    "Wheter the checkbox is set as bool or mixed"
+  hasError: import_ds_utilities.PropTypes.bool.description("Whether the checkbox has error or not.").defaultValue(false),
+  disabled: import_ds_utilities.PropTypes.bool.description("Whether the checkbox is disabled or not.").defaultValue(false),
+  readOnly: import_ds_utilities.PropTypes.bool.description("Whether the checkbox is disabled or not.").defaultValue(false),
+  wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label").defaultValue(false),
+  device: import_ds_utilities.PropTypes.oneOf(Object.values(import_device.DEVICE)).description(
+    "When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration"
   ),
-  hasError: import_ds_utilities.PropTypes.bool.description("Whether the checkbox has error or not."),
-  innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.object]).description("Checkbox input ref."),
-  onChange: import_ds_utilities.PropTypes.func.description("function executed when the checkbox changes"),
-  wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label"),
-  device: import_ds_utilities.PropTypes.string.description("Whether to use mobile styling")
+  innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.object]).description("Checkbox input ref.")
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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 React from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledCheckboxT {\n  export interface DefaultProps {\n    checked: boolean | 'mixed';\n    tabIndex: number;\n    hasError: boolean;\n    wrapLabel: boolean;\n    disabled: boolean;\n  }\n\n  export interface OptionalProps {\n    innerRef?: React.RefObject<HTMLInputElement>;\n    'data-testid'?: string;\n    device?: 'mobile' | 'desktop';\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>,\n      LegacyAriaProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps>,\n      LegacyAriaProps {}\n\n  export interface StyledCheckBoxT {\n    checked: boolean | 'mixed';\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n    device?: 'mobile' | 'desktop';\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    readOnly?: boolean;\n    checked: boolean | 'mixed';\n    wrapLabel: boolean;\n    device?: 'mobile' | 'desktop';\n  }\n}\n\nexport const defaultProps: Partial<DSControlledCheckboxT.Props> = {\n  wrapLabel: false,\n  hasError: false,\n  tabIndex: undefined,\n  checked: false,\n  onKeyDown: () => null,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\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  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).description(\n    'Wheter the checkbox is set as bool or mixed',\n  ),\n  hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n  onChange: PropTypes.func.description('function executed when the checkbox changes'),\n  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n  device: PropTypes.string.description('Whether to use mobile styling'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAwE;AAkDjE,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW,MAAM;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,OAAO,8BAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,wCAAwC;AAAA,EAC7E,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AAAA,EACnG,UAAU,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EAClF,WAAW,8BAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,8BAAU,OAAO,YAAY,+BAA+B;AACtE;",
+  "sourcesContent": ["import React from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\nexport declare namespace DSControlledCheckboxT {\n  type DevicesKeys = keyof typeof DEVICE;\n  type Devices = typeof DEVICE[DevicesKeys];\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    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.RefObject<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};\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    .defaultValue(false).isRequired,\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 disabled 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;ADCvB,0BAA0F;AAC1F,oBAAuB;AA+DhB,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;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,KAAK,EAAE;AAAA,EACvB,UAAU,8BAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,8BAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,8BAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB;AAAA,EACzG;AAAA,EACF,OAAO,8BAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,8BAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,8BAAU,MAAM,OAAO,OAAO,oBAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
   "names": []
 }

package/dist/cjs/utils/styleHelpers.js

@@ -98,7 +98,6 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
   if (checked === "mixed") {
     return `&:before {
       ${device === void 0 ? normalMixedCheckmark : device === "mobile" ? mobileMixedCheckmark : desktopMixedCheckmark}
-
     }`;
   }
   if (checked) {

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 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 (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n  if (isHovering && checked !== false) {\n    return colors.brand[800];\n  }\n  return colors.brand[500];\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: 6px;\n  left: 3px;\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:10px;\n      left:5px;\n      height:2px;\n      width:12px;\n    }\n    ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n    ${desktopMixedCheckmark}\n    top:10px;\n    left:5px;\n    height:2px;\n    width:12px;\n  `;\n  const desktopCheckmark = `\n  position: absolute;\n  content: '';\n  top: 3px;\n  left: 2px;\n  border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  height: 5px;\n  width: 10px;\n  transform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 5px;\n      left: 3px;\n      height: 8px;\n      width: 17px;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    top: 5px;\n    left: 3px;\n    height: 8px;\n    width: 17px;\n  `;\n\n  if (checked === 'mixed') {\n    return `&:before {\n      ${\n        device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n      }\n\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;ADIhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;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,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKA,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,6BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMxG,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA;AAAA,EAIjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
+  "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 (disabled || readOnly) {\n    return colors.neutral[500];\n  }\n  if (isHovering && checked !== false) {\n    return colors.brand[800];\n  }\n  return colors.brand[500];\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: 6px;\n  left: 3px;\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:10px;\n      left:5px;\n      height:2px;\n      width:12px;\n    }\n    ${desktopMixedCheckmark}\n`;\n  const mobileMixedCheckmark = `\n    ${desktopMixedCheckmark}\n    top:10px;\n    left:5px;\n    height:2px;\n    width:12px;\n  `;\n  const desktopCheckmark = `\n  position: absolute;\n  content: '';\n  top: 3px;\n  left: 2px;\n  border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n  height: 5px;\n  width: 10px;\n  transform: rotate(-45deg);\n`;\n\n  const normalCheckmark = `\n    @media (max-width: ${theme.breakpoints.small}) {\n      top: 5px;\n      left: 3px;\n      height: 8px;\n      width: 17px;\n    }\n    ${desktopCheckmark}\n`;\n  const mobileCheckmark = `\n    ${desktopCheckmark}\n    top: 5px;\n    left: 3px;\n    height: 8px;\n    width: 17px;\n  `;\n\n  if (checked === 'mixed') {\n    return `&:before {\n      ${\n        device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n      }\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;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;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,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKA,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,6BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMxG,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
   "names": []
 }

package/dist/esm/ControlledCheckbox.js

@@ -1,119 +1,15 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import { uid } from "uid";
-import {
-  describe,
-  useGetGlobalAttributes,
-  useGetXstyledProps,
-  useMemoMergePropsWithDefault
-} from "@elliemae/ds-utilities";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from "./styles";
-import { propTypes, defaultProps } from "./react-desc-prop-types";
-import { useValidateProps } from "./config/useValidateProps";
+import { jsx } from "react/jsx-runtime";
+import { describe } from "@elliemae/ds-utilities";
+import { propTypes } from "./react-desc-prop-types";
+import { useCheckBox } from "./config/useCheckBox";
+import { ControlledCheckBoxContext } from "./ControlledCheckboxCTX";
+import { ControlledCheckBoxContent } from "./parts/ControlledCheckBoxContent";
 const DSControlledCheckbox = (props) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateProps(props, propTypes);
-  const {
-    checked,
-    device,
-    label,
-    hasError,
-    innerRef,
-    wrapLabel,
-    ariaLabel: legacyAriaLabel,
-    ariaControls: legacyAriaControls
-  } = propsWithDefault;
-  const handleMixedCheckboxOnKeyDown = useCallback((e) => {
-    if (e.code === "Space") {
-      const { currentTarget } = e;
-      currentTarget.click();
-      e.preventDefault();
-    }
-  }, []);
-  const {
-    id,
-    disabled,
-    readOnly,
-    label: globalLabel,
-    "aria-label": ariaLabel,
-    "aria-controls": ariaControls,
-    className,
-    onChange,
-    tabIndex,
-    onKeyDown: userOnKeyDown,
-    ...restGlobals
-  } = useGetGlobalAttributes(propsWithDefault, {
-    onKeyDown: handleMixedCheckboxOnKeyDown
-  });
-  const instanceUid = useMemo(() => id || uid(5), [id]);
-  const onChangeValue = useCallback(
-    (e) => {
-      if (checked === "mixed")
-        onChange(true, e);
-      if (checked === true)
-        onChange(false, e);
-      if (checked === false)
-        onChange(true, e);
-    },
-    [checked, onChange]
-  );
-  const xstyledProps = useGetXstyledProps(propsWithDefault);
-  const commonProps = {
-    "data-testid": "ds-checkbox",
-    ...restGlobals,
-    id: instanceUid,
-    "aria-label": ariaLabel || legacyAriaLabel || label,
-    "aria-checked": checked
-  };
-  return /* @__PURE__ */ jsxs(StyledContainer, {
-    device,
-    "data-testid": "ds-checkbox-container",
-    className,
-    ...xstyledProps,
-    children: [
-      /* @__PURE__ */ jsx(StyledCheckBox, {
-        device,
-        checked,
-        hasError,
-        disabled,
-        readOnly,
-        children: ariaControls || legacyAriaControls ? /* @__PURE__ */ jsx(StyledInputMixed, {
-          ...commonProps,
-          role: "checkbox",
-          "aria-controls": ariaControls || legacyAriaControls,
-          "aria-disabled": disabled,
-          onClick: !disabled && !readOnly ? onChangeValue : void 0,
-          onKeyDown: userOnKeyDown,
-          tabIndex: tabIndex ?? (disabled ? -1 : 0),
-          ref: innerRef
-        }) : /* @__PURE__ */ jsx(StyledInput, {
-          ...commonProps,
-          type: "checkbox",
-          checked,
-          onChange: onChangeValue,
-          disabled,
-          tabIndex,
-          ref: innerRef
-        })
-      }),
-      label && /* @__PURE__ */ jsx(StyledLabel, {
-        htmlFor: instanceUid,
-        disabled,
-        readOnly,
-        checked,
-        "data-testid": "ds-checkbox-label",
-        wrapLabel,
-        device,
-        ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChangeValue } : {},
-        children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, {
-          children: label
-        }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
-          value: label
-        })
-      })
-    ]
+  const ctx = useCheckBox(props);
+  return /* @__PURE__ */ jsx(ControlledCheckBoxContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(ControlledCheckBoxContent, {})
   });
 };
 DSControlledCheckbox.propTypes = propTypes;

package/dist/esm/ControlledCheckbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckbox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useCallback, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\n\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from './styles';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateProps(props, propTypes);\n\n  const {\n    checked,\n    device,\n    label,\n    hasError,\n    innerRef,\n    wrapLabel,\n    ariaLabel: legacyAriaLabel,\n    ariaControls: legacyAriaControls,\n  } = propsWithDefault;\n\n  const handleMixedCheckboxOnKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.code === 'Space') {\n      const { currentTarget }: { currentTarget: HTMLDivElement } = e;\n      currentTarget.click();\n      e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\n    }\n  }, []);\n\n  const {\n    id,\n    disabled,\n    readOnly,\n    label: globalLabel,\n    'aria-label': ariaLabel,\n    'aria-controls': ariaControls,\n    className,\n    onChange,\n    tabIndex,\n    onKeyDown: userOnKeyDown,\n    ...restGlobals\n  } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, {\n    onKeyDown: handleMixedCheckboxOnKeyDown,\n  });\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const onChangeValue = useCallback(\n    (e: Event) => {\n      if (checked === 'mixed') onChange(true, e);\n      if (checked === true) onChange(false, e);\n      if (checked === false) onChange(true, e);\n    },\n    [checked, onChange],\n  );\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const commonProps: Partial<DSControlledCheckboxT.Props> = {\n    'data-testid': 'ds-checkbox',\n    ...restGlobals,\n    id: instanceUid,\n    'aria-label': ariaLabel || legacyAriaLabel || label,\n    'aria-checked': checked,\n  };\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        {ariaControls || legacyAriaControls ? (\n          <StyledInputMixed\n            {...commonProps}\n            role=\"checkbox\"\n            aria-controls={ariaControls || legacyAriaControls}\n            aria-disabled={disabled}\n            onClick={!disabled && !readOnly ? onChangeValue : undefined}\n            onKeyDown={userOnKeyDown}\n            tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n            ref={innerRef}\n          />\n        ) : (\n          <StyledInput\n            {...commonProps}\n            type=\"checkbox\"\n            checked={checked as boolean | undefined}\n            onChange={onChangeValue}\n            disabled={disabled}\n            tabIndex={tabIndex}\n            ref={innerRef}\n          />\n        )}\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\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: onChangeValue } : {})}\n        >\n          {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,mBAAsC;AAC/D,SAAS,WAAW;AAEpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,aAAa,gBAAgB,wBAAwB;AAC7G,SAAgC,WAAW,oBAAoB;AAC/D,SAAS,wBAAwB;AAEjC,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,mBAAiB,OAAO,SAAS;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,EAChB,IAAI;AAEJ,QAAM,+BAA+B,YAAY,CAAC,MAA2C;AAC3F,QAAI,EAAE,SAAS,SAAS;AACtB,YAAM,EAAE,cAAc,IAAuC;AAC7D,oBAAc,MAAM;AACpB,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,OACR;AAAA,EACL,IAAI,uBAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAa;AACZ,UAAI,YAAY;AAAS,iBAAS,MAAM,CAAC;AACzC,UAAI,YAAY;AAAM,iBAAS,OAAO,CAAC;AACvC,UAAI,YAAY;AAAO,iBAAS,MAAM,CAAC;AAAA,IACzC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,IACf,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,qBAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,IAC7F;AAAA,0BAAC;AAAA,QAAe;AAAA,QAAgB;AAAA,QAAkB;AAAA,QAAoB;AAAA,QAAoB;AAAA,QACvF,0BAAgB,qBACf,oBAAC;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,iBAAe,gBAAgB;AAAA,UAC/B,iBAAe;AAAA,UACf,SAAS,CAAC,YAAY,CAAC,WAAW,gBAAgB;AAAA,UAClD,WAAW;AAAA,UACX,UAAU,aAAa,WAAW,KAAK;AAAA,UACvC,KAAK;AAAA,SACP,IAEA,oBAAC;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,KAAK;AAAA,SACP;AAAA,OAEJ;AAAA,MACC,SACC,oBAAC;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,cAAc,IAAI,CAAC;AAAA,QAEtF,sBAAY,oBAAC;AAAA,UAAiB;AAAA,SAAM,IAAqB,oBAAC;AAAA,UAA2B,OAAO;AAAA,SAAO;AAAA,OACtG;AAAA;AAAA,GAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSControlledCheckboxT, propTypes } from './react-desc-prop-types';\nimport { useCheckBox } from './config/useCheckBox';\nimport { ControlledCheckBoxContext } from './ControlledCheckboxCTX';\nimport { ControlledCheckBoxContent } from './parts/ControlledCheckBoxContent';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n  const ctx = useCheckBox(props);\n  return (\n    <ControlledCheckBoxContext.Provider value={ctx}>\n      <ControlledCheckBoxContent />\n    </ControlledCheckBoxContext.Provider>\n  );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,gBAAgB;AACzB,SAAgC,iBAAiB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAE1C,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,0BAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,IACzC,8BAAC,6BAA0B;AAAA,GAC7B;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
   "names": []
 }

package/dist/esm/ControlledCheckboxCTX.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultContext = {};
+const ControlledCheckBoxContext = createContext(defaultContext);
+var ControlledCheckboxCTX_default = ControlledCheckBoxContext;
+export {
+  ControlledCheckBoxContext,
+  ControlledCheckboxCTX_default as default
+};
+//# sourceMappingURL=ControlledCheckboxCTX.js.map

package/dist/esm/ControlledCheckboxCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckboxCTX.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { ControlledCheckboxCTX } from './config/useCheckBox';\n\nconst defaultContext = {} as ControlledCheckboxCTX;\n\n/** Context for cross component communication */\nexport const ControlledCheckBoxContext = createContext<ControlledCheckboxCTX>(defaultContext);\n\nexport default ControlledCheckBoxContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,4BAA4B,cAAqC,cAAc;AAE5F,IAAO,gCAAQ;",
+  "names": []
+}

package/dist/esm/config/useCheckBox.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import React2 from "react";
+import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
+import { uid } from "uid";
+import { propTypes, defaultProps } from "../react-desc-prop-types";
+import { useValidateProps } from "./useValidateProps";
+import { useEventHandlers } from "./useEventHandlers";
+const useCheckBox = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateProps(props, propTypes);
+  const globalProps = useGetGlobalAttributes(propsWithDefault);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const { id } = globalProps;
+  const instanceUid = React2.useMemo(() => id || uid(5), [id]);
+  const eventHandlers = useEventHandlers(propsWithDefault);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      globalProps,
+      xstyledProps,
+      instanceUid,
+      ...eventHandlers
+    }),
+    [eventHandlers, globalProps, instanceUid, propsWithDefault, xstyledProps]
+  );
+};
+export {
+  useCheckBox
+};
+//# sourceMappingURL=useCheckBox.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCheckBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useEventHandlers } from './useEventHandlers';\n\nexport interface ControlledCheckboxCTX extends ReturnType<typeof useEventHandlers> {\n  propsWithDefault: DSControlledCheckboxT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useCheckBox = (props: DSControlledCheckboxT.Props): ControlledCheckboxCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSControlledCheckboxT.InternalProps>(props, defaultProps);\n  useValidateProps(props, propTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSControlledCheckboxT.InternalProps>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { id } = globalProps;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const eventHandlers = useEventHandlers(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      ...eventHandlers,\n    }),\n    [eventHandlers, globalProps, instanceUid, propsWithDefault, xstyledProps],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAgC,WAAW,oBAAoB;AAC/D,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAS1B,MAAM,cAAc,CAAC,UAA8D;AAIxF,QAAM,mBAAmB,6BAAkE,OAAO,YAAY;AAC9G,mBAAiB,OAAO,SAAS;AAIjC,QAAM,cAAc,uBAA4D,gBAAgB;AAChG,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAK1D,QAAM,gBAAgB,iBAAiB,gBAAgB;AAEvD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,aAAa,aAAa,kBAAkB,YAAY;AAAA,EAC1E;AACF;",
+  "names": ["React"]
+}

package/dist/esm/config/useEventHandlers.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import React2 from "react";
+const useEventHandlers = (props) => {
+  const { checked, onChange, onKeyDown } = props;
+  const handleOnChange = React2.useCallback(
+    (e) => {
+      if (onChange) {
+        if (checked === "mixed")
+          onChange(true, e);
+        if (checked === true)
+          onChange(false, e);
+        if (checked === false)
+          onChange(true, e);
+      }
+    },
+    [checked, onChange]
+  );
+  const handleMixedCheckboxOnKeyDown = React2.useCallback(
+    (e) => {
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+      if (e.code === "Space" || e.code === "Enter") {
+        handleOnChange(e);
+        e.preventDefault();
+      }
+    },
+    [handleOnChange, onKeyDown]
+  );
+  return React2.useMemo(
+    () => ({
+      handleOnChange,
+      handleMixedCheckboxOnKeyDown
+    }),
+    [handleMixedCheckboxOnKeyDown, handleOnChange]
+  );
+};
+export {
+  useEventHandlers
+};
+//# sourceMappingURL=useEventHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useEventHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSControlledCheckboxT } from '../react-desc-prop-types';\n\nexport const useEventHandlers = (props: DSControlledCheckboxT.InternalProps) => {\n  const { checked, onChange, onKeyDown } = props;\n  const handleOnChange = React.useCallback(\n    (\n      e:\n        | React.ChangeEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLLabelElement>\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (onChange) {\n        if (checked === 'mixed') onChange(true, e);\n        if (checked === true) onChange(false, e);\n        if (checked === false) onChange(true, e);\n      }\n    },\n    [checked, onChange],\n  );\n  const handleMixedCheckboxOnKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) {\n        // if user provides 'onKeyDown' event, he is in charge of what happens\n        onKeyDown(e);\n      }\n      if (e.code === 'Space' || e.code === 'Enter') {\n        handleOnChange(e);\n        e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\n      }\n    },\n    [handleOnChange, onKeyDown],\n  );\n\n  return React.useMemo(\n    () => ({\n      handleOnChange,\n      handleMixedCheckboxOnKeyDown,\n    }),\n    [handleMixedCheckboxOnKeyDown, handleOnChange],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGX,MAAM,mBAAmB,CAAC,UAA+C;AAC9E,QAAM,EAAE,SAAS,UAAU,UAAU,IAAI;AACzC,QAAM,iBAAiBA,OAAM;AAAA,IAC3B,CACE,MAKG;AACH,UAAI,UAAU;AACZ,YAAI,YAAY;AAAS,mBAAS,MAAM,CAAC;AACzC,YAAI,YAAY;AAAM,mBAAS,OAAO,CAAC;AACvC,YAAI,YAAY;AAAO,mBAAS,MAAM,CAAC;AAAA,MACzC;AAAA,IACF;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AACA,QAAM,+BAA+BA,OAAM;AAAA,IACzC,CAAC,MAA2C;AAC1C,UAAI,WAAW;AAEb,kBAAU,CAAC;AAAA,MACb;AACA,UAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,SAAS;AAAA,EAC5B;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,8BAA8B,cAAc;AAAA,EAC/C;AACF;",
+  "names": ["React"]
+}

package/dist/esm/config/useValidateProps.js

@@ -1,22 +1,7 @@
 import * as React from "react";
 import { useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
-const throwError = (message) => {
-  throw new Error(
-    `DSControlledCheckbox:: ${message}
-  `
-  );
-};
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes);
-  if (typeof props.label === "undefined" && typeof props["aria-label"] === "undefined") {
-    throwError(`Please provide a label or "aria-label" property to use this component.`);
-  }
-  if (props.checked === "mixed" && typeof props["aria-controls"] === "undefined") {
-    throwError(
-      `Please provide an ariaControls property to use a checkbox mixed state. 
-      This property must be a string containing all the ids that this mixed checkbox is controlling.`
-    );
-  }
 };
 export {
   useValidateProps

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\nimport { DSControlledCheckboxT } from '../react-desc-prop-types';\n\nconst throwError = (message: string): void => {\n  throw new Error(\n    `DSControlledCheckbox:: ${message}\n  `,\n  );\n};\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  useValidateTypescriptPropTypes(props, propTypes);\n  if (typeof props.label === 'undefined' && typeof props['aria-label'] === 'undefined') {\n    throwError(`Please provide a label or \"aria-label\" property to use this component.`);\n  }\n  if (props.checked === 'mixed' && typeof props['aria-controls'] === 'undefined') {\n    throwError(\n      `Please provide an ariaControls property to use a checkbox mixed state. \n      This property must be a string containing all the ids that this mixed checkbox is controlling.`,\n    );\n  }\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAI/C,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI;AAAA,IACR,0BAA0B;AAAA;AAAA,EAE5B;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AACnH,iCAA+B,OAAO,SAAS;AAC/C,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,kBAAkB,aAAa;AACpF,eAAW,wEAAwE;AAAA,EACrF;AACA,MAAI,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB,aAAa;AAC9E;AAAA,MACE;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\nimport { DSControlledCheckboxT } from '../react-desc-prop-types';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAIxC,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,iCAA+B,OAAO,SAAS;AACjD;",
   "names": []
 }

package/dist/esm/constants/device.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+const DEVICE = {
+  MOBILE: "mobile",
+  DESKTOP: "desktop"
+};
+export {
+  DEVICE
+};
+//# sourceMappingURL=device.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/device.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DEVICE = {\n  MOBILE: 'mobile',\n  DESKTOP: 'desktop',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,EACR,SAAS;AACX;",
+  "names": []
+}

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

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

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

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

package/dist/esm/parts/ControlledCheckBoxContent.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from "../styles";
+import { MainInput } from "./MainInput";
+import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX";
+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
+        })
+      })
+    ]
+  });
+};
+export {
+  ControlledCheckBoxContent
+};
+//# sourceMappingURL=ControlledCheckBoxContent.js.map

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

@@ -0,0 +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';\nimport { MainInput } from './MainInput';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX';\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;ACAvB;AAAA,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;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,IAC7F;AAAA,0BAAC;AAAA,QAAe;AAAA,QAAgB;AAAA,QAAkB;AAAA,QAAoB;AAAA,QAAoB;AAAA,QACxF,8BAAC,aAAU;AAAA,OACb;AAAA,MACC,SACC,oBAAC;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;AAAA,UAAiB;AAAA,SAAM,IAAqB,oBAAC;AAAA,UAA2B,OAAO;AAAA,SAAO;AAAA,OACtG;AAAA;AAAA,GAEJ;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/MainInput.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { StyledInput, StyledInputMixed } from "../styles";
+import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX";
+const MainInput = () => {
+  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } = React2.useContext(ControlledCheckBoxContext);
+  const {
+    disabled,
+    readOnly,
+    tabIndex,
+    innerRef,
+    checked,
+    ariaControls: camelCaseAriaControls
+  } = propsWithDefault;
+  const { "aria-controls": ariaControls } = globalProps;
+  const canShowMixedState = ariaControls || camelCaseAriaControls;
+  const mainInputProps = {
+    id: instanceUid,
+    "data-testid": "ds-checkbox",
+    "aria-labelledby": `${instanceUid}_label ${instanceUid}_block_label`,
+    "aria-checked": checked,
+    ...globalProps
+  };
+  if (canShowMixedState)
+    return /* @__PURE__ */ jsx(StyledInputMixed, {
+      ...mainInputProps,
+      role: "checkbox",
+      "aria-controls": ariaControls || camelCaseAriaControls,
+      "aria-disabled": disabled,
+      onClick: !disabled && !readOnly ? handleOnChange : void 0,
+      onKeyDown: handleMixedCheckboxOnKeyDown,
+      tabIndex: tabIndex ?? (disabled ? -1 : 0),
+      ref: innerRef
+    });
+  return /* @__PURE__ */ jsx(StyledInput, {
+    ...mainInputProps,
+    type: "checkbox",
+    checked,
+    onChange: handleOnChange,
+    onKeyDown: handleMixedCheckboxOnKeyDown,
+    disabled,
+    tabIndex,
+    ref: innerRef
+  });
+};
+export {
+  MainInput
+};
+//# sourceMappingURL=MainInput.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainInput.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledInput, StyledInputMixed } from '../styles';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX';\n\nexport const MainInput = () => {\n  const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n    React.useContext(ControlledCheckBoxContext);\n  const {\n    disabled,\n    readOnly,\n    // label,\n    tabIndex,\n    innerRef,\n    checked,\n    ariaControls: camelCaseAriaControls,\n    // ariaLabel: camelCaseAriaLabel,\n    // externalLabel,\n  } = propsWithDefault;\n  const { 'aria-controls': ariaControls } = globalProps;\n\n  // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n  // so\n  //   if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n  //   if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n  // props slightly differ because of this\n  //   also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n  const canShowMixedState = ariaControls || camelCaseAriaControls;\n\n  const mainInputProps = {\n    id: instanceUid,\n    'data-testid': 'ds-checkbox',\n    'aria-labelledby': `${instanceUid}_label ${instanceUid}_block_label`,\n    'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n    ...globalProps, // any props provided by the user will over-ride ours\n  };\n\n  if (canShowMixedState)\n    return (\n      <StyledInputMixed\n        {...mainInputProps}\n        role=\"checkbox\"\n        aria-controls={ariaControls || camelCaseAriaControls}\n        aria-disabled={disabled}\n        onClick={!disabled && !readOnly ? handleOnChange : undefined}\n        onKeyDown={handleMixedCheckboxOnKeyDown}\n        tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n        ref={innerRef}\n      />\n    );\n  return (\n    <StyledInput\n      {...mainInputProps}\n      type=\"checkbox\"\n      checked={checked as boolean | undefined}\n      onChange={handleOnChange}\n      onKeyDown={handleMixedCheckboxOnKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      ref={innerRef}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,aAAa,wBAAwB;AAC9C,SAAS,iCAAiC;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/FA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAGhB,IAAI;AACJ,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAQ1C,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,mBAAmB,GAAG,qBAAqB;AAAA,IAC3C,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL;AAEA,MAAI;AACF,WACE,oBAAC;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,iBAAe,gBAAgB;AAAA,MAC/B,iBAAe;AAAA,MACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,MACnD,WAAW;AAAA,MACX,UAAU,aAAa,WAAW,KAAK;AAAA,MACvC,KAAK;AAAA,KACP;AAEJ,SACE,oBAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,KAAK;AAAA,GACP;AAEJ;",
+  "names": ["React"]
+}