@elliemae/ds-controlled-form 2.2.0 → 2.3.0-alpha.3

package/esm/controlled-checkbox/ControlledCheckbox.js

@@ -1,14 +1,12 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useRef, useCallback } from 'react';
-import { describe } from 'react-desc';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { propTypes } from './propTypes.js';
-import { StyledContainer, StyledCheckBox, StyledInput, StyledLabel } from './styles.js';
-import { useValidateProps } from './config/useValidateProps.js';
-import { setMultipleRefs } from './utils/setMultipleRefs.js';
-import { jsx } from 'react/jsx-runtime';
-
-const DSControlledCheckbox = props => {
+import * as React from "react";
+import React2, { useRef, useCallback } from "react";
+import { describe } from "react-desc";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { propTypes } from "./propTypes";
+import { StyledContainer, StyledInput, StyledLabel, StyledCheckBox } from "./styles";
+import { useValidateProps } from "./config/useValidateProps";
+import { setMultipleRefs } from "./utils/setMultipleRefs";
+const DSControlledCheckbox = (props) => {
   useValidateProps(props, propTypes);
   const checkboxRef = useRef();
   const {
@@ -29,51 +27,54 @@ const DSControlledCheckbox = props => {
     innerRef,
     tabIndex
   } = props;
-  const handleOnKeyDown = useCallback(e => {
-    if (checkboxRef.current && e.key === 'Enter') {
+  const handleOnKeyDown = useCallback((e) => {
+    if (checkboxRef.current && e.key === "Enter") {
       checkboxRef.current.click();
     }
   }, []);
-  return /*#__PURE__*/_jsx(StyledContainer, {
+  return /* @__PURE__ */ React2.createElement(StyledContainer, {
     "data-testid": "ds-checkbox-container"
-  }, void 0, /*#__PURE__*/_jsx(StyledCheckBox, {
+  }, /* @__PURE__ */ React2.createElement(StyledCheckBox, {
     checked: props.checked,
-    hasError: hasError,
-    disabled: disabled,
-    readOnly: readOnly
-  }, void 0, /*#__PURE__*/jsx(StyledInput, {
-    disabled: disabled,
-    ref: ref => setMultipleRefs([checkboxRef, innerRef])(ref),
+    hasError,
+    disabled,
+    readOnly
+  }, /* @__PURE__ */ React2.createElement(StyledInput, {
+    disabled,
+    ref: (ref) => setMultipleRefs([checkboxRef, innerRef])(ref),
     onKeyDown: handleOnKeyDown,
     type: "checkbox",
-    checked: checked !== 'mixed' ? checked : undefined,
+    checked: checked !== "mixed" ? checked : void 0,
     "aria-controls": ariaControls,
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-invalid": hasError,
     "aria-readonly": readOnly,
     "aria-label": ariaLabel || label,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    name: name,
-    value: value,
-    onChange: onChange,
-    id: id,
+    onFocus,
+    onBlur,
+    name,
+    value,
+    onChange,
+    id,
     "data-testid": "ds-checkbox",
-    autoFocus: autoFocus,
+    autoFocus,
     tabIndex: tabIndex || 0
-  })), label && /*#__PURE__*/_jsx(StyledLabel, {
+  })), label && /* @__PURE__ */ React2.createElement(StyledLabel, {
     htmlFor: id,
-    disabled: disabled,
-    readOnly: readOnly,
-    checked: checked,
+    disabled,
+    readOnly,
+    checked,
     "data-testid": "ds-checkbox-label"
-  }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+  }, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
     value: label
   })));
 };
-
+DSControlledCheckbox.propTypes = propTypes;
 const DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);
 DSControlledCheckboxWithSchema.propTypes = propTypes;
-
-export { DSControlledCheckbox, DSControlledCheckboxWithSchema };
+export {
+  DSControlledCheckbox,
+  DSControlledCheckboxWithSchema
+};
+//# sourceMappingURL=ControlledCheckbox.js.map

package/esm/controlled-checkbox/ControlledCheckbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/controlled-checkbox/ControlledCheckbox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback } from 'react';\nimport { describe } from 'react-desc';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { propTypes } from './propTypes';\nimport { StyledContainer, StyledInput, StyledLabel, StyledCheckBox } from './styles';\nimport type { DSControlledCheckboxPropsT } from './index.d';\nimport { useValidateProps } from './config/useValidateProps';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\n\nconst DSControlledCheckbox = (props: DSControlledCheckboxPropsT): JSX.Element => {\n  useValidateProps(props, propTypes);\n  const checkboxRef = useRef<HTMLInputElement>();\n\n  const {\n    autoFocus,\n    checked,\n    ariaControls,\n    ariaLabel,\n    disabled,\n    id,\n    label,\n    hasError,\n    onChange,\n    onFocus,\n    onBlur,\n    value,\n    readOnly,\n    name,\n    innerRef,\n    tabIndex,\n  } = props;\n\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (checkboxRef.current && e.key === 'Enter') {\n      checkboxRef.current.click();\n    }\n  }, []);\n\n  return (\n    <StyledContainer data-testid=\"ds-checkbox-container\">\n      <StyledCheckBox checked={props.checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n        <StyledInput\n          disabled={disabled}\n          ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n          onKeyDown={handleOnKeyDown}\n          type=\"checkbox\"\n          checked={checked !== 'mixed' ? checked : undefined}\n          aria-controls={ariaControls}\n          aria-checked={checked}\n          aria-disabled={disabled}\n          aria-invalid={hasError}\n          aria-readonly={readOnly}\n          aria-label={ariaLabel || label}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          name={name}\n          value={value}\n          onChange={onChange}\n          id={id}\n          data-testid=\"ds-checkbox\"\n          autoFocus={autoFocus}\n          tabIndex={tabIndex || 0}\n        />\n      </StyledCheckBox>\n      {label && (\n        <StyledLabel\n          htmlFor={id}\n          disabled={disabled}\n          readOnly={readOnly}\n          checked={checked}\n          data-testid=\"ds-checkbox-label\"\n        >\n          <SimpleTruncatedTooltipText value={label} />\n        </StyledLabel>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSControlledCheckbox.propTypes = propTypes;\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,uBAAuB,CAAC,UAAmD;AAC/E,mBAAiB,OAAO;AACxB,QAAM,cAAc;AAEpB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,YAAY,WAAW,EAAE,QAAQ,SAAS;AAC5C,kBAAY,QAAQ;AAAA;AAAA,KAErB;AAEH,SACE,qCAAC,iBAAD;AAAA,IAAiB,eAAY;AAAA,KAC3B,qCAAC,gBAAD;AAAA,IAAgB,SAAS,MAAM;AAAA,IAAS;AAAA,IAAoB;AAAA,IAAoB;AAAA,KAC9E,qCAAC,aAAD;AAAA,IACE;AAAA,IACA,KAAK,CAAC,QAAQ,gBAAkC,CAAC,aAAa,WAAW;AAAA,IACzE,WAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS,YAAY,UAAU,UAAU;AAAA,IACzC,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,cAAY,aAAa;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,IACA,UAAU,YAAY;AAAA,OAGzB,SACC,qCAAC,aAAD;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,KAEZ,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA;AAAA;AAO7C,qBAAqB,YAAY;AACjC,MAAM,iCAAiC,SAAS;AAChD,+BAA+B,YAAY;",
+  "names": []
+}

package/esm/controlled-checkbox/config/useValidateProps.js

@@ -1,19 +1,20 @@
-import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-
-const throwError = message => {
-  throw new Error("DSControlledCheckbox:: ".concat(message, "\n  "));
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+const throwError = (message) => {
+  throw new Error(`DSControlledCheckbox:: ${message}
+  `);
 };
-
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes);
-
-  if (typeof props.label === 'undefined' && typeof props.ariaLabel === 'undefined') {
-    throwError("Please provide a label or ariaLabel property to use this component.");
+  if (typeof props.label === "undefined" && typeof props.ariaLabel === "undefined") {
+    throwError(`Please provide a label or ariaLabel property to use this component.`);
   }
-
-  if (props.checked === 'mixed' && typeof props.ariaControls === 'undefined') {
-    throwError("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.");
+  if (props.checked === "mixed" && typeof props.ariaControls === "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 };
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/esm/controlled-checkbox/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/controlled-checkbox/config/useValidateProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSControlledCheckboxPropsT } from '../index.d';\n\nconst throwError = (message: string): void => {\n  throw new Error(\n    `DSControlledCheckbox:: ${message}\n  `,\n  );\n};\n\nexport const useValidateProps = (props: DSControlledCheckboxPropsT, propTypes: unknown): void => {\n  useValidateTypescriptPropTypes(props, propTypes);\n  if (typeof props.label === 'undefined' && typeof props.ariaLabel === 'undefined') {\n    throwError(`Please provide a label or ariaLabel property to use this component.`);\n  }\n  if (props.checked === 'mixed' && typeof props.ariaControls === '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;ACAA;AAGA,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,0BAA0B;AAAA;AAAA;AAKvB,MAAM,mBAAmB,CAAC,OAAmC,cAA6B;AAC/F,iCAA+B,OAAO;AACtC,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,cAAc,aAAa;AAChF,eAAW;AAAA;AAEb,MAAI,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB,aAAa;AAC1E,eACE;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/controlled-checkbox/index.d.js

@@ -1 +1,2 @@
-
+import * as React from "react";
+//# sourceMappingURL=index.d.js.map

package/esm/controlled-checkbox/index.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/esm/controlled-checkbox/index.js

@@ -1 +1,3 @@
-export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';
+import * as React from "react";
+export * from "./ControlledCheckbox";
+//# sourceMappingURL=index.js.map

package/esm/controlled-checkbox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/controlled-checkbox/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ControlledCheckbox';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/esm/controlled-checkbox/propTypes.js

@@ -1,18 +1,20 @@
-import { PropTypes } from 'react-desc';
-
+import * as React from "react";
+import { PropTypes } from "react-desc";
 const propTypes = {
-  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['mixed'])]).isRequired.description('Whether the checkbox is invalid or not.'),
-  value: PropTypes.string.description('Checkbox value property.'),
-  name: PropTypes.string.isRequired.description('Checkbox name property.'),
-  label: PropTypes.string.description('Checkbox Label property. This label is also going to be used as an aria-label for screen readers.'),
-  id: PropTypes.string.isRequired.description('Checkbox unique id property, this property is required for accesibility purposes.'),
-  readOnly: PropTypes.bool.description('Checkbox readOnly property.'),
-  hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),
-  disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.'),
-  ariaControls: PropTypes.string.description('This string is required when you use a mixed checkbox. It contains all the ids that this checkbox is controlling.'),
-  ariaLabel: PropTypes.string.description('Checkbox aria-label property. This property is going to be required if there is no label property added.'),
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),
-  autoFocus: PropTypes.bool.description('Whether you want the checkbox to be autofocused on render')
+  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(["mixed"])]).isRequired.description("Whether the checkbox is invalid or not."),
+  value: PropTypes.string.description("Checkbox value property."),
+  name: PropTypes.string.isRequired.description("Checkbox name property."),
+  label: PropTypes.string.description("Checkbox Label property. This label is also going to be used as an aria-label for screen readers."),
+  id: PropTypes.string.isRequired.description("Checkbox unique id property, this property is required for accesibility purposes."),
+  readOnly: PropTypes.bool.description("Checkbox readOnly property."),
+  hasError: PropTypes.bool.description("Whether the checkbox has error or not."),
+  disabled: PropTypes.bool.description("Whether the checkbox is disabled or not."),
+  ariaControls: PropTypes.string.description("This string is required when you use a mixed checkbox. It contains all the ids that this checkbox is controlling."),
+  ariaLabel: PropTypes.string.description("Checkbox aria-label property. This property is going to be required if there is no label property added."),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Checkbox input ref."),
+  autoFocus: PropTypes.bool.description("Whether you want the checkbox to be autofocused on render")
 };
