colibri-ui 0.7.35 → 0.7.37

package/esm/Badge/Control/index.js

@@ -1,16 +1,15 @@
 import { __rest, __assign } from 'tslib';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Root } from './styles.js';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Control.module.scss.js';
 
 var BadgeControl = function BadgeControl(_a) {
   var className = _a.className,
     children = _a.children,
     props = __rest(_a, ["className", "children"]);
-  return jsx(Root, __assign({
-    className: className
-  }, props, {
-    children: children
-  }));
+  return /*#__PURE__*/React.createElement("span", __assign({
+    className: classNames(styles.root, className)
+  }, props), children);
 };
 
 export { BadgeControl };

package/esm/Badge/index.js

@@ -1,20 +1,23 @@
 import { __rest, __assign } from 'tslib';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
+import classNames from 'classnames/bind';
 import { BadgeControl } from './Control/index.js';
-import { Root } from './styles.js';
+import styles from './Badge.module.scss.js';
 
+var clx = classNames.bind(styles);
 var Badge = function Badge(_a) {
+  var _b;
   var className = _a.className,
     content = _a.content,
     children = _a.children,
     invisibleProp = _a.invisible,
-    _b = _a.max,
-    max = _b === void 0 ? 99 : _b,
-    _c = _a.showZero,
-    showZero = _c === void 0 ? false : _c,
+    _c = _a.max,
+    max = _c === void 0 ? 99 : _c,
+    _d = _a.showZero,
+    showZero = _d === void 0 ? false : _d,
     color = _a.color,
-    _d = _a.direction,
-    direction = _d === void 0 ? "right" : _d,
+    _e = _a.direction,
+    direction = _e === void 0 ? "right" : _e,
     background = _a.background,
     props = __rest(_a, ["className", "content", "children", "invisible", "max", "showZero", "color", "direction", "background"]);
   var invisible = invisibleProp;
@@ -25,18 +28,16 @@ var Badge = function Badge(_a) {
   if (content) {
     displayValue = content > max ? "".concat(max, "+") : content;
   }
-  return jsxs(BadgeControl, __assign({}, props, {
-    children: [children, jsx(Root, {
-      style: {
-        color: color,
-        backgroundColor: background
-      },
-      direction: direction,
-      invisible: invisible,
-      className: className,
-      children: displayValue
-    })]
-  }));
+  return /*#__PURE__*/React.createElement(BadgeControl, __assign({}, props), children, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: color,
+      backgroundColor: background
+    },
+    className: clx((_b = {
+      root: true
+    }, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
+    "data-cy": "badge"
+  }, displayValue));
 };
 
 export { Badge as default };

