@elliemae/ds-controlled-form 2.3.0-next.18 → 2.3.0-next.19

package/esm/combobox/parts/styled.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+
+var _templateObject;
+const StyledA11ySelectedValues = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n"])));
+
+export { StyledA11ySelectedValues };

package/esm/{controlled-combobox → combobox}/react-desc-prop-types.js

@@ -9,26 +9,28 @@ import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function noop() {}
 const ComboboxPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
-  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
+  placeholder: PropTypes.string.description("input's placeholder value").defaultValue(''),
   options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of options').defaultValue([]),
-  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).description('Array of option or single option selected'),
+  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description('Array of option or single option selected'),
   disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
   hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
-  onChange: PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
-  onSelectAll: PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
+  onChange: PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue('() => {}'),
+  onSelectAll: PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue('() => {}'),
   onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
   onCreate: PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
   onClearAll: PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
-  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue(''),
-  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
+  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),
+  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),
+  onMenuClose: PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),
   inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
   menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
   menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
   withoutPortal: PropTypes.bool.description('Whether the combobox menu is rendered in a portal or not').defaultValue(false),
   zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),
-  innerRef: PropTypes.object.description('ref to the component s container')
+  innerRef: PropTypes.object.description('ref to the components container')
 });
 
-export { ComboboxPropTypes };
+export { ComboboxPropTypes, noop };

package/esm/combobox/sharedTypes.js

@@ -0,0 +1,5 @@
+import { MENU_OPTION_TYPES } from './constants.js';
+
+const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.separator;
+
+export { isSeparator };

package/esm/combobox/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,164 @@
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useCallback } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { getOptions, findInCircularList } from '../listHelper.js';
+import { INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
+
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      inline,
+      onSelectAll,
+      onCancel,
+      onKeyDown,
+      onChange,
+      onCreate,
+      options,
+      selectedValues,
+      onFilter,
+      withoutPortal
+    },
+    setShowPopover,
+    setInputValue,
+    inputValue,
+    showPopover,
+    focusOptionIdx,
+    setFocusOptionIdx,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef
+  } = useContext(ComboBoxContext);
+  const multiple = Array.isArray(selectedValues);
+  const selectableOptions = getOptions(options);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.dsId === focusOptionIdx);
+  const selectOption = useCallback(() => {
+    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
+
+    if (!selectedOption.disabled) {
+      if (onFilter) onFilter('');
+      setInputValue('');
+      onChange(selectedOption);
+      if (!multiple) setShowPopover(false);
+    }
+  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
+  const onInputKeyDown = useCallback(e => {
+    // =============================================================================
+    // CUSTOM KEYS
+    // =============================================================================
+    if (onKeyDown) onKeyDown(e, currentItem);
+
+    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+      setShowPopover(true);
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    if (e.key === 'Escape') {
+      if (onCancel) onCancel();
+
+      if (inputValue) {
+        if (onFilter) onFilter('');
+        setInputValue('');
+      }
+
+      if (!inline) setShowPopover(false);
+    } // =============================================================================
+    // ENTER KEY TO CREATE ELEMENTS
+    // =============================================================================
+
+
+    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
+      onCreate(inputValue);
+      if (onFilter) onFilter('');
+      setInputValue('');
+      return;
+    } // =============================================================================
+    // Enter and space on selection
+    // =============================================================================
+
+
+    if (e.key === 'Enter' || e.keyCode === 32 && e.altKey) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (focusOptionIdx !== '' && showPopover) {
+        selectOption();
+      }
+    }
+
+    if (e.key === 'Enter' && e.altKey) {
+      setShowPopover(false);
+    }
+
+    if (e.key === 'a' && e.ctrlKey && multiple) {
+      if (onSelectAll) onSelectAll();
+    } // =============================================================================
+    // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
+    // =============================================================================
+
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if ((showPopover || inline) && selectableOptions.length) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setFocusOptionIdx(options[nextItemIndex].dsId);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!selectableOptions.length) return;
+      const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+
+      if (showPopover || inline) {
+        setFocusOptionIdx(options[prevItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // BACKSPACE
+    // =============================================================================
+
+
+    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+      if (multiple && !inputValue) {
+        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
+      } else {
+        onChange(null);
+      }
+
+      if (onFilter) onFilter('');
+    }
+
+    if (e.key === 'Tab' && !inline && !withoutPortal) {
+      var _selectAllCheckboxRef;
+
+      const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
+
+      if (element) {
+        e.preventDefault();
+        element.focus();
+      }
+    } // waiting for validation from ux
+    // if (e.key === 'Tab' && multiple) {
+    // }
+
+  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  return {
+    onInputKeyDown
+  };
+};
+
+export { useKeyboardNavigation };

package/esm/{controlled-combobox → combobox}/utils/listHelper.js

@@ -3,9 +3,10 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
+import { MENU_OPTION_TYPES } from '../constants.js';
 
-const getSelectableOptions = options => options.filter(option => option.type === 'option' && !option.disabled);
-const getOptions = options => options.filter(option => option.type === 'option');
+const getSelectableOptions = options => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);
+const getOptions = options => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION);
 const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = value => Array.isArray(value);
 const isSelected = (value, activeOption) => {
@@ -20,7 +21,7 @@ const isSelected = (value, activeOption) => {
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
-  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+  for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
     if (criteria(list[i])) return i;
   }
 

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

@@ -6,11 +6,11 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 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 '../../date-time-picker/ControlledDateTimePicker.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/es.string.replace.js';
-import { getDayFromDateString } from '../../controlled-date-time-picker/utils/dateHelpers.js';
+import { getDayFromDateString } from '../../date-time-picker/utils/dateHelpers.js';
 
 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; }
 

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

