@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/Calendar/CalendarHeader/CalendarHeader.js

@@ -0,0 +1,213 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "value", "locale", "classes", "onChange", "showEndDate", "onFocus"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
+import { Info } from "@hitachivantara/uikit-react-icons";
+import dayjs from "dayjs";
+import localeData from "dayjs/plugin/localeData";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import clsx from "clsx";
+import isNil from "lodash/isNil";
+import { withStyles } from "@material-ui/core";
+import { setId, isKeypress, KeyboardCodes } from "../../utils";
+import HvTypography from "../../Typography";
+import styles from "./styles";
+import { HvFormElementContext, HvFormElementValueContext, HvFormElementDescriptorsContext } from "../../Forms/FormElement";
+import { isRange, isSameDay, formatDMY } from "../utils";
+dayjs.extend(localeData);
+dayjs.extend(localizedFormat);
+dayjs.extend(customParseFormat);
+const {
+  Enter
+} = KeyboardCodes;
+
+const HvCalendarHeader = _ref => {
+  var _ref2, _label$;
+
+  let {
+    id,
+    value,
+    locale,
+    classes,
+    onChange,
+    showEndDate,
+    onFocus
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    elementId
+  } = useContext(HvFormElementContext);
+  const elementValue = useContext(HvFormElementValueContext);
+  const {
+    label
+  } = useContext(HvFormElementDescriptorsContext);
+  let localValue = (_ref2 = value !== null && value !== void 0 ? value : elementValue) !== null && _ref2 !== void 0 ? _ref2 : "";
+
+  if (isRange(localValue)) {
+    localValue = showEndDate ? localValue.endDate : localValue.startDate;
+  }
+
+  const [dateValue, setDateValue] = useState(localValue);
+  const [editedValue, setEditedValue] = useState(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [weekdayDisplay, setWeekdayDisplay] = useState("");
+  const localId = id !== null && id !== void 0 ? id : setId(elementId, "calendarHeader");
+  const inputValue = editedValue !== null && editedValue !== void 0 ? editedValue : displayValue;
+  const localeFormat = dayjs().locale(locale).localeData().longDateFormat("L");
+  const [isValidValue, setIsValidValue] = useState(inputValue.length === 0 || !!inputValue && dayjs(localValue).isValid());
+
+  const validateInput = incomingValid => incomingValid === undefined || dayjs(incomingValid).isValid();
+
+  useEffect(() => {
+    const valid = validateInput(localValue);
+    setIsValidValue(valid);
+
+    if (valid) {
+      if (!localValue) {
+        setDisplayValue("");
+        setEditedValue(null);
+        setWeekdayDisplay("");
+        return;
+      }
+
+      const weekday = new Intl.DateTimeFormat(locale, {
+        weekday: "short"
+      }).format(localValue);
+      setDisplayValue(formatDMY(localValue, locale));
+      setEditedValue(null);
+      setWeekdayDisplay(weekday);
+    }
+  }, [localValue, locale]);
+
+  const handleNewDate = (event, date) => {
+    // attempt to format in locale data, or fallback to default
+    const localeParsedDate = dayjs(date, localeFormat);
+    const isValidInput = localeParsedDate.isValid();
+    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs(date).toDate(); // prevent extra updates
+
+    if (!isSameDay(dateParsed, dateValue)) {
+      setDateValue(dateParsed);
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, dateParsed);
+    }
+
+    setIsValidValue(isValidInput);
+
+    if (isValidInput) {
+      setEditedValue(null);
+    }
+  };
+
+  const onBlurHandler = event => {
+    if (isNil(editedValue)) return;
+
+    if (editedValue === "") {
+      setIsValidValue(true);
+      setEditedValue(null);
+      return;
+    }
+
+    handleNewDate(event, editedValue);
+  };
+
+  const keyDownHandler = event => {
+    if (!isKeypress(event, Enter) || isNil(editedValue) || editedValue === "") return;
+    event.preventDefault();
+    handleNewDate(event, editedValue);
+  };
+
+  const onFocusHandler = event => {
+    if (!localValue) return;
+    const formattedDate = isValidValue ? dayjs(localValue).locale(locale).format("L") : editedValue;
+    setEditedValue(formattedDate);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, formattedDate);
+  };
+
+  const onChangeHandler = event => {
+    setEditedValue(event.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: localId,
+    className: clsx(classes.root, !isValidValue && inputValue !== "" && classes.invalid)
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "normalText",
+    className: classes.headerDayOfWeek
+  }, weekdayDisplay || "\u00A0"), /*#__PURE__*/React.createElement("div", {
+    className: classes.headerDate
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "text",
+    id: setId(localId, "header-input"),
+    placeholder: localeFormat,
+    value: inputValue,
+    className: classes.input,
+    onBlur: onBlurHandler,
+    onFocus: onFocusHandler,
+    onChange: onChangeHandler,
+    onKeyDown: keyDownHandler,
+    "aria-labelledby": label === null || label === void 0 ? void 0 : (_label$ = label[0]) === null || _label$ === void 0 ? void 0 : _label$.id
+  }, others)))), !isValidValue && inputValue !== "" && /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: classes.inputBorderContainer
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 32
+    }
+  }, !isValidValue && inputValue !== "" && /*#__PURE__*/React.createElement(HvTypography, {
+    component: "span",
+    variant: "normalText",
+    className: classes.invalidMessageStyling
+  }, /*#__PURE__*/React.createElement(Info, {
+    color: "acce3",
+    iconSize: "S"
+  }), "Invalid date")));
+}; // TODO: refactor this out
+
+
+HvCalendarHeader.formElementType = "HvCalendarHeader";
+HvCalendarHeader.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Identifier.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The text to be shown on the main part of the header.
+   */
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.shape({
+    startDate: PropTypes.instanceOf(Date),
+    endDate: PropTypes.instanceOf(Date)
+  })]),
+
+  /**
+   * Locale to be used by the calendar.
+   */
+  locale: PropTypes.string.isRequired,
+
+  /**
+   * Callback to define the input date.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Callback to handle input onFocus.
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Indicates if header should display end date in a date range.
+   */
+  showEndDate: PropTypes.bool
+};
+export default withStyles(styles, {
+  name: "HvCalendarHeader"
+})(HvCalendarHeader);
+//# sourceMappingURL=CalendarHeader.js.map

