@via-profit/ui-kit 0.1.0-rc.62 → 0.1.0-rc.64

package/Autocomplete/AutocompleteContainer.d.ts

@@ -34,6 +34,10 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * Should the autocomplete element be cleared when blur and if no element is selected
      */
     readonly clearIfNotSelected?: boolean;
+    /**
+     * Show clear button if clearable is true
+     */
+    readonly clearable?: boolean;
     /**
      * items render function
      */
@@ -44,7 +48,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
     readonly getOptionSelected?: GetOptionSelected<T>;
     readonly onRequestClose?: OnRequestClose;
     readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
-    readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement, Element>) => void;
+    readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLInputElement, Element>) => void;
     /**
      * Overridable components map
      */

package/Autocomplete/AutocompleteContainer.js

@@ -46,7 +46,7 @@ const context_1 = __importStar(require("./context"));
 const IconClear_1 = __importDefault(require("./IconClear"));
 const ClickOutside_1 = require("../ClickOutside");
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
     const menuRef = react_1.default.useRef(null);
     const fieldInputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
@@ -178,7 +178,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         };
     }, [onRequestClose, anchorElement]);
     return (react_1.default.createElement("div", null,
-        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)) }, nativeInputProps, { onKeyDown: event => {
+        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: clearable ? (react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null))) : undefined }, nativeInputProps, { onKeyDown: event => {
                 inputKeydownEvent(event);
                 if (typeof nativeInputProps.onKeyDown === 'function') {
                     nativeInputProps.onKeyDown(event);
@@ -228,6 +228,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }));
                 // dispatch(actionSetPartial({ inputValue: event.currentTarget.value }));
             } }))), [
+            overridesMap,
             placeholder,
             label,
             error,
@@ -236,14 +237,14 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             fullWidth,
             startIcon,
             currentLoading,
-            inputKeydownEvent,
+            clearable,
+            nativeInputProps,
             inputValue,
             clear,
-            overridesMap,
+            inputKeydownEvent,
             anchorElement,
             dispatch,
             inputRef,
-            nativeInputProps,
             onRequestOpen,
             onInputChange,
             filterItems,

package/Autocomplete/AutocompleteTextField.js

@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const TextField_1 = __importDefault(require("../TextField"));
-const AutocompletetextField = (props, ref) => react_1.default.createElement(TextField_1.default, Object.assign({}, props, { ref: ref }));
-exports.default = react_1.default.forwardRef(AutocompletetextField);
+const AutocompleteTextField = (props, ref) => react_1.default.createElement(TextField_1.default, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(AutocompleteTextField);

package/Button/ButtonBase.js

@@ -19,7 +19,7 @@ const ButtonIconWrapper_1 = __importDefault(require("./ButtonIconWrapper"));
 const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
 const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
-    const { children, startIcon, endIcon, color, overrides, iconOnly } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly"]);
+    const { children, startIcon, endIcon, color, overrides, iconOnly, type } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly", "type"]);
     const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: ButtonTextWrapper_1.default,
         IconWrapper: ButtonIconWrapper_1.default,
         Container: ButtonContainer_1.default }, overrides)), [overrides]);
@@ -28,7 +28,7 @@ const ButtonBase = (props, ref) => {
             (typeof endIcon !== 'undefined' && endIcon !== null))) {
         console.warn('The «iconOnly» property should not be used simultaneously with «startIcon» and/or «endIcon»');
     }
-    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, iconOnly: iconOnly, ref: ref }),
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({ type: typeof type === 'undefined' ? 'button' : type }, nativeProps, { color: color, iconOnly: iconOnly, ref: ref }),
         typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
         react_1.default.createElement(overridesMap.TextWrapper, { iconOnly: iconOnly }, children),
         typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))));

package/Button/ButtonStandard.js

@@ -36,7 +36,6 @@ const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
             return $background.toString();
     }
 }};
