@elliemae/ds-form-checkbox 3.12.0-rc.0 → 3.12.0-rc.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -37,10 +37,7 @@ var import_ControlledCheckboxCTX = require("./ControlledCheckboxCTX");
37
37
  var import_ControlledCheckBoxContent = require("./parts/ControlledCheckBoxContent");
38
38
  const DSControlledCheckbox = (props) => {
39
39
  const ctx = (0, import_useCheckBox.useCheckBox)(props);
40
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckboxCTX.ControlledCheckBoxContext.Provider, {
41
- value: ctx,
42
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckBoxContent.ControlledCheckBoxContent, {})
43
- });
40
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckboxCTX.ControlledCheckBoxContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckBoxContent.ControlledCheckBoxContent, {}) });
44
41
  };
45
42
  DSControlledCheckbox.propTypes = import_react_desc_prop_types.propTypes;
46
43
  DSControlledCheckbox.displayName = "DSControlledCheckbox";
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/ControlledCheckbox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { 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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAXN,0BAAyB;AAEzB,mCAA0B;AAC1B,yBAA4B;AAC5B,mCAA0C;AAC1C,uCAA0C;AAE1C,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,4CAAC,uDAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,IACzC,sDAAC,8DAA0B;AAAA,GAC7B;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,qCAAiC,8BAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAXN,0BAAyB;AAEzB,mCAA0B;AAC1B,yBAA4B;AAC5B,mCAA0C;AAC1C,uCAA0C;AAE1C,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,4CAAC,uDAA0B,UAA1B,EAAmC,OAAO,KACzC,sDAAC,8DAA0B,GAC7B;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,qCAAiC,8BAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
6
  "names": []
7
7
  }
@@ -29,7 +29,8 @@ __export(useValidateProps_exports, {
29
29
  module.exports = __toCommonJS(useValidateProps_exports);
30
30
  var React = __toESM(require("react"));
31
31
  var import_ds_utilities = require("@elliemae/ds-utilities");
32
+ var import_exported_related = require("../exported-related");
32
33
  const useValidateProps = (props, propTypes) => {
33
- (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, propTypes);
34
+ (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, propTypes, import_exported_related.DSCheckboxName);
34
35
  };
35
36
  //# sourceMappingURL=useValidateProps.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useValidateProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport type { 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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAIxC,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,0DAA+B,OAAO,SAAS;AACjD;",
4
+ "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSCheckboxName } from '../exported-related';\nimport type { WeakValidationMap } from 'react';\nimport type { 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, DSCheckboxName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAC/C,8BAA+B;AAIxB,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,0DAA+B,OAAO,WAAW,sCAAc;AACjE;",
6
6
  "names": []
7
7
  }
@@ -29,7 +29,7 @@ __export(theming_exports, {
29
29
  });
30
30
  module.exports = __toCommonJS(theming_exports);
31
31
  var React = __toESM(require("react"));
32
- const DSCheckboxName = "DS-Checkbox";
32
+ const DSCheckboxName = "DSCheckbox";
33
33
  const DSCheckboxSlots = {
34
34
  CONTAINER: "root",
35
35
  INPUT: "input",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export const DSCheckboxName = 'DS-Checkbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -38,21 +38,11 @@ const ControlledCheckBoxContent = () => {
38
38
  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = import_react.default.useContext(import_ControlledCheckboxCTX.ControlledCheckBoxContext);
39
39
  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;
40
40
  const { disabled, readOnly, "aria-controls": ariaControls, className } = globalProps;
41
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledContainer, {
42
- device,
43
- "data-testid": "ds-checkbox-container",
44
- className,
45
- ...xstyledProps,
46
- children: [
47
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCheckBox, {
48
- device,
49
- checked,
50
- hasError,
51
- disabled,
52
- readOnly,
53
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MainInput.MainInput, {})
54
- }),
55
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, {
41
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledContainer, { device, "data-testid": "ds-checkbox-container", className, ...xstyledProps, children: [
42
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCheckBox, { device, checked, hasError, disabled, readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MainInput.MainInput, {}) }),
43
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
44
+ import_styles.StyledLabel,
45
+ {
56
46
  id: `${instanceUid}_label`,
57
47
  htmlFor: instanceUid,
58
48
  disabled,
@@ -62,13 +52,9 @@ const ControlledCheckBoxContent = () => {
62
52
  wrapLabel,
63
53
  device,
64
54
  ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {},
65
- children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, {
66
- children: label
67
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
68
- value: label
69
- })
70
- })
71
- ]
72
- });
55
+ 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 })
56
+ }
57
+ )
58
+ ] });
73
59
  };