package/dist/modern/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.js"],"names":["React","useState","useEffect","useContext","PropTypes","Info","dayjs","localeData","localizedFormat","customParseFormat","clsx","isNil","withStyles","setId","isKeypress","KeyboardCodes","HvTypography","styles","HvFormElementContext","HvFormElementValueContext","HvFormElementDescriptorsContext","isRange","isSameDay","formatDMY","extend","Enter","HvCalendarHeader","id","value","locale","classes","onChange","showEndDate","onFocus","others","elementId","elementValue","label","localValue","endDate","startDate","dateValue","setDateValue","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","valid","weekday","Intl","DateTimeFormat","format","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","onBlurHandler","keyDownHandler","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","height","invalidMessageStyling","formElementType","propTypes","instanceOf","Object","isRequired","string","oneOfType","Date","shape","func","bool","name"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles } from \"@material-ui/core\";\nimport { setId, isKeypress, KeyboardCodes } from \"../../utils\";\nimport HvTypography from \"../../Typography\";\nimport styles from \"./styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"../../Forms/FormElement\";\nimport { isRange, isSameDay, formatDMY } from \"../utils\";\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nconst { Enter } = KeyboardCodes;\n\nconst HvCalendarHeader = ({\n  id,\n  value,\n  locale,\n  classes,\n  onChange,\n  showEndDate,\n  onFocus,\n  ...others\n}) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue = value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState(localValue);\n  const [editedValue, setEditedValue] = useState(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, { weekday: \"short\" }).format(localValue);\n      setDisplayValue(formatDMY(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKeypress(event, Enter) || isNil(editedValue) || editedValue === \"\") return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate = isValidValue ? dayjs(localValue).locale(locale).format(\"L\") : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <div\n        id={localId}\n        className={clsx(classes.root, {\n          [classes.invalid]: !isValidValue && inputValue !== \"\",\n        })}\n      >\n        <HvTypography variant=\"normalText\" className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n        <div className={classes.headerDate}>\n          <input\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={classes.input}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </div>\n      {!isValidValue && inputValue !== \"\" && (\n        <div role=\"presentation\" className={classes.inputBorderContainer} />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"normalText\"\n            className={classes.invalidMessageStyling}\n          >\n            <Info color=\"acce3\" iconSize=\"S\" />\n            Invalid date\n          </HvTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nHvCalendarHeader.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value: PropTypes.oneOfType([\n    PropTypes.instanceOf(Date),\n    PropTypes.string,\n    PropTypes.shape({ startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date) }),\n  ]),\n\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale: PropTypes.string.isRequired,\n  /**\n   * Callback to define the input date.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus: PropTypes.func,\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvCalendarHeader\" })(HvCalendarHeader);\n"],"file":"CalendarHeader.js"}

