@elliemae/ds-controlled-form 2.4.2-rc.1 → 2.4.2-rc.13

package/esm/input-group/styled.js

@@ -1,35 +1,106 @@
-import styled from 'styled-components';
+import { styled } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import '../text-input/DSInputText.js';
 import { DSInputTextName, DSInputTextSlots } from '../text-input/exported-related/theming.js';
 import '../combobox/ComboBox.js';
 import { DSComboBoxName, DSComboboxSlots } from '../combobox/theming.js';
+import { DSInputGroupName, DSInputGroupSlots } from './exported-related/theming.js';
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-12elcva-0"
-})(["width:100%;height:28px;& > div:nth-child(1){.", "-", ",.", "-", ",.", "-", "{border-top-right-radius:0;border-bottom-right-radius:0;}}& > div:nth-child(2):nth-last-child(2){.", "-", ",.", "-", ",.", "-", "{border-radius:0;}}& > div:nth-child(2):nth-last-child(1){.", "-", ",.", "-", ",.", "-", "{border-top-left-radius:0;border-bottom-left-radius:0;}}"], DSInputTextName, DSInputTextSlots.INPUT_WRAPPER, DSInputTextName, DSInputTextSlots.INPUT, DSComboBoxName, DSComboboxSlots.INPUT_WRAPPER, DSInputTextName, DSInputTextSlots.INPUT_WRAPPER, DSInputTextName, DSInputTextSlots.INPUT, DSComboBoxName, DSComboboxSlots.INPUT_WRAPPER, DSInputTextName, DSInputTextSlots.INPUT_WRAPPER, DSInputTextName, DSInputTextSlots.INPUT, DSComboBoxName, DSComboboxSlots.INPUT_WRAPPER);
-const StyledAddon = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-12elcva-1"
-})(["outline:1px solid ", ";outline-offset:-1px;height:inherit;display:flex;button{border-width:1px;}&:hover{z-index:1;button:not(:disabled){border:1px solid ", ";}}&:focus-within{z-index:1;}"], _ref => {
+const StyledContainer = styled(Grid, {
+  name: DSInputGroupName,
+  slot: DSInputGroupSlots.CONTAINER
+})`
+  width: 100%;
+  height: 28px;
+
+  // input in left position with right addon
+  & > div:nth-child(1) {
+    .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER},
+      .${DSInputTextName}-${DSInputTextSlots.INPUT},
+      .${DSComboBoxName}-${DSComboboxSlots.INPUT_WRAPPER} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  // input in center position with left and right addon
+  & > div:nth-child(2):nth-last-child(2) {
+    .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER},
+      .${DSInputTextName}-${DSInputTextSlots.INPUT},
+      .${DSComboBoxName}-${DSComboboxSlots.INPUT_WRAPPER} {
+      border-radius: 0;
+    }
+  }
+
+  // input in right position with left addon
+  & > div:nth-child(2):nth-last-child(1) {
+    .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER},
+      .${DSInputTextName}-${DSInputTextSlots.INPUT},
+      .${DSComboBoxName}-${DSComboboxSlots.INPUT_WRAPPER} {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+`;
+const StyledAddon = styled.div`
+  outline: 1px solid ${_ref => {
   let {
     theme
   } = _ref;
   return theme.colors.neutral['400'];
-}, _ref2 => {
+}};
+  outline-offset: -1px;
+  height: inherit;
+  display: flex;
+  button {
+    border-width: 1px;
+  }
+  &:hover {
+    z-index: 2;
+    button:not(:disabled) {
+      border: 1px solid ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.colors.brand['700'];
-});
-const StyledLeftAddon = /*#__PURE__*/styled(StyledAddon).withConfig({
-  componentId: "sc-12elcva-2"
-})(["border-top-left-radius:2px;border-bottom-left-radius:2px;margin-right:-1px;&:hover{button:not(:disabled){border-top-right-radius:0px;border-bottom-right-radius:0px;}}"]);
-const StyledRightAddon = /*#__PURE__*/styled(StyledAddon).withConfig({
-  componentId: "sc-12elcva-3"
-})(["border-top-right-radius:2px;border-bottom-right-radius:2px;margin-left:-1px;&:hover{button:not(:disabled){border-top-left-radius:0px;border-bottom-left-radius:0px;}}"]);
-const StyledInput = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-12elcva-4"
-})(["&:focus-within,&:hover{z-index:1;}"]);
+}};
+    }
+  }
+  &:focus-within {
+    z-index: 2;
+  }
+`;
+const StyledLeftAddon = styled(StyledAddon, {
+  name: DSInputGroupName,
+  slot: DSInputGroupSlots.LEFT_ADDON
+})`
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  margin-right: -1px;
+  &:hover {
+    button:not(:disabled) {
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+  }
+`;
+const StyledRightAddon = styled(StyledAddon, {
+  name: DSInputGroupName,
+  slot: DSInputGroupSlots.RIGHT_ADDON
+})`
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  margin-left: -1px;
+  &:hover {
+    button:not(:disabled) {
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
+    }
+  }
+`;
+const StyledInput = styled.div`
+  z-index: 1;
+`;
 
 export { StyledContainer, StyledInput, StyledLeftAddon, StyledRightAddon };

package/esm/large-text-input/DSControlledLargeTextInput.js

@@ -62,7 +62,7 @@ const DSControlledLargeTextInput = props => {
       hasError: hasError
     }, globalAttributes)), maxLength && !withoutCharacterCounter && /*#__PURE__*/_jsx(StyledCharCounter, {
       "data-testid": DSControlledLargetTextInputDatatestids.CHAR_COUNTER
-    }, void 0, "".concat(value.length, "/").concat(maxLength))]
+    }, void 0, `${value.length}/${maxLength}`)]
   }));
 };
 

