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

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

@@ -4,10 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
-var DSButton = require('@elliemae/ds-basic/Button');
-var ChevronSmallUp = require('@elliemae/ds-icons/ChevronSmallUp');
-var ChevronSmallDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var DSButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
 var numberHelpers = require('../../../utils/numberHelpers.js');
 var Styleds = require('./Styleds.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
@@ -18,14 +24,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var ChevronSmallUp__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallUp);
-var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 
 var _ChevronSmallUp, _ChevronSmallDown;
 
 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; }
+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 SecondsList = () => {
   const {
     currSecondNum,
@@ -41,19 +45,18 @@ const SecondsList = () => {
     currSecondsBtnRef,
     nextSecondsBtnRef
   } = React.useContext(TimeWheelContext.TimeWheelContext);
-  return /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelChangeTimeBtn, {
+  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default['default'](ChevronSmallUp__default['default'], {})),
+    buttonType: "raw",
     size: "m",
     variant: DSButton.BUTTON_VARIANT.DEFAULT,
     onClick: handlePrevSecond,
     onKeyDown: handlePrevSecondBtnOnKeyDown,
     innerRef: prevSecondsBtnRef,
     tabIndex: -1
-  })), visibleSeconds.map(secondsString => {
-    const key = `timewheel-seconds-${secondsString}`;
-    if (!secondsString) return /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {}, key);
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleSeconds.map(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;
     const tabIndex = isCurrentListItem ? 0 : -1;
@@ -61,29 +64,29 @@ const SecondsList = () => {
       onKeyDown: isCurrentListItem ? handleCurrSecondsOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currSecondsBtnRef : undefined
     };
-    return /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {
+    return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default['default'], _objectSpread({
-      "aria-label": `set ${secondsString} seconds`,
-      buttonType: "text",
-      labelText: secondsString,
+    }, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({
+      "aria-label": "set ".concat(secondsString, " seconds"),
+      buttonType: "raw",
       size: "l",
       variant: DSButton.BUTTON_VARIANT.DEFAULT,
       onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
       tabIndex: tabIndex
-    }, btnProps)));
-  }), /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelChangeTimeBtn, {
+    }, btnProps), {}, {
+      children: secondsString
+    })));
+  }), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default['default'](ChevronSmallDown__default['default'], {})),
+    buttonType: "raw",
     size: "m",
     variant: DSButton.BUTTON_VARIANT.DEFAULT,
     onClick: handleNextSecond,
     onKeyDown: handleNextSecondBtnOnKeyDown,
     innerRef: nextSecondsBtnRef,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
 };
 
 exports.SecondsList = SecondsList;
-exports['default'] = SecondsList;
+exports["default"] = SecondsList;

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

@@ -2,173 +2,234 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
 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 _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-/* eslint-disable max-lines */
