@elliemae/ds-controlled-form 2.0.0-alpha.10 → 2.0.0-alpha.11

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js

@@ -30,9 +30,9 @@ const MeridiemList = () => {
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const isAmCurrent = !meridiem || meridiem === 'AM';
   const isPmCurrent = meridiem === 'PM';
-  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;
-  const amTimeString = `${hourMinuteString} AM`;
-  const pmTimeString = `${hourMinuteString} PM`;
+  const hourMinuteString = "".concat(hours || '01', ":").concat(minutes || '00');
+  const amTimeString = "".concat(hourMinuteString, " AM");
+  const pmTimeString = "".concat(hourMinuteString, " PM");
   const isDisabledAm = getIsDisabledTime(amTimeString);
   const isDisabledPm = getIsDisabledTime(pmTimeString);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
@@ -52,7 +52,7 @@ const MeridiemList = () => {
     isCurrentListItem: isAmCurrent,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     selected: meridiem === 'AM',
-    "aria-label": `AM ${isAmCurrent ? 'selected' : ''}`,
+    "aria-label": "AM ".concat(isAmCurrent ? 'selected' : ''),
     "aria-disabled": isDisabledAm,
     isDisabled: isDisabledAm,
     buttonType: "raw",
@@ -71,7 +71,7 @@ const MeridiemList = () => {
   }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimeBtn, {
     isCurrentListItem: isPmCurrent,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
-    "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
+    "aria-label": "PM ".concat(isPmCurrent ? 'selected' : ''),
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
     buttonType: "raw",

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/MinutesList.js

@@ -50,9 +50,9 @@ const MinutesList = () => {
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
-    const key = `timewheel-minutes-${minutesString}`;
+    const key = "timewheel-minutes-".concat(minutesString);
     if (!minutesString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
-    const currMinutesTimeString = `${hours || '01'}:${minutesString} ${meridiem || 'AM'}`;
+    const currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !minutes && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -68,7 +68,7 @@ const MinutesList = () => {
       isCurrentListItem: isCurrentListItem,
       "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
-      "aria-label": `${minutesString} minutes`,
+      "aria-label": "".concat(minutesString, " minutes"),
       "aria-disabled": isDisabled,
       isDisabled: isDisabled,
       buttonType: "raw",
@@ -79,7 +79,7 @@ const MinutesList = () => {
       "aria-valuemax": "59",
       "aria-valuemin": "0",
       "aria-valuenow": currMinuteNum,
-      "aria-valuetext": `${minutesString} minutes`
+      "aria-valuetext": "".concat(minutesString, " minutes")
     }, btnProps), {}, {
       children: minutesString
     })));

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/SecondsList.js

@@ -51,7 +51,7 @@ const SecondsList = () => {
     innerRef: prevSecondsBtnRef,
     tabIndex: -1
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](ChevronSmallUp__default["default"], {})))), visibleSeconds.map(secondsString => {
-    const key = `timewheel-seconds-${secondsString}`;
+    const key = "timewheel-seconds-".concat(secondsString);
     if (!secondsString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
     const isEmptyCurrValueCurrentListItem = !seconds && numberHelpers.convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || seconds === secondsString;
@@ -63,7 +63,7 @@ const SecondsList = () => {
     return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
     }, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({
-      "aria-label": `set ${secondsString} seconds`,
+      "aria-label": "set ".concat(secondsString, " seconds"),
       buttonType: "raw",
       size: "l",
       variant: DSButton.BUTTON_VARIANT.DEFAULT,

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.js

@@ -28,9 +28,7 @@ const StyledTimePickerContainer = /*#__PURE__*/styled__default["default"].div.wi
 })(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], ({
   showShadow,
   isControllerOnly
-}) => showShadow && !isControllerOnly ? `
-  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
-  ` : '');
+}) => showShadow && !isControllerOnly ? "\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  " : '');
 const StyledTimePickerHead = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1nsw31l-3"
 })(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], ({
@@ -76,69 +74,12 @@ const StyledTimeBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV
   theme,
   isDisabled,
   selected
-}) => isDisabled ? `
-    color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-    cursor: not-allowed;
-    background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-    font-weight: ${selected ? theme.fontWeights.semibold : ''};
-
-    &:before {
-      cursor: not-allowed;
-      position: absolute;
-      content: '';
-      top: 47%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-      transform: rotate(45deg);
-      pointer-events: none;
-    }
-    &:hover {
-      color:${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-      background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-    }
-  ` : `
-      ${selected ? `
-      color: ${theme.colors.neutral['000']};
-      background-color:${theme.colors.brand[700]};
-      font-weight: ${theme.fontWeights.semibold};
-      &:hover {
-        color:${theme.colors.neutral['000']};
-        background-color:${theme.colors.brand[700]};
-      }
-      ` : `
-      color: ${theme.colors.neutral[800]};
-      background-color:${theme.colors.neutral['000']};
-      `}
-  `, ({
+}) => isDisabled ? "\n    color: ".concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n    cursor: not-allowed;\n    background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    font-weight: ").concat(selected ? theme.fontWeights.semibold : '', ";\n\n    &:before {\n      cursor: not-allowed;\n      position: absolute;\n      content: '';\n      top: 47%;\n      left: 0;\n      width: 100%;\n      height: 1px;\n      background-color: ").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      transform: rotate(45deg);\n      pointer-events: none;\n    }\n    &:hover {\n      color:").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    }\n  ") : "\n      ".concat(selected ? "\n      color: ".concat(theme.colors.neutral['000'], ";\n      background-color:").concat(theme.colors.brand[700], ";\n      font-weight: ").concat(theme.fontWeights.semibold, ";\n      &:hover {\n        color:").concat(theme.colors.neutral['000'], ";\n        background-color:").concat(theme.colors.brand[700], ";\n      }\n      ") : "\n      color: ".concat(theme.colors.neutral[800], ";\n      background-color:").concat(theme.colors.neutral['000'], ";\n      "), "\n  "), ({
   theme,
   isCurrentListItem,
   selected,
   isDisabled