74
60
  //# sourceMappingURL=ControlledCheckBoxContent.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/ControlledCheckBoxContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBoxRing, 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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkB;AAClB,uCAA2C;AAC3C,oBAAkG;AAClG,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;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,IAC7F;AAAA,kDAAC;AAAA,QAAe;AAAA,QAAgB;AAAA,QAAkB;AAAA,QAAoB;AAAA,QAAoB;AAAA,QACxF,sDAAC,8BAAU;AAAA,OACb;AAAA,MACC,SACC,4CAAC;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;AAAA,UAAiB;AAAA,SAAM,IAAqB,4CAAC;AAAA,UAA2B,OAAO;AAAA,SAAO;AAAA,OACtG;AAAA;AAAA,GAEJ;AAEJ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkB;AAClB,uCAA2C;AAC3C,oBAAkG;AAClG,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;",
6
6
  "names": ["React"]
7
7
  }
@@ -52,29 +52,35 @@ const MainInput = () => {
52
52
  ...globalProps
53
53
  };
54
54
  if (canShowMixedState)
55
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInputMixed, {
55
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
56
+ import_styles.StyledInputMixed,
57
+ {
58
+ ...mainInputProps,
59
+ role: "checkbox",
60
+ "aria-controls": ariaControls || camelCaseAriaControls,
61
+ "aria-disabled": disabled,
62
+ onClick: !disabled && !readOnly ? handleOnChange : void 0,
63
+ onKeyDown: handleMixedCheckboxOnKeyDown,
64
+ tabIndex: disabled ? -1 : tabIndex,
65
+ ref: innerRef,
66
+ onMouseDown: (e) => {
67
+ if (disabled)
68
+ e.preventDefault();
69
+ }
70
+ }
71
+ );
72
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
73
+ import_styles.StyledInput,
74
+ {
56
75
  ...mainInputProps,
57
- role: "checkbox",
58
- "aria-controls": ariaControls || camelCaseAriaControls,
59
- "aria-disabled": disabled,
60
- onClick: !disabled && !readOnly ? handleOnChange : void 0,
76
+ type: "checkbox",
77
+ checked,
78
+ onChange: handleOnChange,
61
79
  onKeyDown: handleMixedCheckboxOnKeyDown,
62
- tabIndex: disabled ? -1 : tabIndex,
63
- ref: innerRef,
64
- onMouseDown: (e) => {
65
- if (disabled)
66
- e.preventDefault();
67
- }
68
- });
69
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInput, {
70
- ...mainInputProps,
71
- type: "checkbox",
72
- checked,
73
- onChange: handleOnChange,
74
- onKeyDown: handleMixedCheckboxOnKeyDown,
75
- disabled,
76
- tabIndex,
77
- ref: innerRef
78
- });
80
+ disabled,
81
+ tabIndex,
82
+ ref: innerRef
83
+ }
84
+ );
79
85
  };
