colibri-ui 0.7.35 → 0.7.37

package/Modal/components/Content/index.js

@@ -2,14 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var styles = require('./styles.js');
+var classNames = require('classnames');
+var React = require('react');
+var Content_module = require('./Content.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 var Content = function Content(_a) {
   var children = _a.children;
-  return jsxRuntime.jsx(styles.Wrapper, {
-    children: children
-  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(Content_module.default.root)
+  }, children);
 };
 
 exports.default = Content;

package/Modal/components/Title/Title.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".wrapper {\n  display: flex;\n  padding: 16px;\n}";
+
+exports.default = styles;

package/Modal/components/Title/index.d.ts

@@ -1,7 +1,5 @@
-import type { CSSObject } from "@emotion/react";
 import type { FC, ReactNode } from "react";
 declare const Title: FC<{
     children: ReactNode;
-    justifyContent?: CSSObject["justifyContent"];
 }>;
 export default Title;

package/Modal/components/Title/index.js

@@ -2,22 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var classNames = require('classnames/bind');
 var index = require('../../../Typography/index.js');
-var styles = require('./styles.js');
+var Title_module = require('./Title.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Title_module.default);
 var Title = function Title(_a) {
-  var children = _a.children,
-    _b = _a.justifyContent,
-    justifyContent = _b === void 0 ? "flex-start" : _b;
-  return jsxRuntime.jsx(index.default, {
+  var children = _a.children;
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
     tag: "h3",
-    size: "h3",
-    children: jsxRuntime.jsx(styles.Wrapper, {
-      justifyContent: justifyContent,
-      children: children
-    })
-  });
+    size: "h3"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Title_module.default.wrapper)
+  }, children));
 };
 
 exports.default = Title;

package/Modal/index.js