package/esm/Button/Button.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".root {\n  color: var(--palette-black);\n  padding: 0 12px;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  gap: 8px;\n  flex-shrink: 0;\n  border: 1px solid;\n  font-style: normal;\n  font-weight: 400;\n  height: 36px;\n  font-size: 15px;\n  line-height: 36px;\n  transition: transform 0.1s ease-out;\n  color: 0.15s linear;\n  transform: scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: fit-content;\n  border-radius: var(--button-border-radius);\n}\n.root_icon {\n  border-radius: 50%;\n  width: 36px;\n}\n.root_icon.size_xs {\n  width: 29px;\n}\n.root_icon.size_s {\n  width: 32px;\n}\n.root_icon.size_m {\n  width: 36px;\n}\n.root_icon.size_l {\n  width: 42px;\n}\n.root_fullWidth {\n  width: 100%;\n}\n.root_disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--button-primary-color-disabled);\n  background-color: var(--button-primary-background-color-disabled);\n  border-color: var(--button-primary-border-color-disabled);\n}\n\n.icon {\n  display: flex;\n}\n\n.size_xs {\n  height: 29px;\n  font-size: 12px;\n  line-height: 29px;\n}\n.size_s {\n  height: 32px;\n  font-size: 13px;\n  line-height: 32px;\n}\n.size_m {\n  height: 36px;\n  font-size: 15px;\n  line-height: 36px;\n}\n.size_l {\n  height: 42px;\n  font-size: 18px;\n  line-height: 42px;\n}\n\n.variant_primary {\n  color: var(--button-primary-color);\n  background-color: var(--button-primary-background-color);\n  border-color: var(--button-primary-border-color);\n}\n.variant_primary:hover {\n  color: var(--button-primary-color-hovered);\n  background-color: var(--button-primary-background-color-hovered);\n  border-color: var(--button-primary-border-color-hovered);\n}\n.variant_primary:active {\n  color: var(--button-primary-color-active);\n  background-color: var(--button-primary-background-color-active);\n  border-color: var(--button-primary-border-color-active);\n}\n.variant_secondary {\n  color: var(--button-secondary-color);\n  background-color: var(--button-secondary-background-color);\n  border-color: var(--button-secondary-border-color);\n}\n.variant_secondary:hover {\n  color: var(--button-secondary-color-hovered);\n  background-color: var(--button-secondary-background-color-hovered);\n  border-color: var(--button-secondary-border-color-hovered);\n}\n.variant_secondary:active {\n  color: var(--button-secondary-color-active);\n  background-color: var(--button-secondary-background-color-active);\n  border-color: var(--button-secondary-border-color-active);\n}\n.variant_pseudo {\n  color: var(--button-pseudo-color);\n  background-color: var(--button-pseudo-background-color);\n  border-color: var(--button-pseudo-border-color);\n}\n.variant_pseudo:hover {\n  color: var(--button-pseudo-color-hovered);\n  background-color: var(--button-pseudo-background-color-hovered);\n  border-color: var(--button-pseudo-border-color-hovered);\n}\n.variant_pseudo:active {\n  color: var(--button-pseudo-color-active);\n  background-color: var(--button-pseudo-background-color-active);\n  border-color: var(--button-pseudo-border-color-active);\n}\n.variant_clear {\n  color: var(--button-clear-color);\n  background-color: transparent;\n  border-color: transparent;\n}\n.variant_clear:hover {\n  color: var(--button-clear-color-hovered);\n}\n.variant_clear:active {\n  color: var(--button-clear-color-active);\n}";
+
+export { styles as default };

package/esm/Button/index.js

@@ -1,14 +1,14 @@
 import { __rest, __assign } from 'tslib';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef } from 'react';
-import { StyledButton, StyledIcon } from './styles.js';
+import React, { forwardRef } from 'react';
+import classNames from 'classnames/bind';
+import styles from './Button.module.scss.js';
 
+var clx = classNames.bind(styles);
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
   var className = _a.className,
-    _b = _a.fullWidth,
-    fullWidth = _b === void 0 ? false : _b,
-    _c = _a.scale,
-    scale = _c === void 0 ? false : _c,
+    _c = _a.fullWidth,
+    fullWidth = _c === void 0 ? false : _c,
     _d = _a.variant,
     variant = _d === void 0 ? "primary" : _d,
     iconStart = _a.iconStart,
@@ -16,27 +16,26 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     icon = _a.icon,
     size = _a.size,
     children = _a.children,
+    disabled = _a.disabled,
     onClick = _a.onClick,
-    props = __rest(_a, ["className", "fullWidth", "scale", "variant", "iconStart", "iconEnd", "icon", "size", "children", "onClick"]);
-  return jsxs(StyledButton, __assign({
+    props = __rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick"]);
+  return /*#__PURE__*/React.createElement("button", __assign({
     onClick: onClick,
     ref: ref,
-    size: size,
-    className: className,
-    variant: variant,
-    icon: icon,
-    fullWidth: fullWidth,
-    scale: scale,
+    className: clx(styles.root, (_b = {
+      root_icon: !!icon,
+      root_disabled: disabled ? 1 : 0,
+      root_fullWidth: fullWidth ? 1 : 0
+    }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className),
+    disabled: disabled,
     "data-cy": "button"
-  }, props, {
-    children: [icon && jsx(StyledIcon, {
-      children: icon
-    }), iconStart && jsx(StyledIcon, {
-      children: iconStart
-    }), children && children, iconEnd && jsx(StyledIcon, {
-      children: iconEnd
-    })]
-  }));
+  }, props), icon && /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.icon)
+  }, icon), iconStart && /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.icon)
+  }, iconStart), children && children, iconEnd && /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.icon)
+  }, iconEnd));
 });
 
 export { Button as default };

package/esm/Button/index.props.d.ts

