colibri-ui 0.7.63 → 0.7.65

package/Checkbox/Checkbox.module.css

@@ -35,7 +35,7 @@
 }
 
 .checked {
-  background-color: var(--checkbox-primary-background-color-checked);
+  background-color: var(--checkbox-background-color-checked);
   border: 0;
 }
 .checked::after {
@@ -73,17 +73,17 @@
   border-color: var(--palette-bg-3);
 }
 .control_variant_primary:focus:not(:disabled) + .fake-checkbox {
-  box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);
+  box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
 }
 .control_variant_primary:hover:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-hovered);
+  background-color: var(--checkbox-background-color-hovered);
 }
 .control_variant_primary:active:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-active);
-  border-color: var(--checkbox-primary-border-color-active);
-  box-shadow: var(--checkbox-primary-box-shadow-active);
+  background-color: var(--checkbox-background-color-active);
+  border-color: var(--checkbox-border-color-active);
+  box-shadow: var(--checkbox-box-shadow-active);
 }
 .control_variant_primary:disabled + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-disabled);
+  background-color: var(--checkbox-background-color-disabled);
   z-index: 1;
 }

package/Icons/Exit.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/Exit.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 Exit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    props = tslib.__rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    ref: ref
+  }, props, {
+    fill: "none"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    fill: fill,
+    fillRule: "evenodd",
+    d: "M22.17 11.205a1.125 1.125 0 0 1 0 1.59l-3.75 3.75a1.126 1.126 0 1 1-1.59-1.59l1.83-1.83H7.125a1.125 1.125 0 1 1 0-2.25H18.66l-1.83-1.83a1.125 1.125 0 0 1 1.59-1.59zm-7.92-4.83a1.125 1.125 0 1 1-2.25 0V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25h3.75A2.25 2.25 0 0 0 12 18v-.375a1.125 1.125 0 1 1 2.25 0V18a4.5 4.5 0 0 1-4.5 4.5H6A4.5 4.5 0 0 1 1.5 18V6A4.5 4.5 0 0 1 6 1.5h3.75a4.5 4.5 0 0 1 4.5 4.5z",
+    clipRule: "evenodd"
+  }));
+});
+
+exports.default = Exit;

package/Icons/Plus.js

@@ -19,20 +19,17 @@ var PlusIcon = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     props = tslib.__rest(_a, ["fill", "width", "height"]);
   return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: fill,
     width: width,
     height: height,
     ref: ref
   }, props, {
-    viewBox: "0 0 24 24"
-  }), /*#__PURE__*/React__default.default.createElement("g", {
-    fill: fill,
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M4 13h16v-2H4z"
+    fill: "none"
   }), /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M11 4v16h2V4z"
-  })));
+    fill: fill,
+    fillRule: "evenodd",
+    d: "M12.5 1a1.26 1.26 0 0 1 1.26 1.26v7.98h7.98a1.26 1.26 0 1 1 0 2.52h-7.98v7.98a1.26 1.26 0 0 1-2.52 0v-7.98H3.26a1.26 1.26 0 0 1 0-2.52h7.98V2.26A1.26 1.26 0 0 1 12.5 1",
+    clipRule: "evenodd"
+  }));
 });
 
 exports.default = PlusIcon;

package/Icons/Setting.js

@@ -0,0 +1,42 @@
+'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 Setting = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    props = tslib.__rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({}, props, {
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: fill,
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"
+  }));
+});
+
+exports.default = Setting;

package/Icons/index.d.ts

@@ -2,6 +2,7 @@ export { default as ArrowNext } from "./ArrowNext";
 export { default as Cart } from "./Cart";
 export { default as Chevron } from "./Chevron";
 export { default as Close } from "./Close";
+export { default as Exit } from "./Exit";
 export { default as EyeOpen } from "./EyeOpen";
 export { default as EyeClosed } from "./EyeClosed";
 export { default as Help } from "./Help";
@@ -9,5 +10,6 @@ export { default as Info } from "./Info";
 export { default as Minus } from "./Minus";
 export { default as More } from "./More";
 export { default as Plus } from "./Plus";
+export { default as Setting } from "./Setting";
 export { default as Trash } from "./Trash";
 export { default as User } from "./User";

package/Icons/index.js

@@ -4,6 +4,7 @@ var ArrowNext = require('./ArrowNext.js');
 var Cart = require('./Cart.js');
 var Chevron = require('./Chevron.js');
 var Close = require('./Close.js');
