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

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

@@ -4,12 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
-var DSButton = require('@elliemae/ds-basic/Button');
+var dsButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 /* eslint-disable max-lines */
 const ResettedInput = /*#__PURE__*/styled__default["default"].input.withConfig({
@@ -33,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
@@ -49,23 +45,21 @@ const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled__default["default"].div.
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
 const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-8"
-})(["position:relative;", " & > .em-ds-button--text:not([disabled]){height:26px;width:26px;&:focus{&:after{top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);}}}:before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], ({
+})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], ({
   isControllerOnly
 }) => isControllerOnly ? undefined : 'height: 26px;', ({
   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;}}"], ({
   theme
 }) => theme.colors.brand[700]);
-const StyledClearButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+const StyledClearButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
   componentId: "sc-1t4k08s-10"
-})(["height:26px;position:relative;visibility:", ";&.em-ds-button--m.em-ds-button--icon-only{width:27px;}&.em-ds-button--text:not([disabled]){&:focus{&:after{top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);}}}"], ({
+})(["height:26px;position:relative;visibility:", ";"], ({
   shouldDisplay
 }) => shouldDisplay ? 'visible' : 'hidden');
 

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

@@ -26,6 +26,7 @@ const HHInput = /*#__PURE__*/React__default["default"].memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef,
   autoFocusHourInput
 }) => {
@@ -48,7 +49,7 @@ const HHInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "hours input field",
+    "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');
@@ -29,6 +30,7 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef
 }) => {
   const validateOnChange = React.useCallback(e => {
@@ -49,7 +51,7 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "meridiem input field",
+    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
   });
 });

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

@@ -26,6 +26,7 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef
 }) => {
   const validateOnChange = React.useCallback(e => {
@@ -46,7 +47,7 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "minutes input field",
+    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
   });
 });

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