80
86
  //# sourceMappingURL=MainInput.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/MainInput.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["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={disabled ? -1 : tabIndex}\n ref={innerRef}\n onMouseDown={(e: React.MouseEvent) => {\n if (disabled) e.preventDefault();\n }}\n />\n );\n return (\n <StyledInput\n {...mainInputProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={handleOnChange}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n disabled={disabled}\n tabIndex={tabIndex}\n ref={innerRef}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AAtCN,mBAAkB;AAClB,oBAA8C;AAC9C,mCAA0C;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/F,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,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,4CAAC;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,WAAW,KAAK;AAAA,MAC1B,KAAK;AAAA,MACL,aAAa,CAAC,MAAwB;AACpC,YAAI;AAAU,YAAE,eAAe;AAAA,MACjC;AAAA,KACF;AAEJ,SACE,4CAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,KAAK;AAAA,GACP;AAEJ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AAtCN,mBAAkB;AAClB,oBAA8C;AAC9C,mCAA0C;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/F,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,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;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B,KAAK;AAAA,QACL,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,KAAK;AAAA;AAAA,EACP;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -167,7 +167,7 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
167
167
  }`}
168
168
  `;
169
169
  const StyledWrapLabel = (0, import_ds_system.styled)("span")``;
170
- const StyledContainer = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper, {
170
+ const StyledContainer = (0, import_ds_system.styled)("div", {
171
171
  name: import_exported_related.DSCheckboxName,
172
172
  slot: import_exported_related.DSCheckboxSlots.CONTAINER
173
173
  })`
@@ -191,5 +191,6 @@ const StyledContainer = (0, import_ds_system.styled)(import_ds_system.XStyledWra
191
191
  display: inline-grid;
192
192
  grid-template-rows: min-content;
193
193
  align-items: flex-start;
194
+ ${import_ds_system.xStyledCommonProps}
194
195
  `;
195
196
  //# sourceMappingURL=styles.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, css, XStyledWrapper } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<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 &:hover {\n background: ${({ theme, checked, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\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[600]};\n }\n }\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\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, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 1.1;\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(XStyledWrapper, {\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`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<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 &:hover {\n background: ${({ theme, checked, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\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[600]};\n }\n }\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\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, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 1.1;\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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -7,10 +7,7 @@ import { ControlledCheckBoxContext } from "./ControlledCheckboxCTX";
7
7
  import { ControlledCheckBoxContent } from "./parts/ControlledCheckBoxContent";
8
8
  const DSControlledCheckbox = (props) => {
9
9
  const ctx = useCheckBox(props);
10
- return /* @__PURE__ */ jsx(ControlledCheckBoxContext.Provider, {
11
- value: ctx,
12
- children: /* @__PURE__ */ jsx(ControlledCheckBoxContent, {})
13
- });
10
+ return /* @__PURE__ */ jsx(ControlledCheckBoxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(ControlledCheckBoxContent, {}) });
14
11
  };
15
12
  DSControlledCheckbox.propTypes = propTypes;
16
13
  DSControlledCheckbox.displayName = "DSControlledCheckbox";
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckbox.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACcjB;AAXN,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,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;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACcjB;AAXN,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAE1C,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACzC,8BAAC,6BAA0B,GAC7B;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
3
+ import { DSCheckboxName } from "../exported-related";
3
4
  const useValidateProps = (props, propTypes) => {
4
- useValidateTypescriptPropTypes(props, propTypes);
5
+ useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);
5
6
  };
