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

package/cjs/input-group/exported-related/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dataTestIds = require('./data-test-ids.js');
+var theming = require('./theming.js');
+
+
+
+exports.InputGroupDataTestIds = dataTestIds.InputGroupDataTestIds;
+exports.DSInputGroupName = theming.DSInputGroupName;
+exports.DSInputGroupSlots = theming.DSInputGroupSlots;

package/cjs/input-group/exported-related/theming.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputGroupName = 'ds-input-group';
+const DSInputGroupSlots = {
+  CONTAINER: 'root',
+  LEFT_ADDON: 'leftaddon',
+  RIGHT_ADDON: 'rightaddon'
+};
+
+exports.DSInputGroupName = DSInputGroupName;
+exports.DSInputGroupSlots = DSInputGroupSlots;

package/cjs/input-group/styled.js

@@ -2,43 +2,110 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
 require('../text-input/DSInputText.js');
-var theming = require('../text-input/exported-related/theming.js');
+var theming$1 = require('../text-input/exported-related/theming.js');
 require('../combobox/ComboBox.js');
-var theming$1 = require('../combobox/theming.js');
+var theming$2 = require('../combobox/theming.js');
+var theming = require('./exported-related/theming.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+const StyledContainer = dsSystem.styled(dsGrid.Grid, {
+  name: theming.DSInputGroupName,
+  slot: theming.DSInputGroupSlots.CONTAINER
+})`
+  width: 100%;
+  height: 28px;
 
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+  // input in left position with right addon
+  & > div:nth-child(1) {
+    .${theming$1.DSInputTextName}-${theming$1.DSInputTextSlots.INPUT_WRAPPER},
+      .${theming$1.DSInputTextName}-${theming$1.DSInputTextSlots.INPUT},
+      .${theming$2.DSComboBoxName}-${theming$2.DSComboboxSlots.INPUT_WRAPPER} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.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;}}"], theming.DSInputTextName, theming.DSInputTextSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT, theming$1.DSComboBoxName, theming$1.DSComboboxSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT, theming$1.DSComboBoxName, theming$1.DSComboboxSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT, theming$1.DSComboBoxName, theming$1.DSComboboxSlots.INPUT_WRAPPER);
-const StyledAddon = /*#__PURE__*/styled__default["default"].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 => {
+  // input in center position with left and right addon
+  & > div:nth-child(2):nth-last-child(2) {
+    .${theming$1.DSInputTextName}-${theming$1.DSInputTextSlots.INPUT_WRAPPER},
+      .${theming$1.DSInputTextName}-${theming$1.DSInputTextSlots.INPUT},
+      .${theming$2.DSComboBoxName}-${theming$2.DSComboboxSlots.INPUT_WRAPPER} {
+      border-radius: 0;
+    }
+  }
+
+  // input in right position with left addon
+  & > div:nth-child(2):nth-last-child(1) {
+    .${theming$1.DSInputTextName}-${theming$1.DSInputTextSlots.INPUT_WRAPPER},
+      .${theming$1.DSInputTextName}-${theming$1.DSInputTextSlots.INPUT},
+      .${theming$2.DSComboBoxName}-${theming$2.DSComboboxSlots.INPUT_WRAPPER} {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+`;
+const StyledAddon = dsSystem.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__default["default"](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__default["default"](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__default["default"].div.withConfig({
-  componentId: "sc-12elcva-4"
-})(["&:focus-within,&:hover{z-index:1;}"]);
+}};
+    }
+  }
+  &:focus-within {
+    z-index: 2;
+  }
+`;
+const StyledLeftAddon = dsSystem.styled(StyledAddon, {
+  name: theming.DSInputGroupName,
+  slot: theming.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 = dsSystem.styled(StyledAddon, {
+  name: theming.DSInputGroupName,
+  slot: theming.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 = dsSystem.styled.div`
+  z-index: 1;
+`;
 
 exports.StyledContainer = StyledContainer;
 exports.StyledInput = StyledInput;

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

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

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

@@ -2,38 +2,52 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var styledComponents = require('@xstyled/styled-components');
 var theming = require('./exported-related/theming.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject, _templateObject2, _templateObject3;
 const StyledContainer = dsSystem.styled('div', {
   name: theming.DSControlledLargeTextInputName,
   slot: theming.DSControlledLargeTextInputSlots.CONTAINER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  grid-gap: 4px;\n  grid-template-rows: auto auto;\n  grid-template-columns: fit-content;\n  ", "\n  ", "\n  ", "\n"])), styledComponents.layout, styledComponents.space, styledComponents.sizing);
+})`
+  display: grid;
+  grid-gap: 4px;
+  grid-template-rows: auto auto;
+  grid-template-columns: fit-content;
+  ${styledComponents.layout}
+  ${styledComponents.space}
+  ${styledComponents.sizing}
+`;
 const StyledCharCounter = dsSystem.styled('span', {
   name: theming.DSControlledLargeTextInputName,
   slot: theming.DSControlledLargeTextInputSlots.CHAR_COUNTER
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  justify-self: flex-end;\n"])));
+})`
+  justify-self: flex-end;
+`;
 const StyledTextArea = dsSystem.styled('textarea', {
   name: theming.DSControlledLargeTextInputName,
   slot: theming.DSControlledLargeTextInputSlots.INPUT
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\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;` : ``;
+}}
+`;
 
 exports.StyledCharCounter = StyledCharCounter;
 exports.StyledContainer = StyledContainer;

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

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('core-js/modules/es.string.replace.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsUtilities = require('@elliemae/ds-utilities');
@@ -149,9 +147,7 @@ const useNumberMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = React.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/cjs/mask-hook/hooks/usePhoneMask.js

@@ -6,7 +6,6 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsUtilities = require('@elliemae/ds-utilities');
@@ -72,9 +71,7 @@ const usePhoneMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = React.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/cjs/mask-hook/hooks/useRegExpMask.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsUtilities = require('@elliemae/ds-utilities');
@@ -15,6 +14,8 @@ require('core-js/modules/esnext.iterator.filter.js');
 var flatStringArray = require('../utils/flatStringArray.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
+/* eslint-disable max-depth */
+
 const isRegExp = item => typeof item === 'object';
 
 const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
@@ -33,9 +34,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]);
@@ -87,9 +86,7 @@ const useRegExpMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = React.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/cjs/mask-hook/hooks/useSSNMask.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsUtilities = require('@elliemae/ds-utilities');
@@ -51,9 +50,7 @@ const useSSNMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = React.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/cjs/mask-hook/hooks/useZipCodeMask.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsUtilities = require('@elliemae/ds-utilities');
@@ -48,9 +47,7 @@ const useZipCodeMask = props => {
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
   const onChange = React.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/cjs/mask-hook/utils/addSpecialCharacters.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 
 /* eslint-disable max-params */
 

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.reduce.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 
 const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
   if (typeof curr === 'string') {

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var React = require('react');
 var reactDescPropTypes = require('../react-desc-prop-types.js');

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

@@ -2,20 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const commonBorderCss = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('neutral-400'));
-const readOnlyBorderCss = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  border-top-color: ", ";\n"])), dsSystem.th.color('neutral-400'));
+const commonBorderCss = dsSystem.css`
+  border: 1px solid ${dsSystem.th.color('neutral-400')};
+`;
+const readOnlyBorderCss = dsSystem.css`
+  border: 1px solid transparent;
+  border-top-color: ${dsSystem.th.color('neutral-400')};
+`;
 const disabledBorderCss = commonBorderCss;
-const hasErrorBorderCss = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('danger-900'));
-const hoverBorderCss = dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('brand-700'));
-const focusBorderCss = dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), dsSystem.th.color('brand-700'));
+const hasErrorBorderCss = dsSystem.css`
+  border: 1px solid ${dsSystem.th.color('danger-900')};
+`;
+const hoverBorderCss = dsSystem.css`
+  border: 1px solid ${dsSystem.th.color('brand-700')};
+`;
+const focusBorderCss = dsSystem.css`
+  border: 1px solid transparent;
+  outline: 2px solid ${dsSystem.th.color('brand-700')};
+  outline-offset: -2px;
+`;
 const getBorderCss = props => {
   if (props.isDisabled) return disabledBorderCss;
   if (props.hasFocus) return focusBorderCss;

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var DSButton = require('@elliemae/ds-button');
 var dsGrid = require('@elliemae/ds-grid');
 var dsSystem = require('@elliemae/ds-system');
@@ -10,28 +9,68 @@ var styledComponents = require('@xstyled/styled-components');
 var theming = require('../exported-related/theming.js');
 var borders = require('./borders.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject, _templateObject2, _templateObject3;
 const StyledInputWrapper = dsSystem.styled(dsGrid.Grid, {
   name: theming.DSInputTextName,
   slot: theming.DSInputTextSlots.INPUT_WRAPPER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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';
-}, borders.getBorderCss, borders.getHoverBorderCss, styledComponents.layout, styledComponents.space, styledComponents.sizing);
+}};
+
+  ${borders.getBorderCss}
+  border-radius: 2px;
+
+  :hover {
+    ${borders.getHoverBorderCss}
+  }
+
+  ${styledComponents.layout}
+  ${styledComponents.space}
+  ${styledComponents.sizing}
+`;
 const StyledInput = dsSystem.styled('input', {
   name: theming.DSInputTextName,
   slot: theming.DSInputTextSlots.INPUT
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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"])), dsSystem.th.space('xxs'), dsSystem.th.fontWeight('regular'), dsSystem.th.color('neutral-500'), dsSystem.th.color('neutral-080'));
+})`
+  padding: 0 ${dsSystem.th.space('xxs')};
+  border: none;
+  outline: none;
+  border-radius: 2px;
+
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+
+  ::placeholder {
+    font-weight: ${dsSystem.th.fontWeight('regular')};
+    font-style: italic;
+    color: ${dsSystem.th.color('neutral-500')};
+  }
+
+  :disabled {
+    background-color: ${dsSystem.th.color('neutral-080')};
+    color: #616b7f;
+    cursor: not-allowed;
+  }
+`;
 const StyledClearButton = dsSystem.styled(DSButton.DSButtonV2, {
   name: theming.DSInputTextName,
   slot: theming.DSInputTextSlots.CLEAR_BUTTON
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\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;
+  }
+`;
 
 exports.StyledClearButton = StyledClearButton;
 exports.StyledInput = StyledInput;

package/cjs/toggle/ControlledToggle.js

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var uid = require('uid');
 var reactDesc = require('react-desc');

package/cjs/toggle/styles.js

@@ -39,7 +39,7 @@ const StyledLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
     width,
     size
   } = _ref5;
-  return "calc(".concat(width, "px + ").concat(styleHelpers.margin[size], ")");
+  return `calc(${width}px + ${styleHelpers.margin[size]})`;
 }, _ref6 => {
   let {
     size
@@ -62,7 +62,7 @@ const StyledVisibleContent = /*#__PURE__*/styled__default["default"].label.withC
   let {
     size
   } = _ref9;
-  return "calc(".concat(styleHelpers.labelHeight[size], " - 4px)");
+  return `calc(${styleHelpers.labelHeight[size]} - 4px)`;
 }, _ref10 => {
   let {
     theme,
@@ -72,7 +72,9 @@ const StyledVisibleContent = /*#__PURE__*/styled__default["default"].label.withC
     readOnly,
     active
   } = _ref10;
-  return size === 's' ? "1px solid ".concat(styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme)) : "\n    2px solid ".concat(styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme), "\n    ");
+  return size === 's' ? `1px solid ${styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme)}` : `
+    2px solid ${styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme)}
+    `;
 }, _ref11 => {
   let {
     theme,
@@ -137,13 +139,13 @@ const StyledText = /*#__PURE__*/styled__default["default"].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__default["default"].input.withConfig({
   componentId: "sc-yhh3ee-5"

package/esm/autocomplete/config/useAutocomplete.js

@@ -1,7 +1,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 'core-js/modules/web.dom-collections.iterator.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';

package/esm/autocomplete/parts/A11yFocusedOption.js

@@ -0,0 +1,36 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useMemo } from 'react';
+import { styled } from '@elliemae/ds-system';
+import { AutocompleteContext } from '../AutocompleteCTX.js';
+import { getSelectableOptions } from '../utils/listHelper.js';
+
+const isSeparator = el => el?.type === 'separator';
+const StyledA11ySelectedValues = styled.span`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+const A11yFocusedOption = () => {
+  const {
+    props: {
+      options
+    },
+    focusOptionIdx,
+    showPopover
+  } = useContext(AutocompleteContext);
+  return useMemo(() => {
+    const selectabledOptions = getSelectableOptions(options);
+    const focusOption = options.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+    const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
+    return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
+      "aria-live": "polite"
+    }, void 0, !isSeparator(focusOption) && showPopover && focusOption && `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}
+           `);
+  }, [options, showPopover, focusOptionIdx]);
+};
+
+export { A11yFocusedOption, StyledA11ySelectedValues, isSeparator };