colibri-ui 0.7.40 → 0.7.42

package/Image/index.js

@@ -6,12 +6,13 @@ var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames');
 var generateUniqID = require('../helpers/generateUniqID.js');
-var Image_module = require('./Image.module.scss.js');
+var styles = require('./Image.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
 var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -48,7 +49,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, []);
   return /*#__PURE__*/React__default.default.createElement("picture", {
     ref: ref,
-    className: classNames__default.default(Image_module.default.root)
+    className: classNames__default.default(styles__default.default.root)
   }, !!sources.length && sources.map(function (source, index) {
     return /*#__PURE__*/React__default.default.createElement("source", tslib.__assign({
       key: generateUniqID.default(index)

package/Menu/Menu.module.css

@@ -0,0 +1,8 @@
+.menu {
+  margin: 0;
+  text-align: left;
+  padding: 0;
+  user-select: none;
+  color: var(--palette-black);
+  background: var(--palette-white);
+}

package/Menu/components/MenuItem/MenuItem.module.css

@@ -0,0 +1,36 @@
+.item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 8px 6px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+.item > * {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.variant_primary {
+  background-color: var(--palette-white);
+}
+.variant_primary:hover {
+  background-color: var(--palette-primary-2);
+}
+.variant_primary:active {
+  background-color: var(--palette-primary-2);
+}
+.variant_primary:focus, .variant_primary:focus-within {
+  background-color: var(--palette-primary-2);
+}
+
+.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--palette-bg-2);
+  background-color: var(--palette-white);
+}

package/Menu/components/MenuItem/index.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames/bind');
-var MenuItem_module = require('./MenuItem.module.scss.js');
+var styles = require('./MenuItem.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(MenuItem_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var MenuItem = function MenuItem(_a) {
   var _b;
   var className = _a.className,

package/Menu/index.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classNames = require('classnames');
 var index = require('./components/MenuItem/index.js');
-var Menu_module = require('./Menu.module.scss.js');
+var styles = require('./Menu.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Menu = function Menu(_a) {
   var selected = _a.selected,
@@ -36,7 +37,7 @@ var Menu = function Menu(_a) {
     });
   }, [children, selected, onClick]);
   return /*#__PURE__*/React__default.default.createElement("ul", {
-    className: classNames__default.default(Menu_module.default.menu, className)
+    className: classNames__default.default(styles__default.default.menu, className)
   }, renderChild);
 };
 Menu.Item = index.default;

package/Modal/Modal.module.css

@@ -0,0 +1,51 @@
+.root {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.titleWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--palette-bg-2);
+}
+
+.closeWrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.modalWrapper {
+  overflow: hidden;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--palette-white);
+}
+.modalWrapper_mobile {
+  height: 100%;
+  width: 100%;
+}
+.modalWrapper_desktop {
+  max-height: calc(100vh - 100px);
+  max-width: calc(100vw - 100px);
+  min-width: 515px;
+  border: solid 1px var(--palette-bg-2);
+  border-radius: 8px;
+}

package/Modal/components/Close/Close.module.css

@@ -0,0 +1,4 @@
+.close {
+  cursor: pointer;
+  margin-right: 16px;
+}

package/Modal/components/Close/index.js

@@ -5,18 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classNames = require('classnames');
 require('../../../Icons/index.js');
-var Close_module = require('./Close.module.scss.js');
+var styles = require('./Close.module.css');
 var Close$1 = require('../../../Icons/Close.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Close = function Close(_a) {
   var onClick = _a.onClick;
   return /*#__PURE__*/React__default.default.createElement(Close$1.default, {
-    className: classNames__default.default(Close_module.default.close),
+    className: classNames__default.default(styles__default.default.close),
     onClick: onClick
   });
 };

package/Modal/components/Content/Content.module.css

@@ -0,0 +1,6 @@
+.root {
+  overflow-y: auto;
+  display: flex;
+  min-height: 100%;
+  padding: 10px;
+}

package/Modal/components/Content/index.js

@@ -4,17 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var classNames = require('classnames');
 var React = require('react');
-var Content_module = require('./Content.module.scss.js');
+var styles = require('./Content.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Content = function Content(_a) {
   var children = _a.children;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(Content_module.default.root)
+    className: classNames__default.default(styles__default.default.root)
   }, children);
 };
 

package/Modal/components/Title/Title.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  display: flex;
+  padding: 16px;
+}

package/Modal/components/Title/index.js

@@ -5,21 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classNames = require('classnames/bind');
 var index = require('../../../Typography/index.js');