6
7
  export {
7
8
  useValidateProps
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport type { 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAIxC,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,iCAA+B,OAAO,SAAS;AACjD;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSCheckboxName } from '../exported-related';\nimport type { WeakValidationMap } from 'react';\nimport type { 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, DSCheckboxName);\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAC/C,SAAS,sBAAsB;AAIxB,MAAM,mBAAmB,CAAC,OAAoC,cAAgD;AAEnH,iCAA+B,OAAO,WAAW,cAAc;AACjE;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- const DSCheckboxName = "DS-Checkbox";
2
+ const DSCheckboxName = "DSCheckbox";
3
3
  const DSCheckboxSlots = {
4
4
  CONTAINER: "root",
5
5
  INPUT: "input",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
4
- "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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n} as const;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -9,21 +9,11 @@ const ControlledCheckBoxContent = () => {
9
9
  const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = React2.useContext(ControlledCheckBoxContext);
10
10
  const { checked, device, label, hasError, wrapLabel, ariaControls: legacyAriaControls } = propsWithDefault;
11
11
  const { disabled, readOnly, "aria-controls": ariaControls, className } = globalProps;
12
- return /* @__PURE__ */ jsxs(StyledContainer, {
13
- device,
14
- "data-testid": "ds-checkbox-container",
15
- className,
16
- ...xstyledProps,
17
- children: [
18
- /* @__PURE__ */ jsx(StyledCheckBox, {
19
- device,
20
- checked,
21
- hasError,
22
- disabled,
23
- readOnly,
24
- children: /* @__PURE__ */ jsx(MainInput, {})
25
- }),
26
- label && /* @__PURE__ */ jsx(StyledLabel, {
12
+ return /* @__PURE__ */ jsxs(StyledContainer, { device, "data-testid": "ds-checkbox-container", className, ...xstyledProps, children: [
13
+ /* @__PURE__ */ jsx(StyledCheckBox, { device, checked, hasError, disabled, readOnly, children: /* @__PURE__ */ jsx(MainInput, {}) }),
14
+ label && /* @__PURE__ */ jsx(
15
+ StyledLabel,
16
+ {
27
17
  id: `${instanceUid}_label`,
28
18
  htmlFor: instanceUid,
29
19
  disabled,
@@ -33,14 +23,10 @@ const ControlledCheckBoxContent = () => {
33
23
  wrapLabel,
34
24
  device,
35
25
  ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {},
36
- children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, {
37
- children: label
38
- }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
39
- value: label
40
- })
41
- })
42
- ]
43
- });
26
+ children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label })
27
+ }
28
+ )
29
+ ] });
44
30
  };
45
31
  export {
46
32
  ControlledCheckBoxContent
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledCheckBoxContent.tsx"],
4
4
  "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, StyledCheckBoxRing, 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACanB,SAEI,KAFJ;AAbJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAiC,sBAAsB;AAClG,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;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACanB,SAEI,KAFJ;AAbJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAiC,sBAAsB;AAClG,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;",
6
6
  "names": ["React"]
7
7
  }
@@ -23,30 +23,36 @@ const MainInput = () => {
23
23
  ...globalProps
24
24
  };
25
25
  if (canShowMixedState)
26
- return /* @__PURE__ */ jsx(StyledInputMixed, {
26
+ return /* @__PURE__ */ jsx(
27
+ StyledInputMixed,
28
+ {
29
+ ...mainInputProps,
30
+ role: "checkbox",
31
+ "aria-controls": ariaControls || camelCaseAriaControls,
32
+ "aria-disabled": disabled,
33
+ onClick: !disabled && !readOnly ? handleOnChange : void 0,
34
+ onKeyDown: handleMixedCheckboxOnKeyDown,
35
+ tabIndex: disabled ? -1 : tabIndex,
36
+ ref: innerRef,
37
+ onMouseDown: (e) => {
38
+ if (disabled)
39
+ e.preventDefault();
40
+ }
41
+ }
42
+ );
43
+ return /* @__PURE__ */ jsx(
44
+ StyledInput,
45
+ {
27
46
  ...mainInputProps,
28
- role: "checkbox",
29
- "aria-controls": ariaControls || camelCaseAriaControls,
30
- "aria-disabled": disabled,
31
- onClick: !disabled && !readOnly ? handleOnChange : void 0,
47
+ type: "checkbox",
48
+ checked,
49
+ onChange: handleOnChange,
32
50
  onKeyDown: handleMixedCheckboxOnKeyDown,
33
- tabIndex: disabled ? -1 : tabIndex,
34
- ref: innerRef,
35
- onMouseDown: (e) => {
36
- if (disabled)
37
- e.preventDefault();
38
- }
39
- });
40
- return /* @__PURE__ */ jsx(StyledInput, {
41
- ...mainInputProps,
42
- type: "checkbox",
43
- checked,
44
- onChange: handleOnChange,
45
- onKeyDown: handleMixedCheckboxOnKeyDown,
46
- disabled,
47
- tabIndex,
48
- ref: innerRef
49
- });
51
+ disabled,
52
+ tabIndex,
53
+ ref: innerRef
54
+ }
55
+ );
50
56
  };
