@elliemae/ds-controlled-form 2.2.0-alpha.3 → 3.0.0-next.0

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

@@ -1,227 +1,241 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var Styleds_exports = {};
-__export(Styleds_exports, {
-  StyledIconTriggerButton: () => StyledIconTriggerButton,
-  StyledTimeBtn: () => StyledTimeBtn,
-  StyledTimePickerContainer: () => StyledTimePickerContainer,
-  StyledTimePickerHead: () => StyledTimePickerHead,
-  StyledTimePickerWheelWrapper: () => StyledTimePickerWheelWrapper,
-  StyledTimePickerWheelsLegend: () => StyledTimePickerWheelsLegend,
-  StyledWheelChangeTimeBtn: () => StyledWheelChangeTimeBtn,
-  StyledWheelList: () => StyledWheelList,
-  StyledWheelListItem: () => StyledWheelListItem,
-  TimeWheelFooterMessage: () => TimeWheelFooterMessage
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = __toESM(require("@elliemae/ds-system"));
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-const focusBorder = import_ds_system.css`
-  &:after {
-    position: absolute;
-    content: '';
-    top: -2px;
-    left: -2px;
-    width: calc(100% + 4px);
-    height: calc(100% + 4px);
-    border-radius: 50%;
-    border: 2px solid ${({ theme, isDisabled }) => isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-  }
-`;
-const diagonalLine = import_ds_system.css`
-  &:before {
-    position: absolute;
-    content: '';
-    top: 48%;
-    left: -1px;
-    height: 1px;
-    width: calc(100% + 2px);
-    transform: rotate(45deg);
-    background-color: ${({ theme, isCurrentListItem, selected }) => {
-  if (selected)
-    return theme.colors.neutral["000"];
-  if (isCurrentListItem)
-    return theme.colors.danger[900];
-  return theme.colors.neutral[500];
-}};
-  }
-`;
-const fontColorPerStatus = import_ds_system.css`
-  ${({ theme, isDisabled, isCurrentListItem, 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];
-}};
-`;
-const hoverBgPerStatus = import_ds_system.css`
-  ${({ theme, selected, isDisabled }) => {
-  if (isDisabled && selected)
-    return theme.colors.danger[900];
-  if (selected)
-    return theme.colors.brand[700];
-  return theme.colors.neutral["000"];
-}}
-`;
-const StyledIconTriggerButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
-  color: ${({ theme }) => theme.colors.brand["600"]};
-  width: 26px;
-  height: 26px;
-`;
-const StyledWheelList = import_styled_components.default.div`
-  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 ${({ theme }) => theme.colors.brand[700]};
-      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};
-    }
-  }
-`;
-const StyledTimePickerContainer = import_styled_components.default.div`
-  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 = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  width: 100%;
-  grid-area: TimePickerHead;
-  justify-content: center;
-  align-items: center;
-  background: ${({ theme }) => theme.colors.neutral["050"]};
-`;
-const StyledTimePickerWheelsLegend = import_styled_components.default.div`
-  width: 100%;
-  height: 100;
-  grid-area: TimePickerWheelsLegend;
-  display: grid;
-  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl};
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  background: ${({ theme }) => theme.colors.neutral["050"]};
-`;
-const StyledTimePickerWheelWrapper = import_styled_components.default.div`
-  width: 100%;
-  background: ${({ theme }) => theme.colors.neutral["000"]};
-  grid-area: VerticalWheelWrapper;
-  display: grid;
-  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl};
-  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[200]};
-    }
-  }
-`;
-const StyledTimeBtn = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
-  position: relative;
-  height: ${({ theme }) => theme.space.s};
-  width: ${({ theme }) => theme.space.s};
-  border-radius: 50%;
+'use strict';
 
-  &:hover {
-    background-color: ${hoverBgPerStatus};
-  }
+Object.defineProperty(exports, '__esModule', { value: true });
 
-  color: ${fontColorPerStatus};
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var Grid = require('@elliemae/ds-grid');
+var DSButton = require('@elliemae/ds-button');
 
-  ${({ selected, isCurrentListItem }) => isCurrentListItem && !selected ? focusBorder : ``}
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  ${({ isDisabled }) => isDisabled ? import_ds_system.css`
-          cursor: not-allowed;
-          ${diagonalLine};
-        ` : ``}
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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"
+})(["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"
+})(["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"
+})(["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"](Grid.Grid).withConfig({
+  componentId: "sc-1nsw31l-3"
+})(["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%;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"
+})(["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"
+})(["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"
+})(["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"
+})(["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];
+});
 
-  ${({ theme, selected, isDisabled }) => selected ? import_ds_system.css`
-    font-weight: ${theme.fontWeights.semibold};
-    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-    ` : ``};
-`;
-const StyledWheelListItem = import_styled_components.default.div`
-  margin: auto;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-`;
-const StyledWheelChangeTimeBtn = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
-  height: ${({ theme }) => theme.space.s};
-  width: ${({ theme }) => theme.space.s};
-  min-width: ${({ theme }) => theme.space.s};
-  border-radius: 50%;
-`;
-const TimeWheelFooterMessage = import_styled_components.default.footer`
-  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
-  margin: 0 ${({ theme }) => theme.space.xxs2};
-  padding: ${({ theme }) => theme.space.xxs2} 0;
-  color: ${({ theme }) => theme.colors.danger[900]};
-  font-style: italic;
-  font-weight: ${({ theme }) => theme.fontWeights.thin};
-  font-size: ${({ theme }) => theme.fontSizes.microText[200]};
-  text-align: right;
-`;
-module.exports = __toCommonJS(Styleds_exports);
-//# sourceMappingURL=Styleds.js.map
+exports.StyledIconTriggerButton = StyledIconTriggerButton;
+exports.StyledTimeBtn = StyledTimeBtn;
+exports.StyledTimePickerContainer = StyledTimePickerContainer;
+exports.StyledTimePickerHead = StyledTimePickerHead;
+exports.StyledTimePickerWheelWrapper = StyledTimePickerWheelWrapper;
+exports.StyledTimePickerWheelsLegend = StyledTimePickerWheelsLegend;
+exports.StyledWheelChangeTimeBtn = StyledWheelChangeTimeBtn;
+exports.StyledWheelList = StyledWheelList;
+exports.StyledWheelListItem = StyledWheelListItem;
+exports.TimeWheelFooterMessage = TimeWheelFooterMessage;

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

@@ -1,53 +1,52 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var TimeWheel_exports = {};
-__export(TimeWheel_exports, {
-  TimeWheel: () => TimeWheel,
-  WrapWithTimeWheelContext: () => WrapWithTimeWheelContext
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_TimeWheelIconTrigger = __toESM(require("./TimeWheelIconTrigger"));
-var import_TimeWheelWrapper = __toESM(require("./TimeWheelWrapper"));
-var import_TimeWheelContext = __toESM(require("./TimeWheelContext"));
-var import_useConfigTimePickerCTX = __toESM(require("./useConfigTimePickerCTX"));
-const WrappedTimeWheelContext = ({ children }) => {
-  const ctx = (0, import_useConfigTimePickerCTX.useConfigTimePickerCTX)();
-  return /* @__PURE__ */ import_react.default.createElement(import_TimeWheelContext.TimeWheelContext.Provider, {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var TimeWheelIconTrigger = require('./TimeWheelIconTrigger.js');
+var TimeWheelWrapper = require('./TimeWheelWrapper.js');
+var TimeWheelContext = require('./TimeWheelContext.js');
+var useConfigTimePickerCTX = require('./useConfigTimePickerCTX.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _TimeWheelIconTrigger, _TimeWheelWrapper;
+
+const WrappedTimeWheelContext = _ref => {
+  let {
+    children
+  } = _ref;
+  const ctx = useConfigTimePickerCTX.useConfigTimePickerCTX();
+  return /*#__PURE__*/_jsx__default["default"](TimeWheelContext.TimeWheelContext.Provider, {
     value: ctx
-  }, children);
+  }, void 0, children);
 };
-const WrapWithTimeWheelContext = (Component) => () => /* @__PURE__ */ import_react.default.createElement(WrappedTimeWheelContext, null, /* @__PURE__ */ import_react.default.createElement(Component, null));
+
+const WrapWithTimeWheelContext = Component => {
+  var _WrappedTimeWheelCont;
+
+  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
+
 const TimeWheel = WrapWithTimeWheelContext(() => {
-  const { showTimePicker, isControllerOnly, handleMenuWrapperKeyDown } = (0, import_react.useContext)(import_TimeWheelContext.TimeWheelContext);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, isControllerOnly ? null : /* @__PURE__ */ import_react.default.createElement(import_TimeWheelIconTrigger.TimeWheelIconTrigger, null), isControllerOnly || showTimePicker ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", {
-    onKeyDown: handleMenuWrapperKeyDown
-  }, /* @__PURE__ */ import_react.default.createElement(import_TimeWheelWrapper.TimeWheelWrapper, null))) : null);
+  const {
+    showTimePicker,
+    isControllerOnly,
+    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", {
+        onKeyDown: handleMenuWrapperKeyDown
+      }, void 0, _TimeWheelWrapper || (_TimeWheelWrapper = /*#__PURE__*/_jsx__default["default"](TimeWheelWrapper.TimeWheelWrapper, {})))
+    }) : null]
+  });
 });
-module.exports = __toCommonJS(TimeWheel_exports);
-//# sourceMappingURL=TimeWheel.js.map
+
+exports.TimeWheel = TimeWheel;
+exports.WrapWithTimeWheelContext = WrapWithTimeWheelContext;

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

@@ -1,50 +1,38 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var TimeWheelContent_exports = {};
-__export(TimeWheelContent_exports, {
-  TimeWheelContent: () => TimeWheelContent
+'use strict';
+
+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');
+var MeridiemList = require('./MeridiemList.js');
+var TimeWheelFooter = require('./TimeWheelFooter.js');
+var TimeWheelContext = require('./TimeWheelContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _StyledTimePickerWhee, _StyledTimePickerWhee2, _TimeWheelFooter;
+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, {
+    showShadow: showShadow,
+    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, {})));
 });
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ControlledDateTimePickerDatatestid = __toESM(require("../../../ControlledDateTimePickerDatatestid"));
-var import_Styleds = __toESM(require("./Styleds"));
-var import_HoursList = __toESM(require("./HoursList"));
-var import_MinutesList = __toESM(require("./MinutesList"));
-var import_MeridiemList = __toESM(require("./MeridiemList"));
-var import_TimeWheelFooter = __toESM(require("./TimeWheelFooter"));
-var import_TimeWheelContext = __toESM(require("./TimeWheelContext"));
-const TimeWheelContent = import_react.default.memo(({ showShadow }) => {
-  const { hours, minutes, meridiem, isControllerOnly } = (0, import_react.useContext)(import_TimeWheelContext.TimeWheelContext);
-  return /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerContainer, {
-    showShadow,
-    isControllerOnly,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
-  }, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerHead, null, `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerWheelsLegend, null, /* @__PURE__ */ import_react.default.createElement("div", null, "H"), /* @__PURE__ */ import_react.default.createElement("div", null, "M"), /* @__PURE__ */ import_react.default.createElement("div", null, "A")), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerWheelWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_HoursList.HoursList, null), /* @__PURE__ */ import_react.default.createElement(import_MinutesList.MinutesList, null), /* @__PURE__ */ import_react.default.createElement(import_MeridiemList.MeridiemList, null)), /* @__PURE__ */ import_react.default.createElement(import_TimeWheelFooter.TimeWheelFooter, null));
-});
-module.exports = __toCommonJS(TimeWheelContent_exports);
-//# sourceMappingURL=TimeWheelContent.js.map
+
+exports.TimeWheelContent = TimeWheelContent;