@elliemae/ds-controlled-form 2.0.0-alpha.7 → 2.0.0-next.1

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

@@ -1,7 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import ChevronSmallUp from '@elliemae/ds-icons/ChevronSmallUp';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
@@ -32,25 +31,23 @@ const MeridiemList = () => {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
     isDisabled: isDisabledAm,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM,
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM,
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     onKeyDown: handlePrevMeridiemBtnOnKeyDown,
     innerRef: prevMeridiemBtnRef,
     tabIndex: -1
-  })), meridiem === 'AM' || meridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), meridiem === 'AM' || meridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isAmCurrent
   }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
     isCurrentListItem: isAmCurrent,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'SELECTED_MERIDIEM' : 'MERIDIEM'],
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     selected: meridiem === 'AM',
     "aria-label": `AM ${isAmCurrent ? 'selected' : ''}`,
     "aria-disabled": isDisabledAm,
     isDisabled: isDisabledAm,
-    buttonType: "text",
-    labelText: "AM",
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     onKeyDown: isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
@@ -60,17 +57,16 @@ const MeridiemList = () => {
     "aria-valuemax": "1",
     "aria-valuemin": "0",
     "aria-valuenow": isPmCurrent ? '1' : '0',
-    "aria-valuetext": isPmCurrent ? 'PM' : 'AM'
-  })), /*#__PURE__*/_jsx(StyledWheelListItem, {
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem'
+  }, void 0, "AM")), /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
   }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
     isCurrentListItem: isPmCurrent,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'SELECTED_MERIDIEM' : 'MERIDIEM'],
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
-    buttonType: "text",
-    labelText: "PM",
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     onKeyDown: isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
@@ -80,20 +76,19 @@ const MeridiemList = () => {
     "aria-valuemax": "1",
     "aria-valuemin": "0",
     "aria-valuenow": isPmCurrent ? '1' : '0',
-    "aria-valuetext": isPmCurrent ? 'PM' : 'AM'
-  })), meridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem'
+  }, void 0, "PM")), meridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "set pm meridiem",
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM,
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM,
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     onKeyDown: handleNextMeridiemBtnOnKeyDown,
     innerRef: nextMeridiemBtnRef,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { MeridiemList, MeridiemList as default };

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

@@ -1,8 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import ChevronSmallUp from '@elliemae/ds-icons/ChevronSmallUp';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
@@ -34,14 +33,14 @@ const MinutesList = () => {
   } = useContext(TimeWheelContext);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+    buttonType: "raw",
     size: "m",
     onClick: handlePrevMinute,
     onKeyDown: handlePrevMinuteBtnOnKeyDown,
     innerRef: prevMinutesBtnRef,
-    tabIndex: -1
-  })), visibleMinutes.map(minutesString => {
+    tabIndex: -1,
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
     const key = `timewheel-minutes-${minutesString}`;
     if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
     const currMinutesTimeString = `${hours || '01'}:${minutesString} ${meridiem || 'AM'}`;
@@ -56,33 +55,35 @@ const MinutesList = () => {
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem,
       selected: convertToPositiveNumberIfPossible(minutesString) === currMinuteNum
-    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread({
+    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({
       isCurrentListItem: isCurrentListItem,
-      "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'SELECTED_MINUTE' : 'MINUTE'],
+      "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
       "aria-label": `${minutesString} minutes`,
       "aria-disabled": isDisabled,
       isDisabled: isDisabled,
-      buttonType: "text",
-      labelText: minutesString,
+      buttonType: "raw",
       size: "m",
       onClick: e => handleTimeWheelBtnChangeMinutes(minutesString, e),
       tabIndex: tabIndex,
       role: "spinbutton",
-      "aria-valuemax": "60",
-      "aria-valuemin": "00",
-      "aria-valuenow": minutesString
-    }, btnProps)));
+      "aria-valuemax": "59",
+      "aria-valuemin": "0",
+      "aria-valuenow": currMinuteNum,
+      "aria-valuetext": `${minutesString} minutes`
+    }, btnProps), {}, {
+      children: minutesString
+    })));
   }), /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    buttonType: "raw",
     size: "m",
     onClick: handleNextMinute,
     onKeyDown: handleNextMinuteBtnOnKeyDown,
     innerRef: nextMinutesBtnRef,
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { MinutesList, MinutesList as default };

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

