@semcore/date-picker 2.8.5 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+- Remove value "xl" for "size".
+
 ## [2.8.5] - 2022-05-16
 
 ### Changed

package/lib/cjs/DatePicker.js

@@ -105,6 +105,7 @@ var DatePickerRoot = /*#__PURE__*/function (_PickerAbstract) {
       return _objectSpread(_objectSpread({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(DatePickerRoot.prototype), "getPopperProps", this).call(this)), {}, {
         children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(DatePicker.Header, null), /*#__PURE__*/_react["default"].createElement(DatePicker.Calendar, null), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
           ml: -4,
+          mt: 4,
           w: "calc(100% + 32px)"
         }), /*#__PURE__*/_react["default"].createElement(DatePicker.Today, null))
       });

package/lib/cjs/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DatePicker.jsx"],"names":["DatePickerRoot","handlers","value","Date","setHours","asProps","locale","placeholder","children","displayedPeriod","Intl","DateTimeFormat","month","year","format","startOf","toDate","i18n","onClick","handlerToday","PickerAbstract","props","defaultProps","Today","SToday","Box","styles","getI18nText","Component","DatePicker","Trigger","Popper","Header","Title","Prev","Next","Calendar","parent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport Divider from '@semcore/divider';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Header, Next, Popper, Prev, Title, Trigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport PickerAbstract from './components/PickerAbstract';\nimport { getLocaleDate } from './utils/formatDate';\n\nexport class DatePickerRoot extends PickerAbstract {\n  static displayName = 'DatePicker';\n\n  static defaultProps = (props) => ({\n    ...PickerAbstract.defaultProps(props),\n    children: (\n      <>\n        <DatePicker.Trigger />\n        <DatePicker.Popper />\n      </>\n    ),\n  });\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  handlerToday = () => {\n    this.handlers.value(new Date(new Date().setHours(0, 0, 0, 0)));\n  };\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date',\n      children: value ? getLocaleDate(value, locale) : null,\n    };\n  }\n\n  getPopperProps() {\n    return {\n      ...super.getPopperProps(),\n      children: (\n        <>\n          <DatePicker.Header />\n          <DatePicker.Calendar />\n          <Divider ml={-4} w=\"calc(100% + 32px)\" />\n          <DatePicker.Today />\n        </>\n      ),\n    };\n  }\n\n  getTitleProps() {\n    const { displayedPeriod, locale } = this.asProps;\n    return {\n      ...super.getTitleProps(),\n      children: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(\n        dayjs(displayedPeriod).startOf('month').toDate(),\n      ),\n    };\n  }\n\n  getTodayProps() {\n    const { i18n, locale } = this.asProps;\n    return {\n      i18n,\n      locale,\n      onClick: this.handlerToday,\n    };\n  }\n}\n\nclass Today extends Component {\n  static enhance = [i18nEnhance()];\n\n  render() {\n    const SToday = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SToday render={Box}>\n        <Button use=\"tertiary\" children={getI18nText('today')} />\n      </SToday>,\n    );\n  }\n}\n\nconst DatePicker = createComponent(\n  DatePickerRoot,\n  {\n    Trigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Today,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../src/DatePicker.jsx"],"names":["DatePickerRoot","handlers","value","Date","setHours","asProps","locale","placeholder","children","displayedPeriod","Intl","DateTimeFormat","month","year","format","startOf","toDate","i18n","onClick","handlerToday","PickerAbstract","props","defaultProps","Today","SToday","Box","styles","getI18nText","Component","DatePicker","Trigger","Popper","Header","Title","Prev","Next","Calendar","parent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport Divider from '@semcore/divider';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Header, Next, Popper, Prev, Title, Trigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport PickerAbstract from './components/PickerAbstract';\nimport { getLocaleDate } from './utils/formatDate';\n\nexport class DatePickerRoot extends PickerAbstract {\n  static displayName = 'DatePicker';\n\n  static defaultProps = (props) => ({\n    ...PickerAbstract.defaultProps(props),\n    children: (\n      <>\n        <DatePicker.Trigger />\n        <DatePicker.Popper />\n      </>\n    ),\n  });\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  handlerToday = () => {\n    this.handlers.value(new Date(new Date().setHours(0, 0, 0, 0)));\n  };\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date',\n      children: value ? getLocaleDate(value, locale) : null,\n    };\n  }\n\n  getPopperProps() {\n    return {\n      ...super.getPopperProps(),\n      children: (\n        <>\n          <DatePicker.Header />\n          <DatePicker.Calendar />\n          <Divider ml={-4} mt={4} w=\"calc(100% + 32px)\" />\n          <DatePicker.Today />\n        </>\n      ),\n    };\n  }\n\n  getTitleProps() {\n    const { displayedPeriod, locale } = this.asProps;\n    return {\n      ...super.getTitleProps(),\n      children: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(\n        dayjs(displayedPeriod).startOf('month').toDate(),\n      ),\n    };\n  }\n\n  getTodayProps() {\n    const { i18n, locale } = this.asProps;\n    return {\n      i18n,\n      locale,\n      onClick: this.handlerToday,\n    };\n  }\n}\n\nclass Today extends Component {\n  static enhance = [i18nEnhance()];\n\n  render() {\n    const SToday = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SToday render={Box}>\n        <Button use=\"tertiary\" children={getI18nText('today')} />\n      </SToday>,\n    );\n  }\n}\n\nconst DatePicker = createComponent(\n  DatePickerRoot,\n  {\n    Trigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Today,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}

package/lib/cjs/components/Calendar.js

@@ -66,26 +66,26 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SCalendar_1hh6z_gg_{display:flex;flex-direction:column}.___SGridDays_1hh6z_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto));grid-template-rows:repeat(auto-fit,minmax(32px,auto))}.___SGridMonths_1hh6z_gg_{display:grid;grid-row-gap:8px;grid-template-columns:repeat(3,minmax(60px,auto));grid-template-rows:repeat(4,minmax(32px,auto))}.___SWeekDays_1hh6z_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto))}.___SWeekDay_1hh6z_gg_{min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;color:#757575;font-size:12px;font-weight:400;overflow:hidden}.___SCalendarUnit_1hh6z_gg_{font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#333333;outline:0;box-shadow:none;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:transparent;align-items:center;border-radius:4px;box-sizing:border-box;cursor:pointer;display:flex;font-size:12px;justify-content:center;min-height:32px;min-width:32px;position:relative;transition:color .15s,background .15s;outline:none}.___SCalendarUnit_1hh6z_gg_:hover{color:#333333;background:rgba(166,176,179,.2)}.___SCalendarUnit_1hh6z_gg_.focus-visible{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SCalendarUnit_1hh6z_gg_:focus-visible{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SCalendarUnit_1hh6z_gg_.__today_1hh6z_gg_:before{content:\"\";position:absolute;display:block;top:2px;left:2px;border-radius:3px;width:calc(100% - 4px);height:calc(100% - 4px);box-sizing:border-box;border:1px solid rgba(0,0,0,.2)}.___SCalendarUnit_1hh6z_gg_.__today_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_:before,.___SCalendarUnit_1hh6z_gg_.__today_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_:before{border-color:hsla(0,0%,100%,.5)}.___SCalendarUnit_1hh6z_gg_.__selected_1hh6z_gg_{background:rgba(43,148,225,.1);border-radius:0;color:#333333}.___SCalendarUnit_1hh6z_gg_.__selected_1hh6z_gg_:hover{background:rgba(43,148,225,.3)}.___SCalendarUnit_1hh6z_gg_.__highlighted_1hh6z_gg_{background:rgba(43,148,225,.2);border-radius:0;color:#333333}.___SCalendarUnit_1hh6z_gg_.__highlighted_1hh6z_gg_:hover{background:rgba(43,148,225,.3)}.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_{background:#2b94e1;border-bottom-left-radius:4px;border-bottom-right-radius:0;border-top-left-radius:4px;border-top-right-radius:0;color:#fff}.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_:hover{color:#fff;background:#2682c6}.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_{background:#2b94e1;border-bottom-left-radius:0;border-bottom-right-radius:4px;border-top-left-radius:0;border-top-right-radius:4px;color:#fff}.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_:hover{color:#fff;background:#2682c6}.___SCalendarUnit_1hh6z_gg_.__startHighlighted_1hh6z_gg_{border-bottom-left-radius:4px;border-bottom-right-radius:0;border-top-left-radius:4px;border-top-right-radius:0}.___SCalendarUnit_1hh6z_gg_.__endHighlighted_1hh6z_gg_{border-bottom-left-radius:0;border-bottom-right-radius:4px;border-top-left-radius:0;border-top-right-radius:4px}.___SCalendarUnit_1hh6z_gg_.__startHighlighted_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__endHighlighted_1hh6z_gg_{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px}.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px}.___SCalendarUnit_1hh6z_gg_.__disabled_1hh6z_gg_{opacity:.4;cursor:default;pointer-events:none}.___SCalendarUnit_1hh6z_gg_.__outdated_1hh6z_gg_{opacity:.2}@media (prefers-reduced-motion){.___SCalendarUnit_1hh6z_gg_{transition:none}}"
+".___SCalendar_culb2_gg_{display:flex;flex-direction:column}.___SGridDays_culb2_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto));grid-template-rows:repeat(auto-fit,minmax(32px,auto))}.___SGridMonths_culb2_gg_{display:grid;grid-row-gap:8px;grid-template-columns:repeat(3,minmax(60px,auto));grid-template-rows:repeat(4,minmax(32px,auto))}.___SWeekDays_culb2_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto))}.___SWeekDay_culb2_gg_{min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;color:#6c6e79;font-size:14px;font-weight:400;overflow:hidden}.___SCalendarUnit_culb2_gg_{font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#191b23;outline:0;box-shadow:none;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:transparent;align-items:center;border-radius:6px;box-sizing:border-box;cursor:pointer;display:flex;font-size:14px;justify-content:center;min-height:32px;min-width:32px;position:relative;transition:color .15s,background .15s;outline:none}.___SCalendarUnit_culb2_gg_:hover{color:#191b23;background:#e0e1e9}.___SCalendarUnit_culb2_gg_.focus-visible{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SCalendarUnit_culb2_gg_:focus-visible{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SCalendarUnit_culb2_gg_.__today_culb2_gg_:before{content:\"\";position:absolute;display:block;top:1px;left:1px;border-radius:6px;width:calc(100% - 2px);height:calc(100% - 2px);box-sizing:border-box;border:1px solid #c4c7cf}.___SCalendarUnit_culb2_gg_.__today_culb2_gg_.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_:before,.___SCalendarUnit_culb2_gg_.__today_culb2_gg_.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_:before{border-color:hsla(0,0%,100%,.5)}.___SCalendarUnit_culb2_gg_.__selected_culb2_gg_{background:#c4e5fe;border-radius:0;color:#191b23}.___SCalendarUnit_culb2_gg_.__selected_culb2_gg_:hover{background:#008ff8}.___SCalendarUnit_culb2_gg_.__highlighted_culb2_gg_{background:rgba(0,143,248,.2);border-radius:0;color:#191b23}.___SCalendarUnit_culb2_gg_.__highlighted_culb2_gg_:hover{background:rgba(0,143,248,.3)}.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:0;border-top-left-radius:6px;border-top-right-radius:0;color:#fff;background:#2bb3ff}.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_:hover{color:#fff;background:#008ff8}.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_{background:#2bb3ff;border-bottom-left-radius:0;border-bottom-right-radius:6px;border-top-left-radius:0;border-top-right-radius:6px;color:#fff}.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_:hover{color:#fff;background:#008ff8}.___SCalendarUnit_culb2_gg_.__startHighlighted_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:0;border-top-left-radius:6px;border-top-right-radius:0}.___SCalendarUnit_culb2_gg_.__endHighlighted_culb2_gg_{border-bottom-left-radius:0;border-bottom-right-radius:6px;border-top-left-radius:0;border-top-right-radius:6px}.___SCalendarUnit_culb2_gg_.__startHighlighted_culb2_gg_.___SCalendarUnit_culb2_gg_.__endHighlighted_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px}.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px}.___SCalendarUnit_culb2_gg_.__outdated_culb2_gg_{opacity:.2}.___SCalendarUnit_culb2_gg_.__disabled_culb2_gg_{opacity:.4;cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SCalendarUnit_culb2_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "glwl99_gg_")
+, "1k0az1i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCalendar": "___SCalendar_1hh6z_gg_",
-  "__SGridDays": "___SGridDays_1hh6z_gg_",
-  "__SGridMonths": "___SGridMonths_1hh6z_gg_",
-  "__SWeekDays": "___SWeekDays_1hh6z_gg_",
-  "__SWeekDay": "___SWeekDay_1hh6z_gg_",
-  "__SCalendarUnit": "___SCalendarUnit_1hh6z_gg_",
-  "_today": "__today_1hh6z_gg_",
-  "_endSelected": "__endSelected_1hh6z_gg_",
-  "_startSelected": "__startSelected_1hh6z_gg_",
-  "_selected": "__selected_1hh6z_gg_",
-  "_highlighted": "__highlighted_1hh6z_gg_",
-  "_startHighlighted": "__startHighlighted_1hh6z_gg_",
-  "_endHighlighted": "__endHighlighted_1hh6z_gg_",
-  "_disabled": "__disabled_1hh6z_gg_",
-  "_outdated": "__outdated_1hh6z_gg_"
+  "__SCalendar": "___SCalendar_culb2_gg_",
+  "__SGridDays": "___SGridDays_culb2_gg_",
+  "__SGridMonths": "___SGridMonths_culb2_gg_",
+  "__SWeekDays": "___SWeekDays_culb2_gg_",
+  "__SWeekDay": "___SWeekDay_culb2_gg_",
+  "__SCalendarUnit": "___SCalendarUnit_culb2_gg_",
+  "_today": "__today_culb2_gg_",
+  "_endSelected": "__endSelected_culb2_gg_",
+  "_startSelected": "__startSelected_culb2_gg_",
+  "_selected": "__selected_culb2_gg_",
+  "_highlighted": "__highlighted_culb2_gg_",
+  "_startHighlighted": "__startHighlighted_culb2_gg_",
+  "_endHighlighted": "__endHighlighted_culb2_gg_",
+  "_outdated": "__outdated_culb2_gg_",
+  "_disabled": "__disabled_culb2_gg_"
 });
 
 _dayjs["default"].extend(_isBetween["default"]);

