@elliemae/ds-controlled-form 1.61.0 → 2.0.0-alpha.12

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

@@ -14,222 +14,342 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var diagonalLine = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
+const diagonalLine = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.colors.neutral[500];
 });
-var focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n"])));
-var backgroundDateRange = {
-  inRange: dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), function (_ref2) {
-    var theme = _ref2.theme;
+const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n"])));
+const backgroundDateRange = {
+  inRange: dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref2 => {
+    let {
+      theme
+    } = _ref2;
     return theme.colors.brand[200];
-  }, function (_ref3) {
-    var theme = _ref3.theme;
+  }, _ref3 => {
+    let {
+      theme
+    } = _ref3;
     return theme.colors.brand[200];
   }),
-  startRange: dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), function (_ref4) {
-    var theme = _ref4.theme;
+  startRange: dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref4 => {
+    let {
+      theme
+    } = _ref4;
     return theme.colors.brand[200];
-  }, function (_ref5) {
-    var theme = _ref5.theme;
+  }, _ref5 => {
+    let {
+      theme
+    } = _ref5;
     return theme.colors.brand[200];
   }),
-  endRange: dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), function (_ref6) {
-    var theme = _ref6.theme;
+  endRange: dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), _ref6 => {
+    let {
+      theme
+    } = _ref6;
     return theme.colors.brand[200];
   })
 };
-var StyledIconTriggerButton = /*#__PURE__*/styled__default['default'](DSButton.DSButtonV2).withConfig({
+const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-0"
-})(["color:", ";width:26px;height:26px;"], function (_ref7) {
-  var theme = _ref7.theme;
+})(["color:", ";width:26px;height:26px;"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.colors.brand['600'];
 });
-var StyledShadowWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledShadowWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-18gg4kd-1"
-})(["", ""], function (_ref8) {
-  var isControllerOnly = _ref8.isControllerOnly;
+})(["", ""], _ref8 => {
+  let {
+    isControllerOnly
+  } = _ref8;
   return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
 });
-var StyledCalendarWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledCalendarWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-18gg4kd-2"
-})(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], function (_ref9) {
-  var theme = _ref9.theme;
+})(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.colors.neutral['000'];
 });
-var StyledHeader = /*#__PURE__*/styled__default['default'].section.withConfig({
+const StyledHeader = /*#__PURE__*/styled__default["default"].section.withConfig({
   componentId: "sc-18gg4kd-3"
-})(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], function (_ref10) {
-  var theme = _ref10.theme;
+})(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.space.xxxs;
-}, function (_ref11) {
-  var theme = _ref11.theme;
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.colors.neutral['050'];
 });
-var StyledHeaderButton = /*#__PURE__*/styled__default['default'](DSButton.DSButtonV2).withConfig({
+const StyledHeaderButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-4"
-})(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], function (_ref12) {
-  var theme = _ref12.theme;
+})(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.colors.brand[700];
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.colors.brand[200];
 });
