@dhis2-ui/calendar 9.10.3 → 9.11.1-beta.1

package/build/cjs/stories/{calendar-input.stories.js → calendar-input.prod.stories.js}

@@ -4,20 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = exports.CalendarWithClearButton = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _calendarInput = require("../calendar-input/calendar-input.js");
-
 var _calendarStoryWrapper = require("./calendar-story-wrapper.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const subtitle = "[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar";
-const description = "\nUse a CalendarInput where there is a need to let the user input a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { CalendarInput } from '@dhis2/ui'\n```\n";
-var _default = {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
+const description = `
+Use a CalendarInput where there is a need to let the user input a date.
+
+Note that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.
+
+\`\`\`js
+import { CalendarInput } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'CalendarInput',
   component: _calendarInput.CalendarInput,
   parameters: {
@@ -29,8 +31,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const buildCalendar = _ref => {
   let {
     date,
@@ -48,49 +48,37 @@ const buildCalendar = _ref => {
     onDateSelect: () => {}
   });
 };
-
-const EthiopicWithAmharic = buildCalendar({
+const EthiopicWithAmharic = exports.EthiopicWithAmharic = buildCalendar({
   calendar: 'ethiopic',
   locale: 'am-ET',
   date: '2014-02-03' // 13 Oct 2021
-
 });
-exports.EthiopicWithAmharic = EthiopicWithAmharic;
-const EthiopicWithEnglish = buildCalendar({
+const EthiopicWithEnglish = exports.EthiopicWithEnglish = buildCalendar({
   calendar: 'ethiopian',
   // using "ethiopian" rather than the correct "ethiopic" to immitate DHIS2 calendar types
   locale: 'en-ET',
   date: '2014-02-03' // 13 Oct 2021
-
 });
-exports.EthiopicWithEnglish = EthiopicWithEnglish;
-const NepaliWithNepali = buildCalendar({
+const NepaliWithNepali = exports.NepaliWithNepali = buildCalendar({
   calendar: 'nepali',
   locale: 'ne-NP',
   date: '2078-06-27' // 13 Oct 2021
-
 });
-exports.NepaliWithNepali = NepaliWithNepali;
-const NepaliWithEnglish = buildCalendar({
+const NepaliWithEnglish = exports.NepaliWithEnglish = buildCalendar({
   calendar: 'nepali',
   locale: 'en-NP',
   date: '2078-06-27' // 13 Oct 2021
-
 });
-exports.NepaliWithEnglish = NepaliWithEnglish;
-const GregorianWithEnglish = buildCalendar({
+const GregorianWithEnglish = exports.GregorianWithEnglish = buildCalendar({
   calendar: 'gregorian',
   locale: 'en-CA',
   date: '2021-10-13'
 });
-exports.GregorianWithEnglish = GregorianWithEnglish;
-const GregorianWithArabic = buildCalendar({
+const GregorianWithArabic = exports.GregorianWithArabic = buildCalendar({
   calendar: 'gregorian',
   locale: 'ar-SD',
   date: '2021-10-13'
 });
-exports.GregorianWithArabic = GregorianWithArabic;
-
 const IslamicWithArabic = () => {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -108,9 +96,7 @@ const IslamicWithArabic = () => {
     onDateSelect: () => {}
   }));
 };
-
 exports.IslamicWithArabic = IslamicWithArabic;
-
 const CalendarWithClearButton = _ref2 => {
   let {
     calendar = 'gregory',
@@ -128,5 +114,4 @@ const CalendarWithClearButton = _ref2 => {
     "data-test": "storybook-calendar-date-value"
   }, date !== null && date !== void 0 ? date : 'undefined')));
 };
-
 exports.CalendarWithClearButton = CalendarWithClearButton;

package/build/cjs/stories/calendar-story-wrapper.js

@@ -4,31 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CalendarStoryWrapper = void 0;
-
 var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _calendar = require("../calendar/calendar.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const {
   calendars,
   numberingSystems
 } = _multiCalendarDates.constants;
-
 const CalendarStoryWrapper = props => {
   var _selectedDate$calenda;
-
   const {
     calendar,
     locale,
@@ -46,7 +35,6 @@ const CalendarStoryWrapper = props => {
   const [selectedDate, setSelectedDate] = (0, _react.useState)({
     calendarDateString: date
   });
-
   const changeCalendar = _ref => {
     let {
       target: {
@@ -55,21 +43,18 @@ const CalendarStoryWrapper = props => {
     } = _ref;
     setSelectedCalendar(value);
   };
-
   const changeNumberingSystem = _ref2 => {
     let {
       target: {
         value
       }
     } = _ref2;
-
     if (value === '-1') {
       setSelectedNumberingSystem(null);
     } else {
       setSelectedNumberingSystem(value);
     }
   };
-
   const changeDirection = _ref3 => {
     let {
       target: {
@@ -78,7 +63,6 @@ const CalendarStoryWrapper = props => {
     } = _ref3;
     setSelectedDirection(value);
   };
-
   const changeWeekFormat = _ref4 => {
     let {
       target: {
@@ -87,7 +71,6 @@ const CalendarStoryWrapper = props => {
     } = _ref4;
     setWeekDayFormat(value);
   };
-
   const onLocaleChanged = _ref5 => {
     let {
       target: {
@@ -96,7 +79,6 @@ const CalendarStoryWrapper = props => {
     } = _ref5;
     setLocale(value);
   };
-
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       fontSize: '0.8em',
@@ -182,7 +164,6 @@ const CalendarStoryWrapper = props => {
     dateStyle: 'long'
   }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };
-
 exports.CalendarStoryWrapper = CalendarStoryWrapper;
 CalendarStoryWrapper.defaultProps = {
   calendar: 'gregorian',

package/build/cjs/stories/{calendar.stories.js → calendar.prod.stories.js}

@@ -4,20 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithAnyCalendar = exports.Nepali = exports.Ethiopic = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _calendar = require("../calendar/calendar.js");
-
 var _calendarStoryWrapper = require("./calendar-story-wrapper.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const subtitle = "[Experimental] Calendar component is useful for creating a variety of calendars including Ethiopic, Islamic etc..";
-const description = "\nUse a Calendar where there is a need to let the user select a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { Calendar } from '@dhis2/ui'\n```\n";
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const subtitle = `[Experimental] Calendar component is useful for creating a variety of calendars including Ethiopic, Islamic etc..`;
+const description = `
+Use a Calendar where there is a need to let the user select a date.
+
+Note that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.
+
+\`\`\`js
+import { Calendar } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Calendar',
   component: _calendar.Calendar,
   parameters: {
@@ -29,8 +31,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Ethiopic = args => {
   return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
     calendar: "ethiopic",
@@ -41,9 +41,7 @@ const Ethiopic = args => {
     timeZone: "Africa/Khartoum"
   }, args));
 };
-
 exports.Ethiopic = Ethiopic;
-
 const Nepali = args => {
   return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
     calendar: "nepali",
@@ -53,14 +51,11 @@ const Nepali = args => {
     timeZone: "Africa/Khartoum"
   }, args));
 };
-
 exports.Nepali = Nepali;
-
 const WithAnyCalendar = args => {
   return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
     calendar: "gregory",
     locale: "en-GB"
   }, args));
 };
-
 exports.WithAnyCalendar = WithAnyCalendar;

package/build/es/__e2e__/{calendar-input.stories.e2e.js → calendar-input.e2e.stories.js}

@@ -1,14 +1,13 @@
 import React from 'react';
 import { CalendarInput as component } from '../index.js';
-import { CalendarWithClearButton } from '../stories/calendar-input.stories.js';
+import { CalendarWithClearButton } from '../stories/calendar-input.prod.stories.js';
 export default {
   title: 'CalendarInputTesting',
   component
 };
-export { EthiopicWithAmharic, EthiopicWithEnglish, NepaliWithEnglish, NepaliWithNepali, GregorianWithArabic, GregorianWithEnglish, IslamicWithArabic } from '../stories/calendar-input.stories.js';
+export { EthiopicWithAmharic, EthiopicWithEnglish, NepaliWithEnglish, NepaliWithNepali, GregorianWithArabic, GregorianWithEnglish, IslamicWithArabic } from '../stories/calendar-input.prod.stories.js';
 export const TestCalendarWithClearButton = () => {
   var _params$get, _params$get2;
-
   const params = new URLSearchParams(location.search);
   const calendar = (_params$get = params.get('calendar')) !== null && _params$get !== void 0 ? _params$get : 'gregory';
   const initialDate = (_params$get2 = params.get('initialDate')) !== null && _params$get2 !== void 0 ? _params$get2 : null;

package/build/es/calendar/calendar-table-cell.js

@@ -25,7 +25,7 @@ export const CalendarTableCell = _ref => {
   }, day.label), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2052411850",
     dynamic: [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]
-  }, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;padding:0;}"), "td.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:2px 2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px solid transparent;min-width:16px;}", "button.__jsx-style-dynamic-selector{border:0;overflow:hidden;width:".concat(cellSize, ";height:").concat(cellSize, ";border:2px solid transparent;border-radius:3px;background:none;color:").concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(dayHoverBackgroundColor, ";-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}"), "button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey300, ";}"), "button.isSelected.__jsx-style-dynamic-selector,button.otherMonth.isSelected.__jsx-style-dynamic-selector{background-color:".concat(selectedDayBackgroundColor, ";color:white;}"), "button.isToday.__jsx-style-dynamic-selector{position:relative;}", "button.isToday.__jsx-style-dynamic-selector::after{content:'';position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:4px;width:4px;bottom:2px;left:50%;border-radius:100%;background-color:".concat(colors.teal600, ";}"), "button.isSelected.isToday.__jsx-style-dynamic-selector::after{background-color:".concat(colors.teal200, ";}"), "button.otherMonth.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";}")]));
+  }, [`td.__jsx-style-dynamic-selector{width:${cellSize};height:100%;height:${cellSize};text-align:center;border:2px solid transparent;padding:0;}`, "td.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:2px 2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px solid transparent;min-width:16px;}", `button.__jsx-style-dynamic-selector{border:0;overflow:hidden;width:${cellSize};height:${cellSize};border:2px solid transparent;border-radius:3px;background:none;color:${colors.grey900};}`, `button.__jsx-style-dynamic-selector:hover{background-color:${dayHoverBackgroundColor};-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}`, `button.__jsx-style-dynamic-selector:active{background-color:${colors.grey300};}`, `button.isSelected.__jsx-style-dynamic-selector,button.otherMonth.isSelected.__jsx-style-dynamic-selector{background-color:${selectedDayBackgroundColor};color:white;}`, "button.isToday.__jsx-style-dynamic-selector{position:relative;}", `button.isToday.__jsx-style-dynamic-selector::after{content:'';position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:4px;width:4px;bottom:2px;left:50%;border-radius:100%;background-color:${colors.teal600};}`, `button.isSelected.isToday.__jsx-style-dynamic-selector::after{background-color:${colors.teal200};}`, `button.otherMonth.__jsx-style-dynamic-selector{color:${colors.grey600};}`]));
 };
 CalendarTableCell.propTypes = {
   cellSize: PropTypes.string,

package/build/es/calendar/calendar-table-days-header.js

@@ -13,12 +13,12 @@ export const CalendarTableDaysHeader = _ref => {
     className: _JSXStyle.dynamic([["1577512909", [dayNamesColor]]])
   }, weekDayLabels.map((label, i) => /*#__PURE__*/React.createElement("th", {
     scope: "col",
-    key: "weekday-".concat(i),
+    key: `weekday-${i}`,
     className: _JSXStyle.dynamic([["1577512909", [dayNamesColor]]])
   }, label)))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1577512909",
     dynamic: [dayNamesColor]
-  }, ["th.__jsx-style-dynamic-selector{color:".concat(dayNamesColor, ";font-weight:300;font-style:normal;padding:8px 8px;background:none;font-size:0.85em;border:none;cursor:default;}"), "tr.__jsx-style-dynamic-selector{border:none;}"]));
+  }, [`th.__jsx-style-dynamic-selector{color:${dayNamesColor};font-weight:300;font-style:normal;padding:8px 8px;background:none;font-size:0.85em;border:none;cursor:default;}`, "tr.__jsx-style-dynamic-selector{border:none;}"]));
 };
 CalendarTableDaysHeader.propTypes = {
   weekDayLabels: PropTypes.arrayOf(PropTypes.string)

package/build/es/calendar/calendar-table.js

@@ -21,7 +21,7 @@ export const CalendarTable = _ref => {
   }), /*#__PURE__*/React.createElement("tbody", {
     className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]])
   }, calendarWeekDays.map((week, weekIndex) => /*#__PURE__*/React.createElement("tr", {
-    key: "week-".concat(weekIndex + 1),
+    key: `week-${weekIndex + 1}`,
     className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]])
   }, week.map(day => /*#__PURE__*/React.createElement(CalendarTableCell, {
     selectedDate: selectedDate,
@@ -32,7 +32,7 @@ export const CalendarTable = _ref => {
   })))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "452536960",
     dynamic: [spacers.dp4, spacers.dp4]
-  }, [".calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:".concat(spacers.dp4, ";}"), ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", ".calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:".concat(spacers.dp4, ";}")]));
+  }, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:${spacers.dp4};}`, ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", `.calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:${spacers.dp4};}`]));
 };
 CalendarTable.propTypes = {
   calendarWeekDays: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({

package/build/es/calendar/calendar.js

@@ -62,7 +62,7 @@ export const Calendar = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2823859047",
     dynamic: [backgroundColor, wrapperBorderColor, width]
-  }, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(backgroundColor, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(width, ";width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}")]));
+  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
 };
 Calendar.defaultProps = {
   cellSize: '32px',
@@ -72,31 +72,22 @@ Calendar.defaultProps = {
 export const CalendarProps = {
   /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
   calendar: PropTypes.any.isRequired,
-
   /** Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
   onDateSelect: PropTypes.func.isRequired,
-
   /** the size of a single cell in the table forming the calendar */
   cellSize: PropTypes.string,
-
   /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
   date: PropTypes.string,
-
   /** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
   dir: PropTypes.oneOf(['ltr', 'rtl']),
-
   /** any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
   locale: PropTypes.string,
-
   /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
   numberingSystem: PropTypes.string,
-
   /** the timeZone to use */
   timeZone: PropTypes.string,
-
   /** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
   weekDayFormat: PropTypes.oneOf(['narrow', 'short', 'long']),
-
   /** the width of the calendar component */
   width: PropTypes.string
 };

package/build/es/calendar/navigation-container.js

@@ -8,7 +8,6 @@ const wrapperBorderColor = colors.grey300;
 const headerBackground = colors.grey050;
 export const NavigationContainer = _ref => {
   var _currYear$label;
-
   let {
     languageDirection,
     pickerOptions
@@ -22,9 +21,10 @@ export const NavigationContainer = _ref => {
     nextYear,
     prevMonth,
     prevYear
-  } = pickerOptions; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
-  // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
+  } = pickerOptions;
 
+  // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
+  // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
   const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "navigation-container"
@@ -36,7 +36,7 @@ export const NavigationContainer = _ref => {
     onClick: prevMonth.navigateTo,
     name: "previous-month",
     "data-test": "calendar-previous-month",
-    "aria-label": "".concat(i18n.t("Go to ".concat(prevMonth.label))),
+    "aria-label": `${i18n.t(`Go to ${prevMonth.label}`)}`,
     type: "button",
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
@@ -51,7 +51,7 @@ export const NavigationContainer = _ref => {
     onClick: nextMonth.navigateTo,
     "data-test": "calendar-next-month",
     name: "next-month",
-    "aria-label": "".concat(i18n.t("Go to ".concat(nextMonth.label))),
+    "aria-label": `${i18n.t(`Go to ${nextMonth.label}`)}`,
     type: "button",
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
@@ -63,7 +63,7 @@ export const NavigationContainer = _ref => {
   }, /*#__PURE__*/React.createElement("button", {
     onClick: prevYear.navigateTo,
     name: "previous-year",
-    "aria-label": "".concat(i18n.t('Go to previous year')),
+    "aria-label": `${i18n.t('Go to previous year')}`,
     type: "button",
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
@@ -78,7 +78,7 @@ export const NavigationContainer = _ref => {
   }, /*#__PURE__*/React.createElement("button", {
     onClick: nextYear.navigateTo,
     name: "next-year",
-    "aria-label": "".concat(i18n.t('Go to next year')),
+    "aria-label": `${i18n.t('Go to next year')}`,
     type: "button",
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
@@ -86,7 +86,7 @@ export const NavigationContainer = _ref => {
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3883083596",
     dynamic: [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]
-  }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:".concat(spacers.dp4, ";height:24px;width:24px;color:").concat(colors.grey600, ";border-radius:3px;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", ".prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:".concat(colors.grey200, ";color:").concat(colors.grey900, ";cursor:pointer;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey300, ";}"), ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", ".navigation-container.__jsx-style-dynamic-selector{gap:".concat(spacers.dp8, ";padding:").concat(spacers.dp4, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ").concat(wrapperBorderColor, ";background-color:").concat(headerBackground, ";font-size:1.08em;}")]));
+  }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:${spacers.dp4};height:24px;width:24px;color:${colors.grey600};border-radius:3px;}`, ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", `.prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:${colors.grey200};color:${colors.grey900};cursor:pointer;}`, `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:${colors.grey300};}`, ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", `.navigation-container.__jsx-style-dynamic-selector{gap:${spacers.dp8};padding:${spacers.dp4};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1.08em;}`]));
 };
 NavigationContainer.propTypes = {
   languageDirection: PropTypes.oneOf(['ltr', 'rtl']),

package/build/es/calendar-input/calendar-input.js

@@ -1,7 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { Button } from '@dhis2-ui/button';
 import { Card } from '@dhis2-ui/card';
 import { InputField, InputFieldProps } from '@dhis2-ui/input';
@@ -39,7 +37,6 @@ export const CalendarInput = function () {
       setOpen(false);
       onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
     };
-
     return {
       onDateSelect: onDateSelectWrapper,
       calendar,
@@ -53,11 +50,9 @@ export const CalendarInput = function () {
       cellSize
     };
   }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
-
   const onFocus = () => {
     setOpen(true);
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: "jsx-862452676" + " " + "calendar-input-wrapper"
@@ -98,6 +93,7 @@ export const CalendarInput = function () {
 CalendarInput.defaultProps = {
   dataTest: 'dhis2-uiwidgets-calendar-inputfield'
 };
-CalendarInput.propTypes = { ...CalendarProps,
+CalendarInput.propTypes = {
+  ...CalendarProps,
   ...InputFieldProps
 };

package/build/es/features/supports_calendar_clear_button/supports_calendar_clear_button.js

@@ -9,7 +9,7 @@ Given('a "{word}" calendar is rendered with a selected date "{word}"', (calendar
   cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', initialDate);
 });
 Then('we should be able to clear it', () => {
-  cy.get("[data-test=\"calendar-clear-button\"]").click();
+  cy.get(`[data-test="calendar-clear-button"]`).click();
   cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', 'undefined');
 });
 Then('show the current month afterwards', () => {

package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an Ethiopic calendar is rendered in {word}', language => {
-  cy.visitStory('CalendarInputTesting', "Ethiopic With ".concat(language));
+  cy.visitStory('CalendarInputTesting', `Ethiopic With ${language}`);
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
   cy.get('[data-test=calendar]').should('be.visible');
 });
@@ -32,7 +32,7 @@ Then('the era should not be displayed in the year', () => {
 });
 Then('we should be able to select a day', () => {
   const date = '2014-02-03';
-  cy.get("[data-test=\"".concat(date, "\"]")).click();
+  cy.get(`[data-test="${date}"]`).click();
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
   cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
   cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');

package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Gregorian calendar is rendered in {word}', language => {
-  cy.visitStory('CalendarInputTesting', "Gregorian With ".concat(language));
+  cy.visitStory('CalendarInputTesting', `Gregorian With ${language}`);
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
   cy.get('[data-test=calendar]').should('be.visible');
 });
@@ -29,7 +29,7 @@ Then('months should be rendered in "{word}" with navigation', language => {
 });
 Then('we should be able to select a day', () => {
   const date = '2021-10-13';
-  cy.get("[data-test=\"".concat(date, "\"]")).click();
+  cy.get(`[data-test="${date}"]`).click();
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
   cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
   cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');

package/build/es/features/supports_islamic_calendar/supports_islamic_calendar.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an Islamic calendar is rendered with Arabic locale', () => {
-  cy.visitStory('CalendarInputTesting', "Islamic With Arabic");
+  cy.visitStory('CalendarInputTesting', `Islamic With Arabic`);
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
   cy.get('[data-test=calendar]').should('be.visible');
 });

package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a nepali calendar in "{word}" is rendered', language => {
-  cy.visitStory('CalendarInputTesting', "Nepali With ".concat(language));
+  cy.visitStory('CalendarInputTesting', `Nepali With ${language}`);
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]', {
     timeout: 10000
   }).click();
@@ -14,6 +14,7 @@ Then('nepali days should be rendered in "{word}"', language => {
 });
 Then('months should be rendered in "{word}" with navigation', language => {
   //
+
   const months = language === 'nepali' ? {
     current: 'असोज',
     previous: 'भदौ',
@@ -32,7 +33,7 @@ Then('months should be rendered in "{word}" with navigation', language => {
 });
 Then('we should be able to select a day', () => {
   const nepaliDate = '2078-06-27';
-  cy.get("[data-test=\"".concat(nepaliDate, "\"]")).click();
+  cy.get(`[data-test="${nepaliDate}"]`).click();
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', nepaliDate);
   cy.get('[data-test="storybook-calendar-result"]').should('have.text', nepaliDate);
   cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');