package/lib/cjs/components/PickerAbstract.js

@@ -64,16 +64,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SPopper_1v9b6_gg_{padding:16px;outline:0}.___SPopper_1v9b6_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_1v9b6_gg_:active,.___SPopper_1v9b6_gg_:focus,.___SPopper_1v9b6_gg_:hover{outline:0;text-decoration:none}.___SPopper_1v9b6_gg_:focus{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SHeader_1v9b6_gg_{display:flex}.___STitle_1v9b6_gg_{font-size:12px;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_1v9b6_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_1v9b6_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
+".___SPopper_16bic_gg_{padding:16px;outline:0}.___SPopper_16bic_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_16bic_gg_:active,.___SPopper_16bic_gg_:focus,.___SPopper_16bic_gg_:hover{outline:0;text-decoration:none}.___SPopper_16bic_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SHeader_16bic_gg_{display:flex;align-items:center}.___STitle_16bic_gg_{font-size:14px;color:#191b23;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_16bic_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_16bic_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
 /*__inner_css_end__*/
-, "1olnti5_gg_")
+, "iz6ur6_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPopper": "___SPopper_1v9b6_gg_",
-  "__SHeader": "___SHeader_1v9b6_gg_",
-  "__STitle": "___STitle_1v9b6_gg_",
-  "__SToday": "___SToday_1v9b6_gg_",
-  "__SPeriod": "___SPeriod_1v9b6_gg_"
+  "__SPopper": "___SPopper_16bic_gg_",
+  "__SHeader": "___SHeader_16bic_gg_",
+  "__STitle": "___STitle_16bic_gg_",
+  "__SToday": "___SToday_16bic_gg_",
+  "__SPeriod": "___SPeriod_16bic_gg_"
 });
 var i18n = {
   de: _de["default"],

package/lib/cjs/components/RangePickerAbstract.js

@@ -70,16 +70,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SPopper_1v9b6_gg_{padding:16px;outline:0}.___SPopper_1v9b6_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_1v9b6_gg_:active,.___SPopper_1v9b6_gg_:focus,.___SPopper_1v9b6_gg_:hover{outline:0;text-decoration:none}.___SPopper_1v9b6_gg_:focus{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SHeader_1v9b6_gg_{display:flex}.___STitle_1v9b6_gg_{font-size:12px;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_1v9b6_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_1v9b6_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
+".___SPopper_16bic_gg_{padding:16px;outline:0}.___SPopper_16bic_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_16bic_gg_:active,.___SPopper_16bic_gg_:focus,.___SPopper_16bic_gg_:hover{outline:0;text-decoration:none}.___SPopper_16bic_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SHeader_16bic_gg_{display:flex;align-items:center}.___STitle_16bic_gg_{font-size:14px;color:#191b23;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_16bic_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_16bic_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
 /*__inner_css_end__*/
-, "1olnti5_gg_")
+, "iz6ur6_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPopper": "___SPopper_1v9b6_gg_",
-  "__SHeader": "___SHeader_1v9b6_gg_",
-  "__STitle": "___STitle_1v9b6_gg_",
-  "__SToday": "___SToday_1v9b6_gg_",
-  "__SPeriod": "___SPeriod_1v9b6_gg_"
+  "__SPopper": "___SPopper_16bic_gg_",
+  "__SHeader": "___SHeader_16bic_gg_",
+  "__STitle": "___STitle_16bic_gg_",
+  "__SToday": "___SToday_16bic_gg_",
+  "__SPeriod": "___SPeriod_16bic_gg_"
 });
 var i18n = {
   de: _de["default"],

package/lib/cjs/index.d.ts

@@ -100,7 +100,7 @@ export interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps
    * Component size
    * @default m
    */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /**
    * The selected date, accepts everything which is accepted by `new Date()`
    * */

package/lib/cjs/style/calendar.shadow.css

@@ -29,8 +29,8 @@ SWeekDay {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray60);
-  font-size: var(--fs-100);
+  color: var(--gray-500);
+  font-size: var(--fs-200);
   font-weight: 400;
   overflow: hidden;
 }