package/dist/modern/Calendar/CalendarHeader/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./CalendarHeader";

package/dist/modern/Calendar/CalendarHeader/index.js

@@ -0,0 +1,2 @@
+export { default } from "./CalendarHeader";
+//# sourceMappingURL=index.js.map

package/dist/modern/Calendar/CalendarHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Calendar/CalendarHeader/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,kBAAxB","sourcesContent":["export { default } from \"./CalendarHeader\";\n"],"file":"index.js"}

package/dist/modern/Calendar/CalendarHeader/styles.js

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { outlineStyles } from "../../Focus/styles";
+
+const styles = theme => ({
+  rangeLabel: {
+    paddingBottom: theme.hvSpacing("xs")
+  },
+  root: {
+    marginTop: theme.hvSpacing("xs"),
+    backgroundColor: theme.palette.atmo1,
+    borderBottom: `1px solid ${theme.palette.atmo4}`,
+    borderTop: "1px solid transparent",
+    borderLeft: "1px solid transparent",
+    borderRight: "1px solid transparent",
+    "&:hover, &:focus": {
+      borderBottom: `1px solid ${theme.palette.acce1}`
+    }
+  },
+  headerDayOfWeek: {
+    paddingLeft: theme.hvSpacing("xs")
+  },
+  headerDate: {},
+  invalidMessageStyling: {
+    display: "flex",
+    alignItems: "center",
+    color: theme.hv.palette.semantic.sema4
+  },
+  inputBorderContainer: {
+    backgroundColor: theme.hv.palette.semantic.sema4,
+    height: 1,
+    marginTop: -1
+  },
+  invalid: {},
+  input: _objectSpread(_objectSpread({
+    border: "none",
+    backgroundColor: "transparent",
+    padding: `5px ${theme.hvSpacing("xs")}`,
+    fontFamily: theme.hv.typography.fontFamily
+  }, theme.hv.typography.xsTitle), {}, {
+    width: "100%",
+    "&::placeholder": {
+      color: theme.palette.atmo5
+    },
+    "&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator": {
+      " -webkit-appearance": "none",
+      display: "none"
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&.focus-visible": _objectSpread({}, outlineStyles)
+  })
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Calendar/CalendarHeader/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Calendar/CalendarHeader/styles.js"],"names":["outlineStyles","styles","theme","rangeLabel","paddingBottom","hvSpacing","root","marginTop","backgroundColor","palette","atmo1","borderBottom","atmo4","borderTop","borderLeft","borderRight","acce1","headerDayOfWeek","paddingLeft","headerDate","invalidMessageStyling","display","alignItems","color","hv","semantic","sema4","inputBorderContainer","height","invalid","input","border","padding","fontFamily","typography","xsTitle","width","atmo5","outline"],"mappings":";;;;;;AAAA,SAASA,aAAT,QAA8B,oBAA9B;;AAEA,MAAMC,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,UAAU,EAAE;AACVC,IAAAA,aAAa,EAAEF,KAAK,CAACG,SAAN,CAAgB,IAAhB;AADL,GADa;AAIzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,SAAS,EAAEL,KAAK,CAACG,SAAN,CAAgB,IAAhB,CADP;AAEJG,IAAAA,eAAe,EAAEN,KAAK,CAACO,OAAN,CAAcC,KAF3B;AAGJC,IAAAA,YAAY,EAAG,aAAYT,KAAK,CAACO,OAAN,CAAcG,KAAM,EAH3C;AAIJC,IAAAA,SAAS,EAAE,uBAJP;AAKJC,IAAAA,UAAU,EAAE,uBALR;AAMJC,IAAAA,WAAW,EAAE,uBANT;AAOJ,wBAAoB;AAClBJ,MAAAA,YAAY,EAAG,aAAYT,KAAK,CAACO,OAAN,CAAcO,KAAM;AAD7B;AAPhB,GAJmB;AAezBC,EAAAA,eAAe,EAAE;AACfC,IAAAA,WAAW,EAAEhB,KAAK,CAACG,SAAN,CAAgB,IAAhB;AADE,GAfQ;AAkBzBc,EAAAA,UAAU,EAAE,EAlBa;AAmBzBC,EAAAA,qBAAqB,EAAE;AACrBC,IAAAA,OAAO,EAAE,MADY;AAErBC,IAAAA,UAAU,EAAE,QAFS;AAGrBC,IAAAA,KAAK,EAAErB,KAAK,CAACsB,EAAN,CAASf,OAAT,CAAiBgB,QAAjB,CAA0BC;AAHZ,GAnBE;AAwBzBC,EAAAA,oBAAoB,EAAE;AACpBnB,IAAAA,eAAe,EAAEN,KAAK,CAACsB,EAAN,CAASf,OAAT,CAAiBgB,QAAjB,CAA0BC,KADvB;AAEpBE,IAAAA,MAAM,EAAE,CAFY;AAGpBrB,IAAAA,SAAS,EAAE,CAAC;AAHQ,GAxBG;AA6BzBsB,EAAAA,OAAO,EAAE,EA7BgB;AA8BzBC,EAAAA,KAAK;AACHC,IAAAA,MAAM,EAAE,MADL;AAEHvB,IAAAA,eAAe,EAAE,aAFd;AAGHwB,IAAAA,OAAO,EAAG,OAAM9B,KAAK,CAACG,SAAN,CAAgB,IAAhB,CAAsB,EAHnC;AAIH4B,IAAAA,UAAU,EAAE/B,KAAK,CAACsB,EAAN,CAASU,UAAT,CAAoBD;AAJ7B,KAKA/B,KAAK,CAACsB,EAAN,CAASU,UAAT,CAAoBC,OALpB;AAMHC,IAAAA,KAAK,EAAE,MANJ;AAOH,sBAAkB;AAChBb,MAAAA,KAAK,EAAErB,KAAK,CAACO,OAAN,CAAc4B;AADL,KAPf;AAUH,0EAAsE;AACpE,6BAAuB,MAD6C;AAEpEhB,MAAAA,OAAO,EAAE;AAF2D,KAVnE;AAcH,eAAW;AACTiB,MAAAA,OAAO,EAAE;AADA,KAdR;AAiBH,yCACKtC,aADL;AAjBG;AA9BoB,CAAZ,CAAf;;AAqDA,eAAeC,MAAf","sourcesContent":["import { outlineStyles } from \"../../Focus/styles\";\n\nconst styles = (theme) => ({\n  rangeLabel: {\n    paddingBottom: theme.hvSpacing(\"xs\"),\n  },\n  root: {\n    marginTop: theme.hvSpacing(\"xs\"),\n    backgroundColor: theme.palette.atmo1,\n    borderBottom: `1px solid ${theme.palette.atmo4}`,\n    borderTop: \"1px solid transparent\",\n    borderLeft: \"1px solid transparent\",\n    borderRight: \"1px solid transparent\",\n    \"&:hover, &:focus\": {\n      borderBottom: `1px solid ${theme.palette.acce1}`,\n    },\n  },\n  headerDayOfWeek: {\n    paddingLeft: theme.hvSpacing(\"xs\"),\n  },\n  headerDate: {},\n  invalidMessageStyling: {\n    display: \"flex\",\n    alignItems: \"center\",\n    color: theme.hv.palette.semantic.sema4,\n  },\n  inputBorderContainer: {\n    backgroundColor: theme.hv.palette.semantic.sema4,\n    height: 1,\n    marginTop: -1,\n  },\n  invalid: {},\n  input: {\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    padding: `5px ${theme.hvSpacing(\"xs\")}`,\n    fontFamily: theme.hv.typography.fontFamily,\n    ...theme.hv.typography.xsTitle,\n    width: \"100%\",\n    \"&::placeholder\": {\n      color: theme.palette.atmo5,\n    },\n    \"&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator\": {\n      \" -webkit-appearance\": \"none\",\n      display: \"none\",\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&.focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "id", "locale", "onChange", "onViewModeChange", "visibleYear", "visibleMonth"];
+import React from "react";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import Navigation from "../Navigation";
+import { setId } from "../../../utils";
+import { getMonthNamesList } from "../../utils";
+import { NAV_OPTIONS, VIEW_MODE, REPRESENTATION_VALUES } from "../../enums";
+import styles from "./styles";
+
+const HvComposedNavigation = _ref => {
+  let {
+    classes,
+    id,
+    locale,
+    onChange,
+    onViewModeChange,
+    visibleYear,
+    visibleMonth
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const listMonthNamesLong = getMonthNamesList(locale, REPRESENTATION_VALUES.LONG);
+  const monthName = listMonthNamesLong[visibleMonth - 1];
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classes.navigationContainer
+  }, others), /*#__PURE__*/React.createElement("div", {
+    className: classes.navigationMonth
+  }, /*#__PURE__*/React.createElement(Navigation, {
+    id: setId(id, "navigation-month"),
+    navigationText: monthName,
+    onNavigatePrevious: event => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, NAV_OPTIONS.PREVIOUS_MONTH);
+    },
+    onNavigateNext: event => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, NAV_OPTIONS.NEXT_MONTH);
+    },
+    onTextClick: () => {
+      onViewModeChange(VIEW_MODE.MONTHLY);
+    },
+    className: classes.navigationMonth
+  })), /*#__PURE__*/React.createElement(Navigation, {
+    id: setId(id, "navigation-year"),
+    navigationText: visibleYear.toString(),
+    onNavigatePrevious: event => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, NAV_OPTIONS.PREVIOUS_YEAR);
+    },
+    onNavigateNext: event => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, NAV_OPTIONS.NEXT_YEAR);
+    }
+  }));
+};
+
+HvComposedNavigation.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Identifier.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Locale to be used by the calendar.
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Callback to define the input date.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Callback to define the input date.
+   */
+  onViewModeChange: PropTypes.func,
+
+  /**
+   * Controls the visible month of the Calendar
+   */
+  visibleMonth: PropTypes.number,
+
+  /**
+   * Controls the visible month of the Calendar
+   */
+  visibleYear: PropTypes.number
+};
+export default withStyles(styles, {
+  name: "HvComposedNavigation"
+})(HvComposedNavigation);
+//# sourceMappingURL=ComposedNavigation.js.map

