@elliemae/ds-controlled-form 2.2.0-next.6 → 2.3.0-alpha.1

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

@@ -1,241 +1,227 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
+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 = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_button = 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%;
 
-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');
+  &:hover {
+    background-color: ${hoverBgPerStatus};
+  }
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  color: ${fontColorPerStatus};
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+  ${({ selected, isCurrentListItem }) => isCurrentListItem && !selected ? focusBorder : ``}
 
-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];
-});
+  ${({ isDisabled }) => isDisabled ? import_ds_system.css`
+          cursor: not-allowed;
+          ${diagonalLine};
+        ` : ``}
 
-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;
+  ${({ 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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nconst focusBorder = css`\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 ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css`\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: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2)`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledWheelList = styled.div`\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  padding: 0;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  &:focus-within {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n`;\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n}\n\nexport const StyledTimePickerContainer = styled.div<{ showShadow?: boolean; isControllerOnly: boolean }>`\n  display: grid;\n  position: relative;\n  grid-template-columns: 192px;\n  grid-template-rows: 36px 30px auto;\n  grid-template-areas:\n    'TimePickerHead'\n    'TimePickerWheelsLegend'\n    'VerticalWheelWrapper';\n  ${({ showShadow, isControllerOnly }) =>\n    showShadow && !isControllerOnly\n      ? `\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  `\n      : ''}\n`;\n\nexport const StyledTimePickerHead = styled(Grid)`\n  width: 100%;\n  grid-area: TimePickerHead;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n  width: 100%;\n  height: 100;\n  grid-area: TimePickerWheelsLegend;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div`\n  width: 100%;\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  grid-area: VerticalWheelWrapper;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  grid-template-rows: 100%;\n  & ul:not(:last-child) {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      left: 100%;\n      top: 5%;\n      height: 90%;\n      width: 1px;\n      background: ${({ theme }) => theme.colors.neutral[200]};\n    }\n  }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2)`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2)`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled.footer`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,52 +1,53 @@
-'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, {
+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 = require("./TimeWheelIconTrigger");
+var import_TimeWheelWrapper = require("./TimeWheelWrapper");
+var import_TimeWheelContext = require("./TimeWheelContext");
+var import_useConfigTimePickerCTX = require("./useConfigTimePickerCTX");
+const WrappedTimeWheelContext = ({ children }) => {
+  const ctx = (0, import_useConfigTimePickerCTX.useConfigTimePickerCTX)();
+  return /* @__PURE__ */ import_react.default.createElement(import_TimeWheelContext.TimeWheelContext.Provider, {
     value: ctx
-  }, void 0, children);
+  }, children);
 };
-
-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 WrapWithTimeWheelContext = (Component) => () => /* @__PURE__ */ import_react.default.createElement(WrappedTimeWheelContext, null, /* @__PURE__ */ import_react.default.createElement(Component, null));
 const TimeWheel = WrapWithTimeWheelContext(() => {
-  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]
-  });
+  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);
 });
-
-exports.TimeWheel = TimeWheel;
-exports.WrapWithTimeWheelContext = WrapWithTimeWheelContext;
+module.exports = __toCommonJS(TimeWheel_exports);
+//# sourceMappingURL=TimeWheel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-len */\nimport React, { useContext } from 'react';\nimport { TimeWheelIconTrigger } from './TimeWheelIconTrigger';\nimport { TimeWheelWrapper } from './TimeWheelWrapper';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { useConfigTimePickerCTX } from './useConfigTimePickerCTX';\n\nconst WrappedTimeWheelContext = ({ children }: { children: JSX.Element }) => {\n  const ctx = useConfigTimePickerCTX();\n  return <TimeWheelContext.Provider value={ctx}>{children}</TimeWheelContext.Provider>;\n};\nexport const WrapWithTimeWheelContext = (Component: React.ComponentType) => (): JSX.Element =>\n  (\n    <WrappedTimeWheelContext>\n      <Component />\n    </WrappedTimeWheelContext>\n  );\n// we use the HoC to be able to use the useContext and be sure it's correctly initialized\n// the HoC is Reused in CalendarWithTimeWheel\nexport const TimeWheel = WrapWithTimeWheelContext((): JSX.Element => {\n  const { showTimePicker, isControllerOnly, handleMenuWrapperKeyDown } = useContext(TimeWheelContext);\n\n  return (\n    <>\n      {isControllerOnly ? null : <TimeWheelIconTrigger />}\n      {isControllerOnly || showTimePicker ? (\n        <>\n          {/* The <div> element is catching the \"Escape\" key to close the calendar, there is no valid aria role for this */}\n          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleMenuWrapperKeyDown}>\n            <TimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,kCAAqC;AACrC,8BAAiC;AACjC,8BAAiC;AACjC,oCAAuC;AAEvC,MAAM,0BAA0B,CAAC,EAAE,eAA0C;AAC3E,QAAM,MAAM;AACZ,SAAO,mDAAC,yCAAiB,UAAlB;AAAA,IAA2B,OAAO;AAAA,KAAM;AAAA;AAE1C,MAAM,2BAA2B,CAAC,cAAmC,MAExE,mDAAC,yBAAD,MACE,mDAAC,WAAD;AAKC,MAAM,YAAY,yBAAyB,MAAmB;AACnE,QAAM,EAAE,gBAAgB,kBAAkB,6BAA6B,6BAAW;AAElF,SACE,wFACG,mBAAmB,OAAO,mDAAC,kDAAD,OAC1B,oBAAoB,iBACnB,wFAIE,mDAAC,OAAD;AAAA,IAAK,WAAW;AAAA,KACd,mDAAC,0CAAD,UAGF;AAAA;",
+  "names": []
+}