colibri-ui 0.7.59 → 0.7.60

package/Calendar/index.js

@@ -7,12 +7,14 @@ var React = require('react');
 var classNames = require('classnames/bind');
 var index$1 = require('../libs/requestIdleCallback/index.js');
 var index = require('../helpers/date/index.js');
+require('../Icons/index.js');
 var Month = require('./components/Month/Month.js');
 var getStartMonth = require('./utils/getStartMonth.js');
 var index$2 = require('./components/Presets/index.js');
 var getNumberOfMonthsBetweenDates = require('./utils/getNumberOfMonthsBetweenDates.js');
 var index$3 = require('./components/ContinueButton/index.js');
 var styles = require('./index.module.css');
+var ArrowNext = require('../Icons/ArrowNext.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -177,11 +179,15 @@ var Calendar = function Calendar(_a) {
     className: clx(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
     onClick: showPrevMonth,
     disabled: currentMonthOffset <= 0
-  }), /*#__PURE__*/React__default.default.createElement("button", {
+  }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
+    className: clx(styles__default.default["month-control-prev-arrow"])
+  })), /*#__PURE__*/React__default.default.createElement("button", {
     className: clx(styles__default.default["month-control"], styles__default.default["month-control-next"]),
     onClick: showNextMonth,
     disabled: currentMonthOffset >= 11
-  })), datePresets && ( /*#__PURE__*/React__default.default.createElement(index$2.Presets, {
+  }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
+    className: clx(styles__default.default["month-control-next-arrow"])
+  }))), datePresets && ( /*#__PURE__*/React__default.default.createElement(index$2.Presets, {
     presets: datePresets,
     onPresetSelect: handlePresetSelect
   })), withContinueButton && ( /*#__PURE__*/React__default.default.createElement(index$3.ContinueButton, {

package/Calendar/index.module.css

@@ -27,34 +27,13 @@
   top: 0;
   width: 80px;
 }
-.month-control::before {
-  border: 0 solid #fff;
-  content: "";
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  width: 40px;
-}
-.month-control::after {
-  background-repeat: no-repeat;
-  background-size: 10px 16px;
-  content: "";
-  display: inline-block;
-  height: 16px;
-  opacity: 0.8;
-  position: relative;
-  transition: opacity 0.3s ease;
-  width: 10px;
-}
-.month-control:hover::after {
-  opacity: 1;
-}
 .month-control[disabled] {
   cursor: default;
+}
+.month-control[disabled] .month-control-prev-arrow {
   opacity: 0.3;
 }
-.month-control[disabled]::after {
+.month-control[disabled] .month-control-next-arrow {
   opacity: 0.3;
 }
 
@@ -65,12 +44,15 @@
 }
 .month-control-prev::before {
   background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border: 0 solid #fff;
   border-left-width: 26px;
+  content: "";
+  display: block;
+  height: 100%;
   left: 0;
-}
-.month-control-prev::after {
-  background-image: url("./assets/next-arrow.svg");
-  transform: rotate(180deg);
+  position: absolute;
+  top: 0;
+  width: 40px;
 }
 
 .month-control-next {
@@ -80,11 +62,25 @@
 }
 .month-control-next::before {
   background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border: 0 solid #fff;
   border-right-width: 26px;
+  content: "";
+  display: block;
+  height: 100%;
+  position: absolute;
   right: 0;
+  top: 0;
+  width: 40px;
 }
-.month-control-next::after {
-  background-image: url("./assets/next-arrow.svg");
+
+.month-control-prev-arrow {
+  color: var(--palette-black);
+  transform: rotate(180deg);
+}
+
+.month-control-next-arrow {
+  color: var(--palette-black);
+  transform: rotate(360deg);
 }
 
 .months {

package/Icons/ArrowNext.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Icons/ArrowNext.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var ArrowNext = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 10 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 16 : _d,
+    props = tslib.__rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
+    ref: ref,
+    fill: "none",
+    width: width,
+    height: height,
+    viewBox: "0 0 10 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M1 1L8 8L1 15",
+    stroke: fill,
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }));
+});
+
+exports.default = ArrowNext;

package/Icons/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ArrowNext } from "./ArrowNext";
 export { default as Cart } from "./Cart";
 export { default as Chevron } from "./Chevron";
 export { default as Close } from "./Close";

package/Icons/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var ArrowNext = require('./ArrowNext.js');
 var Cart = require('./Cart.js');
 var Chevron = require('./Chevron.js');
 var Close = require('./Close.js');
@@ -15,6 +16,7 @@ var User = require('./User.js');
 
 
 
+exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;

package/esm/Calendar/index.js

@@ -3,12 +3,14 @@ import React__default, { useRef, useState, useEffect, useCallback } from 'react'
 import classNames from 'classnames/bind';
 import { requestIdleCallback } from '../libs/requestIdleCallback/index.js';
 import { getDaysDiff } from '../helpers/date/index.js';
+import '../Icons/index.js';
 import { Month } from './components/Month/Month.js';
 import { getStartMonth } from './utils/getStartMonth.js';
 import { Presets } from './components/Presets/index.js';
 import { getNumberOfMonthsBetweenDates } from './utils/getNumberOfMonthsBetweenDates.js';
 import { ContinueButton } from './components/ContinueButton/index.js';
 import styles from './index.module.css';