package/dist/modern/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js"],"names":["React","PropTypes","withStyles","Navigation","setId","getMonthNamesList","NAV_OPTIONS","VIEW_MODE","REPRESENTATION_VALUES","styles","HvComposedNavigation","classes","id","locale","onChange","onViewModeChange","visibleYear","visibleMonth","others","listMonthNamesLong","LONG","monthName","navigationContainer","navigationMonth","event","PREVIOUS_MONTH","NEXT_MONTH","MONTHLY","toString","PREVIOUS_YEAR","NEXT_YEAR","propTypes","instanceOf","Object","isRequired","string","func","number","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport Navigation from \"../Navigation\";\nimport { setId } from \"../../../utils\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { NAV_OPTIONS, VIEW_MODE, REPRESENTATION_VALUES } from \"../../enums\";\nimport styles from \"./styles\";\n\nconst HvComposedNavigation = ({\n  classes,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  visibleYear,\n  visibleMonth,\n  ...others\n}) => {\n  const listMonthNamesLong = getMonthNamesList(locale, REPRESENTATION_VALUES.LONG);\n  const monthName = listMonthNamesLong[visibleMonth - 1];\n\n  return (\n    <div className={classes.navigationContainer} {...others}>\n      <div className={classes.navigationMonth}>\n        <Navigation\n          id={setId(id, \"navigation-month\")}\n          navigationText={monthName}\n          onNavigatePrevious={(event) => {\n            onChange?.(event, NAV_OPTIONS.PREVIOUS_MONTH);\n          }}\n          onNavigateNext={(event) => {\n            onChange?.(event, NAV_OPTIONS.NEXT_MONTH);\n          }}\n          onTextClick={() => {\n            onViewModeChange(VIEW_MODE.MONTHLY);\n          }}\n          className={classes.navigationMonth}\n        />\n      </div>\n\n      <Navigation\n        id={setId(id, \"navigation-year\")}\n        navigationText={visibleYear.toString()}\n        onNavigatePrevious={(event) => {\n          onChange?.(event, NAV_OPTIONS.PREVIOUS_YEAR);\n        }}\n        onNavigateNext={(event) => {\n          onChange?.(event, NAV_OPTIONS.NEXT_YEAR);\n        }}\n      />\n    </div>\n  );\n};\n\nHvComposedNavigation.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale: PropTypes.string,\n  /**\n   * Callback to define the input date.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback to define the input date.\n   */\n  onViewModeChange: PropTypes.func,\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth: PropTypes.number,\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvComposedNavigation\" })(HvComposedNavigation);\n"],"file":"ComposedNavigation.js"}