@@ -1,43 +1,12 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
-import type { CSSObject } from "@emotion/react";
-type BaseStyles = {
-    color?: CSSObject["color"];
-    borderRadius: CSSObject["borderRadius"];
-    border?: CSSObject["border"];
-};
-type VariantStyles = {
-    color?: CSSObject["color"];
-    backgroundColor?: CSSObject["backgroundColor"];
-    borderColor?: CSSObject["borderColor"];
-    boxShadow?: CSSObject["boxShadow"];
-    borderWidth?: CSSObject["borderWidth"];
-    borderRadius?: CSSObject["borderRadius"];
-    border?: CSSObject["border"];
-};
-type VariantStates = {
-    normal?: VariantStyles;
-    hovered?: VariantStyles;
-    focused?: VariantStyles;
-    active?: VariantStyles;
-    disabled?: VariantStyles;
-};
-export type ButtonBase = {
-    base: BaseStyles;
-};
-export type ButtonVariant = {
-    primary: VariantStates;
-    secondary: VariantStates;
-    pseudo: VariantStates;
-    clear: VariantStates;
-};
+export type ButtonVariant = "primary" | "secondary" | "pseudo" | "clear";
 export type ButtonSize = "xs" | "s" | "m" | "l";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: keyof ButtonVariant;
+    variant?: ButtonVariant;
     fullWidth?: boolean;
     icon?: ReactNode;
     iconStart?: ReactNode;
     iconEnd?: ReactNode;
     size?: ButtonSize;
-    scale?: boolean;
+    disabled?: boolean;
 }
-export {};

package/esm/Checkbox/Checkbox.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".root {\n  display: flex;\n  flex-direction: column;\n}\n\n.wrapper {\n  display: flex;\n}\n\n.label {\n  display: inline-flex;\n  line-height: 18px;\n  position: relative;\n  cursor: pointer;\n}\n\n.text {\n  font-size: 16px;\n  margin-block-start: -1px;\n  margin-inline-start: 8px;\n}\n\n.fakeCheckbox {\n  background-color: var(--palette-white);\n  block-size: 16px;\n  border: 1px solid var(--palette-bg-3);\n  border-radius: 4px;\n  box-sizing: border-box;\n  direction: ltr;\n  display: block;\n  flex-shrink: 0;\n  inline-size: 16px;\n  position: relative;\n  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.checked {\n  border: 0;\n  background-color: var(--checkbox-primary-background-color-checked);\n}\n.checked::after {\n  box-sizing: content-box;\n  content: \"\";\n  display: block;\n  position: absolute;\n  block-size: 8px;\n  border-block-end: 2px solid var(--palette-black);\n  border-inline-end: 2px solid var(--palette-black);\n  inline-size: 4px;\n  inset-block-start: 45%;\n  inset-inline-start: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.variant_primary_error {\n  border-color: red;\n  box-shadow: 0 0 0 2px red;\n}\n.variant_primary_checked::after {\n  border-block-end: 2px solid var(--palette-white);\n  border-inline-end: 2px solid var(--palette-white);\n}\n\n.control {\n  inset-inline-start: -9999px;\n  position: absolute;\n}\n.control:disabled + .fakeCheckbox::after {\n  border-block-end: 2px solid var(--palette-bg-4);\n  border-inline-end: 2px solid var(--palette-bg-4);\n}\n.control:hover:not(:disabled) + .fakeCheckbox {\n  border-color: var(--palette-bg-3);\n}\n.control_variant_primary:focus:not(:disabled) + .fakeCheckbox {\n  box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);\n}\n.control_variant_primary:hover:not(:disabled) + .fakeCheckbox {\n  background-color: var(--checkbox-primary-background-color-hovered);\n}\n.control_variant_primary:active:not(:disabled) + .fakeCheckbox {\n  background-color: var(--checkbox-primary-background-color-active);\n  border-color: var(--checkbox-primary-border-color-active);\n  box-shadow: var(--checkbox-primary-box-shadow-active);\n}\n.control_variant_primary:disabled + .fakeCheckbox {\n  z-index: 1;\n  background-color: var(--checkbox-primary-background-color-disabled);\n}";
+
+export { styles as default };

package/esm/Checkbox/index.js

@@ -1,8 +1,11 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import React from 'react';
+import classNames from 'classnames/bind';
 import Typography from '../Typography/index.js';