@@ -2,29 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
-var index = require('../hooks/useScrollLock/index.js');
-var index$1 = require('../hooks/useTrapFocus/index.js');
-var index$2 = require('../Portal/index.js');
-var index$5 = require('./components/Content/index.js');
-var index$4 = require('./components/Close/index.js');
-var index$3 = require('./components/Title/index.js');
-var styles = require('./styles.js');
+var classNames = require('classnames/bind');
+var index$1 = require('../hooks/useScrollLock/index.js');
+var index$2 = require('../hooks/useTrapFocus/index.js');
+var index$3 = require('../Portal/index.js');
+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');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Modal_module.default);
 var Modal = function Modal(_a) {
   var children = _a.children,
     className = _a.className,
     onClose = _a.onClose,
     title = _a.title;
   var modalRef = React.useRef(null);
+  var isDesktop = index.default(function (bp) {
+    return bp.up("lg");
+  });
   var onCloseHandler = React.useMemo(function () {
     return onClose || function () {
       return {};
     };
   }, [onClose]);
-  index.default();
-  index$1.default(modalRef);
+  index$1.default();
+  index$2.default(modalRef);
   React.useEffect(function () {
     var onEsc = function onEsc(e) {
       if (!modalRef.current || e.code !== "Escape") return;
@@ -35,29 +45,26 @@ var Modal = function Modal(_a) {
       document.removeEventListener("keydown", onEsc);
     };
   }, [onCloseHandler]);
-  return jsxRuntime.jsx(index$2.default, {
-    children: jsxRuntime.jsxs(styles.Root, {
-      children: [jsxRuntime.jsx(styles.ModalOverlay, {
-        onClick: onCloseHandler
-      }), jsxRuntime.jsxs(styles.ModalWrapper, {
-        className: className,
-        ref: modalRef,
-        children: [title ? jsxRuntime.jsxs(styles.TitleWrapper, {
-          children: [jsxRuntime.jsx(index$3.default, {
-            children: title
-          }), jsxRuntime.jsx(index$4.default, {
-            onClick: onCloseHandler
-          })]
-        }) : jsxRuntime.jsx(styles.CloseWrapper, {
-          children: jsxRuntime.jsx(index$4.default, {
-            onClick: onCloseHandler
-          })
-        }), jsxRuntime.jsx(index$5.default, {
-          children: children
-        })]
-      })]
-    })
-  });
+  return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Modal_module.default.root)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Modal_module.default.modalOverlay),
+    onClick: onCloseHandler
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Modal_module.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)
+  }, /*#__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)
+  }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
+    onClick: onCloseHandler
+  }))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));
 };
 
 exports.default = Modal;

package/Select/Select.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".menuWrapper {\n  max-height: 140px;\n  overflow-y: auto;\n}\n\n.icon_isOpen {\n  transform: rotate(180deg);\n}\n\n.inputRoot {\n  cursor: pointer;\n}\n\n.formField_fullWidth {\n  width: 100%;\n}\n\n.baseInput {\n  margin: 7px 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.baseInput ::placeholder {\n  color: var(--palette-bg-2);\n}\n\n.placeholder {\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  display: block;\n  color: var(--input-primary-plaseholder-color);\n}";
+
+exports.default = styles;

package/Select/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { SelectProps } from "./index.props";
-declare const Select: <T extends string | number>({ options, value, zIndex, label, hint, error, placeholder, disabled, listHeight, fullWidth, onChange, }: SelectProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Select: <T extends string | number>({ options, value, zIndex, label, hint, error, placeholder, disabled, listHeight, fullWidth, onChange, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/Select/index.js

@@ -2,13 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
-var styles$1 = require('../base/InputRoot/styles.js');
-var index = require('../Dropdown/index.js');
-var index$1 = require('../Menu/index.js');
-var styles = require('./styles.js');
+var Chevron = require('../Icons/Chevron.js');
+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 classNames = require('classnames/bind');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Select_module.default);
 var Select = function Select(_a) {
   var _b = _a.options,
     options = _b === void 0 ? [] : _b,
@@ -49,50 +57,52 @@ var Select = function Select(_a) {
     var lvalue = _a.value;
     onChange(lvalue);
   }, [onChange]);
-  return jsxRuntime.jsx(styles.StyledFormField, {
-    fullWidth: fullWidth,
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    className: clx(Select_module.default.formField, {
+      formField_fullWidth: fullWidth ? 1 : 0
+    }),
     label: label,
     hint: hint,
+    error: error
+  }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    placement: "bottom-start",
+    onVisibleChange: setIsOpen,
+    trigger: ["click"],
+    zIndex: zIndex,
+    disabled: !!disabled,
+    overlay: /*#__PURE__*/React__default.default.createElement("div", {
+      className: clx(Select_module.default.menuWrapper),
+      style: {
+        maxHeight: "".concat(listHeight, "px")
+      }
+    }, /*#__PURE__*/React__default.default.createElement(index$2.default, null, preparedOptions.map(function (option, i) {
+      return /*#__PURE__*/React__default.default.createElement(index$2.default.Item, {
+        key: "".concat(option.label, "-").concat(i),
+        onClick: function onClick() {
+          return handleSelect(option);
+        },
+        isSelected: option.selected
+      }, option.label);
+    }))),
+    samewidth: true
+  }, /*#__PURE__*/React__default.default.createElement(index$3.default, {
     error: error,
-    children: jsxRuntime.jsx(index.default, {
-      placement: "bottom-start",
-      onVisibleChange: setIsOpen,
-      trigger: ["click"],
-      zIndex: zIndex,
-      disabled: !!disabled,
-      overlay: jsxRuntime.jsx(styles.MenuWrapper, {
-        listHeight: listHeight,
-        children: jsxRuntime.jsx(index$1.default, {
-          children: preparedOptions.map(function (option, i) {
-            return jsxRuntime.jsx(index$1.default.Item, {
-              onClick: function onClick() {
-                return handleSelect(option);
-              },
-              isSelected: option.selected,
-              children: option.label
-            }, "".concat(option.label, "-").concat(i));
-          })
-        })
-      }),
-      samewidth: true,
-      children: jsxRuntime.jsxs(styles.StyledBaseInputRoot, {
-        error: error,
-        endIcon: jsxRuntime.jsx(styles.SelectIcon, {
-          isOpen: isOpen
-        }),
-        disabled: !!disabled,
-        children: [jsxRuntime.jsx(styles$1.BaseInput, {
-          children: prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : jsxRuntime.jsx(styles$1.BasePlaceholder, {
-            children: placeholder
-          })
-        }), jsxRuntime.jsx("input", {
-          type: "hidden",
-          tabIndex: -1,
-          value: value
-        })]
+    className: clx(Select_module.default.inputRoot),
+    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+      className: clx(Select_module.default.icon, {
+        icon_isOpen: isOpen ? 1 : 0
       })
-    })
-  });
+    }),
+    disabled: !!disabled
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Select_module.default.baseInput)
+  }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : ( /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(Select_module.default.placeholder)
+  }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
+    type: "hidden",
+    tabIndex: -1,
+    value: value
+  }))));
 };
 
 exports.default = Select;