package/dist/modern/Calendar/CalendarNavigation/ComposedNavigation/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ComposedNavigation";

package/dist/modern/Calendar/CalendarNavigation/ComposedNavigation/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ComposedNavigation";
+//# sourceMappingURL=index.js.map

package/dist/modern/Calendar/CalendarNavigation/ComposedNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,sBAAxB","sourcesContent":["export { default } from \"./ComposedNavigation\";\n"],"file":"index.js"}

package/dist/modern/Calendar/CalendarNavigation/ComposedNavigation/styles.js

@@ -0,0 +1,13 @@
+const styles = theme => ({
+  navigationContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    padding: theme.hvSpacing("xs", 0)
+  },
+  navigationMonth: {
+    minWidth: "160px"
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Calendar/CalendarNavigation/ComposedNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/styles.js"],"names":["styles","theme","navigationContainer","display","justifyContent","padding","hvSpacing","navigationMonth","minWidth"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,mBAAmB,EAAE;AACnBC,IAAAA,OAAO,EAAE,MADU;AAEnBC,IAAAA,cAAc,EAAE,eAFG;AAGnBC,IAAAA,OAAO,EAAEJ,KAAK,CAACK,SAAN,CAAgB,IAAhB,EAAsB,CAAtB;AAHU,GADI;AAMzBC,EAAAA,eAAe,EAAE;AACfC,IAAAA,QAAQ,EAAE;AADK;AANQ,CAAZ,CAAf;;AAWA,eAAeR,MAAf","sourcesContent":["const styles = (theme) => ({\n  navigationContainer: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    padding: theme.hvSpacing(\"xs\", 0),\n  },\n  navigationMonth: {\n    minWidth: \"160px\",\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "id", "locale", "onChange", "onViewModeChange", "rangeMode", "visibleMonth"];
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { isKeypress, KeyboardCodes } from "../../../utils";
+import { getMonthNamesList } from "../../utils";
+import { NAV_OPTIONS, VIEW_MODE, REPRESENTATION_VALUES } from "../../enums";
+import { HvTypography } from "../../..";
+import styles from "./styles";
+
+const HvMonthSelector = _ref => {
+  let {
+    classes,
+    id,
+    locale,
+    onChange,
+    onViewModeChange,
+    rangeMode,
+    visibleMonth
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const listMonthNamesShort = getMonthNamesList(locale, REPRESENTATION_VALUES.SHORT);
+
+  const onKeyDownHandler = (event, index) => {
+    if (isKeypress(event, KeyboardCodes.Enter)) {
+      onChange(event, NAV_OPTIONS.MONTH, index + 1);
+      onViewModeChange(VIEW_MODE.CALENDAR);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.calendarMonthlyGrid, rangeMode ? classes.rangeModeWidth : classes.normalWidth)
+  }, listMonthNamesShort.map((monthName, index) => /*#__PURE__*/React.createElement("div", _extends({
+    className: classes.focusSelection,
+    key: monthName,
+    role: "button",
+    onClick: event => {
+      onChange(event, NAV_OPTIONS.MONTH, index + 1);
+      onViewModeChange(VIEW_MODE.CALENDAR);
+    },
+    onKeyDown: event => onKeyDownHandler(event, index),
+    tabIndex: 0
+  }, others), /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "normalText",
+    className: clsx(classes.calendarMonthlyCell, index + 1 === visibleMonth && classes.calendarMonthlyCellSelected)
+  }, monthName))));
+};
+
+HvMonthSelector.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Identifier.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Locale to be used by the calendar.
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Callback to define the input date.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Callback to define the input date.
+   */
+  onViewModeChange: PropTypes.func,
+
+  /**
+   * Controls the visible month of the Calendar
+   */
+  visibleMonth: PropTypes.number,
+
+  /**
+   * Controls the visible month of the Calendar
+   */
+  visibleYear: PropTypes.number,
+  rangeMode: PropTypes.bool
+};
+export default withStyles(styles, {
+  name: "HvMonthSelector"
+})(HvMonthSelector);
+//# sourceMappingURL=MonthSelector.js.map