-import { Label, Wrapper, Control, FakeCheckbox, Text, Root } from './styles.js';
+import styles from './Checkbox.module.scss.js';
 
+var clx = classNames.bind(styles);
 var Checkbox = function Checkbox(_a) {
+  var _b, _c;
   var id = _a.id,
     name = _a.name,
     value = _a.value,
@@ -12,41 +15,37 @@ var Checkbox = function Checkbox(_a) {
     onChange = _a.onChange,
     onFocus = _a.onFocus,
     onBlur = _a.onBlur,
-    _b = _a.variant,
-    variant = _b === void 0 ? "primary" : _b,
+    _d = _a.variant,
+    variant = _d === void 0 ? "primary" : _d,
     className = _a.className,
     disabled = _a.disabled,
     isError = _a.isError;
-  var control = jsx(Label, {
-    children: jsxs(Wrapper, {
-      children: [jsx(Control, {
-        className: className,
-        type: "checkbox",
-        id: id,
-        variant: variant,
-        name: name,
-        value: value,
-        checked: checked,
-        onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        disabled: disabled
-      }), jsx(FakeCheckbox, {
-        variant: variant,
-        checked: checked,
-        isError: isError
-      }), jsx(Text, {
-        children: label
-      })]
-    })
-  });
-  return jsxs(Root, {
-    children: [control, hint && jsx(Typography, {
-      variant: isError ? "alert" : "secondary",
-      tag: "span",
-      children: hint
-    })]
-  });
+  var control = /*#__PURE__*/React.createElement("label", {
+    className: clx(styles.label)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.wrapper)
+  }, /*#__PURE__*/React.createElement("input", {
+    className: clx(styles.control, (_b = {}, _b["control_variant_".concat(variant)] = !!variant, _b), className),
+    type: "checkbox",
+    id: id,
+    name: name,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.fakeCheckbox, (_c = {}, _c["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _c["variant_".concat(variant, "_error")] = isError ? 1 : 0, _c["variant_".concat(variant, "_checked")] = checked ? 1 : 0, _c.checked = checked ? 1 : 0, _c["variant_".concat(variant)] = !!variant, _c))
+  }), /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.text)
+  }, label)));
+  return /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.root)
+  }, control, hint && ( /*#__PURE__*/React.createElement(Typography, {
+    variant: isError ? "alert" : "secondary",
+    tag: "span"
+  }, hint)));
 };
 
 export { Checkbox as default };

package/esm/Checkbox/index.props.d.ts

@@ -1,23 +1,6 @@
 import type { ReactNode } from "react";