-  box-shadow: 0 0.125em 0.25em ${({ $background }) => $background.darken(100).alpha(0.5).toString()};
   ${({ $background }) => {
     switch (true) {
         case $background.luminance() > 0.49:

package/Calendar/CalendarBody.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const CalendarBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default CalendarBody;

package/Calendar/CalendarBody.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarBody = styled_1.default.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 15em;
+`;
+exports.default = CalendarBody;

package/Calendar/CalendarCell.d.ts

@@ -3,6 +3,7 @@ export interface CalendarCellProps extends React.ButtonHTMLAttributes<HTMLButton
     readonly isToday?: boolean;
     readonly isSelected?: boolean;
     readonly isDisabled?: boolean;
+    readonly accentColor?: 'primary' | 'secondary' | string;
 }
 declare const _default: React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarCell.js

@@ -16,7 +16,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const Btn = styled_1.default.button `
+const Button_1 = __importDefault(require("../Button"));
+const Btn = (0, styled_1.default)(Button_1.default) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,34 +27,11 @@ const Btn = styled_1.default.button `
   margin: 0;
   min-width: 0;
   outline: none;
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
-  border: 1px solid transparent;
-  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.color.accentPrimary.toString() : theme.color.surface.toString()};
+  position: relative;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
-  color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
-    if ($isDisabled) {
-        return theme.color.textSecondary.toString();
-    }
-    if ($isSelected) {
-        return theme.color.accentPrimaryContrast.toString();
-    }
-    if ($isToday) {
-        return theme.color.accentPrimary.toString();
-    }
-    return theme.color.textPrimary.toString();
-}};
-  &:hover {
-    background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.color.accentPrimary.darken(10).toString()
-    : theme.color.surface.darken(10).toString()};
-  }
-  &:focus-visible {
-    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.color.accentPrimary.toString()};
-  }
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.4 : 1)};
 `;
 const CalendarCell = (props, ref) => {
-    const { isToday, children, isSelected, isDisabled } = props, restProps = __rest(props, ["isToday", "children", "isSelected", "isDisabled"]);
-    return (react_1.default.createElement(Btn, Object.assign({ type: "button" }, restProps, { ref: ref, tabIndex: isDisabled ? -1 : restProps.tabIndex, "$isToday": Boolean(isToday), "$isSelected": Boolean(isSelected), "$isDisabled": Boolean(isDisabled) }), children));
+    const { isToday, children, isSelected, isDisabled, accentColor } = props, restProps = __rest(props, ["isToday", "children", "isSelected", "isDisabled", "accentColor"]);
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { iconOnly: true, type: "button", variant: isSelected ? 'standard' : isToday ? 'outlined' : 'plain', ref: ref, color: isSelected || isToday ? accentColor : 'default', tabIndex: isDisabled ? -1 : restProps.tabIndex, disabled: isDisabled }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarCell);

package/Calendar/CalendarControlButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+export type CalendarControlButtonProps = ButtonProps;
+declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
+    readonly variant?: "standard" | "outlined" | "plain" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Calendar/CalendarControlButton.js

@@ -0,0 +1,25 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const Button_1 = __importDefault(require("../Button"));
+const CalendarControlButton = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    const { color } = (0, react_2.useTheme)();
+    return (react_1.default.createElement(Button_1.default, Object.assign({ type: "button", variant: "plain", color: color.accentSecondaryContrast.toString() }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarControlButton);

package/Calendar/CalendarDateContainer.js

@@ -9,5 +9,6 @@ const CalendarDateContainer = styled_1.default.div `
   display: flex;
   flex-direction: column;
   justify-content: stretch;
+  padding: 0.4em;
 `;
 exports.default = react_1.default.memo(CalendarDateContainer);

package/Calendar/CalendarDayBadge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CalendarDayBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly accentColor?: 'primary' | 'secondary' | string;
+    readonly isToday: boolean;
+    readonly badgeContent: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Calendar/CalendarDayBadge.js

@@ -0,0 +1,75 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const StyledBadge = styled_1.default.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 = (0, react_2.useTheme)();
+    const { $color, $backgroundColor } = react_1.default.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 = new Color_1.default(accentColor);
+        return {
+            $backgroundColor: accentColor,
+            $color: clr.contrast(accentColor) > 5
+                ? theme.color.textPrimary.toString()
+                : theme.color.surface.toString(),
+        };
+    }, [accentColor, theme, badgeContent]);
+    if (!badgeContent) {
+        return children;
+    }
+    return (react_1.default.createElement(StyledBadge, Object.assign({ "$color": $color, "$backgroundColor": $backgroundColor }, restProps, { ref: ref }), badgeContent));
+};
+exports.default = react_1.default.forwardRef(CalendarDayBadge);

package/Calendar/CalendarFooter.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CalendarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+}
+declare const _default: React.ForwardRefExoticComponent<CalendarFooterProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarFooter.js

@@ -0,0 +1,42 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledCalendarFooter = styled_1.default.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_1.default.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_1.default.createElement(StyledCalendarFooter, Object.assign({}, restProps, { ref: ref }),
+        react_1.default.createElement(CalendarFooterInner, null, children)));
+};
+exports.default = react_1.default.forwardRef(CalendarFooter);

package/Calendar/{CalendarTopBar.d.ts → CalendarHeader.d.ts}

@@ -1,4 +1,4 @@
 import React from 'react';
-export type CalendarTopBarProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>;
+export type CalendarHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Calendar/CalendarHeader.js

@@ -0,0 +1,34 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledCalendarHeader = styled_1.default.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_1.default.createElement(StyledCalendarHeader, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarHeader);

package/Calendar/CalendarHeading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarHeadingProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarHeading.js

