@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Calendar/CalendarControlButton.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../Button';
+import { css } from '@emotion/react';
+const StyledCalendarControlButton = styled(Button) `
+  color: ${({ theme, disabled }) => disabled
+    ? theme.color.accentSecondaryContrast.alpha(0.2).toString()
+    : theme.color.accentSecondaryContrast.toString()};
+  background-color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0).toString()};
+  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  ${({ disabled, theme }) => !disabled &&
+    css `
+      &:hover {
+        color: ${theme.color.accentSecondaryContrast.toString()};
+        background-color: ${theme.color.accentSecondaryContrast.alpha(0.2).toString()};
+      }
+      &:active {
+        color: ${theme.color.accentSecondaryContrast.toString()};
+        background-color: ${theme.color.accentSecondaryContrast.alpha(0.5).toString()};
+      }
+    `}
+`;
+const CalendarControlButton = (props, ref) => {
+    const { children, isActive } = props, restProps = __rest(props, ["children", "isActive"]);
+    return (React.createElement(StyledCalendarControlButton, Object.assign({ type: "button", variant: "plain", "$isActive": isActive }, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarControlButton);

package/esm/Calendar/CalendarDateContainer.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledCalendarDateContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  padding: 0.4em;
+`;
+const CalendarDateContainer = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarDateContainer, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarDateContainer);

package/esm/Calendar/CalendarDayBadge.js

@@ -0,0 +1,70 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+import Color from '../Color';
+const StyledBadge = styled.span `
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+  color: ${({ $color }) => $color};
+  position: absolute;
+  top: -0.5em;
+  left: 55%;
+  border-radius: 20px;
+  padding: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 0.8em;
+  min-width: 1.8em;
+  min-height: 0.8em;
+  max-width: 4em;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+`;
+const CalendarDayBadge = (props, ref) => {
+    const { isToday, children, accentColor = 'secondary', badgeContent } = props, restProps = __rest(props, ["isToday", "children", "accentColor", "badgeContent"]);
+    const theme = useTheme();
+    const { $color, $backgroundColor } = React.useMemo(() => {
+        if (!badgeContent) {
+            return {
+                $color: 'transparent',
+                $backgroundColor: 'transparent',
+            };
+        }
+        if (accentColor === 'primary') {
+            return {
+                $color: theme.color.accentPrimaryContrast.toString(),
+                $backgroundColor: theme.color.accentPrimary.toString(),
+            };
+        }
+        if (accentColor === 'secondary') {
+            return {
+                $color: theme.color.accentSecondaryContrast.toString(),
+                $backgroundColor: theme.color.accentSecondary.toString(),
+            };
+        }
+        const clr = Color.fromString(accentColor);
+        return {
+            $backgroundColor: accentColor,
+            $color: clr.getContrast(accentColor) > 5
+                ? theme.color.textPrimary.toString()
+                : theme.color.surface.toString(),
+        };
+    }, [accentColor, theme, badgeContent]);
+    if (!badgeContent) {
+        return children;
+    }
+    return (React.createElement(StyledBadge, Object.assign({ "$color": $color, "$backgroundColor": $backgroundColor }, restProps, { ref: ref }), badgeContent));
+};
+export default React.forwardRef(CalendarDayBadge);

package/esm/Calendar/CalendarEmptyCell.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Elem = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+  width: 3em;
+  height: 3em;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  position: relative;
+  font-weight: 400;
+  color: ${({ theme }) => theme.color.textSecondary.alpha(0.5).toString()};
+`;
+const CalendarEmptyCell = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(Elem, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarEmptyCell);

package/esm/Calendar/CalendarFooter.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledCalendarFooter = styled.div `
+  display: flex;
+  padding: 0.8em;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  background-color: ${({ theme }) => theme.color.accentSecondary.toString()};
+  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
+`;
+const CalendarFooterInner = styled.div `
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 0 -0.8em;
+  & > * {
+    margin: 0 0.4em;
+  }
+`;
+const CalendarFooter = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarFooter, Object.assign({}, restProps, { ref: ref }),
+        React.createElement(CalendarFooterInner, null, children)));
+};
+export default React.forwardRef(CalendarFooter);

package/esm/Calendar/CalendarHeader.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledCalendarHeader = styled.div `
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+  margin-bottom: 0.5em;
+  padding: 0.8em 0.8em 0.4em 0.8em;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  background-color: ${({ theme }) => theme.color.accentSecondary.toString()};
+  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
+`;
+const CalendarHeader = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarHeader, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarHeader);

package/esm/Calendar/CalendarHeading.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledCalendarHeading = styled.div `
+  font-weight: 600;
+  font-size: 1.2em;
+  margin: 0 0 0.2em 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+`;
+const CalendarHeading = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarHeading, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarHeading);

package/esm/Calendar/CalendarIconNext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const CalendarIconNext = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    React.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "m184 112 144 144-144 144" })));
+export default React.forwardRef(CalendarIconNext);

package/esm/Calendar/CalendarIconPrev.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const CalendarIconPrev = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    React.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "M328 112 184 256l144 144" })));
+export default React.forwardRef(CalendarIconPrev);