@@ -1,7 +1,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 { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDateTimePicker.js';
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 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';

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

@@ -20,7 +20,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-e4pfvj-0"
+  componentId: "sc-1mar2a9-0"
 })(["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;"], _ref => {
   let {
     isControllerOnly

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

@@ -1,8 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 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 { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDateTimePicker.js';
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 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';

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

@@ -1,8 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 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 { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDateTimePicker.js';
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 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';

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Pickers/Calendar/Styleds.js

@@ -43,7 +43,7 @@ const backgroundDateRange = {
   })
 };
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-18gg4kd-0"
+  componentId: "sc-1vlmm1g-0"
 })(["color:", ";width:26px;height:26px;"], _ref7 => {
   let {
     theme
@@ -51,7 +51,7 @@ const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand['600'];
 });
 const StyledShadowWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-18gg4kd-1"
+  componentId: "sc-1vlmm1g-1"
 })(["", ""], _ref8 => {
   let {
     isControllerOnly
@@ -59,7 +59,7 @@ const StyledShadowWrapper = /*#__PURE__*/styled.div.withConfig({
   return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
 });
 const StyledCalendarWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-18gg4kd-2"
+  componentId: "sc-1vlmm1g-2"
 })(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], _ref9 => {
   let {
     theme
@@ -67,7 +67,7 @@ const StyledCalendarWrapper = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral['000'];
 });
 const StyledHeader = /*#__PURE__*/styled.section.withConfig({
-  componentId: "sc-18gg4kd-3"
+  componentId: "sc-1vlmm1g-3"
 })(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], _ref10 => {
   let {
     theme
@@ -80,7 +80,7 @@ const StyledHeader = /*#__PURE__*/styled.section.withConfig({
   return theme.colors.neutral['050'];
 });
 const StyledHeaderButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-18gg4kd-4"
+  componentId: "sc-1vlmm1g-4"
 })(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], _ref12 => {
   let {
     theme
@@ -93,7 +93,7 @@ const StyledHeaderButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand[200];
 });
 const StyledBody = /*#__PURE__*/styled.section.withConfig({
-  componentId: "sc-18gg4kd-5"
+  componentId: "sc-1vlmm1g-5"
 })(["padding:", ";"], _ref14 => {
   let {
     theme
@@ -101,7 +101,7 @@ const StyledBody = /*#__PURE__*/styled.section.withConfig({
   return theme.space.xxxs;
 });
 const StyledDayBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-18gg4kd-6"
+  componentId: "sc-1vlmm1g-6"
 })(["height:32px;width:32px;border-radius:50%;position:relative;border-width:2px;border-style:solid;border-color:transparent;line-height:1;color:", ";&:hover{cursor:pointer;color:", ";background-color:", ";}&:focus{", "}"], _ref15 => {
   let {
     theme
@@ -119,7 +119,7 @@ const StyledDayBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand[200];
 }, focusBorder);
 const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-18gg4kd-7"
+  componentId: "sc-1vlmm1g-7"
 })(["font-size:", ";text-align:center;", ";", ";.dayWrapper.selectedDay,.dayWrapper.startRangeDay,.dayWrapper.endRangeDay{", "{color:", ";font-weight:", ";}&:not(.disabledDay),&:not(.outOfRangeDay){", "{background-color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}}&.focusedDay{", "{color:", ";border-color:", ";}}&.outOfRangeDay.focusedDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{", "{color:", ";", " &:before{background-color:", ";}}&.focusedDay{", "{&:after{border:2px solid ", ";}}}}.dayWrapper.focusedDay{", "{", " color:", ";&:after{border:2px solid ", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.notCurrentMonth{", "{color:", ";}&.focusedDay{", "{color:", ";}&.disabledDay,&.outOfRangeDay{", "{color:", ";}&.inRangeDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}}&.selectedDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}.dayWrapper.inRangeDay{", " &.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}&.focusedDay{", "{border-color:", ";}}}}.dayWrapper.startRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay.startRangeDay{background-color:transparent;box-shadow:none;}"], _ref18 => {
   let {
     theme
@@ -298,7 +298,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
   return theme.colors.neutral['000'];
 });
 const StyledWeekDaysHeaderItem = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-18gg4kd-8"