-var StyledBody = /*#__PURE__*/styled__default['default'].section.withConfig({
+const StyledBody = /*#__PURE__*/styled__default["default"].section.withConfig({
   componentId: "sc-18gg4kd-5"
-})(["padding:", ";"], function (_ref14) {
-  var theme = _ref14.theme;
+})(["padding:", ";"], _ref14 => {
+  let {
+    theme
+  } = _ref14;
   return theme.space.xxxs;
 });
-var StyledDayBtn = /*#__PURE__*/styled__default['default'](DSButton.DSButtonV2).withConfig({
+const StyledDayBtn = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-6"
-})(["height:32px;width:32px;border-radius:50%;position:relative;border-width:2px;border-style:solid;border-color:transparent;line-height:1;color:", ";&:hover{cursor:pointer;color:", ";background-color:", ";}&:focus{", "}"], function (_ref15) {
-  var theme = _ref15.theme;
+})(["height:32px;width:32px;border-radius:50%;position:relative;border-width:2px;border-style:solid;border-color:transparent;line-height:1;color:", ";&:hover{cursor:pointer;color:", ";background-color:", ";}&:focus{", "}"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
   return theme.colors.neutral[800];
-}, function (_ref16) {
-  var theme = _ref16.theme;
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.colors.brand[700];
-}, function (_ref17) {
-  var theme = _ref17.theme;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
   return theme.colors.brand[200];
 }, focusBorder);
-var StyledWeekDaysListWrapper = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const StyledWeekDaysListWrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-18gg4kd-7"
-})(["font-size:", ";text-align:center;", ";", ";.dayWrapper.selectedDay,.dayWrapper.startRangeDay,.dayWrapper.endRangeDay{", "{color:", ";font-weight:", ";}&:not(.disabledDay),&:not(.outOfRangeDay){", "{background-color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}}&.focusedDay{", "{color:", ";border-color:", ";}}&.outOfRangeDay.focusedDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{", "{color:", ";", " &:before{background-color:", ";}}&.focusedDay{", "{&:after{border:2px solid ", ";}}}}.dayWrapper.focusedDay{", "{", " color:", ";&:after{border:2px solid ", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.notCurrentMonth{", "{color:", ";}&.focusedDay{", "{color:", ";}&.disabledDay,&.outOfRangeDay{", "{color:", ";}&.inRangeDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}}&.selectedDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}.dayWrapper.inRangeDay{", " &.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}&.focusedDay{", "{border-color:", ";}}}}.dayWrapper.startRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay.startRangeDay{background-color:transparent;box-shadow:none;}"], function (_ref18) {
-  var theme = _ref18.theme;
+})(["font-size:", ";text-align:center;", ";", ";.dayWrapper.selectedDay,.dayWrapper.startRangeDay,.dayWrapper.endRangeDay{", "{color:", ";font-weight:", ";}&:not(.disabledDay),&:not(.outOfRangeDay){", "{background-color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}}&.focusedDay{", "{color:", ";border-color:", ";}}&.outOfRangeDay.focusedDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{", "{color:", ";", " &:before{background-color:", ";}}&.focusedDay{", "{&:after{border:2px solid ", ";}}}}.dayWrapper.focusedDay{", "{", " color:", ";&:after{border:2px solid ", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.notCurrentMonth{", "{color:", ";}&.focusedDay{", "{color:", ";}&.disabledDay,&.outOfRangeDay{", "{color:", ";}&.inRangeDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}}&.selectedDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}.dayWrapper.inRangeDay{", " &.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}&.focusedDay{", "{border-color:", ";}}}}.dayWrapper.startRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay.startRangeDay{background-color:transparent;box-shadow:none;}"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
   return theme.fontSizes.label[400];