@@ -0,0 +1,32 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledCalendarHeading = styled_1.default.div `
+  font-weight: 600;
+  font-size: 1.6em;
+  margin: 0 0 0.2em 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+`;
+const CalendarHeading = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledCalendarHeading, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarHeading);

package/Calendar/CalendarMonthCell.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface CalendarMonthCellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly isSelected?: boolean;
+    readonly accentColor?: 'primary' | 'secondary' | string;
+}
+declare const _default: React.ForwardRefExoticComponent<CalendarMonthCellProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Calendar/CalendarMonthCell.js

@@ -0,0 +1,48 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Button_1 = __importDefault(require("../Button"));
+const Btn = (0, styled_1.default)(Button_1.default) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  flex-basis: 50%;
+`;
+const CalendarMonthCell = (props, ref) => {
+    const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
+    const myRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        if (isSelected && myRef.current) {
+            myRef.current.scrollIntoView({ behavior: 'instant' });
+        }
+    }, [isSelected]);
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
+            if (typeof ref === 'function') {
+                ref(el);
+            }
+            if (ref && typeof ref === 'object') {
+                ref.current = el;
+            }
+            myRef.current = el;
+        } }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarMonthCell);

package/Calendar/CalendarMonthControl.js

@@ -16,34 +16,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Button_1 = __importDefault(require("../Button"));
 const IconChevronLeft_1 = __importDefault(require("./IconChevronLeft"));
 const IconChevronRight_1 = __importDefault(require("./IconChevronRight"));
-const Btn = styled_1.default.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1em;
-  width: 2.25em;
-  height: 2.25em;
-  padding: 0;
-  margin: 0;
-  min-width: 0;
-  outline: none;
-  cursor: pointer;
-  border: 1px solid transparent;
-  background-color: ${({ theme }) => theme.color.surface.toString()};
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
-  color: ${({ theme }) => theme.color.textPrimary.toString()};
+const StyledButton = (0, styled_1.default)(Button_1.default) `
+  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.color.surface.darken(0.1).toString()};
+    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.5).toString()};
+    background-color: ${({ theme }) => theme.color.accentSecondary.lighten(10).toString()};
   }
-  &:focus-visible {
-    border-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  &:active {
+    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.9).toString()};
   }
-  opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
+  ${({ disabled }) => disabled &&
+    (0, react_2.css) `
+      opacity: 0.5;
+    `};
 `;
 const CalendarMonthControl = (props, ref) => {
     const { displayIcon } = props, restProps = __rest(props, ["displayIcon"]);
-    return (react_1.default.createElement(Btn, Object.assign({ type: "button" }, restProps, { ref: ref }), displayIcon === 'next' ? react_1.default.createElement(IconChevronRight_1.default, null) : react_1.default.createElement(IconChevronLeft_1.default, null)));
+    return (react_1.default.createElement(StyledButton, Object.assign({ variant: "plain", iconOnly: true, type: "button" }, restProps, { ref: ref }), displayIcon === 'next' ? react_1.default.createElement(IconChevronRight_1.default, null) : react_1.default.createElement(IconChevronLeft_1.default, null)));
 };
 exports.default = react_1.default.forwardRef(CalendarMonthControl);

package/Calendar/CalendarMonthesSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarMonthesSelectorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarMonthesSelectorProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/{Menu/MenuListPopper.js → Calendar/CalendarMonthesSelector.js}

@@ -16,16 +16,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const StyledMenuListPopper = styled_1.default.div `
-  visibility: ${props => (props.$isOpen ? 'visible' : 'hidden')};
-  z-index: ${({ theme }) => theme.zIndex.modal};
-  max-height: 18em;
-  max-width: 18em;
+const SelectorContainer = styled_1.default.div `
+  flex: 1;
   display: flex;
-  position: static;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  padding: 0.8em;
 `;
-const MenuListPopper = (props, ref) => {
-    const { isOpen, children } = props, nativeProps = __rest(props, ["isOpen", "children"]);
-    return (react_1.default.createElement(StyledMenuListPopper, Object.assign({}, nativeProps, { ref: ref, "$isOpen": isOpen }), children));
+const CalendarMonthesSelector = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(SelectorContainer, Object.assign({}, restProps, { ref: ref }), children));
 };
-exports.default = react_1.default.forwardRef(MenuListPopper);
+exports.default = react_1.default.forwardRef(CalendarMonthesSelector);

package/Calendar/CalendarPaper.js

@@ -5,15 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const CalendarPaper = styled_1.default.div `
+  width: 18em;
   position: relative;
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   justify-content: stretch;
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
-  padding: 0.4em;
-  max-width: 17.6em;
-  max-height: 20.4em;
   box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
 `;
 exports.default = CalendarPaper;

package/Calendar/CalendarSubheading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarSubheadingProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarSubheadingProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;