@elliemae/ds-controlled-form 1.57.1-rc.0 → 2.0.0-alpha.11

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

@@ -1,35 +1,37 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import React, { useContext } from 'react';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
 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';
 import { TimeWheelContext } from './TimeWheelContext.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import 'styled-components';
-import '@elliemae/ds-system';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
+import { jsx } from 'react/jsx-runtime';
 
-var MinutesList = function MinutesList() {
-  var _useContext = useContext(TimeWheelContext),
-      currMinuteNum = _useContext.currMinuteNum,
-      hours = _useContext.hours,
-      minutes = _useContext.minutes,
-      meridiem = _useContext.meridiem,
-      visibleMinutes = _useContext.visibleMinutes,
-      handlePrevMinute = _useContext.handlePrevMinute,
-      handleNextMinute = _useContext.handleNextMinute,
-      handleTimeWheelBtnChangeMinutes = _useContext.handleTimeWheelBtnChangeMinutes,
-      handlePrevMinuteBtnOnKeyDown = _useContext.handlePrevMinuteBtnOnKeyDown,
-      handleCurrMinutesOnKeyDown = _useContext.handleCurrMinutesOnKeyDown,
-      handleNextMinuteBtnOnKeyDown = _useContext.handleNextMinuteBtnOnKeyDown,
-      prevMinutesBtnRef = _useContext.prevMinutesBtnRef,
-      currMinutesBtnRef = _useContext.currMinutesBtnRef,
-      nextMinutesBtnRef = _useContext.nextMinutesBtnRef,
-      getIsDisabledTime = _useContext.getIsDisabledTime;
+var _ChevronSmallUp, _ChevronSmallDown;
 
-  return /*#__PURE__*/React.createElement(StyledWheelList, null, /*#__PURE__*/React.createElement(StyledWheelListItem, null, /*#__PURE__*/React.createElement(StyledWheelChangeTimeBtn, {
+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(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 MinutesList = () => {
+  const {
+    currMinuteNum,
+    hours,
+    minutes,
+    meridiem,
+    visibleMinutes,
+    handlePrevMinute,
+    handleNextMinute,
+    handleTimeWheelBtnChangeMinutes,
+    handlePrevMinuteBtnOnKeyDown,
+    handleCurrMinutesOnKeyDown,
+    handleNextMinuteBtnOnKeyDown,
+    prevMinutesBtnRef,
+    currMinutesBtnRef,
+    nextMinutesBtnRef,
+    getIsDisabledTime
+  } = useContext(TimeWheelContext);
+  return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
     buttonType: "raw",
     size: "m",
@@ -38,25 +40,22 @@ var MinutesList = function MinutesList() {
     innerRef: prevMinutesBtnRef,
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
-  }, /*#__PURE__*/React.createElement(ChevronSmallUp, null))), visibleMinutes.map(function (minutesString) {
-    var key = "timewheel-minutes-".concat(minutesString);
-    if (!minutesString) return /*#__PURE__*/React.createElement(StyledWheelListItem, {
-      key: key
-    });
-    var currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
-    var isEmptyCurrValueCurrentListItem = !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
-    var isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
-    var isDisabled = getIsDisabledTime(currMinutesTimeString);
-    var tabIndex = isCurrentListItem ? 0 : -1;
-    var btnProps = {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
+    const key = "timewheel-minutes-".concat(minutesString);
+    if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
+    const currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
+    const isEmptyCurrValueCurrentListItem = !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
+    const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
+    const isDisabled = getIsDisabledTime(currMinutesTimeString);
+    const tabIndex = isCurrentListItem ? 0 : -1;
+    const btnProps = {
       onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currMinutesBtnRef : undefined
     };
-    return /*#__PURE__*/React.createElement(StyledWheelListItem, {
-      key: key,
+    return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem,
       selected: convertToPositiveNumberIfPossible(minutesString) === currMinuteNum
-    }, /*#__PURE__*/React.createElement(StyledTimeBtn, _extends({
+    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({
       isCurrentListItem: isCurrentListItem,
       "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
@@ -65,17 +64,17 @@ var MinutesList = function MinutesList() {
       isDisabled: isDisabled,
       buttonType: "raw",
       size: "m",
-      onClick: function onClick(e) {
-        return handleTimeWheelBtnChangeMinutes(minutesString, e);
-      },
+      onClick: e => handleTimeWheelBtnChangeMinutes(minutesString, e),
       tabIndex: tabIndex,
       role: "spinbutton",
       "aria-valuemax": "59",
       "aria-valuemin": "0",
       "aria-valuenow": currMinuteNum,
       "aria-valuetext": "".concat(minutesString, " minutes")
-    }, btnProps), minutesString));
-  }), /*#__PURE__*/React.createElement(StyledWheelListItem, null, /*#__PURE__*/React.createElement(StyledWheelChangeTimeBtn, {
+    }, btnProps), {}, {
+      children: minutesString
+    })));
+  }), /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
     buttonType: "raw",
     size: "m",
@@ -84,8 +83,7 @@ var MinutesList = function MinutesList() {
     innerRef: nextMinutesBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(ChevronSmallDown, null))));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { MinutesList, MinutesList as default };
-//# sourceMappingURL=MinutesList.js.map

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

@@ -1,31 +1,35 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import React, { useContext } from 'react';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
-import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
+import ChevronSmallUp from '@elliemae/ds-icons/ChevronSmallUp';
+import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn } from './Styleds.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import 'styled-components';
-import '@elliemae/ds-system';
-import '@elliemae/ds-grid';
+import { jsx } from 'react/jsx-runtime';
 
-var SecondsList = function SecondsList() {
-  var _useContext = useContext(TimeWheelContext),
-      currSecondNum = _useContext.currSecondNum,
-      seconds = _useContext.seconds,
-      visibleSeconds = _useContext.visibleSeconds,
-      handlePrevSecond = _useContext.handlePrevSecond,
-      handleNextSecond = _useContext.handleNextSecond,
-      handleTimeWheelBtnChangeSeconds = _useContext.handleTimeWheelBtnChangeSeconds,
-      handlePrevSecondBtnOnKeyDown = _useContext.handlePrevSecondBtnOnKeyDown,
-      handleCurrSecondsOnKeyDown = _useContext.handleCurrSecondsOnKeyDown,
-      handleNextSecondBtnOnKeyDown = _useContext.handleNextSecondBtnOnKeyDown,
-      prevSecondsBtnRef = _useContext.prevSecondsBtnRef,
-      currSecondsBtnRef = _useContext.currSecondsBtnRef,
-      nextSecondsBtnRef = _useContext.nextSecondsBtnRef;
+var _ChevronSmallUp, _ChevronSmallDown;
 
-  return /*#__PURE__*/React.createElement(StyledWheelList, null, /*#__PURE__*/React.createElement(StyledWheelListItem, null, /*#__PURE__*/React.createElement(StyledWheelChangeTimeBtn, {
+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(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,
+    seconds,
+    visibleSeconds,
+    handlePrevSecond,
+    handleNextSecond,
+    handleTimeWheelBtnChangeSeconds,
+    handlePrevSecondBtnOnKeyDown,
+    handleCurrSecondsOnKeyDown,
+    handleNextSecondBtnOnKeyDown,
+    prevSecondsBtnRef,
+    currSecondsBtnRef,
+    nextSecondsBtnRef
+  } = useContext(TimeWheelContext);
+  return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
     buttonType: "raw",
     size: "m",
@@ -34,32 +38,29 @@ var SecondsList = function SecondsList() {
     onKeyDown: handlePrevSecondBtnOnKeyDown,
     innerRef: prevSecondsBtnRef,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(ChevronSmallUp, null))), visibleSeconds.map(function (secondsString) {
-    var key = "timewheel-seconds-".concat(secondsString);
-    if (!secondsString) return /*#__PURE__*/React.createElement(StyledWheelListItem, {
-      key: key
-    });
-    var isEmptyCurrValueCurrentListItem = !seconds && convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
-    var isCurrentListItem = isEmptyCurrValueCurrentListItem || seconds === secondsString;
-    var tabIndex = isCurrentListItem ? 0 : -1;
-    var btnProps = {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
+    const key = "timewheel-seconds-".concat(secondsString);
+    if (!secondsString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
+    const isEmptyCurrValueCurrentListItem = !seconds && convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
+    const isCurrentListItem = isEmptyCurrValueCurrentListItem || seconds === secondsString;
+    const tabIndex = isCurrentListItem ? 0 : -1;
+    const btnProps = {
       onKeyDown: isCurrentListItem ? handleCurrSecondsOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currSecondsBtnRef : undefined
     };
-    return /*#__PURE__*/React.createElement(StyledWheelListItem, {
-      isCurrentListItem: isCurrentListItem,
-      key: key
-    }, /*#__PURE__*/React.createElement(DSButton, _extends({
+    return /*#__PURE__*/_jsx(StyledWheelListItem, {
+      isCurrentListItem: isCurrentListItem
+    }, key, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
       "aria-label": "set ".concat(secondsString, " seconds"),
       buttonType: "raw",
       size: "l",
       variant: BUTTON_VARIANT.DEFAULT,
-      onClick: function onClick(e) {
-        return handleTimeWheelBtnChangeSeconds(secondsString, e);
-      },
+      onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
       tabIndex: tabIndex
-    }, btnProps), secondsString));
-  }), /*#__PURE__*/React.createElement(StyledWheelListItem, null, /*#__PURE__*/React.createElement(StyledWheelChangeTimeBtn, {
+    }, btnProps), {}, {
+      children: secondsString
+    })));
+  }), /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
     buttonType: "raw",
     size: "m",
@@ -68,8 +69,7 @@ var SecondsList = function SecondsList() {
     onKeyDown: handleNextSecondBtnOnKeyDown,
     innerRef: nextSecondsBtnRef,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(ChevronSmallDown, null))));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { SecondsList, SecondsList as default };
-//# sourceMappingURL=SecondsList.js.map

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

@@ -1,160 +1,103 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import styled from 'styled-components';
-import { css } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var focusBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), function (_ref) {
-  var theme = _ref.theme,
-      isDisabled = _ref.isDisabled;
-  return isDisabled ? theme.colors.danger[900] : theme.colors.brand[700];
-});
-var diagonalLine = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), function (_ref2) {
-  var theme = _ref2.theme,
-      isCurrentListItem = _ref2.isCurrentListItem,
-      selected = _ref2.selected;
-  if (selected) return theme.colors.neutral['000'];
-  if (isCurrentListItem) return theme.colors.danger[900];
-  return theme.colors.neutral[500];
-});
-var fontColorPerStatus = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref3) {
-  var theme = _ref3.theme,
-      isDisabled = _ref3.isDisabled,
-      isCurrentListItem = _ref3.isCurrentListItem,
-      selected = _ref3.selected;
-  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];
-});
-var hoverBgPerStatus = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
-  var theme = _ref4.theme,
-      selected = _ref4.selected,
-      isDisabled = _ref4.isDisabled;
-  if (isDisabled && selected) return theme.colors.danger[900];
-  if (selected) return theme.colors.brand[700];
-  return theme.colors.neutral['000'];
-});
-var StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+/* eslint-disable max-lines */
+const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-0"
-})(["color:", ";width:26px;height:26px;"], function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.brand['600'];
-});
-var StyledWheelList = /*#__PURE__*/styled.div.withConfig({
+})(["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 ", ";}}"], function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.brand[700];
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.colors.brand[700];
-});
-var StyledTimePickerContainer = /*#__PURE__*/styled.div.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 ", ";}}"], ({
+  theme
+}) => theme.colors.brand[700], ({
+  theme
+}) => theme.colors.brand[700]);
+const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-2"
-})(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], function (_ref8) {
-  var showShadow = _ref8.showShadow,
-      isControllerOnly = _ref8.isControllerOnly;
-  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  " : '';
-});
-var StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
+})(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], ({
+  showShadow,
+  isControllerOnly
+}) => 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(Grid).withConfig({
   componentId: "sc-1nsw31l-3"
-})(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.colors.neutral['050'];
-});
-var StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
+})(["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-4"
-})(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.space.xl;
-}, function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.space.xl;
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.space.xl;
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.colors.neutral['050'];
-});
-var StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
+})(["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.div.withConfig({
   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:", ";}}"], function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.colors.neutral['000'];