package/esm/large-text-input/styles.js

@@ -1,30 +1,48 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 import { layout, space, sizing } from '@xstyled/styled-components';
 import { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/theming.js';
 
-var _templateObject, _templateObject2, _templateObject3;
 const StyledContainer = styled('div', {
   name: DSControlledLargeTextInputName,
   slot: DSControlledLargeTextInputSlots.CONTAINER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-gap: 4px;\n  grid-template-rows: auto auto;\n  grid-template-columns: fit-content;\n  ", "\n  ", "\n  ", "\n"])), layout, space, sizing);
+})`
+  display: grid;
+  grid-gap: 4px;
+  grid-template-rows: auto auto;
+  grid-template-columns: fit-content;
+  ${layout}
+  ${space}
+  ${sizing}
+`;
 const StyledCharCounter = styled('span', {
   name: DSControlledLargeTextInputName,
   slot: DSControlledLargeTextInputSlots.CHAR_COUNTER
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  justify-self: flex-end;\n"])));
+})`
+  justify-self: flex-end;
+`;
 const StyledTextArea = styled('textarea', {
   name: DSControlledLargeTextInputName,
   slot: DSControlledLargeTextInputSlots.INPUT
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  ", "\n  &:disabled {\n    &:hover {\n      cursor: not-allowed;\n    }\n  }\n\n  ", "\n"])), _ref => {
+})`
+  width: 100%;
+  ${_ref => {
   let {
     resizable
   } = _ref;
-  return resizable ? "" : "resize: none;";
-}, _ref2 => {
+  return resizable ? `` : `resize: none;`;
+}}
+  &:disabled {
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
+  ${_ref2 => {
   let {
     hasError
   } = _ref2;
-  return hasError ? "border: 1px solid red;" : "";
-});
+  return hasError ? `border: 1px solid red;` : ``;
+}}
+`;
 
 export { StyledCharCounter, StyledContainer, StyledTextArea };

package/esm/mask-hook/hooks/useNumberMask.js

@@ -1,9 +1,7 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -141,9 +139,7 @@ const useNumberMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, opts);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/hooks/usePhoneMask.js