package/dist/modern/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js"],"names":["React","PropTypes","clsx","withStyles","isKeypress","KeyboardCodes","getMonthNamesList","NAV_OPTIONS","VIEW_MODE","REPRESENTATION_VALUES","HvTypography","styles","HvMonthSelector","classes","id","locale","onChange","onViewModeChange","rangeMode","visibleMonth","others","listMonthNamesShort","SHORT","onKeyDownHandler","event","index","Enter","MONTH","CALENDAR","calendarMonthlyGrid","rangeModeWidth","normalWidth","map","monthName","focusSelection","calendarMonthlyCell","calendarMonthlyCellSelected","propTypes","instanceOf","Object","isRequired","string","func","number","visibleYear","bool","name"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,UAAT,EAAqBC,aAArB,QAA0C,gBAA1C;AACA,SAASC,iBAAT,QAAkC,aAAlC;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,qBAAjC,QAA8D,aAA9D;AACA,SAASC,YAAT,QAA6B,UAA7B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,eAAe,GAAG,QASlB;AAAA,MATmB;AACvBC,IAAAA,OADuB;AAEvBC,IAAAA,EAFuB;AAGvBC,IAAAA,MAHuB;AAIvBC,IAAAA,QAJuB;AAKvBC,IAAAA,gBALuB;AAMvBC,IAAAA,SANuB;AAOvBC,IAAAA;AAPuB,GASnB;AAAA,MADDC,MACC;;AACJ,QAAMC,mBAAmB,GAAGf,iBAAiB,CAACS,MAAD,EAASN,qBAAqB,CAACa,KAA/B,CAA7C;;AACA,QAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,KAAR,KAAkB;AACzC,QAAIrB,UAAU,CAACoB,KAAD,EAAQnB,aAAa,CAACqB,KAAtB,CAAd,EAA4C;AAC1CV,MAAAA,QAAQ,CAACQ,KAAD,EAAQjB,WAAW,CAACoB,KAApB,EAA2BF,KAAK,GAAG,CAAnC,CAAR;AACAR,MAAAA,gBAAgB,CAACT,SAAS,CAACoB,QAAX,CAAhB;AACD;AACF,GALD;;AAMA,sBACE;AACE,IAAA,SAAS,EAAE1B,IAAI,CAACW,OAAO,CAACgB,mBAAT,EACaX,SADb,GACZL,OAAO,CAACiB,cADI,GAEZjB,OAAO,CAACkB,WAFI;AADjB,KAMGV,mBAAmB,CAACW,GAApB,CAAwB,CAACC,SAAD,EAAYR,KAAZ,kBACvB;AACE,IAAA,SAAS,EAAEZ,OAAO,CAACqB,cADrB;AAEE,IAAA,GAAG,EAAED,SAFP;AAGE,IAAA,IAAI,EAAC,QAHP;AAIE,IAAA,OAAO,EAAGT,KAAD,IAAW;AAClBR,MAAAA,QAAQ,CAACQ,KAAD,EAAQjB,WAAW,CAACoB,KAApB,EAA2BF,KAAK,GAAG,CAAnC,CAAR;AACAR,MAAAA,gBAAgB,CAACT,SAAS,CAACoB,QAAX,CAAhB;AACD,KAPH;AAQE,IAAA,SAAS,EAAGJ,KAAD,IAAWD,gBAAgB,CAACC,KAAD,EAAQC,KAAR,CARxC;AASE,IAAA,QAAQ,EAAE;AATZ,KAUML,MAVN,gBAYE,oBAAC,YAAD;AACE,IAAA,OAAO,EAAC,YADV;AAEE,IAAA,SAAS,EAAElB,IAAI,CAACW,OAAO,CAACsB,mBAAT,EAC0BV,KAAK,GAAG,CAAR,KAAcN,YADxC,IACZN,OAAO,CAACuB,2BADI;AAFjB,KAMGH,SANH,CAZF,CADD,CANH,CADF;AAgCD,CAjDD;;AAmDArB,eAAe,CAACyB,SAAhB,GAA4B;AAC1B;AACF;AACA;AACExB,EAAAA,OAAO,EAAEZ,SAAS,CAACqC,UAAV,CAAqBC,MAArB,EAA6BC,UAJZ;;AAK1B;AACF;AACA;AACE1B,EAAAA,EAAE,EAAEb,SAAS,CAACwC,MARY;;AAS1B;AACF;AACA;AACE1B,EAAAA,MAAM,EAAEd,SAAS,CAACwC,MAZQ;;AAa1B;AACF;AACA;AACEzB,EAAAA,QAAQ,EAAEf,SAAS,CAACyC,IAhBM;;AAiB1B;AACF;AACA;AACEzB,EAAAA,gBAAgB,EAAEhB,SAAS,CAACyC,IApBF;;AAqB1B;AACF;AACA;AACEvB,EAAAA,YAAY,EAAElB,SAAS,CAAC0C,MAxBE;;AAyB1B;AACF;AACA;AACEC,EAAAA,WAAW,EAAE3C,SAAS,CAAC0C,MA5BG;AA6B1BzB,EAAAA,SAAS,EAAEjB,SAAS,CAAC4C;AA7BK,CAA5B;AAgCA,eAAe1C,UAAU,CAACQ,MAAD,EAAS;AAAEmC,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAgDlC,eAAhD,CAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { isKeypress, KeyboardCodes } from \"../../../utils\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { NAV_OPTIONS, VIEW_MODE, REPRESENTATION_VALUES } from \"../../enums\";\nimport { HvTypography } from \"../../..\";\nimport styles from \"./styles\";\n\nconst HvMonthSelector = ({\n  classes,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  rangeMode,\n  visibleMonth,\n  ...others\n}) => {\n  const listMonthNamesShort = getMonthNamesList(locale, REPRESENTATION_VALUES.SHORT);\n  const onKeyDownHandler = (event, index) => {\n    if (isKeypress(event, KeyboardCodes.Enter)) {\n      onChange(event, NAV_OPTIONS.MONTH, index + 1);\n      onViewModeChange(VIEW_MODE.CALENDAR);\n    }\n  };\n  return (\n    <div\n      className={clsx(classes.calendarMonthlyGrid, {\n        [classes.rangeModeWidth]: rangeMode,\n        [classes.normalWidth]: !rangeMode,\n      })}\n    >\n      {listMonthNamesShort.map((monthName, index) => (\n        <div\n          className={classes.focusSelection}\n          key={monthName}\n          role=\"button\"\n          onClick={(event) => {\n            onChange(event, NAV_OPTIONS.MONTH, index + 1);\n            onViewModeChange(VIEW_MODE.CALENDAR);\n          }}\n          onKeyDown={(event) => onKeyDownHandler(event, index)}\n          tabIndex={0}\n          {...others}\n        >\n          <HvTypography\n            variant=\"normalText\"\n            className={clsx(classes.calendarMonthlyCell, {\n              [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth,\n            })}\n          >\n            {monthName}\n          </HvTypography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nHvMonthSelector.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale: PropTypes.string,\n  /**\n   * Callback to define the input date.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback to define the input date.\n   */\n  onViewModeChange: PropTypes.func,\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth: PropTypes.number,\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear: PropTypes.number,\n  rangeMode: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvMonthSelector\" })(HvMonthSelector);\n"],"file":"MonthSelector.js"}