-
-export { propTypes };
+export {
+  propTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/esm/controlled-checkbox/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/controlled-checkbox/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['mixed'])]).isRequired.description(\n    'Whether the checkbox is invalid or not.',\n  ),\n  value: PropTypes.string.description('Checkbox value property.'),\n  name: PropTypes.string.isRequired.description('Checkbox name property.'),\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  id: PropTypes.string.isRequired.description(\n    'Checkbox unique id property, this property is required for accesibility purposes.',\n  ),\n  readOnly: PropTypes.bool.description('Checkbox readOnly property.'),\n  hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),\n  disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.'),\n  ariaControls: PropTypes.string.description(\n    'This string is required when you use a mixed checkbox. It contains all the ids that this checkbox is controlling.',\n  ),\n  ariaLabel: PropTypes.string.description(\n    'Checkbox aria-label property. This property is going to be required if there is no label property added.',\n  ),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n  autoFocus: PropTypes.bool.description('Whether you want the checkbox to be autofocused on render'),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,YAAY,WAAW,YACpF;AAAA,EAEF,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,MAAM,UAAU,OAAO,WAAW,YAAY;AAAA,EAC9C,OAAO,UAAU,OAAO,YACtB;AAAA,EAEF,IAAI,UAAU,OAAO,WAAW,YAC9B;AAAA,EAEF,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,cAAc,UAAU,OAAO,YAC7B;AAAA,EAEF,WAAW,UAAU,OAAO,YAC1B;AAAA,EAEF,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,SAAS,YAAY;AAAA,EAC9E,WAAW,UAAU,KAAK,YAAY;AAAA;",
+  "names": []
+}