-}, function (_ref19) {
-  var isHeader = _ref19.isHeader,
-      theme = _ref19.theme;
+}, _ref19 => {
+  let {
+    isHeader,
+    theme
+  } = _ref19;
   return isHeader ? "background: ".concat(theme.colors.neutral['050']) : '';
-}, function (_ref20) {
-  var isHeader = _ref20.isHeader;
+}, _ref20 => {
+  let {
+    isHeader
+  } = _ref20;
   return isHeader ? 'text-transform: capitalize' : '';
-}, StyledDayBtn, function (_ref21) {
-  var theme = _ref21.theme;
+}, StyledDayBtn, _ref21 => {
+  let {
+    theme
+  } = _ref21;
   return theme.colors.neutral['000'];
-}, function (_ref22) {
-  var theme = _ref22.theme;
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
   return theme.fontWeights.semibold;
-}, StyledDayBtn, function (_ref23) {
-  var theme = _ref23.theme;
+}, StyledDayBtn, _ref23 => {
+  let {
+    theme
+  } = _ref23;
   return theme.colors.brand[700];
-}, StyledDayBtn, function (_ref24) {
-  var theme = _ref24.theme;
+}, StyledDayBtn, _ref24 => {
+  let {
+    theme
+  } = _ref24;
   return theme.colors.neutral['000'];
-}, function (_ref25) {
-  var theme = _ref25.theme;
+}, _ref25 => {
+  let {
+    theme
+  } = _ref25;
   return theme.colors.danger[900];
-}, function (_ref26) {
-  var theme = _ref26.theme;
+}, _ref26 => {
+  let {
+    theme
+  } = _ref26;
   return theme.colors.neutral['000'];
-}, StyledDayBtn, function (_ref27) {
-  var theme = _ref27.theme;
+}, StyledDayBtn, _ref27 => {
+  let {
+    theme
+  } = _ref27;
   return theme.colors.neutral['000'];
-}, function (_ref28) {
-  var theme = _ref28.theme;
+}, _ref28 => {
+  let {
+    theme
+  } = _ref28;
   return theme.colors.neutral['000'];
-}, StyledDayBtn, function (_ref29) {
-  var theme = _ref29.theme;
+}, StyledDayBtn, _ref29 => {
+  let {
+    theme
+  } = _ref29;
   return theme.colors.neutral['000'];
-}, function (_ref30) {
-  var theme = _ref30.theme;
+}, _ref30 => {
+  let {
+    theme
+  } = _ref30;
   return theme.colors.neutral['000'];
-}, StyledDayBtn, function (_ref31) {
-  var theme = _ref31.theme;
+}, StyledDayBtn, _ref31 => {
+  let {
+    theme
+  } = _ref31;
   return theme.colors.neutral[500];
-}, diagonalLine, function (_ref32) {
-  var theme = _ref32.theme;
+}, diagonalLine, _ref32 => {
+  let {
+    theme
+  } = _ref32;
   return theme.colors.neutral[500];
-}, StyledDayBtn, function (_ref33) {
-  var theme = _ref33.theme;
+}, StyledDayBtn, _ref33 => {
+  let {
+    theme
+  } = _ref33;
   return theme.colors.danger[900];
-}, StyledDayBtn, focusBorder, function (_ref34) {
-  var theme = _ref34.theme;
+}, StyledDayBtn, focusBorder, _ref34 => {
+  let {
+    theme
+  } = _ref34;
   return theme.colors.brand[600];
-}, function (_ref35) {
-  var theme = _ref35.theme;
+}, _ref35 => {
+  let {
+    theme
+  } = _ref35;
   return theme.colors.brand[700];
-}, StyledDayBtn, function (_ref36) {
-  var theme = _ref36.theme;
+}, StyledDayBtn, _ref36 => {
+  let {
+    theme
+  } = _ref36;
   return theme.colors.danger[900];
-}, function (_ref37) {
-  var theme = _ref37.theme;
+}, _ref37 => {
+  let {
+    theme
+  } = _ref37;
   return theme.colors.danger[900];
-}, StyledDayBtn, function (_ref38) {
-  var theme = _ref38.theme;
+}, StyledDayBtn, _ref38 => {
+  let {
+    theme
+  } = _ref38;
   return theme.colors.neutral[500];
-}, StyledDayBtn, function (_ref39) {
-  var theme = _ref39.theme;
+}, StyledDayBtn, _ref39 => {
+  let {
+    theme
+  } = _ref39;
   return theme.colors.brand[600];
-}, StyledDayBtn, function (_ref40) {
-  var theme = _ref40.theme;
+}, StyledDayBtn, _ref40 => {
+  let {
+    theme
+  } = _ref40;
   return theme.colors.danger[900];
-}, StyledDayBtn, function (_ref41) {
-  var theme = _ref41.theme;
+}, StyledDayBtn, _ref41 => {
+  let {
+    theme
+  } = _ref41;
   return theme.colors.neutral['000'];
-}, StyledDayBtn, function (_ref42) {
-  var theme = _ref42.theme;
+}, StyledDayBtn, _ref42 => {
+  let {
+    theme
+  } = _ref42;
   return theme.colors.neutral['000'];
-}, backgroundDateRange.inRange, StyledDayBtn, function (_ref43) {
-  var theme = _ref43.theme;
+}, backgroundDateRange.inRange, StyledDayBtn, _ref43 => {
+  let {
+    theme
+  } = _ref43;
   return theme.colors.neutral['000'];
-}, function (_ref44) {
-  var theme = _ref44.theme;
+}, _ref44 => {
+  let {
+    theme
+  } = _ref44;
   return theme.colors.danger[900];
-}, function (_ref45) {
-  var theme = _ref45.theme;
+}, _ref45 => {
+  let {
+    theme
+  } = _ref45;
   return theme.colors.neutral['000'];
-}, StyledDayBtn, function (_ref46) {
-  var theme = _ref46.theme;
+}, StyledDayBtn, _ref46 => {
+  let {
+    theme
+  } = _ref46;
   return theme.colors.neutral['000'];
-}, backgroundDateRange.startRange, StyledDayBtn, function (_ref47) {
-  var theme = _ref47.theme;
+}, backgroundDateRange.startRange, StyledDayBtn, _ref47 => {
+  let {
+    theme
+  } = _ref47;
   return theme.colors.neutral['000'];
-}, StyledDayBtn, function (_ref48) {
-  var theme = _ref48.theme;
+}, StyledDayBtn, _ref48 => {
+  let {
+    theme
+  } = _ref48;
   return theme.colors.neutral['000'];
-}, function (_ref49) {
-  var theme = _ref49.theme;
+}, _ref49 => {
+  let {
+    theme
+  } = _ref49;
   return theme.colors.neutral['000'];
-}, backgroundDateRange.endRange, StyledDayBtn, function (_ref50) {
-  var theme = _ref50.theme;
+}, backgroundDateRange.endRange, StyledDayBtn, _ref50 => {
+  let {
+    theme
+  } = _ref50;
   return theme.colors.neutral['000'];
-}, StyledDayBtn, function (_ref51) {
-  var theme = _ref51.theme;
+}, StyledDayBtn, _ref51 => {
+  let {
+    theme
+  } = _ref51;
   return theme.colors.neutral['000'];
-}, function (_ref52) {
-  var theme = _ref52.theme;
+}, _ref52 => {
+  let {
+    theme
+  } = _ref52;
   return theme.colors.neutral['000'];
 });