@@ -46,7 +46,8 @@ const TimeInputs = () => {
     hourInputRef,
     minutesInputRef,
     // secondsInputRef,
-    meridiemInputRef
+    meridiemInputRef,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: [config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth]
@@ -58,6 +59,7 @@ const TimeInputs = () => {
     onKeyDown: onHoursKeyDown,
     contextRef: hourInputRef,
     placeholder: "HH",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
     autoFocusHourInput: autoFocusHourInput
   })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledColonSeparator, {
     alignItems: "center"
@@ -68,7 +70,8 @@ const TimeInputs = () => {
     onFocus: onMeridiemFocus,
     onKeyDown: onMinutesKeyDown,
     contextRef: minutesInputRef,
-    placeholder: "MM"
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MeridiemInput.MeridiemInput, {
     value: meridiem,
     onChange: onMeridiemChange,
@@ -76,7 +79,8 @@ const TimeInputs = () => {
     onFocus: onMinutesFocus,
     onKeyDown: onMeridiemKeyDown,
     contextRef: meridiemInputRef,
-    placeholder: "AM"
+    placeholder: "AM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })));
 };
 

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

@@ -15,36 +15,23 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// our source of truth is either the time props or dateTime props
-// based on wheter it's a dateTime picker
-// or a time picker (it's time picker when hideDate is true)
-
-const useGetDestructuredTimeValues = ({
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
-  const timeStringFromProps = React.useMemo(() => isDateTimeSelector ? stringHelpers.dateTimeToTime(dateTime) : time, [time, dateTime, isDateTimeSelector]);
-  const deconstructedValues = React.useMemo(() => stringHelpers.deconstructTimeValues(timeStringFromProps), [timeStringFromProps]);
-  return deconstructedValues;
-};
-
 const useTimeInputs = () => {
   const {
     props: {
-      time,
-      dateTime,
       onHourChange: appOnHourChange,
       onMinuteChange: appOnMinuteChange,
       // onSecondsChange: appOnSecondsChange,
       onMeridiemChange: appOnMeridiemChange,
-      getIsDisabledTime
+      getIsDisabledTime,
+      minutesInterval
     },
+    hours,
+    minutes,
+    meridiem,
     hideDate,
     withAnyRightController,
     withAnyPicker,
     withClearBtn,
-    isDateTimeSelector,
     hourInputRef,
     minutesInputRef,
     // secondsInputRef,
@@ -56,16 +43,6 @@ const useTimeInputs = () => {
     handleChangeComposedTimeString,
     setLatestInteractionRegion
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const {
-    hours,
-    minutes,
-    // seconds,
-    meridiem
-  } = useGetDestructuredTimeValues({
-    time,
-    dateTime,
-    isDateTimeSelector
-  });
   const setLatestInteractionRegionTimeInputs = React.useCallback(() => {
     setLatestInteractionRegion('time-inputs');
   }, [setLatestInteractionRegion]);
@@ -125,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]);
@@ -185,11 +162,11 @@ const useTimeInputs = () => {
       const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
       const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
       let newMinutes;
-      if (key === 'ArrowUp') newMinutes = minutesInteger + 1 <= 59 ? minutesInteger + 1 : minutesInteger;else newMinutes = minutesInteger - 1 > 0 ? minutesInteger - 1 : 0;
-      newMinutes = stringHelpers.prependStringWithPlaceHolders(`${newMinutes}`, 2);
+      if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
+      newMinutes = stringHelpers.prependStringWithPlaceHolders("".concat(newMinutes), 2);
       handleChangeMinutes(newMinutes, e);
     }
-  }, [onHomeKeyDown, onEndKeyDown, handleChangeMinutes, minutes]);
+  }, [onHomeKeyDown, onEndKeyDown, minutes, minutesInterval, handleChangeMinutes]);
   const onMinutesBlur = React.useCallback(e => {
     var _e$target4;
 
@@ -288,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) {
@@ -314,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/constants.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const announcableCardinalDays = {
+  1: 'first',
+  2: 'second',
+  3: 'third',
+  4: 'fourth',
+  5: 'fifth',
+  6: 'sixth',
+  7: 'seventh',
+  8: 'eighth',
+  9: 'ninth',
+  10: 'tenth',
+  11: 'eleventh',
+  12: 'twelfth',
+  13: 'thirteenth',
+  14: 'fourteenth',
+  15: 'fifteenth',
+  16: 'sixteenth',
+  17: 'seventeenth',
+  18: 'eighteenth',
+  19: 'ninteenth',
+  20: 'twentieth',
+  21: 'twentie first',
+  22: 'twentie second',
+  23: 'twentie third',
+  24: 'twentie fourth',
+  25: 'twentie fifth',
+  26: 'twentie sixth',
+  27: 'twentie seventh',
+  28: 'twentie eighth',
+  29: 'twentie ninth',
+  30: 'thirtieth',
+  31: 'thirty first'
+};
+
+exports.announcableCardinalDays = announcableCardinalDays;
+exports.monthNames = monthNames;
+exports.weekDays = weekDays;

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 monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 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 {
@@ -206,7 +206,7 @@ const getDayFromDateString = dateString => {
   if (monthNum !== -1 && dayNum !== -1 && yearNum !== -1 && isValidDayForTheMonth(monthNum - 1, yearNum, dayNum)) return new Date(yearNum, monthNum - 1, dayNum);
   return null;
 };
-const getMonthNameByMonthNumber = monthNumber => monthNames[monthNumber];
+const getMonthNameByMonthNumber = monthNumber => constants.monthNames[monthNumber];
 const isSameDateMoment = (dateA, dateB) => {
   var _dateA$getTime, _dateB$getTime;
 

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

@@ -13,6 +13,6 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const getValidatioDateTimeStringMetaInfo = (dateString, timeString, validators) => _objectSpread(_objectSpread({}, dateHelpers.getValidationDateStringMetaInfo(dateString, validators.getIsOutOfRangeDay, validators.getIsDisabledDay)), timeHelpers.getValidationTimeStringMetaInfo(timeString, validators.getIsDisabledTime));
+const getValidationDateTimeStringMetaInfo = (dateString, timeString, validators) => _objectSpread(_objectSpread({}, dateHelpers.getValidationDateStringMetaInfo(dateString, validators.getIsOutOfRangeDay, validators.getIsDisabledDay)), timeHelpers.getValidationTimeStringMetaInfo(timeString, validators.getIsDisabledTime));
 
-exports.getValidatioDateTimeStringMetaInfo = getValidatioDateTimeStringMetaInfo;
+exports.getValidationDateTimeStringMetaInfo = getValidationDateTimeStringMetaInfo;

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,9 +2,13 @@
 
 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');
 
 /* eslint-disable max-lines */
+
 const prependStringWithPlaceHolders = (val, finalLength, placeholder = '0') => {
   if (val.length === finalLength) return val;
   const stringAsAnArray = val.split('').reverse();
@@ -23,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;
@@ -74,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;
@@ -82,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;
@@ -118,6 +122,18 @@ const isIncompleteString = (testString, placeholder = '_') => testString === ''
 const isEmptyDateStringMask = testString => testString === '__/__/____';
 const isEmptyTimeStringMask = testString => testString === '__:__ __';
 const isEmptyDateTimeStringMask = testString => testString === '__/__/____ __:__ __';
+const getAriaDayFromDateString = dateString => {
+  const {
+    month: monthString,
+    day: dayString,
+    year: yearString
+  } = deconstructValuesFromDateString(dateString);
+  const monthNum = numberHelpers.convertToPositiveNumberIfPossible(monthString);
+  const dayNum = numberHelpers.convertToPositiveNumberIfPossible(dayString);
+  const yearNum = numberHelpers.convertToPositiveNumberIfPossible(yearString);
+  if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';
+  return "".concat(constants.monthNames[monthNum - 1], " ").concat(constants.announcableCardinalDays[dayNum], " ").concat(yearNum);
+};
 
 exports.dateTimeToDate = dateTimeToDate;
 exports.dateTimeToTime = dateTimeToTime;
@@ -125,6 +141,7 @@ exports.deconstructTimeValues = deconstructTimeValues;
 exports.deconstructValuesFromDateString = deconstructValuesFromDateString;
 exports.deconstructValuesFromTimeString = deconstructValuesFromTimeString;
 exports.fillStringWithPlaceHolders = fillStringWithPlaceHolders;
+exports.getAriaDayFromDateString = getAriaDayFromDateString;
 exports.getFormattedDateString = getFormattedDateString;
 exports.getFormattedTimeString = getFormattedTimeString;
 exports.isEmptyDateStringMask = isEmptyDateStringMask;

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/cjs/index.js

@@ -29,7 +29,7 @@ exports.ControlledDateTimePickerDatatestid = ControlledDateTimePickerDatatestid.
 exports.CONTROLLED_DATE_TIME_PICKER_TYPES = ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES;
 exports.deconstructValuesFromDateString = stringHelpers.deconstructValuesFromDateString;
 exports.prependStringWithPlaceHolders = stringHelpers.prependStringWithPlaceHolders;
-exports.getValidatioDateTimeStringMetaInfo = dateTimeHelpers.getValidatioDateTimeStringMetaInfo;
+exports.getValidationDateTimeStringMetaInfo = dateTimeHelpers.getValidationDateTimeStringMetaInfo;
 exports.getDateStringFromDay = dateHelpers.getDateStringFromDay;
 exports.getDateValuesFromDate = dateHelpers.getDateValuesFromDate;
 exports.getDayFromDateString = dateHelpers.getDayFromDateString;

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