+var Exit = require('./Exit.js');
 var EyeOpen = require('./EyeOpen.js');
 var EyeClosed = require('./EyeClosed.js');
 var Help = require('./Help.js');
@@ -11,6 +12,7 @@ var Info = require('./Info.js');
 var Minus = require('./Minus.js');
 var More = require('./More.js');
 var Plus = require('./Plus.js');
+var Setting = require('./Setting.js');
 var Trash = require('./Trash.js');
 var User = require('./User.js');
 
@@ -20,6 +22,7 @@ exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
+exports.Exit = Exit.default;
 exports.EyeOpen = EyeOpen.default;
 exports.EyeClosed = EyeClosed.default;
 exports.Help = Help.default;
@@ -27,5 +30,6 @@ exports.Info = Info.default;
 exports.Minus = Minus.default;
 exports.More = More.default;
 exports.Plus = Plus.default;
+exports.Setting = Setting.default;
 exports.Trash = Trash.default;
 exports.User = User.default;

package/InputRadio/InputRadio.module.css

@@ -51,26 +51,26 @@
   position: absolute;
 }
 .input:not(.input_disabled, .input_error):hover + .icon {
-  border-color: var(--inputradio-primary-background-color-hovered);
+  border-color: var(--input-radio-background-color-hovered);
 }
 .input:not(.input_disabled, .input_error):focus + .icon {
-  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error):active + .icon {
-  background-color: var(--inputradio-primary-background-color-focused);
-  border-color: var(--inputradio-primary-border-color-focused);
-  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+  background-color: var(--input-radio-background-color-focused);
+  border-color: var(--input-radio-border-color-focused);
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error) .input_checked:hover + .icon {
-  border-color: var(--inputradio-primary-background-color-hovered);
+  border-color: var(--input-radio-background-color-hovered);
 }
 .input:not(.input_disabled, .input_error) .input_checked:active + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--inputradio-primary-background-color-checked);
+  border: 4px solid var(--input-radio-background-color-checked);
 }
 .input_checked + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--inputradio-primary-background-color-checked);