@@ -31,15 +31,14 @@ const SecondsList = () => {
   } = useContext(TimeWheelContext);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+    buttonType: "raw",
     size: "m",
     variant: BUTTON_VARIANT.DEFAULT,
     onClick: handlePrevSecond,
     onKeyDown: handlePrevSecondBtnOnKeyDown,
     innerRef: prevSecondsBtnRef,
     tabIndex: -1
-  })), visibleSeconds.map(secondsString => {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
     const key = `timewheel-seconds-${secondsString}`;
     if (!secondsString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
     const isEmptyCurrValueCurrentListItem = !seconds && convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
@@ -51,26 +50,26 @@ const SecondsList = () => {
     };
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsx(DSButton, _objectSpread({
+    }, key, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
       "aria-label": `set ${secondsString} seconds`,
-      buttonType: "text",
-      labelText: secondsString,
+      buttonType: "raw",
       size: "l",
       variant: BUTTON_VARIANT.DEFAULT,
       onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
       tabIndex: tabIndex
-    }, btnProps)));
+    }, btnProps), {}, {
+      children: secondsString
+    })));
   }), /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    buttonType: "raw",
     size: "m",
     variant: BUTTON_VARIANT.DEFAULT,
     onClick: handleNextSecond,
     onKeyDown: handleNextSecondBtnOnKeyDown,
     innerRef: nextSecondsBtnRef,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { SecondsList, SecondsList as default };

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

@@ -1,17 +1,22 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
-import DSButton from '@elliemae/ds-basic/Button';
+import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
-const StyledWheelList = /*#__PURE__*/styled.ul.withConfig({
+const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-0"
-})(["width:100%;height:100%;list-style:none;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], ({
+})(["color:", ";width:26px;height:26px;"], ({
+  theme
+}) => theme.colors.brand['600']);
+const StyledWheelList = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1nsw31l-1"
+})(["width:100%;height:100%;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], ({
   theme
 }) => theme.colors.brand[700], ({
   theme
 }) => theme.colors.brand[700]);
 const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-1"