-}) => isCurrentListItem && !selected ? `
-        color: ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-        &:after {
-          position: absolute;
-          content: '';
-          border-radius: 50%;
-          top: -2px;
-          left: -2px;
-          width: calc(100% + 4px);
-          height: calc(100% + 4px);
-          border: 2px solid ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-          pointer-events: none;
-        }
-        ${isDisabled ? `
-          color: ${theme.colors.danger[900]};
-          &:hover {
-            color:${theme.colors.danger[900]};
-          }          
-          &:before{
-            background-color: ${theme.colors.danger[900]};
-          }
-        ` : ''}
-        ` : '');
+}) => isCurrentListItem && !selected ? "\n        color: ".concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n        &:after {\n          position: absolute;\n          content: '';\n          border-radius: 50%;\n          top: -2px;\n          left: -2px;\n          width: calc(100% + 4px);\n          height: calc(100% + 4px);\n          border: 2px solid ").concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n          pointer-events: none;\n        }\n        ").concat(isDisabled ? "\n          color: ".concat(theme.colors.danger[900], ";\n          &:hover {\n            color:").concat(theme.colors.danger[900], ";\n          }          \n          &:before{\n            background-color: ").concat(theme.colors.danger[900], ";\n          }\n        ") : '', "\n        ") : '');
 const StyledWheelListItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1nsw31l-7"
 })(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js

@@ -31,7 +31,7 @@ const TimeWheelContent = /*#__PURE__*/React__default["default"].memo(({
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, `${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "H"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "M"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HoursList.HoursList, {}), /*#__PURE__*/_jsx__default["default"](MinutesList.MinutesList, {}), /*#__PURE__*/_jsx__default["default"](MeridiemList.MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx__default["default"](TimeWheelFooter.TimeWheelFooter, {})));
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, "".concat(hours || '__', ":").concat(minutes || '__', " ").concat(meridiem || '__')), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "H"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "M"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HoursList.HoursList, {}), /*#__PURE__*/_jsx__default["default"](MinutesList.MinutesList, {}), /*#__PURE__*/_jsx__default["default"](MeridiemList.MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx__default["default"](TimeWheelFooter.TimeWheelFooter, {})));
 });
 
 exports.TimeWheelContent = TimeWheelContent;

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -26,7 +26,7 @@ const TimeWheelIconTrigger = () => {
     ariaCurrentValueForInputs
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](dsButton.DSButtonV2, {
-    "aria-label": `time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
     size: dsButton.BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js

@@ -15,7 +15,7 @@ const hoursStartPositionOffset = 1; // if array start from 01, this is 1, if sta
 
 const getTotalMinuteListWithStep = (step = 1) => {
   const length = Math.ceil(60 / step);
-  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders(`${i * step}`, 2));
+  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders("".concat(i * step), 2));
 };
 
 const useCurrentDisplayedWheelsLogic = ({
@@ -94,7 +94,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeHours]);
   const handleChangeCurrHour = React.useCallback((offset, e) => {
     const newH = currHourNum + offset;
-    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders(`${newH}`, 2), e);
+    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders("".concat(newH), 2), e);
   }, [currHourNum, handleChangeHours]);
   const handlePrevHour = React.useCallback(e => {
     handleChangeCurrHour(-1, e);
@@ -107,7 +107,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeMinutes]);
   const handleChangeCurrMinute = React.useCallback((offset, e) => {
     const newM = currMinuteNum + offset;
-    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders(`${newM}`, 2), e);
+    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders("".concat(newM), 2), e);
   }, [currMinuteNum, handleChangeMinutes]);
   const handlePrevMinute = React.useCallback(e => {
     handleChangeCurrMinute(-minutesInterval, e);

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');

package/cjs/controlled-date-time-picker/parts/Styleds.js

@@ -32,10 +32,7 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.G
   theme,
   isControllerOnly,
   hasError
-}) => isControllerOnly ? undefined : `
-  height: 28px;    
-  border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]};
-  `, ({
+}) => isControllerOnly ? undefined : "\n  height: 28px;    \n  border: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], ";\n  "), ({
   justPicker
 }) => justPicker ? '0' : '2px', ({
   withAnyPicker
@@ -54,9 +51,7 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default["default"](ds
   theme,
   isControllerOnly,
   hasError
-}) => isControllerOnly ? undefined : `
-    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}
-    `);
+}) => isControllerOnly ? undefined : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    "));
 const StyledFocusWithIn = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-9"
 })(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], ({

package/cjs/controlled-date-time-picker/parts/TimeInputs/HHInput.js

@@ -49,7 +49,7 @@ const HHInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
+    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR
   });
 });