+  border: 4px solid var(--input-radio-background-color-checked);
 }
 .input_disabled + .icon {
   border-radius: 50%;

package/Switch/Switch.module.css

@@ -18,8 +18,8 @@
   width: 40px;
 }
 .wrapper_variant_primary {
-  background-color: var(--switch-primary-background-color);
-  border-color: var(--switch-primary-border-color);
+  background-color: var(--switch-background-color);
+  border-color: var(--switch-border-color);
 }
 
 .base-switch {
@@ -48,8 +48,8 @@
   z-index: 1;
 }
 .checkbox:checked + .wrapper {
-  background-color: var(--switch-primary-background-color-checked);
-  border-color: var(--switch-primary-border-color-checked);
+  background-color: var(--switch-background-color-checked);
+  border-color: var(--switch-border-color-checked);
 }
 .checkbox:checked + .wrapper .base-switch {
   transform: translateX(18px);

package/Theme/index.d.ts

@@ -84,22 +84,25 @@ export declare const THEMES: {
         "input-primary-border-color-error": string;
         "input-primary-background-color-error": string;
         "input-primary-box-shadow-color-error": string;
-        "checkbox-primary-background-color-checked": string;
-        "checkbox-primary-background-color-hovered": string;
-        "checkbox-primary-box-shadow-focused": string;
-        "checkbox-primary-background-color-active": string;
-        "checkbox-primary-border-color-active": string;
-        "checkbox-primary-box-shadow-active": string;
-        "checkbox-primary-background-color-disabled": string;
-        "inputradio-primary-background-color-checked": string;
-        "inputradio-primary-background-color-hovered": string;
-        "inputradio-primary-box-shadow-focused": string;
-        "inputradio-primary-background-color-focused": string;
-        "inputradio-primary-border-color-focused": string;
-        "switch-primary-background-color": string;
-        "switch-primary-border-color": string;
-        "switch-primary-background-color-checked": string;
-        "switch-primary-border-color-checked": string;
+        "checkbox-background-color-checked": string;
+        "checkbox-background-color-hovered": string;
+        "checkbox-box-shadow-focused": string;
+        "checkbox-background-color-active": string;
+        "checkbox-border-color-active": string;
+        "checkbox-box-shadow-active": string;
+        "checkbox-background-color-disabled": string;
+        "input-radio-background-color-checked": string;
+        "input-radio-background-color-hovered": string;
+        "input-radio-box-shadow-focused": string;
+        "input-radio-background-color-focused": string;
+        "input-radio-border-color-focused": string;
+        "switch-background-color": string;
+        "switch-border-color": string;
+        "switch-background-color-checked": string;
+        "switch-border-color-checked": string;
+        "tooltip-background-color": string;
+        "tooltip-color": string;
+        "tooltip-border-radius": string;
     };
     BA: {
         "palette-black": string;
@@ -183,21 +186,24 @@ export declare const THEMES: {
         "input-primary-border-color-error": string;
         "input-primary-background-color-error": string;
         "input-primary-box-shadow-color-error": string;
-        "checkbox-primary-background-color-checked": string;
-        "checkbox-primary-background-color-hovered": string;
-        "checkbox-primary-box-shadow-focused": string;
-        "checkbox-primary-background-color-active": string;
-        "checkbox-primary-border-color-active": string;
-        "checkbox-primary-box-shadow-active": string;
-        "checkbox-primary-background-color-disabled": string;
-        "inputradio-primary-background-color-checked": string;
-        "inputradio-primary-background-color-hovered": string;
-        "inputradio-primary-box-shadow-focused": string;
-        "inputradio-primary-background-color-focused": string;
-        "inputradio-primary-border-color-focused": string;
-        "switch-primary-background-color": string;
-        "switch-primary-border-color": string;
-        "switch-primary-background-color-checked": string;
-        "switch-primary-border-color-checked": string;
+        "checkbox-background-color-checked": string;
+        "checkbox-background-color-hovered": string;
+        "checkbox-box-shadow-focused": string;
+        "checkbox-background-color-active": string;
+        "checkbox-border-color-active": string;
+        "checkbox-box-shadow-active": string;
+        "checkbox-background-color-disabled": string;
+        "input-radio-background-color-checked": string;
+        "input-radio-background-color-hovered": string;
+        "input-radio-box-shadow-focused": string;
+        "input-radio-background-color-focused": string;
+        "input-radio-border-color-focused": string;
+        "switch-background-color": string;
+        "switch-border-color": string;
+        "switch-background-color-checked": string;
+        "switch-border-color-checked": string;
+        "tooltip-background-color": string;
+        "tooltip-color": string;
+        "tooltip-border-radius": string;
     };
 };

package/Theme/themes/buenos_aires.d.ts

@@ -80,21 +80,24 @@ declare const _default: {
     "input-primary-border-color-error": string;
     "input-primary-background-color-error": string;
     "input-primary-box-shadow-color-error": string;
-    "checkbox-primary-background-color-checked": string;
-    "checkbox-primary-background-color-hovered": string;
-    "checkbox-primary-box-shadow-focused": string;
-    "checkbox-primary-background-color-active": string;
-    "checkbox-primary-border-color-active": string;
-    "checkbox-primary-box-shadow-active": string;
-    "checkbox-primary-background-color-disabled": string;
-    "inputradio-primary-background-color-checked": string;
-    "inputradio-primary-background-color-hovered": string;
-    "inputradio-primary-box-shadow-focused": string;
-    "inputradio-primary-background-color-focused": string;
-    "inputradio-primary-border-color-focused": string;
-    "switch-primary-background-color": string;
-    "switch-primary-border-color": string;
-    "switch-primary-background-color-checked": string;
-    "switch-primary-border-color-checked": string;
+    "checkbox-background-color-checked": string;
+    "checkbox-background-color-hovered": string;
+    "checkbox-box-shadow-focused": string;
+    "checkbox-background-color-active": string;
+    "checkbox-border-color-active": string;
+    "checkbox-box-shadow-active": string;
+    "checkbox-background-color-disabled": string;
+    "input-radio-background-color-checked": string;
+    "input-radio-background-color-hovered": string;
+    "input-radio-box-shadow-focused": string;
+    "input-radio-background-color-focused": string;
+    "input-radio-border-color-focused": string;
+    "switch-background-color": string;
+    "switch-border-color": string;
+    "switch-background-color-checked": string;
+    "switch-border-color-checked": string;
+    "tooltip-background-color": string;
+    "tooltip-color": string;
+    "tooltip-border-radius": string;
 };
 export default _default;

package/Theme/themes/buenos_aires.js

@@ -86,22 +86,25 @@ var THEME_BA = {
   "input-primary-border-color-error": index.default.ALERT,
   "input-primary-background-color-error": index.default.TRETIARY_DEFAULT_2,
   "input-primary-box-shadow-color-error": index.default.TRETIARY_DEFAULT_2,
-  "checkbox-primary-background-color-checked": index.default.PRIMARY_BA_4,
-  "checkbox-primary-background-color-hovered": index.default.PRIMARY_BA_4,
-  "checkbox-primary-box-shadow-focused": index.default.PRIMARY_BA_1,
-  "checkbox-primary-background-color-active": index.default.PRIMARY_BA_4,
-  "checkbox-primary-border-color-active": index.default.PRIMARY_BA_4,
-  "checkbox-primary-box-shadow-active": index.default.PRIMARY_BA_4,
-  "checkbox-primary-background-color-disabled": index.default.PRIMARY_BA_1,
-  "inputradio-primary-background-color-checked": index.default.PRIMARY_BA_4,
-  "inputradio-primary-background-color-hovered": index.default.PRIMARY_BA_4,
-  "inputradio-primary-box-shadow-focused": index.default.PRIMARY_BA_1,
-  "inputradio-primary-background-color-focused": index.default.PRIMARY_BA_1,
-  "inputradio-primary-border-color-focused": index.default.PRIMARY_BA_1,
-  "switch-primary-background-color": index.default.BG_2,
-  "switch-primary-border-color": index.default.BG_2,
-  "switch-primary-background-color-checked": index.default.PRIMARY_BA_5,
-  "switch-primary-border-color-checked": index.default.PRIMARY_BA_5
+  "checkbox-background-color-checked": index.default.PRIMARY_BA_4,
+  "checkbox-background-color-hovered": index.default.PRIMARY_BA_4,
+  "checkbox-box-shadow-focused": index.default.PRIMARY_BA_1,
+  "checkbox-background-color-active": index.default.PRIMARY_BA_4,
+  "checkbox-border-color-active": index.default.PRIMARY_BA_4,
+  "checkbox-box-shadow-active": index.default.PRIMARY_BA_4,
+  "checkbox-background-color-disabled": index.default.PRIMARY_BA_1,
+  "input-radio-background-color-checked": index.default.PRIMARY_BA_4,
+  "input-radio-background-color-hovered": index.default.PRIMARY_BA_4,
+  "input-radio-box-shadow-focused": index.default.PRIMARY_BA_1,
+  "input-radio-background-color-focused": index.default.PRIMARY_BA_1,
+  "input-radio-border-color-focused": index.default.PRIMARY_BA_1,
+  "switch-background-color": index.default.BG_2,
+  "switch-border-color": index.default.BG_2,
+  "switch-background-color-checked": index.default.PRIMARY_BA_5,
+  "switch-border-color-checked": index.default.PRIMARY_BA_5,
+  "tooltip-background-color": index.default.SECONDARY_BA_3,
+  "tooltip-color": index.default.WHITE,
+  "tooltip-border-radius": "4px"
 };
 
 exports.default = THEME_BA;

package/Theme/themes/default.d.ts

@@ -83,21 +83,24 @@ declare const _default: {
     "input-primary-border-color-error": string;
     "input-primary-background-color-error": string;
     "input-primary-box-shadow-color-error": string;
-    "checkbox-primary-background-color-checked": string;
-    "checkbox-primary-background-color-hovered": string;
-    "checkbox-primary-box-shadow-focused": string;
-    "checkbox-primary-background-color-active": string;
-    "checkbox-primary-border-color-active": string;
-    "checkbox-primary-box-shadow-active": string;
-    "checkbox-primary-background-color-disabled": string;
-    "inputradio-primary-background-color-checked": string;
-    "inputradio-primary-background-color-hovered": string;
-    "inputradio-primary-box-shadow-focused": string;
-    "inputradio-primary-background-color-focused": string;
-    "inputradio-primary-border-color-focused": string;
-    "switch-primary-background-color": string;
-    "switch-primary-border-color": string;
-    "switch-primary-background-color-checked": string;
-    "switch-primary-border-color-checked": string;
+    "checkbox-background-color-checked": string;
+    "checkbox-background-color-hovered": string;
+    "checkbox-box-shadow-focused": string;
+    "checkbox-background-color-active": string;
+    "checkbox-border-color-active": string;
+    "checkbox-box-shadow-active": string;
+    "checkbox-background-color-disabled": string;
+    "input-radio-background-color-checked": string;
+    "input-radio-background-color-hovered": string;
+    "input-radio-box-shadow-focused": string;
+    "input-radio-background-color-focused": string;
+    "input-radio-border-color-focused": string;
+    "switch-background-color": string;
+    "switch-border-color": string;
+    "switch-background-color-checked": string;
+    "switch-border-color-checked": string;
+    "tooltip-background-color": string;
+    "tooltip-color": string;
+    "tooltip-border-radius": string;
 };
 export default _default;

package/Theme/themes/default.js

@@ -89,22 +89,25 @@ var THEME_DEFAULT = {
   "input-primary-border-color-error": index.default.ALERT,
   "input-primary-background-color-error": index.default.TRETIARY_DEFAULT_2,
   "input-primary-box-shadow-color-error": index.default.TRETIARY_DEFAULT_2,
-  "checkbox-primary-background-color-checked": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
-  "checkbox-primary-background-color-active": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-border-color-active": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-active": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-checked": index.default.PRIMARY_DEFAULT_4,
-  "inputradio-primary-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
-  "inputradio-primary-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-focused": index.default.PRIMARY_DEFAULT_1,
-  "inputradio-primary-border-color-focused": index.default.PRIMARY_DEFAULT_1,
-  "switch-primary-background-color": index.default.BG_2,
-  "switch-primary-border-color": index.default.BG_2,
-  "switch-primary-background-color-checked": index.default.PRIMARY_DEFAULT_5,
-  "switch-primary-border-color-checked": index.default.PRIMARY_DEFAULT_5
+  "checkbox-background-color-checked": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
+  "checkbox-background-color-active": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-border-color-active": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-active": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-checked": index.default.PRIMARY_DEFAULT_4,
+  "input-radio-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
+  "input-radio-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-focused": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-border-color-focused": index.default.PRIMARY_DEFAULT_1,
+  "switch-background-color": index.default.BG_2,
+  "switch-border-color": index.default.BG_2,
+  "switch-background-color-checked": index.default.PRIMARY_DEFAULT_5,
+  "switch-border-color-checked": index.default.PRIMARY_DEFAULT_5,
+  "tooltip-background-color": index.default.BLACK,
+  "tooltip-color": index.default.WHITE,
+  "tooltip-border-radius": "4px"
 };
 
 exports.default = THEME_DEFAULT;

package/TimeSelect/Label/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var OptionLabel = function OptionLabel(_a) {
+  var time = _a.time,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter;
+  var ref = React.useRef(null);
+  return /*#__PURE__*/React__default.default.createElement("span", {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: ref
+  }, time);
+};
+
+exports.default = OptionLabel;

package/TimeSelect/helpers.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var dateFns = require('date-fns');
+
+var day = new Date();
+day.setHours(24, 0, 0, 0);
+var DEFAULT_TIME = {
+  index: 24,
+  time: "12:00"
+};
+var formatTime = function formatTime(date) {
+  return dateFns.format(date, "HH:mm");
+};
+var generateSuggest = function generateSuggest(interval) {
+  if (interval === void 0) {
+    interval = 15;
+  }
+  return new Array(24 * 60 / interval).fill(null).map(function (_, index) {
+    var date = dateFns.addMinutes(day, index * interval);
+    return {
+      time: formatTime(date)
+    };
+  });
+};
+
+exports.DEFAULT_TIME = DEFAULT_TIME;
+exports.formatTime = formatTime;
+exports.generateSuggest = generateSuggest;

package/TimeSelect/index.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var index$1 = require('../Select/index.js');
+var helpers = require('./helpers.js');
+var index = require('./Label/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var TimeSelect = function TimeSelect(_a) {
+  var value = _a.value,
+    _b = _a.label,
+    label = _b === void 0 ? "Start time" : _b,
+    _c = _a.interval,
+    interval = _c === void 0 ? 15 : _c,
+    onChange = _a.onChange,
+    props = tslib.__rest(_a, ["value", "label", "interval", "onChange"]);
+  var options = React.useMemo(function () {
+    return helpers.generateSuggest(interval).map(function (item) {
+      return {
+        value: item.time,
+        label: /*#__PURE__*/React__default.default.createElement(index.default, {
+          time: item.time
+        })
+      };
+    });
+  }, [interval]);
+  return /*#__PURE__*/React__default.default.createElement(index$1.default, tslib.__assign({}, props, {
+    value: value,
+    label: label,
+    options: options,
+    onChange: onChange
+  }));
+};
+
+exports.default = TimeSelect;