@@ -2,7 +2,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -64,9 +63,7 @@ const usePhoneMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, opts);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/hooks/useRegExpMask.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -11,6 +10,8 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import { flatStringArray } from '../utils/flatStringArray.js';
 import { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types.js';
 
+/* eslint-disable max-depth */
+
 const isRegExp = item => typeof item === 'object';
 
 const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
@@ -29,9 +30,7 @@ const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
       fullRegExpMatched = false;
 
       for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {
-        var _rawValueArray$j;
-
-        const match = (_rawValueArray$j = rawValueArray[j]) === null || _rawValueArray$j === void 0 ? void 0 : _rawValueArray$j.match(flatRegExp[i]);
+        const match = rawValueArray[j]?.match(flatRegExp[i]);
 
         if (match) {
           maskedValue.push(match[0]);
@@ -83,9 +82,7 @@ const useRegExpMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, regExp, filledMask);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, regExp, filledMask);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/hooks/useSSNMask.js

@@ -1,7 +1,6 @@
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -47,9 +46,7 @@ const useSSNMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/hooks/useZipCodeMask.js

@@ -1,7 +1,6 @@
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useCallbackAfterRender } from '@elliemae/ds-utilities';
@@ -44,9 +43,7 @@ const useZipCodeMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = useCallback(e => {
-    var _e$target$selectionEn;
-
-    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current);
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);
     valueSetter(prevMask => {
       // Here we need to update the key
       if (mask === prevMask) setKey(key => key + 1);

package/esm/mask-hook/utils/addSpecialCharacters.js

@@ -1,7 +1,6 @@
 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 'core-js/modules/web.dom-collections.iterator.js';
 
 /* eslint-disable max-params */
 

package/esm/mask-hook/utils/flatStringArray.js

@@ -1,7 +1,6 @@
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 
 const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
   if (typeof curr === 'string') {

package/esm/text-input/config/useInputText.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { useState, useCallback, useMemo } from 'react';
 import { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';

package/esm/text-input/styled/borders.js

@@ -1,13 +1,24 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { css, th } from '@elliemae/ds-system';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const commonBorderCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('neutral-400'));
-const readOnlyBorderCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-top-color: ", ";\n"])), th.color('neutral-400'));
+const commonBorderCss = css`
+  border: 1px solid ${th.color('neutral-400')};
+`;
+const readOnlyBorderCss = css`
+  border: 1px solid transparent;
+  border-top-color: ${th.color('neutral-400')};
+`;
 const disabledBorderCss = commonBorderCss;
-const hasErrorBorderCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('danger-900'));
-const hoverBorderCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('brand-700'));
-const focusBorderCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), th.color('brand-700'));
+const hasErrorBorderCss = css`
+  border: 1px solid ${th.color('danger-900')};
+`;
+const hoverBorderCss = css`
+  border: 1px solid ${th.color('brand-700')};
+`;
+const focusBorderCss = css`
+  border: 1px solid transparent;
+  outline: 2px solid ${th.color('brand-700')};
+  outline-offset: -2px;
+`;
 const getBorderCss = props => {
   if (props.isDisabled) return disabledBorderCss;
   if (props.hasFocus) return focusBorderCss;

package/esm/text-input/styled/components.js

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { DSButtonV2 } from '@elliemae/ds-button';
 import { Grid } from '@elliemae/ds-grid';
 import { styled, th } from '@elliemae/ds-system';
@@ -6,23 +5,67 @@ import { layout, space, sizing } from '@xstyled/styled-components';
 import { DSInputTextName, DSInputTextSlots } from '../exported-related/theming.js';
 import { getBorderCss, getHoverBorderCss } from './borders.js';
 
-var _templateObject, _templateObject2, _templateObject3;
 const StyledInputWrapper = styled(Grid, {
   name: DSInputTextName,
   slot: DSInputTextSlots.INPUT_WRAPPER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n\n  ", "\n  border-radius: 2px;\n\n  :hover {\n    ", "\n  }\n\n  ", "\n  ", "\n  ", "\n"])), _ref => {
+})`
+  height: ${_ref => {
   let {
     inputSize
   } = _ref;
   return inputSize === 'm' ? '28px' : '24px';
-}, getBorderCss, getHoverBorderCss, layout, space, sizing);
+}};
+
+  ${getBorderCss}
+  border-radius: 2px;
+
+  :hover {
+    ${getHoverBorderCss}
+  }
+
+  ${layout}
+  ${space}
+  ${sizing}
+`;
 const StyledInput = styled('input', {
   name: DSInputTextName,
   slot: DSInputTextSlots.INPUT
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  font-size: 13px;\n\n  ::placeholder {\n    font-weight: ", ";\n    font-style: italic;\n    color: ", ";\n  }\n\n  :disabled {\n    background-color: ", ";\n    color: #616b7f;\n    cursor: not-allowed;\n  }\n"])), th.space('xxs'), th.fontWeight('regular'), th.color('neutral-500'), th.color('neutral-080'));
+})`
+  padding: 0 ${th.space('xxs')};
+  border: none;
+  outline: none;
+  border-radius: 2px;
+
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+
+  ::placeholder {
+    font-weight: ${th.fontWeight('regular')};
+    font-style: italic;
+    color: ${th.color('neutral-500')};
+  }
+
+  :disabled {
+    background-color: ${th.color('neutral-080')};
+    color: #616b7f;
+    cursor: not-allowed;
+  }
+`;
 const StyledClearButton = styled(DSButtonV2, {
   name: DSInputTextName,
   slot: DSInputTextSlots.CLEAR_BUTTON
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  min-width: 20px;\n  width: 20px;\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n"])));
+})`
+  height: 100%;
+  min-width: 20px;
+  width: 20px;
+  &:after {
+    border-top-left-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+  }
+  :focus {
+    border-width: 0px;
+  }
+`;
 
 export { StyledClearButton, StyledInput, StyledInputWrapper };

package/esm/toggle/ControlledToggle.js

@@ -5,7 +5,6 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { uid } from 'uid';
 import { describe } from 'react-desc';

package/esm/toggle/styles.js

@@ -31,7 +31,7 @@ const StyledLabel = /*#__PURE__*/styled.div.withConfig({
     width,
     size
   } = _ref5;
-  return "calc(".concat(width, "px + ").concat(margin[size], ")");
+  return `calc(${width}px + ${margin[size]})`;
 }, _ref6 => {
   let {
     size
@@ -54,7 +54,7 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
   let {
     size
   } = _ref9;
-  return "calc(".concat(labelHeight[size], " - 4px)");
+  return `calc(${labelHeight[size]} - 4px)`;
 }, _ref10 => {
   let {
     theme,
@@ -64,7 +64,9 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
     readOnly,
     active
   } = _ref10;
-  return size === 's' ? "1px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme)) : "\n    2px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme), "\n    ");
+  return size === 's' ? `1px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}` : `
+    2px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}
+    `;
 }, _ref11 => {
   let {
     theme,
@@ -129,13 +131,13 @@ const StyledText = /*#__PURE__*/styled.div.withConfig({
     isLongerTextRendering,
     checked
   } = _ref20;
-  return isLongerTextRendering && checked ? "margin-left: 6px;" : undefined;
+  return isLongerTextRendering && checked ? `margin-left: 6px;` : undefined;
 }, _ref21 => {
   let {
     isLongerTextRendering,
     checked
   } = _ref21;
-  return isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined;
+  return isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined;
 });
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-yhh3ee-5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.4.2-rc.1",
+  "version": "2.4.2-rc.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -179,6 +179,18 @@
       "import": "./esm/input-group/index.js",
       "require": "./cjs/input-group/index.js"
     },
+    "./input-group/exported-related/theming": {
+      "import": "./esm/input-group/exported-related/theming.js",
+      "require": "./cjs/input-group/exported-related/theming.js"
+    },
+    "./input-group/exported-related": {
+      "import": "./esm/input-group/exported-related/index.js",
+      "require": "./cjs/input-group/exported-related/index.js"
+    },
+    "./input-group/exported-related/data-test-ids": {
+      "import": "./esm/input-group/exported-related/data-test-ids.js",
+      "require": "./cjs/input-group/exported-related/data-test-ids.js"
+    },
     "./date-time-picker/utils/typeGuards": {
       "import": "./esm/date-time-picker/utils/typeGuards.js",
       "require": "./cjs/date-time-picker/utils/typeGuards.js"
@@ -511,6 +523,10 @@
       "import": "./esm/date-time-picker/config/useGetDestructuredValues.js",
       "require": "./cjs/date-time-picker/config/useGetDestructuredValues.js"
     },
+    "./date-time-picker/config/useFocusTracker": {
+      "import": "./esm/date-time-picker/config/useFocusTracker.js",
+      "require": "./cjs/date-time-picker/config/useFocusTracker.js"
+    },
     "./date-time-picker/config/useControlledDateTimePicker": {
       "import": "./esm/date-time-picker/config/useControlledDateTimePicker.js",
       "require": "./cjs/date-time-picker/config/useControlledDateTimePicker.js"
@@ -799,6 +815,10 @@
       "import": "./esm/autocomplete/react-desc-prop-types.js",
       "require": "./cjs/autocomplete/react-desc-prop-types.js"
     },
+    "./autocomplete/parts/styled": {
+      "import": "./esm/autocomplete/parts/styled.js",
+      "require": "./cjs/autocomplete/parts/styled.js"
+    },
     "./autocomplete/parts/menu-list/useItemRenderer": {
       "import": "./esm/autocomplete/parts/menu-list/useItemRenderer.js",
       "require": "./cjs/autocomplete/parts/menu-list/useItemRenderer.js"
@@ -831,6 +851,10 @@
       "import": "./esm/autocomplete/parts/container/Container.js",
       "require": "./cjs/autocomplete/parts/container/Container.js"
     },
+    "./autocomplete/parts/A11yFocusedOption": {
+      "import": "./esm/autocomplete/parts/A11yFocusedOption.js",
+      "require": "./cjs/autocomplete/parts/A11yFocusedOption.js"
+    },
     "./autocomplete": {
       "import": "./esm/autocomplete/index.js",
       "require": "./cjs/autocomplete/index.js"
@@ -872,20 +896,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.2-rc.1",
-    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.1",
-    "@elliemae/ds-controlled-form": "2.4.2-rc.1",
-    "@elliemae/ds-form": "2.4.2-rc.1",
-    "@elliemae/ds-form-layout-blocks": "2.4.2-rc.1",
-    "@elliemae/ds-grid": "2.4.2-rc.1",
-    "@elliemae/ds-icon": "2.4.2-rc.1",
-    "@elliemae/ds-icons": "2.4.2-rc.1",
-    "@elliemae/ds-pills": "2.4.2-rc.1",
-    "@elliemae/ds-popperjs": "2.4.2-rc.1",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.1",
-    "@elliemae/ds-system": "2.4.2-rc.1",
-    "@elliemae/ds-tooltip": "2.4.2-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.1",
+    "@elliemae/ds-button": "2.4.2-rc.13",
+    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.13",
+    "@elliemae/ds-controlled-form": "2.4.2-rc.13",
+    "@elliemae/ds-form": "2.4.2-rc.13",
+    "@elliemae/ds-form-layout-blocks": "2.4.2-rc.13",
+    "@elliemae/ds-grid": "2.4.2-rc.13",
+    "@elliemae/ds-icon": "2.4.2-rc.13",
+    "@elliemae/ds-icons": "2.4.2-rc.13",
+    "@elliemae/ds-pills": "2.4.2-rc.13",
+    "@elliemae/ds-popperjs": "2.4.2-rc.13",
+    "@elliemae/ds-props-helpers": "2.4.2-rc.13",
+    "@elliemae/ds-system": "2.4.2-rc.13",
+    "@elliemae/ds-tooltip": "2.4.2-rc.13",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.13",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/autocomplete/parts/A11yFocusedOption.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DSAutocompleteT } from '../react-desc-prop-types';
+export declare const isSeparator: (el: DSAutocompleteT.OptionTypes | undefined) => el is DSAutocompleteT.ItemSeparatorOptions;
+export declare const StyledA11ySelectedValues: any;
+export declare const A11yFocusedOption: React.ComponentType;

package/types/autocomplete/parts/container/styled.d.ts

@@ -1,2 +1,2 @@
-export declare const StyledContainerWithPopper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPopperWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/autocomplete/utils/listHelper.d.ts

@@ -1,7 +1,7 @@
 import { DSAutocompleteT } from '../react-desc-prop-types';
-export declare const getSelectableOptions: (options: Array<CBOptionT>) => Array<CBOptionT>;
-export declare const getOptions: (options: Array<CBOptionT>) => Array<CBOptionT>;
-export declare const isSelectedValueEmpty: (value: CBOptionT | Array<CBOptionT>) => boolean;
-export declare const isSelectedValueMultiple: (value: CBOptionT | Array<CBOptionT>) => boolean;
-export declare const findInCircularList: <T extends unknown>(list: T[], from: number, criteria: (item: T) => boolean, step?: number) => number;
+export declare const getSelectableOptions: (options: Array<DSAutocompleteT.OptionTypes>) => Array<DSAutocompleteT.OptionTypes>;
+export declare const getOptions: (options: Array<DSAutocompleteT.OptionTypes>) => Array<DSAutocompleteT.OptionTypes>;
+export declare const isSelectedValueEmpty: (value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>) => boolean;
+export declare const isSelectedValueMultiple: (value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>) => boolean;
+export declare const findInCircularList: (list: DSAutocompleteT.OptionTypes[], from: number, criteria: (item: DSAutocompleteT.OptionTypes) => boolean, step?: number) => number;
 export declare const getFirstOption: (options: DSAutocompleteT.OptionTypes[]) => string;

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

@@ -5,7 +5,6 @@ export declare namespace DSControlledCheckboxT {
         checked: boolean | 'mixed';
         tabIndex?: number;
         hasError?: boolean;
-        'data-testid'?: string;
         wrapLabel: boolean;
     }
     interface OptionalProps {
@@ -35,6 +34,7 @@ export declare const propTypes: {
     label: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     hasError: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     innerRef: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    wrapLabel: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     'aria-*': import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     'on-*': import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
     'data-*': import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;