package/Separator/Separator.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".root {\n  background-color: var(--palette-bg-3);\n  block-size: 1px;\n  inline-size: 100%;\n}";
+
+exports.default = styles;

package/Separator/index.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-type SeparatorProps = {
+import type { FC } from "react";
+type Props = {
     className?: string;
 };
-declare const Separator: FC<SeparatorProps>;
+declare const Separator: FC<Props>;
 export default Separator;

package/Separator/index.js

@@ -2,13 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var styles = require('./styles.js');
+var React = require('react');
+var classNames = require('classnames');
+var Separator_module = require('./Separator.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 var Separator = function Separator(_a) {
   var className = _a.className;
-  return jsxRuntime.jsx(styles.Root, {
-    className: className
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(Separator_module.default.root, className)
   });
 };
 

package/Skeleton/Skeleton.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".rect {\n  background-color: var(--palette-bg-2);\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n}\n@keyframes skeleton-loading {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.text {\n  height: 12px;\n  border-radius: 6px;\n  background-color: var(--palette-bg-2);\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n}\n@keyframes skeleton-loading {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}";
+
+exports.default = styles;

package/Skeleton/index.js

@@ -1,15 +1,21 @@
 'use strict';
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var styles = require('./styles.js');
+var React = require('react');
+var classNames = require('classnames');
+var Skeleton_module = require('./Skeleton.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 var SkeletonRect = function SkeletonRect(_a) {
   var className = _a.className,
     width = _a.width,
     height = _a.height,
     borderRadius = _a.borderRadius;
-  return jsxRuntime.jsx(styles.StyledRect, {
-    className: className,
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(Skeleton_module.default.rect, className),
     style: {
       width: width,
       height: height,
@@ -21,8 +27,8 @@ var SkeletonText = function SkeletonText(_a) {
   var className = _a.className,
     width = _a.width,
     size = _a.size;
-  return jsxRuntime.jsx(styles.StyledText, {
-    className: className,
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(Skeleton_module.default.text, className),
     style: {
       width: width,
       height: size

package/Switch/Switch.module.scss.js

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

package/Switch/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { SwitchProps } from "./index.props";
-declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default Switch;

package/Switch/index.js

@@ -3,20 +3,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
-var styles = require('./styles.js');
+var classNames = require('classnames/bind');
+var Switch_module = require('./Switch.module.scss.js');
 
-var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs(styles.BaseContainer, {
-    disabled: !!props.disabled,
-    children: [jsxRuntime.jsx(styles.BaseInput, tslib.__assign({
-      ref: ref,
-      type: "checkbox"
-    }, props)), jsxRuntime.jsx(styles.BaseSwitchContainer, {
-      children: jsxRuntime.jsx(styles.BaseSwitch, {})
-    })]
-  });
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Switch_module.default);
+var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
+  var disabled = _a.disabled,
+    className = _a.className,
+    _c = _a.variant,
+    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, {
+      root_disabled: disabled ? 1 : 0
+    }, className)
+  }, /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
+    className: clx(Switch_module.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))
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Switch_module.default.baseSwitch)
+  })));
 });
 
 exports.default = Switch;

package/Switch/index.props.d.ts

@@ -1,18 +1,5 @@
-import type { CSSObject } from "@emotion/react";
 import type { InputHTMLAttributes } from "react";
-type SwitchStyle = {
-    backgroundColor?: CSSObject["backgroundColor"];
-    borderColor?: CSSObject["borderColor"];
-};
-export type SwitchStates = {
-    circle: {
-        backgroundColor?: CSSObject["backgroundColor"];
-    };
-    state: {
-        normal: SwitchStyle;
-        checked: SwitchStyle;
-    };
-};
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    variant?: "primary";
+    disabled?: boolean;
 }
-export {};