package/esm/Calendar/CalendarMonthCell.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../Button';
+const Btn = styled(Button) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+  margin: 0;
+  min-width: 0;
+  flex-basis: 50%;
+`;
+const CalendarMonthCell = (props, ref) => {
+    const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
+    return (React.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
+};
+export default React.forwardRef(CalendarMonthCell);

package/esm/Calendar/CalendarMonthsSelector.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const SelectorContainer = styled.div `
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  padding: 0.8em;
+`;
+const CalendarMonthsSelector = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(SelectorContainer, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarMonthsSelector);

package/esm/Calendar/CalendarPaper.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { elevation } from '../ThemeProvider/tokens';
+const StyledCalendarPaper = styled.div `
+  width: 18em;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: stretch;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  box-shadow: ${({ theme }) => elevation(theme, 'popup', `0 4px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
+`;
+const CalendarPaper = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarPaper, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarPaper);

package/esm/Calendar/CalendarSubheading.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledCalendarSubheading = styled.div `
+  font-weight: 400;
+  font-size: 1em;
+  opacity: 0.8;
+  margin-bottom: 1em;
+  text-align: center;
+`;
+const CalendarSubheading = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarSubheading, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarSubheading);

package/esm/Calendar/CalendarToolbar.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledCalendarToolbar = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 100%;
+  margin-left: -0.8em;
+  margin-right: -0.8em;
+`;
+const CalendarToolbar = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarToolbar, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarToolbar);

package/esm/Calendar/CalendarWeekDayCell.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import CalendarEmptyCell from './CalendarEmptyCell';
+const Cell = styled(CalendarEmptyCell) `
+  color: currentColor;
+  ${({ $inCurrentMonth }) => !$inCurrentMonth &&
+    css `
+      opacity: 0.5;
+    `}
+`;
+const CalendarWeekDayCell = (props, ref) => {
+    const { isToday, children, inCurrentMonth } = props, restProps = __rest(props, ["isToday", "children", "inCurrentMonth"]);
+    return (React.createElement(Cell, Object.assign({}, restProps, { "$isToday": isToday, "$inCurrentMonth": inCurrentMonth, ref: ref }), children));
+};
+export default React.forwardRef(CalendarWeekDayCell);

package/esm/Calendar/CalendarWeekDayLabel.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const CalendarWeekDayLabel = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 200;
+  font-size: 0.8em;
+  user-select: none;
+  width: 3em;
+  height: 3em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+export default React.memo(CalendarWeekDayLabel);

package/esm/Calendar/CalendarWeekDayWeekNumber.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import CalendarEmptyCell from './CalendarEmptyCell';
+const Cell = styled(CalendarEmptyCell) `
+  font-weight: 800;
+  position: relative;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  &:before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    right: 0;
+    top: 30%;
+    bottom: 30%;
+    background-color: currentColor;
+  }
+`;
+const CalendarWeekDayWeekNumber = (props, ref) => {
+    const { week, children } = props, restProps = __rest(props, ["week", "children"]);
+    return (React.createElement(Cell, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarWeekDayWeekNumber);

package/esm/Calendar/CalendarWeekDaysBar.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import CalendarWeekDayLabel from './CalendarWeekDayLabel';
+const Container = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CalendarWeekDaysBar = (props, ref) => {
+    const { locale, week, format } = props, restProps = __rest(props, ["locale", "week", "format"]);
+    const weekDayLabels = React.useMemo(() => week.days.map(day => typeof Intl !== 'undefined'
+        ? new Intl.DateTimeFormat(locale, {
+            weekday: format,
+        }).format(day.date)
+        : '\u{0020}'), [format, locale, week]);
+    return (
+    // Hidden from screen readers: every day cell has the full date label with the weekday
+    React.createElement(Container, Object.assign({ "aria-hidden": true }, restProps, { ref: ref }), weekDayLabels.map((label, index) => (
+    // The narrow labels repeat (e.g. «С» for Wednesday and Saturday), so the key is the index
+    // eslint-disable-next-line react/no-array-index-key
+    React.createElement(CalendarWeekDayLabel, { key: index }, label)))));
+};
+export default React.forwardRef(CalendarWeekDaysBar);

package/esm/Calendar/CalendarWeekRow.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledCalendarWeekRow = styled.span `
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+  color: inherit;
+`;
+const CalendarWeekRow = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarWeekRow, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarWeekRow);

package/esm/Calendar/CalendarWeekRowButton.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../Button';
+import CalendarWeekRow from './CalendarWeekRow';
+const StyleButton = styled(Button) `
+  padding: 0.2em 0.5em !important;
+  font-size: 1em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+`;
+const CalendarWeekRowButton = (props, ref) => {
+    const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
+    return (React.createElement(StyleButton, Object.assign({ type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default' }, restProps, { ref: ref }),
+        React.createElement(CalendarWeekRow, null, children)));
+};
+export default React.forwardRef(CalendarWeekRowButton);

package/esm/Calendar/CalendarYearCell.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../Button';
+const Btn = styled(Button) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9em;
+  margin: 0;
+  min-width: 0;
+  flex-basis: 33%;
+`;
+const CalendarYearCell = (props, ref) => {
+    const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
+    return (React.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
+};
+export default React.forwardRef(CalendarYearCell);