+import ArrowNext from '../Icons/ArrowNext.js';
 
 var clx = classNames.bind(styles);
 var idleCallbackOptions = {
@@ -167,11 +169,15 @@ var Calendar = function Calendar(_a) {
     className: clx(styles["month-control"], styles["month-control-prev"]),
     onClick: showPrevMonth,
     disabled: currentMonthOffset <= 0
-  }), /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement(ArrowNext, {
+    className: clx(styles["month-control-prev-arrow"])
+  })), /*#__PURE__*/React__default.createElement("button", {
     className: clx(styles["month-control"], styles["month-control-next"]),
     onClick: showNextMonth,
     disabled: currentMonthOffset >= 11
-  })), datePresets && ( /*#__PURE__*/React__default.createElement(Presets, {
+  }, /*#__PURE__*/React__default.createElement(ArrowNext, {
+    className: clx(styles["month-control-next-arrow"])
+  }))), datePresets && ( /*#__PURE__*/React__default.createElement(Presets, {
     presets: datePresets,
     onPresetSelect: handlePresetSelect
   })), withContinueButton && ( /*#__PURE__*/React__default.createElement(ContinueButton, {

package/esm/Calendar/index.module.css

@@ -27,34 +27,13 @@
   top: 0;
   width: 80px;
 }
-.month-control::before {
-  border: 0 solid #fff;
-  content: "";
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  width: 40px;
-}
-.month-control::after {
-  background-repeat: no-repeat;
-  background-size: 10px 16px;
-  content: "";
-  display: inline-block;
-  height: 16px;
-  opacity: 0.8;
-  position: relative;
-  transition: opacity 0.3s ease;
-  width: 10px;
-}
-.month-control:hover::after {
-  opacity: 1;
-}
 .month-control[disabled] {
   cursor: default;
+}
+.month-control[disabled] .month-control-prev-arrow {
   opacity: 0.3;
 }
-.month-control[disabled]::after {
+.month-control[disabled] .month-control-next-arrow {
   opacity: 0.3;
 }
 
@@ -65,12 +44,15 @@
 }
 .month-control-prev::before {
   background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border: 0 solid #fff;
   border-left-width: 26px;
+  content: "";
+  display: block;
+  height: 100%;
   left: 0;
-}
-.month-control-prev::after {
-  background-image: url("./assets/next-arrow.svg");
-  transform: rotate(180deg);
+  position: absolute;
+  top: 0;
+  width: 40px;
 }
 
 .month-control-next {
@@ -80,11 +62,25 @@
 }
 .month-control-next::before {
   background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border: 0 solid #fff;
   border-right-width: 26px;
+  content: "";
+  display: block;
+  height: 100%;
+  position: absolute;
   right: 0;
+  top: 0;
+  width: 40px;
 }
-.month-control-next::after {
-  background-image: url("./assets/next-arrow.svg");
+
+.month-control-prev-arrow {
+  color: var(--palette-black);
+  transform: rotate(180deg);
+}
+
+.month-control-next-arrow {
+  color: var(--palette-black);
+  transform: rotate(360deg);
 }
 
 .months {

package/esm/Icons/ArrowNext.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/esm/Icons/ArrowNext.js

@@ -0,0 +1,27 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { forwardRef } from 'react';
+
+var ArrowNext = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 10 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 16 : _d,
+    props = __rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.createElement("svg", __assign({
+    ref: ref,
+    fill: "none",
+    width: width,
+    height: height,
+    viewBox: "0 0 10 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M1 1L8 8L1 15",
+    stroke: fill,
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }));
+});
+
+export { ArrowNext as default };

package/esm/Icons/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ArrowNext } from "./ArrowNext";
 export { default as Cart } from "./Cart";
 export { default as Chevron } from "./Chevron";
 export { default as Close } from "./Close";

package/esm/Icons/index.js

@@ -1,3 +1,4 @@
+export { default as ArrowNext } from './ArrowNext.js';
 export { default as Cart } from './Cart.js';
 export { default as Chevron } from './Chevron.js';
 export { default as Close } from './Close.js';

package/esm/index.js

@@ -22,6 +22,7 @@ export { THEMES } from './Theme/index.js';
 export { default as Typography } from './Typography/index.js';
 export { default as useMediaSizes } from './hooks/useMediaSizes/index.js';
 import './Icons/index.js';
+export { default as ArrowNext } from './Icons/ArrowNext.js';
 export { default as Cart } from './Icons/Cart.js';
 export { default as Chevron } from './Icons/Chevron.js';
 export { default as Close } from './Icons/Close.js';

package/index.js

@@ -24,6 +24,7 @@ var index$k = require('./Theme/index.js');
 var index$l = require('./Typography/index.js');
 var index$m = require('./hooks/useMediaSizes/index.js');
 require('./Icons/index.js');
+var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
 var Chevron = require('./Icons/Chevron.js');
 var Close = require('./Icons/Close.js');
@@ -63,6 +64,7 @@ exports.Switch = index$j.default;
 exports.THEMES = index$k.THEMES;
 exports.Typography = index$l.default;
 exports.useMediaSizes = index$m.default;
+exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.59",
+  "version": "0.7.60",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},