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

package/esm/date-time-picker/utils/dateHelpers.js

@@ -1,42 +1,33 @@
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { createRef } from 'react';
 import { monthNames } from './constants.js';
 import { prependStringWithPlaceHolders, deconstructValuesFromDateString, isIncompleteString } from './stringHelpers.js';
 import { convertToPositiveNumberIfPossible } from './numberHelpers.js';
 
-const getDateValuesFromDate = day => {
-  var _day$getMonth, _day$getDate, _day$getFullYear;
-
-  return {
-    month: day === null || day === void 0 ? void 0 : (_day$getMonth = day.getMonth) === null || _day$getMonth === void 0 ? void 0 : _day$getMonth.call(day),
-    day: day === null || day === void 0 ? void 0 : (_day$getDate = day.getDate) === null || _day$getDate === void 0 ? void 0 : _day$getDate.call(day),
-    year: day === null || day === void 0 ? void 0 : (_day$getFullYear = day.getFullYear) === null || _day$getFullYear === void 0 ? void 0 : _day$getFullYear.call(day)
-  };
-};
+const getDateValuesFromDate = day => ({
+  month: day?.getMonth?.(),
+  day: day?.getDate?.(),
+  year: day?.getFullYear?.()
+});
 const getDateStringFromDay = day => {
-  const monthFromDay = prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
+  const monthFromDay = prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
 
-  const dayFromDay = prependStringWithPlaceHolders("".concat(day.getDate()), 2);
-  const yearFromDay = prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
-  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
+  const dayFromDay = prependStringWithPlaceHolders(`${day.getDate()}`, 2);
+  const yearFromDay = prependStringWithPlaceHolders(`${day.getFullYear()}`, 4);
+  return `${monthFromDay}/${dayFromDay}/${yearFromDay}`;
 };
 const getTimeStringFromDay = day => {
   const hoursNum = day.getHours();
   const meridiem = hoursNum > 12 ? 'PM' : 'AM';
   const twelveHourFormat = hoursNum > 12 ? hoursNum - 12 : hoursNum;
   const minutesNum = day.getMinutes();
-  const hoursFromDay = prependStringWithPlaceHolders("".concat(twelveHourFormat), 2);
-  const minutesFromDay = prependStringWithPlaceHolders("".concat(minutesNum), 2);
-  return "".concat(hoursFromDay, ":").concat(minutesFromDay, " ").concat(meridiem);
+  const hoursFromDay = prependStringWithPlaceHolders(`${twelveHourFormat}`, 2);
+  const minutesFromDay = prependStringWithPlaceHolders(`${minutesNum}`, 2);
+  return `${hoursFromDay}:${minutesFromDay} ${meridiem}`;
 };
 const getMonthNameByMonthNumber = monthNumber => monthNames[monthNumber];