package/esm/controlled-checkbox/styles.js

@@ -1,97 +1,59 @@
-import styled from 'styled-components';
-import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';
+import * as React from "react";
+import styled from "styled-components";
+import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers";
+const StyledContainer = styled.div`
+  display: inline-grid;
+  grid-template-rows: min-content;
+  grid-template-columns: ${({ theme }) => theme.space.xs} auto;
+  align-items: center;
+`;
+const StyledCheckBox = styled.span`
+  width: ${({ theme }) => theme.space.xs};
+  height: ${({ theme }) => theme.space.xs};
+  border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+  border-radius: 2px;
+  position: relative;
+  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
+  ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}
+  &:focus-within {
+    ${({ theme, hasError, disabled }) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[600]} ` : void 0};
+    &:hover {
+      ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}
+    }
+  }
+  &:hover {
+    background: ${({ theme, checked, disabled }) => !disabled && (checked === "mixed" || checked) ? theme.colors.brand[200] : void 0};
+    ${({ theme, hasError, disabled, readOnly }) => !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : void 0};
+  }
+`;
+const StyledInput = styled.input`
+  &:hover {
+    cursor: pointer;
+  }
 
-const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-349ih4-0"
-})(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space.xs;
-});
-const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-349ih4-1"
-})(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space.xs;
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space.xs;
-}, _ref4 => {
-  let {
-    theme,
-    hasError
-  } = _ref4;
-  return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
-}, _ref5 => {
-  let {
-    theme,
-    disabled
-  } = _ref5;
-  return handleBackgroundColor(theme, disabled);
-}, _ref6 => {
-  let {
-    theme,
-    checked,
-    disabled,
-    readOnly,
-    hasError
-  } = _ref6;
-  return handleCheckmark(theme, checked, disabled, readOnly, hasError);
-}, _ref7 => {
-  let {
-    theme,
-    hasError,
-    disabled
-  } = _ref7;
-  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined;
-}, _ref8 => {
-  let {
-    theme,
-    checked,
-    disabled,
-    readOnly,
-    hasError
-  } = _ref8;
-  return handleCheckmark(theme, checked, disabled, readOnly, hasError, true);
-}, _ref9 => {
-  let {
-    theme,
-    checked,
-    disabled
-  } = _ref9;
-  return !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined;
-}, _ref10 => {
-  let {
-    theme,
-    hasError,
-    disabled,
-    readOnly
-  } = _ref10;
-  return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
-});
-const StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-349ih4-2"
-})(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
-const StyledLabel = /*#__PURE__*/styled.label.withConfig({
-  componentId: "sc-349ih4-3"
-})(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.space.xxs;
-}, _ref12 => {
-  let {
-    theme,
-    disabled,
-    readOnly,
-    checked
-  } = _ref12;
-  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
-});
-
-export { StyledCheckBox, StyledContainer, StyledInput, StyledLabel };
+  &:disabled {
+    cursor: not-allowed;
+  }
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+`;
+const StyledLabel = styled.label`
+  &:hover {
+    cursor: pointer;
+  }
+  padding-left: ${({ theme }) => theme.space.xxs};
+  color: ${({ theme, disabled, readOnly, checked }) => disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
+  font-size: 13px;
+  line-height: 13px;
+  display: inherit;
+`;
+export {
+  StyledCheckBox,
+  StyledContainer,
+  StyledInput,
+  StyledLabel
+};
+//# sourceMappingURL=styles.js.map

package/esm/controlled-checkbox/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/controlled-checkbox/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { StyledCheckBoxT, StyledLabelT } from './index.d';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\n\nexport const StyledContainer = styled.div`\n  display: inline-grid;\n  grid-template-rows: min-content;\n  grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n  align-items: center;\n`;\n\nexport const StyledCheckBox = styled.span<StyledCheckBoxT>`\n  width: ${({ theme }) => theme.space.xs};\n  height: ${({ theme }) => theme.space.xs};\n  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  border-radius: 2px;\n  position: relative;\n  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n  ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\n  &:focus-within {\n    ${({ theme, hasError, disabled }) =>\n      !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[600]} ` : undefined};\n    &:hover {\n      ${({ theme, checked, disabled, readOnly, hasError }) =>\n        handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\n    }\n  }\n  &:hover {\n    background: ${({ theme, checked, disabled }) =>\n      !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined};\n    ${({ theme, hasError, disabled, readOnly }) =>\n      !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined};\n  }\n`;\n\nexport const StyledInput = styled.input`\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n`;\n\nexport const StyledLabel = styled.label<StyledLabelT>`\n  &:hover {\n    cursor: pointer;\n  }\n  padding-left: ${({ theme }) => theme.space.xxs};\n  color: ${({ theme, disabled, readOnly, checked }) =>\n    (disabled && checked !== true) || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n  font-size: 13px;\n  line-height: 13px;\n  display: inherit;\n`;\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAEO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,2BAGX,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAI/C,MAAM,iBAAiB,OAAO;AAAA,WAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,sBACjB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,sBAAsB,OAAO;AAAA,IAClE,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,gBAAgB,OAAO,SAAS,UAAU,UAAU;AAAA;AAAA,MAExG,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,YAAY,CAAC,WAAW,qBAAqB,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA,QAEzE,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,kBAIpD,CAAC,EAAE,OAAO,SAAS,eAC/B,CAAC,YAAa,aAAY,WAAW,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC1E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAIxF,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIhB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAClC,CAAC,EAAE,OAAO,UAAU,UAAU,cACpC,YAAY,YAAY,QAAS,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/controlled-checkbox/utils/setMultipleRefs.js

@@ -1,11 +1,8 @@
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-
+import * as React from "react";
 function setMultipleRefs(refs) {
-  return value => {
-    refs.forEach(ref => {
-      if (typeof ref === 'function') {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
         ref(value);
       } else if (ref != null) {
         ref.current = value;
@@ -13,5 +10,7 @@ function setMultipleRefs(refs) {
     });
   };
 }
-
-export { setMultipleRefs };
+export {
+  setMultipleRefs
+};
+//# sourceMappingURL=setMultipleRefs.js.map

package/esm/controlled-checkbox/utils/setMultipleRefs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/controlled-checkbox/utils/setMultipleRefs.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export function setMultipleRefs<T = unknown>(\n  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,\n): React.RefCallback<T> {\n  return (value) => {\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n}\n"],
+  "mappings": "AAAA;ACAO,yBACL,MACsB;AACtB,SAAO,CAAC,UAAU;AAChB,SAAK,QAAQ,CAAC,QAAQ;AACpB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI;AAAA,iBACK,OAAO,MAAM;AACtB,QAAC,IAAyC,UAAU;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/controlled-checkbox/utils/styleHelpers.js

@@ -1,46 +1,52 @@
-/* eslint-disable max-params */
-const handleCheckMarkColor = (_ref, disabled, readOnly, hasError, checked, isHovering) => {
-  let {
-    colors
-  } = _ref;
-
+import * as React from "react";
+const handleCheckMarkColor = ({ colors }, disabled, readOnly, hasError, checked, isHovering) => {
   if (hasError) {
     return colors.danger[900];
   }
-
   if (disabled || readOnly) {
     return colors.neutral[500];
   }
-
   if (isHovering && checked !== false) {
     return colors.brand[800];
   }
-
   return colors.brand[500];
 };
-const handleCheckmark = function (theme, checked, disabled, readOnly, hasError) {
-  let isHovering = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-
-  if (checked === 'mixed') {
-    return "&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n    width: ").concat(theme.space.xxs, ";\n    height: 2px;\n    }");
+const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
+  if (checked === "mixed") {
+    return `&:before {
+      position: absolute;
+    content: '';
+    top: 6px;
+    left: 3px;
+    background: ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
+    width: ${theme.space.xxs};
+    height: 2px;
+    }`;
   }
-
   if (checked) {
-    return "&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }");
+    return `&:before {
+      position: absolute;
+      content: '';
+          top: 3px;
+          left: 2px;
+          border-left: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
+          border-bottom: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
+          height: 5px;
+          width: 10px;
+          transform: rotate(-45deg);
+    }`;
   }
-
-  return undefined;
+  return void 0;
 };
-const handleBackgroundColor = (_ref2, disabled) => {
-  let {
-    colors
-  } = _ref2;
-
+const handleBackgroundColor = ({ colors }, disabled) => {
   if (disabled) {
-    return colors.neutral['080'];
+    return colors.neutral["080"];
   }
-
-  return colors.neutral['000'];
+  return colors.neutral["000"];
 };
-
-export { handleBackgroundColor, handleCheckMarkColor, handleCheckmark };
+export {
+  handleBackgroundColor,
+  handleCheckMarkColor,
+  handleCheckmark
+};
+//# sourceMappingURL=styleHelpers.js.map

package/esm/controlled-checkbox/utils/styleHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/controlled-checkbox/utils/styleHelpers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n  { colors }: Theme,\n  disabled: boolean,\n  readOnly: boolean,\n  hasError: boolean,\n  checked: boolean | 'mixed',\n  isHovering: 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): string => {\n  if (checked === 'mixed') {\n    return `&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};\n    width: ${theme.space.xxs};\n    height: 2px;\n    }`;\n  }\n  if (checked) {\n    return `&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};\n          border-bottom: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }`;\n  }\n  return undefined;\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled: boolean): string => {\n  if (disabled) {\n    return colors.neutral['080'];\n  }\n\n  return colors.neutral['000'];\n};\n"],
+  "mappings": "AAAA;ACGO,MAAM,uBAAuB,CAClC,EAAE,UACF,UACA,UACA,UACA,SACA,eACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA;AAEvB,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA;AAExB,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA;AAEtB,SAAO,OAAO,MAAM;AAAA;AAGf,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,UACF;AACX,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,qBAAqB,OAAO,UAAU,UAAU,UAAU,SAAS;AAAA,aACxE,MAAM,MAAM;AAAA;AAAA;AAAA;AAIvB,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKwB,qBAAqB,OAAO,UAAU,UAAU,UAAU,SAAS;AAAA,qCACjE,qBAAqB,OAAO,UAAU,UAAU,UAAU,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtG,SAAO;AAAA;AAGF,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA8B;AACrF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA;AAGxB,SAAO,OAAO,QAAQ;AAAA;",
+  "names": []
+}

package/esm/controlled-combobox/ComboBox.js

@@ -1,24 +1,25 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-import { useComboBox } from './config/useComboBox.js';
-import { Container } from './parts/container/Container.js';
-import { propTypes } from './propTypes.js';
-import { defaultProps, ComboBoxContext } from './ComboBoxCTX.js';
-
-var _Container;
-
-const DSComboBox = props => {
+import * as React from "react";
+import React2 from "react";
+import { describe } from "react-desc";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useComboBox } from "./config/useComboBox";
+import { Container } from "./parts/container";
+import { propTypes } from "./propTypes";
+import { ComboBoxContext, defaultProps } from "./ComboBoxCTX";
+const DSComboBox = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const ctx = useComboBox(props);
-  return /*#__PURE__*/_jsx(ComboBoxContext.Provider, {
+  return /* @__PURE__ */ React2.createElement(ComboBoxContext.Provider, {
     value: ctx
-  }, void 0, _Container || (_Container = /*#__PURE__*/_jsx(Container, {})));
+  }, /* @__PURE__ */ React2.createElement(Container, null));
 };
-
+DSComboBox.propTypes = propTypes;
 const DSComboBoxWithSchema = describe(DSComboBox);
 DSComboBoxWithSchema.propTypes = propTypes;
-
-export { DSComboBox, DSComboBoxWithSchema };
+export {
+  DSComboBox,
+  DSComboBox as DSComboBoxV3,
+  DSComboBoxWithSchema
+};
+//# sourceMappingURL=ComboBox.js.map

package/esm/controlled-combobox/ComboBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/controlled-combobox/ComboBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { propTypes } from './propTypes';\nimport { ComboBoxContext, defaultProps } from './ComboBoxCTX';\nimport type { ComboBoxPropsT } from './index.d';\n\nconst DSComboBox = (props: ComboBoxPropsT): JSX.Element => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n  const ctx = useComboBox(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n    </ComboBoxContext.Provider>\n  );\n};\nDSComboBox.propTypes = propTypes;\nconst DSComboBoxWithSchema = describe(DSComboBox);\nDSComboBoxWithSchema.propTypes = propTypes;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,aAAa,CAAC,UAAuC;AACzD,QAAM,mBAAmB,6BAA6B,OAAO;AAE7D,iCAA+B,kBAAkB;AACjD,QAAM,MAAM,YAAY;AACxB,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC/B,qCAAC,WAAD;AAAA;AAIN,WAAW,YAAY;AACvB,MAAM,uBAAuB,SAAS;AACtC,qBAAqB,YAAY;",
+  "names": []
+}