@elliemae/ds-controlled-form 3.0.0-next.1 → 3.0.0-next.5

package/dist/esm/date-time-picker/parts/Pickers/Calendar/Day.js

@@ -0,0 +1,145 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2, { useContext, useCallback, useMemo } from "react";
+import {
+  getDateStringFromDay,
+  getDayFromDateString,
+  getDateValuesFromDate,
+  isSameDateMoment,
+  compareTwoDatesDayEquality
+} from "../../../utils/dateHelpers";
+import { defaultMetaInfo, weekDays } from "../../../utils/constants";
+import { getAriaDayFromDateString } from "../../../utils/stringHelpers";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { CalendarContext } from "./CalendarContext";
+import { StyledDayBtn } from "./Styleds";
+const displayNone = { display: "none" };
+const Day = ({ metaDay, colIndex, isInvisible }) => {
+  const { day, isCurrMonthDay, isHidden, dayBtnRef, dayAsString } = metaDay;
+  const {
+    handleChangeComposedDateString,
+    dateStringFromProps,
+    props: {
+      getIsDisabledDay,
+      getIsOutOfRangeDay,
+      getIsStartRangeDay,
+      getIsDayInRange,
+      getIsEndRangeDay,
+      preventCloseOnSelection,
+      onMonthChange,
+      onDayChange,
+      onYearChange
+    },
+    latestInteractionRegion,
+    setLatestInteractionRegion
+  } = useContext(ControlledDateTimePickerContext);
+  const {
+    handleDayOnKeyDown,
+    focusedDay,
+    handleFocusMetaDayByDay,
+    isWithTimeWheelToo,
+    closeCalendar,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = useContext(CalendarContext);
+  const isFocusedMetaDay = compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day);
+  const isSelected = useMemo(() => {
+    const selectedDate = getDayFromDateString(dateStringFromProps);
+    return isSameDateMoment(day, selectedDate);
+  }, [dateStringFromProps, day]);
+  const isFocused = latestInteractionRegion === "calendar-days" && isFocusedMetaDay;
+  const isDisabled = getIsDisabledDay(metaDay.dayAsString);
+  const isOutOfRange = getIsOutOfRangeDay(metaDay.dayAsString);
+  const isStartRangeDay = getIsStartRangeDay(metaDay.dayAsString);
+  const isEndRangeDay = getIsEndRangeDay(metaDay.dayAsString);
+  const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);
+  const handleOnDayClick = useCallback((e) => {
+    handleFocusMetaDayByDay(day);
+    tryToFocusCurrentlyDataIsFocusedDay();
+    if (!isDisabled && !isOutOfRange) {
+      const newDateString = getDateStringFromDay(day);
+      const metaInfo = __spreadProps(__spreadValues({}, defaultMetaInfo), { newDateString });
+      const { month, day: dayNumber, year } = getDateValuesFromDate(day);
+      onMonthChange(`${month + 1}`, e, metaInfo);
+      onDayChange(`${dayNumber}`, e, metaInfo);
+      onYearChange(`${year}`, e, metaInfo);
+      handleChangeComposedDateString(newDateString, metaInfo);
+      setLatestInteractionRegion("calendar-days");
+      if (!isWithTimeWheelToo && !preventCloseOnSelection)
+        closeCalendar();
+    }
+  }, [
+    isDisabled,
+    isOutOfRange,
+    day,
+    onMonthChange,
+    onDayChange,
+    onYearChange,
+    handleChangeComposedDateString,
+    handleFocusMetaDayByDay,
+    tryToFocusCurrentlyDataIsFocusedDay,
+    setLatestInteractionRegion,
+    isWithTimeWheelToo,
+    preventCloseOnSelection,
+    closeCalendar
+  ]);
+  const handleOnDayFocus = useCallback(() => {
+    setLatestInteractionRegion("calendar-days");
+  }, [setLatestInteractionRegion]);
+  const dayClassModifiers = useMemo(() => `dayWrapper ${isSelected ? "selectedDay " : ""}${isDisabled ? "disabledDay " : ""}${isOutOfRange ? "outOfRangeDay " : ""}${isFocused ? "focusedDay " : ""}${isStartRangeDay ? "startRangeDay " : ""}${isDayInRange ? "inRangeDay " : ""}${isEndRangeDay ? "endRangeDay " : ""}${isCurrMonthDay ? "" : "notCurrentMonth"}`, [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
+  let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;
+  if (isSelected)
+    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
+  if (isFocused)
+    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
+  if (isFocused && isSelected)
+    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;
+  if (isStartRangeDay)
+    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;
+  if (isEndRangeDay)
+    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;
+  if (isDayInRange)
+    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;
+  return /* @__PURE__ */ React2.createElement("div", __spreadValues({
+    className: dayClassModifiers,
+    style: isHidden ? displayNone : void 0,
+    role: !isInvisible ? "gridcell" : void 0
+  }, Number.isInteger(colIndex) && { "aria-colindex": colIndex }), /* @__PURE__ */ React2.createElement(StyledDayBtn, {
+    "aria-label": `${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`,
+    "aria-disabled": isOutOfRange || isDisabled,
+    "aria-hidden": !!isInvisible,
+    buttonType: "raw",
+    size: "m",
+    onClick: handleOnDayClick,
+    onFocus: handleOnDayFocus,
+    onKeyDown: (e) => {
+      handleDayOnKeyDown(e, metaDay);
+    },
+    innerRef: dayBtnRef,
+    tabIndex: isSelected ? 0 : -1,
+    "data-isfocused": isFocused,
+    "data-testid": dataTestid
+  }, `${day.getDate()}`));
+};
+export {
+  Day
+};
+//# sourceMappingURL=Day.js.map

package/dist/esm/date-time-picker/parts/Pickers/Calendar/Day.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/Calendar/Day.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport {\n  getDateStringFromDay,\n  getDayFromDateString,\n  getDateValuesFromDate,\n  isSameDateMoment,\n  compareTwoDatesDayEquality,\n} from '../../../utils/dateHelpers';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport type { metaMonthDayT } from '../../../index.d';\nimport { StyledDayBtn } from './Styleds';\n\ninterface CalendarDayPropsT {\n  metaDay: metaMonthDayT;\n  colIndex?: number;\n  isInvisible?: boolean;\n}\nconst displayNone = { display: 'none' };\n\nexport const Day = ({ metaDay, colIndex, isInvisible }: CalendarDayPropsT): JSX.Element => {\n  const { day, isCurrMonthDay, isHidden, dayBtnRef, dayAsString } = metaDay;\n  const {\n    handleChangeComposedDateString,\n    dateStringFromProps,\n    props: {\n      getIsDisabledDay,\n      getIsOutOfRangeDay,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n      preventCloseOnSelection,\n      onMonthChange,\n      onDayChange,\n      onYearChange,\n    },\n    latestInteractionRegion,\n    setLatestInteractionRegion,\n  } = useContext(ControlledDateTimePickerContext);\n  const {\n    handleDayOnKeyDown,\n    focusedDay,\n    handleFocusMetaDayByDay,\n    isWithTimeWheelToo,\n    closeCalendar,\n    tryToFocusCurrentlyDataIsFocusedDay,\n  } = useContext(CalendarContext);\n  const isFocusedMetaDay = compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day);\n  const isSelected = useMemo(() => {\n    const selectedDate = getDayFromDateString(dateStringFromProps);\n    return isSameDateMoment(day, selectedDate);\n  }, [dateStringFromProps, day]);\n  const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;\n  const isDisabled = getIsDisabledDay(metaDay.dayAsString);\n  const isOutOfRange = getIsOutOfRangeDay(metaDay.dayAsString);\n  const isStartRangeDay = getIsStartRangeDay(metaDay.dayAsString);\n  const isEndRangeDay = getIsEndRangeDay(metaDay.dayAsString);\n  const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);\n\n  const handleOnDayClick = useCallback(\n    (e) => {\n      handleFocusMetaDayByDay(day);\n      tryToFocusCurrentlyDataIsFocusedDay();\n      if (!isDisabled && !isOutOfRange) {\n        const newDateString = getDateStringFromDay(day);\n        const metaInfo = { ...defaultMetaInfo, newDateString };\n        const { month, day: dayNumber, year } = getDateValuesFromDate(day);\n        onMonthChange(`${month + 1}`, e, metaInfo);\n        onDayChange(`${dayNumber}`, e, metaInfo);\n        onYearChange(`${year}`, e, metaInfo);\n        handleChangeComposedDateString(newDateString, metaInfo);\n        setLatestInteractionRegion('calendar-days');\n        if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();\n      }\n    },\n    [\n      isDisabled,\n      isOutOfRange,\n      day,\n      onMonthChange,\n      onDayChange,\n      onYearChange,\n      handleChangeComposedDateString,\n      handleFocusMetaDayByDay,\n      tryToFocusCurrentlyDataIsFocusedDay,\n      setLatestInteractionRegion,\n      isWithTimeWheelToo,\n      preventCloseOnSelection,\n      closeCalendar,\n    ],\n  );\n\n  const handleOnDayFocus = useCallback(() => {\n    setLatestInteractionRegion('calendar-days');\n  }, [setLatestInteractionRegion]);\n\n  const dayClassModifiers = useMemo(\n    () =>\n      `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${\n        isOutOfRange ? 'outOfRangeDay ' : ''\n      }${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${\n        isEndRangeDay ? 'endRangeDay ' : ''\n      }${isCurrMonthDay ? '' : 'notCurrentMonth'}`,\n    [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay],\n  );\n\n  let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;\n  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;\n  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;\n  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;\n  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;\n  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;\n  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;\n  return (\n    <div\n      className={dayClassModifiers}\n      style={isHidden ? displayNone : undefined}\n      role={!isInvisible ? 'gridcell' : undefined}\n      {...(Number.isInteger(colIndex) && { 'aria-colindex': colIndex })}\n    >\n      <StyledDayBtn\n        aria-label={`${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`}\n        aria-disabled={isOutOfRange || isDisabled}\n        aria-hidden={!!isInvisible}\n        buttonType=\"raw\"\n        size=\"m\"\n        onClick={handleOnDayClick} // DSButton triggers this with \"spacebar\" and \"enter\" too...\n        onFocus={handleOnDayFocus}\n        onKeyDown={(e) => {\n          handleDayOnKeyDown(e, metaDay);\n        }}\n        innerRef={dayBtnRef}\n        tabIndex={isSelected ? 0 : -1}\n        data-isfocused={isFocused}\n        data-testid={dataTestid}\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,327 @@
+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`
+    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 = 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]};
+        }
+      }
+    }
+  }
+
+  .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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/Calendar/Styleds.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\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 diagonalLine = css`\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: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\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`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\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 StyledShadowWrapper = styled.div<{ isControllerOnly: boolean }>`\n  ${({ isControllerOnly }) =>\n    isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);'}\n`;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n  h3 {\n    font-size: 1rem;\n  }\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2)`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2)`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledWeekDaysListWrapper = styled(Grid)`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    ${backgroundDateRange.startRange}\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    ${backgroundDateRange.endRange}\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = 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"],
+  "mappings": "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",
+  "names": []
+}