-const isSameDateMoment = (dateA, dateB) => {
-  var _dateA$getTime, _dateB$getTime;
-
-  return (dateA === null || dateA === void 0 ? void 0 : (_dateA$getTime = dateA.getTime) === null || _dateA$getTime === void 0 ? void 0 : _dateA$getTime.call(dateA)) === (dateB === null || dateB === void 0 ? void 0 : (_dateB$getTime = dateB.getTime) === null || _dateB$getTime === void 0 ? void 0 : _dateB$getTime.call(dateB));
-};
+const isSameDateMoment = (dateA, dateB) => dateA?.getTime?.() === dateB?.getTime?.();
 const compareTwoDatesDayEquality = (dayA, dayB) => {
   const {
     day: currD,
@@ -51,11 +42,7 @@ const compareTwoDatesDayEquality = (dayA, dayB) => {
   return currD === focusD && currM === focusM && currY === focusY;
 };
 const getLastDayOfMonth = (month, year) => new Date(year, month + 1, 0);
-const isValidDayForTheMonth = (month, year, day) => {
-  var _Date, _Date$getMonth;
-
-  return ((_Date = new Date(year, month, day)) === null || _Date === void 0 ? void 0 : (_Date$getMonth = _Date.getMonth) === null || _Date$getMonth === void 0 ? void 0 : _Date$getMonth.call(_Date)) === month;
-};
+const isValidDayForTheMonth = (month, year, day) => new Date(year, month, day)?.getMonth?.() === month;
 const getDayFromDateString = dateString => {
   const {
     month,
@@ -69,8 +56,6 @@ const getDayFromDateString = dateString => {
   return null;
 };
 const isValidDayForTheMonthDateString = dateString => {
-  var _getDayFromDateString, _getDayFromDateString2;
-
   if (isIncompleteString(dateString)) return true;
   const {
     month
@@ -78,7 +63,7 @@ const isValidDayForTheMonthDateString = dateString => {
   const monthInt = convertToPositiveNumberIfPossible(month);
   if (monthInt === -1) return false;
   const monthDateMonth = monthInt - 1;
-  return ((_getDayFromDateString = getDayFromDateString(dateString)) === null || _getDayFromDateString === void 0 ? void 0 : (_getDayFromDateString2 = _getDayFromDateString.getMonth) === null || _getDayFromDateString2 === void 0 ? void 0 : _getDayFromDateString2.call(_getDayFromDateString)) === monthDateMonth;
+  return getDayFromDateString(dateString)?.getMonth?.() === monthDateMonth;
 };
 const getValidationDateStringMetaInfo = function (dateString) {
   let getIsOutOfRangeDay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : day => false;
@@ -205,8 +190,6 @@ const getFirstXDaysFromNextMonth = (month, year, howMany) => {
   return days;
 };
 const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
-  var _currentMonthDays$, _currentMonthDays$$da, _currentMonthDays, _currentMonthDays$day;
-
   const currentMonthDays = getDaysInMonth(month, year).map(day => ({
     day,
     dayAsString: getDateStringFromDay(day),
@@ -216,7 +199,7 @@ const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
     isHidden: false,
     dayBtnRef: /*#__PURE__*/createRef()
   }));
-  const firstDayOfTheMonthWeekDay = currentMonthDays === null || currentMonthDays === void 0 ? void 0 : (_currentMonthDays$ = currentMonthDays[0]) === null || _currentMonthDays$ === void 0 ? void 0 : (_currentMonthDays$$da = _currentMonthDays$.day) === null || _currentMonthDays$$da === void 0 ? void 0 : _currentMonthDays$$da.getDay();
+  const firstDayOfTheMonthWeekDay = currentMonthDays?.[0]?.day?.getDay();
   const previousMonthDaysToPrepend = getLastXDaysFromPreviousMonth(month, year, firstDayOfTheMonthWeekDay).map(day => ({
     day,
     dayAsString: getDateStringFromDay(day),
@@ -226,7 +209,7 @@ const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
     isHidden: false,
     dayBtnRef: /*#__PURE__*/createRef()
   }));
-  const lastDayOfTheMonthWeekDay = currentMonthDays === null || currentMonthDays === void 0 ? void 0 : (_currentMonthDays = currentMonthDays[currentMonthDays.length - 1]) === null || _currentMonthDays === void 0 ? void 0 : (_currentMonthDays$day = _currentMonthDays.day) === null || _currentMonthDays$day === void 0 ? void 0 : _currentMonthDays$day.getDay();
+  const lastDayOfTheMonthWeekDay = currentMonthDays?.[currentMonthDays.length - 1]?.day?.getDay();
   const nextMonthDaysToAppend = getFirstXDaysFromNextMonth(month, year, 6 - lastDayOfTheMonthWeekDay).map(day => ({
     day,
     dayAsString: getDateStringFromDay(day),

package/esm/date-time-picker/utils/hooks/useOnClickOutside.js

@@ -3,10 +3,8 @@ import { useEffect } from 'react';
 const useOnClickOutside = (ref, handler) => {
   useEffect(() => {
     const listener = event => {
-      var _ref$contains;
-
       // Do nothing if clicking ref's element or descendent elements
-      if (event.target instanceof Element) if (!ref || ref !== null && ref !== void 0 && (_ref$contains = ref.contains) !== null && _ref$contains !== void 0 && _ref$contains.call(ref, event.target)) {
+      if (event.target instanceof Element) if (!ref || ref?.contains?.(event.target)) {
         return;
       }
       handler(event);

package/esm/date-time-picker/utils/stringHelpers.js

@@ -1,7 +1,5 @@
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
 import { monthNames, announcableCardinalDays } from './constants.js';
 import { convertToPositiveNumberIfPossible } from './numberHelpers.js';
 
@@ -27,13 +25,9 @@ const getFormattedDateString = _ref => {
   const finalMonth = fillStringWithPlaceHolders(month, 2);
   const finalDay = fillStringWithPlaceHolders(day, 2);
   const finalYear = fillStringWithPlaceHolders(year, 4);
-  return "".concat(finalMonth, "/").concat(finalDay, "/").concat(finalYear);
-};
-const dateTimeToDate = dateTime => {
-  var _dateTime$split, _dateTime$split$call;
-
-  return dateTime === null || dateTime === void 0 ? void 0 : (_dateTime$split = dateTime.split) === null || _dateTime$split === void 0 ? void 0 : (_dateTime$split$call = _dateTime$split.call(dateTime, ' ')) === null || _dateTime$split$call === void 0 ? void 0 : _dateTime$split$call[0];
+  return `${finalMonth}/${finalDay}/${finalYear}`;
 };
+const dateTimeToDate = dateTime => dateTime?.split?.(' ')?.[0];
 const deconstructValuesFromDateString = dateString => {
   const [dirtyMonth = '', dirtyDay = '', dirtyYear = ''] = dateString.split('/');
   const replaceAllRegexp = /_/g;
@@ -79,13 +73,13 @@ const getFormattedTimeString = _ref2 => {
 
   const finalMeridiem = fillStringWithPlaceHolders(meridiem, 2); // return `${finalHour}:${finalMinutes}:${finalSeconds} ${finalMeridiem}`;// <-- seconds format
 
-  return "".concat(finalHour, ":").concat(finalMinutes, " ").concat(finalMeridiem);
+  return `${finalHour}:${finalMinutes} ${finalMeridiem}`;
 };
 const dateTimeToTime = dateTime => {
   const [// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   date, // timeNumbers = '__:__:__', // <-- seconds format
   timeNumbers = '__:__', timeMeridiem = '__'] = dateTime.split(' ');
-  return "".concat(timeNumbers, " ").concat(timeMeridiem);
+  return `${timeNumbers} ${timeMeridiem}`;
 };
 const deconstructTimeValues = timeString => {
   const [dirtyTimes = '', dirtyMeridiem] = timeString.split(' '); // <--['__:__','__']
@@ -131,7 +125,7 @@ const getAriaDayFromDateString = dateString => {
   const dayNum = convertToPositiveNumberIfPossible(dayString);
   const yearNum = convertToPositiveNumberIfPossible(yearString);
   if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';
-  return "".concat(monthNames[monthNum - 1], " ").concat(announcableCardinalDays[dayNum], " ").concat(yearNum);
+  return `${monthNames[monthNum - 1]} ${announcableCardinalDays[dayNum]} ${yearNum}`;
 };
 
 export { dateTimeToDate, dateTimeToTime, deconstructTimeValues, deconstructValuesFromDateString, deconstructValuesFromTimeString, fillStringWithPlaceHolders, getAriaDayFromDateString, getFormattedDateString, getFormattedTimeString, isEmptyDateStringMask, isEmptyDateTimeStringMask, isEmptyTimeStringMask, isIncompleteString, isValidDateString, isValidTimeString, prependStringWithPlaceHolders };

package/esm/input-group/styled.js

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import '../text-input/DSInputText.js';
@@ -7,30 +6,101 @@ import '../combobox/ComboBox.js';
 import { DSComboBoxName, DSComboboxSlots } from '../combobox/theming.js';
 import { DSInputGroupName, DSInputGroupSlots } from './exported-related/theming.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 const StyledContainer = styled(Grid, {
   name: DSInputGroupName,
   slot: DSInputGroupSlots.CONTAINER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 28px;\n\n  // input in left position with right addon\n  & > div:nth-child(1) {\n    .", "-", ",\n      .", "-", ",\n      .", "-", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  // input in center position with left and right addon\n  & > div:nth-child(2):nth-last-child(2) {\n    .", "-", ",\n      .", "-", ",\n      .", "-", " {\n      border-radius: 0;\n    }\n  }\n\n  // input in right position with left addon\n  & > div:nth-child(2):nth-last-child(1) {\n    .", "-", ",\n      .", "-", ",\n      .", "-", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n  }\n"])), 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 = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: 1px solid ", ";\n  outline-offset: -1px;\n  height: inherit;\n  display: flex;\n  button {\n    border-width: 1px;\n  }\n  &:hover {\n    z-index: 2;\n    button:not(:disabled) {\n      border: 1px solid ", ";\n    }\n  }\n  &:focus-within {\n    z-index: 2;\n  }\n"])), _ref => {
+})`
+  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'];
-});
+}};
+    }
+  }
+  &:focus-within {
+    z-index: 2;
+  }
+`;
 const StyledLeftAddon = styled(StyledAddon, {
   name: DSInputGroupName,
   slot: DSInputGroupSlots.LEFT_ADDON
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  margin-right: -1px;\n  &:hover {\n    button:not(:disabled) {\n      border-top-right-radius: 0px;\n      border-bottom-right-radius: 0px;\n    }\n  }\n"])));
+})`
+  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
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top-right-radius: 2px;\n  border-bottom-right-radius: 2px;\n  margin-left: -1px;\n  &:hover {\n    button:not(:disabled) {\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n  }\n"])));
-const StyledInput = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  z-index: 1;\n"])));
+})`
+  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';