@elliemae/ds-controlled-form 2.4.2-rc.11 → 2.4.2-rc.14

package/esm/date-time-picker/parts/TimeInputs/useTimeInputs.js

@@ -39,9 +39,7 @@ const useTimeInputs = () => {
     trackFocusHourInput();
   }, [trackFocusHourInput]);
   const onHoursChange = useCallback(e => {
-    var _e$target;
-
-    let newHours = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts hours 2~9 to 07~09
+    let newHours = e?.target?.value; // converts hours 2~9 to 07~09
 
     if (Number.parseInt(newHours, 10) > 1) newHours = prependStringWithPlaceHolders(newHours, 2);
     handleChangeHours(newHours, e); // auto-advance functionality:
@@ -64,12 +62,12 @@ const useTimeInputs = () => {
       const hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;
       let newHours;
       if (key === 'ArrowUp') newHours = hoursInteger + 1 <= 12 ? hoursInteger + 1 : hoursInteger;else newHours = hoursInteger - 1 > 1 ? hoursInteger - 1 : 1;
-      newHours = prependStringWithPlaceHolders("".concat(newHours), 2);
+      newHours = prependStringWithPlaceHolders(`${newHours}`, 2);
       handleChangeHours(newHours, e);
     }
 
     if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
-      const newHours = prependStringWithPlaceHolders("".concat(hoursStringConvertedToInteger), 2);
+      const newHours = prependStringWithPlaceHolders(`${hoursStringConvertedToInteger}`, 2);
       handleChangeHours(newHours, e); // auto-advance functionality:
 
       if (newHours.length === 2) trackFocusMinuteInput();
@@ -84,9 +82,7 @@ const useTimeInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [hours, isWithDateInputs, trackFocusYearInput, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusMinuteInput, handleChangeHours]);
   const onHoursBlur = useCallback(e => {
-    var _e$target2;
-
-    const newHours = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
+    const newHours = e?.target?.value;
     if (newHours === '0') handleChangeHours('01', e, {
       isAutomaticFillTrigger: true
     });else if (newHours.length > 0 && newHours.length < 2) handleChangeHours(prependStringWithPlaceHolders(newHours, 2), e, {
@@ -97,9 +93,7 @@ const useTimeInputs = () => {
     trackFocusMinuteInput();
   }, [trackFocusMinuteInput]);
   const onMinutesChange = useCallback(e => {
-    var _e$target3;
-
-    let newMinutes = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts minutes 7~9 to 07~09
+    let newMinutes = e?.target?.value; // converts minutes 7~9 to 07~09
 
     if (Number.parseInt(newMinutes, 10) > 6) newMinutes = prependStringWithPlaceHolders(newMinutes, 2);
     handleChangeMinutes(newMinutes, e); // auto-advance functionality:
@@ -122,19 +116,19 @@ const useTimeInputs = () => {
       const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
       let newMinutes;
       if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
-      newMinutes = prependStringWithPlaceHolders("".concat(newMinutes), 2);
+      newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);
       handleChangeMinutes(newMinutes, e);
     }
 
     if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
-      const newMinutes = prependStringWithPlaceHolders("".concat(minutesStringConvertedToInteger), 2);
+      const newMinutes = prependStringWithPlaceHolders(`${minutesStringConvertedToInteger}`, 2);
       handleChangeMinutes(newMinutes, e); // auto-advance functionality:
 
       if (newMinutes.length === 2) trackFocusMeridiemInput();
     } // regressive backspace functionality
 
 
-    if (key === 'Backspace' && (minutes === null || minutes === void 0 ? void 0 : minutes.length) === 0) {
+    if (key === 'Backspace' && minutes?.length === 0) {
       trackFocusHourInput();
     } // focus last fragment on fill with now
 
@@ -142,9 +136,7 @@ const useTimeInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [minutes, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, minutesInterval, handleChangeMinutes, trackFocusMeridiemInput, trackFocusHourInput]);
   const onMinutesBlur = useCallback(e => {
-    var _e$target4;
-
-    const newMinutes = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
+    const newMinutes = e?.target?.value;
     if (newMinutes.length > 0 && newMinutes.length < 2) handleChangeMinutes(prependStringWithPlaceHolders(newMinutes, 2), e, {
       isAutomaticFillTrigger: true
     });
@@ -153,13 +145,11 @@ const useTimeInputs = () => {
     trackFocusMeridiemInput();
   }, [trackFocusMeridiemInput]);
   const onMeridiemChange = useCallback(e => {
-    var _e$target5, _e$target5$value, _e$target5$value$toUp;
-
-    let newMeridiem = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$value = _e$target5.value) === null || _e$target5$value === void 0 ? void 0 : (_e$target5$value$toUp = _e$target5$value.toUpperCase) === null || _e$target5$value$toUp === void 0 ? void 0 : _e$target5$value$toUp.call(_e$target5$value); // if new value is length 1,
+    let newMeridiem = e?.target?.value?.toUpperCase?.(); // if new value is length 1,
     //   if previous value was empty, auto-complete
     //   if previous value was not empty, set to empty (regressive backspace)
 
-    if (newMeridiem.length === 1) if (meridiem === '') newMeridiem = "".concat(newMeridiem, "M");else newMeridiem = '';
+    if (newMeridiem.length === 1) if (meridiem === '') newMeridiem = `${newMeridiem}M`;else newMeridiem = '';
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
@@ -180,17 +170,15 @@ const useTimeInputs = () => {
     if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e); // regressive backspace functionality
 
     if (key === 'Backspace') {
-      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
+      if (meridiem?.length === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
     } // focus last fragment on fill with now
 
 
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput]);
   const onMeridiemBlur = useCallback(e => {
-    var _e$target6, _e$target6$value, _e$target6$value$toUp;
-
-    const newMeridiem = e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$value = _e$target6.value) === null || _e$target6$value === void 0 ? void 0 : (_e$target6$value$toUp = _e$target6$value.toUpperCase) === null || _e$target6$value$toUp === void 0 ? void 0 : _e$target6$value$toUp.call(_e$target6$value);
-    if (newMeridiem.length === 1) handleChangeMeridiem("".concat(newMeridiem, "M"), e, {
+    const newMeridiem = e?.target?.value?.toUpperCase?.();
+    if (newMeridiem.length === 1) handleChangeMeridiem(`${newMeridiem}M`, e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);

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';