@elliemae/ds-controlled-form 2.4.2-rc.3 → 2.4.3-rc.0

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

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
@@ -29,9 +28,7 @@ const MeridiemInput = /*#__PURE__*/React.memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMeridiem(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMeridiem(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -45,13 +42,11 @@ const MeridiemInput = /*#__PURE__*/React.memo(_ref => {
     onKeyDown: onKeyDown,
     value: value,
     ref: DomElem => {
-      var _DomElem$focus;
-
       contextRef.current = DomElem;
-      if (isFocused) DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+      if (isFocused) DomElem?.focus?.();
     },
     placeholder: placeholder,
-    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
     disabled: disabled,
     "aria-disabled": disabled

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

@@ -25,9 +25,7 @@ const MinutesInput = /*#__PURE__*/React.memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMinute(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMinute(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -41,13 +39,11 @@ const MinutesInput = /*#__PURE__*/React.memo(_ref => {
     onKeyDown: onKeyDown,
     value: value,
     ref: DomElem => {
-      var _DomElem$focus;
-
       contextRef.current = DomElem;
-      if (isFocused) DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+      if (isFocused) DomElem?.focus?.();
     },
     placeholder: placeholder,
-    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
     disabled: disabled,
     "aria-disabled": disabled

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/InputGroup.js

@@ -6,10 +6,10 @@ 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 { useMemo } from 'react';
-import { describe, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { describe, useValidateTypescriptPropTypes, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { StyledContainer, StyledLeftAddon, StyledInput, StyledRightAddon } from './styled.js';
 import { propTypes } from './react-desc-prop-types.js';
-import { InputGroupDataTestIds } from './InputGroupDataTestIds.js';
+import { InputGroupDataTestIds } from './exported-related/data-test-ids.js';
 import { jsxs } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -24,6 +24,7 @@ const DSInputGroup = props => {
     rightAddon
   } = props;
   const globals = useGetGlobalAttributes(props);
+  const xstyledProps = useGetXstyledProps(props);
   const cols = useMemo(() => {
     if (leftAddon && rightAddon) {
       return ['max-content', 'auto', 'max-content'];
@@ -39,10 +40,10 @@ const DSInputGroup = props => {
 
     return ['auto'];
   }, [leftAddon, rightAddon]);
-  return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread(_objectSpread({
     cols: cols,
     "data-testid": InputGroupDataTestIds.CONTAINER
-  }, globals), {}, {
+  }, globals), xstyledProps), {}, {
     children: [leftAddon && /*#__PURE__*/_jsx(StyledLeftAddon, {
       "data-testid": InputGroupDataTestIds.LEFTADDON
     }, void 0, leftAddon), /*#__PURE__*/_jsx(StyledInput, {

package/esm/input-group/exported-related/data-test-ids.js

@@ -0,0 +1,8 @@
+const InputGroupDataTestIds = {
+  CONTAINER: 'ds-input-group-container',
+  LEFTADDON: 'ds-input-group-left-addon',
+  RIGHTADDON: 'ds-input-group-right-addon',
+  INPUTCONTAINER: 'ds-input-group-input-container'
+};
+
+export { InputGroupDataTestIds };

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

@@ -0,0 +1,2 @@
+export { InputGroupDataTestIds } from './data-test-ids.js';
+export { DSInputGroupName, DSInputGroupSlots } from './theming.js';

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

@@ -0,0 +1,8 @@
+const DSInputGroupName = 'ds-input-group';
+const DSInputGroupSlots = {
+  CONTAINER: 'root',
+  LEFT_ADDON: 'leftaddon',
+  RIGHT_ADDON: 'rightaddon'
+};
+
+export { DSInputGroupName, DSInputGroupSlots };

package/esm/input-group/styled.js

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

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

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

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

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

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

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