colibri-ui 0.7.39 → 0.7.41

package/esm/Grid/Grid.module.css

@@ -0,0 +1,8 @@
+.root {
+  width: 100%;
+}
+
+.items {
+  display: grid;
+  grid-auto-flow: row dense;
+}

package/esm/Grid/Item/Grid-Item.module.css

@@ -0,0 +1,3 @@
+.full {
+  grid-column: 1/-1;
+}

package/esm/Grid/Item/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import styles from './Grid-Item.module.scss.js';
+import styles from './Grid-Item.module.css';
 
 var GridItem = function GridItem(_a) {
   var _b;

package/esm/Grid/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import styles from './Grid.module.scss.js';
+import styles from './Grid.module.css';
 
 var Grid = function Grid(_a) {
   var children = _a.children,

package/esm/Image/Image.module.css

@@ -0,0 +1,19 @@
+.root {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.root img {
+  width: 100%;
+  height: 100%;
+  visibility: visible;
+  font: 0/0 a;
+  border: 0;
+  object-fit: cover;
+  text-indent: -100rem;
+}
+.root img :-moz-broken {
+  opacity: 0;
+}

package/esm/Image/index.js

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useState, useCallback } from 'react';
 import classNames from 'classnames';
 import generateUniqID from '../helpers/generateUniqID.js';
-import styles from './Image.module.scss.js';
+import styles from './Image.module.css';
 
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
 var Image = /*#__PURE__*/forwardRef(function (_a, ref) {

package/esm/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/esm/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/esm/Menu/components/MenuItem/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames/bind';
-import styles from './MenuItem.module.scss.js';
+import styles from './MenuItem.module.css';
 
 var clx = classNames.bind(styles);
 var MenuItem = function MenuItem(_a) {

package/esm/Menu/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
 import classNames from 'classnames';
 import MenuItem from './components/MenuItem/index.js';
-import styles from './Menu.module.scss.js';
+import styles from './Menu.module.css';
 
 var Menu = function Menu(_a) {
   var selected = _a.selected,

package/esm/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/esm/Modal/components/Close/Close.module.css

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

package/esm/Modal/components/Close/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import '../../../Icons/index.js';
-import styles from './Close.module.scss.js';
+import styles from './Close.module.css';
 import CloseIcon from '../../../Icons/Close.js';
 
 var Close = function Close(_a) {

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

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

package/esm/Modal/components/Content/index.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import styles from './Content.module.scss.js';
+import styles from './Content.module.css';
 
 var Content = function Content(_a) {
   var children = _a.children;

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

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

package/esm/Modal/components/Title/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames/bind';
 import Typography from '../../../Typography/index.js';
-import styles from './Title.module.scss.js';
+import styles from './Title.module.css';
 
 var clx = classNames.bind(styles);
 var Title = function Title(_a) {

package/esm/Modal/index.js

@@ -7,7 +7,7 @@ import useMediaSizes from '../hooks/useMediaSizes/index.js';
 import Content from './components/Content/index.js';
 import Close from './components/Close/index.js';
 import Title from './components/Title/index.js';
-import styles from './Modal.module.scss.js';
+import styles from './Modal.module.css';
 
 var clx = classNames.bind(styles);
 var Modal = function Modal(_a) {

package/esm/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/esm/Select/index.js

@@ -4,7 +4,7 @@ import InputRoot from '../base/InputRoot/index.js';
 import FormField from '../base/FormField/index.js';
 import Dropdown from '../Dropdown/index.js';
 import Menu from '../Menu/index.js';
-import styles from './Select.module.scss.js';
+import styles from './Select.module.css';
 import classNames from 'classnames/bind';
 
 var clx = classNames.bind(styles);

package/esm/Separator/Separator.module.css

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

package/esm/Separator/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import styles from './Separator.module.scss.js';
+import styles from './Separator.module.css';
 
 var Separator = function Separator(_a) {
   var className = _a.className;

package/esm/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/esm/Skeleton/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import styles from './Skeleton.module.scss.js';
+import styles from './Skeleton.module.css';
 
 var SkeletonRect = function SkeletonRect(_a) {
   var className = _a.className,

package/esm/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/esm/Switch/index.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames/bind';
-import styles from './Switch.module.scss.js';
+import styles from './Switch.module.css';
 
 var clx = classNames.bind(styles);
 var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {

package/esm/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;
+}

package/esm/Typography/Typography.module.css

@@ -0,0 +1,64 @@
+.root {
+  color: var(--palette-black);
+}
+
+.size_xs {
+  font-size: 12px;
+  line-height: 16px;
+}
+.size_s {
+  font-size: 14px;
+  line-height: 18px;
+}
+.size_m {
+  font-size: 16px;
+  line-height: 22px;
+}
+.size_l {
+  font-size: 18px;
+  line-height: 28px;
+}
+.size_h1 {
+  font-size: 40px;
+  line-height: 56px;
+}
+.size_h2 {
+  font-size: 32px;
+  line-height: 40px;
+}
+.size_h3 {
+  font-size: 24px;
+  line-height: 32px;
+}
+.size_h4 {
+  font-size: 20px;
+  line-height: 28px;
+}
+.size_h5 {
+  font-size: 16px;
+  line-height: 24px;
+}
+.size_h6 {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.fontWeight_normal {
+  font-weight: 400;
+}
+.fontWeight_medium {
+  font-weight: 500;
+}
+.fontWeight_bold {
+  font-weight: 700;
+}
+
+.variant_alert {
+  color: var(--typography-alert);
+}
+.variant_success {
+  color: var(--typography-success);
+}
+.variant_secondary {
+  color: var(--typography-secondary);
+}

package/esm/Typography/index.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classNames from 'classnames/bind';
-import styles from './Typography.module.scss.js';
+import styles from './Typography.module.css';
 
 var clx = classNames.bind(styles);
 var Typography = function Typography(_a) {

package/esm/base/BaseInput/BaseInput.module.css

@@ -0,0 +1,12 @@
+.baseInput {
+  margin: 7px 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.baseInput ::placeholder {
+  color: var(--palette-bg-2);
+}

package/esm/base/BaseInput/index.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import styles from './BaseInput.module.scss.js';
+import styles from './BaseInput.module.css';
 
 var BaseInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,

package/esm/base/FormField/FormField.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

package/esm/base/FormField/index.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import Typography from '../../Typography/index.js';
-import styles from './FormField.module.scss.js';
+import styles from './FormField.module.css';
 
 var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,

package/esm/base/InputRoot/InputRoot.module.css

@@ -0,0 +1,74 @@
+.baseIcon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 16px;
+  color: inherit;
+}
+
+.baseDisableWrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  cursor: not-allowed;
+}
+
+.root {
+  background-color: var(--palette-white);
+  color: var(--palette-black);
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  padding: 5px 10px;
+}
+
+.variant_primary {
+  border-color: var(--input-primary-border-color);
+}
+.variant_primary:hover {
+  border-color: var(--palette-primary-3);
+  box-shadow: 0px 0px 0px 2px var(--palette-primary-2);
+}
+.variant_primary:active {
+  border-color: var(--palette-primary-4);
+}
+.variant_primary:focus, .variant_primary:focus-within {
+  border-color: var(--palette-primary-4);
+}
+.variant_primary_disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--palette-bg-3);
+  background-color: var(--palette-bg-1);
+  border-color: var(--palette-bg-3);
+}
+.variant_primary_error {
+  background-color: var(--palette-tretiary-2);
+  border-color: var(--palette-alert);
+}
+.variant_primary_error:hover {
+  background-color: var(--palette-white);
+  border-color: var(--palette-alert);
+  box-shadow: 0px 0px 0px 2px var(--palette-tretiary-2);
+}
+.variant_primary_error:focus, .variant_primary_error:focus-within {
+  border-color: var(--palette-alert);
+  background-color: var(--palette-white);
+}
+
+.size_s {
+  height: 32px;
+}
+.size_m {
+  height: 36px;
+}
+.size_l {
+  height: 42px;
+}

package/esm/base/InputRoot/index.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames/bind';
-import styles from './InputRoot.module.scss.js';
+import styles from './InputRoot.module.css';
 
 var clx = classNames.bind(styles);
 var InputRoot = /*#__PURE__*/forwardRef(function (_a, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.39",
+  "version": "0.7.41",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -24,6 +24,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "classnames": "^2.5.1",
+    "cssmem": "^1.3.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-popper": "^2.3.0"