@@ -43,7 +43,7 @@ SCalendarUnit {
   text-align: center;
   vertical-align: middle;
   border: 1px solid transparent;
-  color: var(--gray20);
+  color: var(--gray-800);
   outline: 0;
   box-shadow: none;
   overflow: visible;
@@ -53,11 +53,11 @@ SCalendarUnit {
   background: transparent;
 
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--rounded-m);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
-  font-size: 12px;
+  font-size: var(--fs-200);
   justify-content: center;
   min-height: 32px;
   min-width: 32px;
@@ -66,12 +66,12 @@ SCalendarUnit {
   outline: none;
 
   &:hover {
-    color: var(--gray20);
-    background: color-mod(var(--stone) alpha(20%));
+    color: var(--gray-800);
+    background: var(--gray-100);
   }
 
   &:focus-visible {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
@@ -80,13 +80,13 @@ SCalendarUnit[today] {
     content: '';
     position: absolute;
     display: block;
-    top: 2px;
-    left: 2px;
-    border-radius: 3px;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
+    top: 1px;
+    left: 1px;
+    border-radius: var(--rounded-m);
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
     box-sizing: border-box;
-    border: 1px solid color-mod(black alpha(20%));
+    border: 1px solid var(--gray-200);
   }
 }
 
@@ -98,79 +98,83 @@ SCalendarUnit[today]SCalendarUnit[endSelected] {
 }
 
 SCalendarUnit[selected] {
-  background: color-mod(var(--light-blue) alpha(10%));
+  background: var(--blue-100);
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[highlighted] {
-  background: color-mod(var(--light-blue) alpha(20%));
+  background: color-mod(var(--blue-400) alpha(20%));
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: color-mod(var(--blue-400) alpha(30%));
   }
 }
 
 SCalendarUnit[startSelected] {
-  background: var(--light-blue);
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
   color: white;
+  background: var(--blue-300);
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[endSelected] {
-  background: var(--light-blue);
+  background: var(--blue-300);
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
   color: white;
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[startHighlighted] {
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
 }
 
 SCalendarUnit[endHighlighted] {
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startSelected]SCalendarUnit[endSelected] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
+}
+
+SCalendarUnit[outdated] {
+  opacity: 0.2;
 }
 
 SCalendarUnit[disabled] {
@@ -179,10 +183,6 @@ SCalendarUnit[disabled] {
   pointer-events: none;
 }
 
-SCalendarUnit[outdated] {
-  opacity: 0.2;
-}
-
 @media (prefers-reduced-motion) {
   SCalendarUnit {
     transition: none;

package/lib/cjs/style/date-picker.shadow.css

@@ -17,16 +17,18 @@ SPopper {
   }
 
   &:focus {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
 SHeader {
   display: flex;
+  align-items: center;
 }
 
 STitle {
-  font-size: var(--fs-100);
+  font-size: var(--fs-200);
+  color: var(--gray-800);
   height: 32px;
   width: 100%;
   display: flex;

package/lib/es6/DatePicker.js

@@ -78,6 +78,7 @@ export var DatePickerRoot = /*#__PURE__*/function (_PickerAbstract) {
       return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DatePickerRoot.prototype), "getPopperProps", this).call(this)), {}, {
         children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker.Header, null), /*#__PURE__*/React.createElement(DatePicker.Calendar, null), /*#__PURE__*/React.createElement(Divider, {
           ml: -4,
+          mt: 4,
           w: "calc(100% + 32px)"
         }), /*#__PURE__*/React.createElement(DatePicker.Today, null))
       });

package/lib/es6/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DatePicker.jsx"],"names":["React","dayjs","createComponent","Component","Root","sstyled","Box","Button","Divider","i18nEnhance","Header","Next","Popper","Prev","Title","Trigger","CalendarDays","Calendar","PickerAbstract","getLocaleDate","DatePickerRoot","handlers","value","Date","setHours","asProps","locale","placeholder","children","displayedPeriod","Intl","DateTimeFormat","month","year","format","startOf","toDate","i18n","onClick","handlerToday","props","defaultProps","Today","SToday","styles","getI18nText","DatePicker","parent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport Divider from '@semcore/divider';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Header, Next, Popper, Prev, Title, Trigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport PickerAbstract from './components/PickerAbstract';\nimport { getLocaleDate } from './utils/formatDate';\n\nexport class DatePickerRoot extends PickerAbstract {\n  static displayName = 'DatePicker';\n\n  static defaultProps = (props) => ({\n    ...PickerAbstract.defaultProps(props),\n    children: (\n      <>\n        <DatePicker.Trigger />\n        <DatePicker.Popper />\n      </>\n    ),\n  });\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  handlerToday = () => {\n    this.handlers.value(new Date(new Date().setHours(0, 0, 0, 0)));\n  };\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date',\n      children: value ? getLocaleDate(value, locale) : null,\n    };\n  }\n\n  getPopperProps() {\n    return {\n      ...super.getPopperProps(),\n      children: (\n        <>\n          <DatePicker.Header />\n          <DatePicker.Calendar />\n          <Divider ml={-4} w=\"calc(100% + 32px)\" />\n          <DatePicker.Today />\n        </>\n      ),\n    };\n  }\n\n  getTitleProps() {\n    const { displayedPeriod, locale } = this.asProps;\n    return {\n      ...super.getTitleProps(),\n      children: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(\n        dayjs(displayedPeriod).startOf('month').toDate(),\n      ),\n    };\n  }\n\n  getTodayProps() {\n    const { i18n, locale } = this.asProps;\n    return {\n      i18n,\n      locale,\n      onClick: this.handlerToday,\n    };\n  }\n}\n\nclass Today extends Component {\n  static enhance = [i18nEnhance()];\n\n  render() {\n    const SToday = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SToday render={Box}>\n        <Button use=\"tertiary\" children={getI18nText('today')} />\n      </SToday>,\n    );\n  }\n}\n\nconst DatePicker = createComponent(\n  DatePickerRoot,\n  {\n    Trigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Today,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../src/DatePicker.jsx"],"names":["React","dayjs","createComponent","Component","Root","sstyled","Box","Button","Divider","i18nEnhance","Header","Next","Popper","Prev","Title","Trigger","CalendarDays","Calendar","PickerAbstract","getLocaleDate","DatePickerRoot","handlers","value","Date","setHours","asProps","locale","placeholder","children","displayedPeriod","Intl","DateTimeFormat","month","year","format","startOf","toDate","i18n","onClick","handlerToday","props","defaultProps","Today","SToday","styles","getI18nText","DatePicker","parent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport Divider from '@semcore/divider';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Header, Next, Popper, Prev, Title, Trigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport PickerAbstract from './components/PickerAbstract';\nimport { getLocaleDate } from './utils/formatDate';\n\nexport class DatePickerRoot extends PickerAbstract {\n  static displayName = 'DatePicker';\n\n  static defaultProps = (props) => ({\n    ...PickerAbstract.defaultProps(props),\n    children: (\n      <>\n        <DatePicker.Trigger />\n        <DatePicker.Popper />\n      </>\n    ),\n  });\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  handlerToday = () => {\n    this.handlers.value(new Date(new Date().setHours(0, 0, 0, 0)));\n  };\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date',\n      children: value ? getLocaleDate(value, locale) : null,\n    };\n  }\n\n  getPopperProps() {\n    return {\n      ...super.getPopperProps(),\n      children: (\n        <>\n          <DatePicker.Header />\n          <DatePicker.Calendar />\n          <Divider ml={-4} mt={4} w=\"calc(100% + 32px)\" />\n          <DatePicker.Today />\n        </>\n      ),\n    };\n  }\n\n  getTitleProps() {\n    const { displayedPeriod, locale } = this.asProps;\n    return {\n      ...super.getTitleProps(),\n      children: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(\n        dayjs(displayedPeriod).startOf('month').toDate(),\n      ),\n    };\n  }\n\n  getTodayProps() {\n    const { i18n, locale } = this.asProps;\n    return {\n      i18n,\n      locale,\n      onClick: this.handlerToday,\n    };\n  }\n}\n\nclass Today extends Component {\n  static enhance = [i18nEnhance()];\n\n  render() {\n    const SToday = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SToday render={Box}>\n        <Button use=\"tertiary\" children={getI18nText('today')} />\n      </SToday>,\n    );\n  }\n}\n\nconst DatePicker = createComponent(\n  DatePickerRoot,\n  {\n    Trigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Today,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}

package/lib/es6/components/Calendar.js

@@ -38,26 +38,26 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SCalendar_1hh6z_gg_{display:flex;flex-direction:column}.___SGridDays_1hh6z_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto));grid-template-rows:repeat(auto-fit,minmax(32px,auto))}.___SGridMonths_1hh6z_gg_{display:grid;grid-row-gap:8px;grid-template-columns:repeat(3,minmax(60px,auto));grid-template-rows:repeat(4,minmax(32px,auto))}.___SWeekDays_1hh6z_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto))}.___SWeekDay_1hh6z_gg_{min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;color:#757575;font-size:12px;font-weight:400;overflow:hidden}.___SCalendarUnit_1hh6z_gg_{font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#333333;outline:0;box-shadow:none;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:transparent;align-items:center;border-radius:4px;box-sizing:border-box;cursor:pointer;display:flex;font-size:12px;justify-content:center;min-height:32px;min-width:32px;position:relative;transition:color .15s,background .15s;outline:none}.___SCalendarUnit_1hh6z_gg_:hover{color:#333333;background:rgba(166,176,179,.2)}.___SCalendarUnit_1hh6z_gg_.focus-visible{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SCalendarUnit_1hh6z_gg_:focus-visible{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SCalendarUnit_1hh6z_gg_.__today_1hh6z_gg_:before{content:\"\";position:absolute;display:block;top:2px;left:2px;border-radius:3px;width:calc(100% - 4px);height:calc(100% - 4px);box-sizing:border-box;border:1px solid rgba(0,0,0,.2)}.___SCalendarUnit_1hh6z_gg_.__today_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_:before,.___SCalendarUnit_1hh6z_gg_.__today_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_:before{border-color:hsla(0,0%,100%,.5)}.___SCalendarUnit_1hh6z_gg_.__selected_1hh6z_gg_{background:rgba(43,148,225,.1);border-radius:0;color:#333333}.___SCalendarUnit_1hh6z_gg_.__selected_1hh6z_gg_:hover{background:rgba(43,148,225,.3)}.___SCalendarUnit_1hh6z_gg_.__highlighted_1hh6z_gg_{background:rgba(43,148,225,.2);border-radius:0;color:#333333}.___SCalendarUnit_1hh6z_gg_.__highlighted_1hh6z_gg_:hover{background:rgba(43,148,225,.3)}.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_{background:#2b94e1;border-bottom-left-radius:4px;border-bottom-right-radius:0;border-top-left-radius:4px;border-top-right-radius:0;color:#fff}.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_:hover{color:#fff;background:#2682c6}.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_{background:#2b94e1;border-bottom-left-radius:0;border-bottom-right-radius:4px;border-top-left-radius:0;border-top-right-radius:4px;color:#fff}.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_:hover{color:#fff;background:#2682c6}.___SCalendarUnit_1hh6z_gg_.__startHighlighted_1hh6z_gg_{border-bottom-left-radius:4px;border-bottom-right-radius:0;border-top-left-radius:4px;border-top-right-radius:0}.___SCalendarUnit_1hh6z_gg_.__endHighlighted_1hh6z_gg_{border-bottom-left-radius:0;border-bottom-right-radius:4px;border-top-left-radius:0;border-top-right-radius:4px}.___SCalendarUnit_1hh6z_gg_.__startHighlighted_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__endHighlighted_1hh6z_gg_{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px}.___SCalendarUnit_1hh6z_gg_.__startSelected_1hh6z_gg_.___SCalendarUnit_1hh6z_gg_.__endSelected_1hh6z_gg_{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px}.___SCalendarUnit_1hh6z_gg_.__disabled_1hh6z_gg_{opacity:.4;cursor:default;pointer-events:none}.___SCalendarUnit_1hh6z_gg_.__outdated_1hh6z_gg_{opacity:.2}@media (prefers-reduced-motion){.___SCalendarUnit_1hh6z_gg_{transition:none}}"
+".___SCalendar_culb2_gg_{display:flex;flex-direction:column}.___SGridDays_culb2_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto));grid-template-rows:repeat(auto-fit,minmax(32px,auto))}.___SGridMonths_culb2_gg_{display:grid;grid-row-gap:8px;grid-template-columns:repeat(3,minmax(60px,auto));grid-template-rows:repeat(4,minmax(32px,auto))}.___SWeekDays_culb2_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto))}.___SWeekDay_culb2_gg_{min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;color:#6c6e79;font-size:14px;font-weight:400;overflow:hidden}.___SCalendarUnit_culb2_gg_{font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#191b23;outline:0;box-shadow:none;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:transparent;align-items:center;border-radius:6px;box-sizing:border-box;cursor:pointer;display:flex;font-size:14px;justify-content:center;min-height:32px;min-width:32px;position:relative;transition:color .15s,background .15s;outline:none}.___SCalendarUnit_culb2_gg_:hover{color:#191b23;background:#e0e1e9}.___SCalendarUnit_culb2_gg_.focus-visible{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SCalendarUnit_culb2_gg_:focus-visible{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SCalendarUnit_culb2_gg_.__today_culb2_gg_:before{content:\"\";position:absolute;display:block;top:1px;left:1px;border-radius:6px;width:calc(100% - 2px);height:calc(100% - 2px);box-sizing:border-box;border:1px solid #c4c7cf}.___SCalendarUnit_culb2_gg_.__today_culb2_gg_.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_:before,.___SCalendarUnit_culb2_gg_.__today_culb2_gg_.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_:before{border-color:hsla(0,0%,100%,.5)}.___SCalendarUnit_culb2_gg_.__selected_culb2_gg_{background:#c4e5fe;border-radius:0;color:#191b23}.___SCalendarUnit_culb2_gg_.__selected_culb2_gg_:hover{background:#008ff8}.___SCalendarUnit_culb2_gg_.__highlighted_culb2_gg_{background:rgba(0,143,248,.2);border-radius:0;color:#191b23}.___SCalendarUnit_culb2_gg_.__highlighted_culb2_gg_:hover{background:rgba(0,143,248,.3)}.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:0;border-top-left-radius:6px;border-top-right-radius:0;color:#fff;background:#2bb3ff}.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_:hover{color:#fff;background:#008ff8}.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_{background:#2bb3ff;border-bottom-left-radius:0;border-bottom-right-radius:6px;border-top-left-radius:0;border-top-right-radius:6px;color:#fff}.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_:hover{color:#fff;background:#008ff8}.___SCalendarUnit_culb2_gg_.__startHighlighted_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:0;border-top-left-radius:6px;border-top-right-radius:0}.___SCalendarUnit_culb2_gg_.__endHighlighted_culb2_gg_{border-bottom-left-radius:0;border-bottom-right-radius:6px;border-top-left-radius:0;border-top-right-radius:6px}.___SCalendarUnit_culb2_gg_.__startHighlighted_culb2_gg_.___SCalendarUnit_culb2_gg_.__endHighlighted_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px}.___SCalendarUnit_culb2_gg_.__startSelected_culb2_gg_.___SCalendarUnit_culb2_gg_.__endSelected_culb2_gg_{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px}.___SCalendarUnit_culb2_gg_.__outdated_culb2_gg_{opacity:.2}.___SCalendarUnit_culb2_gg_.__disabled_culb2_gg_{opacity:.4;cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SCalendarUnit_culb2_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "glwl99_gg_")
+, "1k0az1i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCalendar": "___SCalendar_1hh6z_gg_",
-  "__SGridDays": "___SGridDays_1hh6z_gg_",
-  "__SGridMonths": "___SGridMonths_1hh6z_gg_",
-  "__SWeekDays": "___SWeekDays_1hh6z_gg_",
-  "__SWeekDay": "___SWeekDay_1hh6z_gg_",
-  "__SCalendarUnit": "___SCalendarUnit_1hh6z_gg_",
-  "_today": "__today_1hh6z_gg_",
-  "_endSelected": "__endSelected_1hh6z_gg_",
-  "_startSelected": "__startSelected_1hh6z_gg_",
-  "_selected": "__selected_1hh6z_gg_",
-  "_highlighted": "__highlighted_1hh6z_gg_",
-  "_startHighlighted": "__startHighlighted_1hh6z_gg_",
-  "_endHighlighted": "__endHighlighted_1hh6z_gg_",
-  "_disabled": "__disabled_1hh6z_gg_",
-  "_outdated": "__outdated_1hh6z_gg_"
+  "__SCalendar": "___SCalendar_culb2_gg_",
+  "__SGridDays": "___SGridDays_culb2_gg_",
+  "__SGridMonths": "___SGridMonths_culb2_gg_",
+  "__SWeekDays": "___SWeekDays_culb2_gg_",
+  "__SWeekDay": "___SWeekDay_culb2_gg_",
+  "__SCalendarUnit": "___SCalendarUnit_culb2_gg_",
+  "_today": "__today_culb2_gg_",
+  "_endSelected": "__endSelected_culb2_gg_",
+  "_startSelected": "__startSelected_culb2_gg_",
+  "_selected": "__selected_culb2_gg_",
+  "_highlighted": "__highlighted_culb2_gg_",
+  "_startHighlighted": "__startHighlighted_culb2_gg_",
+  "_endHighlighted": "__endHighlighted_culb2_gg_",
+  "_outdated": "__outdated_culb2_gg_",
+  "_disabled": "__disabled_culb2_gg_"
 });
 dayjs.extend(isBetween);
 