+  componentId: "sc-1nsw31l-2"
 })(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], ({
   showShadow,
   isControllerOnly
@@ -19,12 +24,12 @@ const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
   box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
   ` : '');
 const StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1nsw31l-2"
+  componentId: "sc-1nsw31l-3"
 })(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], ({
   theme
 }) => theme.colors.neutral['050']);
 const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-3"
+  componentId: "sc-1nsw31l-4"
 })(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], ({
   theme
 }) => theme.space.xl, ({
@@ -35,7 +40,7 @@ const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
   theme
 }) => theme.colors.neutral['050']);
 const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-4"
+  componentId: "sc-1nsw31l-5"
 })(["width:100%;background:", ";grid-area:VerticalWheelWrapper;display:grid;grid-template-columns:", " ", " ", ";grid-template-rows:100%;& ul:not(:last-child){position:relative;&:after{content:'';position:absolute;left:100%;top:5%;height:90%;width:1px;background:", ";}}"], ({
   theme
 }) => theme.colors.neutral['000'], ({
@@ -47,9 +52,9 @@ const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
 }) => theme.space.xl, ({
   theme
 }) => theme.colors.neutral[200]);
-const StyledTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-1nsw31l-5"
-})(["position:relative;height:", ";width:", ";min-width:", ";padding:0;border-radius:50%;font-weight:", ";color:", ";&.em-ds-button--text:not([disabled]){}&:focus:not([disabled]){&:after{border:none;}}", " ", ""], ({
+const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-1nsw31l-6"
+})(["position:relative;height:", ";width:", ";min-width:", ";padding:0;border-radius:50%;font-weight:", ";color:", ";&:focus:not([disabled]){&:after{border:none;}}", " ", ""], ({
   theme
 }) => theme.space.s, ({
   theme
@@ -81,22 +86,18 @@ const StyledTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
       transform: rotate(45deg);
       pointer-events: none;
     }
-    &.em-ds-button--text:not([disabled]) {
-      :hover {
-        color:${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-        background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-      }
+    &: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};
-      &.em-ds-button--text:not([disabled]) {
-        :hover {
-          color:${theme.colors.neutral['000']};
-          background-color:${theme.colors.brand[700]};
-        }
+      &:hover {
+        color:${theme.colors.neutral['000']};
+        background-color:${theme.colors.brand[700]};
       }
       ` : `
       color: ${theme.colors.neutral[800]};
@@ -122,22 +123,20 @@ const StyledTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
         }
         ${isDisabled ? `
           color: ${theme.colors.danger[900]};
-          &.em-ds-button--text:not([disabled]) {
-            :hover {
-              color:${theme.colors.danger[900]};
-            }
-          }
+          &:hover {
+            color:${theme.colors.danger[900]};
+          }          
           &:before{
             background-color: ${theme.colors.danger[900]};
           }
-        ` : undefined}
-        ` : undefined);
-const StyledWheelListItem = /*#__PURE__*/styled.li.withConfig({
-  componentId: "sc-1nsw31l-6"
-})(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
-const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
+        ` : ''}
+        ` : '');
+const StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-7"
-})(["height:", ";width:", ";min-width:", ";border-radius:50%;&.em-ds-button--text.em-ds-button--text:not([disabled]),&.em-ds-button--text.em-ds-button--variant-focus{&:focus{&:after{border:none;}}}"], ({
+})(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
+const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-1nsw31l-8"
+})(["height:", ";width:", ";min-width:", ";border-radius:50%;"], ({
   theme
 }) => theme.space.s, ({
   theme
@@ -145,7 +144,7 @@ const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
   theme
 }) => theme.space.s);
 const TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-1nsw31l-8"
+  componentId: "sc-1nsw31l-9"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], ({
   theme
 }) => theme.colors.neutral[300], ({
@@ -160,4 +159,4 @@ const TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
   theme
 }) => theme.fontSizes.microText[200]);
 
-export { StyledTimeBtn, StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelWrapper, StyledTimePickerWheelsLegend, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem, TimeWheelFooterMessage };
+export { StyledIconTriggerButton, StyledTimeBtn, StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelWrapper, StyledTimePickerWheelsLegend, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem, TimeWheelFooterMessage };

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

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelsLegend, StyledTimePickerWheelWrapper } from './Styleds.js';
 import { HoursList } from './HoursList.js';
 import { MinutesList } from './MinutesList.js';