-var StyledWeekDaysHeaderItem = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledWeekDaysHeaderItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-18gg4kd-8"
-})(["width:", ";min-width:", ";"], function (_ref53) {
-  var theme = _ref53.theme;
+})(["width:", ";min-width:", ";"], _ref53 => {
+  let {
+    theme
+  } = _ref53;
   return theme.space.s;
-}, function (_ref54) {
-  var theme = _ref54.theme;
+}, _ref54 => {
+  let {
+    theme
+  } = _ref54;
   return theme.space.s;
 });
-var CalendarFooterMessage = /*#__PURE__*/styled__default['default'].footer.withConfig({
+const CalendarFooterMessage = /*#__PURE__*/styled__default["default"].footer.withConfig({
   componentId: "sc-18gg4kd-9"
-})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], function (_ref55) {
-  var theme = _ref55.theme;
+})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref55 => {
+  let {
+    theme
+  } = _ref55;
   return theme.colors.neutral[300];
-}, function (_ref56) {
-  var theme = _ref56.theme;
+}, _ref56 => {
+  let {
+    theme
+  } = _ref56;
   return theme.space.xxs2;
-}, function (_ref57) {
-  var theme = _ref57.theme;
+}, _ref57 => {
+  let {
+    theme
+  } = _ref57;
   return theme.space.xxs2;
-}, function (_ref58) {
-  var theme = _ref58.theme;
+}, _ref58 => {
+  let {
+    theme
+  } = _ref58;
   return theme.colors.danger[900];
-}, function (_ref59) {
-  var theme = _ref59.theme;
+}, _ref59 => {
+  let {
+    theme
+  } = _ref59;
   return theme.fontWeights.thin;
-}, function (_ref60) {
-  var theme = _ref60.theme;
+}, _ref60 => {
+  let {
+    theme
+  } = _ref60;
   return theme.fontSizes.microText[200];
 });
 
@@ -243,4 +363,3 @@ exports.StyledIconTriggerButton = StyledIconTriggerButton;
 exports.StyledShadowWrapper = StyledShadowWrapper;
 exports.StyledWeekDaysHeaderItem = StyledWeekDaysHeaderItem;
 exports.StyledWeekDaysListWrapper = StyledWeekDaysListWrapper;
-//# sourceMappingURL=Styleds.js.map