+  componentId: "sc-1vlmm1g-8"
 })(["width:", ";min-width:", ";"], _ref53 => {
   let {
     theme
@@ -311,7 +311,7 @@ const StyledWeekDaysHeaderItem = /*#__PURE__*/styled.div.withConfig({
   return theme.space.s;
 });
 const CalendarFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-18gg4kd-9"
+  componentId: "sc-1vlmm1g-9"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref55 => {
   let {
     theme

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Pickers/CalendarWithTimeWheel/Styleds.js

@@ -3,7 +3,7 @@ import { DSButtonV2 } from '@elliemae/ds-button';
 import { CalendarContent } from '../Calendar/CalendarContent.js';
 
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-h2xj8r-0"
+  componentId: "sc-eqspen-0"
 })(["color:", ";width:26px;height:26px;"], _ref => {
   let {
     theme
@@ -11,7 +11,7 @@ const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand['600'];
 });
 const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-h2xj8r-1"
+  componentId: "sc-eqspen-1"
 })(["background:", ";", " display:grid;grid-template-columns:260px 192px;grid-template-rows:1fr;column-gap:0;& > div:last-of-type{box-shadow:-1px 0 0 0 ", ";margin-left:1px;}"], _ref2 => {
   let {
     theme
@@ -29,10 +29,10 @@ const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral[200];
 });
 const StyledCalendar = /*#__PURE__*/styled(CalendarContent).withConfig({
-  componentId: "sc-h2xj8r-2"
+  componentId: "sc-eqspen-2"
 })(["box-shadow:none;"]);
 const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-h2xj8r-3"
+  componentId: "sc-eqspen-3"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;grid-column:1/3;"], _ref5 => {
   let {
     theme