51
57
  export {
52
58
  MainInput
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainInput.tsx"],
4
4
  "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={disabled ? -1 : tabIndex}\n ref={innerRef}\n onMouseDown={(e: React.MouseEvent) => {\n if (disabled) e.preventDefault();\n }}\n />\n );\n return (\n <StyledInput\n {...mainInputProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={handleOnChange}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n disabled={disabled}\n tabIndex={tabIndex}\n ref={innerRef}\n />\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,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,WAAW,KAAK;AAAA,MAC1B,KAAK;AAAA,MACL,aAAa,CAAC,MAAwB;AACpC,YAAI;AAAU,YAAE,eAAe;AAAA,MACjC;AAAA,KACF;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;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,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;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe;AAAA,QACf,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B,KAAK;AAAA,QACL,aAAa,CAAC,MAAwB;AACpC,cAAI;AAAU,cAAE,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,KAAK;AAAA;AAAA,EACP;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { styled, css, XStyledWrapper } from "@elliemae/ds-system";
2
+ import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
3
3
  import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers";
4
4
  import { DSCheckboxName, DSCheckboxSlots } from "./exported-related";
5
5
  const StyledCheckBox = styled("span")`
@@ -133,7 +133,7 @@ const StyledLabel = styled("label", {
133
133
  }`}
134
134
  `;
135
135
  const StyledWrapLabel = styled("span")``;
136
- const StyledContainer = styled(XStyledWrapper, {
136
+ const StyledContainer = styled("div", {
137
137
  name: DSCheckboxName,
138
138
  slot: DSCheckboxSlots.CONTAINER
139
139
  })`
@@ -157,6 +157,7 @@ const StyledContainer = styled(XStyledWrapper, {
157
157
  display: inline-grid;
158
158
  grid-template-rows: min-content;
159
159
  align-items: flex-start;
160
+ ${xStyledCommonProps}
160
161
  `;
161
162
  export {
162
163
  StyledCheckBox,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, XStyledWrapper } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<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 &:hover {\n background: ${({ theme, checked, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\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[600]};\n }\n }\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\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, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 1.1;\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(XStyledWrapper, {\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`;\n"],
5
- "mappings": "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",
4
+ "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';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<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 &:hover {\n background: ${({ theme, checked, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\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[600]};\n }\n }\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\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, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 1.1;\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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-checkbox",
3
- "version": "3.12.0-rc.0",
3
+ "version": "3.12.0-rc.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Checkbox",
6
6
  "files": [
@@ -35,10 +35,10 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-system": "3.12.0-rc.0",
39
- "@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.0",
40
- "@elliemae/ds-utilities": "3.12.0-rc.0",
41
- "uid": "~2.0.0"
38
+ "uid": "~2.0.0",
39
+ "@elliemae/ds-system": "3.12.0-rc.10",
40
+ "@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.10",
41
+ "@elliemae/ds-utilities": "3.12.0-rc.10"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@elliemae/pui-theme": "~2.6.0",
@@ -46,13 +46,13 @@
46
46
  "@testing-library/jest-dom": "~5.16.4",
47
47
  "@testing-library/react": "~12.1.3",
48
48
  "@testing-library/user-event": "~13.5.0",
49
- "styled-components": "~5.3.5"
49
+ "styled-components": "~5.3.6"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@elliemae/pui-theme": "~2.6.0",
53
53
  "react": "^17.0.2",
54
54
  "react-dom": "^17.0.2",
55
- "styled-components": "^5.3.5",
55
+ "styled-components": "~5.3.6",
56
56
  "styled-system": "^5.1.5"
57
57
  },
58
58
  "publishConfig": {