package/cjs/controlled-date-time-picker/parts/TimeInputs/MeridiemInput.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Styleds = require('../Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
@@ -50,7 +51,7 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
+    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
   });
 });

package/cjs/controlled-date-time-picker/parts/TimeInputs/MinutesInput.js

@@ -47,7 +47,7 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
+    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
   });
 });

package/cjs/controlled-date-time-picker/parts/TimeInputs/useTimeInputs.js

@@ -102,7 +102,7 @@ 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 = stringHelpers.prependStringWithPlaceHolders(`${newHours}`, 2);
+      newHours = stringHelpers.prependStringWithPlaceHolders("".concat(newHours), 2);
       handleChangeHours(newHours, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeHours, hours]);
@@ -163,7 +163,7 @@ 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 = stringHelpers.prependStringWithPlaceHolders(`${newMinutes}`, 2);
+      newMinutes = stringHelpers.prependStringWithPlaceHolders("".concat(newMinutes), 2);
       handleChangeMinutes(newMinutes, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, minutes, minutesInterval, handleChangeMinutes]);
@@ -265,7 +265,7 @@ const useTimeInputs = () => {
     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 (newMeridiem.length === 1) newMeridiem = `${newMeridiem}M`;
+    if (newMeridiem.length === 1) newMeridiem = "".concat(newMeridiem, "M");
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
@@ -291,7 +291,7 @@ const useTimeInputs = () => {
     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(`${newMeridiem}M`, e, {
+    if (newMeridiem.length === 1) handleChangeMeridiem("".concat(newMeridiem, "M"), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);

package/cjs/controlled-date-time-picker/utils/dateHelpers.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var constants = require('./constants.js');
 var stringHelpers = require('./stringHelpers.js');
 var numberHelpers = require('./numberHelpers.js');
 
-/* eslint-disable max-lines */
 const getLastDayOfMonth = (month, year) => new Date(year, month + 1, 0);
 const isValidDayForTheMonth = (month, year, day) => {
   var _Date, _Date$getMonth;
@@ -188,11 +188,11 @@ const getDateValuesFromDate = day => {
   };
 };
 const getDateStringFromDay = day => {
-  const monthFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
+  const monthFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
 
-  const dayFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getDate()}`, 2);
-  const yearFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getFullYear()}`, 4);
-  return `${monthFromDay}/${dayFromDay}/${yearFromDay}`;
+  const dayFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getDate()), 2);
+  const yearFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
+  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
 };
 const getDayFromDateString = dateString => {
   const {

package/cjs/controlled-date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js

@@ -14,7 +14,7 @@ const useGetMonthYearFromDateStringOrEmptyStartingMonth = () => {
     }
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return React.useMemo(() => {
-    const emptyPickerStartingMonthDefault = `${new Date().getMonth() + 1}/__/${new Date().getFullYear()}`;
+    const emptyPickerStartingMonthDefault = "".concat(new Date().getMonth() + 1, "/__/").concat(new Date().getFullYear());
     const {
       month: stringMonthVal,
       year: stringYearVal

package/cjs/controlled-date-time-picker/utils/stringHelpers.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.string.replace.js');
 var constants = require('./constants.js');
 var numberHelpers = require('./numberHelpers.js');
@@ -26,7 +27,7 @@ const getFormattedDateString = ({
   const finalMonth = fillStringWithPlaceHolders(month, 2);
   const finalDay = fillStringWithPlaceHolders(day, 2);
   const finalYear = fillStringWithPlaceHolders(year, 4);
-  return `${finalMonth}/${finalDay}/${finalYear}`;
+  return "".concat(finalMonth, "/").concat(finalDay, "/").concat(finalYear);
 };
 const dateTimeToDate = dateTime => {
   var _dateTime$split, _dateTime$split$call;
@@ -77,7 +78,7 @@ const getFormattedTimeString = ({
 
   const finalMeridiem = fillStringWithPlaceHolders(meridiem, 2); // return `${finalHour}:${finalMinutes}:${finalSeconds} ${finalMeridiem}`;// <-- seconds format
 
-  return `${finalHour}:${finalMinutes} ${finalMeridiem}`;
+  return "".concat(finalHour, ":").concat(finalMinutes, " ").concat(finalMeridiem);
 };
 const dateTimeToTime = dateTime => {
   var _dateTime$split2;
@@ -85,7 +86,7 @@ const dateTimeToTime = dateTime => {
   const [// eslint-disable-next-line @typescript-eslint/no-unused-vars
   _date, // timeNumbers = '__:__:__', // <-- seconds format
   timeNumbers = '__:__', timeMeridiem = '__'] = dateTime === null || dateTime === void 0 ? void 0 : (_dateTime$split2 = dateTime.split) === null || _dateTime$split2 === void 0 ? void 0 : _dateTime$split2.call(dateTime, ' ');
-  return `${timeNumbers} ${timeMeridiem}`;
+  return "".concat(timeNumbers, " ").concat(timeMeridiem);
 };
 const deconstructTimeValues = timeString => {
   var _timeString$split, _dirtyTimes$split;
@@ -131,7 +132,7 @@ const getAriaDayFromDateString = dateString => {
   const dayNum = numberHelpers.convertToPositiveNumberIfPossible(dayString);
   const yearNum = numberHelpers.convertToPositiveNumberIfPossible(yearString);
   if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';
-  return `${constants.monthNames[monthNum - 1]} ${constants.announcableCardinalDays[dayNum]} ${yearNum}`;
+  return "".concat(constants.monthNames[monthNum - 1], " ").concat(constants.announcableCardinalDays[dayNum], " ").concat(yearNum);
 };
 
 exports.dateTimeToDate = dateTimeToDate;

package/cjs/controlled-toggle/ControlledToggle.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var uid = require('uid');
 var reactDesc = require('react-desc');
@@ -93,7 +94,7 @@ const DSControlledToggle = ({
       active: active,
       disabled: disabled,
       htmlFor: id ? undefined : instanceUID,
-      as: id ? 'p' : 'label'
+      as: id ? 'span' : 'label'
     }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCircle, {
       checked: checked,
       size: size,

package/cjs/controlled-toggle/styles.js

@@ -25,7 +25,7 @@ const StyledLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["width:", ";height:", ";z-index:2;outline:none;border-radius:", ";"], ({
   width,
   size
-}) => `calc(${width}px + ${styleHelpers.margin[size]})`, ({
+}) => "calc(".concat(width, "px + ").concat(styleHelpers.margin[size], ")"), ({
   size
 }) => styleHelpers.labelHeight[size], ({
   size
@@ -36,16 +36,14 @@ const StyledVisibleContent = /*#__PURE__*/styled__default["default"].label.withC
   checked
 }) => checked ? 'row-reverse' : 'row', ({
   size
-}) => `calc(${styleHelpers.labelHeight[size]} - 4px)`, ({
+}) => "calc(".concat(styleHelpers.labelHeight[size], " - 4px)"), ({
   theme,
   size,
   checked,
   disabled,
   readOnly,
   active
-}) => size === 's' ? `1px solid ${styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme)}` : `
-    2px solid ${styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme)}
-    `, ({
+}) => size === 's' ? "1px solid ".concat(styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme)) : "\n    2px solid ".concat(styleHelpers.handleBorderColor(checked, disabled, readOnly, active, theme), "\n    "), ({
   theme,
   checked,
   disabled,
@@ -80,10 +78,10 @@ const StyledText = /*#__PURE__*/styled__default["default"].div.withConfig({
 }) => disabled ? '#5c6574' : theme.colors.neutral['000'], ({
   isLongerTextRendering,
   checked
-}) => isLongerTextRendering && checked ? `margin-left: 6px;` : undefined, ({
+}) => isLongerTextRendering && checked ? "margin-left: 6px;" : undefined, ({
   isLongerTextRendering,
   checked
-}) => isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined);
+}) => isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined);
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
   componentId: "sc-v733m4-5"
 })(["position:absolute;opacity:0;z-index:20;height:100%;width:100%;cursor:pointer;"]);

package/esm/controlled-checkbox/config/useValidateProps.js

@@ -1,20 +1,18 @@
 import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 
 const throwError = message => {
-  throw new Error(`DSControlledCheckbox:: ${message}
-  `);
+  throw new Error("DSControlledCheckbox:: ".concat(message, "\n  "));
 };
 
 const useValidateProps = (props, schema) => {
   useValidateTypescriptPropTypes(props, schema);
 
   if (typeof props.label === 'undefined' && typeof props.ariaLabel === 'undefined') {
-    throwError(`Please provide a label or ariaLabel property to use this component.`);
+    throwError("Please provide a label or ariaLabel property to use this component.");
   }
 
   if (props.checked === 'mixed' && typeof props.ariaControls === 'undefined') {
-    throwError(`Please provide an ariaControls property to use a checkbox mixed state. 
-      This property must be a string containing all the ids that this mixed checkbox is controlling.`);
+    throwError("Please provide an ariaControls property to use a checkbox mixed state. \n      This property must be a string containing all the ids that this mixed checkbox is controlling.");
   }
 };
 

package/esm/controlled-checkbox/styles.js

@@ -28,7 +28,7 @@ const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
   theme,
   hasError,
   disabled
-}) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[600]} ` : undefined, ({
+}) => !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined, ({
   theme,
   checked,
   disabled,
@@ -43,7 +43,7 @@ const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
   hasError,
   disabled,
   readOnly
-}) => !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined);
+}) => !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined);
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-349ih4-2"
 })(["&:hover{cursor:pointer;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);

package/esm/controlled-checkbox/utils/styleHelpers.js

@@ -18,29 +18,11 @@ const handleCheckMarkColor = ({
 };
 const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
   if (checked === 'mixed') {
-    return `&:before {
-      position: absolute;
-    content: '';
-    top: 6px;
-    left: 3px;
-    background: ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-    width: ${theme.space.xxs};
-    height: 2px;
-    }`;
+    return "&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n    width: ").concat(theme.space.xxs, ";\n    height: 2px;\n    }");
   }
 
   if (checked) {
-    return `&:before {
-      position: absolute;
-      content: '';
-          top: 3px;
-          left: 2px;
-          border-left: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          border-bottom: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          height: 5px;
-          width: 10px;
-          transform: rotate(-45deg);
-    }`;
+    return "&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }");
   }
 
   return undefined;

package/esm/controlled-date-range-picker/config/useRangePickerLogic.js

@@ -1,4 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import 'core-js/modules/es.string.replace.js';

package/esm/controlled-date-range-picker/parts/ControlledDateRangeCalendar.js

@@ -2,6 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';

package/esm/controlled-date-range-picker/parts/ControlledDateRangeContent.js

@@ -10,14 +10,18 @@ import { jsxs, Fragment } from 'react/jsx-runtime';
 var _ControlledDateRangeF, _ControlledDateRangeT, _ControlledDateRangeC;
 const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-e4pfvj-0"
-})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;gap:0px 8px;grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"]);
+})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], ({
+  isControllerOnly
+}) => isControllerOnly ? undefined : 'gap: 0px 8px;');
 const ControlledDateRangeContent = () => {
   const {
     withIcon,
     withInputs,
     isControllerOnly
   } = useContext(ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx(StyledWrapper, {}, void 0, withInputs ? /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/_jsx(StyledWrapper, {
+    isControllerOnly: isControllerOnly
+  }, void 0, withInputs ? /*#__PURE__*/jsxs(Fragment, {
     children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx(ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx(ControlledDateRangeToDate, {}))]
   }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx(ControlledDateRangeCalendar, {})) : null);
 };

package/esm/controlled-date-range-picker/parts/ControlledDateRangeFromDate.js

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 

package/esm/controlled-date-range-picker/parts/ControlledDateRangeToDate.js

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
 import '@babel/runtime/helpers/esm/defineProperty';