-}, function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.space.xl;
-}, function (_ref16) {
-  var theme = _ref16.theme;
-  return theme.space.xl;
-}, function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.space.xl;
-}, function (_ref18) {
-  var theme = _ref18.theme;
-  return theme.colors.neutral[200];
-});
-var StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).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:", ";}}"], ({
+  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(DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-6"
-})(["position:relative;height:", ";width:", ";border-radius:50%;&:hover{background-color:", ";}color:", ";", " ", " ", ";"], function (_ref19) {
-  var theme = _ref19.theme;
-  return theme.space.s;
-}, function (_ref20) {
-  var theme = _ref20.theme;
-  return theme.space.s;
-}, hoverBgPerStatus, fontColorPerStatus, function (_ref21) {
-  var selected = _ref21.selected,
-      isCurrentListItem = _ref21.isCurrentListItem;
-  return isCurrentListItem && !selected ? focusBorder : "";
-}, function (_ref22) {
-  var isDisabled = _ref22.isDisabled;
-  return isDisabled ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          cursor: not-allowed;\n          ", ";\n        "])), diagonalLine) : "";
-}, function (_ref23) {
-  var theme = _ref23.theme,
-      selected = _ref23.selected,
-      isDisabled = _ref23.isDisabled;
-  return selected ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-weight: ", ";\n    background-color ", ";\n    "])), theme.fontWeights.semibold, isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]) : "";
-});
-var StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
+})(["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
+}) => theme.space.s, ({
+  theme
+}) => theme.space.s, ({
+  theme
+}) => theme.fontWeights.regular, ({
+  theme
+}) => theme.colors.neutral[800], ({
+  theme,
+  isDisabled,
+  selected
+}) => isDisabled ? "\n    color: ".concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n    cursor: not-allowed;\n    background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    font-weight: ").concat(selected ? theme.fontWeights.semibold : '', ";\n\n    &:before {\n      cursor: not-allowed;\n      position: absolute;\n      content: '';\n      top: 47%;\n      left: 0;\n      width: 100%;\n      height: 1px;\n      background-color: ").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      transform: rotate(45deg);\n      pointer-events: none;\n    }\n    &:hover {\n      color:").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    }\n  ") : "\n      ".concat(selected ? "\n      color: ".concat(theme.colors.neutral['000'], ";\n      background-color:").concat(theme.colors.brand[700], ";\n      font-weight: ").concat(theme.fontWeights.semibold, ";\n      &:hover {\n        color:").concat(theme.colors.neutral['000'], ";\n        background-color:").concat(theme.colors.brand[700], ";\n      }\n      ") : "\n      color: ".concat(theme.colors.neutral[800], ";\n      background-color:").concat(theme.colors.neutral['000'], ";\n      "), "\n  "), ({
+  theme,
+  isCurrentListItem,
+  selected,
+  isDisabled
+}) => isCurrentListItem && !selected ? "\n        color: ".concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n        &:after {\n          position: absolute;\n          content: '';\n          border-radius: 50%;\n          top: -2px;\n          left: -2px;\n          width: calc(100% + 4px);\n          height: calc(100% + 4px);\n          border: 2px solid ").concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n          pointer-events: none;\n        }\n        ").concat(isDisabled ? "\n          color: ".concat(theme.colors.danger[900], ";\n          &:hover {\n            color:").concat(theme.colors.danger[900], ";\n          }          \n          &:before{\n            background-color: ").concat(theme.colors.danger[900], ";\n          }\n        ") : '', "\n        ") : '');
+const StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-7"
 })(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
-var StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
+const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-8"
-})(["height:", ";width:", ";min-width:", ";border-radius:50%;"], function (_ref24) {
-  var theme = _ref24.theme;
-  return theme.space.s;
-}, function (_ref25) {
-  var theme = _ref25.theme;
-  return theme.space.s;
-}, function (_ref26) {
-  var theme = _ref26.theme;
-  return theme.space.s;
-});
-var TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
+})(["height:", ";width:", ";min-width:", ";border-radius:50%;"], ({
+  theme
+}) => theme.space.s, ({
+  theme
+}) => theme.space.s, ({
+  theme
+}) => theme.space.s);
+const TimeWheelFooterMessage = /*#__PURE__*/styled.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;"], function (_ref27) {
-  var theme = _ref27.theme;
-  return theme.colors.neutral[300];
-}, function (_ref28) {
-  var theme = _ref28.theme;
-  return theme.space.xxs2;
-}, function (_ref29) {
-  var theme = _ref29.theme;
-  return theme.space.xxs2;
-}, function (_ref30) {
-  var theme = _ref30.theme;
-  return theme.colors.danger[900];
-}, function (_ref31) {
-  var theme = _ref31.theme;
-  return theme.fontWeights.thin;
-}, function (_ref32) {
-  var theme = _ref32.theme;
-  return theme.fontSizes.microText[200];
-});
+})(["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]);
 
 export { StyledIconTriggerButton, StyledTimeBtn, StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelWrapper, StyledTimePickerWheelsLegend, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem, TimeWheelFooterMessage };
-//# sourceMappingURL=Styleds.js.map

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

@@ -1,63 +1,42 @@
-import React, { useContext } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
 import { TimeWheelIconTrigger } from './TimeWheelIconTrigger.js';
 import { TimeWheelWrapper } from './TimeWheelWrapper.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { useConfigTimePickerCTX } from './useConfigTimePickerCTX.js';
-import '@elliemae/ds-button';
-import '@elliemae/ds-icons';
-import '../../../ControlledDateTimePickerDatatestid.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/defineProperty';
-import './TimeWheelContent.js';
-import './Styleds.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import 'styled-components';
-import '@elliemae/ds-system';
-import '@elliemae/ds-grid';
-import './HoursList.js';
-import '../../../utils/numberHelpers.js';
-import './MinutesList.js';
-import './MeridiemList.js';
-import './TimeWheelFooter.js';
-import '../../../ControlledDateTimePickerCTX.js';
-import '../../../ControlledDateTimePickerTypes.js';
-import './usePopperTriggerLogic.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-popper';
-import '../../../utils/hooks/useOnClickOutside.js';
-import './useCurrentDisplayedWheelsLogic.js';
-import '../../TimeInputs/useTimeInputs.js';
-import '../../../utils/constants.js';
-import '../../../utils/stringHelpers.js';
-import './useKeyboardHandlers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-/* eslint-disable max-len */
+var _TimeWheelIconTrigger, _TimeWheelWrapper;
 
-var WrappedTimeWheelContext = function WrappedTimeWheelContext(_ref) {
-  var children = _ref.children;
-  var ctx = useConfigTimePickerCTX();
-  return /*#__PURE__*/React.createElement(TimeWheelContext.Provider, {
+const WrappedTimeWheelContext = ({
+  children
+}) => {
+  const ctx = useConfigTimePickerCTX();
+  return /*#__PURE__*/_jsx(TimeWheelContext.Provider, {
     value: ctx
-  }, children);
+  }, void 0, children);
 };
 
-var WrapWithTimeWheelContext = function WrapWithTimeWheelContext(Component) {
-  return function () {
-    return /*#__PURE__*/React.createElement(WrappedTimeWheelContext, null, /*#__PURE__*/React.createElement(Component, null));
-  };
+const WrapWithTimeWheelContext = Component => {
+  var _WrappedTimeWheelCont;
+
+  return () => _WrappedTimeWheelCont || (_WrappedTimeWheelCont = /*#__PURE__*/_jsx(WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx(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
 
-var TimeWheel = WrapWithTimeWheelContext(function () {
-  var _useContext = useContext(TimeWheelContext),
-      showTimePicker = _useContext.showTimePicker,
-      isControllerOnly = _useContext.isControllerOnly,
-      handleMenuWrapperKeyDown = _useContext.handleMenuWrapperKeyDown;
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isControllerOnly ? null : /*#__PURE__*/React.createElement(TimeWheelIconTrigger, null), isControllerOnly || showTimePicker ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    onKeyDown: handleMenuWrapperKeyDown
-  }, /*#__PURE__*/React.createElement(TimeWheelWrapper, null))) : null);
+const TimeWheel = WrapWithTimeWheelContext(() => {
+  const {
+    showTimePicker,
+    isControllerOnly,
+    handleMenuWrapperKeyDown
+  } = useContext(TimeWheelContext);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [isControllerOnly ? null : _TimeWheelIconTrigger || (_TimeWheelIconTrigger = /*#__PURE__*/_jsx(TimeWheelIconTrigger, {})), isControllerOnly || showTimePicker ? /*#__PURE__*/jsx(Fragment, {
+      children: /*#__PURE__*/_jsx("div", {
+        onKeyDown: handleMenuWrapperKeyDown
+      }, void 0, _TimeWheelWrapper || (_TimeWheelWrapper = /*#__PURE__*/_jsx(TimeWheelWrapper, {})))
+    }) : null]
+  });
 });
 
 export { TimeWheel, WrapWithTimeWheelContext };
-//# sourceMappingURL=TimeWheel.js.map