package/dist/modern/Calendar/CalendarNavigation/MonthSelector/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./MonthSelector";

package/dist/modern/Calendar/CalendarNavigation/MonthSelector/index.js

@@ -0,0 +1,2 @@
+export { default } from "./MonthSelector";
+//# sourceMappingURL=index.js.map

package/dist/modern/Calendar/CalendarNavigation/MonthSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB","sourcesContent":["export { default } from \"./MonthSelector\";\n"],"file":"index.js"}

package/dist/modern/Calendar/CalendarNavigation/MonthSelector/styles.js

@@ -0,0 +1,57 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { outlineStyles } from "../../../Focus/styles";
+
+const styles = theme => {
+  const hover = {
+    backgroundColor: theme.palette.atmo3,
+    cursor: "pointer"
+  };
+  return {
+    focusSelection: {
+      "&:hover": _objectSpread({}, hover),
+      "&:focus": {
+        outline: "none"
+      },
+      "&.focus-visible": _objectSpread(_objectSpread({}, hover), outlineStyles)
+    },
+    calendarMonthlyGrid: {
+      marginTop: "50px",
+      marginLeft: "-20px",
+      display: "flex",
+      zIndex: "10",
+      padding: "0 20px",
+      position: "absolute",
+      flexFlow: "wrap",
+      alignContent: "center",
+      justifyContent: "space-evenly",
+      backgroundColor: theme.palette.atmo1
+    },
+    calendarMonthlyCell: {
+      display: "flex",
+      justifyContent: "center",
+      flexDirection: "column",
+      textAlign: "center",
+      height: "40px",
+      width: "92px",
+      "&:hover": _objectSpread({}, hover)
+    },
+    calendarMonthlyCellSelected: {
+      backgroundColor: theme.palette.atmo3,
+      color: theme.palette.acce1,
+      "&:hover": {
+        backgroundColor: theme.palette.atmo3,
+        color: theme.palette.acce1
+      }
+    },
+    normalWidth: {},
+    rangeModeWidth: {}
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map