package/lib/es6/components/PickerAbstract.js

@@ -34,16 +34,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SPopper_1v9b6_gg_{padding:16px;outline:0}.___SPopper_1v9b6_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_1v9b6_gg_:active,.___SPopper_1v9b6_gg_:focus,.___SPopper_1v9b6_gg_:hover{outline:0;text-decoration:none}.___SPopper_1v9b6_gg_:focus{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SHeader_1v9b6_gg_{display:flex}.___STitle_1v9b6_gg_{font-size:12px;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_1v9b6_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_1v9b6_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
+".___SPopper_16bic_gg_{padding:16px;outline:0}.___SPopper_16bic_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_16bic_gg_:active,.___SPopper_16bic_gg_:focus,.___SPopper_16bic_gg_:hover{outline:0;text-decoration:none}.___SPopper_16bic_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SHeader_16bic_gg_{display:flex;align-items:center}.___STitle_16bic_gg_{font-size:14px;color:#191b23;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_16bic_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_16bic_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
 /*__inner_css_end__*/
-, "1olnti5_gg_")
+, "iz6ur6_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPopper": "___SPopper_1v9b6_gg_",
-  "__SHeader": "___SHeader_1v9b6_gg_",
-  "__STitle": "___STitle_1v9b6_gg_",
-  "__SToday": "___SToday_1v9b6_gg_",
-  "__SPeriod": "___SPeriod_1v9b6_gg_"
+  "__SPopper": "___SPopper_16bic_gg_",
+  "__SHeader": "___SHeader_16bic_gg_",
+  "__STitle": "___STitle_16bic_gg_",
+  "__SToday": "___SToday_16bic_gg_",
+  "__SPeriod": "___SPeriod_16bic_gg_"
 });
 import includesDate from '../utils/includesDate';
 var i18n = {

package/lib/es6/components/RangePickerAbstract.js

@@ -38,16 +38,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SPopper_1v9b6_gg_{padding:16px;outline:0}.___SPopper_1v9b6_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_1v9b6_gg_:active,.___SPopper_1v9b6_gg_:focus,.___SPopper_1v9b6_gg_:hover{outline:0;text-decoration:none}.___SPopper_1v9b6_gg_:focus{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SHeader_1v9b6_gg_{display:flex}.___STitle_1v9b6_gg_{font-size:12px;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_1v9b6_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_1v9b6_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
+".___SPopper_16bic_gg_{padding:16px;outline:0}.___SPopper_16bic_gg_::-moz-focus-inner{border:none;padding:0}.___SPopper_16bic_gg_:active,.___SPopper_16bic_gg_:focus,.___SPopper_16bic_gg_:hover{outline:0;text-decoration:none}.___SPopper_16bic_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SHeader_16bic_gg_{display:flex;align-items:center}.___STitle_16bic_gg_{font-size:14px;color:#191b23;height:32px;width:100%;display:flex;justify-content:center;align-items:center}.___SToday_16bic_gg_{display:flex;margin-top:12px;justify-content:center}.___SPeriod_16bic_gg_{display:flex;flex-direction:column;margin-bottom:8px}"
 /*__inner_css_end__*/
-, "1olnti5_gg_")
+, "iz6ur6_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPopper": "___SPopper_1v9b6_gg_",
-  "__SHeader": "___SHeader_1v9b6_gg_",
-  "__STitle": "___STitle_1v9b6_gg_",
-  "__SToday": "___SToday_1v9b6_gg_",
-  "__SPeriod": "___SPeriod_1v9b6_gg_"
+  "__SPopper": "___SPopper_16bic_gg_",
+  "__SHeader": "___SHeader_16bic_gg_",
+  "__STitle": "___STitle_16bic_gg_",
+  "__SToday": "___SToday_16bic_gg_",
+  "__SPeriod": "___SPeriod_16bic_gg_"
 });
 var i18n = {
   de: de,

package/lib/es6/index.d.ts

@@ -100,7 +100,7 @@ export interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps
    * Component size
    * @default m
    */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /**
    * The selected date, accepts everything which is accepted by `new Date()`
    * */

package/lib/es6/style/calendar.shadow.css

@@ -29,8 +29,8 @@ SWeekDay {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray60);
-  font-size: var(--fs-100);
+  color: var(--gray-500);
+  font-size: var(--fs-200);
   font-weight: 400;
   overflow: hidden;
 }