-const StyledWheelList = /*#__PURE__*/styled__default['default'].ul.withConfig({
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const focusBorder = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border-radius: 50%;\n    border: 2px solid ", ";\n  }\n"])), _ref => {
+  let {
+    theme,
+    isDisabled
+  } = _ref;
+  return isDisabled ? theme.colors.danger[900] : theme.colors.brand[700];
+});
+const diagonalLine = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -1px;\n    height: 1px;\n    width: calc(100% + 2px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref2 => {
+  let {
+    theme,
+    isCurrentListItem,
+    selected
+  } = _ref2;
+  if (selected) return theme.colors.neutral['000'];
+  if (isCurrentListItem) return theme.colors.danger[900];
+  return theme.colors.neutral[500];
+});
+const fontColorPerStatus = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  ", ";\n"])), _ref3 => {
+  let {
+    theme,
+    isDisabled,
+    isCurrentListItem,
+    selected
+  } = _ref3;
+  if (selected) return theme.colors.neutral['000'];
+  if (isDisabled && isCurrentListItem) return theme.colors.danger[900];
+  if (isDisabled) return theme.colors.neutral[500];
+  if (isCurrentListItem) return theme.colors.brand[600];
+  return theme.colors.neutral[800];
+});
+const hoverBgPerStatus = dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref4 => {
+  let {
+    theme,
+    selected,
+    isDisabled
+  } = _ref4;
+  if (isDisabled && selected) return theme.colors.danger[900];
+  if (selected) return theme.colors.brand[700];
+  return theme.colors.neutral['000'];
+});
+const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](DSButton.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 ", ";}}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.brand[700]);
-const StyledTimePickerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["color:", ";width:26px;height:26px;"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.brand['600'];
+});
+const StyledWheelList = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1nsw31l-1"
-})(["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%);
-  ` : '');
-const StyledTimePickerHead = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+})(["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 ", ";}}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.brand[700];
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.brand[700];
+});
+const StyledTimePickerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1nsw31l-2"
-})(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], ({
-  theme
-}) => theme.colors.neutral['050']);
-const StyledTimePickerWheelsLegend = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], _ref8 => {
+  let {
+    showShadow,
+    isControllerOnly
+  } = _ref8;
+  return 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%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.colors.neutral['050']);
-const StyledTimePickerWheelWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral['050'];
+});
+const StyledTimePickerWheelsLegend = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1nsw31l-4"
-})(["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'], ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.colors.neutral[200]);
-const StyledTimeBtn = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+})(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.space.xl;
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xl;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.space.xl;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.neutral['050'];
+});
+const StyledTimePickerWheelWrapper = /*#__PURE__*/styled__default["default"].div.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;}}", " ", ""], ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.neutral[800], ({
-  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;
-    }
-    &.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']};
-      }
-    }
-  ` : `
-      ${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]};
-        }
-      }
-      ` : `
-      color: ${theme.colors.neutral[800]};
-      background-color:${theme.colors.neutral['000']};
-      `}
-  `, ({
-  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]};
-          &.em-ds-button--text:not([disabled]) {
-            :hover {
-              color:${theme.colors.danger[900]};
-            }
-          }
-          &:before{
-            background-color: ${theme.colors.danger[900]};
-          }
-        ` : undefined}
-        ` : undefined);
-const StyledWheelListItem = /*#__PURE__*/styled__default['default'].li.withConfig({
+})(["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:", ";}}"], _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.neutral['000'];
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.xl;
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space.xl;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.space.xl;
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.neutral[200];
+});
+const StyledTimeBtn = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).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__default['default'](DSButton__default['default']).withConfig({
+})(["position:relative;height:", ";width:", ";border-radius:50%;&:hover{background-color:", ";}color:", ";", " ", " ", ";"], _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.space.s;
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.space.s;
+}, hoverBgPerStatus, fontColorPerStatus, _ref21 => {
+  let {
+    selected,
+    isCurrentListItem
+  } = _ref21;
+  return isCurrentListItem && !selected ? focusBorder : "";
+}, _ref22 => {
+  let {
+    isDisabled
+  } = _ref22;
+  return isDisabled ? dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n          cursor: not-allowed;\n          ", ";\n        "])), diagonalLine) : "";
+}, _ref23 => {
+  let {
+    theme,
+    selected,
+    isDisabled
+  } = _ref23;
+  return selected ? dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n    font-weight: ", ";\n    background-color ", ";\n    "])), theme.fontWeights.semibold, isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]) : "";
+});
+const StyledWheelListItem = /*#__PURE__*/styled__default["default"].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;}}}"], ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s);
-const TimeWheelFooterMessage = /*#__PURE__*/styled__default['default'].footer.withConfig({
+})(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
+const StyledWheelChangeTimeBtn = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-8"
-})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], ({
-  theme
-}) => theme.colors.neutral[300], ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.fontWeights.thin, ({
-  theme
-}) => theme.fontSizes.microText[200]);
+})(["height:", ";width:", ";min-width:", ";border-radius:50%;"], _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.space.s;
+}, _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.space.s;
+}, _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.space.s;
+});
+const TimeWheelFooterMessage = /*#__PURE__*/styled__default["default"].footer.withConfig({
+  componentId: "sc-1nsw31l-9"
+})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.colors.neutral[300];
+}, _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.space.xxs2;
+}, _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.space.xxs2;
+}, _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.colors.danger[900];
+}, _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.fontWeights.thin;
+}, _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.fontSizes.microText[200];
+});
 
+exports.StyledIconTriggerButton = StyledIconTriggerButton;
 exports.StyledTimeBtn = StyledTimeBtn;
 exports.StyledTimePickerContainer = StyledTimePickerContainer;
 exports.StyledTimePickerHead = StyledTimePickerHead;

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

@@ -16,11 +16,12 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _TimeWheelIconTrigger, _TimeWheelWrapper;
 
-const WrappedTimeWheelContext = ({
-  children
-}) => {
+const WrappedTimeWheelContext = _ref => {
+  let {
+    children
+  } = _ref;
   const ctx = useConfigTimePickerCTX.useConfigTimePickerCTX();
-  return /*#__PURE__*/_jsx__default['default'](TimeWheelContext.TimeWheelContext.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](TimeWheelContext.TimeWheelContext.Provider, {
     value: ctx
   }, void 0, children);
 };
@@ -28,7 +29,7 @@ const WrappedTimeWheelContext = ({
 const WrapWithTimeWheelContext = Component => {
   var _WrappedTimeWheelCont;
 
-  return () => _WrappedTimeWheelCont || (_WrappedTimeWheelCont = /*#__PURE__*/_jsx__default['default'](WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx__default['default'](Component, {})));
+  return () => _WrappedTimeWheelCont || (_WrappedTimeWheelCont = /*#__PURE__*/_jsx__default["default"](WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx__default["default"](Component, {})));
 }; // we use the HoC to be able to use the useContext and be sure it's correctly initialized
 // the HoC is Reused in CalendarWithTimeWheel
 
@@ -39,10 +40,10 @@ const TimeWheel = WrapWithTimeWheelContext(() => {
     handleMenuWrapperKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [isControllerOnly ? null : _TimeWheelIconTrigger || (_TimeWheelIconTrigger = /*#__PURE__*/_jsx__default['default'](TimeWheelIconTrigger.TimeWheelIconTrigger, {})), isControllerOnly || showTimePicker ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: /*#__PURE__*/_jsx__default['default']("div", {
+    children: [isControllerOnly ? null : _TimeWheelIconTrigger || (_TimeWheelIconTrigger = /*#__PURE__*/_jsx__default["default"](TimeWheelIconTrigger.TimeWheelIconTrigger, {})), isControllerOnly || showTimePicker ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
         onKeyDown: handleMenuWrapperKeyDown
-      }, void 0, _TimeWheelWrapper || (_TimeWheelWrapper = /*#__PURE__*/_jsx__default['default'](TimeWheelWrapper.TimeWheelWrapper, {})))
+      }, void 0, _TimeWheelWrapper || (_TimeWheelWrapper = /*#__PURE__*/_jsx__default["default"](TimeWheelWrapper.TimeWheelWrapper, {})))
     }) : null]
   });
 });

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var Styleds = require('./Styleds.js');
 var HoursList = require('./HoursList.js');
 var MinutesList = require('./MinutesList.js');
@@ -17,19 +18,21 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _StyledTimePickerWhee, _StyledTimePickerWhee2, _TimeWheelFooter;
-const TimeWheelContent = /*#__PURE__*/React__default['default'].memo(({
-  showShadow
-}) => {
+const TimeWheelContent = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    showShadow
+  } = _ref;
   const {
     hours,
     minutes,
     meridiem,
     isControllerOnly
   } = React.useContext(TimeWheelContext.TimeWheelContext);
-  return /*#__PURE__*/_jsx__default['default'](Styleds.StyledTimePickerContainer, {
+  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerContainer, {
     showShadow: showShadow,
-    isControllerOnly: isControllerOnly
-  }, 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, {})));
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
+  }, 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/TimeWheelContext.js

@@ -10,6 +10,7 @@ var React = require('react');
 const noop = () => {};
 
 const defaultTimePickerContext = {
+  ariaCurrentValueForInputs: '',
   tempTimeString: '',
   showTimePicker: false,
   setShowTimePicker: noop,
@@ -40,6 +41,7 @@ const defaultTimePickerContext = {
   meridiem: 'AM',
   handleTimeWheelBtnChangeMeridiem: noop,
   isControllerOnly: false,
+  autoFocusHourTimeWheel: false,
   handlePrevHourBtnOnKeyDown: noop,
   handleCurrHourOnKeyDown: noop,
   handleNextHourBtnOnKeyDown: noop,
@@ -65,12 +67,13 @@ const defaultTimePickerContext = {
   prevMeridiemBtnRef: /*#__PURE__*/React.createRef(),
   currMeridiemBtnRef: /*#__PURE__*/React.createRef(),
   nextMeridiemBtnRef: /*#__PURE__*/React.createRef(),
-  getIsDisabledTime: () => false
+  getIsDisabledTime: () => false,
+  disabled: false
 };
 /** Context for cross component communication */
 
 const TimeWheelContext = /*#__PURE__*/React.createContext(defaultTimePickerContext);
 
 exports.TimeWheelContext = TimeWheelContext;
-exports['default'] = TimeWheelContext;
+exports["default"] = TimeWheelContext;
 exports.defaultTimePickerContext = defaultTimePickerContext;

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

@@ -19,7 +19,9 @@ const TimeWheelFooter = () => {
     },
     isWithCalendarToo
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  if (!isWithCalendarToo && pickerFooterMsg !== undefined && hasError) return /*#__PURE__*/_jsx__default['default'](Styleds.TimeWheelFooterMessage, {}, void 0, pickerFooterMsg);
+  if (!isWithCalendarToo && pickerFooterMsg !== undefined && hasError) return /*#__PURE__*/_jsx__default["default"](Styleds.TimeWheelFooterMessage, {
+    role: "alert"
+  }, void 0, pickerFooterMsg);
   return null;
 };