-var Title_module = require('./Title.module.scss.js');
+var styles = require('./Title.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(Title_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Title = function Title(_a) {
   var children = _a.children;
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     tag: "h3",
     size: "h3"
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Title_module.default.wrapper)
+    className: clx(styles__default.default.wrapper)
   }, children));
 };
 

package/Modal/index.js

@@ -11,14 +11,15 @@ var index = require('../hooks/useMediaSizes/index.js');
 var index$6 = require('./components/Content/index.js');
 var index$5 = require('./components/Close/index.js');
 var index$4 = require('./components/Title/index.js');
-var Modal_module = require('./Modal.module.scss.js');
+var styles = require('./Modal.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(Modal_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Modal = function Modal(_a) {
   var children = _a.children,
     className = _a.className,
@@ -46,22 +47,22 @@ var Modal = function Modal(_a) {
     };
   }, [onCloseHandler]);
   return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Modal_module.default.root)
+    className: clx(styles__default.default.root)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Modal_module.default.modalOverlay),
+    className: clx(styles__default.default.modalOverlay),
     onClick: onCloseHandler
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Modal_module.default.modalWrapper, {
+    className: clx(styles__default.default.modalWrapper, {
       modalWrapper_desktop: isDesktop ? 1 : 0,
       modalWrapper_mobile: !isDesktop ? 1 : 0
     }, className),
     ref: modalRef
   }, title ? ( /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Modal_module.default.titleWrapper)
+    className: clx(styles__default.default.titleWrapper)
   }, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: onCloseHandler
   }))) : ( /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Modal_module.default.closeWrapper)
+    className: clx(styles__default.default.closeWrapper)
   }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: onCloseHandler
   }))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));

package/Select/Select.module.css