@@ -43,7 +43,7 @@ SCalendarUnit {
   text-align: center;
   vertical-align: middle;
   border: 1px solid transparent;
-  color: var(--gray20);
+  color: var(--gray-800);
   outline: 0;
   box-shadow: none;
   overflow: visible;
@@ -53,11 +53,11 @@ SCalendarUnit {
   background: transparent;
 
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--rounded-m);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
-  font-size: 12px;
+  font-size: var(--fs-200);
   justify-content: center;
   min-height: 32px;
   min-width: 32px;
@@ -66,12 +66,12 @@ SCalendarUnit {
   outline: none;
 
   &:hover {
-    color: var(--gray20);
-    background: color-mod(var(--stone) alpha(20%));
+    color: var(--gray-800);
+    background: var(--gray-100);
   }
 
   &:focus-visible {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
@@ -80,13 +80,13 @@ SCalendarUnit[today] {
     content: '';
     position: absolute;
     display: block;
-    top: 2px;
-    left: 2px;
-    border-radius: 3px;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
+    top: 1px;
+    left: 1px;
+    border-radius: var(--rounded-m);
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
     box-sizing: border-box;
-    border: 1px solid color-mod(black alpha(20%));
+    border: 1px solid var(--gray-200);
   }
 }
 
@@ -98,79 +98,83 @@ SCalendarUnit[today]SCalendarUnit[endSelected] {
 }
 
 SCalendarUnit[selected] {
-  background: color-mod(var(--light-blue) alpha(10%));
+  background: var(--blue-100);
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[highlighted] {
-  background: color-mod(var(--light-blue) alpha(20%));
+  background: color-mod(var(--blue-400) alpha(20%));
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: color-mod(var(--blue-400) alpha(30%));
   }
 }
 
 SCalendarUnit[startSelected] {
-  background: var(--light-blue);
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
   color: white;
+  background: var(--blue-300);
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[endSelected] {
-  background: var(--light-blue);
+  background: var(--blue-300);
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
   color: white;
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[startHighlighted] {
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
 }
 
 SCalendarUnit[endHighlighted] {
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startSelected]SCalendarUnit[endSelected] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
+}
+
+SCalendarUnit[outdated] {
+  opacity: 0.2;
 }
 
 SCalendarUnit[disabled] {
@@ -179,10 +183,6 @@ SCalendarUnit[disabled] {
   pointer-events: none;
 }
 
-SCalendarUnit[outdated] {
-  opacity: 0.2;
-}
-
 @media (prefers-reduced-motion) {
   SCalendarUnit {
     transition: none;

package/lib/es6/style/date-picker.shadow.css

@@ -17,16 +17,18 @@ SPopper {
   }
 
   &:focus {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
 SHeader {
   display: flex;
+  align-items: center;
 }
 
 STitle {
-  font-size: var(--fs-100);
+  font-size: var(--fs-200);
+  color: var(--gray-800);
   height: 32px;
   width: 100%;
   display: flex;

package/lib/types/index.d.ts

@@ -100,7 +100,7 @@ export interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps
    * Component size
    * @default m
    */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /**
    * The selected date, accepts everything which is accepted by `new Date()`
    * */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/date-picker",
   "description": "SEMRush DatePicker Component",
-  "version": "2.8.5",
+  "version": "3.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@semcore/utils": "^3.27",
-    "@semcore/base-trigger": "^2",
+    "@semcore/base-trigger": "^3.0.0",
     "@semcore/flex-box": "^4",
-    "@semcore/button": "^3.3.2",
+    "@semcore/button": "^4",
     "@semcore/divider": "^2",
     "@semcore/icon": "^2.16",
     "@semcore/dropdown": "^2",

package/src/DatePicker.jsx

@@ -52,7 +52,7 @@ export class DatePickerRoot extends PickerAbstract {
         <>
           <DatePicker.Header />
           <DatePicker.Calendar />
-          <Divider ml={-4} w="calc(100% + 32px)" />
+          <Divider ml={-4} mt={4} w="calc(100% + 32px)" />
           <DatePicker.Today />
         </>
       ),

package/src/index.d.ts

@@ -100,7 +100,7 @@ export interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps
    * Component size
    * @default m
    */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /**
    * The selected date, accepts everything which is accepted by `new Date()`
    * */

package/src/style/calendar.shadow.css

@@ -29,8 +29,8 @@ SWeekDay {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray60);
-  font-size: var(--fs-100);
+  color: var(--gray-500);
+  font-size: var(--fs-200);
   font-weight: 400;
   overflow: hidden;
 }
@@ -43,7 +43,7 @@ SCalendarUnit {
   text-align: center;
   vertical-align: middle;
   border: 1px solid transparent;
-  color: var(--gray20);
+  color: var(--gray-800);
   outline: 0;
   box-shadow: none;
   overflow: visible;
@@ -53,11 +53,11 @@ SCalendarUnit {
   background: transparent;
 
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--rounded-m);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
-  font-size: 12px;
+  font-size: var(--fs-200);
   justify-content: center;
   min-height: 32px;
   min-width: 32px;
@@ -66,12 +66,12 @@ SCalendarUnit {
   outline: none;
 
   &:hover {
-    color: var(--gray20);
-    background: color-mod(var(--stone) alpha(20%));
+    color: var(--gray-800);
+    background: var(--gray-100);
   }
 
   &:focus-visible {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
@@ -80,13 +80,13 @@ SCalendarUnit[today] {
     content: '';
     position: absolute;
     display: block;
-    top: 2px;
-    left: 2px;
-    border-radius: 3px;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
+    top: 1px;
+    left: 1px;
+    border-radius: var(--rounded-m);
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
     box-sizing: border-box;
-    border: 1px solid color-mod(black alpha(20%));
+    border: 1px solid var(--gray-200);
   }
 }
 
@@ -98,79 +98,83 @@ SCalendarUnit[today]SCalendarUnit[endSelected] {
 }
 
 SCalendarUnit[selected] {
-  background: color-mod(var(--light-blue) alpha(10%));
+  background: var(--blue-100);
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[highlighted] {
-  background: color-mod(var(--light-blue) alpha(20%));
+  background: color-mod(var(--blue-400) alpha(20%));
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: color-mod(var(--blue-400) alpha(30%));
   }
 }
 
 SCalendarUnit[startSelected] {
-  background: var(--light-blue);
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
   color: white;
+  background: var(--blue-300);
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[endSelected] {
-  background: var(--light-blue);
+  background: var(--blue-300);
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
   color: white;
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[startHighlighted] {
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
 }
 
 SCalendarUnit[endHighlighted] {
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startSelected]SCalendarUnit[endSelected] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
+}
+
+SCalendarUnit[outdated] {
+  opacity: 0.2;
 }
 
 SCalendarUnit[disabled] {
@@ -179,10 +183,6 @@ SCalendarUnit[disabled] {
   pointer-events: none;
 }
 
-SCalendarUnit[outdated] {
-  opacity: 0.2;
-}
-
 @media (prefers-reduced-motion) {
   SCalendarUnit {
     transition: none;

package/src/style/date-picker.shadow.css

@@ -17,16 +17,18 @@ SPopper {
   }
 
   &:focus {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
 SHeader {
   display: flex;
+  align-items: center;
 }
 
 STitle {
-  font-size: var(--fs-100);
+  font-size: var(--fs-200);
+  color: var(--gray-800);
   height: 32px;
   width: 100%;
   display: flex;