-import type { CSSObject } from "@emotion/react";
-type VariantStyles = {
-    backgroundColor?: CSSObject["backgroundColor"];
-    borderColor?: CSSObject["borderColor"];
-    boxShadow?: CSSObject["boxShadow"];
-};
-type VariantStates = {
-    normal?: VariantStyles;
-    hovered?: VariantStyles;
-    checked?: VariantStyles;
-    focused?: VariantStyles;
-    active?: VariantStyles;
-    disabled?: VariantStyles;
-};
-export type CheckboxVariant = {
-    primary: VariantStates;
-};
 export interface CheckboxProps {
-    variant?: keyof CheckboxVariant;
+    variant?: "primary";
     size?: "s" | "m" | "l";
     id?: string;
     name?: string;
@@ -32,4 +15,3 @@ export interface CheckboxProps {
     disabled?: boolean;
     isError?: boolean;
 }
-export {};

package/esm/Counter/Counter.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".root {\n  background-color: var(--palette-white);\n  border-radius: 4px;\n  box-sizing: border-box;\n  display: inline-block;\n  font-size: 16px;\n  max-block-size: 40px;\n  min-block-size: 40px;\n  min-inline-size: 96px;\n  overflow: hidden;\n  position: relative;\n}\n.root_fullWidth {\n  inline-size: 100%;\n}\n\n.control {\n  align-items: center;\n  block-size: 38px;\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.control_fullWidth {\n  inline-size: 100%;\n}\n\n.value {\n  font-weight: 500;\n  font-size: 18px;\n  inline-size: 24px;\n  user-select: none;\n  text-align: center;\n}";
+
+export { styles as default };

package/esm/Counter/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { Props } from "./index.props";
-declare const Counter: React.FC<Props>;
+import type { CounterProps } from "./index.props";
+declare const Counter: React.FC<CounterProps>;
 export default Counter;

package/esm/Counter/index.js

@@ -1,10 +1,11 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { useRef } from 'react';
+import React, { useRef } from 'react';
+import classNames from 'classnames/bind';
 import Button from '../Button/index.js';
 import MinusIcon from '../Icons/Minus.js';
 import PlusIcon from '../Icons/Plus.js';
-import { Root, Control, Value } from './styles.js';
+import styles from './Counter.module.scss.js';
 
+var clx = classNames.bind(styles);
 var Counter = function Counter(_a) {
   var _b = _a.value,
     value = _b === void 0 ? 1 : _b,
@@ -18,38 +19,39 @@ var Counter = function Counter(_a) {
   var lastNumValue = useRef(value);
   var minusDisabled = disabled || value <= min;
   var plusDisabled = disabled || value >= max;
-  return jsx(Root, {
-    className: className,
-    fullWidth: fullWidth,
-    children: jsxs(Control, {
-      fullWidth: fullWidth,
-      children: [jsx(Button, {
-        icon: jsx(MinusIcon, {
-          width: 16,
-          height: 16
-        }),
-        disabled: minusDisabled,
-        onClick: function onClick() {
-          onChange(value - 1);
-          lastNumValue.current = value - 1;
-        },
-        "aria-label": "decrease"
-      }), jsx(Value, {
-        children: value
-      }), jsx(Button, {
-        icon: jsx(PlusIcon, {
-          width: 16,
-          height: 16
-        }),
-        disabled: plusDisabled,
-        onClick: function onClick() {
-          onChange(value + 1);
-          lastNumValue.current = value + 1;
-        },
-        "aria-label": "increase"
-      })]
+  return /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.root, {
+      root_fullWidth: fullWidth ? 1 : 0
+    }, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.control, {
+      control_fullWidth: fullWidth ? 1 : 0
     })
-  });
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(MinusIcon, {
+      width: 16,
+      height: 16
+    }),
+    disabled: minusDisabled,
+    onClick: function onClick() {
+      onChange(value - 1);
+      lastNumValue.current = value - 1;
+    },
+    "aria-label": "decrease"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.value)
+  }, value), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(PlusIcon, {
+      width: 16,
+      height: 16
+    }),
+    disabled: plusDisabled,
+    onClick: function onClick() {
+      onChange(value + 1);
+      lastNumValue.current = value + 1;
+    },
+    "aria-label": "increase"
+  })));
 };
 
 export { Counter as default };

package/esm/Counter/index.props.d.ts

@@ -1,4 +1,4 @@
-export type Props = {
+export type CounterProps = {
     value: number;
     max: number;
     min: number;

package/esm/DotsLoader/DotsLoader.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".wrapper {\n  display: flex;\n  justify-content: space-between;\n  width: 70px;\n}\n\n.dot {\n  animation-duration: 1.6s;\n  animation-iteration-count: infinite;\n  animation-name: pending;\n  background-color: var(--palette-black);\n  border-radius: 5px;\n  height: 10px;\n  transform: scale(0);\n  width: 10px;\n}\n@keyframes pending {\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n}\n.dot_first {\n  animation-delay: 0s;\n}\n.dot_second {\n  animation-delay: 0.2s;\n}\n.dot_third {\n  animation-delay: 0.4s;\n}\n.dot_fourth {\n  animation-delay: 0.6s;\n}";
+
+export { styles as default };

package/esm/DotsLoader/index.js

@@ -1,23 +1,45 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { Wrapper, Dot } from './styles.js';
+import React from 'react';
+import classNames from 'classnames/bind';
+import styles from './DotsLoader.module.scss.js';
 
+var clx = classNames.bind(styles);
 var DotsLoader = function DotsLoader(_a) {
   var color = _a.color;
-  return jsxs(Wrapper, {
-    children: [jsx(Dot, {
-      first: true,
-      color: color
-    }), jsx(Dot, {
-      second: true,
-      color: color
-    }), jsx(Dot, {
-      third: true,
-      color: color
-    }), jsx(Dot, {
-      fourth: true,
-      color: color
-    })]
-  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: clx("wrapper")
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_first: true
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_second: true
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_third: true
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_fourth: true
+    })
+  }));
 };
 
 export { DotsLoader as default };