@@ -0,0 +1,39 @@
+.menuWrapper {
+  max-height: 140px;
+  overflow-y: auto;
+}
+
+.icon_isOpen {
+  transform: rotate(180deg);
+}
+
+.inputRoot {
+  cursor: pointer;
+}
+
+.formField_fullWidth {
+  width: 100%;
+}
+
+.baseInput {
+  margin: 7px 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.baseInput ::placeholder {
+  color: var(--palette-bg-2);
+}
+
+.placeholder {
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
+  color: var(--input-primary-plaseholder-color);
+}

package/Select/index.js

@@ -8,15 +8,16 @@ var index$3 = require('../base/InputRoot/index.js');
 var index = require('../base/FormField/index.js');
 var index$1 = require('../Dropdown/index.js');
 var index$2 = require('../Menu/index.js');
-var Select_module = require('./Select.module.scss.js');
+var styles = require('./Select.module.css');
 var classNames = require('classnames/bind');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
-var clx = classNames__default.default.bind(Select_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Select = function Select(_a) {
   var _b = _a.options,
     options = _b === void 0 ? [] : _b,
@@ -58,7 +59,7 @@ var Select = function Select(_a) {
     onChange(lvalue);
   }, [onChange]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
-    className: clx(Select_module.default.formField, {
+    className: clx(styles__default.default.formField, {
       formField_fullWidth: fullWidth ? 1 : 0
     }),
     label: label,
@@ -71,7 +72,7 @@ var Select = function Select(_a) {
     zIndex: zIndex,
     disabled: !!disabled,
     overlay: /*#__PURE__*/React__default.default.createElement("div", {
-      className: clx(Select_module.default.menuWrapper),
+      className: clx(styles__default.default.menuWrapper),
       style: {
         maxHeight: "".concat(listHeight, "px")
       }
@@ -87,17 +88,17 @@ var Select = function Select(_a) {
     samewidth: true
   }, /*#__PURE__*/React__default.default.createElement(index$3.default, {
     error: error,
-    className: clx(Select_module.default.inputRoot),
+    className: clx(styles__default.default.inputRoot),
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
-      className: clx(Select_module.default.icon, {
+      className: clx(styles__default.default.icon, {
         icon_isOpen: isOpen ? 1 : 0
       })
     }),
     disabled: !!disabled
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Select_module.default.baseInput)
+    className: clx(styles__default.default.baseInput)
   }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : ( /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(Select_module.default.placeholder)
+    className: clx(styles__default.default.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
     type: "hidden",
     tabIndex: -1,

package/Separator/Separator.module.css

@@ -0,0 +1,5 @@
+.root {
+  background-color: var(--palette-bg-3);
+  block-size: 1px;
+  inline-size: 100%;
+}

package/Separator/index.js

@@ -4,17 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames');
-var Separator_module = require('./Separator.module.scss.js');
+var styles = require('./Separator.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Separator = function Separator(_a) {
   var className = _a.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(Separator_module.default.root, className)
+    className: classNames__default.default(styles__default.default.root, className)
   });
 };
 

package/Skeleton/Skeleton.module.css

@@ -0,0 +1,33 @@
+.rect {
+  background-color: var(--palette-bg-2);
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+}
+@keyframes skeleton-loading {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.text {
+  height: 12px;
+  border-radius: 6px;
+  background-color: var(--palette-bg-2);
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+}
+@keyframes skeleton-loading {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/Skeleton/index.js

@@ -2,12 +2,13 @@
 
 var React = require('react');
 var classNames = require('classnames');
-var Skeleton_module = require('./Skeleton.module.scss.js');
+var styles = require('./Skeleton.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var SkeletonRect = function SkeletonRect(_a) {
   var className = _a.className,
@@ -15,7 +16,7 @@ var SkeletonRect = function SkeletonRect(_a) {
     height = _a.height,
     borderRadius = _a.borderRadius;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(Skeleton_module.default.rect, className),
+    className: classNames__default.default(styles__default.default.rect, className),
     style: {
       width: width,
       height: height,
@@ -28,7 +29,7 @@ var SkeletonText = function SkeletonText(_a) {
     width = _a.width,
     size = _a.size;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(Skeleton_module.default.text, className),
+    className: classNames__default.default(styles__default.default.text, className),
     style: {
       width: width,
       height: size

package/Switch/Switch.module.css

@@ -0,0 +1,56 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  padding: 6px;
+}
+.root_disabled {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.wrapper {
+  width: 40px;
+  height: 22px;
+  position: relative;
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 17px;
+}
+.wrapper_variant_primary {
+  border-color: var(--switch-primary-border-color);
+  background-color: var(--switch-primary-background-color);
+}
+
+.baseSwitch {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 150ms;
+  background: var(--palette-white);
+}
+
+.checkbox {
+  position: absolute;
+  z-index: 1;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  padding: 0;
+}
+.checkbox:checked + .wrapper {
+  border-color: var(--switch-primary-border-color-checked);
+  background-color: var(--switch-primary-background-color-checked);
+}
+.checkbox:checked + .wrapper .baseSwitch {
+  transform: translateX(18px);
+}

package/Switch/index.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames/bind');
-var Switch_module = require('./Switch.module.scss.js');
+var styles = require('./Switch.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(Switch_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b;
   var disabled = _a.disabled,
@@ -21,17 +22,17 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     variant = _c === void 0 ? "primary" : _c,
     props = tslib.__rest(_a, ["disabled", "className", "variant"]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Switch_module.default.root, {
+    className: clx(styles__default.default.root, {
       root_disabled: disabled ? 1 : 0
     }, className)
   }, /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
-    className: clx(Switch_module.default.checkbox),
+    className: clx(styles__default.default.checkbox),
     ref: ref,
     type: "checkbox"
   }, props)), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Switch_module.default.wrapper, (_b = {}, _b["wrapper_variant_".concat(variant)] = variant ? 1 : 0, _b))
+    className: clx(styles__default.default.wrapper, (_b = {}, _b["wrapper_variant_".concat(variant)] = variant ? 1 : 0, _b))
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Switch_module.default.baseSwitch)
+    className: clx(styles__default.default.baseSwitch)
   })));
 });
 

package/Theme/global.css

@@ -0,0 +1,36 @@
+[data-page=lisa-accessories] html {
+  margin: 0;
+  padding: 0;
+}
+[data-page=lisa-accessories] input,
+[data-page=lisa-accessories] label,
+[data-page=lisa-accessories] textarea,
+[data-page=lisa-accessories] select,
+[data-page=lisa-accessories] button {
+  background: none;
+}
+[data-page=lisa-accessories] * {
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  text-decoration: none;
+  margin: 0;
+  padding: 0;
+}
+[data-page=lisa-accessories] input,
+[data-page=lisa-accessories] textarea,
+[data-page=lisa-accessories] select,
+[data-page=lisa-accessories] button,
+[data-page=lisa-accessories] body {
+  margin: 0;
+  padding: 0;
+}
+[data-page=lisa-accessories] h1,
+[data-page=lisa-accessories] h2,
+[data-page=lisa-accessories] h3,
+[data-page=lisa-accessories] h4,
+[data-page=lisa-accessories] h5,
+[data-page=lisa-accessories] h6 {
+  margin: 0;
+  color: inherit;
+}