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

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

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