package/esm/Dropdown/Dropdown.module.scss.js

@@ -0,0 +1,3 @@
+var dropDownStyles = ".popperContainer {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n\n.overlayContainer {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  overflow: hidden;\n  border-color: var(--palette-bg-2);\n  background-color: var(--palette-white);\n}";
+
+export { dropDownStyles as default };

package/esm/Dropdown/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { IDropdownProps } from "./index.props";
-declare const Dropdown: React.FC<IDropdownProps>;
+import type { DropdownProps } from "./index.props";
+declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/esm/Dropdown/index.js

@@ -1,11 +1,11 @@
 import { __assign } from 'tslib';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { useState, useMemo, Children, useCallback, useEffect } from 'react';
+import React, { useState, useMemo, Children, useCallback, useEffect } from 'react';
 import { usePopper } from 'react-popper';
+import classNames from 'classnames';
 import Portal from '../Portal/index.js';
 import { on } from '../helpers/on.js';
 import ClickOutside from '../ClickOutside/index.js';
-import { PopperContainer, OverlayContainer } from './styles.js';
+import dropDownStyles from './Dropdown.module.scss.js';
 
 var Dropdown = function Dropdown(_a) {
   var children = _a.children,
@@ -51,9 +51,7 @@ var Dropdown = function Dropdown(_a) {
     update = _l.update;
   var isNotComponent = typeof children === "string";
   var reference = useMemo(function () {
-    return Children.only(isNotComponent ? jsx("button", {
-      children: children
-    }) : children);
+    return Children.only(isNotComponent ? /*#__PURE__*/React.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
   var onToggle = useCallback(function (e) {
     e.stopPropagation();
@@ -111,31 +109,25 @@ var Dropdown = function Dropdown(_a) {
   useEffect(function () {
     if (update) update();
   }, [update, visible]);
-  return jsxs(Fragment, {
-    children: [jsx(reference.type, __assign({
-      ref: setControlElement,
-      tabIndex: 0
-    }, reference.props)), isVisible && jsx(Portal, {
-      children: jsx(ClickOutside, {
-        onClick: onClickOutside,
-        children: jsx(PopperContainer, __assign({
-          ref: setPopperElement,
-          style: __assign(__assign(__assign({}, styles.popper), {
-            zIndex: zIndex,
-            minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
-          }), samewidth && {
-            maxWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
-          }),
-          tabIndex: 0
-        }, attributes.popper, {
-          children: jsx(OverlayContainer, {
-            onClick: onClickOverlay,
-            children: overlay
-          })
-        }))
-      })
-    })]
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(reference.type, __assign({
+    ref: setControlElement,
+    tabIndex: 0
+  }, reference.props)), isVisible && ( /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ClickOutside, {
+    onClick: onClickOutside
+  }, /*#__PURE__*/React.createElement("div", __assign({
+    ref: setPopperElement,
+    className: classNames(dropDownStyles.popperContainer),
+    style: __assign(__assign(__assign({}, styles.popper), {
+      zIndex: zIndex,
+      minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
+    }), samewidth && {
+      maxWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
+    }),
+    tabIndex: 0
+  }, attributes.popper), /*#__PURE__*/React.createElement("div", {
+    className: classNames(dropDownStyles.overlayContainer),
+    onClick: onClickOverlay
+  }, overlay))))));
 };
 
 export { Dropdown as default };

package/esm/Dropdown/index.props.d.ts

@@ -3,7 +3,7 @@ import type { PositioningStrategy } from "@popperjs/core";
 import type { Placement as PopperPlacement } from "@popperjs/core";
 export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end">;
 export type Trigger = "click" | "hover" | "focus";
-export interface IDropdownProps {
+export type DropdownProps = {
     children: ReactNode;
     zIndex?: number;
     disabled?: boolean;
@@ -15,4 +15,4 @@ export interface IDropdownProps {
     visible?: boolean;
     preventOverflow?: boolean;
     samewidth?: boolean;
-}
+};

package/esm/Grid/Grid.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".root {\n  width: 100%;\n}\n\n.items {\n  display: grid;\n  grid-auto-flow: row dense;\n}";
+
+export { styles as default };

package/esm/Grid/Item/Grid-Item.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".full {\n  grid-column: 1/-1;\n}";
+
+export { styles as default };