@@ -19,7 +20,8 @@ const TimeWheelContent = /*#__PURE__*/React.memo(({
   } = useContext(TimeWheelContext);
   return /*#__PURE__*/_jsx(StyledTimePickerContainer, {
     showShadow: showShadow,
-    isControllerOnly: isControllerOnly
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
   }, void 0, /*#__PURE__*/_jsx(StyledTimePickerHead, {}, void 0, `${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx(StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx("div", {}, void 0, "H"), /*#__PURE__*/_jsx("div", {}, void 0, "M"), /*#__PURE__*/_jsx("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx(StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx(HoursList, {}), /*#__PURE__*/_jsx(MinutesList, {}), /*#__PURE__*/_jsx(MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx(TimeWheelFooter, {})));
 });
 

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.js

@@ -6,6 +6,7 @@ import { createRef, createContext } from 'react';
 const noop = () => {};
 
 const defaultTimePickerContext = {
+  ariaCurrentValueForInputs: '',
   tempTimeString: '',
   showTimePicker: false,
   setShowTimePicker: noop,

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

@@ -1,11 +1,11 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import DSButton from '@elliemae/ds-basic/Button';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';
 import RecentDocuments from '@elliemae/ds-icons/RecentDocuments';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 
-var _RecentDocuments;
 // this is particularly useful due to how usePopper needs to check the references
 // since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
 
@@ -13,18 +13,20 @@ const TimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleTimePicker,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs
   } = useContext(TimeWheelContext);
-  return useMemo(() => /*#__PURE__*/_jsx(DSButton, {
-    "aria-label": "time picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {})),
-    size: "m",
+  return useMemo(() => /*#__PURE__*/_jsx(DSButtonV2, {
+    "aria-label": `time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
+  }, void 0, /*#__PURE__*/_jsx(RecentDocuments, {
+    color: DSIconColors.PRIMARY
+  })), [ariaCurrentValueForInputs, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 
 export { TimeWheelIconTrigger };

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.js

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { TimeWheelContent } from './TimeWheelContent.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -30,6 +31,7 @@ const TimeWheelWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
     children: [_TimeWheelContent2 || (_TimeWheelContent2 = /*#__PURE__*/_jsx(TimeWheelContent, {
       showShadow: true
     })), /*#__PURE__*/jsx("div", {

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/useConfigTimePickerCTX.js

@@ -31,7 +31,8 @@ const useConfigTimePickerCTX = () => {
     nextMeridiemBtnRef,
     isControllerOnly,
     isWithCalendarToo,
-    autoFocusHourTimeWheel
+    autoFocusHourTimeWheel,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   const {
     currHourNum,
@@ -172,8 +173,9 @@ const useConfigTimePickerCTX = () => {
     prevMeridiemBtnRef,
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
-    getIsDisabledTime
-  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime]);
+    getIsDisabledTime,
+    ariaCurrentValueForInputs
+  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime, ariaCurrentValueForInputs]);
 };
 
 export { useConfigTimePickerCTX };

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
-import DSButton from '@elliemae/ds-basic/Button';
+import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
 const ResettedInput = /*#__PURE__*/styled.input.withConfig({
@@ -40,7 +40,7 @@ const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
 })(["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(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,
@@ -54,9 +54,9 @@ const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
 })(["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(DSButton).withConfig({
+const StyledClearButton = /*#__PURE__*/styled(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/esm/controlled-date-time-picker/parts/TimeInputs/HHInput.js

@@ -18,6 +18,7 @@ const HHInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef,
   autoFocusHourInput
 }) => {
@@ -40,7 +41,7 @@ const HHInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "hours input field",
+    "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR
   });
 });

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

@@ -21,6 +21,7 @@ const MeridiemInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef
 }) => {
   const validateOnChange = useCallback(e => {
@@ -41,7 +42,7 @@ const MeridiemInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "meridiem input field",
+    "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
   });
 });

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

@@ -18,6 +18,7 @@ const MinutesInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef
 }) => {
   const validateOnChange = useCallback(e => {
@@ -38,7 +39,7 @@ const MinutesInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "minutes input field",
+    "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
   });
 });

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

@@ -38,7 +38,8 @@ const TimeInputs = () => {
     hourInputRef,
     minutesInputRef,
     // secondsInputRef,
-    meridiemInputRef
+    meridiemInputRef,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth]
@@ -50,6 +51,7 @@ const TimeInputs = () => {
     onKeyDown: onHoursKeyDown,
     contextRef: hourInputRef,
     placeholder: "HH",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
     autoFocusHourInput: autoFocusHourInput
   })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx(StyledColonSeparator, {
     alignItems: "center"
@@ -60,7 +62,8 @@ const TimeInputs = () => {
     onFocus: onMeridiemFocus,
     onKeyDown: onMinutesKeyDown,
     contextRef: minutesInputRef,
-    placeholder: "MM"
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(MeridiemInput, {
     value: meridiem,
     onChange: onMeridiemChange,
@@ -68,7 +71,8 @@ const TimeInputs = () => {
     onFocus: onMinutesFocus,
     onKeyDown: onMeridiemKeyDown,
     contextRef: meridiemInputRef,
-    placeholder: "AM"
+    placeholder: "AM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })));
 };